From 6e63c1e0df61935a95012af24f03adf72eba476b Mon Sep 17 00:00:00 2001 From: Alexander Sullivan Date: Sat, 3 Jan 2026 22:40:36 -0500 Subject: [PATCH] maybe --- docs/architecture/app-directory.md | 6 ++-- docs/architecture/components/avatar.md | 24 +++++++------ .../components/cookie-snackbar.md | 15 ++++---- docs/architecture/components/navbar.md | 36 ++++++++----------- docs/architecture/components/stars.md | 26 +++++--------- package-lock.json | 32 ++++++++--------- package.json | 2 +- 7 files changed, 65 insertions(+), 76 deletions(-) diff --git a/docs/architecture/app-directory.md b/docs/architecture/app-directory.md index b8626df..abedc0b 100644 --- a/docs/architecture/app-directory.md +++ b/docs/architecture/app-directory.md @@ -138,7 +138,7 @@ export default function Home() { }, []); return ( - + @@ -251,13 +251,15 @@ import { CircularProgress } from '@mui/material'; export default function Loading() { return ( -
+
); } ``` +The container uses inline styles with flexbox centering: `display: 'flex'`, `justifyContent: 'center'`, and `padding: '2rem'`. + ## 404 Not Found Location: [`src/app/not-found.tsx`](../../src/app/not-found.tsx) diff --git a/docs/architecture/components/avatar.md b/docs/architecture/components/avatar.md index d442f8f..7382d11 100644 --- a/docs/architecture/components/avatar.md +++ b/docs/architecture/components/avatar.md @@ -179,17 +179,19 @@ useEffect(() => { ### Accessibility -```tsx - - Alexander Sullivan profile picture - -``` +The avatar container includes proper accessibility attributes: + +- `data-testid='profile_pic'` - Testing identifier +- `aria-label='Profile picture'` - Screen reader label +- `role='img'` - Semantic role for assistive technologies +- `onMouseEnter={debounceHover}` - Hover interaction handler +- `sx` prop with `cursor: 'pointer'` to indicate interactivity + +The nested `Image` component includes: + +- `alt='Alexander Sullivan profile picture'` - Descriptive alt text +- `width={200}` and `height={200}` - Explicit dimensions +- `priority` - Next.js optimization for above-the-fold content ## Component Interaction diff --git a/docs/architecture/components/cookie-snackbar.md b/docs/architecture/components/cookie-snackbar.md index 7f4adc2..c434cc4 100644 --- a/docs/architecture/components/cookie-snackbar.md +++ b/docs/architecture/components/cookie-snackbar.md @@ -177,15 +177,14 @@ To customize the cookie snackbar: 4. **Severity:** Change `severity='info'` to `success`, `warning`, or `error` 5. **Position:** Add `anchorOrigin` prop to Snackbar for positioning -**Example Custom Position:** +**Custom Position Configuration:** -```tsx - -``` +The `anchorOrigin` prop accepts an object with two properties: + +- `vertical`: Position on vertical axis (`'top'`, `'bottom'`) +- `horizontal`: Position on horizontal axis (`'left'`, `'center'`, `'right'`) + +Example: To center the snackbar at the bottom, set `anchorOrigin` to `vertical: 'bottom'` and `horizontal: 'center'`. ## Related Documentation diff --git a/docs/architecture/components/navbar.md b/docs/architecture/components/navbar.md index 38af186..f7a1f35 100644 --- a/docs/architecture/components/navbar.md +++ b/docs/architecture/components/navbar.md @@ -61,28 +61,22 @@ logAnalyticsEvent('navbar_home', { ### 3. Responsive Design -Built with Material-UI AppBar and Toolbar: +Built with Material-UI AppBar and Toolbar components: -```typescript - - - {/* Navigation items */} - - -``` +**AppBar Styling:** + +- `backgroundColor: '#131518'` - Dark background matching site theme +- `transition: 'all 0.5s ease-in-out'` - Smooth transitions for state changes + +**Toolbar Styling:** + +- `fontSize: '1.25rem'` - Larger text for better readability +- `height: '2rem'` - Compact height for minimal header footprint +- `justifyContent: 'space-between'` - Distributes navigation items evenly +- `transition: 'all 0.5s ease-in-out'` - Smooth transitions +- `zIndex: 10` - Ensures navbar stays above other content + +Both components use the MUI `sx` prop for styling with these properties. ### 4. Path-aware Behavior diff --git a/docs/architecture/components/stars.md b/docs/architecture/components/stars.md index a9568df..e6f1869 100644 --- a/docs/architecture/components/stars.md +++ b/docs/architecture/components/stars.md @@ -70,16 +70,12 @@ Each star has: ### 3. Twinkle Animation -Stars twinkle using CSS animations: +Stars twinkle using CSS animations applied through the `sx` prop. Each star receives: -```typescript -sx={{ - animation: `twinkle ${star.animationDuration} infinite`, - animationDelay: star.animationDelay, -}}; -``` +- **animation:** `twinkle` with dynamic duration (using template literal with `star.animationDuration`) set to infinite +- **animationDelay:** Random delay from `star.animationDelay` for staggered effect -The `twinkle` animation should be defined in global styles: +The `twinkle` keyframe animation should be defined in global styles: ```scss @keyframes twinkle { @@ -162,15 +158,11 @@ sequenceDiagram The component uses proper ARIA attributes for screen readers: -```tsx - -``` +- `id='sky'` - Unique identifier for the container +- `aria-label='Starry background'` - Descriptive label for assistive technologies +- `component='div'` - Renders as a div element +- `role='img'` - Identifies as an image for screen readers +- `sx` prop contains styling with spread operator for dynamic styles **Note:** Unlike decorative backgrounds that use `aria-hidden='true'`, this component uses `role='img'` with an `aria-label` because it's a significant visual element of the user experience. diff --git a/package-lock.json b/package-lock.json index b327928..4f1af2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "@svgr/webpack": "^8.1.0", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.1", - "@trivago/prettier-plugin-sort-imports": "^6.0.0", + "@trivago/prettier-plugin-sort-imports": "^6.0.1", "@types/jest": "^30.0.0", "@types/lodash": "^4.17.21", "@types/node": "^25.0.3", @@ -2192,9 +2192,9 @@ } }, "node_modules/@emnapi/core": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.1.tgz", - "integrity": "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.0.tgz", + "integrity": "sha512-ryJnSmj4UhrGLZZPJ6PKVb4wNPAIkW6iyLy+0TRwazd3L1u0wzMe8RfqevAh2HbcSkoeLiSYnOVDOys4JSGYyg==", "dev": true, "license": "MIT", "optional": true, @@ -2204,9 +2204,9 @@ } }, "node_modules/@emnapi/runtime": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz", - "integrity": "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.0.tgz", + "integrity": "sha512-Z82FDl1ByxqPEPrAYYeTQVlx2FSHPe1qwX465c+96IRS3fTdSYRoJcRxg3g2fEG5I69z1dSEWQlNRRr0/677mg==", "license": "MIT", "optional": true, "dependencies": { @@ -7016,9 +7016,9 @@ } }, "node_modules/@trivago/prettier-plugin-sort-imports": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-6.0.0.tgz", - "integrity": "sha512-Xarx55ow0R8oC7ViL5fPmDsg1EBa1dVhyZFVbFXNtPPJyW2w9bJADIla8YFSaNG9N06XfcklA9O9vmw4noNxkQ==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-6.0.1.tgz", + "integrity": "sha512-6B13DCWDfAfh4AEJ43gRgeCSAQmlKG5LHqHzHc0lbUwgBy0rX7o41US+46Fd4XiXBx+JDGEz3NBadCbUls0dUQ==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -13264,9 +13264,9 @@ } }, "node_modules/jest-runtime/node_modules/cjs-module-lexer": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-2.1.1.tgz", - "integrity": "sha512-+CmxIZ/L2vNcEfvNtLdU0ZQ6mbq3FZnwAP2PPTiKP+1QOoKwlKlPgb8UKV0Dds7QVaMnHm+FwSft2VB0s/SLjQ==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-2.2.0.tgz", + "integrity": "sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==", "dev": true, "license": "MIT" }, @@ -17441,9 +17441,9 @@ } }, "node_modules/systeminformation": { - "version": "5.28.8", - "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.28.8.tgz", - "integrity": "sha512-W2rXK+tTIoa1svfOEfhKPzJTw2OnoJ2XS57CftQkzvwt9Hj7RC2pfHKFAk8cHH+UkDAlGMW9Sf31kdOu5PZNIA==", + "version": "5.28.10", + "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.28.10.tgz", + "integrity": "sha512-SBNOOYYKSL1NqgG8W+5pqb6654BEvR9JnM7qvWP4bgIXuCurvyZXpBMdweVKBpVPrpzUxrgl6PbZPxrmt4RpKw==", "dev": true, "license": "MIT", "os": [ diff --git a/package.json b/package.json index 15af493..8b393ed 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "@svgr/webpack": "^8.1.0", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.1", - "@trivago/prettier-plugin-sort-imports": "^6.0.0", + "@trivago/prettier-plugin-sort-imports": "^6.0.1", "@types/jest": "^30.0.0", "@types/lodash": "^4.17.21", "@types/node": "^25.0.3",