nhcarrigan/docs
10
0
Fork 0
generated from nhcarrigan/template
Code Issues 2 Pull Requests 7 Actions Releases 1 Activity

docs: refresh website headers docs and version badge

Browse Source
This commit is contained in:
Ilenia
2026-07-01 14:27:21 +02:00
parent 9bc4422f87
commit 0b7a2d9370
2 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/navigation.ts
+1 -1
View File
@@ -378,7 +378,7 @@ export const navigation = [
{ {
label: "Website Headers", label: "Website Headers",
link: "/projects/website-headers", link: "/projects/website-headers",
badge: { text: "v2.1.0", variant: "tip" }, badge: { text: "v4.1.0", variant: "tip" },
}, },
{ {
label: "Altaria", label: "Altaria",
src/content/docs/projects/website-headers.md
+9 -12
View File
@@ -2,7 +2,7 @@
title: Website Headers 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 ## 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 - **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 - **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 - **Footer component**: Standardized footer with copyright, social links, theme toggle, and donation button
- **Analytics**: Plausible Analytics integration with event tracking - **Analytics**: Plausible Analytics integration with event tracking
- **Community features**: Periodic modal popup encouraging users to join the community - **Community features**: Periodic modal popup encouraging users to join the community
- **Theme support**: Light/dark theme toggle with localStorage persistence - **Theme support**: Light/dark theme toggle with localStorage persistence
- **Audio controls**: Optional theme music playback
- **TreeNation integration**: Carbon offset widget display - **TreeNation integration**: Carbon offset widget display
### Features ### 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 - **Responsive design**: Mobile-friendly layout with adaptive footer
- **Theme persistence**: Remembers user's theme preference across sessions - **Theme persistence**: Remembers user's theme preference across sessions
- **Privacy-respecting**: Uses privacy-focused Plausible Analytics - **Privacy-respecting**: Uses privacy-focused Plausible Analytics
@@ -104,10 +103,6 @@ src/
├── index.ts # Main library code ├── index.ts # Main library code
└── develop.ts # Development server └── develop.ts # Development server
prod/
├── index.js # Production build output
└── develop.js # Development server build
build.ts # Build script with minification build.ts # Build script with minification
index.html # Test page for development index.html # Test page for development
package.json # Project configuration package.json # Project configuration
@@ -115,6 +110,8 @@ tsconfig.json # TypeScript configuration
eslint.config.js # ESLint configuration eslint.config.js # ESLint configuration
``` ```
The `prod/` directory is generated during build output and is not a permanent source directory.
### Architecture ### Architecture
The library is structured as a single TypeScript file that: 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 1. **Metadata Injection**: Dynamically creates and injects meta tags for SEO and social sharing
2. **Asset Loading**: Loads external resources (fonts, scripts, stylesheets) 2. **Asset Loading**: Loads external resources (fonts, scripts, stylesheets)
3. **Component Creation**: Builds UI components (footer, modal) and injects them into the DOM 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 5. **State Management**: Manages theme preferences and modal display timing using localStorage
### Key Components ### Key Components
@@ -138,7 +135,7 @@ The library is structured as a single TypeScript file that:
### External Dependencies ### External Dependencies
The library loads several external resources: 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 - Font Awesome icons for UI elements
- Plausible Analytics for privacy-respecting tracking - Plausible Analytics for privacy-respecting tracking
- TreeNation widget for carbon offset display - TreeNation widget for carbon offset display
@@ -152,7 +149,7 @@ The library loads several external resources:
### Licensing ### 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. **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 #### Content Delivery
- **NHCarrigan CDN**: Custom content delivery network - **NHCarrigan CDN**: Custom content delivery network
- Domain: `cdn.nhcarrigan.com` - Domain: `cdn.nhcarrigan.com`
- Hosts: fonts, images, audio files, cursors - Hosts: fonts, images, scripts, and cursors
- Subject to NHCarrigan privacy policies - Subject to NHCarrigan privacy policies
### Data Collection and Privacy ### Data Collection and Privacy