Merge branch 'beta' into master

- Contains \n shorthand for a paragraph

client/nginx.conf

@@ -33,9 +33,8 @@ http {
       alias /app/lib;
     }
 
-    location /api {
+    location /posts {
-      proxy_pass              https://raymon.dev/api;
+      alias /app/gen/;
-      proxy_buffering         on;
     }
 
     error_page 404 /404.html;

client/public/.gitignore

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

client/public/assets/styling/general.css

@@ -1,15 +1,45 @@
+: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 {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
+.question {
+  font-style: italic;
+}
+
+h1 {
+  font-size: 2.0em;
+}
+
+h2 {
+  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;
   }
 }
-
-.question {
-  font-style: italic;
-}

client/public/assets/styling/themes.css

@@ -1,18 +0,0 @@
-: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);
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --primary-color: #ffffeb;
-    --text-color: #272736;
-  }
-}

client/public/gen.ex

@@ -0,0 +1,69 @@
+# 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()

client/public/index.html

@@ -2,18 +2,22 @@
 <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</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
     rel="stylesheet"
     href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
     media="all"
   >
-  <link defer rel="stylesheet" href="css/themes.css" media="all">
+  <link defer rel="stylesheet" href="/css/general.css" media="all">
-  <link defer rel="stylesheet" href="css/general.css" media="all">
-
-  <script defer type="module" src="index.mjs"></script>
 
 </head>
 <body>
@@ -26,7 +30,6 @@
     <h1>Home</h1>
 
     <div>
-      <h2>Who am I?</h2>
       <p>
         Hi there, good to see you on my website.
         My name is Raymon Zutekouw (<span id="age">born on 29-08-2002</span>)
@@ -45,5 +48,6 @@
       </p>
     </div>
   </div>
+  <script async type="module" src="index.mjs"></script>
 </body>
 </html>

client/public/lib/me.mjs

@@ -1,17 +1,17 @@
 export function age() {
-  let birthdate = new Date(2002, 8, 29)
+  let birthdate = new Date("29 August 2002")
   let now = new Date()
 
   let age = now.getFullYear() - birthdate.getFullYear()
 
-  if (now.getMonth() < birthdate.getMonth()) {
+  if (now.getMonth() < birthdate.getMonth())
     age--
-  }
+
   if (
     birthdate.getMonth() === now.getMonth() &&
     now.getDate() < birthdate.getDate()
-  ) {
+  )
     age--
-  }
+
   return age
 }

client/public/lib/remote.mjs

@@ -1,24 +0,0 @@
-export async function getPosts(id) {
-    const BASE_URL = 'https://raymon.dev'
-    const BASE_ENDPOINT = '/api/posts'
-    const URL = BASE_URL + BASE_ENDPOINT + (id ? `/${id}` : '?sort=-1')
-
-    let posts = []
-
-    return await fetch(URL)
-      .then(res => res.json())
-      .then(res => {
-        if (id !== undefined) {
-          if (res === undefined) {
-            throw Error("Response body empty")
-          }
-          return [res]
-        }
-        else {
-          return res
-        }
-      })
-      .catch(err => {
-        console.log(`Error: ${err}`)
-      })
-}

client/public/posts.mjs

@@ -1,61 +0,0 @@
-import { getPosts } from "./lib/remote.mjs"
-
-function toMonthYearString(str) {
-    const date = new Date(str)
-    return `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`
-}
-async function showPost(id) {
-  const post_list = await getPosts(id)
-  const post = post_list[0]
-  const title = document.createElement("h1")
-  title.textContent = post.title
-
-  const postsDOM = document.getElementById("posts")
-  postsDOM.appendChild(title)
-
-  post.content.split('\n').forEach(paragraph => {
-    const p = document.createElement("p")
-    p.textContent = paragraph
-    postsDOM.appendChild(p)
-  });
-}
-
-async function updatePosts() {
-  const posts = await getPosts()
-
-  const months = posts.map(post => toMonthYearString(post.date))
-  const uniques = Array.from(new Set(posts.map(post => toMonthYearString(post.date))))
-  const month_lists = uniques.map(month =>
-    posts.filter(
-      post => toMonthYearString(post.date) === month
-    )
-  )
-  const postsDOM = document.getElementById("posts")
-  uniques.forEach((month, i) => {
-    const month_DOM = document.createElement("h1")
-    month_DOM.textContent = month
-
-    month_lists[i].forEach((post, i) => {
-        const post_DOM = document.createElement("h6")
-        post_DOM.textContent = `${post.date.substring(0, 10)} - `
-
-        const post_link = document.createElement("a")
-        post_link.href = 'posts?post=' + post._id
-        post_link.textContent = post.title
-        post_DOM.appendChild(post_link)
-
-        month_DOM.appendChild(post_DOM)
-    })
-
-    postsDOM.appendChild(month_DOM)
-  })
-}
-
-// Check if a specific post is requested
-let url = new URL(document.location.href);
-url.searchParams.sort();
-let post_id = url.searchParams.values().next().value;
-
-const reg = /([0-9]|[a-f]){24}/
-if (post_id && reg.test(post_id)) showPost(post_id)
-else updatePosts()

client/public/qa.html

@@ -2,6 +2,9 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta
+  name="description"
+  content="Raymon answering common questions">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Raymon Zutekouw</title>
 
@@ -10,8 +13,7 @@
     href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
     media="all"
   >
-  <link defer rel="stylesheet" href="css/themes.css" media="all">
+  <link defer rel="stylesheet" href="/css/general.css" media="all">
-  <link defer rel="stylesheet" href="css/general.css" media="all">
 
 </head>
 <body>

client/public/robots.txt

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

client/public/templates/post_index_page.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<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</title>
+
+  <link defer
+    rel="stylesheet"
+    href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
+    media="all"
+  >
+  <link defer rel="stylesheet" href="/css/general.css" media="all">
+</head>
+<body>
+  <main>
+    <nav>
+      <a href="/">Home</a>|
+      <a href="/posts">Posts</a>|
+      <a href="/qa">QA</a>
+    </nav>
+    <header>
+      <h1>Post listing</h1>
+    </header>
+    {{index}} 
+</main>
+</body>
+</html>

client/public/templates/post_item.xml

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

client/public/templates/post_single_page.html

@@ -2,6 +2,9 @@
 <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</title>
 
@@ -10,28 +13,24 @@
     href="https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
     media="all"
   >
-  <link defer rel="stylesheet" href="css/themes.css" media="all">
+  <link defer rel="stylesheet" href="/css/general.css" media="all">
-  <link defer rel="stylesheet" href="css/general.css" media="all">
-
-  <script defer type="module" src="posts.mjs"></script>
-
 </head>
 <body>
-  <noscript>
+  <main>
-    <p>
-      This page isn't as fancy without JavaScript.
-      Some parts will not load, but this will be minimal.
-    </p>
-  </noscript>
-  <div id="app">
     <nav>
       <a href="/">Home</a>|
       <a href="/posts">Posts</a>|
       <a href="/qa">QA</a>
     </nav>
 
-    <!-- Placeholder for posts -->
+    <article>
-    <div id="posts"></div>
+      <header>
-  </div>
+        <h1>{{title}}</h1>
+	<h3>For those using a RSS reader, subscribe here: <a href="/posts/rss.xml">rss.xml</a></h3>
+      </header>
+      <time datetime="{{date}}"></time>
+      {{content}}
+    </article>
+  </main>
 </body>
 </html>

client/public/templates/posts.xml

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

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,23 +0,0 @@
-const fastify = require('fastify')()
-
-fastify.register(require('fastify-cors'))
-
-const posts = require('./routes/api/posts')
-
-// Assuming they are all get requests
-for (let [route, resolver] of posts.entries()) {
-  fastify.get('/posts' + route, resolver)
-}
-
-const port = process.env.PORT || 5000
-
-const start = async () => {
-  try {
-    await fastify.listen(port, '0.0.0.0')
-    console.log(`Launched on port ${port} 🚀`)
-  } catch (err) {
-    fastify.log.error(err)
-    process.exit(1)
-  }
-}
-start()

server/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "server",
-  "version": "1.3.0",
-  "description": "The API for the website",
-  "main": "index.js",
-  "scripts": {
-    "start": "node ./index.js",
-    "dev": "nodemon server/index.js"
-  },
-  "keywords": [],
-  "author": "Raymonzut",
-  "license": "ISC",
-  "dependencies": {
-    "fastify": "^2.14.1", 
-    "fastify-cors": "^3.0.3"
-  },
-  "devDependencies": {
-    "nodemon": "^2.0.4"
-  }
-}

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,86 +0,0 @@
-const fs = require('fs')
-
-const posts_dir = 'posts/'
-
-const routes = new Map();
-
-if (!fs.existsSync(posts_dir)) throw Error(`Missing ${posts_dir}`)
-
-let posts = readPosts();
-
-setInterval(() => posts = readPosts(), 1000 * 60 * 60)
-
-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')
-}
-
-routes.set('', 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())
-    return
-  }
-  // Default response when there are no interesting queries
-  res.send(posts)
-})
-
-routes.set('/: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])
-})
-
-// For the sitemap.xml, will be listed in the XML Sitemap Index
-routes.set('/urls', async (req, res) => {
-  const re = /(\/api\/)?(.*)\/urls/g
-  const result = [...req.raw.originalUrl.matchAll(re)]
-  if (!result) {
-    notFoundResponse(res)
-    return
-  }
-
-  const endpoint = result [1] ? result[1][2] : result[0][2]
-  // Assumes https
-  const BASE_URL = 'https://' + req.raw.hostname + endpoint 
-  const urls = posts.map(post => 
-    `\n   <url>
-      <loc>${BASE_URL}/${post._id}</loc>
-      <lastmod>${post.date}</lastmod>
-      <changefreq>never</changefreq>
-      <priority>0.9</priority>
-   </url>`
-  ).join("\n")
-  const xml = `<?xml version="1.0" encoding="UTF-8"?>\r<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-               ${urls}\n\r</urlset>`
-
-  res.header('Content-Type', 'application/xml')
-  res.status(200).send(xml)
-})
-
-module.exports = routes