From bbcbe8e84339a4349f587e23ab83e0e350168a5d Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Sun, 7 Apr 2024 02:42:17 -0400 Subject: [PATCH] add workflow --- .github/workflows/deploy.yml | 43 ++++++++++++++++++++++++++++++++ package.json | 48 ++++++++++++++++++------------------ src/index.tsx | 42 ++++++++++++++++--------------- src/style.css | 23 ++++++++++++++--- vite.config.ts | 26 ++++++++++--------- 5 files changed, 124 insertions(+), 58 deletions(-) create mode 100644 .github/workflows/deploy.yml diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..3d0d5df --- /dev/null +++ b/.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 diff --git a/package.json b/package.json index 3845549..003653d 100644 --- a/package.json +++ b/package.json @@ -1,26 +1,26 @@ { - "private": true, - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "@preact/signals": "^1.2.3", - "preact": "^10.13.1", - "preact-iso": "^2.6.2", - "preact-render-to-string": "^6.4.1", - "random-words": "^2.0.1" - }, - "devDependencies": { - "@preact/preset-vite": "^2.5.0", - "eslint": "^8.57.0", - "eslint-config-preact": "^1.3.0", - "typescript": "^5.4.4", - "vite": "^4.3.2" - }, - "eslintConfig": { - "extends": "preact" - } + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@preact/signals": "^1.2.3", + "preact": "^10.13.1", + "preact-iso": "^2.6.2", + "preact-render-to-string": "^6.4.1", + "random-words": "^2.0.1" + }, + "devDependencies": { + "@preact/preset-vite": "^2.5.0", + "eslint": "^8.57.0", + "eslint-config-preact": "^1.3.0", + "typescript": "^5.4.4", + "vite": "^4.3.2" + }, + "eslintConfig": { + "extends": "preact" + } } diff --git a/src/index.tsx b/src/index.tsx index ba2d000..5974470 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -99,26 +99,7 @@ export function App() { - + ); @@ -223,6 +204,27 @@ function DualText({ children }: { children: string }) { ); } +function Reference() { + return ( + + ); +} + if (typeof window !== "undefined") { hydrate(, document.getElementById("app")); } diff --git a/src/style.css b/src/style.css index a8b2089..7f7b31f 100644 --- a/src/style.css +++ b/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; } diff --git a/vite.config.ts b/vite.config.ts index 30846bf..a7ce2ca 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,14 +1,18 @@ -import { defineConfig } from 'vite'; -import preact from '@preact/preset-vite'; +import { UserConfig, defineConfig } from "vite"; +import preact from "@preact/preset-vite"; // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [ - preact({ - prerender: { - enabled: true, - renderTarget: '#app', - }, - }), - ], +export default defineConfig(({ command }) => { + const config: UserConfig = { + plugins: [ + preact({ + prerender: { + enabled: true, + renderTarget: "#app", + }, + }), + ], + base: "./", + }; + return config; });