diff --git a/.gitignore b/.gitignore
index 69c1e7d..efaa7c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,5 @@ node_modules/
secretshare*
-vendor/
\ No newline at end of file
+vendor/
+node_modules/
diff --git a/deno.json b/deno.json
index da5e64a..7445be2 100644
--- a/deno.json
+++ b/deno.json
@@ -19,6 +19,7 @@
},
"lint": { "rules": { "tags": ["fresh", "recommended"] } },
"exclude": ["**/_fresh/*"],
+ "nodeModulesDir": "auto",
"imports": {
"@/": "./",
"@bjesuiter/deno-tailwindcss-iso": "jsr:@bjesuiter/deno-tailwindcss-iso@1.0.5-poc.1",
@@ -29,7 +30,8 @@
"preact/": "https://esm.sh/preact@10.22.0/",
"@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
- "tailwind-merge": "npm:tailwind-merge@^3.3.1"
+ "tailwind-merge": "npm:tailwind-merge@^3.3.1",
+ "tailwindcss": "npm:tailwindcss@^3.4.1"
},
"compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" }
}
diff --git a/fresh.config.ts b/fresh.config.ts
index e7b63d9..849d516 100644
--- a/fresh.config.ts
+++ b/fresh.config.ts
@@ -1,3 +1,6 @@
-import { defineConfig } from "$fresh/server.ts";
-
-export default defineConfig({});
+import { defineConfig } from "$fresh/server.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
+
+export default defineConfig({
+ plugins: [tailwind()],
+});
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 146be9f..18db09b 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -6,7 +6,6 @@ import * as $_404 from "./routes/_404.tsx";
import * as $_app from "./routes/_app.tsx";
import * as $_layout from "./routes/_layout.tsx";
import * as $api_create from "./routes/api/create.ts";
-import * as $api_res_tailwind_css from "./routes/api/res/tailwind.css.ts";
import * as $api_secret_uuid_ from "./routes/api/secret/[uuid].ts";
import * as $create from "./routes/create.tsx";
import * as $index from "./routes/index.tsx";
@@ -25,7 +24,6 @@ const manifest = {
"./routes/_app.tsx": $_app,
"./routes/_layout.tsx": $_layout,
"./routes/api/create.ts": $api_create,
- "./routes/api/res/tailwind.css.ts": $api_res_tailwind_css,
"./routes/api/secret/[uuid].ts": $api_secret_uuid_,
"./routes/create.tsx": $create,
"./routes/index.tsx": $index,
diff --git a/islands/CreateSecret.tsx b/islands/CreateSecret.tsx
index 8383ae2..d130fa2 100644
--- a/islands/CreateSecret.tsx
+++ b/islands/CreateSecret.tsx
@@ -1,7 +1,7 @@
import onSubmit from "@/src/formHandler/create.ts";
-import CustomExpireInForm from "../components/CreateSecret/CustomExpireInForm.tsx";
+import CustomExpireInForm from "@/components/CreateSecret/CustomExpireInForm.tsx";
import PassphraseInput from "@/components/CreateSecret/PassphraseInput.tsx";
-import ViewCountLimitInput from "../components/CreateSecret/ViewCountLimitInput.tsx";
+import ViewCountLimitInput from "@/components/CreateSecret/ViewCountLimitInput.tsx";
export default function CreateSecret() {
return (
@@ -34,7 +34,7 @@ export default function CreateSecret() {
-
diff --git a/islands/Log.tsx b/islands/Log.tsx
index 32d2513..954fbca 100644
--- a/islands/Log.tsx
+++ b/islands/Log.tsx
@@ -24,7 +24,7 @@ function renderMessage(message: RichMessage | undefined) {
case "secretFetch":
return (
-
+
{message.secret}
diff --git a/main.ts b/main.ts
index d75aeaf..404bfb0 100644
--- a/main.ts
+++ b/main.ts
@@ -9,13 +9,5 @@ import "@std/dotenv/load";
import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";
import config from "./fresh.config.ts";
-import { computeTailwindStyles } from "./src/utils/cssCache.ts";
-
-// custom things to do before starting the server
-try {
- await computeTailwindStyles();
-} catch (e) {
- console.error(`ON STARTUP: Error while computing tailwind styles: `, e);
-}
await start(manifest, config);
diff --git a/routes/_app.tsx b/routes/_app.tsx
index 28465a9..11d7856 100644
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -7,7 +7,7 @@ export default function App({ Component }: PageProps) {
SecretShare
-
+ {/* */}
diff --git a/routes/api/res/tailwind.css.ts b/routes/api/res/tailwind.css.ts
deleted file mode 100644
index f2c7b0b..0000000
--- a/routes/api/res/tailwind.css.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FreshContext } from "$fresh/server.ts";
-import { computeTailwindStyles, cssCache } from "@/src/utils/cssCache.ts";
-
-export const handler = async (
- _req: Request,
- _ctx: FreshContext,
-) => {
- if (cssCache.has("tailwind.css")) {
- return new Response(cssCache.get("tailwind.css"), {
- headers: {
- "Content-Type": "text/css",
- },
- });
- }
-
- try {
- const resultCss = await computeTailwindStyles();
- return new Response(resultCss, {
- headers: {
- "Content-Type": "text/css",
- },
- });
- } catch (e) {
- console.error(`ON REQUEST: Error while computing tailwind styles: `, e);
- return new Response("Error while computing tailwind styles", {
- status: 500,
- headers: {
- "Content-Type": "text/plain",
- },
- });
- }
-};
diff --git a/src/utils/cssCache.ts b/src/utils/cssCache.ts
deleted file mode 100644
index afc87e5..0000000
--- a/src/utils/cssCache.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { generateTailwindCSS } from "@bjesuiter/deno-tailwindcss-iso";
-import { expandGlob, WalkEntry } from "@std/fs";
-
-/**
- * A in-memory key-value storage for deno to cache postcss-transformed css files
- * Needed, bc. these files can't be written to /static, bc. deno deploy does not support writing files to it's file system
- * (it's read-only from the github repo)
- */
-
-export const cssCache = new Map();
-
-/**
- * Intended to be used at server startup to compute the tailwind css "on the fly" instead of computed at build time
- * This removes the need for a build step for this app in github actions
- */
-export async function computeTailwindStyles() {
- console.time("computeTailwindStyles");
- const css = `
- @import "tailwindcss";
-
- @theme {
- --color-primary: oklch(0.7751 0.127965 240.0314);
- --color-primary-dark: oklch(0.5327 0.1152 242.02);
-
- }
-
- `;
- const content = await collectTailwindContent();
-
- const resultCss = await generateTailwindCSS({
- content: content,
- css: css,
- });
-
- cssCache.set("tailwind.css", resultCss);
-
- console.timeEnd("computeTailwindStyles");
- return resultCss;
-}
-
-async function collectTailwindContent() {
- console.time("collectTailwindContent");
- const globs = [
- "islands/**/*.tsx",
- "components/**/*.tsx",
- "routes/**/*.tsx",
- "routes/**/*.ts",
- "src/**/*.ts",
- ];
-
- const content = [];
-
- for (const glob of globs) {
- const files = expandGlob(glob, { root: Deno.cwd() });
- for await (const file of files) {
- if (file.isFile) {
- content.push(await Deno.readTextFile(file.path));
- }
- }
- }
-
- console.timeEnd("collectTailwindContent");
- return content.join("\n\n");
-}
diff --git a/static/styles.css b/static/styles.css
index 65beac6..b5c61c9 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,59 +1,3 @@
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-button, [role="button"] {
- cursor: pointer;
-}
-
-button {
- background-color: transparent;
- padding: 0.5rem;
- border: 1px solid black;
- border-radius: 4px;
- font-size: 1em;
-}
-
-textarea {
- resize: both;
-}
-
-button:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-code {
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
- "Liberation Mono", "Courier New", monospace;
- font-size: 1em;
-}
-img,
-svg {
- display: block;
-}
-img,
-video {
- max-width: 100%;
- height: auto;
-}
-
-html {
- line-height: 1.5;
- -webkit-text-size-adjust: 100%;
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
- "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-.transition-colors {
- transition-property: background-color, border-color, color, fill, stroke;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 150ms;
-}
-
-.tabular-nums {
- font-variant-numeric: tabular-nums;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..d0164db
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,15 @@
+import { type Config } from "tailwindcss";
+
+export default {
+ content: [
+ "{routes,islands,components}/**/*.{ts,tsx,js,jsx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ "primary": "oklch(0.7751 0.127965 240.0314)",
+ "primary-dark": "oklch(0.5327 0.1152 242.02)",
+ },
+ },
+ },
+} satisfies Config;