Rewrite post related pages to be generated

client/nginx.conf

@@ -33,6 +33,10 @@ http {
       alias /app/lib;
     }
 
+    location /posts {
+      alias /app/gen/;
+    }
+
     location /api {
       proxy_pass              https://raymon.dev/api;
       proxy_buffering         on;

client/public/.gitignore

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

client/public/assets/styling/general.css

@@ -21,8 +21,12 @@ nav {
   font-style: italic;
 }
 
+h1 {
+  font-size: 2.0em;
+}
+
 h2 {
-  font-size: 0.6em;
+  font-size: 1.25em;
   margin: auto 0;
 }
 

client/public/gen_posts.ex

@@ -0,0 +1,49 @@
+# Templates will be filled by posts
+index_template = File.read!("./templates/index.html")
+post_template = File.read!("./templates/post.html")
+
+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)

client/public/templates/index.html

@@ -14,19 +14,18 @@
     media="all"
   >
   <link defer rel="stylesheet" href="css/general.css" media="all">
-
 </head>
 <body>
-  <div id="app">
+  <main>
     <nav>
       <a href="/">Home</a>|
       <a href="/posts">Posts</a>|
       <a href="/qa">QA</a>
     </nav>
-
+    <header>
-    <h3>For those using a RSS reader, subscribe here: <a href="/api/posts/rss.xml">rss.xml</a></h3>
+      <h1>Post listing</h1>
-    <!-- Placeholder for posts -->
+    </header>
-    <div id="posts"></div>
+    {{index}} 
-  </div>
+</main>
 </body>
 </html>

client/public/templates/post.html

@@ -0,0 +1,36 @@
+<!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>
+
+    <article>
+      <header>
+        <h1>{{title}}</h1>
+  	<h3>For those using a RSS reader, subscribe here: <a href="/api/posts/rss.xml">rss.xml</a></h3>
+      </header>
+      <time datetime="{{date}}"></time>
+      {{content}}
+    </article>
+  </main>
+</body>
+</html>