docs: add missing project boilerplates and nav entries #40

Merged
naomi merged 21 commits from docs/add-valerium-project-page into main 2026-07-01 12:13:27 -07:00
2 changed files with 10 additions and 13 deletions
Showing only changes of commit 0b7a2d9370 - Show all commits
+1 -1
View File
@@ -378,7 +378,7 @@ export const navigation = [
{
label: "Website Headers",
link: "/projects/website-headers",
badge: { text: "v2.1.0", variant: "tip" },
badge: { text: "v4.1.0", variant: "tip" },
},
{
label: "Altaria",
+9 -12
View File
@@ -2,7 +2,7 @@
title: Website Headers
---
Website Headers (hereinafter the "Application") is a JavaScript/TypeScript library that injects standardised metadata, styles, and UI components (such as footers and modals) into web pages. It is designed to provide consistent branding, accessibility, and legal compliance for Naomi Carrigan's web properties. The Application dynamically adds Open Graph and Twitter meta tags, favicons, global styles, a themed footer, analytics scripts, and a community call-to-action modal. It also supports theme toggling and audio playback for enhanced user experience.
Website Headers (hereinafter the "Application") is a JavaScript/TypeScript library that injects standardised metadata, styles, and UI components (such as footers and modals) into web pages. It is designed to provide consistent branding and legal/compliance links for Naomi Carrigan's web properties. The Application dynamically adds Open Graph and Twitter meta tags, favicons, global styles, a themed footer, analytics scripts, and a community call-to-action modal. It also supports theme toggling with persisted preference.
## 1. User Documentation
@@ -12,17 +12,16 @@ The Website Headers library automatically enhances any webpage by injecting:
- **SEO metadata**: Open Graph and Twitter Card meta tags for better social media sharing
- **Favicons**: Complete set of favicon files for various devices and platforms
- **Global styling**: Consistent branding with OpenDyslexic font, custom cursor, and themed UI
- **Global styling**: Consistent branding with custom fonts, cursor, and themed UI
- **Footer component**: Standardized footer with copyright, social links, theme toggle, and donation button
- **Analytics**: Plausible Analytics integration with event tracking
- **Community features**: Periodic modal popup encouraging users to join the community
- **Theme support**: Light/dark theme toggle with localStorage persistence
- **Audio controls**: Optional theme music playback
- **TreeNation integration**: Carbon offset widget display
### Features
- **Accessibility-focused**: Uses OpenDyslexic font for improved readability
- **Accessibility-focused**: High-contrast theming and semantic metadata support
- **Responsive design**: Mobile-friendly layout with adaptive footer
- **Theme persistence**: Remembers user's theme preference across sessions
- **Privacy-respecting**: Uses privacy-focused Plausible Analytics
@@ -104,10 +103,6 @@ src/
├── index.ts # Main library code
└── develop.ts # Development server
prod/
├── index.js # Production build output
└── develop.js # Development server build
build.ts # Build script with minification
index.html # Test page for development
package.json # Project configuration
@@ -115,6 +110,8 @@ tsconfig.json # TypeScript configuration
eslint.config.js # ESLint configuration
```
The `prod/` directory is generated during build output and is not a permanent source directory.
### Architecture
The library is structured as a single TypeScript file that:
@@ -122,7 +119,7 @@ The library is structured as a single TypeScript file that:
1. **Metadata Injection**: Dynamically creates and injects meta tags for SEO and social sharing
2. **Asset Loading**: Loads external resources (fonts, scripts, stylesheets)
3. **Component Creation**: Builds UI components (footer, modal) and injects them into the DOM
4. **Event Handling**: Sets up interactive features (theme toggle, audio player, modal)
4. **Event Handling**: Sets up interactive features (theme toggle, social panel, modal)
5. **State Management**: Manages theme preferences and modal display timing using localStorage
### Key Components
@@ -138,7 +135,7 @@ The library is structured as a single TypeScript file that:
### External Dependencies
The library loads several external resources:
- OpenDyslexic font for accessibility
- Google-hosted font assets used by the injected stylesheet
- Font Awesome icons for UI elements
- Plausible Analytics for privacy-respecting tracking
- TreeNation widget for carbon offset display
@@ -152,7 +149,7 @@ The library loads several external resources:
### Licensing
This software is licensed under [Naomi's Public Licence](https://docs.nhcarrigan.com/legal/license).
This software is licensed under [Naomi's Public Licence](https://docs.nhcarrigan.com/#/license).
**Copyright Notice**: Copyright held by Naomi Carrigan.
@@ -181,7 +178,7 @@ The Application integrates with several third-party services that have their own
#### Content Delivery
- **NHCarrigan CDN**: Custom content delivery network
- Domain: `cdn.nhcarrigan.com`
- Hosts: fonts, images, audio files, cursors
- Hosts: fonts, images, scripts, and cursors
- Subject to NHCarrigan privacy policies
### Data Collection and Privacy