Keep sentence spacing in RSS feed article

- Fix overflow for code blocks
- Fix navbar width

.dockerignore

@@ -1,4 +1,2 @@
-**/node_modules
-**/dist
 .git
 .gitignore

.gitattributes

@@ -0,0 +1,3 @@
+* text=auto
+eol=lf
+

.github/workflows/nodejs.yml

@@ -1,32 +0,0 @@
-name: Node.js CI
-
-on:
-  push:
-    branches: [ master, beta ]
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  build:
-    env:
-      CLIENT_DIR: ./client
-
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [10.x, 12.x, 13.x]
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-      working-directory: ${{env.CLIENT_DIR}}
-    - run: npm run build --if-present
-      working-directory: ${{env.CLIENT_DIR}}
-    - run: npm test
-      working-directory: ${{env.CLIENT_DIR}}
-      env:
-        CI: true

.gitignore

@@ -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/

README.md

@@ -0,0 +1,32 @@
+# Personal-Website
+[![built with HyperLisp!](https://img.shields.io/badge/built%20with-HyperLisp!-informational)](https://github.com/circl-lastname/HyperLisp)
+
+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.

client/.dockerignore

@@ -1,2 +0,0 @@
-**/node_modules
-**/dist

client/.gitignore

@@ -0,0 +1,10 @@
+public/*.html
+public/error/*.html
+templates/*.html
+
+public/assets/images/*
+
+posts_custom/*
+!posts_custom/ExamplePostCustomFormat
+posts_org/*
+!posts_org/ExamplePostOrgFormat.org

client/Dockerfile

@@ -1,11 +1,3 @@
-FROM node:latest as build-stage
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY ./ .
-RUN npm run build
-
 FROM nginx as production-stage
 RUN mkdir /app
-COPY --from=build-stage /app/dist /app
 COPY nginx.conf /etc/nginx/nginx.conf

client/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
-}

client/gen.exs

@@ -0,0 +1,129 @@
+# 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 ->
+  ~r/{{(.*)}}/U
+  |> Regex.replace(template, fn _, key -> Map.get(pairs, String.to_atom(key)) end)
+end
+
+fill_template_pretemplated = fn template -> &fill_template.(template, &1) end
+
+filterCutFileExtension = fn files ->
+  fn ext ->
+    Enum.filter(files, &String.ends_with?(&1, "." <> ext))
+    |> Enum.map(&String.replace_suffix(&1, "." <> ext, ""))
+    |> (fn x -> %{String.to_atom(ext) => x} end).()
+  end
+end
+
+isMeta = &String.starts_with?(&1, "#+")
+
+posts_org =
+  File.ls!("./posts_org")
+  |> Enum.reject(fn x -> String.starts_with?(x, ".") end)
+  |> (fn files -> Enum.map(["org", "html"], filterCutFileExtension.(files)) end).()
+  |> Enum.reduce(%{}, fn x, acc -> Map.merge(x, acc) end)
+
+post_contents_org =
+  Enum.filter(Map.get(posts_org, :org), fn el -> Enum.member?(Map.get(posts_org, :html), el) end)
+  |> Enum.map(
+    &(File.read!("./posts_org/" <> &1 <> ".org")
+      |> (fn fileContent -> String.split(fileContent, "\n") end).()
+      |> Enum.take_while(isMeta)
+      |> Enum.map(fn metaOrg ->
+        [head | tail] = String.split(metaOrg, ":")
+
+        %{
+          (String.slice(head, 2..-1) |> String.downcase() |> String.to_atom()) =>
+            String.slice(Enum.join(tail, ":"), 1..-1)
+        }
+      end)
+      |> Enum.reduce(%{:content => File.read!("./posts_org/" <> &1 <> ".html")}, fn x, acc ->
+        Map.merge(x, acc)
+      end))
+  )
+
+months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+
+dateFolder = fn p ->
+  Map.get(p, :date)
+  |> String.slice(8..15)
+  |> String.split(" ")
+  |> (fn ([month, year]) -> year <> "/" <> Integer.to_string(Enum.find_index(months, &(&1 == month)) + 1) <> "/" end).()
+end
+normalize_title = fn title -> String.replace(String.downcase(title), " ", "-") end
+
+constructLocalPath = fn p -> dateFolder.(p) <> normalize_title.(Map.get(p, :title)) end
+
+post_contents = post_contents_org
+  |> Enum.map(fn postMap -> Map.merge(postMap, %{localpath: (constructLocalPath.(postMap))}) end)
+
+date_sort = fn post ->
+  date = Map.get(post, :date)
+  month = Enum.find_index(months, &(&1 == String.slice(date, 8..10)))
+  day = elem(Integer.parse(String.slice(date, 5..6)), 0)
+  32 * month + day
+end
+
+index_file =
+  post_contents
+  |> Enum.sort_by(
+    &(Map.get(&1, :date)
+      |> String.slice(5..6)
+      |> Integer.parse())
+  )
+  |> Enum.reverse()
+  # Group by year
+  |> Enum.group_by(fn m -> Map.get(m, :date) |> String.slice(12..15) end)
+  |> Enum.sort_by(fn {d, _c} -> Integer.parse(d) end)
+  |> Enum.reverse()
+  |> Enum.map(fn {year, posts} -> "\n<h1>" <> "12," <> (year |> String.slice(1..3)) <> "</h1>\n<ul>" <> (posts |> Enum.sort_by(date_sort) |> Enum.reverse() |>
+      Enum.map(fn post -> "<li class=\"post-link\">" <>
+                            "<time datetime=\""<> Map.get(post, :date) <> "\">" <> (Map.get(post, :date) |> String.slice(0..10)) <> "</time>" <>
+                            " - " <>
+                            "<a href=\"" <> Map.get(post, :localpath) <> ".html\">" <> Map.get(post, :title) <> "</a>" <>
+                          "</li>"
+      end) |> Enum.join("\n")) end)
+  |> Enum.join("\n</ul>")
+  |> (fn v -> %{index: v} end).()
+  |> fill_template_pretemplated.(index_template).()
+
+File.open!("./public/gen/index.html", [:write])
+  |> IO.binwrite(index_file)
+  |> File.close()
+
+
+prepare_path = fn path ->
+  File.mkdir_p!(Path.dirname(path))
+  path
+end
+
+post_contents
+  |> Enum.each(fn post -> post
+      |> (fn p -> "./public/gen/" <> Map.get(p, :localpath) <> ".html" end).()
+      |> prepare_path.()
+      |> File.open!([:write])
+      |> IO.binwrite(fill_template.(post_template, post))
+      |> File.close()
+  end)
+
+stripForRSS = fn content -> content
+  |> String.replace("\n", " ")
+end
+
+post_feed =
+  post_contents
+  |> Enum.map(fn m -> Map.update!(m, :content, stripForRSS) end)
+  |> 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()

client/nginx.conf

@@ -7,7 +7,7 @@ events {
 }
 http {
   include       /etc/nginx/mime.types;
-  default_type  application/octet-stream;
+
   log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                     '$status $body_bytes_sent "$http_referer" '
                     '"$http_user_agent" "$http_x_forwarded_for"';
@@ -20,8 +20,21 @@ http {
     location / {
       root   /app;
       index  index.html;
-      try_files $uri $uri/ /index.html;
+      try_files $uri $uri/ $uri.html $uri/index.html =404;
     }
+    location /css {
+      alias /app/assets/styling;
+    }
+
+    location /posts {
+      alias /app/gen/;
+    }
+
+    error_page 404 /404.html;
+    location = /404.html {
+      root /app/error;
+    }
+
     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
       root   /usr/share/nginx/html;

client/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "personal-website",
-  "version": "1.0.0",
-  "private": true,
-  "description": "A nice introduction to my chaos",
-  "main": "src/main.js",
-  "scripts": {
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "serve": "vue-cli-service serve",
-    "test": "node test_runner"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Raymonzut/Personal-Website.git"
-  },
-  "author": "Raymonzut",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/Raymonzut/Personal-Website/issues"
-  },
-  "homepage": "https://github.com/Raymonzut/Personal-Website#readme",
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11",
-    "vue-resource": "^1.5.1",
-    "vue-router": "^3.1.6"
-  },
-  "devDependencies": {
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.1.2",
-    "@vue/cli-plugin-babel": "~4.2.0",
-    "@vue/cli-plugin-eslint": "~4.2.0",
-    "@vue/cli-service": "~4.2.0",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
-}

client/posts_org/ExamplePostOrgFormat.org

@@ -0,0 +1,3 @@
+#+TITLE: Example post for my new org-gen post page!
+#+DATE: Wed, 28 Apr 2021 11:25:00 GMT
+My new posts page is live, this post has been generated from an org file

client/public/.gitignore

@@ -0,0 +1 @@
+gen/*

client/public/assets/styling/general.css

@@ -0,0 +1,70 @@
+:root {
+  --primary-color: #272736;
+  --text-color: #ffffeb;
+
+  /*  Overriding DP DS */
+  --body-background: var(--primary-color);
+  --body-color: var(--text-color);
+
+  --nav-color: var(--primary-color);
+  --nav-background: var(--text-color);
+
+  --a-color: var(--text-color);
+}
+
+nav {
+  width: 100vw;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+main {
+  padding-bottom: 12em;
+}
+
+article {
+  max-width: 1000px;
+  margin: auto;
+}
+
+pre {
+  padding: 1em;
+  padding-left: 2em;
+  border: solid;
+  border-radius: 1em;
+  border-width: 1px;
+  border-color: var(--text-color);
+  overflow: scroll;
+}
+
+.figure > p {
+  text-align: center;
+}
+
+.question {
+  font-style: italic;
+}
+
+h1 {
+  font-size: 2.0em;
+}
+
+.post-link {
+  font-family: monospace;
+  font-size: 1.25em;
+  margin: auto 0;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --primary-color: #ffffeb;
+    --text-color: #272736;
+  }
+}
+
+@media (max-width: 420px) {
+  #app {
+    margin-left: 0vw;
+    margin-right: 0vw;
+  }
+}

client/public/assets/styling/template.css

@@ -0,0 +1,422 @@
+/* Variables */
+
+:root {
+  --body-color: rgb(250,250,250);
+  --body-background: rgb(30,40,60);
+  --body-font-family: 'Oxygen', sans-serif;
+  --body-scrollbar-color: dark;
+  --body-margin: 10vw;
+  --body-max-width: 1920px;
+  --body-div-margin: 0;
+  --body-div-padding: 0;
+  --body-div-max-width: none;
+
+  --a-color: white;
+  --a-text-decoration-color: #09c5f4;
+
+  --code-color: white;
+  --code-background: rgba(0,0,0,0.25);
+  --code-font-family: 'Oxygen Mono', monospace;
+
+  --kbd-font-family: var(--code-font-family);
+  --kbd-border: 1px solid white;
+
+  --var-font-family: var(--code-font-family);
+  --var--color: orange;
+
+  --nav-color: black;
+  --nav-background: rgba(255,255,255,0.75);
+  --nav-padding: 1em 0.5em 1em 0.5em;
+
+  --details-background: rgba(0,0,0,0.25);
+  --details-padding: .75em;
+
+  --mark-color: black;
+  --mark-background: rgb(239,219,67);
+
+  --img-margin-left: auto;
+  --img-margin-right: auto;
+
+  --table-max-width: 500px;
+  --table-border: 1px solid white;
+  --table-tr-even-background: rgba(255,255,255,0.1);
+
+  --select-border-color: white;
+  --select-glyph: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+
+  --input-border: 1px solid white;
+  --input-max-width: 500px;
+  --input-font-size: 1em;
+  --input-disabled-background: rgba(255,255,255,.1);
+
+  --button-background: #09c5f4;
+  --button-color: white;
+}
+
+/* Body */
+
+body {
+  margin: 0;
+  margin-left: var(--body-margin);
+  margin-right: var(--body-margin);
+  max-width: var(--body-max-width);
+  padding: 0;
+  font-family: var(--body-font-family);
+  color: var(--body-color);
+  background: var(--body-background);
+  scrollbar-color: var(--body-scrollbar-color);
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+}
+
+body > div {
+  margin-left: var(--body-div-margin);
+  margin-right: var(--body-div-margin);
+  padding-left: var(--body-div-padding);
+  padding-right: var(--body-div-padding);
+  max-width: var(--body-max-width);
+}
+
+@media (max-width: 960px) {
+  body {
+    margin-left: calc(var(--body-margin) / 2);
+    margin-right: calc(var(--body-margin) / 2);
+  }
+
+  body > div {
+    margin-left: calc(var(--body-div-margin) / 2);
+    margin-right: calc(var(--body-div-margin) / 2);
+  }
+}
+
+/* Text */
+
+h1, h2, h3, h4, h5, h6 {}
+
+pre > code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto;
+}
+
+code {
+  user-select: all;
+  background:  var(--code-background);
+  color: var(--code-color);
+  font-size: 1em;
+  font-family: var(--code-font-family);
+  padding: 0.5em;
+  border-radius: 5px;
+  display: inline-block;
+}
+
+kbd {
+  font-family: var(--kbd-font-family);
+  display: inline-block;
+  user-select: all;
+  padding: 0.5em;
+  border-radius: 5px;
+  border: var(--kbd-border);
+  font-family: var(--body-font-family);
+}
+
+var {
+  color: var(--var-color);
+  font-style: normal;
+  font-family: var(--var-font-family);
+}
+
+a {
+  color: var(--a-color);
+  scroll-behavior: smooth;
+  text-decoration: underline;
+  text-decoration-color: var(--a-text-decoration-color);
+  transition: color .15s ease;
+  text-decoration-skip: edges;
+  text-decoration-skip-ink: auto;
+}
+
+a:hover {
+  color: var(--a-text-decoration-color);
+}
+
+textarea {
+  resize: vertical;
+}
+
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--details-background);
+  padding: var(--details-padding) var(--details-padding) 0;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: var(--details-padding)
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  padding: var(--details-padding);
+  margin: calc(-1 * var(--details-padding)) calc(-1 * var(--details-padding)) 0;
+  user-select: none;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+mark {
+  background: var(--mark-background);
+  color: var(--mark-color);
+  padding: 0.15em;
+}
+
+/* Navigation */
+
+nav {
+  max-width: none;
+  margin-left: calc(var(--body-margin) * -1);
+  margin-right: calc(var(--body-margin) * -1);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  color: var(--nav-color);
+  background: var(--nav-background);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  left: 0;
+}
+
+@media (max-width: 960px) {
+  nav {
+    margin-left: calc(var(--body-margin) * -1 / 2);
+    margin-right: calc(var(--body-margin) * -1 / 2);
+  }
+}
+
+nav * {
+  display: block;
+  padding: var(--nav-padding);
+  color: var(--nav-color);
+}
+
+nav a {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+/* Tables */
+
+table {
+  border-collapse: collapse;
+  display: block;
+  width: 100%;
+  max-width: var(--table-max-width);
+  overflow-x: auto;
+}
+
+table > tbody > tr > td, table > tbody > tr > th {
+  border: var(--table-border);
+  text-align: left;
+  padding: 0.5em;
+}
+
+table > tbody > tr:nth-child(even) {
+  background: var(--table-tr-even-background);
+}
+
+table > thead > tr > td, table > thead > tr > th, table > tfoot > tr > td, table > tfoot > tr > th {
+  padding: 0.5em;
+  border: none;
+  text-align: center;
+}
+
+/* Images */
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-left: var(--img-margin-left);
+  margin-right: var(--img-margin-right);
+}
+
+/* Forms */
+
+fieldset {
+  border-radius: 5px;
+  border: 1px solid white;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  padding: 1em;
+}
+
+select {
+  font-size: var(--input-font-size);
+	display: inline-block;
+	padding: .5em;
+	width: 100%;
+	max-width: 500px;
+	box-sizing: border-box;
+}
+
+select option {
+  background: var(--body-background);
+	font-weight: normal;
+}
+
+select[multiple] {
+  color: var(--body-color);
+	display: inline-block;
+	color: #444;
+	padding: 0.5em;
+  border-radius: 0;
+	width: 100%;
+	max-width: 250px;
+	box-sizing: border-box;
+	border: 1px solid var(--select-border-color);
+	background: rgba(0,0,0,.25);
+}
+
+select[multiple] > option {
+  color: var(--body-color);
+  background: rgba(0,0,0,0);
+}
+
+@supports(-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) {
+  input[type='checkbox'], input[type='radio'] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  select {
+    font-size: var(--input-font-size);
+    display: inline-block;
+    font-size: 1em;
+    color: var(--body-color);
+    padding: .5em;
+    width: 100%;
+    max-width: 500px;
+    box-sizing: border-box;
+    border: 1px solid var(--select-border-color);
+    box-shadow: none;
+    border-radius: .5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgba(0,0,0,.25);
+    background-image: var(--select-glyph);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+  }
+
+  select::-ms-expand {
+  	display: none;
+  }
+
+  select[multiple] {
+    color: var(--body-color);
+  	display: inline-block;
+  	color: #444;
+  	padding: 0.5em;
+    border-radius: 0;
+  	width: 100%;
+  	max-width: 250px;
+  	box-sizing: border-box;
+  	border: 1px solid var(--select-border-color);
+  	background: rgba(0,0,0,.25);
+  }
+
+  select[multiple] > option {
+    color: var(--body-color);
+  }
+}
+
+input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea {
+  font-size: var(--input-font-size);
+  color: var(--body-color);
+  font-family: var(--body-font-family);
+  background: rgba(0,0,0,.25);
+  padding: 0.5em;
+  width: 100%;
+  max-width: var(--input-max-width);
+  margin-bottom: 1em;
+  box-sizing: border-box;
+  resize: none;
+  border-radius: 0.5em;
+  border: var(--input-border);
+}
+
+input:disabled:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
+  background: var(--input-disabled-background);
+}
+
+button, select, input[type='submit'], input[type='button'], input[type='checkbox'], input[type='range'], input[type='radio'] {
+  cursor: pointer;
+}
+
+button, .button {
+    display: inline-block;
+    border: none;
+    padding: 1rem 2rem;
+    margin: 0;
+    text-decoration: none;
+    background: var(--button-background);
+    color: var(--button-color);
+    font-size: 1em;
+    text-align: center;
+    transition: background 250ms ease-in-out,
+                transform 150ms ease;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+button:hover, button:focus, .button:hover, .button:focus {
+    background: #0053ba;
+}
+
+button:focus, .button:focus {
+    outline: 1px solid #fff;
+    outline-offset: -4px;
+}
+
+button:active, .button:active {
+    transform: scale(0.99);
+}
+
+/* Animations */
+
+details[open] summary ~ * {
+  animation: sweep 0.1s ease-in-out;
+}
+
+@keyframes sweep {
+  0%    {opacity: 0; margin-top: -10px; margin-bottom: 10px;}
+  90%   {opacity: 1; margin-top: -1px; margin-bottom: 1px;}
+  100%  {opacity: 1; margin-top: 0px; margin-bottom: 0;}
+}

client/public/error/404.lisp

@@ -0,0 +1,6 @@
+(html :lang 'en :dir 'ltr
+  (head
+    (meta :charset 'utf-8)
+    (title "404"))
+  (body
+     "This page could not be found, sorry for the inconvenience"))

client/public/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE-edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Personal Website</title>
-</head>
-
-<body>
-  <noscript>
-    <strong>This site doesn't work properly without JavaScript enabled. Please enable to continue.</strong>
-  </noscript>
-  <div id="app"></div>
-</body>
-
-</html>

client/public/index.lisp

@@ -0,0 +1,33 @@
+(html :lang 'en
+      (head
+       (meta :charset 'utf-8)
+       (meta :name    'description
+             :content "Raymon's personal website about his life and projects with a blog.")
+       (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
+       (title "Raymon Zutekouw")
+
+       (link :defer '
+             :rel   'stylesheet
+             :href  "/css/template.css"
+             :media 'all)
+       (link :defer '
+             :rel   'stylesheet
+             :href  "/css/general.css"
+             :media 'all))
+      (body
+       (main
+        (nav
+         (a :href "/" "Home") "|"
+         (a :href "/posts" "Posts"))
+        (article
+         (header
+          (h1 "Home"))
+         (p "Hi there, good to see you on my website.
+            My name is Raymon Zutekouw; Self-taught programmer by heart.")
+         (p "Building software and exploring the wide variety of tools (or making them) is my passion.
+            To see it in action, "
+            (a :href "https://git.raymon.dev/raymon" "checkout the stuff I make here."))
+
+         (p "The projects that may be useful to others are open source; for inspiring others and improving each others work.
+            That is why I am a huge fan of "
+            (a :href "https://www.gnu.org/philosophy/free-sw.en.html" "free software"))))))

client/public/robots.txt

@@ -0,0 +1 @@
+User-agent: *

client/src/App.vue

@@ -1,28 +0,0 @@
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/posts">Posts</router-link> |
-      <router-link to="/qa">QA</router-link>
-    </div>
-    <router-view />
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'App',
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

client/src/components/AboutMe.vue

@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <h2>Who am I?</h2>
-    <p>
-      Hi there, good to see you on my website.
-      My name is Raymon Zutekouw({{ age }}).
-      Building software and exploring the wide variety of tools (or making them) is my passion.
-      To see it in action, checkout the stuff I make on
-      <a href='https://github.com/Raymonzut'>GitHub</a>.
-      The projects that may be useful to others are open source; for inspiring others and improving each others work.
-      That is why I am a huge fan of
-      <a href='https://www.gnu.org/philosophy/free-sw.en.html'>free software</a>.
-    </p>
-  </div>
-</template>
-
-<script>
-import me from '../me.js'
-
-export default {
-  name: 'AboutMe',
-  computed: {
-    age: me.age
-  }
-};
-</script>
-
-<style scoped>
-p {
-  --margin-side: 12vw;
-  margin-left: var(--margin-side);
-  margin-right: var(--margin-side);
-}
-</style>

client/src/components/Answer.vue

@@ -1,18 +0,0 @@
-<template>
-  <div>
-    {{ a }}
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Answer',
-  props: {
-    a: {
-      type: String,
-      required: true,
-    }
-  }
-}
-</script>
-

client/src/components/QA.vue

@@ -1,38 +0,0 @@
-<template>
-  <div id='qa'>
-    <Question :q='q'></Question>
-    <Answer :a='a'></Answer>
-  </div>
-</template>
-
-<script>
-import Question from './Question.vue'
-import Answer from './Answer.vue'
-
-export default {
-  name: 'QA',
-  components: {
-    Question,
-    Answer,
-  },
-  props: {
-    q: {
-      type: String,
-      required: true,
-    },
-    a: {
-      type: String,
-      required: true,
-    }
-  }
-}
-</script>
-
-<style scoped>
-#qa {
-  --block-spacing: 7.5em;
-
-  margin-top: var(--block-spacing);
-  margin-bottom: var(--block-spacing);
-}
-</style>

client/src/components/Question.vue

@@ -1,27 +0,0 @@
-<template>
-  <div id='question_box'>
-    {{ q }}
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Question',
-  props: {
-    q: {
-      type: String, 
-      required: true,
-    }
-  }
-}
-</script>
-
-<style scoped>
-#question_box {
-  --text-spacing: 0.75em;
-
-  font-style: italic;
-  margin-top: var(--text-spacing);
-  margin-bottom: var(--text-spacing);
-}
-</style>

client/src/main.js

@@ -1,14 +0,0 @@
-import Vue from 'vue'
-import VueResource from 'vue-resource'
-
-import App from './App.vue'
-import router from './router'
-
-Vue.config.productionTip = false
-
-Vue.use(VueResource)
-
-new Vue({
-  render: h => h(App),
-  router,
-}).$mount('#app')

client/src/me.js

@@ -1,21 +0,0 @@
-module.exports = {
-  age: age,
-}
-
-function age() {
-  let birthdate = new Date(2002, 8, 29)
-  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
-}

client/src/remote.js

@@ -1,23 +0,0 @@
-module.exports = {
-  getPosts: function(id) {
-    const BASE_URL = '/api/posts'
-    const URL = BASE_URL + (id ? `/${id}` : '?sort=-1')
-
-    this.$http
-      .get(URL)
-      .then(res => {
-        if (id) {
-          if (res.body.length === 0) {
-            throw Error("Response body empty")
-          }
-          this.post = res.body
-        }
-        else {
-          this.posts = res.body
-        }
-      })
-      .catch(err => {
-        console.log(`Error: ${err}`)
-      })
-  },
-}

client/src/router/index.js

@@ -1,46 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-import Posts from '../views/Posts.vue'
-import Post from '../views/Post.vue'
-import QAPage from '../views/QAPage'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/posts",
-    name: "Posts",
-    component: Posts,
-  },
-  {
-    path: "/posts/:id",
-    name: "Post",
-    component: Post,
-    props: true,
-  },
-  {
-    path: "/qa",
-    name: "QA",
-    component: QAPage
-  },
-]
-
-const exclude_routes = [
-  {
-    path: "/api"
-  }
-]
-
-const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
-  routes: routes.concat(exclude_routes),
-})
-
-export default router

client/src/views/Home.vue

@@ -1,19 +0,0 @@
-<template>
-<div id="home">
-  <h1>Home</h1>
-  <AboutMe></AboutMe>
-</div>
-</template>
-
-<script>
-import AboutMe from '@/components/AboutMe'
-
-export default {
-  name: "Home",
-  components: {
-    AboutMe
-  },
-}
-</script>
-
-<style scoped></style>

client/src/views/Post.vue

@@ -1,45 +0,0 @@
-<template>
-  <div id="Post">
-  <div v-if="Object.keys(post).length">
-    <h1>{{ post.title }}</h1>
-    <h5>Written on {{ post.date.substring(0,10)}}</h5>
-
-    <p v-for="(p, i) in post.content.split('\n')" :key="i">{{ p }}</p>
-  </div>
-  <h2 v-else>Waiting for post</h2>
-  <br>
-  Read other <a href="/posts">posts</a>
-  <br>
-  </div> 
-</template>
-
-<script>
-import { getPosts } from '../remote'
-
-export default {
-  name: "Post",
-  data() { 
-    return {
-      post: {},
-    }
-  },
-  methods: {
-    getPosts
-  },
-  mounted() {
-    getPosts.call(this, this._props.id)
-  },
-  props: {
-    id: {
-      type: String,
-      name: "id",
-      validator: val => {
-        const reg = /([0-9]|[a-f]){24}/
-        return reg.test(val)
-      },
-    }
-  }
-}
-</script>
-
-<style scoped></style>

client/src/views/Posts.vue

@@ -1,68 +0,0 @@
-<template>
-  <div id="posts" v-if="months.length >= 0">
-    <h3 class="month" v-for="(month, i) in months" :key="i">
-      {{ month }}
-      <div> 
-        <ul>
-          <li v-for="(postItem, j) in getPostItems(month)" :key="j">
-            {{ getPostItemDate(postItem) }} – 
-            <a :href="/posts/ + postItem._id">{{ postItem.title }}</a>
-          </li>
-        </ul>
-      </div>
-      <br>
-    </h3>
-  </div>
-  <h2 v-else>There are no posts yet, but don't worry they will be added soon</h2>
-</template>
-
-<script>
-import { getPosts } from '../remote'
-
-export default {
-  name: "Posts",
-  computed: {
-    months: function () {
-      const dates = this.posts.map(post => new Date(post.date))
-
-      // Contains the month followed by the year
-      const months = dates.map(date => `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`)
-      const uniques = Array.from(new Set(months))
-
-      return uniques
-    }
-  },
-  data() {
-    return {
-      posts: []
-    }
-  },
-  methods: {
-    getPosts,
-    getPostItems: function (month) {
-      const month_index = new Date(`1 ${month}`).getMonth()
-      return this.posts.filter((post) => (new Date(post.date)).getMonth() === month_index)
-    },
-    getPostItemDate: function (postItem) {
-      const date = new Date(postItem.date)
-      return `${date.getFullYear()} ${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}`
-    }
-  },
-  mounted() {
-    getPosts.call(this)
-  },
-}
-</script>
-
-<style scoped>
-ul {
-  text-align: left;
-}
-
-@media (min-width: 420px) {
-  .month {
-    text-indent: 1em;
-    text-align: left;
-  }
-}
-</style>

client/src/views/QAPage.vue

@@ -1,25 +0,0 @@
-<template>
-  <div id="QAPage">
-    <QA 
-    q="What is this site about? "
-    a="This site is about me and the stuff I make "
-    ></QA>
-
-    <QA
-    q="Why is it still so empty?"
-    a="Because I am framework hopping "
-    ></QA>
-  </div>
-
-</template>
-
-<script>
-import QA from '@/components/QA'
-
-export default {
-  name: "QAPAge",
-  components: { QA }
-}
-</script>
-
-<style scoped></style>

client/templates/post_index_page.lisp

@@ -0,0 +1,25 @@
+(html :lang 'en
+      (head
+       (meta :charset 'utf-8)
+       (meta :name    'description
+             :content "Raymon typing nonsense on his blog")
+       (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
+       (title "Raymon Zutekouw")
+
+       (link :defer '
+             :rel   'stylesheet
+             :href  "/css/template.css"
+             :media 'all)
+       (link :defer '
+             :rel   'stylesheet
+             :href  "/css/general.css"
+             :media 'all))
+      (body
+       (main
+        (nav
+         (a :href "/" "Home") "|"
+         (a :href "/posts" "Posts"))
+        (article
+         (header
+          (h1 "Post listing"))
+         "{{index}}"))))

client/templates/post_item.xml

@@ -0,0 +1,9 @@
+    <item>
+      <title>{{title}}</title>
+      <link>https://raymon.dev/posts/{{localpath}}.html</link>
+      <guid>https://raymon.dev/posts/{{localpath}}.html</guid>
+      <pubDate>{{date}}</pubDate>
+      <description><![CDATA[
+        {{content}}
+]]></description>
+    </item>

client/templates/post_single_page.lisp

@@ -0,0 +1,28 @@
+(html :lang 'en
+      (head
+       (meta :charset 'utf-8)
+       (meta :name    'description
+             :content "Raymon typing nonsense on his blog")
+       (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
+       (title "{{title}} :: Raymon Zutekouw")
+
+       (link :defer '
+             :rel   'stylesheet
+             :href  "/css/template.css"
+             :media 'all)
+       (link :defer '
+             :rel   'stylesheet
+             :href  "/css/general.css"
+             :media 'all))
+      (body
+       (main
+        (nav
+         (a :href "/" "Home") "|"
+         (a :href "/posts" "Posts"))
+        (article
+         (header
+          (h1 "{{title}}")
+          (p (strong "For those using a RSS reader, subscribe here: ")
+             (a :href "/posts/rss.xml" "rss.xml")))
+         (time :datetime "{{date}}")
+         "{{content}}"))))

client/templates/posts.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Raymon Zutekouw</title>
+    <description>Personal blog</description>
+    <language>en-us</language>
+    <link>https://raymon.dev</link>
+    <atom:link href="https://raymon.dev/posts/rss.xml" rel="self" type="application/rss+xml" />
+{{items}}
+  </channel>
+</rss>

client/test/me.js

@@ -1,4 +0,0 @@
-const assert = require('assert').strict
-const me = require('../src/me')
-
-assert(me.age() > 0, 'age should return a positive number')

client/test_runner.js

@@ -1,22 +0,0 @@
-const { spawn } = require('child_process')
-const fs = require('fs')
-
-const dirs = ['./test', './tests']
-
-if (!dirs.some(fs.existsSync)) {
-  throw Error("Could not find any test directories, looked for: " + dirs)
-}
-
-const test_dirs = dirs.filter(fs.existsSync)
-
-test_dirs.forEach(test_dir => {
-  const files = fs.readdirSync(test_dir)
-
-  if (files.length === 0) {
-    throw Error("Could not find test files in " + test_dir)
-  }
-
-  const childs = files.map(file => 
-    spawn('node', [`${test_dir}/${file}`], { stdio: 'inherit' }) 
-  )
-})

client/upload.sh

@@ -0,0 +1,3 @@
+rsync -avz public/assets/images/ raymon.dev:~/Personal-Website/client/public/assets/images
+rsync -avz public/gen/ raymon.dev:~/Personal-Website/client/public/gen/
+rsync -avz posts_org/ raymon.dev:~/Personal-Website/client/posts_org

docker-compose.yaml

@@ -0,0 +1,8 @@
+version: "3.3"
+services:
+  client:
+    build: client/
+    ports:
+      - "5010:80"
+    volumes:
+      - "./client/public:/app:rw"

docker-compose.yml

@@ -1,3 +0,0 @@
-version: '3'
-
-services:

server/.dockerignore

@@ -1,2 +0,0 @@
-**/node_modules
-**/dist

server/Dockerfile

@@ -1,13 +0,0 @@
-FROM node:latest
-
-WORKDIR /usr/src/server
-
-COPY package*.json ./
-
-RUN npm ci --only=production
-
-COPY . .
-
-CMD [ "node", "index.js" ]
-
-EXPOSE 5000

server/index.js

@@ -1,14 +0,0 @@
-const express = require('express')
-const cors = require('cors')
-
-const app = express()
-
-app.use(cors())
-
-const posts = require('./routes/api/posts')
-
-app.use('/posts', posts)
-
-const port = process.env.PORT || 5000
-
-app.listen(port, () => console.log(`Server started on port ${port}`))

server/package-lock.json

@@ -1,388 +0,0 @@
-{
-  "name": "server",
-  "version": "1.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-      "requires": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
-      }
-    },
-    "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
-    },
-    "body-parser": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-      "requires": {
-        "bytes": "3.1.0",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.7.0",
-        "raw-body": "2.4.0",
-        "type-is": "~1.6.17"
-      }
-    },
-    "bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
-    },
-    "content-disposition": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-      "requires": {
-        "safe-buffer": "5.1.2"
-      }
-    },
-    "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
-    },
-    "cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
-    },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
-    },
-    "cors": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
-      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
-      "requires": {
-        "object-assign": "^4",
-        "vary": "^1"
-      }
-    },
-    "debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "requires": {
-        "ms": "2.0.0"
-      }
-    },
-    "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
-    },
-    "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
-    },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
-    },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
-    },
-    "express": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-      "requires": {
-        "accepts": "~1.3.7",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
-        "content-type": "~1.0.4",
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      }
-    },
-    "finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-      "requires": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
-        "unpipe": "~1.0.0"
-      }
-    },
-    "forwarded": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
-    },
-    "http-errors": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-      "requires": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
-      }
-    },
-    "iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "requires": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-    },
-    "ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
-    },
-    "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
-    },
-    "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
-    },
-    "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
-    },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-    },
-    "mime-db": {
-      "version": "1.43.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-      "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ=="
-    },
-    "mime-types": {
-      "version": "2.1.26",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-      "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
-      "requires": {
-        "mime-db": "1.43.0"
-      }
-    },
-    "ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-    },
-    "negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-    },
-    "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "requires": {
-        "ee-first": "1.1.1"
-      }
-    },
-    "parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
-    },
-    "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
-    },
-    "proxy-addr": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
-      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
-      "requires": {
-        "forwarded": "~0.1.2",
-        "ipaddr.js": "1.9.1"
-      }
-    },
-    "qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
-    },
-    "range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
-    },
-    "raw-body": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-      "requires": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      }
-    },
-    "safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "send": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-      "requires": {
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "~1.7.2",
-        "mime": "1.6.0",
-        "ms": "2.1.1",
-        "on-finished": "~2.3.0",
-        "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-        }
-      }
-    },
-    "serve-static": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-      "requires": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.17.1"
-      }
-    },
-    "setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
-    },
-    "statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
-    },
-    "toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
-    },
-    "type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "requires": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      }
-    },
-    "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
-    },
-    "utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
-    },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
-    }
-  }
-}

server/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "server",
-  "version": "1.0.0",
-  "description": "The API for the website",
-  "main": "index.js",
-  "scripts": {
-    "start": "node ./index.js",
-    "dev": "nodemon server/index.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "cors": "^2.8.5",
-    "express": "^4.17.1"
-  }
-}

server/posts/.gitignore

@@ -1 +0,0 @@
-*.json

server/posts/.gitkeep

@@ -1,6 +0,0 @@
-All the posts will be in here seperate in JSON format
-
-post
-  - title
-  - date
-  - content

server/routes/api/posts.js

@@ -1,61 +0,0 @@
-const express = require('express')
-const fs = require('fs')
-
-const router = express.Router()
-
-const posts_dir = 'posts/'
-
-if (!fs.existsSync(posts_dir)) throw Error(`Missing ${posts_dir}`)
-
-let posts = readPosts();
-
-setInterval(() => posts = readPosts(), 1000 * 60 * 60)
-
-function readPostsDelayed() {
-  return new Promise(setTimeout, 1000).then(posts = readPosts())
-}
-
-function readPosts() {
-  console.warn("reading all posts")
-  const files = fs.readdirSync(posts_dir)
-
-  if (files.length === 0) throw Error(`Could not find posts in ${posts_dir}`)
-  
-  return files.filter(file_name => file_name.endsWith('.json'))
-              .map(file_name => `${posts_dir}${file_name}`)
-              .map(readJSONAsObject)
-}
-
-function readJSONAsObject(filename) {
-  return JSON.parse(fs.readFileSync(filename, 'utf8'))
-}
-
-function notFoundResponse(res) {
-  res.status(404).send('Sorry, can not find that')
-}
-
-router.get('/', async (req, res) => {
-  if (req.query.sort === '-1' || req.query.sort === '1') {
-    const posts_sorted = posts.sort((a, b) => {
-      return new Date(a.date).getTime() - new Date(b.date).getTime()
-    })
-    
-    if (req.query.sort === '1') res.send(posts_sorted) 
-    else res.send(posts_sorted.reverse())
-  }
-})
-
-router.get('/:id', async (req, res) => {
-  const re = /[0-9A-Fa-f]{24}/g
-
-  if (!re.test(req.params.id)) {
-    notFoundResponse(res)
-    return
-  }
-  const results = posts.filter(post => post._id === req.params.id)
-
-  if (!results.length) notFoundResponse(res) 
-  else res.send(results[0])
-})
-
-module.exports = router