update title

AI-Session-Id: bb850d52-a517-4b4d-b173-e7ed9525bc2d
AI-Tool: claude-code
AI-Model: unknown

Author: ivikramsahu

src/layouts/BaseLayout.astro

@@ -130,8 +130,12 @@ const metaDescription = description ?? 'Writing and notes.';
             <source srcset="/mascot.png" type="image/png" />
             <img src="/mascot.svg" alt="Vikram mascot" class="h-[75px] w-[75px]" />
           </picture>
-          <span class="font-hal truncate text-[30px] leading-none font-semibold tracking-tight text-black dark:text-zinc-50">
-            {siteName}
+          <span
+            id="site-title"
+            class="font-hal truncate text-[30px] leading-none font-semibold tracking-tight text-black dark:text-zinc-50"
+            data-typing-text={siteName}
+          >
+            <span id="site-title-prefix"></span><span id="site-title-word"></span><span id="site-title-cursor" aria-hidden="true">_</span>
           </span>
         </a>
         <nav class="flex shrink-0 items-center gap-4 text-[16px]">
@@ -338,6 +342,104 @@ const metaDescription = description ?? 'Writing and notes.';
       })();
     </script>
 
+    <style is:inline>
+      #site-title {
+        white-space: nowrap;
+      }
+
+      #site-title-cursor {
+        display: inline-block;
+        margin-left: 1px;
+        opacity: 1;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        #site-title-cursor {
+          display: none;
+        }
+      }
+    </style>
+
+    <script is:inline>
+      (() => {
+        const run = () => {
+          if (window.__siteTitleLoopRunning) return;
+          window.__siteTitleLoopRunning = true;
+
+          const host = document.getElementById('site-title');
+          const prefixEl = document.getElementById('site-title-prefix');
+          const wordEl = document.getElementById('site-title-word');
+          const cursorEl = document.getElementById('site-title-cursor');
+
+          if (!host || !prefixEl || !wordEl || !cursorEl) return;
+
+          const prefersReduced =
+            typeof window !== 'undefined' &&
+            window.matchMedia &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+          const prefix = "Vikram's ";
+          const words = ['Focushours', 'Blog', 'Tools', 'Experiments'];
+
+          if (prefersReduced) {
+            prefixEl.textContent = prefix;
+            wordEl.textContent = words[0];
+            cursorEl.style.display = 'none';
+            return;
+          }
+
+          const sleep = (ms) => new Promise((r) => window.setTimeout(r, ms));
+
+          const typeInto = async (el, text, delay) => {
+            el.textContent = '';
+            for (let i = 0; i < text.length; i += 1) {
+              el.textContent += text[i];
+              await sleep(delay);
+            }
+          };
+
+          const backspace = async (el, delay) => {
+            while (el.textContent && el.textContent.length > 0) {
+              el.textContent = el.textContent.slice(0, -1);
+              await sleep(delay);
+            }
+          };
+
+          const blinkCursor = async (times) => {
+            for (let i = 0; i < times; i += 1) {
+              cursorEl.style.opacity = '0';
+              await sleep(500);
+              cursorEl.style.opacity = '1';
+              await sleep(500);
+            }
+          };
+
+          (async () => {
+            prefixEl.textContent = '';
+            wordEl.textContent = '';
+            cursorEl.style.opacity = '1';
+
+            await typeInto(prefixEl, prefix, 55);
+            await typeInto(wordEl, words[0], 70);
+
+            let idx = 0;
+            while (true) {
+              await blinkCursor(3);
+              await backspace(wordEl, 35);
+              idx = (idx + 1) % words.length;
+              await typeInto(wordEl, words[idx], 70);
+            }
+          })();
+        };
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', run);
+        } else {
+          run();
+        }
+      })();
+    </script>
+
     <div
       id="toast"
       class="pointer-events-none fixed bottom-5 left-1/2 z-[60] transition-all duration-200"

src/pages/blog/[...slug].astro

@@ -117,9 +117,10 @@ function renderInlineCode(input: string) {
         <h1 class="mb-0 text-[40px] leading-[1.1] font-semibold tracking-tight">
           <span set:html={renderInlineCode(post.data.title)} />
         </h1>
-        <div class="text-base text-zinc-600 dark:text-zinc-400">{formattedDate}</div>
-        {hasReadTime && (
-          <div class="flex items-center gap-3 text-sm text-zinc-500 dark:text-zinc-400">
+
+        <div class="mt-5 flex flex-wrap items-center justify-between gap-4 text-sm text-zinc-600 dark:text-zinc-400">
+          <div class="flex flex-wrap items-center gap-3">
+            <span>{formattedDate}</span>
             {hasReadTime && (
               <span class="inline-flex items-center gap-1">
                 <svg
@@ -135,16 +136,57 @@ function renderInlineCode(input: string) {
                   <circle cx="12" cy="12" r="10" />
                   <path d="M12 6v6l4 2" />
                 </svg>
-                <span>{readTime} min</span>
+                <span>{readTime} minutes</span>
               </span>
             )}
           </div>
-        )}
-        {hasReadTime && (
-          <div class="pt-3">
-            <div class="h-px w-full bg-zinc-200 dark:bg-zinc-800"></div>
+
+          <div class="flex items-center gap-2">
+            <span class="hidden sm:inline">Share:</span>
+            <button
+              type="button"
+              data-share="x"
+              class="grid h-8 w-8 place-items-center rounded-full border border-zinc-200 text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-900"
+              aria-label="Share on X"
+            >
+              <svg viewBox="0 0 24 24" class="h-4 w-4" aria-hidden="true" fill="currentColor">
+                <path
+                  d="M18.9 2H22l-6.8 7.8L23 22h-6.6l-5.2-6.7L5.3 22H2l7.4-8.5L1 2h6.7l4.7 6.1L18.9 2zm-1.1 18h1.7L6.8 4H5L17.8 20z"
+                />
+              </svg>
+            </button>
+
+            <button
+              type="button"
+              data-share="facebook"
+              class="grid h-8 w-8 place-items-center rounded-full border border-zinc-200 text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-900"
+              aria-label="Share on Facebook"
+            >
+              <svg viewBox="0 0 24 24" class="h-4 w-4" aria-hidden="true" fill="currentColor">
+                <path
+                  d="M13.5 22v-8h2.7l.4-3h-3.1V9.1c0-.9.3-1.5 1.6-1.5h1.7V5c-.3 0-1.5-.1-2.8-.1-2.8 0-4.6 1.7-4.6 4.8V11H7v3h2.7v8h3.8z"
+                />
+              </svg>
+            </button>
+
+            <button
+              type="button"
+              data-share="linkedin"
+              class="grid h-8 w-8 place-items-center rounded-full border border-zinc-200 text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-900"
+              aria-label="Share on LinkedIn"
+            >
+              <svg viewBox="0 0 24 24" class="h-4 w-4" aria-hidden="true" fill="currentColor">
+                <path
+                  d="M20.5 3h-17C2.7 3 2 3.7 2 4.5v17c0 .8.7 1.5 1.5 1.5h17c.8 0 1.5-.7 1.5-1.5v-17c0-.8-.7-1.5-1.5-1.5zM8 20H5v-9h3v9zM6.5 9.8C5.5 9.8 4.7 9 4.7 8s.8-1.8 1.8-1.8 1.8.8 1.8 1.8-.8 1.8-1.8 1.8zM20 20h-3v-4.9c0-1.2 0-2.7-1.7-2.7s-2 1.3-2 2.6V20h-3v-9h2.9v1.2h.1c.4-.8 1.4-1.7 2.9-1.7 3.1 0 3.7 2 3.7 4.7V20z"
+                />
+              </svg>
+            </button>
           </div>
-        )}
+        </div>
+
+        <div class="pt-3">
+          <div class="h-px w-full bg-zinc-200 dark:bg-zinc-800"></div>
+        </div>
       </div>
       <Content />
     </article>
@@ -177,7 +219,114 @@ function renderInlineCode(input: string) {
           }
         };
 
+        const setupShare = () => {
+          const buttons = document.querySelectorAll('button[data-share]');
+          if (!buttons.length) return;
+
+          const getShareUrl = (provider, pageUrl) => {
+            const u = encodeURIComponent(pageUrl);
+            switch (provider) {
+              case 'x':
+                return `https://twitter.com/intent/tweet?url=${u}`;
+              case 'facebook':
+                return `https://www.facebook.com/sharer/sharer.php?u=${u}`;
+              case 'linkedin':
+                return `https://www.linkedin.com/sharing/share-offsite/?url=${u}`;
+              default:
+                return '';
+            }
+          };
+
+          buttons.forEach((btn) => {
+            btn.addEventListener('click', async () => {
+              if (!(btn instanceof HTMLElement)) return;
+              const provider = btn.getAttribute('data-share');
+              const pageUrl = window.location.href;
+              const shareUrl = getShareUrl(provider, pageUrl);
+              if (!shareUrl) {
+                const ok = await copyText(pageUrl);
+                if (ok && typeof window.__toast === 'function') window.__toast('Copied link');
+                return;
+              }
+              window.open(shareUrl, '_blank', 'noopener,noreferrer');
+            });
+          });
+        };
+
+        const setupTocScrollSpy = () => {
+          const aside = document.querySelector('aside[data-toc]');
+          if (!aside) return;
+
+          const links = Array.from(aside.querySelectorAll('a[data-toc-link]'));
+          if (!links.length) return;
+
+          const map = new Map();
+          for (const a of links) {
+            const id = a.getAttribute('data-toc-link');
+            if (id) map.set(id, a);
+          }
+
+          const headings = Array.from(
+            document.querySelectorAll('article.prose h2[id], article.prose h3[id]')
+          ).filter((h) => map.has(h.getAttribute('id')));
+
+          if (!headings.length) return;
+
+          let activeId = '';
+
+          const setActive = (id) => {
+            if (!id || id === activeId) return;
+            const prev = activeId ? map.get(activeId) : null;
+            if (prev) {
+              prev.removeAttribute('data-active');
+              prev.removeAttribute('aria-current');
+            }
+            const next = map.get(id);
+            if (next) {
+              next.setAttribute('data-active', 'true');
+              next.setAttribute('aria-current', 'true');
+              activeId = id;
+            }
+          };
+
+          const computeActive = () => {
+            const offset = 140;
+            let current = headings[0].getAttribute('id');
+            for (const h of headings) {
+              const top = h.getBoundingClientRect().top;
+              if (top - offset <= 0) current = h.getAttribute('id');
+              else break;
+            }
+            if (current) setActive(current);
+          };
+
+          let ticking = false;
+          const onScroll = () => {
+            if (ticking) return;
+            ticking = true;
+            window.requestAnimationFrame(() => {
+              computeActive();
+              ticking = false;
+            });
+          };
+
+          window.addEventListener('scroll', onScroll, { passive: true });
+          window.addEventListener('resize', onScroll);
+          computeActive();
+
+          for (const a of links) {
+            a.addEventListener('click', () => {
+              const id = a.getAttribute('data-toc-link');
+              if (!id) return;
+              window.setTimeout(() => setActive(id), 0);
+            });
+          }
+        };
+
         const init = () => {
+          setupShare();
+          setupTocScrollSpy();
+
           const root = document.querySelector('article.prose');
           if (!root) return;
 
@@ -212,16 +361,18 @@ function renderInlineCode(input: string) {
       })();
     </script>
 
-    <aside class="hidden lg:block">
-      <div class="sticky top-24 max-h-[calc(100vh-8rem)] overflow-auto border-l border-zinc-200 pl-6 dark:border-zinc-800">
-        <div class="text-sm font-semibold text-zinc-700 dark:text-zinc-50">Table of content</div>
+    <aside class="hidden lg:block" data-toc>
+      <div class="sticky top-24 max-h-[calc(100vh-8rem)] overflow-auto">
+        <div class="text-[16px] font-semibold text-zinc-700 dark:text-zinc-50">Table of Contents</div>
+        <div class="mt-3 h-px w-full bg-zinc-200 dark:bg-zinc-800"></div>
         {toc.length > 0 ? (
-          <nav class="mt-3">
-            <ul class="space-y-2 text-sm">
+          <nav class="mt-4">
+            <ul class="space-y-1 text-sm">
               {toc.map((h) => (
                 <li class={h.depth === 3 ? 'pl-4' : ''}>
                   <a
-                    class="group flex items-start gap-2 no-underline text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
+                    data-toc-link={h.slug}
+                    class="toc-link block rounded-lg px-3 py-2 no-underline text-zinc-700 transition-colors dark:text-zinc-300"
                     href={`#${h.slug}`}
                   >
                     <span class="leading-snug">{h.text}</span>
@@ -236,4 +387,15 @@ function renderInlineCode(input: string) {
       </div>
     </aside>
   </div>
+
+  <style is:inline>
+    a.toc-link:hover {
+      background: rgb(var(--brand-primary-rgb) / 0.09);
+      color: rgb(var(--brand-link-rgb));
+    }
+    a.toc-link[data-active='true'] {
+      background: rgb(var(--brand-primary-rgb) / 0.14);
+      color: rgb(var(--brand-link-rgb));
+    }
+  </style>
 </BaseLayout>