Merge pull request #9 from AVGVSTVS96/darkMode

Add dark mode, update toc script, add sample blog posts, update styling, update Tailwind config

astro.config.mjs

@@ -1,15 +1,22 @@
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
-
+import remarkSectionize from 'remark-sectionize';
 import expressiveCode from 'astro-expressive-code';
 
 /** @type {import('astro-expressive-code').AstroExpressiveCodeOptions} */
 const astroExpressiveCodeOptions = {
-  themes: ['material-theme-ocean'],
+  themes: ['material-theme-ocean', 'material-theme-palenight'],
 };
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), expressiveCode(astroExpressiveCodeOptions)],
+  markdown: {
+    remarkPlugins: [remarkSectionize],
+  },
+  integrations: [
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    expressiveCode(astroExpressiveCodeOptions),
+  ],
 });
-

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@astrojs/tailwind": "^5.0.3",
     "astro": "^4.0.6",
-    "astro-expressive-code": "^0.30.1"
+    "astro-expressive-code": "^0.30.1",
+    "remark-sectionize": "^2.0.0"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",

src/components/BlogIndex.astro

@@ -1,24 +1,25 @@
 ---
 const allPosts = await Astro.glob('../pages/posts/*.md');
-const { styles = '' } = Astro.props;
+const { class: className } = Astro.props;
 let displayPosts = Astro.props.postCount
   ? allPosts.slice(-Astro.props.postCount)
   : allPosts;
 ---
 
-<ul class={`list-none pl-0 ${styles}`}>
+<ul class={`list-none pl-0 ${className}`}>
   {
     displayPosts.map((post) => (
-      <li class="flex flex-row-reverse justify-between border-b-[0.5px] border-slate-300/25 p-2.5">
+      <li class="flex flex-row-reverse justify-between border-b-[0.5px] dark:border-slate-400/20 p-2.5">
         <div>
           <a
             href={post.url}
-            class="text-xl font-[600] text-sky-300/80 decoration-1 decoration-sky-300/55 underline-offset-[5px] hover:underline">
+            class="text-xl font-[600] text-slate-700 dark:text-sky-300/80 decoration-1 dark:decoration-sky-300/55 underline-offset-[5px] hover:underline">
             {post.frontmatter.title}
           </a>
         </div>
-        <div class="text-slate-200/60">{post.frontmatter.pubDate}</div>
+        <div class="text-slate-600/75 dark:text-slate-200/60">{post.frontmatter.pubDate}</div>
       </li>
     ))
   }
 </ul>
+

src/components/Card.astro

@@ -11,12 +11,17 @@ let { variant, displayHr } = Astro.props;
 ---
 
 <div
-  class={`prose prose-invert max-w-3xl rounded-lg p-6 prose-h2:font-semibold prose-h2:opacity-60 ${
+  class={`prose prose-slate dark:prose-invert max-w-3xl rounded-lg p-6 prose-h2:font-semibold prose-h2:opacity-80 dark:prose-h2:opacity-60 ${
     variant === 'borderless' ? '' : 'border border-slate-200 border-opacity-20'
   }`}>
   <h1 class="mb-2">{Astro.props.title}</h1>
   <h2 class="mt-0">{Astro.props.subtitle}</h2>
-  {displayHr && <hr class="mb-8 border-sky-400/70" />}
+  {displayHr && <hr class="mb-8 border-sky-500" />}
   <h3 class="mb-1">{Astro.props.heading}</h3>
   <slot name="content" />
 </div>
+<style>
+  html.light {
+    @apply prose-headings:text-slate-700;
+  }
+</style>

src/components/Footer.astro

@@ -4,9 +4,9 @@ const name = "Bassim Shahidy";
 ---
 
 <div
-  class="footer-container mt-24 flex w-3/4 justify-center border-t-2 border-slate-600 border-opacity-70">
+  class="footer-container mt-24 flex w-3/4 justify-center border-t-2 dark:border-slate-600 border-opacity-70">
   <footer
-    class="mb-6 mt-8 flex items-center gap-4 text-sm text-slate-50 text-opacity-60">
+    class="mb-6 mt-8 flex items-center gap-4 text-sm dark:text-slate-50 text-opacity-60">
     <p>© {new Date().getFullYear()} {name}. All rights reserved.</p>
     <Social platform="github" username="avgvstvs96" />
   </footer>

src/components/NavBar.astro

@@ -1,10 +1,11 @@
 ---
 import Button from './subComponents/Button.astro';
 import DropdownMenu from './subComponents/DropdownMenu.astro';
+import ThemeToggle from './subComponents/ThemeToggle.astro';
 ---
 
 <div
-  class="navbar-container sticky top-0 z-10 mb-8 w-full bg-slate-900 py-2 pl-4 pr-2 sm:w-5/6 sm:rounded-b-lg">
+  class="navbar-container sticky top-0 z-10 mb-8 w-full bg-slate-900 py-2 pl-4 pr-2">
   <div class="button-container flex items-center justify-between gap-6">
     <a href="/">
       <img
@@ -29,6 +30,7 @@ import DropdownMenu from './subComponents/DropdownMenu.astro';
           { name: 'Old Flask Site', url: '/flaskSite' },
         ]}
       />
+      <ThemeToggle />
     </div>
   </div>
 </div>

src/components/TableOfContents.astro

@@ -24,15 +24,43 @@ function buildToc(headings: string[]) {
 ---
 
 <nav
-  class="toc prose prose-invert sticky top-28 mt-28 w-[240px] text-[0.8em] leading-normal prose-a:text-slate-300/70 sm:pl-2 md:pl-4 xl:pl-6">
+  class="toc prose sticky top-28 mt-28 w-[240px] text-[0.8em] leading-normal dark:prose-invert prose-a:text-slate-500 sm:pl-2 md:pl-4 xl:pl-6 dark:prose-a:text-slate-300/70">
   <ul class="grid list-none">
     {
       toc.map((heading) => (
         <TableOfContentsHeading
-          className="toc-item my-[0.15rem]"
+          class="toc-item my-[0.15rem]"
           heading={heading}
         />
       ))
     }
   </ul>
 </nav>
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const heading = entry.target.querySelector('h2, h3, h4, h5');
+          if (!heading) return;
+          const id = heading.getAttribute('id');
+          const tocLink = document.querySelector(`.toc a[href="#${id}"]`);
+          if (!tocLink) return;
+
+          if (entry.intersectionRatio > 0) {
+            tocLink.classList.add('active');
+          } else {
+            tocLink.classList.remove('active');
+          }
+        });
+      },
+      {
+        rootMargin: '-10% 0px -5% 0px',
+      }
+    );
+
+    document.querySelectorAll('article section').forEach((section) => {
+      observer.observe(section);
+    });
+  });
+</script>

src/components/TableOfContentsHeading.astro

@@ -1,5 +1,5 @@
 ---
-const { className, heading } = Astro.props;
+const { class: className, heading } = Astro.props;
 ---
 
 <li class={className}>
@@ -18,15 +18,15 @@ const { className, heading } = Astro.props;
 </li>
 
 <style>
-  .active {
-    @apply text-sky-300/70;
+  li:has(.active) > a {
+    @apply text-sky-400 hover:text-sky-300;
   }
 
-  li:has(.active) > a {
+  :root:is(.dark) li:has(.active) > a {
     @apply text-sky-300/70 hover:text-sky-300/90;
   }
 
-  :hover > a {
-    @apply text-slate-300/90;
+  a:hover {
+    @apply text-slate-400 dark:text-slate-300/90;
   }
 </style>

src/components/designProject1/MinimalNavBar.astro

@@ -5,6 +5,6 @@ import Button from '../subComponents/Button.astro';
 <header
   class="minimal-navbar-container flex min-w-full flex-row-reverse border-b border-slate-400 border-opacity-40 text-slate-200">
   <div class="button-container mx-6 my-4 flex pl-4">
-    <Button name="Home" link="/" styles="font-semibold text-opacity-100" />
+    <Button name="Home" link="/" class="font-semibold text-opacity-100" />
   </div>
 </header>

src/components/subComponents/Button.astro

@@ -4,16 +4,16 @@ interface Props {
   link?: string;
   id?: string;
   showCaret?: boolean;
-  styles?: string;
+  class?: string;
 }
 
-const { name, link, id, showCaret = false, styles = '' } = Astro.props;
+const { name, link, id, showCaret = false, class: className } = Astro.props;
 ---
 
 <a
   href={link}
   id={id}
-  class=`mx-2 flex rounded-lg px-3 py-2 font-normal text-slate-200 hover:bg-slate-800 text-opacity-70 hover:text-opacity-100 transition-color duration-200 max-w-max ${styles}`>
+  class=`mx-2 flex rounded-lg px-3 py-2 font-normal text-slate-200 hover:bg-slate-800 text-opacity-70 hover:text-opacity-100 transition-color duration-200 max-w-max ${className}`>
   <button class="flex">
     {name}
     {

src/components/subComponents/ThemeToggle.astro

@@ -0,0 +1,57 @@
+---
+
+---
+
+<button id="themeToggle" class="mr-4">
+  <svg width="26px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      class="sun"
+      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="moon"
+      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>
+</button>
+
+<style>
+  #themeToggle {
+    border: 0;
+    background: none;
+  }
+  .sun {
+    fill: rgb(250, 250, 250, 0.7);
+  }
+  .moon {
+    fill: transparent;
+  }
+
+  :global(.dark) .sun {
+    fill: transparent;
+  }
+  :global(.dark) .moon {
+    fill: rgb(250, 250, 250, 0.7);
+  }
+</style>
+
+<script is:inline>
+    const theme = localStorage.getItem('theme') || 'dark';
+    const element = document.documentElement;
+
+    element.className = theme;
+    element.setAttribute('data-theme', theme === 'dark' ? 'material-theme-ocean' : 'material-theme-palenight');
+
+    const handleToggleClick = () => {
+      const newTheme = element.className === 'dark' ? 'light' : 'dark';
+
+      element.className = newTheme;
+      element.setAttribute('data-theme', newTheme === 'dark' ? 'material-theme-ocean' : 'material-theme-palenight');
+
+      localStorage.setItem('theme', newTheme);
+    };
+
+    document.getElementById('themeToggle').addEventListener('click', handleToggleClick);
+  </script>