mirror of
https://github.com/sr229/kuru-kuru.git
synced 2024-09-19 20:00:35 +00:00
Migrate to TailwindCSS (#21)
* Migrate to TailwindCSS twind is no longer supported so might as well move everything to something more sane * feat: Fix duplicate dependencies and add compilerOptions * style: Remove 'build.target' property from fresh.config.ts * feat: Added root directory configuration * feat: Update extension, update start and build scripts, update lint rules, update compiler options, update shebang, add dotenv load, add dotenv load, update stylesheet reference and add tailwind.json configuration file
This commit is contained in:
parent
aa680953c6
commit
63f508cd4f
13 changed files with 111 additions and 38 deletions
3
.github/workflows/deploy.yml
vendored
3
.github/workflows/deploy.yml
vendored
|
@ -30,4 +30,5 @@ jobs:
|
|||
uses: denoland/deployctl@v1
|
||||
with:
|
||||
project: "herta"
|
||||
entrypoint: "./main.ts"
|
||||
entrypoint: "./main.ts"
|
||||
root: "."
|
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -7,3 +7,6 @@
|
|||
|
||||
# Fresh build directory
|
||||
_fresh/
|
||||
|
||||
# Tailwind requires node_modules so we need to exclude it
|
||||
node_modules/
|
2
.vscode/extensions.json
vendored
2
.vscode/extensions.json
vendored
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"denoland.vscode-deno",
|
||||
"sastan.twind-intellisense"
|
||||
"bradlc.vscode-tailwindcss"
|
||||
]
|
||||
}
|
||||
|
|
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
|
@ -13,5 +13,8 @@
|
|||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "denoland.vscode-deno"
|
||||
}
|
||||
},
|
||||
"css.customData": [
|
||||
".vscode/tailwind.json"
|
||||
]
|
||||
}
|
||||
|
|
55
.vscode/tailwind.json
vendored
Normal file
55
.vscode/tailwind.json
vendored
Normal file
|
@ -0,0 +1,55 @@
|
|||
{
|
||||
"version": 1.1,
|
||||
"atDirectives": [
|
||||
{
|
||||
"name": "@tailwind",
|
||||
"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
|
||||
"references": [
|
||||
{
|
||||
"name": "Tailwind Documentation",
|
||||
"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "@apply",
|
||||
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
|
||||
"references": [
|
||||
{
|
||||
"name": "Tailwind Documentation",
|
||||
"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "@responsive",
|
||||
"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n",
|
||||
"references": [
|
||||
{
|
||||
"name": "Tailwind Documentation",
|
||||
"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "@screen",
|
||||
"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n",
|
||||
"references": [
|
||||
{
|
||||
"name": "Tailwind Documentation",
|
||||
"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "@variants",
|
||||
"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n",
|
||||
"references": [
|
||||
{
|
||||
"name": "Tailwind Documentation",
|
||||
"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
35
deno.json
35
deno.json
|
@ -1,13 +1,26 @@
|
|||
{
|
||||
"lock": false,
|
||||
"nodeModulesDir": true,
|
||||
"tasks": {
|
||||
"check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
|
||||
"start": "deno run -A --unstable-broadcast-channel --unstable-kv --watch=static/,home_content/,routes/ dev.ts",
|
||||
"build": "deno run -A --unstable-broadcast-channel --unstable-kv dev.ts build",
|
||||
"preview": "deno run -A --unstable-broadcast-channel --unstable-kv main.ts",
|
||||
"update": "deno run -A --unstable-broadcast-channel --unstable-kv -r https://fresh.deno.dev/update ."
|
||||
"cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
|
||||
"manifest": "deno task cli manifest $(pwd)",
|
||||
"start": "deno run -A --unstable-kv --unstable-broadcast-channel --watch=static/,routes/ dev.ts",
|
||||
"build": "deno run -A --unstable-kv --unstable-broadcast-channel dev.ts build",
|
||||
"preview": "deno run -A --unstable-kv --unstable-broadcast-channel main.ts",
|
||||
"update": "deno run -A -r https://fresh.deno.dev/update ."
|
||||
},
|
||||
"lint": { "rules": { "tags": ["fresh", "recommended"] } },
|
||||
"lint": {
|
||||
"rules": {
|
||||
"tags": [
|
||||
"fresh",
|
||||
"recommended"
|
||||
]
|
||||
}
|
||||
},
|
||||
"exclude": [
|
||||
"**/_fresh/*"
|
||||
],
|
||||
"lib": { "deno.unstable": true },
|
||||
"imports": {
|
||||
"$fresh/": "https://deno.land/x/fresh@1.6.3/",
|
||||
|
@ -16,14 +29,12 @@
|
|||
"preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.2",
|
||||
"@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
|
||||
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
|
||||
"twind": "https://esm.sh/@twind/core@1.1.3",
|
||||
"twind/": "https://esm.sh/@twind/core@1.1.3/",
|
||||
"@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.4",
|
||||
"@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.7",
|
||||
"$std/": "https://deno.land/std@0.193.0/",
|
||||
"$gfm": "https://deno.land/x/gfm@0.2.3/mod.ts",
|
||||
"partytown": "https://esm.sh/@builder.io/partytown@0.8.1/react"
|
||||
"partytown": "https://esm.sh/@builder.io/partytown@0.8.1/react",
|
||||
"tailwindcss": "npm:tailwindcss@3.3.5",
|
||||
"tailwindcss/": "npm:/tailwindcss@3.3.5/",
|
||||
"tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js"
|
||||
},
|
||||
"compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
|
||||
"exclude": ["**/_fresh/*"]
|
||||
"compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" }
|
||||
}
|
||||
|
|
2
dev.ts
2
dev.ts
|
@ -1,4 +1,4 @@
|
|||
#!/usr/bin/env -S deno run -A --watch=static/,routes/
|
||||
#!/usr/bin/env -S deno run -A --unstable-broadcast-channel --unstable-kv --watch=static/,routes/
|
||||
|
||||
import dev from "$fresh/dev.ts";
|
||||
import config from "./fresh.config.ts";
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { defineConfig } from "$fresh/server.ts";
|
||||
import twindPlugin from "$fresh/plugins/twindv1.ts";
|
||||
import twindConfig from "./twind.config.ts";
|
||||
export default defineConfig({
|
||||
plugins: [twindPlugin(twindConfig)]
|
||||
});
|
||||
import { defineConfig } from "$fresh/server.ts";
|
||||
import tailwind from "$fresh/plugins/tailwind.ts";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwind()],
|
||||
});
|
||||
|
|
11
main.ts
11
main.ts
|
@ -4,11 +4,10 @@
|
|||
/// <reference lib="dom.asynciterable" />
|
||||
/// <reference lib="deno.ns" />
|
||||
|
||||
import { Manifest, start } from "$fresh/server.ts";
|
||||
import "$std/dotenv/load.ts";
|
||||
|
||||
import { start } from "$fresh/server.ts";
|
||||
import manifest from "./fresh.gen.ts";
|
||||
import config from "./fresh.config.ts";
|
||||
|
||||
import twindPlugin from "$fresh/plugins/twindv1.ts";
|
||||
import twindConfig from "./twind.config.ts";
|
||||
import { freshSEOPlugin } from "https://deno.land/x/fresh_seo@1.0.1/mod.ts";
|
||||
|
||||
await start(manifest as unknown as Manifest, { plugins: [twindPlugin(twindConfig), freshSEOPlugin(manifest)] });
|
||||
await start(manifest, config);
|
||||
|
|
|
@ -8,6 +8,7 @@ export default function App({ Component }: AppProps) {
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<meta property="og:title" content="Kuru Kuru~" />
|
||||
<meta property="og:site_name" content="Kuru Kuru~" />
|
||||
<meta property="og:url" content="https://herta.deno.dev" />
|
||||
|
|
3
static/styles.css
Normal file
3
static/styles.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
7
tailwind.config.ts
Normal file
7
tailwind.config.ts
Normal file
|
@ -0,0 +1,7 @@
|
|||
import { type Config } from "tailwindcss";
|
||||
|
||||
export default {
|
||||
content: [
|
||||
"{routes,islands,components}/**/*.{ts,tsx}",
|
||||
],
|
||||
} satisfies Config;
|
|
@ -1,10 +0,0 @@
|
|||
import { defineConfig, Preset } from "twind";
|
||||
import presetTailwind from "@twind/preset-tailwind";
|
||||
import presetAutoprefix from "@twind/preset-autoprefix";
|
||||
|
||||
export default {
|
||||
...defineConfig({
|
||||
presets: [presetTailwind() as Preset, presetAutoprefix()],
|
||||
}),
|
||||
selfURL: import.meta.url,
|
||||
};
|
Loading…
Reference in a new issue