feat: Improve inline script handling and add .vercel to eslint ignore (…

…#21)
kingston · Dec 20, 2024 · 953a83d · 953a83d
1 parent 929fb9b
commit 953a83d
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 20 deletions.
diff --git a/.changeset/friendly-turkeys-smile.md b/.changeset/friendly-turkeys-smile.md
@@ -0,0 +1,6 @@
+---
+'@ktam/tools-sample-astro': patch
+'@ktam/lint-react': patch
+---
+
+Improve inline script handling and add .vercel to eslint ignore
diff --git a/packages/lint-react/eslint-configs/astro.js b/packages/lint-react/eslint-configs/astro.js
@@ -30,8 +30,16 @@ export const astroEslintConfig = tsEslint.config(
     },
   },
   {
-    files: ['**/*.astro/*.ts', '*.astro/*.ts'],
+    files: [
+      '**/*.astro/*.ts',
+      '*.astro/*.ts',
+      '**/*.astro/*.js',
+      '*.astro/*.js',
+    ],
     extends: [tsEslint.configs.disableTypeChecked],
+    rules: {
+      '@typescript-eslint/explicit-function-return-type': 'off',
+    },
   },
 
   {
@@ -45,7 +53,7 @@ export const astroEslintConfig = tsEslint.config(
 
   // Ignores
   {
-    ignores: ['.astro', '.wrangler', 'src/env.d.ts'],
+    ignores: ['.astro', '.wrangler', 'src/env.d.ts', '.vercel'],
   },
 );
 

diff --git a/packages/tools-sample-astro/src/components/counter.astro b/packages/tools-sample-astro/src/components/counter.astro
@@ -1,11 +1,15 @@
-<div class="rounded-lg bg-gray-100 p-4 text-center">
-  <h2 class="mb-4 text-2xl">Counter Component</h2>
-  <p class="mb-4 text-4xl" id="count">0</p>
+<div class="rounded-lg bg-gray-100 p-4 text-center dark:bg-gray-800">
+  <h2 class="mb-4 text-2xl text-gray-900 dark:text-white">Counter Component</h2>
+  <p class="mb-4 text-4xl text-gray-900 dark:text-white" id="count">0</p>
   <div class="space-x-2">
-    <button id="increment" class="rounded bg-blue-500 px-4 py-2 text-white"
+    <button
+      id="increment"
+      class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
       >Increment</button
     >
-    <button id="decrement" class="rounded bg-red-500 px-4 py-2 text-white"
+    <button
+      id="decrement"
+      class="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600"
       >Decrement</button
     >
   </div>
@@ -18,14 +22,17 @@
   const decrementBtn = document.querySelector('#decrement');
 
   if (countDisplay && incrementBtn && decrementBtn) {
-    incrementBtn.addEventListener('click', () => {
-      count++;
+    const handleIncrement = (diff: number): void => {
+      count += diff;
       countDisplay.textContent = count.toString();
+    };
+
+    incrementBtn.addEventListener('click', () => {
+      handleIncrement(1);
     });
 
     decrementBtn.addEventListener('click', () => {
-      count--;
-      countDisplay.textContent = count.toString();
+      handleIncrement(-1);
     });
   }
 </script>
diff --git a/packages/tools-sample-astro/src/components/theme-toggle.astro b/packages/tools-sample-astro/src/components/theme-toggle.astro
@@ -0,0 +1,17 @@
+<button
+  id="theme-toggle"
+  class="text-white hover:text-gray-300 focus:outline-none"
+>
+  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      class="fill-white dark:fill-transparent"
+      fill-rule="evenodd"
+      d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
+    ></path>
+    <path
+      class="fill-transparent dark:fill-white"
+      fill-rule="evenodd"
+      d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+    ></path>
+  </svg>
+</button>
diff --git a/packages/tools-sample-astro/src/layouts/base-layout.astro b/packages/tools-sample-astro/src/layouts/base-layout.astro
@@ -1,6 +1,8 @@
 ---
 import { ClientRouter } from 'astro:transitions';
 
+import ThemeToggle from '../components/theme-toggle.astro';
+
 interface Props {
   title?: string;
 }
@@ -15,10 +17,50 @@ const { title } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
     <ClientRouter />
+    <script is:inline>
+      function applyTheme() {
+        const theme = (() => {
+          if (
+            typeof localStorage !== 'undefined' &&
+            localStorage.getItem('theme')
+          ) {
+            return localStorage.getItem('theme') ?? 'light';
+          }
+          if (globalThis.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+          }
+          return 'light';
+        })();
+
+        if (theme === 'light') {
+          document.documentElement.classList.remove('dark');
+        } else {
+          document.documentElement.classList.add('dark');
+        }
+
+        globalThis.localStorage.setItem('theme', theme);
+
+        const handleToggleClick = () => {
+          const element = document.documentElement;
+          element.classList.toggle('dark');
+
+          const isDark = element.classList.contains('dark');
+          localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        };
+
+        document
+          .querySelector('#theme-toggle')
+          ?.addEventListener('click', handleToggleClick);
+      }
+
+      applyTheme();
+
+      document.addEventListener('astro:after-swap', applyTheme);
+    </script>
   </head>
-  <body>
+  <body class="bg-white transition-colors duration-200 dark:bg-gray-900">
     <nav class="bg-gray-800 p-4">
-      <div class="container mx-auto">
+      <div class="container mx-auto flex items-center justify-between">
         <ul class="flex space-x-4">
           <li><a href="/" class="text-white hover:text-gray-300">Home</a></li>
           <li>
@@ -29,6 +71,7 @@ const { title } = Astro.props;
             >
           </li>
         </ul>
+        <ThemeToggle />
       </div>
     </nav>
     <main class="container mx-auto p-4">

diff --git a/packages/tools-sample-astro/src/pages/about.astro b/packages/tools-sample-astro/src/pages/about.astro
@@ -4,10 +4,12 @@ import BaseLayout from '../layouts/base-layout.astro';
 ---
 
 <BaseLayout title="About">
-  <h1 class="mb-4 text-4xl font-bold">About Page</h1>
-  <div class="rounded-lg bg-white p-6 shadow-md">
-    <h2 class="mb-4 text-2xl">Skills</h2>
-    <ul class="list-disc pl-6">
+  <h1 class="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
+    About Page
+  </h1>
+  <div class="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
+    <h2 class="mb-4 text-2xl text-gray-900 dark:text-white">Skills</h2>
+    <ul class="list-disc pl-6 text-gray-700 dark:text-gray-300">
       {SKILLS.map((skill) => <li class="mb-2">{skill}</li>)}
     </ul>
   </div>

diff --git a/packages/tools-sample-astro/src/pages/counter.astro b/packages/tools-sample-astro/src/pages/counter.astro
@@ -4,6 +4,8 @@ import BaseLayout from '../layouts/base-layout.astro';
 ---
 
 <BaseLayout title="Counter">
-  <h1 class="mb-4 text-4xl font-bold">Counter Page</h1>
+  <h1 class="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
+    Counter Page
+  </h1>
   <CounterComponent />
 </BaseLayout>
diff --git a/packages/tools-sample-astro/src/pages/index.astro b/packages/tools-sample-astro/src/pages/index.astro
@@ -3,8 +3,10 @@ import BaseLayout from '../layouts/base-layout.astro';
 ---
 
 <BaseLayout title="Home">
-  <h1 class="mb-4 text-4xl font-bold">Welcome to the Test App</h1>
-  <p class="text-lg text-gray-700">
+  <h1 class="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
+    Welcome to the Test App
+  </h1>
+  <p class="text-lg text-gray-700 dark:text-gray-300">
     This is a simple Astro app to test linting configuration. Navigate through
     the pages to test different components and features.
   </p>

diff --git a/packages/tools-sample-astro/tailwind.config.ts b/packages/tools-sample-astro/tailwind.config.ts
@@ -2,6 +2,7 @@ import type { Config } from 'tailwindcss';
 
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  darkMode: 'class',
   theme: {
     extend: {},
   },