From d2fb133fb63920e15d6acd95fdd6a9259960d7dc Mon Sep 17 00:00:00 2001 From: Laurie Reynolds Date: Tue, 3 Mar 2026 11:15:29 -0800 Subject: [PATCH 1/2] configure prettier --- .github/workflows/pr-build.yaml | 7 + docs/adr/0000-adr-template.md | 116 +++++++++ docs/adr/0001-formatters.md | 157 +++++++++++ site/.prettierrc.json | 20 ++ site/astro.config.mjs | 12 +- site/package-lock.json | 98 ++++--- site/package.json | 91 +++---- site/src/assets/styles/button.css | 10 +- site/src/assets/styles/colors.css | 96 +++---- site/src/assets/styles/form-elements.css | 8 +- site/src/assets/styles/headings.css | 20 +- site/src/assets/styles/root-and-body.css | 4 +- site/src/components/BreaksList.tsx | 138 ++++------ site/src/components/Carousel.astro | 105 ++++---- site/src/components/ConditionalParent.astro | 2 +- site/src/components/CookieBanner.astro | 35 ++- site/src/components/CoverImage.astro | 20 +- site/src/components/Favorite.astro | 54 ++-- site/src/components/Fixable.astro | 8 +- site/src/components/FixableRegion.astro | 4 +- site/src/components/Footer.astro | 24 +- site/src/components/FormLayout.astro | 6 +- site/src/components/Header.astro | 14 +- site/src/components/Modal.astro | 30 +-- site/src/components/Navigation.astro | 66 +++-- site/src/components/Search.astro | 50 ++-- site/src/components/Toast.astro | 20 +- site/src/components/UserControls.astro | 14 +- site/src/components/Video.astro | 15 +- site/src/components/cart/CartInventory.astro | 17 +- site/src/components/cart/CartStatus.astro | 19 +- site/src/components/types.ts | 19 +- site/src/content.config.ts | 122 ++++----- .../src/content/blog/events/bring-a-friend.md | 6 +- .../blog/events/coming-soon-2024-q3.md | 10 +- .../blog/events/coming-soon-2024-q4.md | 10 +- site/src/content/blog/events/live-event.md | 14 +- .../blog/in-the-news/exhibit-donation.md | 12 +- .../src/content/blog/in-the-news/expansion.md | 4 +- .../blog/in-the-news/summer-students.md | 4 +- site/src/content/exhibit-categories/glass.md | 6 +- site/src/content/exhibit-categories/home.md | 2 +- site/src/content/exhibit-categories/music.md | 2 +- site/src/content/exhibit-categories/sports.md | 2 +- .../content/exhibit-categories/technology.md | 6 +- .../content/exhibits/containers/brown-jars.md | 4 +- .../exhibits/containers/ceramic-vase.md | 4 +- .../content/exhibits/containers/clay-jug.md | 4 +- .../content/exhibits/containers/clay-vases.md | 4 +- .../exhibits/containers/vintage-bottles.md | 6 +- site/src/content/exhibits/dishes/blue-dish.md | 6 +- .../exhibits/dishes/white-ceramic-plate.md | 4 +- .../content/exhibits/glass/drinking-glass.md | 4 +- .../content/exhibits/glass/green-container.md | 6 +- site/src/content/exhibits/glass/mirror.md | 8 +- site/src/content/exhibits/glass/ornament.md | 4 +- .../exhibits/glass/wine-glass-with-rose.md | 12 +- site/src/content/exhibits/glass/wine-glass.md | 4 +- site/src/content/exhibits/home/narrow-room.md | 8 +- site/src/content/exhibits/home/porch-chair.md | 6 +- .../src/content/exhibits/home/wide-bedroom.md | 6 +- .../content/exhibits/music/cassette-player.md | 6 +- .../src/content/exhibits/music/grand-piano.md | 4 +- site/src/content/exhibits/music/record.md | 4 +- site/src/content/exhibits/music/turntable.md | 4 +- .../exhibits/sports/basketball-hoop.md | 4 +- site/src/content/exhibits/sports/bicycle.md | 6 +- site/src/content/exhibits/sports/football.md | 4 +- .../src/content/exhibits/sports/skateboard.md | 4 +- .../content/exhibits/sports/soccer-ball.md | 4 +- .../src/content/exhibits/technology/camera.md | 4 +- .../src/content/exhibits/technology/clocks.md | 4 +- .../exhibits/technology/compact-disc.md | 6 +- .../exhibits/technology/crt-monitor.md | 4 +- site/src/content/exhibits/technology/phone.md | 6 +- .../content/exhibits/technology/television.md | 6 +- .../content/exhibits/toys-games/blue-bear.md | 4 +- .../exhibits/toys-games/game-controller.md | 4 +- .../content/exhibits/toys-games/ornament.md | 6 +- .../exhibits/toys-games/porcelain-doll.md | 4 +- site/src/content/processes.json | 2 +- site/src/content/products/apparel/tshirt.md | 2 +- .../content/products/vessels/stout-glass.md | 2 +- site/src/content/products/vessels/teacup.md | 2 +- .../content/products/vessels/travel-mug.md | 2 +- .../content/products/vessels/water-bottle.md | 2 +- site/src/content/sections.json | 2 +- site/src/layouts/BaseLayout.astro | 6 +- site/src/layouts/Layout.astro | 27 +- site/src/layouts/MetaLayout.astro | 8 +- site/src/layouts/ShopLayout.astro | 48 ++-- site/src/lib/client/cart.ts | 28 +- site/src/lib/client/fetch.ts | 5 +- site/src/lib/client/form.ts | 15 +- site/src/lib/client/modal.ts | 3 +- site/src/lib/client/store.ts | 34 ++- site/src/lib/client/toast.ts | 60 ++--- site/src/lib/image.ts | 11 +- site/src/lib/markdown.ts | 4 +- site/src/lib/meta.ts | 2 +- site/src/lib/mode.ts | 7 +- site/src/lib/nav-links.ts | 52 ++-- site/src/lib/util.ts | 2 +- site/src/middleware.ts | 10 +- site/src/pages/404.astro | 6 +- site/src/pages/index.astro | 65 +++-- site/src/pages/museum/about.astro | 35 ++- site/src/pages/museum/api/search.ts | 20 +- .../pages/museum/blog/[category]/[post].astro | 23 +- site/src/pages/museum/blog/index.astro | 117 ++++----- .../collections/[category]/[exhibit].astro | 47 ++-- .../museum/collections/[category]/index.astro | 121 ++++----- site/src/pages/museum/collections/index.astro | 46 ++-- .../museum/early-home-computers-event.astro | 244 ++++++++---------- .../gift-shop/[category]/[product].astro | 84 +++--- .../museum/gift-shop/[category]/index.astro | 16 +- .../gift-shop/checkout/confirmation.astro | 12 +- .../museum/gift-shop/checkout/index.astro | 13 +- .../museum/gift-shop/checkout/payment.astro | 60 ++--- .../museum/gift-shop/checkout/review.astro | 13 +- .../museum/gift-shop/checkout/shipping.astro | 46 ++-- site/src/pages/museum/gift-shop/index.astro | 34 ++- site/src/pages/museum/help.astro | 25 +- site/src/pages/museum/index.astro | 31 +-- site/src/pages/museum/login/index.astro | 64 ++--- site/src/pages/museum/map.astro | 107 ++++---- site/src/pages/museum/register.astro | 58 ++--- site/src/pages/museum/search.astro | 2 +- site/src/pages/museum/tour.astro | 72 ++++-- site/src/pages/museum/volunteer/index.astro | 46 ++-- site/update-wcag-data.ts | 29 +-- 131 files changed, 1752 insertions(+), 1697 deletions(-) create mode 100644 docs/adr/0000-adr-template.md create mode 100644 docs/adr/0001-formatters.md create mode 100644 site/.prettierrc.json diff --git a/.github/workflows/pr-build.yaml b/.github/workflows/pr-build.yaml index 9f9e8e68..561a4d06 100644 --- a/.github/workflows/pr-build.yaml +++ b/.github/workflows/pr-build.yaml @@ -10,15 +10,22 @@ jobs: steps: - name: git checkout uses: actions/checkout@v4 + - name: Install node uses: actions/setup-node@v4 with: cache: npm cache-dependency-path: site/package-lock.json node-version: 20 + - name: Install dependencies working-directory: site run: npm ci + + - name: Format Check (Prettier) + working-directory: site + run: npm run format:check + - name: Check (TypeScript) working-directory: site run: npm run check diff --git a/docs/adr/0000-adr-template.md b/docs/adr/0000-adr-template.md new file mode 100644 index 00000000..f50f7c29 --- /dev/null +++ b/docs/adr/0000-adr-template.md @@ -0,0 +1,116 @@ +# ADR-XXXX: Title + + + +--- + +## Status + +Proposed | Accepted | Implemented | Deprecated | Superseded + + + +## History + +| Date | Status | Notes | +|------------|----------|---------------| +| YYYY-MM-DD | Proposed | Initial draft | + + + +--- + +## Context + + + +--- + +## Decision + + + +### Reason + + + +--- + +### Alternatives Considered + + + +### Considerations + +#### Pros + + + +#### Cons + + + +--- + +## Implementation Notes + +> [!NOTE] +> This is just for the initial implementation +> Any updates will be documented in PRs + + + +``` + + + +--- + +## Future Considerations + + + + +--- + +## References + + \ No newline at end of file diff --git a/docs/adr/0001-formatters.md b/docs/adr/0001-formatters.md new file mode 100644 index 00000000..540db59b --- /dev/null +++ b/docs/adr/0001-formatters.md @@ -0,0 +1,157 @@ +# ADR-0001: Add a code formatter + + + +--- + +## Status + +Proposed + + + +## History + +| Date | Status | Notes | +|------------|----------|---------------| +| 2026-03-03 | Proposed | Initial draft | + + + +--- + +## Context + +Code formatters enforce commonly agreed upon style across the codebase. + +Who is this for: Developers. +Why is this needed: Formatting the code using common style results in a consistent developer experience, and helps make the code more readable. + +Prettier is already installed as a project dependency, but has not yet been configured or added to the ci workflow. + +[Prettier on npm](https://www.npmjs.com/package/prettier) + +- Download frequency: 77+ million weekly downloads +- Last update: last released a month ago +- License: MIT - [Link to license](https://github.com/prettier/prettier/blob/main/LICENSE) + +[prettier-plugin-astro on npm](https://www.npmjs.com/package/prettier-plugin-astro) + +- Download frequency: 369,270 weekly downloads +- Last update: 2 years ago +- License: MIT - [link to license](https://github.com/withastro/prettier-plugin-astro/blob/main/LICENSE) + + + +--- + +## Decision + + + +### Reason + + + +--- + +### Alternatives Considered + +#### Biome + +- Pros + - Extremely fast + - Provides formatting and linting + +- Cons + - Astro support is still experimental + - May not be widely used in the Astro ecosystem + +- Why was it rejected + - Biome's support for astro is experimental - [Biome language support](https://biomejs.dev/internals/language-support/) + + + +### Considerations + +#### Pros + +- Widely used and stable package +- Cleaner, more consistent code style +- Eliminates some inconsistencies across developer styles + + + +#### Cons + +- Slight decrease in performance as compared to Biome +- Some developer may need have a ramp up to adjust to formatting settings + + + +--- + +## Implementation Notes + +> [!NOTE] +> This is just for the initial implementation +> Any updates will be documented in PRs + + + +Proposed initial configuration. Based in part on [Astro prettier configuration](https://github.com/withastro/astro/blob/main/prettier.config.mjs) + +See the full list of options - [Prettier docs - Options](https://prettier.io/docs/options) + +see PR # + +--- + +## Future Considerations + + + + +--- + +## References + + \ No newline at end of file diff --git a/site/.prettierrc.json b/site/.prettierrc.json new file mode 100644 index 00000000..8619f30d --- /dev/null +++ b/site/.prettierrc.json @@ -0,0 +1,20 @@ +{ + "printWidth": 100, + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "all", + "useTabs": false, + "endOfLine": "lf", + "bracketSpacing": true, + "plugins": ["prettier-plugin-astro"], + "proseWrap": "preserve", + "overrides": [ + { + "files": "*.astro", + "options": { + "parser": "astro" + } + } + ] +} diff --git a/site/astro.config.mjs b/site/astro.config.mjs index a1fe3906..b03d57ae 100644 --- a/site/astro.config.mjs +++ b/site/astro.config.mjs @@ -1,21 +1,21 @@ import { defineConfig } from 'astro/config'; -import icon from "astro-icon"; +import icon from 'astro-icon'; -import preact from "@astrojs/preact"; +import preact from '@astrojs/preact'; // https://astro.build/config export default defineConfig({ - site: "https://accessiblecommunity.github.io", - base: "fixable", - trailingSlash: "always", + site: 'https://accessiblecommunity.github.io', + base: 'fixable', + trailingSlash: 'always', server: { host: true, port: 4323, }, integrations: [ icon({ - iconDir: "src/assets/icons", + iconDir: 'src/assets/icons', }), preact(), ], diff --git a/site/package-lock.json b/site/package-lock.json index 2bf565c9..b6ff2c0f 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -28,7 +28,8 @@ "@types/lodash-es": "^4.17.12", "@types/node": "^20.14.14", "cross-env": "^7.0.3", - "prettier": "3.3.2", + "prettier": "3.8.1", + "prettier-plugin-astro": "^0.14.1", "tsx": "^4.19.3" } }, @@ -2176,6 +2177,15 @@ "tslib": "^2.8.0" } }, + "node_modules/@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "license": "ISC", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@types/debug": { "version": "4.1.12", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", @@ -5586,10 +5596,11 @@ } }, "node_modules/prettier": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz", - "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==", + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz", + "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, @@ -5600,6 +5611,21 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-plugin-astro": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.14.1.tgz", + "integrity": "sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@astrojs/compiler": "^2.9.1", + "prettier": "^3.0.0", + "sass-formatter": "^0.7.6" + }, + "engines": { + "node": "^14.15.0 || >=16.0.0" + } + }, "node_modules/prismjs": { "version": "1.30.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", @@ -6037,19 +6063,27 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/s.color": { + "version": "0.0.15", + "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz", + "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==", + "dev": true, + "license": "MIT" + }, "node_modules/safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "license": "MIT" }, - "node_modules/sax": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.5.0.tgz", - "integrity": "sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==", - "license": "BlueOak-1.0.0", - "engines": { - "node": ">=11.0.0" + "node_modules/sass-formatter": { + "version": "0.7.9", + "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.9.tgz", + "integrity": "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "suf-log": "^2.5.3" } }, "node_modules/semver": { @@ -6250,19 +6284,29 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, + "node_modules/suf-log": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz", + "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==", + "dev": true, + "license": "MIT", + "dependencies": { + "s.color": "0.0.15" + } + }, "node_modules/svgo": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz", - "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", + "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", "license": "MIT", "dependencies": { + "@trysound/sax": "0.2.0", "commander": "^7.2.0", "css-select": "^5.1.0", "css-tree": "^2.3.1", "css-what": "^6.1.0", "csso": "^5.0.5", - "picocolors": "^1.0.0", - "sax": "^1.5.0" + "picocolors": "^1.0.0" }, "bin": { "svgo": "bin/svgo" @@ -6276,9 +6320,9 @@ } }, "node_modules/tar": { - "version": "7.5.10", - "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.10.tgz", - "integrity": "sha512-8mOPs1//5q/rlkNSPcCegA6hiHJYDmSLEI8aMH/CdSQJNWztHC9WHNam5zdQlfpTwB9Xp7IBEsHfV5LKMJGVAw==", + "version": "7.5.9", + "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.9.tgz", + "integrity": "sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==", "license": "BlueOak-1.0.0", "dependencies": { "@isaacs/fs-minipass": "^4.0.0", @@ -7441,22 +7485,6 @@ "yaml-language-server": "bin/yaml-language-server" } }, - "node_modules/yaml-language-server/node_modules/prettier": { - "version": "3.8.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz", - "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==", - "dev": true, - "license": "MIT", - "bin": { - "prettier": "bin/prettier.cjs" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" - } - }, "node_modules/yaml-language-server/node_modules/request-light": { "version": "0.5.8", "resolved": "https://registry.npmjs.org/request-light/-/request-light-0.5.8.tgz", diff --git a/site/package.json b/site/package.json index edb12694..2e346dc4 100644 --- a/site/package.json +++ b/site/package.json @@ -1,46 +1,49 @@ { - "name": "fixable", - "type": "module", - "version": "0.0.1", - "scripts": { - "dev": "astro dev", - "dev:fixed": "cross-env PUBLIC_FIXED=1 astro dev", - "start": "astro dev", - "check": "astro check", - "build": "astro check && astro build", - "build:fixed": "astro check && cross-env PUBLIC_FIXED=1 astro build", - "preview": "astro preview", - "sync": "astro sync", - "update-wcag": "tsx update-wcag-data.ts && astro check", - "astro": "astro" - }, - "dependencies": { - "@astrojs/markdown-remark": "^6.3.10", - "@astrojs/preact": "^4.1.3", - "@fontsource-variable/cabin": "^5.0.19", - "@fontsource/corinthia": "^5.0.21", - "@fontsource/patua-one": "^5.0.19", - "astro": "~5.15.9", - "astro-icon": "^1.1.5", - "cheerio": "^1.0.0", - "fast-glob": "^3.3.2", - "github-slugger": "^2.0.0", - "lodash-es": "^4.17.23", - "preact": "^10.28.4", - "typescript": "^5.8.2" - }, - "devDependencies": { - "@astrojs/check": "^0.9.6", - "@iconify-json/ri": "^1.1.21", - "@types/lodash-es": "^4.17.12", - "@types/node": "^20.14.14", - "cross-env": "^7.0.3", - "prettier": "3.3.2", - "tsx": "^4.19.3" - }, - "overrides": { - "@astrojs/check": { - "lodash": "^4.17.23" - } - } + "name": "fixable", + "type": "module", + "version": "0.0.1", + "scripts": { + "dev": "astro dev", + "dev:fixed": "cross-env PUBLIC_FIXED=1 astro dev", + "start": "astro dev", + "check": "astro check", + "build": "npm run format:check astro check && astro build", + "build:fixed": "npm run format:check && astro check && cross-env PUBLIC_FIXED=1 astro build", + "preview": "astro preview", + "sync": "astro sync", + "update-wcag": "tsx update-wcag-data.ts && astro check", + "astro": "astro", + "format": "prettier . --write --ignore-unknown", + "format:check": "prettier . --check --ignore-unknown" + }, + "dependencies": { + "@astrojs/markdown-remark": "^6.3.10", + "@astrojs/preact": "^4.1.3", + "@fontsource-variable/cabin": "^5.0.19", + "@fontsource/corinthia": "^5.0.21", + "@fontsource/patua-one": "^5.0.19", + "astro": "~5.15.9", + "astro-icon": "^1.1.5", + "cheerio": "^1.0.0", + "fast-glob": "^3.3.2", + "github-slugger": "^2.0.0", + "lodash-es": "^4.17.23", + "preact": "^10.28.4", + "typescript": "^5.8.2" + }, + "devDependencies": { + "@astrojs/check": "^0.9.6", + "@iconify-json/ri": "^1.1.21", + "@types/lodash-es": "^4.17.12", + "@types/node": "^20.14.14", + "cross-env": "^7.0.3", + "prettier": "3.8.1", + "prettier-plugin-astro": "^0.14.1", + "tsx": "^4.19.3" + }, + "overrides": { + "@astrojs/check": { + "lodash": "^4.17.23" + } + } } diff --git a/site/src/assets/styles/button.css b/site/src/assets/styles/button.css index 0b729bf6..f7a0d4bf 100644 --- a/site/src/assets/styles/button.css +++ b/site/src/assets/styles/button.css @@ -17,7 +17,9 @@ a.button { background-color: var(--blue-500); border: none; color: var(--white); - transition: color, background-color 150ms ease-in-out; + transition: + color, + background-color 150ms ease-in-out; &:disabled { background-color: var(--gray-300); @@ -37,7 +39,9 @@ a.button-outline { border: 1px solid; border-color: var(--gray-400); color: var(--gray-900); - transition: color, border-color 150ms ease-in-out; + transition: + color, + border-color 150ms ease-in-out; &:hover { border-color: var(--black); @@ -45,4 +49,4 @@ a.button-outline { &:active { color: var(--black); } -} \ No newline at end of file +} diff --git a/site/src/assets/styles/colors.css b/site/src/assets/styles/colors.css index b57e3355..b7ff4505 100644 --- a/site/src/assets/styles/colors.css +++ b/site/src/assets/styles/colors.css @@ -1,14 +1,14 @@ :root { - --gold-050: #f5f0e6; - --gold-100: #f1e5cd; - --gold-200: #dec69a; - --gold-300: #c7a97b; - --gold-400: #ad8b65; - --gold-500: #8e704f; - --gold-600: #6b5947; - --gold-700: #4d4438; - --gold-800: #322d26; - --gold-900: #191714; + --gold-050: #f5f0e6; + --gold-100: #f1e5cd; + --gold-200: #dec69a; + --gold-300: #c7a97b; + --gold-400: #ad8b65; + --gold-500: #8e704f; + --gold-600: #6b5947; + --gold-700: #4d4438; + --gold-800: #322d26; + --gold-900: #191714; --gold-vivid-050: #fef0c8; --gold-vivid-100: #ffe396; @@ -20,15 +20,15 @@ --gold-vivid-700: #5c410a; --gold-vivid-800: #3b2b15; - --blue-050: #e8f5ff; - --blue-100: #cfe8ff; - --blue-200: #a1d3ff; - --blue-300: #58b4ff; - --blue-400: #2491ff; - --blue-500: #0076d6; - --blue-600: #005ea2; - --blue-700: #0b4778; - --blue-800: #112f4e; + --blue-050: #e8f5ff; + --blue-100: #cfe8ff; + --blue-200: #a1d3ff; + --blue-300: #58b4ff; + --blue-400: #2491ff; + --blue-500: #0076d6; + --blue-600: #005ea2; + --blue-700: #0b4778; + --blue-800: #112f4e; --gray-010: #fcfcfc; --gray-020: #f9f9f9; @@ -45,37 +45,37 @@ --gray-800: #2e2e2e; --gray-900: #1b1b1b; - --red-warm-050: #fff5ee; - --red-warm-100: #fce1d4; - --red-warm-200: #f6bd9c; - --red-warm-300: #f39268; - --red-warm-400: #ef5e25; - --red-warm-500: #d54309; - --red-warm-600: #9c3d10; - --red-warm-700: #63340f; - --red-warm-800: #3e2a1e; + --red-warm-050: #fff5ee; + --red-warm-100: #fce1d4; + --red-warm-200: #f6bd9c; + --red-warm-300: #f39268; + --red-warm-400: #ef5e25; + --red-warm-500: #d54309; + --red-warm-600: #9c3d10; + --red-warm-700: #63340f; + --red-warm-800: #3e2a1e; - --yellow-050: #faf3d1; - --yellow-100: #f5e6af; - --yellow-200: #e6c74c; - --yellow-300: #c9ab48; - --yellow-400: #a88f48; - --yellow-500: #8a7237; - --yellow-600: #6b5a39; - --yellow-700: #504332; - --yellow-800: #332d27; - --yellow-900: #1a1614; + --yellow-050: #faf3d1; + --yellow-100: #f5e6af; + --yellow-200: #e6c74c; + --yellow-300: #c9ab48; + --yellow-400: #a88f48; + --yellow-500: #8a7237; + --yellow-600: #6b5a39; + --yellow-700: #504332; + --yellow-800: #332d27; + --yellow-900: #1a1614; - --green-050: #eaf4dd; - --green-100: #dfeacd; - --green-200: #b8d293; - --green-300: #9bb672; - --green-400: #7d9b4e; - --green-500: #607f35; - --green-600: #4c6424; - --green-700: #3c4a29; - --green-800: #293021; - --green-900: #161814; + --green-050: #eaf4dd; + --green-100: #dfeacd; + --green-200: #b8d293; + --green-300: #9bb672; + --green-400: #7d9b4e; + --green-500: #607f35; + --green-600: #4c6424; + --green-700: #3c4a29; + --green-800: #293021; + --green-900: #161814; --white: #fff; --black: var(--gray-800); diff --git a/site/src/assets/styles/form-elements.css b/site/src/assets/styles/form-elements.css index c88fff89..379c25b8 100644 --- a/site/src/assets/styles/form-elements.css +++ b/site/src/assets/styles/form-elements.css @@ -1,5 +1,6 @@ -select, textarea, -input:not([type="checkbox"], [type="file"], [type="image"], [type="radio"], [type="range"]) { +select, +textarea, +input:not([type='checkbox'], [type='file'], [type='image'], [type='radio'], [type='range']) { border: 1px solid var(--gray-800); font: inherit; letter-spacing: inherit; @@ -15,6 +16,7 @@ input:not([type="checkbox"], [type="file"], [type="image"], [type="radio"], [typ } } -div.error, p.error { +div.error, +p.error { color: var(--red-warm-500); } diff --git a/site/src/assets/styles/headings.css b/site/src/assets/styles/headings.css index f189ccd5..1be286ed 100644 --- a/site/src/assets/styles/headings.css +++ b/site/src/assets/styles/headings.css @@ -4,26 +4,32 @@ line-height: var(--ms3); } -h1, .h1{ +h1, +.h1 { font-size: calc(var(--ms6) * 1rem); } -h2, .h2{ +h2, +.h2 { font-size: calc(var(--ms5) * 1rem); } -h3, .h3{ +h3, +.h3 { font-size: calc(var(--ms4) * 1rem); } -h4, .h4{ +h4, +.h4 { font-size: calc(var(--ms3) * 1rem); } -h5, .h5{ +h5, +.h5 { font-size: calc(var(--ms2) * 1rem); } -h6, .h6{ +h6, +.h6 { font-size: calc(var(--ms1) * 1rem); -} \ No newline at end of file +} diff --git a/site/src/assets/styles/root-and-body.css b/site/src/assets/styles/root-and-body.css index 7d6386a6..98b20aef 100644 --- a/site/src/assets/styles/root-and-body.css +++ b/site/src/assets/styles/root-and-body.css @@ -38,8 +38,8 @@ --ms-4: 0.624; --ms-5: 0.555; --ms-6: 0.493; - --ms-7: 0.439; - --ms-8: 0.390; + --ms-7: 0.439; + --ms-8: 0.39; --ms-9: 0.346; --ms-10: 0.308; } diff --git a/site/src/components/BreaksList.tsx b/site/src/components/BreaksList.tsx index a0b0d0bc..c6f0ef2b 100644 --- a/site/src/components/BreaksList.tsx +++ b/site/src/components/BreaksList.tsx @@ -1,34 +1,33 @@ -import type { CollectionEntry } from "astro:content"; -import { z } from "astro/zod"; -import GithubSlugger from "github-slugger"; -import omit from "lodash-es/omit"; -import sortBy from "lodash-es/sortBy"; -import type { SubmitEventHandler } from "preact"; -import { useEffect, useRef, useState } from "preact/hooks"; +import type { CollectionEntry } from 'astro:content'; +import { z } from 'astro/zod'; +import GithubSlugger from 'github-slugger'; +import omit from 'lodash-es/omit'; +import sortBy from 'lodash-es/sortBy'; +import type { SubmitEventHandler } from 'preact'; +import { useEffect, useRef, useState } from 'preact/hooks'; -import wcag2SuccessCriteria from "@/lib/wcag2.json"; -import isEqual from "lodash-es/isEqual"; -import { museumBaseUrl } from "@/lib/constants"; +import wcag2SuccessCriteria from '@/lib/wcag2.json'; +import isEqual from 'lodash-es/isEqual'; +import { museumBaseUrl } from '@/lib/constants'; -type BreakProcessesMap = Record>; +type BreakProcessesMap = Record>; interface BreaksListProps { - breaks: CollectionEntry<"breaks">[]; + breaks: CollectionEntry<'breaks'>[]; breakProcessesMap: BreakProcessesMap; } const formSchema = z.object({ - query: z.string().default(""), - version: z.enum(["2", "3"]).default("2"), + query: z.string().default(''), + version: z.enum(['2', '3']).default('2'), }); /** Reduced object format pertaining to a single SC/requirement */ -interface SingleBreak - extends Omit< - CollectionEntry<"breaks">["data"], - "location" | "process" | "wcag2" | "wcag3" - > { - id: CollectionEntry<"breaks">["id"]; +interface SingleBreak extends Omit< + CollectionEntry<'breaks'>['data'], + 'location' | 'process' | 'wcag2' | 'wcag3' +> { + id: CollectionEntry<'breaks'>['id']; wcag2?: keyof typeof wcag2SuccessCriteria; wcag3?: string; } @@ -42,53 +41,45 @@ const BreakWcagLabel = ({ break: { photosensitivity, wcag2, wcag3 }, version, }: BreakWcagLabelProps) => { - const label = - version === "2" ? `${wcag2}: ${wcag2SuccessCriteria[wcag2!]}` : wcag3!; + const label = version === '2' ? `${wcag2}: ${wcag2SuccessCriteria[wcag2!]}` : wcag3!; return ( <> - {label}{" "} - {photosensitivity && ( - (Photosensitivity warning) - )} + {label}{' '} + {photosensitivity && (Photosensitivity warning)} ); }; -const caseInsensitiveIncludes = (a: string, b: string) => - a.toLowerCase().includes(b.toLowerCase()); +const caseInsensitiveIncludes = (a: string, b: string) => a.toLowerCase().includes(b.toLowerCase()); export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { const [{ query, version }, setValues] = useState(formSchema.parse({})); const listRef = useRef(null); - const wcagProp = version === "2" ? "wcag2" : "wcag3"; + const wcagProp = version === '2' ? 'wcag2' : 'wcag3'; const getSortableWcag = - version === "2" + version === '2' ? ({ wcag2 }: SingleBreak) => // Maps e.g. 1.2.1 to 10201, 2.4.11 to 20411, for sortability wcag2! - .split(".") + .split('.') .reverse() .reduce((sum, n, i) => sum + +n * Math.pow(10, i * 2), 0) : ({ wcag3 }: SingleBreak) => wcag3!; const groupedBreaks: Record = {}; - for (const process of Object.keys(breakProcessesMap)) - groupedBreaks[process] = []; + for (const process of Object.keys(breakProcessesMap)) groupedBreaks[process] = []; const filteredBreaks = breaks.filter(({ data }) => { if (!data[wcagProp]) return false; if (!query) return true; if (caseInsensitiveIncludes(data.location.id, query)) return true; - if (data.description.find((d) => caseInsensitiveIncludes(d, query))) - return true; + if (data.description.find((d) => caseInsensitiveIncludes(d, query))) return true; - if (version === "2") + if (version === '2') return !!data.wcag2!.find( - (c) => - c.includes(query) || - caseInsensitiveIncludes(wcag2SuccessCriteria[c], query) + (c) => c.includes(query) || caseInsensitiveIncludes(wcag2SuccessCriteria[c], query), ); return !!data.wcag3!.find((r) => caseInsensitiveIncludes(r, query)); }); @@ -98,14 +89,14 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { const breaks: SingleBreak[] = []; for (const value of brk.data[wcagProp]!) { breaks.push({ - ...omit(brk.data, "location", "process", "wcag2", "wcag3"), + ...omit(brk.data, 'location', 'process', 'wcag2', 'wcag3'), id: brk.id, [wcagProp]: value, }); } // Add to each applicable process - const processes = isEqual(brk.data.process, ["ALL"]) + const processes = isEqual(brk.data.process, ['ALL']) ? Object.keys(breakProcessesMap) : brk.data.process; for (const process of processes) { @@ -116,8 +107,7 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { for (const process of Object.keys(breakProcessesMap)) { if (!groupedBreaks[process].length) delete groupedBreaks[process]; - else - groupedBreaks[process] = sortBy(groupedBreaks[process], getSortableWcag); + else groupedBreaks[process] = sortBy(groupedBreaks[process], getSortableWcag); } const onSubmit: SubmitEventHandler = (event) => { @@ -125,16 +115,16 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { const formData = new FormData(event.target as HTMLFormElement); setValues( formSchema.parse({ - arrangement: formData.get("a"), - query: formData.get("q"), - version: formData.get("v"), - }) + arrangement: formData.get('a'), + query: formData.get('q'), + version: formData.get('v'), + }), ); const newUrl = new URL(location.href); - for (const name of ["a", "q", "v"]) { + for (const name of ['a', 'q', 'v']) { newUrl.searchParams.set(name, formData.get(name) as string); } - history.pushState(null, "", newUrl); + history.pushState(null, '', newUrl); listRef.current?.focus(); }; @@ -143,18 +133,18 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { const updateValues = () => { setValues( formSchema.parse({ - arrangement: params.get("a") || undefined, - query: params.get("q") || undefined, - version: params.get("v") || undefined, - }) + arrangement: params.get('a') || undefined, + query: params.get('q') || undefined, + version: params.get('v') || undefined, + }), ); }; // Intentionally recall value after first render, to avoid skew from initial server response if (location.search) updateValues(); - addEventListener("popstate", updateValues); - return () => removeEventListener("popstate", updateValues); + addEventListener('popstate', updateValues); + return () => removeEventListener('popstate', updateValues); }, []); const slugger = new GithubSlugger(); @@ -203,37 +193,19 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => {
{breaks.map((brk, i) => ( <> - {(i < 1 || - getSortableWcag(breaks[i - 1]) !== - getSortableWcag(brk)) && ( -
- + {(i < 1 || getSortableWcag(breaks[i - 1]) !== getSortableWcag(brk)) && ( +
+
)} {brk.description.map((description) => ( -
- - {brk.href} - - :{" "} +
+ {brk.href}:{' '} {brk.discussionItems && (brk.discussionItems.length === 1 ? (
- - Discussion item: - {" "} + Discussion item:{' '} { ) : ( <>
- - Discussion items: - + Discussion items:
    {brk.discussionItems.map((item) => ( -
  • +
  • ))}
diff --git a/site/src/components/Carousel.astro b/site/src/components/Carousel.astro index 82bdc2f1..81c307aa 100644 --- a/site/src/components/Carousel.astro +++ b/site/src/components/Carousel.astro @@ -1,32 +1,32 @@ --- -import type { CollectionEntry } from "astro:content"; -import { museumBaseUrl } from "@/lib/constants"; -import { getMode } from "@/lib/mode"; -import FixableRegion from "./FixableRegion.astro"; +import type { CollectionEntry } from 'astro:content'; +import { museumBaseUrl } from '@/lib/constants'; +import { getMode } from '@/lib/mode'; +import FixableRegion from './FixableRegion.astro'; interface Props { entries: ImageEntry[]; } type ImageEntry = - | CollectionEntry<"blog"> - | CollectionEntry<"exhibits"> - | CollectionEntry<"products">; + | CollectionEntry<'blog'> + | CollectionEntry<'exhibits'> + | CollectionEntry<'products'>; const { entries } = Astro.props; const collectionMap = { blog: { - label: "Post", - path: "blog", + label: 'Post', + path: 'blog', }, exhibits: { - label: "Exhibit", - path: "collections", + label: 'Exhibit', + path: 'collections', }, products: { - label: "Merch", - path: "gift-shop" + label: 'Merch', + path: 'gift-shop', }, }; @@ -42,16 +42,16 @@ const collectionMap = { --- { -/** - * @break - * wcag2: 2.2.2 - * wcag3: No visual motion - * description: - * - The carousel does not include controls to stop moving and updating. - * - The promotional video at the bottom of the home page loops infinitely and does not have controls to pause. - */ + /** + * @break + * wcag2: 2.2.2 + * wcag3: No visual motion + * description: + * - The carousel does not include controls to stop moving and updating. + * - The promotional video at the bottom of the home page loops infinitely and does not have controls to pause. + */ } -
+
{ entries.map((entry, i) => ( /** @@ -63,24 +63,25 @@ const collectionMap = { * is not always enough to guarantee sufficient contrast. */
- { - /** - * @break - * wcag2: 1.3.2 - * description: The overline text over each title in the carousel uses space characters between each letter. - * discussionItems: - * - For WCAG 3, this used to be filed under Unambiguous text, which no longer exists; is there a suitable alternative to fail it under? - */ - } -
L A T E S T   { - collectionMap[entry.collection].label.toUpperCase().split("").join(" ") - }
-
Latest {collectionMap[entry.collection].label}
+ {/** + * @break + * wcag2: 1.3.2 + * description: The overline text over each title in the carousel uses space characters between each letter. + * discussionItems: + * - For WCAG 3, this used to be filed under Unambiguous text, which no longer exists; is there a suitable alternative to fail it under? + */} +
+ L A T E S T  {' '} + {collectionMap[entry.collection].label.toUpperCase().split('').join(' ')} +
+
+ Latest {collectionMap[entry.collection].label} +
{entry.data.title}
diff --git a/site/src/components/Navigation.astro b/site/src/components/Navigation.astro index 5bcd1a5f..4b717bd7 100644 --- a/site/src/components/Navigation.astro +++ b/site/src/components/Navigation.astro @@ -1,29 +1,29 @@ --- -import { Icon } from "astro-icon/components"; -import { getMode } from "@/lib/mode"; -import { defaultNavLinks, type NavTree } from "@/lib/nav-links"; -import ConditionalParent from "./ConditionalParent.astro"; +import { Icon } from 'astro-icon/components'; +import { getMode } from '@/lib/mode'; +import { defaultNavLinks, type NavTree } from '@/lib/nav-links'; +import ConditionalParent from './ConditionalParent.astro'; interface Props { /** * Indicates behavior in broken mode: open-on-focus or open-on-hover. * If unspecified, uses expand/collapse behavior. */ - failureMode?: "focus" | "hover"; + failureMode?: 'focus' | 'hover'; /** Links to display in nav. Supports one level of nesting. */ navLinks?: NavTree; } const { failureMode, navLinks = defaultNavLinks } = Astro.props; -const actualFailureMode = getMode() === "broken" ? failureMode : undefined; +const actualFailureMode = getMode() === 'broken' ? failureMode : undefined; ---