From b97f81520b7a41dcce1b7020f6a60cc74fa67db8 Mon Sep 17 00:00:00 2001 From: Maxwell Date: Wed, 13 Nov 2024 22:15:53 -0800 Subject: [PATCH] feat: add daisyui support --- components/Topbar.tsx | 15 +++++++++++++ deno.json | 1 + fresh.gen.ts | 2 ++ routes/_app.tsx | 2 +- routes/_layout.tsx | 13 +++++++++++ routes/index.tsx | 4 ++-- tailwind.config.ts | 50 +++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 components/Topbar.tsx create mode 100644 routes/_layout.tsx diff --git a/components/Topbar.tsx b/components/Topbar.tsx new file mode 100644 index 0000000..b9ebd38 --- /dev/null +++ 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 ( +
+
+

Arcane Tome

+
+
+ ); +} diff --git a/deno.json b/deno.json index 2f4ad2a..08ffa03 100644 --- a/deno.json +++ b/deno.json @@ -32,6 +32,7 @@ "tailwindcss": "npm:tailwindcss@3.4.1", "tailwindcss/": "npm:/tailwindcss@3.4.1/", "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js", + "daisyui" : "npm:daisyui@4.12.14", "$std/": "https://deno.land/std@0.216.0/", "@/": "./" }, diff --git a/fresh.gen.ts b/fresh.gen.ts index 2757649..f7dff9e 100644 --- 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 index c2ef5a4..cf87df3 100644 --- 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 ( - + diff --git a/routes/_layout.tsx b/routes/_layout.tsx new file mode 100644 index 0000000..2967ad7 --- /dev/null +++ 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 ( +
+ +
+ +
+
+ ); +} diff --git a/routes/index.tsx b/routes/index.tsx index 4a2ae5e..484d60e 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -13,8 +13,8 @@ export const handler: Handlers = { export default function BlogIndexPage(props: PageProps) { const posts = props.data; return ( -
-

Blog

+
+

Blogs

{posts.map((post) => )}
diff --git a/tailwind.config.ts b/tailwind.config.ts index 995bc39..ebb8308 100644 --- 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;