feat: redesign my webiste from scratch

- remove hugo and paper box theme - inspiration https://jay.fish - use astro based system Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
2026-07-04 15:50:08 +05:30 · 2026-02-25 19:46:43 +05:30
parent 62efd95607
commit 6b07ea345f
145 changed files with 10397 additions and 90 deletions
@@ -0,0 +1,72 @@
+---
+import Nav from "@/components/Nav.astro";
+import Footer from "@/components/Footer.astro";
+import theme, { generateThemeCSS } from "@/config/theme";
+import "@/styles/global.css";
+
+interface Props {
+  title: string;
+  description?: string;
+  ogImage?: string;
+}
+
+const {
+  title,
+  description = theme.site.description,
+  ogImage,
+} = Astro.props;
+
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const siteName = theme.site.title;
+const themeCSS = generateThemeCSS(theme);
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+
+    <title>{title === "Home" ? siteName : `${title} — ${siteName}`}</title>
+    <meta name="description" content={description} />
+    <link rel="canonical" href={canonicalURL} />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:site_name" content={siteName} />
+    {ogImage && <meta property="og:image" content={ogImage} />}
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/logo-static.svg" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <link rel="alternate" type="application/rss+xml" title="Avinal Kumar" href="/rss.xml" />
+
+    <!-- Design tokens generated from theme config -->
+    <style set:html={themeCSS} />
+
+    <!-- Theme: prevent flash by reading preference before paint -->
+    <script is:inline>
+      (function () {
+        const stored = localStorage.getItem("theme");
+        if (stored) {
+          document.documentElement.setAttribute("data-theme", stored);
+        } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+          document.documentElement.setAttribute("data-theme", "dark");
+        }
+      })();
+    </script>
+  </head>
+  <body>
+    <div class="page-wrapper">
+      <Nav />
+      <main class="main-content">
+        <slot />
+      </main>
+      <Footer />
+    </div>
+  </body>
+</html>
@@ -0,0 +1,152 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+
+interface Props {
+  title: string;
+  description?: string;
+  date: Date;
+  modified?: Date;
+  category?: string;
+  tags?: string[];
+  image?: string;
+  readingTime: string;
+  headings: { depth: number; slug: string; text: string }[];
+}
+
+const {
+  title,
+  description,
+  date,
+  modified,
+  category,
+  tags = [],
+  image,
+  readingTime,
+} = Astro.props;
+
+const fmtDate = (d: Date) =>
+  d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+---
+
+<BaseLayout title={title} description={description} ogImage={image || undefined}>
+  <article class="post-page">
+    {image && (
+      <div class="post-hero-img">
+        <img src={image} alt={title} />
+      </div>
+    )}
+
+    <header class="post-header">
+      <h1 class="post-title">{title}</h1>
+      {description && <p class="post-description">{description}</p>}
+      <div class="post-meta-row">
+        <time datetime={date.toISOString()}><em>{fmtDate(date)}</em></time>
+        {modified && (
+          <span class="post-updated">
+            (updated <time datetime={modified.toISOString()}><em>{fmtDate(modified)}</em></time>)
+          </span>
+        )}
+        <span class="meta-sep">&middot;</span>
+        <span><em>{readingTime}</em></span>
+      </div>
+      {(category || tags.length > 0) && (
+        <div class="post-tags">
+          {category && (
+            <a href={`/posts/${category}/`} class="badge post-category">
+              {category}
+            </a>
+          )}
+          {tags.map((tag) => (
+            <span class="tag">#{tag}</span>
+          ))}
+        </div>
+      )}
+    </header>
+
+    <div class="prose">
+      <slot />
+    </div>
+  </article>
+</BaseLayout>
+
+<style>
+  .post-page {
+    max-width: var(--max-w-prose);
+    margin-inline: auto;
+  }
+
+  .post-hero-img {
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    line-height: 0;
+    margin-bottom: var(--space-8);
+    aspect-ratio: 21 / 9;
+    background-color: var(--bg-surface-hover);
+  }
+
+  .post-hero-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .post-header {
+    margin-bottom: var(--space-10);
+    padding-bottom: var(--space-6);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .post-category {
+    text-decoration: none;
+    text-transform: capitalize;
+  }
+
+  .post-title {
+    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
+    margin-bottom: var(--space-3);
+  }
+
+  .post-description {
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+    margin-bottom: var(--space-4);
+    line-height: var(--leading-relaxed);
+  }
+
+  .post-meta-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+  }
+
+  .meta-sep {
+    color: var(--border-strong);
+  }
+
+  .post-updated {
+    font-style: italic;
+  }
+
+  .post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-top: var(--space-3);
+  }
+
+  .tag {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    background-color: var(--bg-surface);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+  }
+</style>