From 73e79f584a2164c5156615f4b4a7ffb7bfca24d0 Mon Sep 17 00:00:00 2001 From: yossydev Date: Fri, 23 Feb 2024 14:43:45 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20tailwindcss=E3=81=AE=E8=A8=AD?= =?UTF-8?q?=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index.css | 3 +++ app/routes/index.tsx | 21 ++++++++------------- package.json | 5 ++++- postcss.config.js | 6 ++++++ tailwind.config.js | 8 ++++++++ 5 files changed, 29 insertions(+), 14 deletions(-) create mode 100644 app/index.css create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/app/index.css b/app/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/app/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/app/routes/index.tsx b/app/routes/index.tsx index fc34955..1debc0b 100644 --- a/app/routes/index.tsx +++ b/app/routes/index.tsx @@ -1,18 +1,13 @@ -import { css } from 'hono/css' -import { createRoute } from 'honox/factory' -import Counter from '../islands/counter' - -const className = css` - font-family: sans-serif; -` +import { createRoute } from "honox/factory"; +import Counter from "../islands/counter"; export default createRoute((c) => { - const name = c.req.query('name') ?? 'Hono' + const name = c.req.query("name") ?? "Hono"; return c.render( -
-

Hello, {name}!

+
+

Hello world! {name}

, - { title: name } - ) -}) + { title: name }, + ); +}); diff --git a/package.json b/package.json index 4594c68..7e2a4d3 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "basic", + "name": "blog", "type": "module", "scripts": { "dev": "vite", @@ -15,6 +15,9 @@ "devDependencies": { "@cloudflare/workers-types": "^4.20240208.0", "@hono/vite-cloudflare-pages": "^0.2.4", + "autoprefixer": "^10.4.17", + "postcss": "^8.4.35", + "tailwindcss": "^3.4.1", "vite": "^5.0.12", "wrangler": "^3.27.0" } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..0ac5a7d --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ["./app/**/*.{js,ts,jsx,tsx}"], + theme: { + extend: {}, + }, + plugins: [], +}; From a263d08847f5d911637068238ef0d44d83b34481 Mon Sep 17 00:00:00 2001 From: yossydev Date: Fri, 23 Feb 2024 15:22:45 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20eslint=E3=81=AE=E8=A8=AD=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 7 +++++++ .eslintrc.cjs | 23 +++++++++++++++++++++++ app/client.ts | 4 ++-- app/global.d.ts | 17 ++++++++++------- package.json | 6 +++++- tsconfig.eslint.json | 5 +++++ tsconfig.json | 11 +++-------- 7 files changed, 55 insertions(+), 18 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.cjs create mode 100644 tsconfig.eslint.json diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..b86e775 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,7 @@ +tsconfig.eslint.json +vite.config.ts +tailwind.config.js +postcss.config.js +/app/global.d.ts +.eslintrc.cjs +node_modules diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..0478555 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,23 @@ +module.exports = { + root: true, + env: { + es6: true, + node: true, + }, + parserOptions: { + parser: "@typescript-eslint/parser", + sourceType: "module", + ecmaVersion: 2019, // Node.js 12の場合は2019、他のバージョンのNode.jsを利用している場合は場合は適宜変更する + project: ["tsconfig.eslint.json"], + tsconfigRootDir: __dirname, + }, + plugins: ["@typescript-eslint"], + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@typescript-eslint/recommended-requiring-type-checking", + ], + rules: { + "@typescript-eslint/no-floating-promises": "off", + }, +}; diff --git a/app/client.ts b/app/client.ts index 16ecf96..4a2cea5 100644 --- a/app/client.ts +++ b/app/client.ts @@ -1,3 +1,3 @@ -import { createClient } from 'honox/client' +import { createClient } from "honox/client"; -createClient() +createClient(); diff --git a/app/global.d.ts b/app/global.d.ts index 288f02b..e4cac10 100644 --- a/app/global.d.ts +++ b/app/global.d.ts @@ -1,15 +1,18 @@ -import {} from 'hono' +import {} from "hono"; type Head = { - title?: string -} + title?: string; +}; -declare module 'hono' { +declare module "hono" { interface Env { - Variables: {} - Bindings: {} + Variables: {}; + Bindings: {}; } interface ContextRenderer { - (content: string | Promise, head?: Head): Response | Promise + ( + content: string | Promise, + head?: Head, + ): Response | Promise; } } diff --git a/package.json b/package.json index 7e2a4d3..6740b04 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "dev": "vite", "build": "vite build --mode client && vite build", "preview": "wrangler pages dev ./dist", - "deploy": "$npm_execpath run build && wrangler pages deploy ./dist" + "deploy": "$npm_execpath run build && wrangler pages deploy ./dist", + "lint": "eslint ." }, "private": true, "dependencies": { @@ -15,7 +16,10 @@ "devDependencies": { "@cloudflare/workers-types": "^4.20240208.0", "@hono/vite-cloudflare-pages": "^0.2.4", + "@typescript-eslint/eslint-plugin": "^7.0.2", + "@typescript-eslint/parser": "^7.0.2", "autoprefixer": "^10.4.17", + "eslint": "^8.56.0", "postcss": "^8.4.35", "tailwindcss": "^3.4.1", "vite": "^5.0.12", diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json new file mode 100644 index 0000000..06a90c0 --- /dev/null +++ b/tsconfig.eslint.json @@ -0,0 +1,5 @@ +{ + "extends": "./tsconfig.json", + "include": ["./app/"], + "exclude": ["node_modules"] +} diff --git a/tsconfig.json b/tsconfig.json index 08f23dd..3aa2131 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,14 +4,9 @@ "module": "ESNext", "moduleResolution": "Bundler", "strict": true, - "lib": [ - "ESNext", - "DOM" - ], - "types": [ - "@cloudflare/workers-types" - ], + "lib": ["ESNext", "DOM"], + "types": ["@cloudflare/workers-types"], "jsx": "react-jsx", "jsxImportSource": "hono/jsx" - }, + } } From 38745825cd2693e72aa2bf00917333e9931171f9 Mon Sep 17 00:00:00 2001 From: yossydev Date: Fri, 23 Feb 2024 16:21:31 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20biome=E3=81=AE=E8=A8=AD=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- biome.json | 12 ++++++++++++ package.json | 5 ++++- 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 biome.json diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..f8702e4 --- /dev/null +++ b/biome.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json", + "organizeImports": { + "enabled": true + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true + } + } +} diff --git a/package.json b/package.json index 6740b04..cde8c6b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "build": "vite build --mode client && vite build", "preview": "wrangler pages dev ./dist", "deploy": "$npm_execpath run build && wrangler pages deploy ./dist", - "lint": "eslint ." + "format": "biome format . --write", + "lint": "biome lint .", + "check": "biome check --apply ." }, "private": true, "dependencies": { @@ -14,6 +16,7 @@ "honox": "^0.1.4" }, "devDependencies": { + "@biomejs/biome": "1.5.3", "@cloudflare/workers-types": "^4.20240208.0", "@hono/vite-cloudflare-pages": "^0.2.4", "@typescript-eslint/eslint-plugin": "^7.0.2", From 8491fe6bf9387e916b3732e63e0083cbcf36704f Mon Sep 17 00:00:00 2001 From: yossydev Date: Fri, 23 Feb 2024 16:21:43 +0900 Subject: [PATCH 4/8] chore: format --- .eslintrc.cjs | 42 ++++++++++++++++++++-------------------- app/global.d.ts | 22 ++++++++++----------- app/islands/counter.tsx | 16 +++++++-------- app/routes/_renderer.tsx | 32 +++++++++++++++--------------- app/routes/index.tsx | 16 +++++++-------- app/server.ts | 10 +++++----- postcss.config.js | 10 +++++----- tailwind.config.js | 10 +++++----- tsconfig.eslint.json | 6 +++--- vite.config.ts | 18 ++++++++--------- 10 files changed, 91 insertions(+), 91 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 0478555..b2a6e96 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,23 +1,23 @@ module.exports = { - root: true, - env: { - es6: true, - node: true, - }, - parserOptions: { - parser: "@typescript-eslint/parser", - sourceType: "module", - ecmaVersion: 2019, // Node.js 12の場合は2019、他のバージョンのNode.jsを利用している場合は場合は適宜変更する - project: ["tsconfig.eslint.json"], - tsconfigRootDir: __dirname, - }, - plugins: ["@typescript-eslint"], - extends: [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:@typescript-eslint/recommended-requiring-type-checking", - ], - rules: { - "@typescript-eslint/no-floating-promises": "off", - }, + root: true, + env: { + es6: true, + node: true, + }, + parserOptions: { + parser: "@typescript-eslint/parser", + sourceType: "module", + ecmaVersion: 2019, // Node.js 12の場合は2019、他のバージョンのNode.jsを利用している場合は場合は適宜変更する + project: ["tsconfig.eslint.json"], + tsconfigRootDir: __dirname, + }, + plugins: ["@typescript-eslint"], + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:@typescript-eslint/recommended-requiring-type-checking", + ], + rules: { + "@typescript-eslint/no-floating-promises": "off", + }, }; diff --git a/app/global.d.ts b/app/global.d.ts index e4cac10..12a558d 100644 --- a/app/global.d.ts +++ b/app/global.d.ts @@ -1,18 +1,18 @@ import {} from "hono"; type Head = { - title?: string; + title?: string; }; declare module "hono" { - interface Env { - Variables: {}; - Bindings: {}; - } - interface ContextRenderer { - ( - content: string | Promise, - head?: Head, - ): Response | Promise; - } + interface Env { + Variables: {}; + Bindings: {}; + } + interface ContextRenderer { + ( + content: string | Promise, + head?: Head, + ): Response | Promise; + } } diff --git a/app/islands/counter.tsx b/app/islands/counter.tsx index 0bb5438..f34b454 100644 --- a/app/islands/counter.tsx +++ b/app/islands/counter.tsx @@ -1,11 +1,11 @@ -import { useState } from 'hono/jsx' +import { useState } from "hono/jsx"; export default function Counter() { - const [count, setCount] = useState(0) - return ( -
-

{count}

- -
- ) + const [count, setCount] = useState(0); + return ( +
+

{count}

+ +
+ ); } diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx index f72c28f..ae4e260 100644 --- a/app/routes/_renderer.tsx +++ b/app/routes/_renderer.tsx @@ -1,18 +1,18 @@ -import { Style } from 'hono/css' -import { jsxRenderer } from 'hono/jsx-renderer' -import { Script } from 'honox/server' +import { Style } from "hono/css"; +import { jsxRenderer } from "hono/jsx-renderer"; +import { Script } from "honox/server"; export default jsxRenderer(({ children, title }) => { - return ( - - - - - {title} -