Change: templating and styling

esadek · Nov 1, 2024 · 58e3b3f · 58e3b3f
1 parent 0fdb7f3
commit 58e3b3f
Show file tree

Hide file tree

Showing 26 changed files with 2,089 additions and 1,066 deletions.
diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
@@ -2,7 +2,7 @@ name: Publish on GitHub Pages
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:

diff --git a/CNAME b/CNAME
@@ -1 +1 @@
-emilsadek.com
+emilsadek.com
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # Emil Sadek's Blog
 
 Built with [Lume](https://lume.land/),
-[Nunjucks](https://mozilla.github.io/nunjucks/),
-[Bootstrap](https://getbootstrap.com/) and
+[JSX](https://facebook.github.io/jsx/),
+[Tailwind CSS](https://tailwindcss.com/) and
 [Highlight.js](https://highlightjs.org/). Hosted with
 [GitHub Pages](https://pages.github.com/).
 

diff --git a/_config.ts b/_config.ts
@@ -1,15 +1,25 @@
 import lume from "lume/mod.ts";
 import date from "lume/plugins/date.ts";
 import codeHighlight from "lume/plugins/code_highlight.ts";
+import jsx from "lume/plugins/jsx.ts";
+import tailwindcss from "lume/plugins/tailwindcss.ts";
+import postcss from "lume/plugins/postcss.ts";
+import search from "lume/plugins/search.ts";
 
 const site = lume();
 
+site.use(search());
 site.use(date());
 site.use(codeHighlight());
+site.use(jsx());
+site.use(tailwindcss({ extensions: [".html", ".tsx"] }));
+site.use(postcss());
+
+site.loadAssets([".css"]);
 
-site.copy("static");
 site.copy("CNAME");
+site.copy("static");
 
-site.ignore("README.md");
+site.ignore("LICENSE", "README.md");
 
 export default site;
diff --git a/_includes/base.njk b/_includes/base.njk
diff --git a/_includes/base.tsx b/_includes/base.tsx
@@ -0,0 +1,79 @@
+export default ({ title, description, children }: Lume.Data) => (
+  <html>
+    <head>
+      <title>{title}</title>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="author" content="Emil Sadek" />
+      <meta name="description" content={description} />
+      <meta
+        property="og:title"
+        content="Emil Sadek's personal website and blog."
+      />
+      <meta property="og:description" content={description} />
+      <meta
+        property="og:image"
+        content="https://emilsadek.com/static/open_graph.png"
+      />
+      <link rel="stylesheet" href="/style.css" />
+      <link rel="icon" type="image/png" href="/static/favicon.png" />
+    </head>
+    <body>
+      <div className="navbar flex flex-col sm:flex-row justify-between items-center px-4 lg:px-80 py-3 bg-gradient">
+        <a href="/" className="text-2xl text-white">Emil Sadek</a>
+        <div className="flex gap-4">
+          <a
+            href="https://www.linkedin.com/in/emil-sadek/"
+            target="_blank"
+            className="flex items-center text-white"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+            >
+              <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+            </svg>
+            &nbsp;LinkedIn
+          </a>
+          <a
+            href="https://github.com/esadek"
+            target="_blank"
+            className="flex items-center text-white"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+            >
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+            </svg>
+            &nbsp;GitHub
+          </a>
+          <a
+            href="mailto:[email protected]"
+            className="flex items-center text-white"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              viewBox="0 0 16 16"
+            >
+              <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z" />
+            </svg>
+            &nbsp;Contact
+          </a>
+        </div>
+      </div>
+      <div className="px-4 lg:px-80 py-12">
+        {children}
+      </div>
+    </body>
+  </html>
+);
diff --git a/_includes/home.njk b/_includes/home.njk
diff --git a/_includes/home.tsx b/_includes/home.tsx
@@ -0,0 +1,20 @@
+export const layout = "base.tsx";
+
+export default ({ children, search }: Lume.Data, helpers: Lume.Helpers) => (
+  <>
+    <div className="text-lg">
+      {children}
+    </div>
+    <hr className="my-12" />
+    <div>
+      {search.pages("layout=post.tsx", "date=desc").map((page) => (
+        <div className="flex justify-between mb-2">
+          <a href={page.url}>{page.title}</a>
+          <p className="text-gray-500 font-light">
+            {helpers.date(page.date, "HUMAN_DATE")}
+          </p>
+        </div>
+      ))}
+    </div>
+  </>
+);
diff --git a/_includes/post.njk b/_includes/post.njk
diff --git a/_includes/post.tsx b/_includes/post.tsx
@@ -0,0 +1,18 @@
+export const layout = "base.tsx";
+
+export default (
+  { title, date, children }: Lume.Data,
+  helpers: Lume.Helpers,
+) => (
+  <>
+    <div className="mb-12">
+      <h1 className="text-3xl font-medium mb-3">{title}</h1>
+      <p className="text-gray-500">
+        {helpers.date(date, "HUMAN_DATE")}
+      </p>
+    </div>
+    <div className="post">
+      {children}
+    </div>
+  </>
+);
diff --git a/_site/CNAME b/_site/CNAME
@@ -1 +1 @@
-emilsadek.com
+emilsadek.com
diff --git a/_site/blog/learn-ml/index.html b/_site/blog/learn-ml/index.html
@@ -1,72 +1,31 @@
 <!DOCTYPE html>
-<html lang="en"><head>
-    <title>Learn Machine Learning</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="author" content="Emil Sadek">
-    <meta name="description" content="Emil Sadek is a software developer with a profound interest in programming, design, data, and machine learning.">
-    <meta property="og:title" content="Emil Sadek's personal website and blog.">
-    <meta property="og:description" content="Emil Sadek is a software developer with a profound interest in programming, design, data, and machine learning.">
-    <meta property="og:image" content="https://emilsadek.com/static/open_graph.png">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
-    <link rel="stylesheet" href="/static/style.css">
-    <link rel="icon" type="image/png" href="/static/favicon.png">
-  </head>
-  <body>
-    <nav class="navbar navbar-expand-md navbar-dark gradient">
-      <div class="container">
-        <a class="navbar-brand mb-0 fs-4" href="/">Emil Sadek</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div id="navbarText" class="collapse navbar-collapse justify-content-end">
-          <ul class="navbar-nav">
-            <li class="nav-item">
-              <a class="nav-link" href="https://www.linkedin.com/in/emil-sadek/" target="_blank"><i class="bi bi-linkedin"></i> LinkedIn</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="https://github.com/esadek" target="_blank"><i class="bi bi-github"></i> GitHub</a>
-            </li>
-            <li class="nav-item">
-              <a id="contact" class="nav-link" href="mailto:[email protected]"><i class="bi bi-envelope-fill"></i> Contact</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-    <main>
-      <div class="mx-2">
-        <div id="post" class="container my-5">
-  <h2>Learn Machine Learning</h2>
-  <p class="text-muted mb-5">July 4th, 2023</p>
-  <h4>Math</h4>
+<html><head><title>Learn Machine Learning</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="author" content="Emil Sadek"><meta name="description" content="Learn machine learning from a collection of the best free lecure series and books."><meta property="og:title" content="Emil Sadek's personal website and blog."><meta property="og:description" content="Learn machine learning from a collection of the best free lecure series and books."><meta property="og:image" content="https://emilsadek.com/static/open_graph.png"><link rel="stylesheet" href="/style.css"><link rel="icon" type="image/png" href="/static/favicon.png"></head><body><div class="navbar flex flex-col sm:flex-row justify-between items-center px-4 lg:px-80 py-3 bg-gradient"><a href="/" class="text-2xl text-white">Emil Sadek</a><div class="flex gap-4"><a href="https://www.linkedin.com/in/emil-sadek/" target="_blank" class="flex items-center text-white"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewbox="0 0 16 16"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"></path></svg>&nbsp;LinkedIn</a><a href="https://github.com/esadek" target="_blank" class="flex items-center text-white"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewbox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"></path></svg>&nbsp;GitHub</a><a href="mailto:[email protected]" class="flex items-center text-white"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewbox="0 0 16 16"><path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z"></path></svg>&nbsp;Contact</a></div></div><div class="px-4 lg:px-80 py-12"><div class="mb-12"><h1 class="text-3xl font-medium mb-3">Learn Machine Learning</h1><p class="text-gray-500">July 4th, 2023</p></div><div class="post"><div><h2>Math</h2>
 <ul>
-<li><a href="https://www.youtube.com/playlist?list=PLD80i8An1OEGZ2tYimemzwC3xqkU0jKUg">Math for Machine Learning</a> - Weights &amp; Biases</li>
-<li><a href="https://mml-book.github.io/book/mml-book.pdf">Mathematics for Machine Learning</a> - Marc Peter Deisenroth, A. Aldo Faisal and Cheng Soon Ong</li>
+<li><a href="https://www.youtube.com/playlist?list=PLD80i8An1OEGZ2tYimemzwC3xqkU0jKUg">Math for Machine Learning</a> -
+Weights &amp; Biases</li>
+<li><a href="https://mml-book.github.io/book/mml-book.pdf">Mathematics for Machine Learning</a> -
+Marc Peter Deisenroth, A. Aldo Faisal and Cheng Soon Ong</li>
 </ul>
-<h4>Machine Learning</h4>
+<h2>Machine Learning</h2>
 <ul>
-<li><a href="https://www.youtube.com/playlist?list=PLkDaE6sCZn6FNC6YRfRQc_FbeQrF8BwGI">Machine Learning Course</a> - Andrew Ng</li>
-<li><a href="https://www.statlearning.com/">An Introduction to Statistical Learning</a> - Gareth James, Daniela Witten, Trevor Hastie and Robert Tibshirani</li>
+<li><a href="https://www.youtube.com/playlist?list=PLkDaE6sCZn6FNC6YRfRQc_FbeQrF8BwGI">Machine Learning Course</a> -
+Andrew Ng</li>
+<li><a href="https://www.statlearning.com/">An Introduction to Statistical Learning</a> -
+Gareth James, Daniela Witten, Trevor Hastie and Robert Tibshirani</li>
 </ul>
-<h4>Deep Learning</h4>
+<h2>Deep Learning</h2>
 <ul>
 <li><a href="http://introtodeeplearning.com">Introduction to Deep Learning</a> - MIT</li>
-<li><a href="https://www.youtube.com/playlist?list=PLqYmG7hTraZCDxZ44o4p3N5Anz3lLRVZF">Deep Learning Lecture Series</a> - DeepMind x UCL</li>
-<li><a href="https://www.deeplearningbook.org">Deep Learning</a> - Ian Goodfellow, Yoshua Bengio and Aaron Courville</li>
+<li><a href="https://www.youtube.com/playlist?list=PLqYmG7hTraZCDxZ44o4p3N5Anz3lLRVZF">Deep Learning Lecture Series</a> -
+DeepMind x UCL</li>
+<li><a href="https://www.deeplearningbook.org">Deep Learning</a> - Ian Goodfellow, Yoshua
+Bengio and Aaron Courville</li>
 </ul>
-<h4>Reinforcement Learning</h4>
+<h2>Reinforcement Learning</h2>
 <ul>
-<li><a href="https://www.youtube.com/playlist?list=PLqYmG7hTraZDVH599EItlEWsUOsJbAodm">Reinforcement Learning Lecture Series</a> - DeepMind x UCL</li>
-<li><a href="http://incompleteideas.net/book/RLbook2020.pdf">Reinforcement Learning</a> - Richard S. Sutton and Andrew G. Barto</li>
+<li><a href="https://www.youtube.com/playlist?list=PLqYmG7hTraZDVH599EItlEWsUOsJbAodm">Reinforcement Learning Lecture Series</a> -
+DeepMind x UCL</li>
+<li><a href="http://incompleteideas.net/book/RLbook2020.pdf">Reinforcement Learning</a> -
+Richard S. Sutton and Andrew G. Barto</li>
 </ul>
-
-</div>
-
-      </div>
-    </main>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-
-
-</body></html>
+</div></div></div></body></html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ name: Publish on GitHub Pages @@
     on:
       push:
-        branches: [ master ]
+        branches: [master]
     jobs:
       build:
@@ Expand Down @@