add workflow

.github/workflows/deploy.yml

@@ -0,0 +1,43 @@
+name: Vite Github Pages Deploy
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master", "main"]
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    environment:
+      name: demo
+      url: ${{ steps.deploy_to_pages.outputs.github_pages_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build ./dist
+      - name: Vite Github Pages Deployer
+        uses: skywarth/vite-github-pages-deployer@v1.3.0
+        id: deploy_to_pages
+        with:
+          build_path: ./dist

package.json

@@ -1,26 +1,26 @@
 {
-	"private": true,
+  "private": true,
-	"type": "module",
+  "type": "module",
-	"scripts": {
+  "scripts": {
-		"dev": "vite",
+    "dev": "vite",
-		"build": "vite build",
+    "build": "vite build",
-		"preview": "vite preview"
+    "preview": "vite preview"
-	},
+  },
-	"dependencies": {
+  "dependencies": {
-		"@preact/signals": "^1.2.3",
+    "@preact/signals": "^1.2.3",
-		"preact": "^10.13.1",
+    "preact": "^10.13.1",
-		"preact-iso": "^2.6.2",
+    "preact-iso": "^2.6.2",
-		"preact-render-to-string": "^6.4.1",
+    "preact-render-to-string": "^6.4.1",
-		"random-words": "^2.0.1"
+    "random-words": "^2.0.1"
-	},
+  },
-	"devDependencies": {
+  "devDependencies": {
-		"@preact/preset-vite": "^2.5.0",
+    "@preact/preset-vite": "^2.5.0",
-		"eslint": "^8.57.0",
+    "eslint": "^8.57.0",
-		"eslint-config-preact": "^1.3.0",
+    "eslint-config-preact": "^1.3.0",
-		"typescript": "^5.4.4",
+    "typescript": "^5.4.4",
-		"vite": "^4.3.2"
+    "vite": "^4.3.2"
-	},
+  },
-	"eslintConfig": {
+  "eslintConfig": {
-		"extends": "preact"
+    "extends": "preact"
-	}
+  }
 }

src/index.tsx

@@ -99,26 +99,7 @@ export function App() {
           <FontPicker />
           <ReadingBox />
         </div>
-        <aside class="reference">
+        <Reference />
-          <DualText>
-            {lowercase.value
-              ? "Aa Bb Cc Dd Ee Ff Gg Hh Ii"
-              : "A B C D E F G H I"}
-          </DualText>
-          <DualText>
-            {lowercase.value
-              ? "Jj Kk Ll Mm Nn Oo Pp Qq Rr"
-              : "J K L M N O P Q R"}
-          </DualText>
-          <DualText>
-            {lowercase.value ? "Ss Tt Uu Vv Ww Xx Yy Zz" : "S T U V W X Y Z"}
-          </DualText>
-          <DualText>0 1 2 3 4 5 6 7 8 9</DualText>
-          {ligatures.value.length > 0 && (
-            <DualText>{ligatures.value.join(" ")}</DualText>
-          )}
-          <DualText>{`, . ? ! : ; ' " ( )`}</DualText>
-        </aside>
       </main>
     </>
   );
@@ -223,6 +204,27 @@ function DualText({ children }: { children: string }) {
   );
 }
 
+function Reference() {
+  return (
+    <aside class="reference">
+      <DualText>
+        {lowercase.value ? "Aa Bb Cc Dd Ee Ff Gg Hh Ii" : "A B C D E F G H I"}
+      </DualText>
+      <DualText>
+        {lowercase.value ? "Jj Kk Ll Mm Nn Oo Pp Qq Rr" : "J K L M N O P Q R"}
+      </DualText>
+      <DualText>
+        {lowercase.value ? "Ss Tt Uu Vv Ww Xx Yy Zz" : "S T U V W X Y Z"}
+      </DualText>
+      <DualText>0 1 2 3 4 5 6 7 8 9</DualText>
+      {ligatures.value.length > 0 && (
+        <DualText>{ligatures.value.join(" ")}</DualText>
+      )}
+      <DualText>{`, . ? ! : ; ' " ( )`}</DualText>
+    </aside>
+  );
+}
+
 if (typeof window !== "undefined") {
   hydrate(<App />, document.getElementById("app"));
 }

src/style.css

@@ -78,7 +78,7 @@
   -webkit-text-size-adjust: 100%;
 
   --color-text-normal: #000d;
-  --color-text-light: #0007;
+  --color-text-light: #0009;
   --color-background1: #eed;
   --color-background2: #bba;
   --color-accent1: #900;
@@ -131,7 +131,7 @@ h1 {
 @media (prefers-color-scheme: dark) {
   :root {
     --color-text-normal: #fffd;
-    --color-text-light: #fff7;
+    --color-text-light: #fff9;
     --color-background1: #111;
     --color-background2: #333;
   }
@@ -162,13 +162,13 @@ h1 {
 }
 .dualtext-help > span::after {
   content: attr(data-character);
+  pointer-events: none;
   position: absolute;
   left: 0;
   right: 0;
   top: 70%;
   margin: auto;
   font-family: var(--font-standard);
-  font-style: italic;
   font-size: clamp(0.45rem, 0.25em, 1rem);
   font-weight: 400;
   color: var(--color-text-light);
@@ -200,6 +200,7 @@ main {
   display: flex;
   flex-direction: column;
   overflow: scroll;
+  padding-block: 1em;
 }
 
 .readingbox .dualtext-help {
@@ -209,6 +210,22 @@ main {
   opacity: 0;
   --color-text-light: var(--color-accent1);
 }
+.readingbox .dualtext-help > span::after {
+  top: auto;
+  bottom: 70%;
+  padding: 0 0.2em 0.5em;
+  margin: 0 -0.2em 0;
+  font-size: 1em;
+  background-image: linear-gradient(
+    to top,
+    transparent,
+    var(--color-background1) 50%
+  );
+  border: 1px solid var(--color-text-light);
+  border-width: 0;
+  border-radius: 0.5em 0.5em 0 0;
+  line-height: 1;
+}
 .readingbox .dualtext-help > span:hover {
   opacity: 1;
 }

vite.config.ts

@@ -1,14 +1,18 @@
-import { defineConfig } from 'vite';
+import { UserConfig, defineConfig } from "vite";
-import preact from '@preact/preset-vite';
+import preact from "@preact/preset-vite";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ command }) => {
-	plugins: [
+  const config: UserConfig = {
-		preact({
+    plugins: [
-			prerender: {
+      preact({
-				enabled: true,
+        prerender: {
-				renderTarget: '#app',
+          enabled: true,
-			},
+          renderTarget: "#app",
-		}),
+        },
-	],
+      }),
+    ],
+    base: "./",
+  };
+  return config;
 });