tweaks

kremalicious · Sep 8, 2023 · ce0d781 · ce0d781
1 parent 9ae1ca2
commit ce0d781
Show file tree

Hide file tree

Showing 37 changed files with 93 additions and 53 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -47,6 +47,21 @@ jobs:
     - uses: actions/setup-node@v3
       with:
         node-version: 18
+
+    - name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-e2e-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-e2e-
+
+    - name: Cache dist
+        uses: actions/cache@v3
+        with:
+          path: dist
+          key: ${{ runner.os }}-node-e2e-dist-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-e2e-dist-
+
     - run: npm ci
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
@@ -73,7 +88,14 @@ jobs:
             path: ~/.npm
             key: ${{ runner.os }}-node-build-${{ hashFiles('**/package-lock.json') }}
             restore-keys: ${{ runner.os }}-node-build-
-
+
+        - name: Cache dist
+          uses: actions/cache@v3
+          with:
+            path: dist
+            key: ${{ runner.os }}-node-build-dist-${{ hashFiles('**/package-lock.json') }}
+            restore-keys: ${{ runner.os }}-node-build-dist-
+
         - run: npm ci
         - run: npm run build
           env:

diff --git a/package.json b/package.json
@@ -12,8 +12,8 @@
     "preview": "astro preview",
     "prebuild": "run-p --silent --continue-on-error create:icons create:redirects move:downloads",
     "test": "npm run lint && npm run vitest",
-    "vitest": "vitest run --config './tests/vitest.config.ts' --silent",
-    "playwright": "playwright test --config './tests/playwright.config.ts'",
+    "vitest": "vitest run --config './test/vitest.config.ts' --silent",
+    "playwright": "playwright test --config './test/playwright.config.ts'",
     "playwright:ui": "npm run playwright -- --ui",
     "lint": "run-p --silent lint:js lint:css lint:md",
     "lint:js": "eslint --ignore-path .gitignore --ext .ts,.tsx,.astro,.mjs,.js,.cjs .",

diff --git a/src/components/BackButton.astro b/src/components/BackButton.astro
@@ -4,16 +4,9 @@ import { ChevronLeft } from '@images/icons'
 
 <style>
   .buttonBack {
-    margin-bottom: var(--spacer);
     display: block;
   }
 
-  @media (min-width: 60rem) {
-    .buttonBack {
-      margin-top: -2rem;
-    }
-  }
-
   .buttonBack svg {
     stroke: var(--text-color-light);
     display: inline-block;

diff --git a/...mponents/Donation/Web3Fallback/Coin.astro → src/components/Donation/Coin.astro b/...mponents/Donation/Web3Fallback/Coin.astro → src/components/Donation/Coin.astro
diff --git a/src/components/Donation/Web3Donation/index.module.css b/src/components/Donation/Web3Donation/index.module.css
@@ -3,9 +3,7 @@
   margin-right: auto;
   max-width: 25rem;
   width: 100%;
-  margin-bottom: calc(var(--spacer) * 2);
   text-align: center;
-  min-height: 165px;
 }
 
 .web3 > div:first-child {

diff --git a/src/components/Donation/Web3Fallback/index.astro b/src/components/Donation/Web3Fallback/index.astro
diff --git a/src/components/ThemeSwitch/index.astro b/src/components/ThemeSwitch/index.astro
@@ -9,6 +9,7 @@ import styles from './index.module.css'
     <input
       type="checkbox"
       name="theme-toggle"
+      id="toggle"
       aria-describedby="theme-toggle"
     />
     <div aria-live="assertive">

diff --git a/src/components/ThemeSwitch/script.ts b/src/components/ThemeSwitch/script.ts
@@ -41,7 +41,6 @@ function reflectPreference() {
   metaThemeColor?.setAttribute('content', themeColor)
   metaThemeColorMs?.setAttribute('content', themeColor)
 
-  themeToggle?.setAttribute('aria-label', themeValue)
   themeToggleInput?.setAttribute('checked', `${themeValue === 'dark'}`)
 
   if (themeValue === 'dark') {

diff --git a/src/components/layouts/Base/index.astro b/src/components/layouts/Base/index.astro
@@ -59,7 +59,7 @@ const typekitID = import.meta.env.PUBLIC_TYPEKIT_ID
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta name="generator" content={Astro.generator} />
 
     <title>{titleFinal}</title>

diff --git a/src/components/layouts/Base/index.module.css b/src/components/layouts/Base/index.module.css
@@ -65,7 +65,7 @@
   margin-right: calc(-50vw + 50%);
 }
 
-@media (min-width: 1000px) {
+@media (min-width: 60rem) {
   .breakout {
     margin-left: -8rem;
     margin-right: -8rem;
@@ -76,7 +76,6 @@
   font-size: var(--font-size-h3);
   margin-top: 0;
   margin-bottom: var(--spacer);
-  color: var(--text-color-light);
   display: flex;
   justify-content: space-between;
   align-items: flex-end;

diff --git a/src/pages/archive/[page].astro b/src/pages/archive/[page].astro
@@ -16,6 +16,6 @@ const { page } = Astro.props as Props
 
 <LayoutArchive
   title="Archive"
-  pageTitle={`Archive | Page ${page.currentPage} of ${page.lastPage} `}
+  pageTitle={`Archive ¦ Page ${page.currentPage} of ${page.lastPage} `}
   page={page}
 />
diff --git a/src/pages/photos/[page].astro b/src/pages/photos/[page].astro
@@ -16,6 +16,6 @@ const { page } = Astro.props
 
 <LayoutArchive
   title="Photos"
-  pageTitle={`Photos | Page ${page.currentPage} of ${page.lastPage} `}
+  pageTitle={`Photos ¦ Page ${page.currentPage} of ${page.lastPage} `}
   page={page}
 />
diff --git a/src/pages/thanks.astro b/src/pages/thanks.astro
@@ -2,12 +2,52 @@
 import BackButton from '@components/BackButton.astro'
 import LayoutBase from '@layouts/Base/index.astro'
 import Web3 from '@components/Donation/Web3'
-import Web3Fallback from '@components/Donation/Web3Fallback/index.astro'
+import config from '@config/blog.config.ts'
+import Coin from '@components/Donation/Coin.astro'
+
+const coins = Object.entries(config.author).filter(
+  ([key]) => key === 'bitcoin' || key === 'ether'
+)
 ---
 
+<style>
+  .content {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 25rem;
+    width: 100%;
+    background-color: var(--box-background-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: 0 var(--spacer) var(--spacer) var(--spacer);
+    margin-bottom: var(--spacer);
+  }
+
+  .subTitle {
+    font-size: var(--font-size-large);
+    border-bottom: 1px solid var(--border-color);
+    padding: calc(var(--spacer) / 2);
+    margin-top: 0;
+    margin-left: calc(var(--spacer) * -1);
+    margin-right: calc(var(--spacer) * -1);
+  }
+</style>
+
 <LayoutBase title="Thanks" pageTitle="Say Thanks">
   <BackButton />
 
-  <Web3 client:load />
-  <Web3Fallback />
+  <div class="content">
+    <h3 class="subTitle">Send ETH from your browser wallet.</h3>
+    <Web3 client:load />
+  </div>
+
+  <div class="content">
+    <h3 class="subTitle">Send Bitcoin or ERC-20 tokens from any wallet.</h3>
+
+    {
+      coins.map(([key, value]: [key: string, value: string]) => (
+        <Coin title={key} address={value} />
+      ))
+    }
+  </div>
 </LayoutBase>
diff --git a/tests/__mocks__/@rainbow-me/rainbowkit.js → test/__mocks__/@rainbow-me/rainbowkit.js b/tests/__mocks__/@rainbow-me/rainbowkit.js → test/__mocks__/@rainbow-me/rainbowkit.js
diff --git a/tests/__mocks__/file.js → test/__mocks__/file.js b/tests/__mocks__/file.js → test/__mocks__/file.js
diff --git a/tests/__mocks__/matchMedia.ts → test/__mocks__/matchMedia.ts b/tests/__mocks__/matchMedia.ts → test/__mocks__/matchMedia.ts
diff --git a/tests/__mocks__/wagmi.ts → test/__mocks__/wagmi.ts b/tests/__mocks__/wagmi.ts → test/__mocks__/wagmi.ts
diff --git a/tests/e2e/404.spec.ts → test/e2e/404.spec.ts b/tests/e2e/404.spec.ts → test/e2e/404.spec.ts
diff --git a/...hes-screenshot-1-Mobile-Chrome-darwin.png → ...hes-screenshot-1-Mobile-Chrome-darwin.png b/...hes-screenshot-1-Mobile-Chrome-darwin.png → ...hes-screenshot-1-Mobile-Chrome-darwin.png
diff --git a/...hes-screenshot-1-Mobile-Safari-darwin.png → ...hes-screenshot-1-Mobile-Safari-darwin.png b/...hes-screenshot-1-Mobile-Safari-darwin.png → ...hes-screenshot-1-Mobile-Safari-darwin.png
diff --git a/.../matches-screenshot-1-chromium-darwin.png → .../matches-screenshot-1-chromium-darwin.png b/.../matches-screenshot-1-chromium-darwin.png → .../matches-screenshot-1-chromium-darwin.png
diff --git a/...s/matches-screenshot-1-firefox-darwin.png → ...s/matches-screenshot-1-firefox-darwin.png b/...s/matches-screenshot-1-firefox-darwin.png → ...s/matches-screenshot-1-firefox-darwin.png
diff --git a/...ts/matches-screenshot-1-webkit-darwin.png → ...ts/matches-screenshot-1-webkit-darwin.png b/...ts/matches-screenshot-1-webkit-darwin.png → ...ts/matches-screenshot-1-webkit-darwin.png
diff --git a/tests/e2e/header.spec.ts → test/e2e/header.spec.ts b/tests/e2e/header.spec.ts → test/e2e/header.spec.ts
diff --git a/...hes-screenshot-1-Mobile-Chrome-darwin.png → ...hes-screenshot-1-Mobile-Chrome-darwin.png b/...hes-screenshot-1-Mobile-Chrome-darwin.png → ...hes-screenshot-1-Mobile-Chrome-darwin.png
diff --git a/...hes-screenshot-1-Mobile-Safari-darwin.png → ...hes-screenshot-1-Mobile-Safari-darwin.png b/...hes-screenshot-1-Mobile-Safari-darwin.png → ...hes-screenshot-1-Mobile-Safari-darwin.png
diff --git a/.../matches-screenshot-1-chromium-darwin.png → .../matches-screenshot-1-chromium-darwin.png b/.../matches-screenshot-1-chromium-darwin.png → .../matches-screenshot-1-chromium-darwin.png
diff --git a/...s/matches-screenshot-1-firefox-darwin.png → ...s/matches-screenshot-1-firefox-darwin.png b/...s/matches-screenshot-1-firefox-darwin.png → ...s/matches-screenshot-1-firefox-darwin.png
diff --git a/...ts/matches-screenshot-1-webkit-darwin.png → ...ts/matches-screenshot-1-webkit-darwin.png b/...ts/matches-screenshot-1-webkit-darwin.png → ...ts/matches-screenshot-1-webkit-darwin.png
diff --git a/tests/e2e/index.spec.ts → test/e2e/index.spec.ts b/tests/e2e/index.spec.ts → test/e2e/index.spec.ts
diff --git a/tests/e2e/photos.spec.ts → test/e2e/photos.spec.ts b/tests/e2e/photos.spec.ts → test/e2e/photos.spec.ts
diff --git a/tests/e2e/post.spec.ts → test/e2e/post.spec.ts b/tests/e2e/post.spec.ts → test/e2e/post.spec.ts
diff --git a/test/e2e/thanks.spec.ts b/test/e2e/thanks.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`/thanks`)
+})
+
+test('meta is correct', async ({ page }) => {
+  await expect(page).toHaveTitle(/Thanks/)
+})
+
+test('rainbowkit works', async ({ page }) => {
+  // open and close modal
+  await page.getByTestId('rk-connect-button').click()
+  await page.getByLabel('Close').click()
+})
diff --git a/tests/playwright.config.ts → test/playwright.config.ts b/tests/playwright.config.ts → test/playwright.config.ts
@@ -50,7 +50,7 @@ export default defineConfig({
   ],
 
   webServer: {
-    command: 'npm start',
+    command: 'npm run build && npm run preview',
     url: 'http://localhost:4321',
     reuseExistingServer: !process.env.CI
   }

diff --git a/tests/vitest.config.ts → test/vitest.config.ts b/tests/vitest.config.ts → test/vitest.config.ts
@@ -7,10 +7,10 @@ export default getViteConfig({
   test: {
     globals: true,
     environment: 'jsdom',
-    setupFiles: ['./tests/vitest.setup.ts'],
+    setupFiles: ['./test/vitest.setup.ts'],
     include: ['./src/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
     deps: {
-      moduleDirectories: ['node_modules', './tests/__mocks__']
+      moduleDirectories: ['node_modules', './test/__mocks__']
     }
   }
 })
diff --git a/tests/vitest.setup.ts → test/vitest.setup.ts b/tests/vitest.setup.ts → test/vitest.setup.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -16,7 +16,8 @@
       "@lib/*": ["src/lib/*"],
       "@hooks/*": ["src/hooks/*"],
       "@stores/*": ["src/stores/*"],
-      "@content/*": ["content/*"]
+      "@content/*": ["content/*"],
+      "@test/*": ["test/*"]
     },
     "typeRoots": ["./src/@types", "./node_modules/@types"]
   }