diff --git a/.markdownlint.json b/.markdownlint.json
index b528015..ee9a2d2 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -1,4 +1,5 @@
{
+ "MD007": false,
"MD010": false,
"MD013": false,
"MD029": false,
diff --git a/docs/api/article-filler.md b/docs/api/article-filler.md
new file mode 100644
index 0000000..b252ac1
--- /dev/null
+++ b/docs/api/article-filler.md
@@ -0,0 +1,251 @@
+# ArticleFiller Class API Reference
+
+The `ArticleFiller` class is the core module responsible for managing article data, rendering content, and handling navigation in Small Dev Talk.
+
+**Location:** [src/scripts/index.js](../../src/scripts/index.js)
+
+**Type:** Singleton class (static methods only)
+
+**Dependencies:** Showdown.js, Sentry, fetch API
+
+## Overview
+
+ArticleFiller is a utility class that:
+
+- Fetches and caches article metadata from JSON
+- Loads article markdown content dynamically
+- Converts markdown to HTML using Showdown
+- Updates page metadata (title, description, image)
+- Handles errors and displays user-friendly messages
+- Manages UI state and navigation
+
+**Key Pattern:** All methods are static, creating a singleton-like interface. State is maintained in class properties.
+
+## State Properties
+
+ArticleFiller maintains these static class properties:
+
+```javascript
+ArticleFiller.articleData = {}; // All article metadata
+ArticleFiller.articleMd = ""; // Raw markdown of current article
+ArticleFiller.article = ""; // Rendered HTML content
+ArticleFiller.whatPageDisplay = ""; // Current view state
+ArticleFiller.errMsg = ""; // Error message for display
+```
+
+## Methods
+
+### `retrieveArticleData()`
+
+Fetches and caches the article metadata registry.
+
+**Signature:**
+
+```javascript
+static retrieveArticleData() // No parameters
+```
+
+**Behavior:**
+
+1. Fetches JSON from `/src/articleArchive/articleData.json`
+2. Stores result in `ArticleFiller.articleData`
+3. Logs to console for debugging
+4. Called once on page load (see [index.html](../../index.html) `onload` event)
+
+**Example:**
+
+```javascript
+ArticleFiller.retrieveArticleData();
+console.log(ArticleFiller.articleData);
+// { "Playsets": {...}, "Caravaneer2": {...}, ... }
+```
+
+**Error Handling:** If fetch fails, error is logged to Sentry.
+
+### `callArticle()`
+
+Determines what content to display based on URL query parameters.
+
+**Signature:**
+
+```javascript
+static callArticle() // No parameters
+```
+
+**Behavior:**
+
+1. Parses `document.URL` for query parameters
+2. Extracts article name from URL (e.g., `/?ArticleName`)
+3. Routes to appropriate display:
+ - Query parameter matches article: Load article
+ - No query parameter: Display index/landing page
+ - Invalid article name: Display error
+
+**URL Examples:**
+
+- `https://smalldevtalk.net/?Playsets` → Load "Playsets" article
+- `https://smalldevtalk.net/?Caravaneer2` → Load "Caravaneer 2" article
+- `https://smalldevtalk.net/` → Display index page
+
+**Called by:** Page load (via `onload` in index.html)
+
+### `grabArticle(articleName)`
+
+Loads a specific article from the archive.
+
+**Signature:**
+
+```javascript
+static grabArticle(articleName) // Parameter: string
+```
+
+**Parameters:**
+
+- `articleName` (string) — Article key matching `articleData.json` key
+
+**Behavior:**
+
+1. Normalizes article name (removes spaces, applies capitalization)
+2. Checks if article exists in `ArticleFiller.articleData`
+3. Fetches markdown file from `/src/articleArchive/author.../{articleName}/`
+4. Converts markdown to HTML via Showdown
+5. Updates page title and metadata
+6. Renders HTML to page
+
+**Example:**
+
+```javascript
+ArticleFiller.grabArticle("Playsets");
+// Loads and renders the Playsets article
+```
+
+**Error Handling:**
+
+- If article not found: displays error via `displayError()`
+- If markdown file missing: shows 404 error
+- If markdown parsing fails: shows parsing error
+
+### `updateMetaData(articleData, articleKey)`
+
+Updates HTML `` tags for SEO and social sharing.
+
+**Signature:**
+
+```javascript
+static updateMetaData(articleData, articleKey) // Parameters: Object, string
+```
+
+**Parameters:**
+
+- `articleData` (Object) — Metadata object from articleData.json
+ - `title` — Article title
+ - `summary` — Brief description
+ - `author` — Author name
+ - `date` — Publication date (YYYY-MM-DD)
+ - `thumbnail` — Image filename
+- `articleKey` (string) — Article ID from URL
+
+**Updated Meta Tags:**
+
+```javascript
+document.title = articleData.title;
+//
+//
+//
+//
+//
+//
+//
+```
+
+**Called by:** `grabArticle()` after loading article content
+
+### `addToPage()`
+
+Renders article HTML to the page.
+
+**Signature:**
+
+```javascript
+static addToPage() // No parameters
+```
+
+**Behavior:**
+
+1. Converts markdown to HTML using Showdown
+2. Inserts HTML into page DOM
+3. Updates page state (`whatPageDisplay`)
+4. Logs to Sentry for monitoring
+
+**Called by:** `grabArticle()` after metadata update
+
+### `displayError(msg)`
+
+Shows error messages to users.
+
+**Signature:**
+
+```javascript
+static displayError(msg) // Parameter: string
+```
+
+**Parameters:**
+
+- `msg` (string) — Error message to display
+
+**Behavior:**
+
+1. Logs error to console
+2. Sends error to Sentry
+3. Displays user-friendly error UI
+4. Stores error message in `ArticleFiller.errMsg`
+
+**Example:**
+
+```javascript
+ArticleFiller.displayError("Article not found");
+```
+
+## State Diagram
+
+ArticleFiller transitions through these states:
+
+```mermaid
+graph TD
+ A["Page Load"] -->|retrieveArticleData| B["Metadata Ready"]
+ B -->|callArticle| C{"Valid Article?"}
+ C -->|Yes| D["grabArticle"]
+ C -->|No| E["Display Index"]
+ D -->|Find Markdown| F["updateMetaData"]
+ F -->|Convert HTML| G["addToPage"]
+ G -->|Render| H["Article Displayed"]
+ D -->|Not Found| I["displayError"]
+ I --> J["Error Displayed"]
+```
+
+## Usage Examples
+
+### Load Article on Page Load
+
+```javascript
+// Called by index.html onload event
+ArticleFiller.retrieveArticleData();
+ArticleFiller.callArticle();
+```
+
+### Programmatically Load Article
+
+```javascript
+ArticleFiller.grabArticle("Playsets");
+// Article content now rendered to page
+```
+
+### Handle Errors
+
+```javascript
+try {
+ ArticleFiller.grabArticle("InvalidArticle");
+} catch (error) {
+ ArticleFiller.displayError(`Failed to load article: ${error.message}`);
+}
+```
diff --git a/docs/api/index.md b/docs/api/index.md
new file mode 100644
index 0000000..b1cda7a
--- /dev/null
+++ b/docs/api/index.md
@@ -0,0 +1,42 @@
+# API Reference
+
+This section provides detailed API documentation for the core modules and integrations in Small Dev Talk.
+
+## Overview
+
+The API reference documents the internal structure, method signatures, and usage patterns for the key components that power Small Dev Talk. Each document includes practical examples, parameter descriptions, and integration guidelines.
+
+## Available Documentation
+
+### [ArticleFiller Class](./article-filler.md)
+
+The core module responsible for managing article data, rendering content, and handling navigation.
+
+**Key Topics:**
+
+- State management and class properties
+- Article metadata retrieval
+- Dynamic content loading and rendering
+- Markdown to HTML conversion
+- Error handling and user feedback
+- URL parameter parsing and routing
+
+**Use this when:** You need to understand how articles are loaded, rendered, or displayed on the site.
+
+## Quick Reference
+
+### ArticleFiller Core Methods
+
+```javascript
+ArticleFiller.retrieveArticleData(); // Fetch article metadata
+ArticleFiller.callArticle(); // Route to appropriate display
+ArticleFiller.grabArticle(articleName); // Load specific article
+ArticleFiller.updateMetaData(data, key); // Update page metadata
+ArticleFiller.displayError(msg); // Show error to user
+```
+
+## Related Documentation
+
+- [System Architecture](../architecture/system.md) — High-level system design
+- [Data Flow](../architecture/data-flow.md) — How data moves through the application
+- [Getting Started Guide](../guide/getting-started.md) — Local development setup
diff --git a/docs/architecture/data-flow.md b/docs/architecture/data-flow.md
new file mode 100644
index 0000000..6a9b0cd
--- /dev/null
+++ b/docs/architecture/data-flow.md
@@ -0,0 +1,236 @@
+# Data Flow Diagram
+
+This document illustrates how data flows through Small Dev Talk from initial page load to rendered article.
+
+## Complete Data Flow
+
+```mermaid
+flowchart TD
+ subgraph Request["User Request"]
+ A1["User visits index.html
or clicks article link"]
+ A2["URL contains query parameter
?ArticleName"]
+ end
+
+ subgraph Init["Initialization"]
+ B1["Scripts load:
jQuery, Showdown,
Bootstrap, Sentry"]
+ B2["Sentry error tracking
is configured"]
+ B3["Service worker
registers if offline
caching enabled"]
+ end
+
+ subgraph Metadata["Load Metadata"]
+ C1["ArticleFiller.retrieveArticleData()
called"]
+ C2["Fetch /src/articleArchive/
articleData.json"]
+ C3["Store JSON in memory
ArticleFiller.articleData"]
+ end
+
+ subgraph Decision["Process URL & Decide"]
+ D1["ArticleFiller.callArticle()
parses URL query"]
+ D2{"Article Name
requested?"}
+ D3["Show homepage
with grid"]
+ D4["Load single article"]
+ end
+
+ subgraph Fetch["Fetch Article Content"]
+ E1["Construct article path:
authorAuthorName/
YYYY-MM-DD_Title/
Title.md"]
+ E2["Fetch markdown file
from CDN or cache"]
+ E3["Store raw markdown
ArticleFiller.articleMd"]
+ end
+
+ subgraph Meta["Update Page Metadata"]
+ F1["ArticleFiller.updateMetaData()
updates page tags"]
+ F2["Document.title
og:title
og:description
og:image"]
+ F3["Structured data
application/ld+json"]
+ end
+
+ subgraph Render["Render HTML"]
+ G1["Showdown.Converter
converts markdown → HTML"]
+ G2["Store rendered HTML
ArticleFiller.article"]
+ G3["Inject HTML into
#articleBody"]
+ G4["Remove #featuredArticles
and #displayArticles"]
+ end
+
+ subgraph Cache["Cache & Service Worker"]
+ H1["Service Worker
precaches article assets"]
+ H2["Images, CSS, JS
stored in cache"]
+ H3["Subsequent visits
load from cache first"]
+ end
+
+ subgraph Monitor["Error Tracking"]
+ I1["Sentry monitors for
fetch errors"]
+ I2["Console errors logged
via enableLogs: true"]
+ I3["Network errors reported
with context"]
+ end
+
+ subgraph Display["Display to User"]
+ J1["Rendered article
visible in browser"]
+ J2["Images lazy-load
from article directory"]
+ J3["Bootstrap styling
applied"]
+ end
+
+ A1 --> A2
+ A2 --> B1
+ B1 --> B2
+ B2 --> B3
+ B3 --> C1
+ C1 --> C2
+ C2 --> C3
+ C3 --> D1
+ D1 --> D2
+ D2 -->|No| D3
+ D2 -->|Yes| D4
+ D4 --> E1
+ E1 --> E2
+ E2 --> E3
+ E3 --> F1
+ F1 --> F2
+ F2 --> F3
+ F3 --> G1
+ G1 --> G2
+ G2 --> G3
+ G3 --> H1
+ G3 --> I1
+ H1 --> H2
+ H2 --> H3
+ I1 --> I2
+ I2 --> I3
+ G3 --> J1
+ J1 --> J2
+ J2 --> J3
+```
+
+## Component Interactions
+
+### 1. Bootstrap & Resource Loading
+
+When [index.html](../../index.html) loads:
+
+1. HTML is parsed
+2. External scripts and stylesheets are downloaded:
+ - Bootstrap CSS (from CDN)
+ - jQuery (from CDN)
+ - Showdown.js (from CDN)
+ - Sentry SDK (from sentry-cdn.com)
+ - Custom [index.js](../../src/scripts/index.js) (local)
+
+3. Inline `
-