Initial commit: caddy static file server workspace

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:33:50 +08:00
commit a98b21114c
1438 changed files with 15044 additions and 0 deletions
--- a/caddy/www/lit_with_tailwind_css.html
+++ b/caddy/www/lit_with_tailwind_css.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lit with Tailwind CSS</title>
+  <!-- 引入 Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- 引入 Lit -->
+  <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>
+</head>
+<body>
+  <!-- 自訂元件 -->
+  <my-component></my-component>
+
+  <script type="module">
+    import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm';
+
+    class MyComponent extends LitElement {
+      // 禁用 Shadow DOM 讓 Tailwind CSS 生效
+      createRenderRoot() {
+        return this; // 渲染到 Light DOM
+      }
+
+      render() {
+        return html`
+          <div class="p-4 bg-blue-500 text-white text-center rounded-lg shadow-lg">
+            <h1 class="text-2xl font-bold">Hello, Tailwind CSS with Lit!</h1>
+            <p class="mt-2">This is an example of using Tailwind CSS with Lit.</p>
+            <button class="mt-4 px-4 py-2 bg-white text-blue-500 font-semibold rounded hover:bg-gray-200">
+              Click Me
+            </button>
+          </div>
+        `;
+      }
+    }
+
+    customElements.define('my-component', MyComponent);
+  </script>
+</body>
+</html>