Merge pull request #6 from npg418/dev

twind.jsからtailwindcssに乗り換え,nightwindを使う,他

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = true
+

.github/workflows/deploy.yml

@@ -0,0 +1,33 @@
+name: Deploy
+on:
+  push:
+    branches: [master, dev]
+  pull_request:
+    branches: master
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+
+    permissions:
+      id-token: write # Needed for auth with Deno Deploy
+      contents: read # Needed to clone the repository
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+
+      - name: Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: Build step
+        run: "deno task build" # 📝 Update the build command(s) if necessary
+
+      - name: Upload to Deno Deploy
+        uses: denoland/deployctl@v1
+        with:
+          project: "npg418-homepage" # 📝 Update the deploy project name if necessary
+          entrypoint: "./main.ts" # 📝 Update the entrypoint if necessary

.gitignore

@@ -1 +1,5 @@
-deno.lock
+# Fresh build directory
+_fresh/
+
+# NPM libraries
+node_modules

.vscode/settings.json

@@ -6,5 +6,12 @@
   "editor.quickSuggestions": {
     "strings": "on"
   },
-  "tailwindCSS.experimental.configFile": "./tailwind.config.ts"
+  "tailwindCSS.experimental.configFile": "./tailwind.config.ts",
+  "css.lint.unknownAtRules": "ignore",
+  "[css]": {
+    "editor.defaultFormatter": "stylelint.vscode-stylelint"
+  },
+  "[github-actions-workflow]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 NPG418
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

components/Footer.tsx

@@ -1,3 +1,7 @@
 export default function Footer() {
-  return <></>;
+  return (
+    <footer class='text-center mt-16'>
+      <small>Copyright &copy; 2023 NPG418 All Rights Reserved</small>
+    </footer>
+  );
 }

components/Header.tsx

@@ -0,0 +1,11 @@
+import ThemeToggleButton from '@/islands/ThemeToggleButton.tsx';
+
+export default function Header() {
+  return (
+    <header class='w-full my-4 mx-auto'>
+      <nav class='flex justify-end'>
+        <ThemeToggleButton />
+      </nav>
+    </header>
+  );
+}

deno.json

@@ -1,27 +1,34 @@
 {
+  "$schema": "https://raw.githubusercontent.com/denoland/deno/main/cli/schemas/config-file.v1.json",
   "lock": false,
   "tasks": {
     "start": "deno run -A --watch=static/,routes/ dev.ts",
-    "update": "deno run -A -r https://fresh.deno.dev/update ."
+    "update": "deno run -A -r https://fresh.deno.dev/update .",
+    "build": "deno cache npm:@iconify/json && deno run -A dev.ts build",
+    "preview": "deno run -A main.ts"
   },
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
   },
+  "nodeModulesDir": true,
   "imports": {
     "@/": "./",
     "$std/": "https://deno.land/[email protected]/",
-    "$fresh/": "https://deno.land/x/fresh@1.3.1/",
-    "preact": "https://esm.sh/preact@10.15.0",
-    "preact/": "https://esm.sh/preact@10.15.0/",
+    "$fresh/": "https://deno.land/x/fresh@1.6.5/",
+    "preact": "https://esm.sh/preact@10.19.2",
+    "preact/": "https://esm.sh/preact@10.19.2/",
     "preact-render-to-string": "https://esm.sh/*[email protected]",
-    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
-    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
-    "@twind/core": "https://esm.sh/@twind/[email protected]",
-    "@twind/preset-tailwind": "https://esm.sh/@twind/[email protected]",
-    "@twind/preset-ext": "https://esm.sh/@twind/[email protected]",
-    "twind-config": "https://esm.sh/v130/@twind/[email protected]/core.d.ts",
-    "tailwind-config": "https://esm.sh/v130/[email protected]/types/config.d.ts"
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "devicons": "https://deno.land/x/[email protected]/mod.ts",
+    "tailwindcss": "npm:tailwindcss",
+    "tailwindcss/": "npm:/tailwindcss/",
+    "nightwind": "npm:nightwind",
+    "nightwind/": "npm:/nightwind/",
+    "clsx": "npm:clsx",
+    "@egoist/tailwindcss-icons": "npm:@egoist/tailwindcss-icons",
+    "@iconify/json": "npm:@iconify/json"
   },
   "fmt": {
     "indentWidth": 2,
@@ -36,5 +43,8 @@
         "recommended"
       ]
     }
-  }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ]
 }

dev.ts

@@ -1,5 +1,5 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
 
-import dev from "$fresh/dev.ts";
+import dev from '$fresh/dev.ts';
 
-await dev(import.meta.url, "./main.ts");
+await dev(import.meta.url, './main.ts');

fresh.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '$fresh/server.ts';
+import tailwind from '$fresh/plugins/tailwind.ts';
+
+export default defineConfig({
+  plugins: [tailwind()],
+  port: 3000,
+});

fresh.gen.ts

@@ -1,25 +1,29 @@
-// DO NOT EDIT. This file is generated by fresh.
+// DO NOT EDIT. This file is generated by Fresh.
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $0 from './routes/_app.tsx';
-import * as $1 from './routes/_middleware.ts';
-import * as $2 from './routes/index.tsx';
-import * as $3 from './routes/links.tsx';
-import * as $4 from './routes/posts/index.tsx';
-import * as $5 from './routes/works/index.tsx';
+import * as $_app from './routes/_app.tsx';
+import * as $_middleware from './routes/_middleware.ts';
+import * as $index from './routes/index.tsx';
+import * as $links from './routes/links.tsx';
+import * as $posts_index from './routes/posts/index.tsx';
+import * as $works_index from './routes/works/index.tsx';
+import * as $ThemeToggleButton from './islands/ThemeToggleButton.tsx';
+import { type Manifest } from '$fresh/server.ts';
 
 const manifest = {
   routes: {
-    './routes/_app.tsx': $0,
-    './routes/_middleware.ts': $1,
-    './routes/index.tsx': $2,
-    './routes/links.tsx': $3,
-    './routes/posts/index.tsx': $4,
-    './routes/works/index.tsx': $5,
+    './routes/_app.tsx': $_app,
+    './routes/_middleware.ts': $_middleware,
+    './routes/index.tsx': $index,
+    './routes/links.tsx': $links,
+    './routes/posts/index.tsx': $posts_index,
+    './routes/works/index.tsx': $works_index,
+  },
+  islands: {
+    './islands/ThemeToggleButton.tsx': $ThemeToggleButton,
   },
-  islands: {},
   baseUrl: import.meta.url,
-};
+} satisfies Manifest;
 
 export default manifest;

islands/ThemeToggleButton.tsx

@@ -0,0 +1,16 @@
+import nightwind from 'nightwind/helper.js';
+import clsx from 'clsx';
+
+export default function ThemeToggleButton(props: { class?: string }) {
+  return (
+    <button
+      class={clsx(
+        'hover:bg-opacity-50 hover:bg-gray-200 p-3 rounded-xl',
+        props.class,
+      )}
+      onClick={nightwind.toggle}
+    >
+      <span class='i-tabler-sun dark:i-tabler-moon text-3xl align-middle'></span>
+    </button>
+  );
+}

main.ts

@@ -6,16 +6,6 @@
 
 import { start } from '$fresh/server.ts';
 import manifest from '@/fresh.gen.ts';
-import twindv1 from '$fresh/plugins/twindv1.ts';
-import twindConfig from '@/twind.config.ts';
+import config from '@/fresh.config.ts';
 
-await start(manifest, {
-  plugins: [
-    twindv1(twindConfig),
-  ],
-  render(ctx, render) {
-    ctx.lang = 'ja';
-    render();
-  },
-  port: 3000,
-});
+await start(manifest, config);

routes/_app.tsx

@@ -1,17 +1,22 @@
-import { asset, Head } from '$fresh/runtime.ts';
-import { AppProps } from '$fresh/server.ts';
-import { theme } from '@/utils/colormode.ts';
+import { Head } from '$fresh/runtime.ts';
+import { PageProps } from '$fresh/server.ts';
+import nightwind from 'nightwind/helper.js';
+import Footer from '@/components/Footer.tsx';
+import Header from '@/components/Header.tsx';
 
-export default function App({ Component }: AppProps) {
+export default function App({ Component }: PageProps) {
   return (
-    <html class={theme.value === 'dark' ? 'dark' : ''}>
+    <html lang='jp'>
       <Head>
         <link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
-        {theme.value === 'auto' ? <script defer src={asset('auto-colormode.js')} /> : null}
+        <link rel='stylesheet' href='/styles.css' />
+        <script dangerouslySetInnerHTML={{ __html: nightwind.init() }}></script>
       </Head>
-      <body class='min-h-screen bg-gray-300 text-gray-900'>
-        <main class='max-w-screen-lg mx-auto'>
+      <body class='min-h-screen bg-gray-300 text-gray-900 flex flex-col'>
+        <main class='max-w-screen-md mx-auto flex-1'>
+          <Header />
           <Component />
+          <Footer />
         </main>
       </body>
     </html>

routes/_middleware.ts

@@ -1,10 +1,8 @@
 import { MiddlewareHandlerContext } from '$fresh/server.ts';
-import { updateTheme } from '@/utils/colormode.ts';
 
 export async function handler(
   req: Request,
   ctx: MiddlewareHandlerContext,
 ) {
-  updateTheme(req.headers);
   return await ctx.next();
 }

routes/index.tsx

@@ -1,13 +1,67 @@
 import { asset, Head } from '$fresh/runtime.ts';
+import clsx from 'clsx';
 
 export default function IndexPage() {
   return (
     <>
       <Head>
         <title>NPG418 HP</title>
       </Head>
-      <h1 class='text-8xl text-center'>NPG418 IS HERE!!</h1>
-      <img src={asset('penguin_transparent.png')} alt='NPG418' class='mx-auto' />
+      <div class='text-center mb-32'>
+        <h1 class='text-8xl'>NPG418 IS HERE!!</h1>
+        <figure class='relative w-fit inline-block'>
+          <img src={asset('penguin_transparent.png')} alt='NPG418' />
+          <figcaption class='absolute top-20 right-10 -rotate-12'>
+            <p class='flex items-start text-lg'>
+              <span class='i-tabler-arrow-curve-left -rotate-90 translate-y-2' />
+              me
+            </p>
+          </figcaption>
+        </figure>
+      </div>
+      <section>
+        <h2 class='text-4xl mb-8'>About me!</h2>
+        <div class='mx-16'>
+          <blockquote class='flex items-end'>
+            <div class='border rounded-3xl w-1/2 h-32 mx-auto relative'>
+              <h1 class='inline-block translate-x-1/2 absolute top-16 right-0'>
+                CSS なんもわからん
+              </h1>
+            </div>
+            <footer>
+              ─ <cite>NPG418</cite>
+            </footer>
+          </blockquote>
+          <section class='mt-32'>
+            <h3 class='text-xl mb-4'>よく使う言語</h3>
+            <ul class='flex gap-3 flex-wrap items-end'>
+              {[
+                'i-devicon-html',
+                'i-devicon-css3',
+                'i-devicon-javascript',
+                'i-devicon-typescript',
+                'i-devicon-python',
+                'i-devicon-cplusplus',
+                'i-devicon-csharp',
+                'i-devicon-lua',
+                'i-devicon-java',
+                'i-devicon-kotlin',
+              ]
+                .map((icon, i) => (
+                  <li key={i}>
+                    <span class={clsx(icon, 'text-6xl')} />
+                  </li>
+                ))}
+              <li>
+                <span class='text-2xl'>...</span>
+              </li>
+            </ul>
+          </section>
+        </div>
+      </section>
+      <section>
+        <h2 className='text-4xl mb-8'></h2>
+      </section>
     </>
   );
 }

static/styles.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');
+
+:root {
+  color-scheme: light dark;
+  font-family: "Zen Kaku Gothic New", sans-serif;
+}