Add light/dark mode and styling consistency.

astro.config.mjs

@@ -11,4 +11,14 @@ import tailwind from "@astrojs/tailwind";
 export default defineConfig({
   site: "https://mnprt.me",
   integrations: [mdx(), sitemap(), tailwind(), react()],
+  markdown: {
+    shikiConfig: {
+      themes: {
+        light: "github-light",
+        dark: "github-dark",
+      },
+
+      defaultColor: "light",
+    },
+  },
 });

src/components/Navbar.astro

@@ -0,0 +1,14 @@
+---
+import Theme from "./Theme.astro";
+---
+
+<div class="flex gap-1 items-start">
+  <a
+    href="/"
+    class="hover:cursor-pointer hover:bg-blue-400/30 text-blue-500 visited:text-purple-500 py-2"
+    >[ Home ]</a
+  >
+  <div class="ml-auto py-1.5">
+    <Theme />
+  </div>
+</div>

src/components/Theme.astro

@@ -0,0 +1,83 @@
+---
+
+---
+
+<div class="hover:cursor-pointer" id="themeToggle">
+  <svg height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      class="fill-textBlack dark:fill-transparent weeb:fill-transparent"
+      fill-rule="evenodd"
+      d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+    ></path>
+    <path
+      class="fill-transparent dark:fill-backgroundWhite weeb:fill-backgroundWhite"
+      fill-rule="evenodd"
+      d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+    ></path>
+  </svg>
+</div>
+
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+      return localStorage.getItem("theme") ?? "light";
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  })();
+
+  document.documentElement.classList.toggle("dark", theme === "dark");
+  document.documentElement.classList.toggle("weeb", theme === "weeb");
+  window.localStorage.setItem("theme", theme);
+
+  let longPressTimeout;
+  let isLongPress = false;
+
+  const handleToggleClick = () => {
+    if (isLongPress) {
+      isLongPress = false;
+      return;
+    }
+
+    const element = document.documentElement;
+
+    if (element.classList.contains("weeb")) {
+      element.classList.remove("weeb");
+      element.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else if (element.classList.contains("dark")) {
+      element.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    } else {
+      element.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    }
+  };
+
+  const handleLongPress = () => {
+    const element = document.documentElement;
+    if (element.classList.contains("dark")) {
+      element.classList.remove("dark");
+      element.classList.add("weeb");
+      localStorage.setItem("theme", "weeb");
+      isLongPress = true;
+    }
+  };
+
+  const handleMouseDown = () => {
+    longPressTimeout = setTimeout(handleLongPress, 500);
+  };
+
+  const handleMouseUp = () => {
+    clearTimeout(longPressTimeout);
+  };
+
+  const themeToggleElement = document.getElementById("themeToggle");
+  themeToggleElement?.addEventListener("click", handleToggleClick);
+
+  themeToggleElement?.addEventListener("mousedown", handleMouseDown);
+  themeToggleElement?.addEventListener("mouseup", handleMouseUp);
+  themeToggleElement?.addEventListener("mouseleave", handleMouseUp);
+</script>

src/components/WritingLayout.astro

@@ -1,7 +1,9 @@
 ---
+import "../styles/global.css";
 import "../styles/writings.css";
 import Header from "./Header.astro";
 import Analytics from "@vercel/analytics/astro";
+import Navbar from "./Navbar.astro";
 export interface Props {
   title?: string;
   description?: string;
@@ -10,23 +12,22 @@ const { title, description } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en" class="bg-frieren bg-no-repeat bg-cover bg-fixed bg-center">
+<html lang="en" class="bg-no-repeat bg-cover bg-fixed bg-center">
   <Header title={title} description={description} />
   <body
-    class="font-mono min-h-dvh md:backdrop-blur-[5px] bg-background/85 tracking-wide"
+    class="font-sans min-h-dvh md:backdrop-blur-[5px] bg-neutral-200 dark:bg-background/85 weeb:bg-background/85"
   >
     <Analytics />
     <div
-      class="container mx-auto my-0 lg:max-w-[850px] text-zinc-50 p-5 text-sm md:text-base pb-8"
+      class="container mx-auto lg:max-w-screen-md text-textBlack dark:text-zinc-50 weeb:text-zinc-50 text-sm md:text-base p-5 tracking-wide"
     >
-      <a
-        href="/"
-        class="hover:cursor-pointer hover:bg-slate-800 text-blue-500 py-2"
-        >[ Home ]</a
-      >
+      <Navbar />
       <slot />
       <div class="my-10"></div>
-      <div class="h-1 w-full my-4 bg-slate-800"></div>
+      <div
+        class="h-0.5 w-full my-2 bg-pink-800/30 dark:bg-slate-600 weeb:bg-slate-600"
+      >
+      </div>
     </div>
   </body>
 </html>

src/content/writings/deploy-ktor-to-vps.mdx

@@ -5,17 +5,17 @@ import { Image } from 'astro:assets';
 import githubActionImage from '../assets/github-action.png';
 
 
-# \# Deploying Ktor app in a VPS using github actions
-<div class="h-1 w-full my-4 bg-slate-800"></div>
+#  Deploying Ktor app in a VPS using github actions
+<div class="h-0.5 w-full my-2 bg-pink-800/30 dark:bg-slate-600 weeb:bg-slate-600"></div>
 
-## \#\# Overview
+##  Overview
 This is my simple docker + VPS setup for deploying Ktor application. Read [ktor's deployment documentation](https://ktor.io/docs/server-deployment.html) if you want to learn about different/right way of deploying a Ktor app.
 
 In this setup we deploy automatically whenever a code change is pushed to `GitHub`. We rely on [`github actions`](https://docs.github.com/en/actions) to build and push the docker image to [`ghcr`](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry), and to trigger a new deployment on the server.
 <Image src={githubActionImage} alt="A rocketship in space." class="max-w-[100%] mx-auto my-4"/>
 
-## \#\# Setting up the project
-### \#\#\# Ktor Gradle Plugin
+##  Setting up the project
+###  Ktor Gradle Plugin
 Configure [`ktor gradle plugin`](https://ktor.io/docs/server-fatjar.html), so we can build a `fatJar` using `gradlew fatJar` command.
 ```kts
 plugins {
@@ -35,7 +35,7 @@ ktor {
 }
 ```
 
-### \#\#\# Dockerfile
+###  Dockerfile
 We will use a simple `Dockerfile`. This `image` requires us to build the `fatJar` externally before building our docker image.
 
 
@@ -98,7 +98,7 @@ Your directory should look like this after these steps
 ```
 
 
-### \#\#\# Github Action Setup
+###  Github Action Setup
 Create a [github workflow](https://docs.github.com/en/actions/writing-workflows/about-workflows) that deploys whenever new changes are merged into our `main` branch.
 
 ```yaml
@@ -192,7 +192,7 @@ VPS_USERNAME=
 ```
 
 
-## \#\# Final notes
+##  Final notes
 * No rolling release: This setup stops the running application before deploying the new version.
 * Assumption: VPS has docker installed and is authenticated with [`ghcr`](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry#authenticating-in-a-github-actions-workflow).
 * Due to the way docker compose is setup the `jdbc` url in our application should look like: `"jdbc:postgresql://db:5432/$dbName"` i.e. should use `db` as a hostname rather than `localhost`.

src/pages/index.astro

@@ -1,68 +1,72 @@
 ---
 // src/pages/writings.astro
+import "../styles/global.css";
 import { getCollection } from "astro:content";
 import Header from "../components/Header.astro";
 import Analytics from "@vercel/analytics/astro";
 import { Image } from "astro:assets";
 import frieren from "../../public/frieren.png";
+import Navbar from "../components/Navbar.astro";
 const posts = await getCollection("writings");
 ---
 
 <!doctype html>
-<html lang="en" class="bg-frieren bg-no-repeat bg-cover bg-fixed bg-center" }>
+<html lang="en" class="bg-no-repeat bg-cover bg-fixed bg-center">
   <Header
     title="mnprt's site"
     description="hey! i am manpreet. i love the kotlin."
   />
-  <body class="font-sans min-h-dvh md:backdrop-blur-[5px] bg-background/85">
+  <body
+    class="font-sans min-h-dvh md:backdrop-blur-[5px] bg-neutral-200 dark:bg-background/85 weeb:bg-background/85"
+  >
     <Analytics />
     <div
-      class="container mx-auto lg:max-w-screen-md text-zinc-50 text-sm md:text-base p-5 tracking-wide"
+      class="container mx-auto lg:max-w-screen-md text-textBlack dark:text-zinc-50 weeb:text-zinc-50 text-sm md:text-base p-5 tracking-wide"
     >
-      <div class="flex gap-10 pt-20 items-start">
+      <Navbar />
+      <div class="weeb:flex weeb:gap-10 pt-20 weeb:items-start">
         <Image
-          class="w-full max-w-[200px] md:max-w-[400px] h-auto object-contain"
+          class="max-h-0 weeb:block weeb:max-h-[400px] w-full max-w-[200px] md:max-w-[400px] object-contain transition-[max-height] transform ease-in-out duration-100"
           alt="frieren standing in garden of flowers"
           loading="eager"
           src={frieren}
         />
         <div class="flex flex-col gap-4 md:gap-10">
           <h1 class="text-xl md:text-4xl">mnprt.me</h1>
-          <ul class="flex flex-col gap-2">
-            <!--<li>-->
-            <!--  <a-->
-            <!--    href="/blogs"-->
-            <!--    class="hover:cursor-pointer hover:bg-blue-400/30 text-blue-500 py-2"-->
-            <!--    >[ <span class="underline">rss feed of blogs i like</span> ]-->
-            <!--  </a>-->
-            <!--</li>-->
-          </ul>
+          <ul class="flex flex-col gap-2"></ul>
         </div>
       </div>
-      <div class="flex flex-col gap-2 pt-8">
-        <h1 class="text-sm md:text-xl pb-2 text-peacock">## About</h1>
+      <div class="flex flex-col gap-2 weeb:pt-8">
+        <h1 class="text-sm md:text-xl pb-2 text-cyan-700">About</h1>
         <p>
-          Hey! I'm <span class="px-2 bg-slate-800 text-pink-400">manpreet</span
+          Hey! I'm <span
+            class="px-2 dark:bg-slate-800 weeb:bg-slate-800 dark:text-pink-400 weeb:text-pink-400 text-pink-800 bg-slate-200"
+            >manpreet</span
           >.
         </p>
         <p>
-          I enjoy writing <span class="px-2 bg-slate-800 text-pink-400"
+          I enjoy writing <span
+            class="px-2 dark:bg-slate-800 weeb:bg-slate-800 text-pink-800 dark:text-pink-400 weeb:text-pink-400 bg-slate-200"
             >Kotlin</span
           >, learning new technologies and reading <a
             href="https://news.ycombinator.com/"
-            class="hover:cursor-pointer hover:bg-blue-400/30 text-blue-500"
+            class="hover:cursor-pointer hover:bg-blue-400/30 text-blue-500 visited:text-purple-500"
             >[ hackernews ]</a
           > articles.
         </p>
         <p>
-          I am studying <span class="px-2 bg-slate-800 text-pink-400"
+          I am studying <span
+            class="px-2 dark:bg-slate-800 weeb:bg-slate-800 dark:text-pink-400 weeb:text-pink-400 text-pink-800 bg-slate-200"
             >Computer Science</span
-          > at <span class="text-fadegreen">University of Alberta</span> and am currently
-          interested in information retrieval and distributed systems.
+          > at <span
+            class="text-green-600 dark:text-fadegreen weeb:text-fadegreen"
+            >University of Alberta</span
+          > and am currently interested in information retrieval and distributed
+          systems.
         </p>
       </div>
       <div class="pt-8">
-        <h1 class="text-sm md:text-xl pb-2 text-peacock">## Posts</h1>
+        <h1 class="text-sm md:text-xl pb-2 text-cyan-700">Posts</h1>
         <ul class="flex flex-col gap-2">
           {
             posts
@@ -72,7 +76,7 @@ const posts = await getCollection("writings");
                   href={`/posts/${post.slug}/`}
                   class="visited:text-purple-500 text-blue-500"
                 >
-                  <li class="hover:cursor-pointer hover:bg-slate-800">
+                  <li class="hover:cursor-pointer hover:bg-blue-400/30">
                     [ {post.data.title} ]
                   </li>
                 </a>
@@ -81,10 +85,12 @@ const posts = await getCollection("writings");
         </ul>
       </div>
       <div class="flex flex-col gap-2 py-8">
-        <h1 class="text-sm md:text-xl pb-2 text-peacock">## Contact</h1>
+        <h1 class="text-sm md:text-xl pb-2 text-cyan-700">Contact</h1>
         <p class="pb-2">
-          I go by <span class="px-2 bg-slate-800 text-pink-400">mnprt</span> online.
-          Contact me via:
+          I go by <span
+            class="px-2 dark:bg-slate-800 weeb:bg-slate-800 text-pink-800 dark:text-pink-400 weeb:text-pink-400 bg-slate-200"
+            >mnprt</span
+          > online. Contact me via:
         </p>
         <ul class="flex flex-col gap-2">
           <li class="list-disc ml-4">

src/styles/global.css

@@ -2,20 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 @layer base {
+  html.weeb {
+    background-image: url("/lain.webp");
+  }
+
   ::-webkit-scrollbar {
-    @apply w-2;
+    @apply w-2 h-2;
   }
 
   ::-webkit-scrollbar-track {
-    @apply bg-inherit;
+    @apply bg-pink-800/10 dark:bg-inherit;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-slate-600 rounded-sm;
+    @apply bg-pink-800/30 dark:bg-slate-600 rounded-sm;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-slate-700;
+    @apply bg-pink-800/30 dark:bg-slate-700;
+  }
+
+  ::-webkit-scrollbar-corner {
+    @apply bg-pink-800/10 dark:bg-transparent;
   }
   :root {
     --radius: 0.5rem;