feat: refactor

2025-05-22 14:23:22 -05:00 · 2025-05-22 14:23:22 -05:00 · 8666e5a169
commit 8666e5a169
parent b83f17d087
57 changed files with 5734 additions and 5313 deletions
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -0,0 +1,40 @@
+---
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+
+interface Props {
+  title: string;
+  description?: string;
+  useKatex?: boolean;
+  bodyClass?: string;
+}
+
+const { 
+  title, 
+  description = "Barrett Ruth's personal website", 
+  useKatex = false,
+  bodyClass = "graph-background" 
+} = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/webp" href="/logo.webp" />
+    <link rel="stylesheet" href="/styles/common.css" />
+    <title>{title}</title>
+    <slot name="head" />
+  </head>
+  <body class={bodyClass}>
+    <Header />
+    <main class="main">
+      <slot />
+    </main>
+    <Footer />
+    <slot name="scripts" />
+  </body>
+</html>
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@ -0,0 +1,62 @@
+---
+import BaseLayout from './BaseLayout.astro';
+import path from 'path';
+
+interface Props {
+  frontmatter: {
+    title: string;
+    description?: string;
+    date?: string;
+    useKatex?: boolean;
+  };
+}
+
+const { frontmatter, post } = Astro.props;
+const { 
+  title, 
+  description, 
+  useKatex = false,
+ 
+} = frontmatter;
+
+const filePath = post?.id || '';
+const category = filePath.split('/')[0];
+
+function getTopicColor(category: string) {
+  switch (category) {
+    case 'algorithms':
+      return '#d50032';
+    case 'software':
+      return '#0073e6';
+    case 'operating-systems':
+      return '#009975';
+    case 'meditations':
+      return '#6a0dad';
+    default:
+      return '#000000';
+  }
+}
+
+const topicColor = getTopicColor(category);
+---
+
+<BaseLayout title={title} description={description} useKatex={useKatex}>
+  <slot name="head" slot="head">
+    <link rel="stylesheet" href="/styles/post.css" />
+    <link rel="stylesheet" href="/styles/mdx.css" />
+    {useKatex && (
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous" />
+    )}
+  </slot>
+
+  <div class="post-container" style={`--topic-color: ${topicColor};`}>
+    <header class="post-header">
+      <h1 class="post-title">{title}</h1>
+      <!-- Date removed from title as requested -->
+    </header>
+
+    <article class="post-article">
+      <slot />
+    </article>
+  </div>
+</BaseLayout>