fix: add new blog post for Oct, change terminal style, fix toc

astro.config.mjs

@@ -1,17 +1,36 @@
+import rehypePrettyCode from "rehype-pretty-code";
 import { defineConfig } from "astro/config";
 import partytown from "@astrojs/partytown";
 import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
 import compress from "astro-compress";
+import remarkToc from "remark-toc";
 import mdx from "@astrojs/mdx";
 
+const options = {
+  theme: "one-dark-pro",
+  onVisitLine(node) {
+    // Prevent lines from collapsing in `display: grid` mode, and allow empty lines to be copy/pasted
+    if (node.children.length === 0) {
+      node.children = [{ type: "text", value: " " }];
+    }
+  },
+  onVisitHighlightedLine(node) {
+    node.properties.className.push("highlighted");
+  },
+  onVisitHighlightedWord(node) {
+    node.properties.className = ["word"];
+  },
+};
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://nir.galons.io",
   integrations: [sitemap(), tailwind({ config: { applyBaseStyles: false } }), partytown(), mdx(), compress()],
   markdown: {
-    shikiConfig: {
-      theme: "dracula-soft",
-    },
+    rehypePlugins: [[rehypePrettyCode, options]],
+    syntaxHighlight: false,
+    remarkPlugins: [remarkToc],
+    extendDefaultPlugins: true, // Preserve Astro's default plugins: GitHub-flavored Markdown and Smartypants
   },
 });

package.json

@@ -27,6 +27,8 @@
     "algoliasearch": "^4.14.2",
     "astro": "^1.2.6",
     "astro-compress": "^1.0.12",
+    "rehype-pretty-code": "^0.4.0",
+    "remark-toc": "^8.0.1",
     "tailwindcss": "^3.1.8"
   },
   "devDependencies": {

src/components/Header.astro

@@ -1,18 +1,44 @@
-<div class="flex w-full items-center justify-between p-4">
-  <a href="/">
-    <span class="sr-only">Nir Galon</span>
-    <i class="h-10 w-10 fa-solid fa-user-astronaut"></i>
-  </a>
-  <div class="ml-10 space-x-8 lg:block">
-    <a href="/blog" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300">Blog</a>
+<div class="flex flex-col md:flex-row justify-between md:items-center p-4">
+  <div class="flex justify-between items-center">
+    <a href="/">
+      <span class="sr-only">Nir Galon</span>
+      <i class="h-10 w-10 fa-solid fa-user-astronaut"></i>
+    </a>
+    <span id="openMenu" onclick="toggleMenu()" class="md:hidden"><i class="fa-regular fa-bars w-8 h-8"></i></span>
+    <span id="closeMenu" onclick="toggleMenu()" class="hidden md:hidden"><i class="fa-regular fa-xmark w-8 h-8"></i></span>
+  </div>
+  <div
+    id="menu"
+    class="text-center space-y-4 py-2 md:py-0 mt-2 md:mt-2 md:space-y-0 md:ml-10 md:space-x-8 hidden md:block border-t-2 md:border-t-0 border-zinc-800"
+  >
+    <div class="md:hidden">
+      <div class="relative mt-1 rounded-md shadow-sm">
+        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+          <i class="fa-regular fa-magnifying-glass"></i>
+        </div>
+        <input
+          type="text"
+          name="search"
+          id="search"
+          class="w-full rounded-md pl-10 py-2 px-4 bg-zinc-200 dark:bg-zinc-700 border-transparent focus:border-zinc-50 focus:dark:border-zinc-800 focus:ring-zinc-50 focus:dark:ring-zinc-800"
+          placeholder="Search titles or content"
+        />
+      </div>
+    </div>
+
+    <a href="/blog" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300 block md:inline-block">Blog</a>
 
-    <a href="/categories" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300">Categories</a>
+    <a href="/categories" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300 block md:inline-block"
+      >Categories</a
+    >
 
-    <a href="/about" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300">About</a>
+    <a href="/about" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300 block md:inline-block">About</a>
 
-    <a href="/contact" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300">Contact</a>
+    <a href="/contact" class="text-base font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-300 block md:inline-block"
+      >Contact</a
+    >
 
-    <button id="theme-button" onclick="handleClick()" aria-label="change theme color"></button>
+    <button id="theme-button" onclick="handleClick()" aria-label="change theme color" class="block md:inline-block mx-auto"></button>
   </div>
 
   <script is:inline>
@@ -33,5 +59,22 @@
         document.getElementById("theme-button").innerHTML = "<i class='fa-solid fa-sun'></<i>";
       }
     };
+
+    const toggleMenu = () => {
+      const menuElement = document.getElementById("menu");
+      const openMenu = document.getElementById("openMenu");
+      const closeMenu = document.getElementById("closeMenu");
+      if (menuElement.classList.contains("hidden")) {
+        menuElement.classList.remove("hidden");
+
+        openMenu.classList.add("hidden");
+        closeMenu.classList.remove("hidden");
+      } else {
+        menuElement.classList.add("hidden");
+
+        openMenu.classList.remove("hidden");
+        closeMenu.classList.add("hidden");
+      }
+    };
   </script>
 </div>