brought back prev design

.gitignore

@@ -1,27 +1,7 @@
-# build output
-dist/
-
-# generated types
-.astro/
-
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
-
-.idea
-.vscode
+**/.idea
+**/node_modules
+**/dist
+**/.astro
 
 packages/blog/src/content/.obsidian
 packages/blog/src/content/templates

packages/blog/.prettierignore

@@ -1,24 +1,7 @@
 # build output
-dist/
-
-# generated types
-.astro/
-
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
+**/dist
+**/node_modules
+**/.astro
 
 src/content/.obsidian
 src/content/templates

packages/blog/src/pages/about.astro

@@ -22,7 +22,7 @@ const links = await getCollection('links');
     <Link
       href="/rss.xml"
       target="_blank">
-      <span class="text-gray-500"> subscribe with RSS</span>
+      subscribe with RSS
     </Link>
   </p>
 

packages/blog/src/pages/index.astro

@@ -5,10 +5,9 @@ import { Post } from '../shared/post.js';
 import { getCollection } from 'astro:content';
 import _ from 'lodash';
 import Layout from '../shared/components/templates/Layout.astro';
-import StandOut from '../shared/components/molecules/StandOut.astro';
-import Link from '../shared/components/atoms/Link.astro';
 import Intro from '../shared/components/organisms/Intro.astro';
 import PostList from '../shared/components/organisms/PostList.astro';
+import PinnedPosts from '../shared/components/organisms/PinnedPosts.astro';
 
 const allEntries = Post.sortEntries(await getCollection('posts'));
 const [pinnedEntries, nonPinnedEntries] = _.partition(
@@ -25,23 +24,7 @@ const nonPinnedPosts = await Promise.all(
 ---
 
 <Layout>
-  {
-    pinnedPosts.map((post) => (
-      <StandOut class="flex-col">
-        <span class="flex gap-3 items-center">
-          <i class="fa-solid fa-thumbtack" />
-          <Link
-            href={post.fullPath}
-            class="flex-1">
-            <span class="flex gap-3">
-              <span class="flex-1 truncate">{post.title}</span>
-              <span>{post.publishedAt}</span>
-            </span>
-          </Link>
-        </span>
-      </StandOut>
-    ))
-  }
+  <PinnedPosts posts={pinnedPosts} />
 
   <Intro />
 

packages/blog/src/pages/rss.xml.ts

@@ -24,7 +24,7 @@ export async function GET(context: APIContext) {
         pubDate: entry.data.publishedAt,
         link: post.fullPath,
         categories: entry.data.tags,
-        author: '[email protected]',
+        author: DATA.email,
       };
     }),
   });

packages/blog/src/shared/components/atoms/Link.astro

@@ -1,16 +1,18 @@
 ---
 import { type HTMLAttributes } from 'astro/types';
+import { removeTrailingSlash } from '../../utils/remove-trailing-slash';
 
 interface Props extends HTMLAttributes<'a'> {}
 
 const { href, class: moreClasses, ...props } = Astro.props;
 
-const currentPath = Astro.url.pathname.slice(0, -1);
+const currentPath = removeTrailingSlash(Astro.url.pathname);
 ---
 
 <a
   class:list={[
     'hover:text-blue-500 hover:underline',
+    { 'text-gray-500': href !== currentPath },
     { 'text-black underline': href === currentPath },
     moreClasses,
   ]}

packages/blog/src/shared/components/molecules/PostListItem.astro

@@ -0,0 +1,19 @@
+---
+import { Post } from '../../post';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends Pick<HTMLAttributes<'a'>, 'class'> {
+  post: Post;
+}
+
+const { post, class: moreClasses } = Astro.props;
+---
+
+<a
+  href={post.fullPath}
+  class:list={['text-black hover:text-blue-500 hover:underline', moreClasses]}>
+  <span class="flex gap-3">
+    <span class="flex-1 truncate">{post.title}</span>
+    <span>{post.publishedAt}</span>
+  </span>
+</a>

packages/blog/src/shared/components/organisms/Footer.astro

@@ -1,10 +1,11 @@
 ---
 import '@fortawesome/fontawesome-free/css/fontawesome.css';
 import '@fortawesome/fontawesome-free/css/solid.css';
+import { DATA } from '../../data';
 ---
 
 <footer class="flex gap-1 items-center p-4 border-t">
-  <span class="text-gray-500 text-sm">Mordechai Dror © 2021-present</span>
+  <span class="text-gray-500 text-sm">{DATA.copyright}</span>
 
   <div class="flex-1"></div>
 

packages/blog/src/shared/components/organisms/Header.astro

@@ -2,17 +2,7 @@
 import { Image } from 'astro:assets';
 import logoHeader from '../../images/logo-header.svg';
 import Link from '../atoms/Link.astro';
-
-const navLinks = [
-  {
-    label: 'About',
-    url: '/about',
-  },
-  {
-    label: 'Posts',
-    url: '/posts',
-  },
-];
+import { DATA } from '../../data';
 ---
 
 <header class="flex gap-1 items-center p-4 border-b">
@@ -30,8 +20,8 @@ const navLinks = [
 
   <ul class="flex gap-3">
     {
-      navLinks.map((link) => (
-        <li class="text-sm text-gray-500">
+      DATA.navLinks.map((link) => (
+        <li class="text-sm">
           <Link href={link.url}>{link.label}</Link>
         </li>
       ))

packages/blog/src/shared/components/organisms/PinnedPosts.astro

@@ -0,0 +1,25 @@
+---
+import StandOut from '../molecules/StandOut.astro';
+import { Post } from '../../post';
+import PostListItem from '../molecules/PostListItem.astro';
+
+interface Props {
+  posts: Post[];
+}
+
+const { posts } = Astro.props;
+---
+
+{
+  posts.map((post) => (
+    <StandOut class="flex-col">
+      <span class="flex gap-3 items-center">
+        <i class="fa-solid fa-thumbtack" />
+        <PostListItem
+          post={post}
+          class="flex-1"
+        />
+      </span>
+    </StandOut>
+  ))
+}

packages/blog/src/shared/components/organisms/PostList.astro

@@ -1,6 +1,7 @@
 ---
 import { Post } from '../../post';
-import Link from '../atoms/Link.astro';
+import PostListItem from '../molecules/PostListItem.astro';
+
 interface Props {
   posts: Post[];
 }
@@ -12,12 +13,7 @@ const { posts } = Astro.props;
   {
     posts.map((post) => (
       <li class="flex flex-col py-3 text-medium">
-        <Link href={post.fullPath}>
-          <span class="flex gap-3">
-            <span class="flex-1 truncate">{post.title}</span>
-            <span>{post.publishedAt}</span>
-          </span>
-        </Link>
+        <PostListItem post={post} />
       </li>
     ))
   }

packages/blog/src/shared/components/templates/Layout.astro

@@ -3,7 +3,6 @@ import '@fontsource/open-sans';
 import Header from '../organisms/Header.astro';
 import Footer from '../organisms/Footer.astro';
 import Analytics from '../organisms/Analytics.astro';
-import Background from '../molecules/Background.astro';
 import { DATA } from '../../data';
 
 interface Props {
@@ -57,21 +56,15 @@ const ogImage = new URL(image ?? '/favicon.ico', Astro.site);
     <title>{ogTitle}</title>
   </head>
   <body
-    class="mx-auto flex min-h-screen max-w-[872px] flex-col gap-9 bg-neutral-950 px-10 py-8 text-sm text-neutral-400 md:gap-20 md:py-16">
+    class="bg-gray-50 flex flex-col min-h-[calc(100dvh)] mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl">
     <Analytics />
 
-    <Background />
-
     <Header />
 
-    <slot />
+    <main class="flex-1 p-4 flex flex-col gap-2">
+      <slot />
+    </main>
 
     <Footer />
-
-    <style is:global>
-      html {
-        font-family: 'Open Sans';
-      }
-    </style>
   </body>
 </html>

packages/blog/src/shared/data.ts

@@ -2,10 +2,27 @@ export class Data {
   constructor(
     public readonly title: string,
     public readonly description: string,
+    public readonly email: string,
+    public readonly copyright: string,
+    public readonly navLinks: NavLink[],
+  ) {}
+}
+
+export class NavLink {
+  constructor(
+    public readonly label: string,
+    public readonly url: string,
   ) {}
 }
 
 export const DATA = new Data(
   `vorant94's Digital Garden`,
   `Welcome to my digital garden, here I write about all sorts of things (mostly about technologies, a little bit on gaming, traveling and self-reflecting)`,
+  '[email protected]',
+  'Mordechai Dror © 2021-present',
+  [
+    new NavLink('Home', '/'),
+    new NavLink('About', '/about'),
+    new NavLink('Posts', '/posts'),
+  ],
 );

packages/blog/src/shared/utils/remove-trailing-slash.ts

@@ -0,0 +1,3 @@
+export function removeTrailingSlash(pathname: string) {
+  return /\w+\/$/.test(pathname) ? pathname.slice(0, -1) : pathname;
+}