Add prettier-plugin-css and update header border

2025-11-22 02:11:35 +01:00 · 2025-04-27 01:00:05 +02:00
parent 04b1282f12
commit 59f3226585
8 changed files with 101 additions and 20 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "plugins": ["prettier-plugin-astro"],
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": "*.astro",
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,10 +17,11 @@
      },
      "devDependencies": {
        "@tailwindcss/typography": "0.5.16",
-        "@types/markdown-it": "^14.1.2",
-        "@types/sanitize-html": "^2.15.0",
+        "@types/markdown-it": "14.1.2",
+        "@types/sanitize-html": "2.15.0",
        "prettier": "3.5.3",
-        "prettier-plugin-astro": "0.14.1"
+        "prettier-plugin-astro": "0.14.1",
+        "prettier-plugin-tailwindcss": "0.6.11"
      }
    },
    "node_modules/@astrojs/compiler": {
@@ -4486,6 +4487,85 @@
        "node": "^14.15.0 || >=16.0.0"
      }
    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/prismjs": {
      "version": "1.30.0",
      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
--- a/package.json
+++ b/package.json
@@ -19,9 +19,10 @@
  },
  "devDependencies": {
    "@tailwindcss/typography": "0.5.16",
-    "@types/markdown-it": "^14.1.2",
-    "@types/sanitize-html": "^2.15.0",
+    "@types/markdown-it": "14.1.2",
+    "@types/sanitize-html": "2.15.0",
    "prettier": "3.5.3",
-    "prettier-plugin-astro": "0.14.1"
+    "prettier-plugin-astro": "0.14.1",
+    "prettier-plugin-tailwindcss": "0.6.11"
  }
 }
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,5 @@
 <footer
-  class="flex flex-col items-center p-4 bg-neutral-100 dark:bg-neutral-900 prose prose-neutral dark:prose-invert max-w-none prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline"
+  class="prose prose-neutral dark:prose-invert prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline flex max-w-none flex-col items-center border-t border-dashed border-neutral-300 bg-white p-4 dark:border-neutral-600 dark:bg-neutral-800"
 >
  <p class="mb-2">&copy; 2025 Thilo Hohlt</p>
  <div class="flex gap-4">
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -13,7 +13,7 @@ const { title, pubDate, modDate, slug } = Astro.props;

 <header class="bg-white dark:bg-neutral-800">
  <div
-    class="prose prose-neutral dark:prose-invert mx-auto px-4 py-8 border-b border-neutral-200 dark:border-neutral-700 prose-h1:font-bold"
+    class="prose prose-neutral dark:prose-invert prose-h1:font-bold relative mx-auto px-4 py-8 before:absolute before:start-4 before:end-4 before:bottom-0 before:border-b before:border-neutral-300 before:content-[''] dark:before:border-neutral-600"
  >
    {
      pubDate ? (
@@ -27,7 +27,7 @@ const { title, pubDate, modDate, slug } = Astro.props;
          </p>
          <a
            href={`https://github.com/thiloho/thiloho.github.io/edit/main/src/content/blog/${slug}/index.md`}
-            class="text-blue-800 dark:text-blue-300 inline-flex items-center gap-1 hover:no-underline"
+            class="inline-flex items-center gap-1 text-blue-800 hover:no-underline dark:text-blue-300"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -4,9 +4,9 @@ import Logo from "../img/TH.svg";
 const routes = ["blog"];
 ---

-<nav class="max-w-none bg-neutral-100 dark:bg-neutral-900 sticky top-0 z-10">
+<nav class="sticky top-0 z-10 max-w-none bg-neutral-100 dark:bg-neutral-900">
  <div
-    class="text-neutral-700 dark:text-neutral-300 flex items-center justify-between max-w-screen-lg mx-auto ps-4 pe-2"
+    class="mx-auto flex max-w-screen-lg items-center justify-between ps-4 pe-2 text-neutral-700 dark:text-neutral-300"
  >
    <a href="/" title="Home">
      <Logo width={42} height={42} />
@@ -15,7 +15,7 @@ const routes = ["blog"];
      {
        routes.map((route) => (
          <a
-            class="inline-block p-2 border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
+            class="inline-block border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
            href={`/${route}`}
          >
            {route
@@ -26,7 +26,7 @@ const routes = ["blog"];
        ))
      }
      <button
-        class="theme-toggle p-2 cursor-pointer border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
+        class="theme-toggle cursor-pointer border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
        title="Toggle dark mode"
      >
        <!-- Moon -->
@@ -47,7 +47,7 @@ const routes = ["blog"];
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
-          class="size-5 hidden dark:block"
+          class="hidden size-5 dark:block"
        >
          <path
            d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z"
@@ -55,7 +55,7 @@ const routes = ["blog"];
        </svg>
      </button>
      <a
-        class="inline-grid place-content-center p-2 cursor-pointer border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
+        class="inline-grid cursor-pointer place-content-center border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
        title="RSS feed"
        href="/rss.xml"
      >
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -17,7 +17,7 @@ const { title, description, pubDate, modDate, slug } = Astro.props;

 <html lang="en" class="light">
  <Head {title} {description} />
-  <body class="min-h-screen flex flex-col">
+  <body class="flex min-h-screen flex-col">
    <Nav />
    <Header {title} {pubDate} {modDate} {slug} />
    <main class="flex-1 bg-white dark:bg-neutral-800">
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -30,7 +30,7 @@ const { Content, headings } = await render(article);
  <details class="toc sticky top-0 z-20">
    <summary
      title="Table of contents"
-      class="flex mx-auto w-fit cursor-pointer list-none px-2 py-2.5 border-b-2 border-transparent hover:bg-neutral-200 hover:border-neutral-400 hover:dark:bg-neutral-700 hover:dark:border-neutral-600"
+      class="mx-auto flex w-fit cursor-pointer list-none border-b-2 border-transparent px-2 py-2.5 hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
@@ -44,7 +44,7 @@ const { Content, headings } = await render(article);
      </svg>
    </summary>
    <div
-      class="not-prose border border-neutral-400 dark:border-neutral-600 bg-white dark:bg-neutral-800 p-2 max-h-[calc(100vh-4rem)] overflow-y-scroll"
+      class="not-prose max-h-[calc(100vh-4rem)] overflow-y-scroll border border-neutral-300 bg-white p-2 dark:border-neutral-600 dark:bg-neutral-800"
    >
      <p class="text-center">
        <strong class="text-sm">Table of Contents</strong>
@@ -56,7 +56,7 @@ const { Content, headings } = await render(article);
            .map((heading) => (
              <li>
                <a
-                  class="text-center text-blue-800 dark:text-blue-300 block py-1 px-2 hover:underline"
+                  class="block px-2 py-1 text-center text-blue-800 hover:underline dark:text-blue-300"
                  href={`#${heading.slug}`}
                  aria-labelledby={`Section: ${heading.slug}`}
                >