Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
255 changes: 11 additions & 244 deletions docs/api/article-filler.md
Original file line number Diff line number Diff line change
@@ -1,251 +1,18 @@
# ArticleFiller Class API Reference
# ArticleFiller API

The `ArticleFiller` class is the core module responsible for managing article data, rendering content, and handling navigation in Small Dev Talk.
The public entry points for the site are Uniform Resource Locator (URL) query strings. External users should use the URL formats below rather than calling internal methods.

**Location:** [src/scripts/index.js](../../src/scripts/index.js)
## URL-Based Access

**Type:** Singleton class (static methods only)
- `/?ArticleTitle` loads a single article by key.
- `/?pages&archive` displays the archive view.
- `/?pages&{category}` displays a category view built from legacy page definitions.

**Dependencies:** Showdown.js, Sentry, fetch API
Article keys are normalized by removing spaces and uppercasing the first letter of each segment before lookup.

## Overview
Implementation: [src/scripts/index.js](../../src/scripts/index.js)

ArticleFiller is a utility class that:
## Related Documentation

- 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 `<meta>` 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;
// <meta name="description" content="...">
// <meta property="og:title" content="...">
// <meta property="og:description" content="...">
// <meta property="og:image" content="...">
// <meta name="twitter:title" content="...">
// <meta name="twitter:description" content="...">
// <meta name="twitter:image" content="...">
```

**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}`);
}
```
- [Getting Started](../guide/getting-started.md)
- [Adding & Publishing Articles](../guide/articles.md)
34 changes: 7 additions & 27 deletions docs/api/index.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,22 @@
# API Reference

This section provides detailed API documentation for the core modules and integrations in Small Dev Talk.
This section provides Application Programming Interface (API) documentation for external use of 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.
The API reference focuses on public entry points and supported usage from outside the codebase.

## Available Documentation

### [ArticleFiller Class](./article-filler.md)
### [ArticleFiller API](./article-filler.md)

The core module responsible for managing article data, rendering content, and handling navigation.
Public entry points for linking to articles or page views via URL query strings.

**Key Topics:**
### [Service Worker](./service-worker.md)

- 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
```
Service worker registration and Workbox caching rules.

## 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
- [Adding & Publishing Articles](../guide/articles.md) — Article keys and archive structure
29 changes: 29 additions & 0 deletions docs/api/service-worker.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Service Worker

This document describes service worker registration and caching rules.

## Registration

`registerServiceWorker()` in `src/scripts/index.js` registers the service worker at `./src/serviceWorker/sw.js` when `navigator.serviceWorker` is available.

Implementation: [src/scripts/index.js](../../src/scripts/index.js)

## Precaching and Runtime Caching

Workbox generates `src/serviceWorker/sw.js` from `workbox-config.js`:

- Precaches files under `./src` that match the configured glob patterns
- Excludes `index.html`, `workbox-config.js`, `package.json`, `package-lock.json`, and `node_modules/**/*`
- Applies a CacheFirst strategy for image requests with a maximum of 10 cached entries

Implementation: [workbox-config.js](../../workbox-config.js), [src/serviceWorker/sw.js](../../src/serviceWorker/sw.js)

## Regeneration

Run `npm run workbox` to regenerate the service worker.

Implementation: [package.json](../../package.json)

## Related Documentation

- [System Architecture](../architecture/system.md)
7 changes: 3 additions & 4 deletions docs/architecture/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Complete overview of the system design and component interactions.

- High-level architecture diagram
- Component breakdown (Client Layer, Core Logic, Data Layer, Services)
- ArticleFiller singleton pattern
- ArticleFiller static-method usage pattern
- Article metadata registry
- Service Worker and caching strategy
- Security and Content Security Policy (CSP)
Expand Down Expand Up @@ -79,6 +79,5 @@ graph TB

## Related Documentation

- [ArticleFiller API](../api/article-filler.md) — Core class implementation details
- [Getting Started Guide](../guide/getting-started.md) — Local development setup
- [Deployment Guide](../guide/deployment.md) — Build and deployment process
- [System Architecture](./system.md)
- [Data Flow](./data-flow.md)
Loading