feat: upgrade to tailwind (#28)

deno.json

@@ -12,7 +12,8 @@
     "ok": "deno fmt --check && deno lint && deno task check:types && deno task test"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/[email protected]/",
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "tailwindcss": "npm:[email protected]",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",

src/components/Pagination.tsx

@@ -13,13 +13,13 @@ export default function Pagination(
   const nextPage = page < totalPages ? page + 1 : null;
 
   return (
-    <nav className="flex justify-between">
+    <nav class="flex justify-between">
       {prevPage
         ? (
           <a
             id="previous-page"
             href={`?page=${prevPage}`}
-            className="hover:underline"
+            class="hover:underline"
           >
             {localization.previousPage}
           </a>
@@ -30,7 +30,7 @@ export default function Pagination(
           <a
             id="next-page"
             href={`?page=${nextPage}`}
-            className="hover:underline"
+            class="hover:underline"
           >
             {localization.nextPage}
           </a>

src/components/PostSummary.tsx

@@ -6,9 +6,9 @@ export default function PostSummary(
 ) {
   const { post, showExcerpt } = props;
   return (
-    <div class="py-4 border(t gray-200)" id={`post:${post.slug}`}>
+    <div class="py-4 border-t border-gray-200" id={`post:${post.slug}`}>
       <a class="sm:col-span-2" href={`/blog/${post.slug}`}>
-        <h3 class="text(3xl gray-900) font-bold">
+        <h3 class="text-3xl text-gray-900 font-bold">
           {post.title}
         </h3>
       </a>

src/init.ts

@@ -39,8 +39,8 @@ const blogOptions: BlogOptions = {
     );
   } else {
     configContent = configContent.replace(
-      `plugins: [twindPlugin(twindConfig)],`,
-      `plugins: [twindPlugin(twindConfig), ${pluginCode}],`,
+      `plugins: [tailwind()],`,
+      `plugins: [tailwind(), ${pluginCode}],`,
     );
   }
 
@@ -89,7 +89,7 @@ async function modifyDenoJson() {
     return;
   }
 
-  denoJson.imports["$fresh/"] = "https://deno.land/x/[email protected].0/";
+  denoJson.imports["$fresh/"] = "https://deno.land/x/[email protected].1/";
 
   const denoJsonContent = JSON.stringify(denoJson, null, 2) + "\n";
   await Deno.writeTextFile(DENO_JSON_PATH, denoJsonContent);

src/islands/NavigationBar.tsx

@@ -17,38 +17,50 @@ export default function NavigationBar(
           onClick={() => isOpen.value = !isOpen.value}
         >
           <span
-            class={`block h-1 w-6 bg-black ${
-              isOpen.value ? "transform rotate-45" : ""
+            class={`${
+              isOpen.value
+                ? "block h-1 w-6 bg-black transform rotate-45"
+                : "block h-1 w-6 bg-black"
             }`}
           >
           </span>
           <span
-            class={`block h-1 w-6 bg-black my-1 ${
-              isOpen.value ? "opacity-0" : ""
+            class={`${
+              isOpen.value
+                ? "block h-1 w-6 bg-black my-1 opacity-0"
+                : "block h-1 w-6 bg-black my-1"
             }`}
           >
           </span>
           <span
-            class={`block h-1 w-6 bg-black ${
-              isOpen.value ? "transform -rotate-45" : ""
+            class={`${
+              isOpen.value
+                ? "block h-1 w-6 bg-black transform -rotate-45"
+                : "block h-1 w-6 bg-black"
             }`}
           >
           </span>
         </label>
         <nav
-          class={`w-full fixed top-0 left-0 overflow-hidden transition-max-height duration-500 lg:relative ${
-            isOpen.value ? "max-h-screen bg-gray-300" : "max-h-0 lg:max-h-full"
+          class={`${
+            isOpen.value
+              ? "w-full fixed top-0 left-0 overflow-hidden transition-max-height duration-500 lg:relative max-h-screen bg-gray-300"
+              : "w-full fixed top-0 left-0 overflow-hidden transition-max-height duration-500 lg:relative max-h-0 lg:max-h-full"
           }`}
         >
           <ul class="flex flex-col lg:flex-row justify-center items-center gap-4 mx-4 my-6 flex-wrap">
             {Object.entries(props.options.navbarItems).map(([key, value]) => (
               <li key={key}>
                 <a
                   href={value}
-                  class={`p-2 block ${
-                    isHome ? "text-black-900" : "text-black-600"
-                  } hover:underline ${
-                    props.active == value ? "font-bold" : ""
+                  class={`p-2 block hover:underline ${
+                    isHome
+                      ? props.active == value
+                        ? "text-black-900 font-bold"
+                        : "text-black-900"
+                      : props.active == value
+                      ? "text-black-600 font-bold"
+                      : "text-black-600"
                   }`}
                 >
                   {key}

src/routes/_app.tsx

@@ -8,6 +8,7 @@ export function AppBuilder(options: BlogOptions) {
     return (
       <html>
         <head>
+          <meta charset="utf-8" />
           <link rel="stylesheet" href="/styles.css" />
         </head>
         <body>

src/routes/archive/index.tsx

@@ -30,7 +30,7 @@ export function createArchivePage(title: string, localization: Localization) {
           <title>{title}{localization.archiveTitleEnding}</title>
         </Head>
         <div>
-          <div className="flex space-x-2 mb-4">
+          <div class="flex space-x-2 mb-4">
             {allTags.some((x) => x != null) && allTags.map((tag, index) => (
               <a
                 id={`tag-link-${tag}`}

src/safelist.ts

@@ -0,0 +1,72 @@
+export const safelist = [
+  "max-w-screen-md",
+  "px-4",
+  "pt-16",
+  "mx-auto",
+  "pb-16",
+  "flex",
+  "justify-between",
+  "hover:underline",
+  "mt-8",
+  "py-4",
+  "border-t",
+  "border-gray-200",
+  "sm:col-span-2",
+  "text-3xl",
+  "text-gray-900",
+  "font-bold",
+  "text-gray-500",
+  "mr-1",
+  "ml-1",
+  "border",
+  "border-gray-300",
+  "py-1",
+  "px-2",
+  "rounded",
+  "inline-block",
+  "hover:bg-gray-300",
+  "space-x-2",
+  "mb-4",
+  "markdown-body",
+  "flex-grow",
+  "sticky",
+  "top-0",
+  "w-full",
+  "z-10",
+  "items-center",
+  "text-5xl",
+  "lg:hidden",
+  "cursor-pointer",
+  "z-20",
+  "block",
+  "h-1",
+  "w-6",
+  "bg-black",
+  "transform",
+  "rotate-45",
+  "my-1",
+  "opacity-0",
+  "-rotate-45",
+  "fixed",
+  "left-0",
+  "overflow-hidden",
+  "transition-max-height",
+  "duration-500",
+  "lg:relative",
+  "max-h-screen",
+  "bg-gray-300",
+  "max-h-0",
+  "lg:max-h-full",
+  "flex-col",
+  "lg:flex-row",
+  "justify-center",
+  "gap-4",
+  "mx-4",
+  "my-6",
+  "flex-wrap",
+  "p-2",
+  "text-black-900",
+  "text-black-600",
+  "py-2",
+  "ml-auto",
+];

tests/empty_posts_dir_fixture/deno.json

@@ -2,28 +2,22 @@
   "lock": false,
   "tasks": {
     "start": "deno run -A --watch=static/,routes/ dev.ts",
-    "update": "deno run -A -r https://fresh.deno.dev/update ."
+    "update": "deno run -A -r https://fresh.deno.dev/update .",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/[email protected].0/",
+    "$fresh/": "https://deno.land/x/[email protected].1/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
-    "@preact/signals": "https://esm.sh/*@preact/[email protected].2",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected].1",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "twind": "https://esm.sh/[email protected]",
-    "twind/": "https://esm.sh/[email protected]/",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:/[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
     "$std/": "https://deno.land/[email protected]/"
   },
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
-  },
-  "lint": {
-    "rules": {
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
-    }
-  }
+  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "exclude": ["**/_fresh/*"]
 }

tests/empty_posts_dir_fixture/fresh.config.ts

@@ -1,10 +1,9 @@
 import { defineConfig } from "$fresh/server.ts";
-import twind from "$fresh/plugins/twind.ts";
-import twindConfig from "./twind.config.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
 
 import { blogPlugin } from "../../src/plugin/blog.ts";
 import blogConfig from "./blog.config.ts";
 
 export default defineConfig({
-  plugins: [twind(twindConfig), blogPlugin(blogConfig)],
+  plugins: [tailwind(), blogPlugin(blogConfig)],
 });

tests/empty_posts_dir_fixture/fresh.gen.ts

@@ -2,10 +2,12 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
+import { type Manifest } from "$fresh/server.ts";
+
 const manifest = {
   routes: {},
   islands: {},
   baseUrl: import.meta.url,
-};
+} satisfies Manifest;
 
 export default manifest;

tests/empty_posts_dir_fixture/static/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tests/empty_posts_dir_fixture/tailwind.config.ts

@@ -0,0 +1,9 @@
+import { type Config } from "tailwindcss";
+import { safelist } from "../../src/safelist.ts";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+  safelist: safelist,
+} satisfies Config;

tests/fixture/deno.json

@@ -2,28 +2,22 @@
   "lock": false,
   "tasks": {
     "start": "deno run -A --watch=static/,routes/ dev.ts",
-    "update": "deno run -A -r https://fresh.deno.dev/update ."
+    "update": "deno run -A -r https://fresh.deno.dev/update .",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts"
   },
   "imports": {
-    "$fresh/": "https://deno.land/x/[email protected].0/",
+    "$fresh/": "https://deno.land/x/[email protected].1/",
     "preact": "https://esm.sh/[email protected]",
     "preact/": "https://esm.sh/[email protected]/",
-    "@preact/signals": "https://esm.sh/*@preact/[email protected].2",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected].1",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "twind": "https://esm.sh/[email protected]",
-    "twind/": "https://esm.sh/[email protected]/",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:/[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
     "$std/": "https://deno.land/[email protected]/"
   },
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
-  },
-  "lint": {
-    "rules": {
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
-    }
-  }
+  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "exclude": ["**/_fresh/*"]
 }

tests/fixture/fresh.config.ts

@@ -1,10 +1,9 @@
 import { defineConfig } from "$fresh/server.ts";
-import twind from "$fresh/plugins/twind.ts";
-import twindConfig from "./twind.config.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
 
 import { blogPlugin } from "../../src/plugin/blog.ts";
 import localConfig from "./local.config.ts";
 
 export default defineConfig({
-  plugins: [twind(twindConfig), blogPlugin(localConfig)],
+  plugins: [tailwind(), blogPlugin(localConfig)],
 });

tests/fixture/tailwind.config.ts

@@ -0,0 +1,9 @@
+import { type Config } from "tailwindcss";
+import { safelist } from "../../src/safelist.ts";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+  safelist: safelist,
+} satisfies Config;