Common UI Components

Relevant source files

This page documents the reusable UI components that provide consistent navigation, language switching, theme control, and content attribution across all pages. These components are implemented as standardized HTML structures with specific class names and IDs, styled via style.css and enhanced by client-side JavaScript modules.

For the overall HTML page structure, see HTML Structure and Metadata. For styling details, see CSS and Styling System.

Component Architecture Overview

All pages follow a standardized component layout pattern with two button-container sections (top and bottom) that frame the main content area.

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html114-231 _site/list-en.html115-230 _site/human-wiring-priorities-zh.html115-216

Button Container Pattern

The button-container class provides a flexible layout wrapper that appears twice per page: once above the content and once below. It uses floats and inline positioning to arrange child elements.

Top Button Container Structure

Component	Position	Purpose
Home Button	`left-button`	Return to site index
Date Button	Center	Display publication date
Theme Toggle	`float: right`	Toggle dark/light mode
Language Selector	`right-button`	Switch content language

Bottom Button Container Structure

Component	Position	Purpose
Back Button	`left-button`	Return to previous page
Model Attribution	Center	Display AI model credit
Donate Button	`right-button`	Link to donation page

Example Implementation:

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html120-181 _site/list-en.html121-190 _site/yin-wang-zh.html121-188

Home Button

Located in the top-left corner of every page, provides immediate navigation to the site root.

Element: <a href="/" class="button left-button">Home</a>
Location: First child of top button-container
Styling: button and left-button classes

Back Button

Located in the bottom-left corner, mirrors the Home button functionality in the footer.

Element: <a href="/" class="button left-button">Back</a>
Location: First child of bottom button-container
Behavior: Identical URL target to Home button (/)

Date Button

Displays the publication date in YYYY.MM format (e.g., "2024.12", "2025.10"). Non-clickable in most implementations (uses href="#").

Date Format Logic:

Extracts from Jekyll frontmatter publication date
Formatted as 4-digit year, 2-digit month
Positioned between navigation and theme controls

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html121-143 _site/list-en.html122-152 _site/unpopular-relationship-opinions-en.html121-150

Language Selector Component

The language selector is a <select> dropdown that enables seamless switching between English and Chinese versions of the same content.

Component Structure

Client-Side Behavior

Switching logic implemented via inline JavaScript:

URL Pattern

English pages: /*-en.html or /notes/YYYY-MM-DD-*-en.html
Chinese pages: /*-zh.html or /notes/YYYY-MM-DD-*-zh.html
Option values: Root-relative paths (e.g., /topic-en, /topic-zh)

Key Feature: The selected attribute marks the current language, preventing accidental reloads.

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html177-243 _site/list-en.html186-242 _site/human-wiring-priorities-zh.html184-228

Theme Toggle System

The theme toggle button switches between light and dark modes using SVG icons and the dark-mode.js script (documented in Theme Toggle System).

Component Markup

Icon Specifications

Icon	ID	Displayed When	SVG Elements
Sun	`sunIcon`	Dark mode active	Circle (center) + 8 lines (rays)
Moon	`moonIcon`	Light mode active	Crescent path (d="M21...")

Behavior

Initial State: Both SVGs hidden (display: none)
Script Activation: dark-mode.js toggles visibility based on theme
User Interaction: Click triggers theme change and icon swap
Persistence: Theme preference stored in localStorage (see Theme Toggle System)

Visual Characteristics:

Size: 24×24px
Stroke: 2px width, rounded caps/joins
Color: Inherits currentColor from parent

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html146-165 _site/list-en.html155-174 _site/yin-wang-zh.html153-172

AI-generated content displays model attribution in the bottom button-container using a <p class="model"> element.

Attribution Patterns

Display Logic

Content Type	Title Suffix	Model Display
AI Generated	`\| Generated by AI`	Shows model name
AI Translated	`\| AI生成和翻译`	Shows model name
Original	`\| Original`	No model element

Positioning: Centered between Back button (left) and Donate button (right) in bottom button-container.

Common Models:

x-ai/grok-4.1-fast (primary generation model)
x-ai/grok-4-fast (alternate model)

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html225-226 _site/human-wiring-priorities-zh.html210-211 _site/notes/2025-11-04-guangzhou-travel-guide-en.html330-331

Audio Player Component

The audio player provides text-to-speech functionality but remains hidden by default. It's controlled by the deferred audio.js script (see Audio Player and Text-to-Speech).

HTML Structure

Component States

State	Visibility	Source	Triggered By
Default	Hidden (`display:none`)	Empty `src`	Page load
Active	Visible (controls shown)	MP3 URL	User action (commented)
Playing	Controls + playback	Loaded audio	Play button

Implementation Notes

Location: Appears after top button-container, before main content
Attributes: controls (show playback controls), loop (repeat audio)
Activation: Audio button typically commented out (<!-- <a href="#" id="playAudioButton"...>)
Script: Loaded via <script src="/assets/js/audio.js" defer></script>

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html183-189 _site/list-en.html192-198 _site/yin-wang-zh.html190-196

Donate Button

The donate button provides a consistent call-to-action in the bottom-right corner of every page, linking to language-specific donation pages.

Component Structure

URL Patterns

Language	Button Text	Target URL
English	"Donate"	`/donate-en`
Chinese	"Donate"	`/donate-zh`

Design Rationale

Position: right-button class aligns to far right
Consistency: Appears on 100% of content pages
Language Matching: Links to donation page in same language as current content

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html230 _site/list-en.html229 _site/human-wiring-priorities-zh.html215

Title Row Component

The title row displays the page heading with content attribution labels (Original, AI Generated, AI Translated).

Structure

Attribution Patterns

Label Variations

English	Chinese	Meaning
`Original`	`原创`	Human-authored content
`Generated by AI`	`AI生成和翻译`	AI-generated and translated
-	`原创，AI翻译`	Original content, AI-translated

CSS Classes

title-row: Outer container for title
post-title-row: Additional styling for post pages
title: Base heading class
post-title: Specific styling for post headings

Sources: _site/notes/2025-12-06-unpopular-relationship-opinions-en.html115-118 _site/list-en.html115-118 _site/yin-wang-zh.html115-118

Component Integration Map

This diagram maps logical components to their concrete code implementations, bridging natural language concepts with actual codebase entities.

Sources:

Common UI Components

Component Architecture Overview

Button Container Pattern

Top Button Container Structure

Bottom Button Container Structure

Navigation Buttons

Home Button

Back Button

Date Button

Language Selector Component

Component Structure

Client-Side Behavior

URL Pattern

Theme Toggle System

Component Markup

Icon Specifications

Behavior

Model Attribution Footer

Attribution Patterns

Display Logic

Audio Player Component

HTML Structure

Component States

Implementation Notes

Donate Button

Component Structure

URL Patterns

Design Rationale

Title Row Component

Structure

Attribution Patterns

Label Variations

CSS Classes

Component Integration Map