feat: add daisyui support

minmaxw1024 · Nov 14, 2024 · b97f815 · b97f815
1 parent 1b6b467
commit b97f815
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 3 deletions.
diff --git a/components/Topbar.tsx b/components/Topbar.tsx
@@ -0,0 +1,15 @@
+// generate a topbar component for my website
+// it has a title, a search bar, and a button
+// using the daisyUI framework
+// in mobile view, the button should be hidden
+// in desktop view, the search bar should be hidden
+
+export default function Topbar() {
+  return (
+    <div class="top-0 z-50 fixed w-full bg-primary text-primary-content">
+      <div class="container mx-auto flex items-center justify-between p-4">
+        <h1 class="text-2xl font-bold">Arcane Tome</h1>
+      </div>
+    </div>
+  );
+}
diff --git a/deno.json b/deno.json
@@ -32,6 +32,7 @@
     "tailwindcss": "npm:[email protected]",
     "tailwindcss/": "npm:/[email protected]/",
     "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+    "daisyui" : "npm:[email protected]",
     "$std/": "https://deno.land/[email protected]/",
     "@/": "./"
   },

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -5,6 +5,7 @@
 import * as $_slug_ from "./routes/[slug].tsx";
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
+import * as $_layout from "./routes/_layout.tsx";
 import * as $index from "./routes/index.tsx";
 
 import type { Manifest } from "$fresh/server.ts";
@@ -14,6 +15,7 @@ const manifest = {
     "./routes/[slug].tsx": $_slug_,
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
+    "./routes/_layout.tsx": $_layout,
     "./routes/index.tsx": $index,
   },
   islands: {},

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -1,7 +1,7 @@
 import { type PageProps } from "$fresh/server.ts";
 export default function App({ Component }: PageProps) {
   return (
-    <html>
+    <html data-theme="emerald">
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/routes/_layout.tsx b/routes/_layout.tsx
@@ -0,0 +1,13 @@
+import { PageProps } from "$fresh/server.ts";
+import Topbar from "@/components/Topbar.tsx";
+
+export default function Layout({ Component, state }: PageProps) {
+  return (
+    <div class="layout bg-base-100">
+      <Topbar />
+      <div class="pt-16">
+        <Component />
+      </div>
+    </div>
+  );
+}
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -13,8 +13,8 @@ export const handler: Handlers<Post[]> = {
 export default function BlogIndexPage(props: PageProps<Post[]>) {
   const posts = props.data;
   return (
-    <main class="max-w-screen-md px-4 pt-16 mx-auto">
-      <h1 class="text-5xl font-bold">Blog</h1>
+    <main class="max-w-screen-md px-4 mx-auto">
+      <h1 class="text-xl font-bold">Blogs</h1>
       <div class="my-8">
         {posts.map((post) => <PostCard post={post} />)}
       </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,7 +1,57 @@
 import { type Config } from "tailwindcss";
+import daisyui from "daisyui";
 
 export default {
   content: [
     "{routes,islands,components}/**/*.{ts,tsx,js,jsx}",
   ],
+  plugins: [
+    // @ts-expect-error
+    daisyui,
+  ],
+  daisyui: {
+    themes: [
+      "emerald",
+      {
+        "arcane": {
+          "primary": "#6d0b74",
+          "primary-focus": "#410745",
+          "primary-content": "#ffffff",
+
+          "secondary": "#007ebd",
+          "secondary-focus": "#005c8a",
+          "secondary-content": "#ffffff",
+
+          "accent": "#f8860d",
+          "accent-focus": "#cb6c06",
+          "accent-content": "#ffffff",
+
+          "neutral": "#1e2734",
+          "neutral-focus": "#111827",
+          "neutral-content": "#ffffff",
+
+          "base-100": "#ffffff",
+          "base-200": "#f9fafb",
+          "base-300": "#ced3d9",
+          "base-content": "#1e2734",
+
+          "info": "#1c92f2",
+          "success": "#009485",
+          "warning": "#ff9900",
+          "error": "#ff5724",
+
+          "--rounded-box": "1rem",
+          "--rounded-btn": ".5rem",
+          "--rounded-badge": "1.9rem",
+
+          "--animation-btn": ".25s",
+          "--animation-input": ".2s",
+
+          "--btn-text-case": "uppercase",
+          "--navbar-padding": ".5rem",
+          "--border-btn": "1px",
+        },
+      },
+    ],
+  },
 } satisfies Config;