spaces/qwik: add daisyui

spaces/qwik/package.json

@@ -34,6 +34,7 @@
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "autoprefixer": "^10.4.14",
+    "daisyui": "^4.9.0",
     "eslint": "^8.57.0",
     "eslint-plugin-qwik": "^1.5.1",
     "postcss": "^8.4.31",

spaces/qwik/src/routes/daisyui/index.tsx

@@ -0,0 +1,17 @@
+import {
+  $,
+  component$,
+  Signal,
+  useOnWindow,
+  useSignal,
+} from "@builder.io/qwik";
+
+
+export default component$(() => {
+  return (
+    <>
+      <h1>tailwind breakpoints</h1>
+      <button type="button" class={"btn"}>hello daisy</button>
+    </>
+  );
+});

spaces/qwik/src/routes/layout.tsx

@@ -1,8 +1,8 @@
-import { component$, Slot } from "@builder.io/qwik";
-import type { RequestHandler } from "@builder.io/qwik-city";
+import {component$, Slot} from "@builder.io/qwik";
+import type {RequestHandler} from "@builder.io/qwik-city";
 import {Link} from "@builder.io/qwik-city";
 
-export const onGet: RequestHandler = async ({ cacheControl }) => {
+export const onGet: RequestHandler = async ({cacheControl}) => {
   // Control caching for this request for best performance and to reduce hosting costs:
   // https://qwik.builder.io/docs/caching/
   cacheControl({
@@ -14,10 +14,48 @@ export const onGet: RequestHandler = async ({ cacheControl }) => {
 };
 
 export default component$(() => {
-  return <div>
-    <div>
-      <Link href="/tailwind/breakpoint">tailwind/breakpoint</Link>
+  return <main class="">
+    <div class="sticky  top-0 navbar bg-blue-950 text-neutral-content">
+      <div class="navbar-start">
+        <Link class="link link-hover text-xl">Study Web</Link>
+      </div>
+      <div class="navbar-end">
+        <Link class="link link-hover text-xl" target="_blank" href="https://github.com/chen56/kou">
+          {/* <MdiGithub class="hover:text-red-400" width="32" height="32"/>*/}
+        </Link>
+      </div>
     </div>
-    <Slot />
-  </div>;
+
+    <div class="flex h-dvh">
+      {/*  --h-dvh 使左边栏占满viewport所有有效高度 */}
+      <div class="min-w-48 bg-base-200 h-dvh">
+        <ul class="menu">
+          <li><Link class="link link-hover" href="/tailwind/breakpoint">tailwind/breakpoint</Link></li>
+          <li><Link class="link link-hover" href="/daisyui">daisyui</Link></li>
+        </ul>
+      </div>
+      {/*
+                    设置内容区域单独滚动，必须要让内容区域实际高度小于可显示高度：
+                    比如:
+                    <div style="height:500px;overflow-y: scroll;" class="bg-red-100">
+                        <div style="height:1000px;" class="bg-blue-100">很长的内容。。。</div>
+                    </div>
+
+                    所以设置下列class：
+                    h-dvh 高度viewport最大（y轴必须）
+                    overflow-y-scroll y轴滚动（y轴必须）
+                    scroll-smooth 平滑滚动（可选）
+
+                    style="overflow-y: unset;height: 600px" "overflow-y: scroll ;"
+                */}
+
+      <div class="w-dvw h-dvh  overflow-y-scroll scroll-smooth" style={{overflowY: "scroll"}}>
+        <Slot></Slot>
+      </div>
+      {/*<span class="flex-none min-w-48    bg-base-200  ">nav right</span>*/}
+    </div>
+  </main>
+  ;
 });
+
+

spaces/qwik/src/routes/tailwind/breakpoint/index.tsx

@@ -8,12 +8,12 @@ import {
 
 import resolveConfig from "tailwindcss/resolveConfig";
 import tailwindConfig from "../../../../tailwind.config";
-import React from "react"; // Your tailwind config
+import {Config} from "tailwindcss";
 
 
 // https://tailwindcss.com/docs/configuration#using-esm-or-type-script
 // 因为tailwindcss/resolveConfig没有提供ts版本的接口，所以ts模式下会编译失败，所以转any
-let fullConfig = resolveConfig(tailwindConfig) as any;
+let fullConfig = resolveConfig(tailwindConfig as Config) as any;
 fullConfig.theme.screens.md
 // => '768px'
 

spaces/qwik/tailwind.config.js

@@ -1,8 +1,12 @@
+import daisyui from "daisyui"
+
 /** @type {import('tailwindcss').Config} */
+
+
 export default {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [daisyui],
 };