feat: improve layout

eslint.config.js

@@ -2,8 +2,6 @@ import eslintPluginAstro from "eslint-plugin-astro";
 import perfectionist from "eslint-plugin-perfectionist";
 import perfectionistNatural from "eslint-plugin-perfectionist/configs/recommended-natural";
 export default [
-  // add more generic rule sets here, such as:
-  // js.configs.recommended,
   ...eslintPluginAstro.configs.recommended,
   perfectionistNatural,
   {

src/components/blog/BlogPostItem.astro

@@ -3,7 +3,7 @@ const { entry } = Astro.props;
 ---
 
 <a
-  class="border-zinc/15 hover:bg-zinc/5 h-entry u-url u-url group relative flex flex-nowrap gap-2 rounded-lg border border-dashed px-4 py-3 pr-10 shadow-sm transition-colors duration-300 ease-in-out hover:bg-black/5 hover:text-zinc-800 dark:border-white/20 dark:hover:bg-white/5 dark:hover:text-zinc-100"
+  class="border-zinc/15 hover:bg-zinc/5 h-entry u-url group relative flex flex-nowrap gap-2 rounded-lg border border-dashed px-4 py-3 pr-10 shadow-sm transition-colors duration-300 ease-in-out hover:bg-black/5 hover:text-zinc-800 dark:border-white/20 dark:hover:bg-white/5 dark:hover:text-zinc-100"
   href={`/blog/${entry.slug}/`}>
   <div class="flex flex-1 flex-col truncate">
     <div class="text-md p-name font-serif font-semibold">

src/components/common/HeaderIcons.astro

@@ -0,0 +1,9 @@
+---
+import RssIcon from "../icons/RssIcon.astro";
+import ThemeIcon from "../layout/ThemeIcon.astro";
+---
+
+<div class="buttons flex gap-2">
+  <RssIcon />
+  <ThemeIcon />
+</div>

src/components/icons/MoonIcon.astro

@@ -1,5 +1,5 @@
 <svg
-  class="moon animate xs:flex duration-800 border-zinc/10 hover:bg-zinc/5 hover:stroke-zinc block h-[36px] w-[36px] items-center justify-center rounded-full border bg-transparent stroke-current p-2 transition-colors ease-in-out dark:hidden dark:border-white/25 dark:hover:bg-white/20 hover:dark:stroke-white"
+  class="moon duration-800 block h-9 w-9 rounded-full border border-zinc-200 bg-transparent stroke-current p-2 transition-colors ease-in-out hover:bg-zinc-100 hover:stroke-zinc-600 dark:hidden dark:border-white/25 dark:hover:bg-white/20 dark:hover:stroke-white"
   fill="none"
   stroke="currentColor"
   stroke-linecap="round"

src/components/icons/RssIcon.astro

@@ -1,14 +1,19 @@
-<svg
-  class="feather feather-rss size-full"
-  fill="none"
-  height="32"
-  stroke="currentColor"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  stroke-width="2"
-  viewBox="0 0 24 24"
-  width="32"
-  xmlns="http://www.w3.org/2000/svg"
-  ><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"
-  ></path><circle cx="5" cy="19" r="1"></circle></svg
->
+<a
+  aria-label="RSS feed for Alexandre"
+  class="flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 p-2 transition-colors duration-300 ease-in-out hover:bg-zinc-100 hover:stroke-zinc-600 dark:border-white/25 dark:hover:bg-white/20 dark:hover:stroke-white"
+  href="/feed"
+  target="_blank">
+  <svg
+    class="feather feather-rss h-full w-full"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 11a9 9 0 0 1 9 9"></path>
+    <path d="M4 4a16 16 0 0 1 16 16"></path>
+    <circle cx="5" cy="19" r="1"></circle>
+  </svg>
+</a>

src/components/icons/SunIcon.astro

@@ -1,12 +1,13 @@
 <svg
-  class="sun animate xs:flex duration-800 border-zinc/10 hover:bg-zinc/5 hover:stroke-zinc hidden h-[36px] w-[36px] items-center justify-center rounded-full border bg-transparent stroke-current p-2 transition-colors ease-in-out dark:block dark:border-white/25 dark:hover:bg-white/20 hover:dark:stroke-white"
+  class="sun hidden h-9 w-9 rounded-full border border-zinc-200 bg-transparent p-2 stroke-current transition-colors duration-800 ease-in-out hover:bg-zinc-100 hover:stroke-zinc-600 dark:block dark:border-white/25 dark:hover:bg-white/20 dark:hover:stroke-white"
   fill="none"
   stroke="currentColor"
   stroke-linecap="round"
   stroke-linejoin="round"
   stroke-width="2"
   viewBox="0 0 24 24"
-  xmlns="http://www.w3.org/2000/svg">
+  xmlns="http://www.w3.org/2000/svg"
+>
   <circle cx="12" cy="12" r="5"></circle>
   <line x1="12" x2="12" y1="1" y2="3"></line>
   <line x1="12" x2="12" y1="21" y2="23"></line>

src/components/layout/Footer.astro

@@ -1,36 +1,25 @@
 ---
 import FooterItem from "@/components/layout/FooterItem.astro";
 
-const year = new Date().getFullYear();
-
-const footersItems = [
+const footerItems = [
   { external: false, href: "/now", label: "Now" },
-  { external: true, href: "/feed", label: "RSS Feed" },
   { external: false, href: "/colophon", label: "Colophon" },
   { external: false, href: "/contact", label: "Contact" },
 ];
 ---
 
 <footer
-  class="animate flex w-full max-w-[60rem] flex-wrap pb-6 text-sm sm:flex-nowrap sm:justify-start">
-  <div
-    class="text-md relative mx-auto flex w-full items-center justify-between font-medium sm:flex sm:items-center">
-    <div>
-      &copy; {year}
-      {`|`}
-      Alexandre Mouriec
-    </div>
-
-    <nav>
-      {
-        footersItems.map((item) => (
-          <FooterItem
-            external={item.external}
-            href={item.href}
-            label={item.label}
-          />
-        ))
-      }
-    </nav>
-  </div>
+  class="flex w-full max-w-4xl flex-wrap px-6 pb-6 text-sm sm:flex-nowrap sm:justify-start">
+  <nav class="mx-auto flex w-full justify-center md:justify-end">
+    {
+      footerItems.map((item) => (
+        <FooterItem
+          external={item.external}
+          href={item.href}
+          key={item.href}
+          label={item.label}
+        />
+      ))
+    }
+  </nav>
 </footer>

src/components/layout/FooterItem.astro

@@ -4,8 +4,9 @@ const { external, href, label } = Astro.props;
 
 <a
   aria-label={label}
-  class="text-md mx-1 rounded p-2 font-medium hover:bg-black/5 hover:text-zinc-800 dark:hover:bg-white/5 dark:hover:text-zinc-100"
+  class="mx-1 rounded p-2 text-md font-medium hover:bg-black/5 hover:text-zinc-800 dark:hover:bg-white/5 dark:hover:text-zinc-100"
   href={href}
+  rel={external ? "noopener noreferrer" : null}
   target={external ? "_blank" : "_self"}>
   {label}
 </a>

src/components/layout/Header.astro

@@ -1,28 +1,27 @@
 ---
-import Rss from "@/components/common/Rss.astro";
+import HeaderIcons from "@/components/common/HeaderIcons.astro";
 import Navigation from "@/components/navigation/Navigation.astro";
 import Logo from "@/images/logos/logo-512x512.png";
 import { Image } from "astro:assets";
 ---
 
-<header
-  class="mb-12 flex w-full flex-wrap px-6 pb-3 text-sm sm:flex-nowrap sm:justify-start">
+<header class="mb-12 w-full px-6 pb-3">
   <nav
     aria-label="global"
-    class="relative mx-auto flex w-full items-center justify-between sm:flex sm:items-center">
-    <a aria-label="Header Logo Image" class="mr-6 flex-none" href="/">
+    class="mx-auto flex w-full items-center justify-between sm:flex-nowrap">
+    <a aria-label="Header Logo" class="mr-6 flex-none" href="/">
       <Image
         alt="Alexandre Mouriec"
-        class="h-[32px] w-[32px] rounded-full"
+        class="h-8 w-8 rounded-full"
         height="64"
         loading="eager"
         src={Logo}
         width="64"
       />
     </a>
-    <div class="flex flex-row items-center justify-center gap-x-5">
+    <div class="flex items-center gap-x-5">
       <Navigation />
-      <Rss />
+      <HeaderIcons />
     </div>
   </nav>
 </header>

src/components/navigation/Navigation.astro

@@ -9,7 +9,7 @@ const navigationItems = [
 ];
 ---
 
-<nav>
+<nav class="flex">
   {
     navigationItems.map((item) => (
       <NavigationItem href={item.href} label={item.label} />

src/components/navigation/NavigationItem.astro

@@ -4,7 +4,7 @@ const { href, label } = Astro.props;
 
 <a
   aria-label={label}
-  class="text-md dark:hover:bg-zinc/5 mx-0.5 rounded px-3 py-2 font-medium hover:bg-black/5 hover:text-zinc-800 dark:hover:text-zinc-100"
+  class="text-md mx-0.5 rounded px-3 py-2 font-medium hover:bg-black/5 hover:text-zinc-800 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
   href={href}>
   {label}
 </a>

src/content/posts/new-website.md

@@ -3,7 +3,7 @@ title: I have built a new website
 author: Alexandre Mouriec
 pubDate: 2024-07-10
 description: This blogpost explains how I built this website and what I plan to do with it.
-tags: ["programming"]
+tags: ["website", "indieweb"]
 ---
 
 Welcome to my _new personal website_ !

src/layouts/BaseLayout.astro

@@ -5,8 +5,7 @@ import Head from "@/components/layout/Head.astro";
 import Header from "@/components/layout/Header.astro";
 import "@/styles/app.css";
 
-const { pageTitle } = Astro.props;
-const { pageSubtitle } = Astro.props;
+const { pageSubtitle, pageTitle } = Astro.props;
 ---
 
 <html lang="en">
@@ -17,18 +16,18 @@ const { pageSubtitle } = Astro.props;
   <body
     class="bg-light dark:bg-dark flex min-h-screen flex-col items-center justify-center">
     <main
-      class="mb-12 flex w-screen max-w-[60rem] flex-grow flex-col items-center py-8 text-[0.92rem] leading-relaxed sm:px-10 lg:px-10">
+      class="mb-12 flex w-full max-w-4xl flex-grow flex-col items-center py-8 text-sm leading-relaxed sm:px-10 lg:px-10">
       <Header />
       {
         pageTitle && (
-          <h1 class="leading-tighter dark: mx-auto font-serif text-3xl font-semibold tracking-tighter text-zinc-900 lg:prose-lg xl:prose-xl 2xl:prose-2xl dark:text-zinc-100 md:text-4xl">
+          <h1 class="prose mx-auto font-serif text-3xl font-semibold tracking-tight text-zinc-900 lg:prose-lg xl:prose-xl 2xl:prose-2xl dark:text-zinc-100 md:text-4xl">
             {pageTitle}
           </h1>
         )
       }
       {
         pageSubtitle && (
-          <p class="dark:text-slate-450 font-regular font-serif text-base italic leading-7 text-slate-400">
+          <p class="dark:text-slate-450 font-serif text-base italic leading-7 text-slate-400">
             {pageSubtitle}
           </p>
         )

src/layouts/BlogPostLayout.astro

@@ -1,75 +1,82 @@
 ---
 import BackToPrev from "@/components/common/BackToPrev.astro";
 import FormattedDate from "@/components/common/FormattedDate.astro";
+import Logo from "@/images/logos/logo-512x512.png";
 import { Image } from "astro:assets";
 import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
 
 import BaseLayout from "./BaseLayout.astro";
 
 const { frontmatter, readingTime } = Astro.props;
 
-const lastModified = dayjs(frontmatter.lastModified)
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const formattedLastModified = dayjs(frontmatter.lastModified)
   .utc()
   .tz("Europe/Paris")
   .format("MMMM DD YYYY HH:mm:ss");
 ---
 
 <BaseLayout>
-  <section class="mx-auto mb-12 max-w-4xl px-4 leading-normal sm:px-6">
+  <section class="mx-auto mb-12 leading-normal sm:px-6">
     <div>
-      <div class="animate">
-        <BackToPrev href="/blog"> Back to Blog </BackToPrev>
-      </div>
+      <BackToPrev href="/blog">Back to Blog</BackToPrev>
       <section class="mx-auto pt-4">
         <article
-          class="h-entry prose mx-auto text-zinc-800 prose-table:table-fixed dark:text-neutral-100">
-          <header>
-            <div
-              class="e-content mx-auto mt-0 flex max-w-5xl flex-col justify-between sm:flex-row sm:items-center">
-              <div class="leading-loose">
-                <h1
-                  class="p-name mb-2 mt-6 font-serif text-4xl font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
-                  {frontmatter.title}
-                </h1>
-
-                <div
-                  class="animate font-regular dt-published prose-sm flex items-center gap-1.5 text-gray-800 dark:text-neutral-300">
-                  <span>
-                    Published on <FormattedDate date={frontmatter.pubDate} />
-                  </span>
-                  &bull;
-
-                  <span>
-                    Updated on {lastModified.toString().slice(0, 12)}
-                  </span>
-
-                  &bull;
-                  <span>
-                    {readingTime}
-                  </span>
-                </div>
+          class="prose mx-auto text-zinc-800 prose-table:table-fixed dark:text-neutral-100">
+          <header class="mx-auto mb-10 mt-6">
+            <h1
+              class="mb-6 font-serif text-4xl font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+              {frontmatter.title}
+            </h1>
+            <div class="flex items-center justify-start gap-2">
+              <Image
+                alt="Alexandre Mouriec"
+                class="m-0 mr-1 h-10 w-10 cursor-pointer rounded-full object-cover"
+                height="80"
+                src={Logo}
+                width="80"
+              />
+              <div class="text-md font-medium dark:text-white">
+                <div>Alexandre Mouriec</div>
               </div>
             </div>
+            <p class="text-sm text-gray-500 dark:text-neutral-400">
+              <span
+                >Published on <FormattedDate date={frontmatter.pubDate} /></span
+              >
+              &bull;
+              <span>Updated on {formattedLastModified.slice(0, 12)}</span>
+              &bull;
+              <span>{readingTime}</span>
+            </p>
           </header>
           {
             frontmatter.image && (
-              <div class="aspect-w-3 aspect-h-2 -my-2">
+              <div class="aspect-w-3 aspect-h-2 mb-6">
                 <Image
                   alt={frontmatter.image.alt}
-                  class="h-full w-full rounded-lg object-cover object-center"
+                  class="rounded-lg object-cover object-center"
                   src={frontmatter.image.url}
                 />
               </div>
             )
           }
           <slot class="prose prose-xl" />
-          <!-- {
-            frontmatter.tags.map((tag) => (
-              <span class="mr-2 inline-flex cursor-pointer justify-start rounded-full border border-transparent bg-slate-100 px-2 py-1 text-sm text-slate-700 no-underline transition hover:rotate-2 hover:scale-105 active:scale-95 dark:bg-slate-600 dark:text-slate-300">
-                {tag}
-              </span>
-            ))
-          } -->
+          <div class="mt-8 flex flex-wrap gap-2">
+            {
+              frontmatter.tags.map((tag) => (
+                <span
+                  class="inline-flex cursor-pointer items-center justify-center rounded-full border border-transparent bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700 no-underline transition hover:rotate-2 hover:scale-105 active:scale-95 dark:bg-slate-600 dark:text-slate-300"
+                  key={tag}>
+                  {tag}
+                </span>
+              ))
+            }
+          </div>
         </article>
       </section>
     </div>