Documentation.md

created	author	version	license(s)
2024-12-23 23:31:26 -0800	Cong Le	1.0	MIT, CC BY 4.0

To provide a clear understanding of the code's complexities, functionalities, and potential expanding capabilities, I'll create a series of Mermaid diagrams to illustrate the overall structure and possible enhancements.

1. High-Level Structure Diagram

This diagram outlines the key components of the HTML page, highlighting the layout and main features.

---
config:
  layout: elk
  look: handDrawn
  theme: dark
---
graph TD
    A[HTML Document] --> B[Head Section]
    A --> C[Body Section]
    B --> B1[Meta Information]
    B --> B2[Styles and Linking]
    C --> C1[Logo Section]
    C --> C2[Container]
    C2 --> C3[Content Section]
    C3 --> D[Main Section]
    C3 --> E[Sidebar Section]
    D --> F[Google CSE Integration]
    E --> G[Theme Switching UI]
    C --> C4[Canvas Background]

Loading

2. Theme Switching Functionality

Illustrates how the theme switching mechanism is designed and how it updates the document with the selected theme.

---
config:
  layout: elk
  look: handDrawn
  theme: dark
---
flowchart TD
    A[User Clicks Theme Name] --> B[Switch Theme Function]
    B --> C{Check Current Theme}
    C -->|Valid| D[Apply Theme Properties]
    C -->|Invalid| E[Error Handling]
    D --> F[Update Body Styles]
    D --> G[Update Section Styles]
    D --> H[Change Highlight Styles]
    F --> I[Document Body]
    G --> J[Main & Side Sections]
    H --> K[Autocomplete Highlights]

Loading

3. Canvas and Matrix Effect

The structure capturing how the matrix effect background is generated using JavaScript and Canvas API.

---
config:
  layout: elk
  look: handDrawn
  theme: dark
---
sequenceDiagram
    participant User
    participant HTML as HTML Document
    participant JS as JavaScript Engine
    User->>HTML: Load Page
    HTML->>JS: Initialize Canvas
    JS->>JS: Set Dimensions
    JS->>JS: Begin Animation Loop
    loop Matrix Effect
        JS->>JS: Generate Characters
        JS->>JS: Draw to Canvas
    end

Loading

---