|
| 1 | +# ArticleFiller Class API Reference |
| 2 | + |
| 3 | +The `ArticleFiller` class is the core module responsible for managing article data, rendering content, and handling navigation in Small Dev Talk. |
| 4 | + |
| 5 | +**Location:** [src/scripts/index.js](../../src/scripts/index.js) |
| 6 | + |
| 7 | +**Type:** Singleton class (static methods only) |
| 8 | + |
| 9 | +**Dependencies:** Showdown.js, Sentry, fetch API |
| 10 | + |
| 11 | +## Overview |
| 12 | + |
| 13 | +ArticleFiller is a utility class that: |
| 14 | + |
| 15 | +- Fetches and caches article metadata from JSON |
| 16 | +- Loads article markdown content dynamically |
| 17 | +- Converts markdown to HTML using Showdown |
| 18 | +- Updates page metadata (title, description, image) |
| 19 | +- Handles errors and displays user-friendly messages |
| 20 | +- Manages UI state and navigation |
| 21 | + |
| 22 | +**Key Pattern:** All methods are static, creating a singleton-like interface. State is maintained in class properties. |
| 23 | + |
| 24 | +## State Properties |
| 25 | + |
| 26 | +ArticleFiller maintains these static class properties: |
| 27 | + |
| 28 | +```javascript |
| 29 | +ArticleFiller.articleData = {}; // All article metadata |
| 30 | +ArticleFiller.articleMd = ""; // Raw markdown of current article |
| 31 | +ArticleFiller.article = ""; // Rendered HTML content |
| 32 | +ArticleFiller.whatPageDisplay = ""; // Current view state |
| 33 | +ArticleFiller.errMsg = ""; // Error message for display |
| 34 | +``` |
| 35 | + |
| 36 | +## Methods |
| 37 | + |
| 38 | +### `retrieveArticleData()` |
| 39 | + |
| 40 | +Fetches and caches the article metadata registry. |
| 41 | + |
| 42 | +**Signature:** |
| 43 | + |
| 44 | +```javascript |
| 45 | +static retrieveArticleData() // No parameters |
| 46 | +``` |
| 47 | + |
| 48 | +**Behavior:** |
| 49 | + |
| 50 | +1. Fetches JSON from `/src/articleArchive/articleData.json` |
| 51 | +2. Stores result in `ArticleFiller.articleData` |
| 52 | +3. Logs to console for debugging |
| 53 | +4. Called once on page load (see [index.html](../../index.html) `onload` event) |
| 54 | + |
| 55 | +**Example:** |
| 56 | + |
| 57 | +```javascript |
| 58 | +ArticleFiller.retrieveArticleData(); |
| 59 | +console.log(ArticleFiller.articleData); |
| 60 | +// { "Playsets": {...}, "Caravaneer2": {...}, ... } |
| 61 | +``` |
| 62 | + |
| 63 | +**Error Handling:** If fetch fails, error is logged to Sentry. |
| 64 | + |
| 65 | +### `callArticle()` |
| 66 | + |
| 67 | +Determines what content to display based on URL query parameters. |
| 68 | + |
| 69 | +**Signature:** |
| 70 | + |
| 71 | +```javascript |
| 72 | +static callArticle() // No parameters |
| 73 | +``` |
| 74 | + |
| 75 | +**Behavior:** |
| 76 | + |
| 77 | +1. Parses `document.URL` for query parameters |
| 78 | +2. Extracts article name from URL (e.g., `/?ArticleName`) |
| 79 | +3. Routes to appropriate display: |
| 80 | + - Query parameter matches article: Load article |
| 81 | + - No query parameter: Display index/landing page |
| 82 | + - Invalid article name: Display error |
| 83 | + |
| 84 | +**URL Examples:** |
| 85 | + |
| 86 | +- `https://smalldevtalk.net/?Playsets` → Load "Playsets" article |
| 87 | +- `https://smalldevtalk.net/?Caravaneer2` → Load "Caravaneer 2" article |
| 88 | +- `https://smalldevtalk.net/` → Display index page |
| 89 | + |
| 90 | +**Called by:** Page load (via `onload` in index.html) |
| 91 | + |
| 92 | +### `grabArticle(articleName)` |
| 93 | + |
| 94 | +Loads a specific article from the archive. |
| 95 | + |
| 96 | +**Signature:** |
| 97 | + |
| 98 | +```javascript |
| 99 | +static grabArticle(articleName) // Parameter: string |
| 100 | +``` |
| 101 | + |
| 102 | +**Parameters:** |
| 103 | + |
| 104 | +- `articleName` (string) — Article key matching `articleData.json` key |
| 105 | + |
| 106 | +**Behavior:** |
| 107 | + |
| 108 | +1. Normalizes article name (removes spaces, applies capitalization) |
| 109 | +2. Checks if article exists in `ArticleFiller.articleData` |
| 110 | +3. Fetches markdown file from `/src/articleArchive/author.../{articleName}/` |
| 111 | +4. Converts markdown to HTML via Showdown |
| 112 | +5. Updates page title and metadata |
| 113 | +6. Renders HTML to page |
| 114 | + |
| 115 | +**Example:** |
| 116 | + |
| 117 | +```javascript |
| 118 | +ArticleFiller.grabArticle("Playsets"); |
| 119 | +// Loads and renders the Playsets article |
| 120 | +``` |
| 121 | + |
| 122 | +**Error Handling:** |
| 123 | + |
| 124 | +- If article not found: displays error via `displayError()` |
| 125 | +- If markdown file missing: shows 404 error |
| 126 | +- If markdown parsing fails: shows parsing error |
| 127 | + |
| 128 | +### `updateMetaData(articleData, articleKey)` |
| 129 | + |
| 130 | +Updates HTML `<meta>` tags for SEO and social sharing. |
| 131 | + |
| 132 | +**Signature:** |
| 133 | + |
| 134 | +```javascript |
| 135 | +static updateMetaData(articleData, articleKey) // Parameters: Object, string |
| 136 | +``` |
| 137 | + |
| 138 | +**Parameters:** |
| 139 | + |
| 140 | +- `articleData` (Object) — Metadata object from articleData.json |
| 141 | + - `title` — Article title |
| 142 | + - `summary` — Brief description |
| 143 | + - `author` — Author name |
| 144 | + - `date` — Publication date (YYYY-MM-DD) |
| 145 | + - `thumbnail` — Image filename |
| 146 | +- `articleKey` (string) — Article ID from URL |
| 147 | + |
| 148 | +**Updated Meta Tags:** |
| 149 | + |
| 150 | +```javascript |
| 151 | +document.title = articleData.title; |
| 152 | +// <meta name="description" content="..."> |
| 153 | +// <meta property="og:title" content="..."> |
| 154 | +// <meta property="og:description" content="..."> |
| 155 | +// <meta property="og:image" content="..."> |
| 156 | +// <meta name="twitter:title" content="..."> |
| 157 | +// <meta name="twitter:description" content="..."> |
| 158 | +// <meta name="twitter:image" content="..."> |
| 159 | +``` |
| 160 | + |
| 161 | +**Called by:** `grabArticle()` after loading article content |
| 162 | + |
| 163 | +### `addToPage()` |
| 164 | + |
| 165 | +Renders article HTML to the page. |
| 166 | + |
| 167 | +**Signature:** |
| 168 | + |
| 169 | +```javascript |
| 170 | +static addToPage() // No parameters |
| 171 | +``` |
| 172 | + |
| 173 | +**Behavior:** |
| 174 | + |
| 175 | +1. Converts markdown to HTML using Showdown |
| 176 | +2. Inserts HTML into page DOM |
| 177 | +3. Updates page state (`whatPageDisplay`) |
| 178 | +4. Logs to Sentry for monitoring |
| 179 | + |
| 180 | +**Called by:** `grabArticle()` after metadata update |
| 181 | + |
| 182 | +### `displayError(msg)` |
| 183 | + |
| 184 | +Shows error messages to users. |
| 185 | + |
| 186 | +**Signature:** |
| 187 | + |
| 188 | +```javascript |
| 189 | +static displayError(msg) // Parameter: string |
| 190 | +``` |
| 191 | + |
| 192 | +**Parameters:** |
| 193 | + |
| 194 | +- `msg` (string) — Error message to display |
| 195 | + |
| 196 | +**Behavior:** |
| 197 | + |
| 198 | +1. Logs error to console |
| 199 | +2. Sends error to Sentry |
| 200 | +3. Displays user-friendly error UI |
| 201 | +4. Stores error message in `ArticleFiller.errMsg` |
| 202 | + |
| 203 | +**Example:** |
| 204 | + |
| 205 | +```javascript |
| 206 | +ArticleFiller.displayError("Article not found"); |
| 207 | +``` |
| 208 | + |
| 209 | +## State Diagram |
| 210 | + |
| 211 | +ArticleFiller transitions through these states: |
| 212 | + |
| 213 | +```mermaid |
| 214 | +graph TD |
| 215 | + A["Page Load"] -->|retrieveArticleData| B["Metadata Ready"] |
| 216 | + B -->|callArticle| C{"Valid Article?"} |
| 217 | + C -->|Yes| D["grabArticle"] |
| 218 | + C -->|No| E["Display Index"] |
| 219 | + D -->|Find Markdown| F["updateMetaData"] |
| 220 | + F -->|Convert HTML| G["addToPage"] |
| 221 | + G -->|Render| H["Article Displayed"] |
| 222 | + D -->|Not Found| I["displayError"] |
| 223 | + I --> J["Error Displayed"] |
| 224 | +``` |
| 225 | + |
| 226 | +## Usage Examples |
| 227 | + |
| 228 | +### Load Article on Page Load |
| 229 | + |
| 230 | +```javascript |
| 231 | +// Called by index.html onload event |
| 232 | +ArticleFiller.retrieveArticleData(); |
| 233 | +ArticleFiller.callArticle(); |
| 234 | +``` |
| 235 | + |
| 236 | +### Programmatically Load Article |
| 237 | + |
| 238 | +```javascript |
| 239 | +ArticleFiller.grabArticle("Playsets"); |
| 240 | +// Article content now rendered to page |
| 241 | +``` |
| 242 | + |
| 243 | +### Handle Errors |
| 244 | + |
| 245 | +```javascript |
| 246 | +try { |
| 247 | + ArticleFiller.grabArticle("InvalidArticle"); |
| 248 | +} catch (error) { |
| 249 | + ArticleFiller.displayError(`Failed to load article: ${error.message}`); |
| 250 | +} |
| 251 | +``` |
0 commit comments