add storybook

.github/workflows/deploy.yml

@@ -9,9 +9,6 @@ jobs:
   deploy:
     name: Deploy
     runs-on: ubuntu-latest
-    env:
-      GITHUB_CLIENT_ID: ${{ secrets.GITHUB_CLIENT_ID }}
-      GITHUB_CLIENT_SECRET: ${{ secrets.GITHUB_CLIENT_SECRET }}
 
     permissions:
       id-token: write # Needed for auth with Deno Deploy
@@ -25,10 +22,11 @@ jobs:
         uses: denoland/setup-deno@v1
 
       - name: Build step
-        run: deno task build # 📝 Update the build command(s) if necessary
+        run: deno task build
 
       - name: Upload to Deno Deploy
         uses: denoland/deployctl@v1
         with:
           project: fast-alligator-25 
-          entrypoint: ./main.ts # 📝 Update the entrypoint if necessary
+          entrypoint: ./main.ts
+          exclude: "**/node_modules"

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "denoland.vscode-deno",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -2,5 +2,17 @@
   "deno.enable": true,
   "deno.lint": true,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "denoland.vscode-deno"
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  }
 }

deno.json

@@ -24,6 +24,7 @@
   },
   "imports": {
     "@/": "./",
+    "$std/": "https://deno.land/std@0.208.0/",
     "std/": "https://deno.land/std@0.208.0/",
     "kv_oauth/": "https://deno.land/x/deno_kv_oauth@v0.9.1/",
     "$fresh/": "https://deno.land/x/fresh@1.6.3/",
@@ -41,17 +42,10 @@
     "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
     "tailwindcss": "npm:tailwindcss@3.3.5"
   },
-  "exclude": [
-    "cov/",
-    "_fresh/",
-    "**/_fresh/*"
-  ],
+  "exclude": ["cov/", "_fresh/", "**/_fresh/*"],
   "lint": {
     "rules": {
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
+      "tags": ["fresh", "recommended"]
     }
   },
   "scopes": {}

fresh.config.ts

@@ -6,18 +6,15 @@ import errorHandling from "./plugins/error_handling.ts";
 import securityHeaders from "./plugins/security_headers.ts";
 import welcomePlugin from "./plugins/welcome.ts";
 import type { FreshConfig } from "$fresh/server.ts";
-import { ga4Plugin } from "https://deno.land/x/fresh_ga4@0.0.4/mod.ts";
-
-for (const dirEntry of Deno.readDirSync(Deno.cwd())) {
-  console.log(dirEntry.name);
-}
+import storiesPlugin from "https://deno.land/x/fresh_stories@0.0.11/stories-plugin.ts";
 
 export default {
   plugins: [
     // ga4Plugin(),
     welcomePlugin,
     kvOAuthPlugin,
     sessionPlugin,
+    storiesPlugin(),
     tailwind(),
     errorHandling,
     securityHeaders,

fresh.gen.ts

@@ -27,6 +27,7 @@ import * as $pricing from "./routes/pricing.tsx";
 import * as $submit from "./routes/submit.tsx";
 import * as $users_login_ from "./routes/users/[login].tsx";
 import * as $welcome from "./routes/welcome.tsx";
+import * as $Button_story from "./islands/Button.story.tsx";
 import * as $Chart from "./islands/Chart.tsx";
 import * as $ItemsList from "./islands/ItemsList.tsx";
 import * as $MapIsland from "./islands/MapIsland.tsx";
@@ -62,6 +63,7 @@ const manifest = {
     "./routes/welcome.tsx": $welcome,
   },
   islands: {
+    "./islands/Button.story.tsx": $Button_story,
     "./islands/Chart.tsx": $Chart,
     "./islands/ItemsList.tsx": $ItemsList,
     "./islands/MapIsland.tsx": $MapIsland,

islands/Button.story.tsx

@@ -0,0 +1,26 @@
+export default function Stories() {
+  return (
+    <>
+      <div class="space-y-4">
+        <div>
+          mepw
+        </div>
+
+        <div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export const description = `
+# You can use markdown here
+
+\`\`\`tsx
+<ColoredButton>
+  Usage
+</ColoredButton>
+\`\`\`
+
+
+`;