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..b8e8a406 --- /dev/null +++ b/site/.prettierrc.json @@ -0,0 +1,20 @@ +{ + "printWidth": 80, + "semi": true, + "singleQuote": false, + "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..8f214030 100644 --- a/site/astro.config.mjs +++ b/site/astro.config.mjs @@ -1,4 +1,4 @@ -import { defineConfig } from 'astro/config'; +import { defineConfig } from "astro/config"; import icon from "astro-icon"; 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..a26f24f5 100644 --- a/site/package.json +++ b/site/package.json @@ -7,12 +7,14 @@ "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", + "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" + "astro": "astro", + "format": "prettier . --write --ignore-unknown", + "format:check": "prettier . --check --ignore-unknown" }, "dependencies": { "@astrojs/markdown-remark": "^6.3.10", @@ -35,7 +37,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" }, "overrides": { 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/content-layout.css b/site/src/assets/styles/content-layout.css index ff32df95..ad8be12e 100644 --- a/site/src/assets/styles/content-layout.css +++ b/site/src/assets/styles/content-layout.css @@ -2,13 +2,17 @@ .grid-wrapper { display: grid; gap: 1rem; - grid-template-columns: [content-start] repeat(6, minmax(0, 133px)) [content-end]; + grid-template-columns: + [content-start] repeat(6, minmax(0, 133px)) + [content-end]; } } @media (min-width: 60em) { .grid-wrapper { - grid-template-columns: [content-start] repeat(12, minmax(0, 133px)) [content-end]; + grid-template-columns: + [content-start] repeat(12, minmax(0, 133px)) + [content-end]; } } diff --git a/site/src/assets/styles/fonts.css b/site/src/assets/styles/fonts.css index a96c4155..c2f390dc 100644 --- a/site/src/assets/styles/fonts.css +++ b/site/src/assets/styles/fonts.css @@ -2,6 +2,6 @@ @import url(@fontsource-variable/cabin/index.css); :root { - --body-font-family: 'Cabin Variable', system-ui, sans-serif; - --title-font-family: 'Patua One', serif; + --body-font-family: "Cabin Variable", system-ui, sans-serif; + --title-font-family: "Patua One", serif; } diff --git a/site/src/assets/styles/form-elements.css b/site/src/assets/styles/form-elements.css index c88fff89..3d1b36a1 100644 --- a/site/src/assets/styles/form-elements.css +++ b/site/src/assets/styles/form-elements.css @@ -1,5 +1,12 @@ -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 +22,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..24ac0309 100644 --- a/site/src/components/BreaksList.tsx +++ b/site/src/components/BreaksList.tsx @@ -23,11 +23,10 @@ const formSchema = z.object({ }); /** Reduced object format pertaining to a single SC/requirement */ -interface SingleBreak - extends Omit< - CollectionEntry<"breaks">["data"], - "location" | "process" | "wcag2" | "wcag3" - > { +interface SingleBreak extends Omit< + CollectionEntry<"breaks">["data"], + "location" | "process" | "wcag2" | "wcag3" +> { id: CollectionEntry<"breaks">["id"]; wcag2?: keyof typeof wcag2SuccessCriteria; wcag3?: string; @@ -88,7 +87,7 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { return !!data.wcag2!.find( (c) => c.includes(query) || - caseInsensitiveIncludes(wcag2SuccessCriteria[c], query) + caseInsensitiveIncludes(wcag2SuccessCriteria[c], query), ); return !!data.wcag3!.find((r) => caseInsensitiveIncludes(r, query)); }); @@ -128,7 +127,7 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { 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"]) { @@ -146,7 +145,7 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { arrangement: params.get("a") || undefined, query: params.get("q") || undefined, version: params.get("v") || undefined, - }) + }), ); }; @@ -208,7 +207,7 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => { getSortableWcag(brk)) && (
{ {brk.description.map((description) => (
diff --git a/site/src/components/Carousel.astro b/site/src/components/Carousel.astro index 82bdc2f1..132ad7dc 100644 --- a/site/src/components/Carousel.astro +++ b/site/src/components/Carousel.astro @@ -26,7 +26,7 @@ const collectionMap = { }, products: { label: "Merch", - path: "gift-shop" + path: "gift-shop", }, }; @@ -42,14 +42,14 @@ 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. + */ }
{ @@ -68,19 +68,23 @@ const collectionMap = { {...(i && getMode() === "fixed" && { inert: true })} > - { - /** - * @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}
 { carousels.forEach((el) => { el.querySelector(".out")?.classList.toggle("out"); - + const previousEl = el.querySelector(".in")!; previousEl.classList.toggle("in"); previousEl.classList.toggle("out"); - + const nextEl = previousEl.nextElementSibling || el.firstElementChild; nextEl?.classList.toggle("in"); - + if (getMode() === "fixed") { (previousEl as HTMLElement).inert = true; (nextEl as HTMLElement).inert = false; @@ -119,7 +123,11 @@ const collectionMap = { }, 10000); - \ No newline at end of file + diff --git a/site/src/content/exhibit-categories/glass.md b/site/src/content/exhibit-categories/glass.md index 046e89f8..d6a5958d 100644 --- a/site/src/content/exhibit-categories/glass.md +++ b/site/src/content/exhibit-categories/glass.md @@ -3,12 +3,12 @@ title: Glass breaklocation: Glass Collection breakprocess: collections breaks: -- wcag2: 3.1.5 - description: The Glass collection has a reading level of advanced education with no alternative version. + - wcag2: 3.1.5 + description: The Glass collection has a reading level of advanced education with no alternative version. ---

Welcome to the Shattered Treasures Collection.

Here, you’ll find broken drinking glasses, a green container, heart-shaped ornaments, mirrors, and even fancy wine glasses. Some of these items might have slipped and fallen, others might have cracked over time, but they all have special stories to tell. The heart-shaped ornament once hung proudly in someone's home, while the green container might have held something important. The mirrors used to reflect faces, and the wine glasses were used for happy celebrations, meal times, and in times of sadness. -Even though these objects are broken, they help us imagine the moments they were part of. Picture someone carefully holding a wine glass during a big party, or a person looking into one of these mirrors to fix their hair. These shattered pieces remind us that things can still be beautiful, even when they aren’t whole anymore. What kind of stories do you think these broken treasures would tell if they could talk? \ No newline at end of file +Even though these objects are broken, they help us imagine the moments they were part of. Picture someone carefully holding a wine glass during a big party, or a person looking into one of these mirrors to fix their hair. These shattered pieces remind us that things can still be beautiful, even when they aren’t whole anymore. What kind of stories do you think these broken treasures would tell if they could talk? diff --git a/site/src/content/exhibit-categories/home.md b/site/src/content/exhibit-categories/home.md index d488d4f0..77508613 100644 --- a/site/src/content/exhibit-categories/home.md +++ b/site/src/content/exhibit-categories/home.md @@ -9,4 +9,4 @@ topImageItem: home/wide-bedroom Everyday objects once filled with comfort and warmth now stand broken and decayed. The exhibit features a cracked porch chair, its wooden frame splintered and worn from years of use. Once a place for quiet reflection or friendly conversation, it now sits lifeless, its creaking motions silenced. The peeling paint and sagging seat tell the story of countless moments spent enjoying a peaceful view, now lost to time. Though damaged, the chair still echoes memories of a home that was once filled with life. -The collection also includes a badly-damaged room and a moldering bedroom, each reflecting the decline of spaces once full of care. The room’s walls are cracked, and the ceiling sags from years of neglect, as if weighed down by the past. In the bedroom, a moldy bed sits untouched, the mattress sunken and damp, a sad reminder of restful nights that are now long gone. Dust and decay have taken over, but these spaces still speak of the lives that once filled them. Even in their broken state, the rocking chair, room, and bedroom hint at the warmth and comfort these homes once provided, now preserved only in the fragile remnants left behind. \ No newline at end of file +The collection also includes a badly-damaged room and a moldering bedroom, each reflecting the decline of spaces once full of care. The room’s walls are cracked, and the ceiling sags from years of neglect, as if weighed down by the past. In the bedroom, a moldy bed sits untouched, the mattress sunken and damp, a sad reminder of restful nights that are now long gone. Dust and decay have taken over, but these spaces still speak of the lives that once filled them. Even in their broken state, the rocking chair, room, and bedroom hint at the warmth and comfort these homes once provided, now preserved only in the fragile remnants left behind. diff --git a/site/src/content/exhibit-categories/music.md b/site/src/content/exhibit-categories/music.md index 2f840810..19f6c140 100644 --- a/site/src/content/exhibit-categories/music.md +++ b/site/src/content/exhibit-categories/music.md @@ -6,4 +6,4 @@ title: Music In this special collection, you’ll find cracked vinyl records, an old grand piano with broken keys, a portable cassette player that no longer works, and a record player with a damaged turntable and needle. Each of these items once filled the air with beautiful sounds and music. The vinyl record used to spin around, playing songs for people to enjoy, and the grand piano once played music by experienced players and learners. Even though they are broken now, they remind us of the emotions music can bring. -Imagine someone dancing to the music from the record player or a child pressing the keys of the grand piano to play their favorite song. The cassette player might have been carried around to play music on the go, and the vinyl record once held someone’s favorite songs. Though these items can no longer make music, they help us remember the special moments they were part of. What songs or sounds do you think these broken musical treasures used to play? \ No newline at end of file +Imagine someone dancing to the music from the record player or a child pressing the keys of the grand piano to play their favorite song. The cassette player might have been carried around to play music on the go, and the vinyl record once held someone’s favorite songs. Though these items can no longer make music, they help us remember the special moments they were part of. What songs or sounds do you think these broken musical treasures used to play? diff --git a/site/src/content/exhibit-categories/sports.md b/site/src/content/exhibit-categories/sports.md index ddbb1a82..c119ef63 100644 --- a/site/src/content/exhibit-categories/sports.md +++ b/site/src/content/exhibit-categories/sports.md @@ -6,4 +6,4 @@ title: Sports Here, you’ll see a worn out basketball hoop, an old bicycle with a bent wheel, a deflated and torn football, a cracked skateboard, and a worn-out soccer ball. Each piece of equipment once helped people play, exercise, and have fun. The basketball hoop may have been used for exciting games, while the bicycle probably zoomed down streets or parks. Even though they’re broken now, they remind us of the joy of playing and being active. -Imagine kicking the soccer ball with friends or riding the bicycle on a sunny day. The football was once thrown in a big game, and the skateboard used to glide smoothly along the pavement. Though these items can't be used for sports anymore, they still tell stories of fun and excitement. What do you think happened during the last game or ride they were part of? \ No newline at end of file +Imagine kicking the soccer ball with friends or riding the bicycle on a sunny day. The football was once thrown in a big game, and the skateboard used to glide smoothly along the pavement. Though these items can't be used for sports anymore, they still tell stories of fun and excitement. What do you think happened during the last game or ride they were part of? diff --git a/site/src/content/exhibit-categories/technology.md b/site/src/content/exhibit-categories/technology.md index ac42e944..61a55214 100644 --- a/site/src/content/exhibit-categories/technology.md +++ b/site/src/content/exhibit-categories/technology.md @@ -3,9 +3,9 @@ title: Technology breaklocation: Technology Collection breakprocess: collections breaks: -- wcag2: 1.1.1 - wcag3: Image alternatives available - description: Some of the exhibit images lack alt text. + - wcag2: 1.1.1 + wcag3: Image alternatives available + description: Some of the exhibit images lack alt text. ---

Welcome to the Broken Technology Collection!

diff --git a/site/src/content/exhibits/containers/vintage-bottles.md b/site/src/content/exhibits/containers/vintage-bottles.md index fbab489f..0225441d 100644 --- a/site/src/content/exhibits/containers/vintage-bottles.md +++ b/site/src/content/exhibits/containers/vintage-bottles.md @@ -10,4 +10,4 @@ This old wooden crate, once used to carry bottles full of beer, now holds a coll The crate, likely made from rough-hewn wood, was once sturdy enough to transport heavy glass bottles full of beer. Over the years, the wood has worn down, and the bottles inside have been shattered beyond repair. The white paint sprayed over everything creates a striking contrast, highlighting the rough texture of the wood and the sharp edges of the glass. It’s as if the paint has preserved the moment when the bottles broke, capturing the sharp sound of shattering glass and the clatter of bottles falling. -Though broken, this crate of beer bottles speaks to the fragility of everyday objects. Beer bottles, which are so familiar and common, are easily taken for granted, but here we see them in a different light. The once smooth and shiny glass is now a jagged puzzle of broken pieces, while the crate that held them is scarred and marked by time. The spray of white paint adds an eerie layer, transforming these everyday items into a frozen reminder of the past. \ No newline at end of file +Though broken, this crate of beer bottles speaks to the fragility of everyday objects. Beer bottles, which are so familiar and common, are easily taken for granted, but here we see them in a different light. The once smooth and shiny glass is now a jagged puzzle of broken pieces, while the crate that held them is scarred and marked by time. The spray of white paint adds an eerie layer, transforming these everyday items into a frozen reminder of the past. diff --git a/site/src/content/exhibits/dishes/blue-dish.md b/site/src/content/exhibits/dishes/blue-dish.md index 7e8acf1d..ad7f48b2 100644 --- a/site/src/content/exhibits/dishes/blue-dish.md +++ b/site/src/content/exhibits/dishes/blue-dish.md @@ -9,7 +9,7 @@ level of education: "upper secondary education" Welcome to the Broken Ceramic Dishes exhibit. - Fragments of blue and earthen pottery offer glimpses into the past. These dishes, once part of everyday life, are now cracked and chipped, yet they retain their charm and beauty. The blue ceramic plates are adorned with delicate patterns, likely created through underglazing, a process where the designs are painted onto the surface before the final firing. The pottery dishes, with their warm brown and red tones, reflect the natural colors of the clay from which they were made. Though incomplete, these broken pieces still speak to the artistry and functionality they once possessed. +Fragments of blue and earthen pottery offer glimpses into the past. These dishes, once part of everyday life, are now cracked and chipped, yet they retain their charm and beauty. The blue ceramic plates are adorned with delicate patterns, likely created through underglazing, a process where the designs are painted onto the surface before the final firing. The pottery dishes, with their warm brown and red tones, reflect the natural colors of the clay from which they were made. Though incomplete, these broken pieces still speak to the artistry and functionality they once possessed. The blue ceramic dishes were likely crafted using a method called slipcasting, where liquid clay, or slip, is poured into a mold to form the shape of the dish. Afterward, they were fired in a kiln at high temperatures, making them durable and vibrant. The intricate blue designs are made with cobalt oxide, giving them their striking color. Many of the pottery dishes, in contrast, were made using wheel-throwing, a technique that allowed the potter to shape the clay by hand on a spinning wheel. The fractures in these dishes reveal the fine craftsmanship that went into creating them, even if time and use have taken their toll. diff --git a/site/src/content/exhibits/glass/green-container.md b/site/src/content/exhibits/glass/green-container.md index 01da544f..f81bef1b 100644 --- a/site/src/content/exhibits/glass/green-container.md +++ b/site/src/content/exhibits/glass/green-container.md @@ -12,4 +12,4 @@ The remnants of this once-intact vessel are displayed in fragments, revealing bo The light-green tint of the glass suggests the presence of iron impurities in the sand used to create it, a common feature in ancient and early modern glassmaking. This type of glass, often referred to as forest glass, was prized for its slight coloration, which added aesthetic value without diminishing its practical use. The process of crafting such a container would have involved skilled glassblowers carefully shaping molten glass into form, followed by a cooling process in which imperfections, like air bubbles or minor discolorations, could manifest. Despite these minor flaws, the container would have been a functional, elegant piece, now forever altered by breakage. -Though shattered, the container now occupies a different space in our understanding of utility and aesthetics. No longer a functional object, it becomes a vessel of history and memory, with each crack and missing piece adding to its narrative. The broken container stands as a symbol of fragility—both in the physical sense and in the impermanence of the objects we create and rely on. It invites reflection on how the beauty of an object can endure even after its original purpose has been lost, transforming destruction into something contemplative, if not entirely whole. \ No newline at end of file +Though shattered, the container now occupies a different space in our understanding of utility and aesthetics. No longer a functional object, it becomes a vessel of history and memory, with each crack and missing piece adding to its narrative. The broken container stands as a symbol of fragility—both in the physical sense and in the impermanence of the objects we create and rely on. It invites reflection on how the beauty of an object can endure even after its original purpose has been lost, transforming destruction into something contemplative, if not entirely whole. diff --git a/site/src/content/exhibits/glass/mirror.md b/site/src/content/exhibits/glass/mirror.md index 332906bd..02e60c52 100644 --- a/site/src/content/exhibits/glass/mirror.md +++ b/site/src/content/exhibits/glass/mirror.md @@ -12,4 +12,4 @@ Shattered reflections invite contemplation of both beauty and distortion. These Historically, mirrors have been both functional objects and symbols of introspection, used for personal grooming and as tools of self-examination. The process of making them, through silvering glass—where a thin layer of reflective metal, often silver or mercury, is applied to the back of a glass pane—was an art in itself. The craftsmanship required to create a flawless, reflective surface was delicate and precise, making the eventual breakage of these mirrors all the more poignant. In their shattered state, the mirrors lose their practical use but gain a haunting allure, each crack and shard telling a story of sudden impact or slow decay. -The broken mirrors also carry with them cultural symbolism, evoking ancient superstitions that link a shattered mirror to bad luck or the fragmentation of the self. In literature and art, broken mirrors have often represented the fragility of identity or the distortion of reality. Here, in this exhibit, they become more than just damaged objects; they are vessels of both reflection and rupture. They challenge us to reconsider how we see ourselves and the world, asking whether true clarity is ever really possible—or whether, like these mirrors, our perceptions are always shaped by fractures and imperfections. \ No newline at end of file +The broken mirrors also carry with them cultural symbolism, evoking ancient superstitions that link a shattered mirror to bad luck or the fragmentation of the self. In literature and art, broken mirrors have often represented the fragility of identity or the distortion of reality. Here, in this exhibit, they become more than just damaged objects; they are vessels of both reflection and rupture. They challenge us to reconsider how we see ourselves and the world, asking whether true clarity is ever really possible—or whether, like these mirrors, our perceptions are always shaped by fractures and imperfections. diff --git a/site/src/content/exhibits/glass/wine-glass-with-rose.md b/site/src/content/exhibits/glass/wine-glass-with-rose.md index aefc30f0..0c537f23 100644 --- a/site/src/content/exhibits/glass/wine-glass-with-rose.md +++ b/site/src/content/exhibits/glass/wine-glass-with-rose.md @@ -13,11 +13,3 @@ The delicate interplay between fragility and resilience is captured through the The glass shards, with their sharp edges and reflective surfaces, serve as both barriers and frames for the roses, whose withered petals cling to life amidst the broken fragments. The tension between these two elements—hard, transparent glass and soft, organic roses—creates a visual and emotional dissonance. The roses, once vibrant and alive, symbolize the fleeting beauty of life, while the broken wine glasses, once used to celebrate moments of joy, now represent the inevitability of time’s wear and tear. The juxtaposition of these materials forces the viewer to confront the delicate balance between celebration and decay, as well as the beauty that can emerge from the act of breaking. In these pieces, the broken wine glasses become more than shattered objects; they are transformed into vessels of artistic expression. The roses, with their fading petals, take on new meaning when juxtaposed against the broken glass—symbols of beauty in decline, yet preserved in art. These works invite viewers to reconsider the value of imperfection, to find beauty in what is broken, and to embrace the inevitability of change. By marrying the hardness of glass with the softness of roses, these pieces challenge traditional notions of art, offering instead a reminder that even in the midst of destruction, there can be grace, and even in the broken, there can be rebirth. - - - - - - - - diff --git a/site/src/content/exhibits/home/narrow-room.md b/site/src/content/exhibits/home/narrow-room.md index 079dc198..5b6a23e3 100644 --- a/site/src/content/exhibits/home/narrow-room.md +++ b/site/src/content/exhibits/home/narrow-room.md @@ -13,7 +13,7 @@ breaks: The Narrow Room exhibit has non-English words that are not part of the vernacular marked up with an incorrect language code. It also includes non-English words that are part of the vernacular marked up as being in a foreign language. --- -Welcome to the Narrow Room exhibit, a haunting glimpse of a room that has long since been abandoned. The room’s window, once a portal to the outside world, now stands in disrepair. Of the four panes, one is shattered, letting in cold drafts and dust. *Déjà vu* settles in as you gaze at the crumbling frame, its once-bright paint now peeling away in long, curled strips, revealing layers of neglect. The rotten wood barely holds together, fragile and splintered after years of exposure to the elements. Through the broken pane, shards of glass lie on the floor, hinting at an ausgestorben atmosphere that has settled over the space. +Welcome to the Narrow Room exhibit, a haunting glimpse of a room that has long since been abandoned. The room’s window, once a portal to the outside world, now stands in disrepair. Of the four panes, one is shattered, letting in cold drafts and dust. _Déjà vu_ settles in as you gaze at the crumbling frame, its once-bright paint now peeling away in long, curled strips, revealing layers of neglect. The rotten wood barely holds together, fragile and splintered after years of exposure to the elements. Through the broken pane, shards of glass lie on the floor, hinting at an ausgestorben atmosphere that has settled over the space. The bare plaster walls, once possibly filled with art or memories, are now cracked and crumbling. Large sections of paint have peeled away, leaving uneven, discolored patches where the plaster has broken through. The cracks snake across the walls, as though the room itself is slowly being torn apart by time. The textures of decay seem almost trompe-l'œil, as if the disintegration of the room is an illusion—yet it is all too real. The walls speak silently of vergangenheit, the past slipping away as the once-lived-in space turns into a forgotten relic. @@ -23,4 +23,4 @@ In the center of the room sits an old brass-framed bed, its elegant design now s The bric-à-brac of this forgotten room hints at a life left unfinished. The scattered books and papers, now abandoned, offer a glimpse of what might have been a space for learning, dreaming, or réflexion. Each object tells a silent story, one of use and eventual neglect, as the room transforms from a place of purpose into a ruine of memories. The books on the bed seem to have fallen haphazardly, suggesting a last moment of chaos or hurried departure. The entire scene radiates a feeling of fin de siècle, where the elegance of the past meets the slow, inevitable decay of time. -Stepping back, the room’s atmosphere is both bizarre and melancholic. It speaks to the fragility of the everyday objects and the spaces we inhabit, which can quickly fall into disrepair when left unattended. The broken window, the cracked walls, and the cobweb-covered bed all remind us that time is an unstoppable force. In this run-down bedroom, zeitgeist no longer exists—it has become a forgotten monument to a life left behind, a space where the past and present have ceased to intersect. \ No newline at end of file +Stepping back, the room’s atmosphere is both bizarre and melancholic. It speaks to the fragility of the everyday objects and the spaces we inhabit, which can quickly fall into disrepair when left unattended. The broken window, the cracked walls, and the cobweb-covered bed all remind us that time is an unstoppable force. In this run-down bedroom, zeitgeist no longer exists—it has become a forgotten monument to a life left behind, a space where the past and present have ceased to intersect. diff --git a/site/src/content/exhibits/home/porch-chair.md b/site/src/content/exhibits/home/porch-chair.md index ad54eb9f..de4e1a29 100644 --- a/site/src/content/exhibits/home/porch-chair.md +++ b/site/src/content/exhibits/home/porch-chair.md @@ -23,4 +23,4 @@ The seat, once a place of rest, is now shattered and broken, no longer able to s This chair is a metaphor for neglect, its crumbling frame representing how easily something once cherished can fall into disrepair. Splattered with red paint, the chair looks as though it’s been marked by time, each drip of paint a reminder of its past life, perhaps once repainted to cover its flaws, only for those imperfections to resurface with a vengeance. Like an old man with a hunch, the chair bends and creaks, unable to bear the weight of its own history. -As you stand before this dilapidated chair, it’s clear that it’s more than just a piece of furniture—it’s a testament to endurance, even in a broken state. Though it can no longer serve its purpose, the chair holds a story within its splintered wood, its broken slats, and its peeling paint. It’s a reminder that even in decay, there is beauty in the history that remains etched into its surface, like footprints in the sand, washed away but never forgotten. \ No newline at end of file +As you stand before this dilapidated chair, it’s clear that it’s more than just a piece of furniture—it’s a testament to endurance, even in a broken state. Though it can no longer serve its purpose, the chair holds a story within its splintered wood, its broken slats, and its peeling paint. It’s a reminder that even in decay, there is beauty in the history that remains etched into its surface, like footprints in the sand, washed away but never forgotten. diff --git a/site/src/content/exhibits/home/wide-bedroom.md b/site/src/content/exhibits/home/wide-bedroom.md index 52f42eb0..6f0b03ae 100644 --- a/site/src/content/exhibits/home/wide-bedroom.md +++ b/site/src/content/exhibits/home/wide-bedroom.md @@ -28,4 +28,4 @@ As for the owners, who knows what they were thinking? Clearly, maintaining a liv And then there’s you, standing here, soaking it all in like it’s some kind of art piece. Maybe you thought you’d find something deep and meaningful in all this mess, some hidden story behind the neglect. Or maybe you’re just curious about how far a place can fall apart. Either way, there’s not much to see here except the aftermath of laziness and indifference. But if this is what you came for, then I guess you’re getting your money’s worth. -Enjoy the dust. \ No newline at end of file +Enjoy the dust. diff --git a/site/src/content/exhibits/music/cassette-player.md b/site/src/content/exhibits/music/cassette-player.md index 8469e66c..50e19dd6 100644 --- a/site/src/content/exhibits/music/cassette-player.md +++ b/site/src/content/exhibits/music/cassette-player.md @@ -10,4 +10,4 @@ Welcome to the Broken Portable Cassette Player exhibit! This small machine was once used to play music and listen to radio stations on the go. People would put a cassette tape inside, press play, and hear their favorite songs through the speakers. But now, the buttons are stuck, the antenna is bent, and the cassette door won’t close properly. Even though it’s broken, you can still see where people used to press buttons to play, pause, and rewind their music. -The portable cassette player and radio were really popular before smartphones and digital music. It was something you could carry around to enjoy tunes or listen to news on the radio. Now, its wires are worn out, and the sound doesn’t work anymore. Even though it can't play music like it used to, it reminds us of how people once enjoyed their favorite songs and stayed connected to the world. Now, it tells a new story about how things change, but they still hold memories of the past. \ No newline at end of file +The portable cassette player and radio were really popular before smartphones and digital music. It was something you could carry around to enjoy tunes or listen to news on the radio. Now, its wires are worn out, and the sound doesn’t work anymore. Even though it can't play music like it used to, it reminds us of how people once enjoyed their favorite songs and stayed connected to the world. Now, it tells a new story about how things change, but they still hold memories of the past. diff --git a/site/src/content/exhibits/sports/bicycle.md b/site/src/content/exhibits/sports/bicycle.md index a30bf504..33967bf5 100644 --- a/site/src/content/exhibits/sports/bicycle.md +++ b/site/src/content/exhibits/sports/bicycle.md @@ -10,4 +10,4 @@ Welcome to the Broken Bicycle exhibit This bicycle, once used for joyful rides around the neighborhood or through the park, now sits with a bent back wheel and rusty frame. The handlebars are still in place, but the pedals are worn down, and the chain hangs loosely, no longer able to turn the wheels. The back wheel is badly bent, making it impossible for the bike to roll smoothly anymore. Though it can’t be ridden, you can still imagine the fun it brought to its rider, speeding down hills and cruising along streets. -Bicycles are often symbols of freedom and adventure, giving people the chance to explore new places and enjoy the outdoors. This broken bike shows the marks of many rides, with scratches on its frame and worn-out tires. The bent back wheel likely came from a rough fall or accident, leaving the bike unusable. Even though it’s broken now, this bicycle reminds us of the excitement and energy it once gave to someone, helping them feel the wind in their hair as they pedaled along. \ No newline at end of file +Bicycles are often symbols of freedom and adventure, giving people the chance to explore new places and enjoy the outdoors. This broken bike shows the marks of many rides, with scratches on its frame and worn-out tires. The bent back wheel likely came from a rough fall or accident, leaving the bike unusable. Even though it’s broken now, this bicycle reminds us of the excitement and energy it once gave to someone, helping them feel the wind in their hair as they pedaled along. diff --git a/site/src/content/exhibits/technology/compact-disc.md b/site/src/content/exhibits/technology/compact-disc.md index 15370146..d65e2d12 100644 --- a/site/src/content/exhibits/technology/compact-disc.md +++ b/site/src/content/exhibits/technology/compact-disc.md @@ -9,7 +9,7 @@ level of education: "upper secondary education" Welcome to the Broken CDs exhibit. - Here, you will find once-pristine discs now lying scratched, cracked, and shattered. These CDs, which once held music, software, or treasured memories, now serve as relics of a bygone era in digital media. The reflective surfaces, once flawless and capable of playing crystal-clear audio or data, are now marred by deep scratches and fractures, making them unreadable. Light dances across their damaged surfaces, revealing rainbow patterns amidst the scars, but their original purpose is lost. These broken CDs remind us of the rapid advancement of technology and how quickly even the most cutting-edge media can become obsolete. +Here, you will find once-pristine discs now lying scratched, cracked, and shattered. These CDs, which once held music, software, or treasured memories, now serve as relics of a bygone era in digital media. The reflective surfaces, once flawless and capable of playing crystal-clear audio or data, are now marred by deep scratches and fractures, making them unreadable. Light dances across their damaged surfaces, revealing rainbow patterns amidst the scars, but their original purpose is lost. These broken CDs remind us of the rapid advancement of technology and how quickly even the most cutting-edge media can become obsolete. Compact Discs, or CDs, were designed to store vast amounts of information by encoding data into tiny pits on the surface of the disc, which a laser would read. Even the slightest scratch could disrupt the laser’s ability to read the information correctly, leading to skips in music or corrupted files. Now, these once-reliable storage devices are cracked or bent, their data inaccessible. Some of the CDs in this collection are split in half, their reflective coating peeling away, exposing the fragile plastic layers beneath. They serve as a reminder that even the most durable-looking technology has its limits. diff --git a/site/src/content/exhibits/technology/phone.md b/site/src/content/exhibits/technology/phone.md index cbf2dc02..9d9b8aea 100644 --- a/site/src/content/exhibits/technology/phone.md +++ b/site/src/content/exhibits/technology/phone.md @@ -7,7 +7,7 @@ skipAlt: true level of education: "upper secondary education" --- -Welcome to the Broken Smartphone exhibit. +Welcome to the Broken Smartphone exhibit. Here, a once sleek and powerful device now lies damaged and unusable. The smartphone’s screen is badly cracked, with jagged lines spider-webbing across the glass, distorting the once-clear display. The touch functions no longer respond, and behind the fractured screen, the glow of the pixels flickers faintly, hinting at the advanced technology beneath the shattered surface. This broken phone, once a hub of communication, entertainment, and connection, is now a silent reminder of how easily our most relied-upon devices can be rendered useless. diff --git a/site/src/content/exhibits/technology/television.md b/site/src/content/exhibits/technology/television.md index 477937a9..2fa88322 100644 --- a/site/src/content/exhibits/technology/television.md +++ b/site/src/content/exhibits/technology/television.md @@ -12,4 +12,4 @@ This once-iconic piece of technology now stands stripped of its former purpose. CRT televisions were the centerpiece of living rooms for decades, their bulky design housing a complex system of vacuum tubes, electron guns, and a phosphorescent screen that brought moving pictures to life. This model, now broken and missing key parts, once emitted the familiar hum of electrical currents and the warm glow of its curved screen. Its absence of controls highlights the era before remote controls became commonplace, when users had to physically interact with the TV to navigate channels or adjust the picture. Now, with the screen and controls gone, this broken television serves as a relic of a time when the relationship between viewers and technology was more tactile and mechanical. -The missing screen and controls symbolize not only the decay of the television itself but also the broader shift in how we consume media. Today, flat screens, streaming services, and digital interfaces have replaced the clunky, analog world of CRT televisions. This broken TV, once a household staple, stands as a reminder of the rapid pace of technological change and the impermanence of even the most transformative inventions. Though incomplete, it holds the echoes of a time when gathering around the TV was a shared experience, offering a nostalgic glimpse into a past now overshadowed by sleek, modern alternatives. \ No newline at end of file +The missing screen and controls symbolize not only the decay of the television itself but also the broader shift in how we consume media. Today, flat screens, streaming services, and digital interfaces have replaced the clunky, analog world of CRT televisions. This broken TV, once a household staple, stands as a reminder of the rapid pace of technological change and the impermanence of even the most transformative inventions. Though incomplete, it holds the echoes of a time when gathering around the TV was a shared experience, offering a nostalgic glimpse into a past now overshadowed by sleek, modern alternatives. diff --git a/site/src/content/exhibits/toys-games/ornament.md b/site/src/content/exhibits/toys-games/ornament.md index 430634f8..f4eb854e 100644 --- a/site/src/content/exhibits/toys-games/ornament.md +++ b/site/src/content/exhibits/toys-games/ornament.md @@ -10,4 +10,4 @@ Welcome to the Broken Ornament exhibit! This shiny red ornament was once a beautiful decoration on someone’s Christmas tree. Now, it is cracked and missing pieces, with sharp edges where the glass has broken. The bright red color still sparkles in the light, but the ornament can no longer hang on the tree. Even though it’s damaged, it reminds us of the special moments and joy it brought during the holiday season. -Ornaments like this one are used to make Christmas trees look festive and magical. This red ornament might have been carefully placed on a tree each year, bringing cheer to the home. Now, with its cracks and missing parts, it tells the story of past celebrations and memories of Christmases long ago. Even though it’s broken, it still holds a little piece of holiday spirit. \ No newline at end of file +Ornaments like this one are used to make Christmas trees look festive and magical. This red ornament might have been carefully placed on a tree each year, bringing cheer to the home. Now, with its cracks and missing parts, it tells the story of past celebrations and memories of Christmases long ago. Even though it’s broken, it still holds a little piece of holiday spirit. diff --git a/site/src/content/processes.json b/site/src/content/processes.json index 510272c4..34a988ab 100644 --- a/site/src/content/processes.json +++ b/site/src/content/processes.json @@ -36,4 +36,4 @@ "id": "volunteering", "title": "Filling out the volunteer form" } -] \ No newline at end of file +] diff --git a/site/src/content/sections.json b/site/src/content/sections.json index ba5cceef..16ca5eb8 100644 --- a/site/src/content/sections.json +++ b/site/src/content/sections.json @@ -95,4 +95,4 @@ "path": "volunteer/", "description": "This section includes the volunteer sign up process pages, demonstrating a small number of task completion and form-based failures." } -] \ No newline at end of file +] diff --git a/site/src/layouts/BaseLayout.astro b/site/src/layouts/BaseLayout.astro index df402242..175ccc74 100644 --- a/site/src/layouts/BaseLayout.astro +++ b/site/src/layouts/BaseLayout.astro @@ -12,12 +12,16 @@ interface Props { const { title } = Astro.props; --- - + - + {title} - The Museum of Broken Things diff --git a/site/src/lib/client/cart.ts b/site/src/lib/client/cart.ts index f12ec1f4..ea428e94 100644 --- a/site/src/lib/client/cart.ts +++ b/site/src/lib/client/cart.ts @@ -46,7 +46,7 @@ export function handleCartRemovals() { export function renderCartInventory( cart: Store["cart"], tableId: string, - includeRemove: boolean + includeRemove: boolean, ) { const tbodyEl = document.getElementById(tableId) as HTMLTableSectionElement; if (!tbodyEl) throw new Error("table not found"); diff --git a/site/src/lib/client/form.ts b/site/src/lib/client/form.ts index c8f9a8ca..27760100 100644 --- a/site/src/lib/client/form.ts +++ b/site/src/lib/client/form.ts @@ -4,7 +4,7 @@ import type { ZodObject, ZodRawShape } from "astro/zod"; export function disableInputs(form: HTMLFormElement) { const inputSelectors = ["input", "select", "button"] as const; inputSelectors.forEach((selector) => - form.querySelectorAll(selector).forEach((el) => (el.disabled = true)) + form.querySelectorAll(selector).forEach((el) => (el.disabled = true)), ); } @@ -15,7 +15,7 @@ export function disableInputs(form: HTMLFormElement) { */ export function validateInputs( form: HTMLFormElement, - schema: ZodObject + schema: ZodObject, ) { const entryMap: Record = {}; const formData = new FormData(form); @@ -28,7 +28,9 @@ export function validateInputs( const result = schema.safeParse(entryMap); if (!result.success) { for (const { path } of result.error.issues) - (form.elements[path.join(".")] as HTMLInputElement).classList.add("error"); + (form.elements[path.join(".")] as HTMLInputElement).classList.add( + "error", + ); } return result; } diff --git a/site/src/lib/client/store.ts b/site/src/lib/client/store.ts index 9981f612..22adabd5 100644 --- a/site/src/lib/client/store.ts +++ b/site/src/lib/client/store.ts @@ -16,16 +16,19 @@ export const storeSchema = z.object({ name: z.string().min(1), quantity: z.number().min(1), price: z.number().min(0.01), - }) + }), ) .default({}), favorites: z.record(z.string(), z.boolean()).default({}), hasDismissedCookieBanner: z.boolean().default(false), loggedInAt: z.string().datetime().nullable().default(null), - registration: z.object({ - email: z.string().email(), - password: z.string().min(1), - }).nullable().default(null), + registration: z + .object({ + email: z.string().email(), + password: z.string().min(1), + }) + .nullable() + .default(null), }); export type Store = z.infer; type StoreKey = keyof Store; @@ -33,7 +36,7 @@ type StoreKey = keyof Store; const storeTarget = new EventTarget(); type StoreHandler = ( value: Store[K], - previousValue: Store[K] | undefined + previousValue: Store[K] | undefined, ) => void; /** Clears all client-side-stored values. To be called ONLY from top-level index. */ @@ -61,7 +64,7 @@ export function persist(key: K, value: Store[K]) { storage.setItem(storageKey, JSON.stringify(store)); storeTarget.dispatchEvent( - new CustomEvent(key, { detail: [value, previousValue] }) + new CustomEvent(key, { detail: [value, previousValue] }), ); } @@ -75,13 +78,13 @@ export function persist(key: K, value: Store[K]) { export function onStoreChange( key: K, handler: StoreHandler, - shouldRunImmediately = true + shouldRunImmediately = true, ) { storeTarget.addEventListener( key, (event: CustomEvent<[Store[K], Store[K]]>) => { handler(event.detail[0], event.detail[1]); - } + }, ); if (shouldRunImmediately) handler(store[key], undefined); } diff --git a/site/src/lib/client/toast.ts b/site/src/lib/client/toast.ts index fbee5411..a1ff2de9 100644 --- a/site/src/lib/client/toast.ts +++ b/site/src/lib/client/toast.ts @@ -76,7 +76,7 @@ export async function showToast( type, withDismiss = true, ...actionOptions - }: ToastOptions | ToastOptionsWithAction + }: ToastOptions | ToastOptionsWithAction, ) { const isBroken = getMode() === "broken"; const toastEl = document.getElementById("toast")!; @@ -96,13 +96,13 @@ export async function showToast( } const templateEl = document.getElementById( - `toast-icon-${type}` + `toast-icon-${type}`, ) as HTMLTemplateElement; if (!templateEl) throw new Error(`Template element not found for type ${type}`); contentEl.insertBefore( templateEl.content.cloneNode(true), - contentEl.firstChild + contentEl.firstChild, ); if ("actionLabel" in actionOptions) { diff --git a/site/src/lib/image.ts b/site/src/lib/image.ts index 195efd91..15d66dbc 100644 --- a/site/src/lib/image.ts +++ b/site/src/lib/image.ts @@ -9,7 +9,7 @@ import type { ImageFunction, z } from "astro:content"; */ export async function getDownsizedSrc( image: z.infer>, - width: number + width: number, ) { const result = await getImage({ src: image, diff --git a/site/src/lib/mode.ts b/site/src/lib/mode.ts index c4ebb8b8..7828656e 100644 --- a/site/src/lib/mode.ts +++ b/site/src/lib/mode.ts @@ -7,5 +7,4 @@ export type Mode = "broken" | "fixed"; /** Gets broken or fixed mode, both at build time and client-side */ export function getMode(): Mode { return import.meta.env.PUBLIC_FIXED ? "fixed" : "broken"; -}; - +} diff --git a/site/src/lib/nav-links.ts b/site/src/lib/nav-links.ts index a83095ee..0cb98d59 100644 --- a/site/src/lib/nav-links.ts +++ b/site/src/lib/nav-links.ts @@ -41,7 +41,7 @@ export const defaultNavLinks: NavTree = [ }, { href: "volunteer/", name: "Volunteer" }, { href: "about/", name: "About" }, - { href: "help/", name: "Help" }, + { href: "help/", name: "Help" }, ]; function prependHref(navLink: NavLink) { @@ -60,7 +60,7 @@ export const checkIsNavLink = (entry: NavLink | NavParent): entry is NavLink => /** Utility function to recursively filter links (not parents) in a NavTree structure. */ export const filterNavTreeLinks = ( navTree: NavTree, - fn: (entry: NavLink) => boolean + fn: (entry: NavLink) => boolean, ) => navTree .filter((entry) => ("children" in entry ? true : fn(entry))) @@ -70,5 +70,5 @@ export const filterNavTreeLinks = ( ...entry, children: entry.children.filter(fn), } - : entry + : entry, ); diff --git a/site/src/lib/util.ts b/site/src/lib/util.ts index 23b10388..aa9ddd6e 100644 --- a/site/src/lib/util.ts +++ b/site/src/lib/util.ts @@ -1,5 +1,5 @@ /** Exposes matches of a global regular expression as an iterable. */ export function* regExpMatchGenerator(regExp: RegExp, content: string) { let match: RegExpExecArray | null; - while (match = regExp.exec(content)) yield match; + while ((match = regExp.exec(content))) yield match; } diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index 2b74b4dd..3519c5cc 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -9,7 +9,7 @@ const breakProcessesMap = (await getCollection("breakProcesses")).reduce( map[process.id] = process; return map; }, - {} as Record> + {} as Record>, ); --- @@ -22,25 +22,30 @@ const breakProcessesMap = (await getCollection("breakProcesses")).reduce( failures, for teaching and assessment purposes.

Site Behavior

-

This site is an example only. Do not enter real information!

+

+ This site is an example only. Do not enter real information! +

  • The contents are made up
  • The site is static; no data is retained by a server
  • No real shipping address or payment processing occurs
  • - Registration and sign-in is not processed by a server, - but it does function locally -
    • - i.e., whatever email and password you most recently specified during registration - will then work on the Sign In page -
    -
    • -
  • - No cookies are stored, despite what the home page might suggest + Registration and sign-in is not processed by a server, but it does function locally +
      +
    • + i.e., whatever email and password you most recently specified during + registration will then work on the Sign In page +
      • +
    • +
  • No cookies are stored, despite what the home page might suggest
  • - Local storage is used for simulated persistence - (e.g., for sign-in and the gift shop cart) + Local storage is used for simulated persistence (e.g., for sign-in and + the gift shop cart)

@@ -52,12 +57,12 @@ const breakProcessesMap = (await getCollection("breakProcesses")).reduce(

- { /* Hide summary for built version at the moment; show in dev for confirming content */ } + { + /* Hide summary for built version at the moment; show in dev for confirming content */ + }

Acknowledgment

- The Museum of Broken Things was created by the W3C Accessibility Guidelines Working Group and Accessible Community. + The Museum of Broken Things was created by the W3C Accessibility Guidelines Working Group and Accessible Community.

Individual Contributors

@@ -85,7 +97,7 @@ const breakProcessesMap = (await getCollection("breakProcesses")).reduce(
  • Alastair Campbell
  • Asher Kolieboi
  • Ellen Liebert
    • -
  • Brian Montgomery
    • +
  • Brian Montgomery
  • Matt Russell
  • Kevin White
    • @@ -95,7 +107,9 @@ const breakProcessesMap = (await getCollection("breakProcesses")).reduce(

    License

    This repository is licensed under the - Apache License, version 2.0. + Apache License, version 2.0.

    @@ -103,9 +117,11 @@ const breakProcessesMap = (await getCollection("breakProcesses")).reduce(