Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8d5e9c02ad | ||
|
|
a0eb56e115 | ||
|
|
6c31c8752d | ||
|
|
8e15354c2a | ||
|
|
3f888cbeb8 | ||
|
|
f82b6ba8f6 | ||
|
|
bf0b5448b6 | ||
|
|
6271fbb3b0 | ||
|
|
eff86a1f3e | ||
|
|
403fc9d5cb | ||
|
|
67b8a4f581 | ||
|
|
e9d50f1392 | ||
|
|
5d2fd6674f | ||
|
|
2a128f49ab | ||
|
|
b5403fbc0c | ||
|
|
39aff9d684 |
@@ -1,4 +1,2 @@
|
||||
**/node_modules
|
||||
**/dist
|
||||
.git
|
||||
.gitignore
|
||||
|
||||
-22
@@ -1,22 +0,0 @@
|
||||
## Node ###
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Build
|
||||
dist/
|
||||
@@ -0,0 +1,30 @@
|
||||
# Personal-Website
|
||||
A nice introduction to my chaos
|
||||
|
||||
## Backstory
|
||||
Instead of calling it my Personal-Website, you could better call it my Personal-Playground.
|
||||
|
||||
This repo is an example of not being afraid to change a codebase around.
|
||||
It shows the journey of achieving code that fits the needs.
|
||||
|
||||
The posts started with pure excitement from building this site.
|
||||
Making my own content and having complete contol over the format thrilled me.
|
||||
For me, it is about making memorable content, something I can proudly look back on.
|
||||
|
||||
Sarcastic, serious and suprising content.
|
||||
Which becomes super silly stuff when looking back at it ;)
|
||||
|
||||
## Content
|
||||
Once in a while you can enjoy a new post on the website.
|
||||
The posts started talking about the website and all changes that came along.
|
||||
As the website is quite far in development, more focus is put into making relaxing content to read through.
|
||||
|
||||
## Experimentations
|
||||
|
||||
- Swapping QA page for a podcast page
|
||||
- Adding a code++ page: page with a collection of helpful code improvements I came across
|
||||
- Adding a portfolio
|
||||
|
||||
## Thank you
|
||||
Thanks for reading all of this!
|
||||
If you have any questions or sugestions, feel free to send an e-mail to me@raymon.dev.
|
||||
@@ -1 +0,0 @@
|
||||
**/node_modules
|
||||
@@ -0,0 +1 @@
|
||||
posts/*
|
||||
@@ -1,4 +1,3 @@
|
||||
FROM nginx as production-stage
|
||||
RUN mkdir /app
|
||||
COPY /public /app
|
||||
COPY nginx.conf /etc/nginx/nginx.conf
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
# Templates will be filled by posts
|
||||
index_template = File.read!("./templates/post_index_page.html")
|
||||
post_template = File.read!("./templates/post_single_page.html")
|
||||
|
||||
post_feed_item_template = File.read!("./templates/post_item.xml")
|
||||
post_feed_template = File.read!("./templates/posts.xml")
|
||||
|
||||
# Converting handlebars in template to values
|
||||
fill_template = fn template, pairs ->
|
||||
Regex.compile!("{{(.*)}}") |>
|
||||
Regex.replace(template, fn _, key -> if key != "content" do Map.get(pairs, String.to_atom(key)) else
|
||||
Map.get(pairs, String.to_atom(key))
|
||||
# Converting \n to paragraphs
|
||||
|> String.split("\\n")
|
||||
|> Enum.reject(fn(x) -> x == "" end)
|
||||
|> Enum.map(fn paragraph -> ("<p>" <> paragraph <> "</p>\n") end)
|
||||
|> Enum.join("")
|
||||
end
|
||||
end)
|
||||
end
|
||||
|
||||
fill_template_pretemplated = fn template -> &fill_template.(template, &1) end
|
||||
|
||||
post_contents = File.ls!("./posts")
|
||||
|> Enum.reject(fn(x) -> String.starts_with?(x, ".") end)
|
||||
|> Enum.map(fn f -> File.read!("./posts/" <> f) end)
|
||||
|> Enum.map(fn c -> String.split(c, "\n") end)
|
||||
|> Enum.map(fn c -> Enum.reject(c, fn(x) -> x == "" end) end)
|
||||
|> Enum.map(fn c -> Enum.chunk_every(c, 2) end)
|
||||
|> Enum.map(fn c ->
|
||||
Enum.map(c, fn [k, v] -> %{String.to_atom(k) => v} end)
|
||||
|> Enum.reduce(%{}, fn(x, acc) -> Map.merge(x, acc) end)
|
||||
end)
|
||||
|
||||
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
index_file = post_contents
|
||||
|> Enum.sort_by(fn m -> Map.get(m, :date) |> (fn d -> Enum.find_index(months, &(&1 == String.slice(d, 8..10))) end).() end)
|
||||
|> Enum.reverse()
|
||||
# Group by month
|
||||
|> Enum.group_by(fn m -> Map.get(m, :date) |> String.slice(8..15) end)
|
||||
|> Enum.sort_by(fn {d, _c} -> ((length months) * elem(Integer.parse(String.slice(d, 4..7)), 0)) + Enum.find_index(months, &(&1 == String.slice(d, 0..2))) end)
|
||||
|> Enum.reverse()
|
||||
|> Enum.map(fn {month, posts} -> "\n<h1>" <> month <> "</h1>\n" <> (posts |>
|
||||
Enum.map(fn post -> "<h2>" <> (Map.get(post, :date) |> String.slice(0..6)) <>
|
||||
" - <a href=\"" <> Map.get(post, :id) <> ".html\">" <> Map.get(post, :title) <> "</a></h2>"
|
||||
end) |> Enum.join("\n")) end)
|
||||
|> Enum.join("\n")
|
||||
|> (fn v -> %{index: v} end).()
|
||||
|> fill_template_pretemplated.(index_template).()
|
||||
|
||||
File.open!("./public/gen/index.html", [:write])
|
||||
|> IO.binwrite(index_file)
|
||||
|> File.close()
|
||||
|
||||
post_contents
|
||||
|> Enum.each(fn post ->
|
||||
File.open!("./public/gen/" <> Map.get(post, :id) <> ".html", [:write])
|
||||
|> IO.binwrite(fill_template.(post_template, post))
|
||||
|> File.close()
|
||||
end)
|
||||
|
||||
post_feed = post_contents
|
||||
|> Enum.sort_by(fn m -> Map.get(m, :date) end)
|
||||
|> Enum.reverse()
|
||||
|> Enum.map(fill_template_pretemplated.(post_feed_item_template))
|
||||
|> Enum.join("\n")
|
||||
|> (fn v -> %{items: v} end).()
|
||||
|> fill_template_pretemplated.(post_feed_template).()
|
||||
|
||||
File.open!("./public/gen/rss.xml", [:write])
|
||||
|> IO.binwrite(post_feed)
|
||||
|> File.close()
|
||||
@@ -7,9 +7,6 @@ events {
|
||||
}
|
||||
http {
|
||||
include /etc/nginx/mime.types;
|
||||
types {
|
||||
application/javascript mjs;
|
||||
}
|
||||
|
||||
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
|
||||
'$status $body_bytes_sent "$http_referer" '
|
||||
@@ -29,10 +26,6 @@ http {
|
||||
alias /app/assets/styling;
|
||||
}
|
||||
|
||||
location /js {
|
||||
alias /app/lib;
|
||||
}
|
||||
|
||||
location /posts {
|
||||
alias /app/gen/;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
id
|
||||
4739537f3d29e1047a45c254
|
||||
title
|
||||
Example post for my new post page!
|
||||
date
|
||||
Mon, 11 May 2020 13:25:00 GMT
|
||||
content
|
||||
My new posts page is live
|
||||
@@ -1,2 +1 @@
|
||||
posts/*
|
||||
gen/*
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
# Templates will be filled by posts
|
||||
index_template = File.read!("./templates/post_index_page.html")
|
||||
post_template = File.read!("./templates/post_single_page.html")
|
||||
|
||||
post_feed_item_template = File.read!("./templates/post_item.xml")
|
||||
post_feed_template = File.read!("./templates/posts.xml")
|
||||
|
||||
post_contents = File.ls!("./posts")
|
||||
|> Enum.reject(fn(x) -> String.starts_with?(x, ".") end)
|
||||
|> Enum.map(fn f -> File.read!("./posts/" <> f) end)
|
||||
|> Enum.map(fn c -> String.split(c, "\n") end)
|
||||
|> Enum.map(fn c -> Enum.reject(c, fn(x) -> x == "" end) end)
|
||||
|> Enum.map(fn c -> Enum.chunk_every(c, 2) end)
|
||||
|> Enum.map(fn c ->
|
||||
Enum.map(c, fn [k, v] -> %{String.to_atom(k) => v} end)
|
||||
|> Enum.reduce(%{}, fn(x, acc) -> Map.merge(x, acc) end)
|
||||
end)
|
||||
|
||||
index_file = post_contents
|
||||
|> Enum.sort_by(fn m -> Map.get(m, :date) end)
|
||||
|> Enum.reverse()
|
||||
# Group by month
|
||||
|> Enum.group_by(fn m -> Map.get(m, :date) |> String.slice(0..6) end)
|
||||
|> Enum.reverse()
|
||||
|> Enum.map(fn {month, posts} -> "\n<h1>" <> month <> "</h1>\n" <> (posts |>
|
||||
Enum.map(fn post -> "<h2>" <> (Map.get(post, :date) |> String.slice(0..9)) <>
|
||||
" - <a href=\"" <> Map.get(post, :id) <> ".html\">" <> Map.get(post, :title) <> "</a></h2>"
|
||||
end) |> Enum.join("\n")) end)
|
||||
|> (fn template -> Regex.replace(Regex.compile!("{{index}}"), index_template, fn _, __ -> template end) end).()
|
||||
|
||||
File.open!("./gen/index.html", [:write])
|
||||
|> IO.binwrite(index_file)
|
||||
|> File.close()
|
||||
|
||||
|
||||
post_contents
|
||||
|> Enum.each(fn post ->
|
||||
File.open!("./gen/" <> Map.get(post, :id) <> ".html", [:write])
|
||||
|> IO.binwrite(
|
||||
# Converting handlebars to values
|
||||
Regex.compile!("{{(.*)}}") |>
|
||||
Regex.replace(post_template, fn _, key -> if key != "content" do Map.get(post, String.to_atom(key)) else
|
||||
Map.get(post, String.to_atom(key))
|
||||
# Converting \n to paragraphs
|
||||
|> String.split("\\n")
|
||||
|> Enum.reject(fn(x) -> x == "" end)
|
||||
|> Enum.map(fn paragraph -> ("<p>" <> paragraph <> "</p>\n") end)
|
||||
|> Enum.join("")
|
||||
end
|
||||
end))
|
||||
|> File.close()
|
||||
end)
|
||||
|
||||
post_feed = post_contents
|
||||
|> Enum.sort_by(fn m -> Map.get(m, :date) end)
|
||||
|> Enum.reverse()
|
||||
|> Enum.map(fn post ->
|
||||
Regex.compile!("{{(.*)}}") |>
|
||||
Regex.replace(post_feed_item_template, fn _, key -> Map.get(post, String.to_atom(key))
|
||||
end)
|
||||
end)
|
||||
|> Enum.join("\n")
|
||||
|> (fn items -> (Regex.compile!("{{items}}") |>
|
||||
Regex.replace(post_feed_template, fn _, __ -> items end))
|
||||
end).()
|
||||
|
||||
File.open!("./gen/rss.xml", [:write])
|
||||
|> IO.binwrite(post_feed)
|
||||
|> File.close()
|
||||
@@ -8,8 +8,6 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Raymon Zutekouw</title>
|
||||
|
||||
<link rel="preload" href="./lib/me.mjs" as="script" crossorigin="anonymous" type="application/javascript">
|
||||
<link rel="preload" href="index.mjs" as="script" crossorigin="anonymous" type="application/javascript">
|
||||
<link rel="dns-prefetch" href="https://cdn.statically.io">
|
||||
|
||||
<link defer
|
||||
@@ -32,7 +30,7 @@
|
||||
<div>
|
||||
<p>
|
||||
Hi there, good to see you on my website.
|
||||
My name is Raymon Zutekouw (<span id="age">born on 29-08-2002</span>)
|
||||
My name is Raymon Zutekouw; Self-thaught programmer by heart.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
@@ -48,6 +46,5 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script async type="module" src="index.mjs"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
import { age } from "./lib/me.mjs"
|
||||
|
||||
const age_span = document.getElementById("age")
|
||||
age_span.textContent = age().toString()
|
||||
@@ -1,17 +0,0 @@
|
||||
export function age() {
|
||||
let birthdate = new Date("29 August 2002")
|
||||
let now = new Date()
|
||||
|
||||
let age = now.getFullYear() - birthdate.getFullYear()
|
||||
|
||||
if (now.getMonth() < birthdate.getMonth())
|
||||
age--
|
||||
|
||||
if (
|
||||
birthdate.getMonth() === now.getMonth() &&
|
||||
now.getDate() < birthdate.getDate()
|
||||
)
|
||||
age--
|
||||
|
||||
return age
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
version: "3.3"
|
||||
services:
|
||||
client:
|
||||
build: client/
|
||||
ports:
|
||||
- "5010:80"
|
||||
volumes:
|
||||
- "./client/public:/app:rw"
|
||||
Reference in New Issue
Block a user