Updated blog

.gitignore

@@ -2,3 +2,4 @@
 server
 posts/
 compile_commands.json
+.cache

Makefile

@@ -1,9 +1,9 @@
 CC := g++
-CFLAGS := -Wall -g -std=c++23 
+CFLAGS := -Wall -g -std=c++23 -I./include/
 TARGET := server
 
 LIBPATHS := 
-LIBS := 
+LIBS := -lcurl
 
 SRCS := $(wildcard *.cpp)
 OBJS := $(patsubst %.cpp, %.o, $(SRCS))
@@ -18,3 +18,6 @@ clean:
 all: run
 run: $(TARGET)
 	./$(TARGET)
+pch: include/crow_all.h.gch
+include/crow_all.h.gch: include/crow_all.h
+	$(CC) $(CFLAGS) -lpthread -c $< -o $@

README.md

@@ -0,0 +1 @@
+I'm going to rewrite this in rust when I learn it

main.cpp

@@ -1,8 +1,9 @@
+#include <crow_all.h>
 #include <filesystem>
 #include <string>
 #include <array>
 #include <memory>
-#include "crow_all.h"
+#include <curl/curl.h>
 
 std::string exec(const std::string &cmd) {
     std::array<char, 128> buffer;
@@ -17,36 +18,58 @@ std::string exec(const std::string &cmd) {
     return result;
 }
 
-int main() {
-	crow::SimpleApp app;
+std::string url_decode(const std::string& encoded) {
+    int output_length;
+    const auto decoded_value = curl_easy_unescape(nullptr, encoded.c_str(), static_cast<int>(encoded.length()), &output_length);
+    std::string result(decoded_value, output_length);
+    curl_free(decoded_value);
+    return result;
+}
 
-    CROW_ROUTE(app, "/")([](){
+std::string process_file(const std::filesystem::path &path) {
+    return exec("pandoc --template='templates/post.txt' -t plain '" + path.string() + "'");;
+}
+
+namespace route {
+    std::string root() {
 	return crow::mustache::load_text("index.html");
-    });
+    }  
 
-    CROW_ROUTE(app, "/contact")([](){
-        return crow::mustache::load_text("contact.html");
-    });
-
-	CROW_ROUTE(app, "/blog")([](){
+    crow::mustache::rendered_template blog() {
 	std::string posts = "";
 	std::filesystem::path postsDir("posts");
+	std::vector<std::future<std::string>> futures;
 	for (auto const& entry : std::filesystem::directory_iterator{postsDir}) {
-			posts.append("<a href=\"/blog/");
-            posts.append(entry.path().filename());
-            posts.append("\"><li>");
-			posts.append(entry.path().filename());
-			posts.append("</li></a>");
+	    futures.emplace_back(std::async(std::launch::async, process_file, entry.path()));
+	}
+
+
+	for (auto& future : futures) {
+	    posts += future.get();
 	}
 
 	auto page = crow::mustache::load("posts.html");
 	crow::mustache::context ctx( {{"posts", posts}} );
 	return page.render(ctx);
-	});
+    }
 
-	CROW_ROUTE(app, "/blog/<string>")([](const std::string &name){
-        return exec("pandoc --standalone --template templates/template.html ./posts/" + name);
-	});
+    std::string post(const std::string &name) {
+	std::string decoded_name = url_decode(name);
+	if (std::filesystem::exists("posts/" + decoded_name)) 
+	    return exec("pandoc --standalone --template templates/template.html './posts/" + decoded_name + "'");
+	else
+	    return std::string("<h1>Not found</h1>");
+    }
+};
+
+int main() {
+    crow::SimpleApp app;
+
+    CROW_ROUTE(app, "/")(route::root);
+
+    CROW_ROUTE(app, "/blog")(route::blog);
+
+    CROW_ROUTE(app, "/blog/<string>")(route::post);
 
     app.port(8080).multithreaded().run();
 }

static/style.css

@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+* {
+    font-family: "Ubuntu", sans-serif;
+}
+
+::selection {
+    background: #e67e80;
+    color: #232a2e;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background: url(/static/tile.png);
+    color: #d3c6aa;
+    font-family: sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+a {
+    color: #d699b6;
+}
+
+.sourceCode code {
+    font-family: "Ubuntu Mono", monospace;
+}
+
+code {
+    background: #232a2e;
+    font-family: "Ubuntu Mono", monospace;
+    overflow-y: scroll;
+}
+
+.sourceCode {
+    background: #232a2e;
+    overflow-y: scroll;
+    padding: 10px;
+}
+html,body{min-height: 100vh;}
+#wrapper {
+    width: 50%;
+    min-height: 100vh;
+    background: #2d353b;
+    padding: 0px 30px 0px 30px;
+    line-height: 1.5;
+}
+
+.title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.date {
+    font-family: "Ubuntu Mono", monospace;
+}
+
+.back {
+    font-size: 20px;
+}

templates/index.html

@@ -6,14 +6,32 @@
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
-	<meta name="keywords" content="Rami Kaldany">
 	<title>ramik.dev</title>
 	<style>
+		@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
 		* {
 			margin: 0;
 			padding: 0;
 			color: #d3c6aa;
-			font-family: 'JetBrains Mono', monospace;
+			font-family: 'Ubuntu Mono', monospace;
+			font-size: 30px;
+		}
+
+		.gitea {
+		    background: url(static/gitea.png);
+		    background-size: 100% 100%;
+		    width: 50px;
+		    height: 27px;
+		    margin: 5px;
+		}
+
+		.blog {
+		    background: url(static/pencil.png);
+		    background-size: 100% 100%;
+		    width: 30px;
+		    height: 30px;
+		    margin: 5px;
 		}
 
 		html, body {
@@ -34,8 +52,12 @@
 		}
 
 		ul > li {
-			margin: 5px;
-			font-size: 15px;
+			margin: 10px;
+		}
+
+		ul > li > a {
+			display: flex;
+			flex-direction: row;
 		}
 
 		#wrapper {
@@ -55,8 +77,6 @@
 		<ul>
 			<li>[</li>
 			<li><a href="#">../</a></li>
-			<li><a href="#">about</a></li>
-            <li><a href="/contact">contact</a></li>
 			<li><a href="https://git.ramik.dev/rami">git</a></li>
 			<li><a href="/blog">blog</a></li>
 			<li>]</li>

templates/post.txt

@@ -0,0 +1 @@
+<li><span class="sourceCode">$date$</span>&nbsp;&mdash;&nbsp;<a class="title" href="$path$">$title$</a></li>

templates/posts.html

@@ -1,3 +1,34 @@
+<!doctype html>
+<html lang="en">
+    <head>
+	<meta charset="utf-8">
+	<meta name="date" content='$date-meta$'>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="/static/style.css">
+	<title>Blog</title>
+<style>
+ul {
+    padding: 0;
+}
+li {
+    width: 100%;
+    height: 30px;
+    list-style: none;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+</style>
+    </head>
+    <body>
+	<div id="wrapper">
+	    <h1>All my posts: </h1>
+	    <hr>
 	    <ul>
 		{{& posts }}
 	    </ul>
+	</div>
+    </body>
+</html>

templates/template.html

@@ -2,54 +2,23 @@
 <html lang="en">
     <head>
 	<meta charset="utf-8">
-        <meta name="date" content='$date-meta$'>
+	<meta name="date" content='$date$'>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
-        <style>
-            ::selection {
-                background: #e67e80;
-                color: #232a2e;
-            }
-
-            body {
-                color: #d3c6aa;
-                font-family: sans-serif;
-                background: #2d353b;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-
-            a {
-                color: #d699b6;
-            }
-
-            .sourceCode code {
-                font-family: 'JetBrains Mono', monospace;
-            }
-
-            code {
-                background: #232a2e;
-                font-family: 'JetBrains Mono', monospace;
-                overflow-y: scroll;
-            }
-
-            div.sourceCode {
-                background: #232a2e;
-                overflow-y: scroll;
-                padding: 10px;
-            }
-
-            #wrapper {
-                width: 50%;
-                height: 100%;
-            }
-        </style>
+	<link rel="stylesheet" href="/static/style.css">
 	<title>$title$</title>
     </head>
     <body>
 	<div id="wrapper">
+	    <div class="title">
+		<a class="back" title="Back" href="/blog">..</a>
+		<h2>
+		    $title$
+		</h2>
+		<span class="date">$date$</span>
+	    </div>
+	    <hr>
 	    $body$
 	</div>
     </body>