|
1 | | -# ArticleFiller Class API Reference |
| 1 | +# ArticleFiller API |
2 | 2 |
|
3 | | -The `ArticleFiller` class is the core module responsible for managing article data, rendering content, and handling navigation in Small Dev Talk. |
| 3 | +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. |
4 | 4 |
|
5 | | -**Location:** [src/scripts/index.js](../../src/scripts/index.js) |
| 5 | +## URL-Based Access |
6 | 6 |
|
7 | | -**Type:** Singleton class (static methods only) |
| 7 | +- `/?ArticleTitle` loads a single article by key. |
| 8 | +- `/?pages&archive` displays the archive view. |
| 9 | +- `/?pages&{category}` displays a category view built from legacy page definitions. |
8 | 10 |
|
9 | | -**Dependencies:** Showdown.js, Sentry, fetch API |
| 11 | +Article keys are normalized by removing spaces and uppercasing the first letter of each segment before lookup. |
10 | 12 |
|
11 | | -## Overview |
| 13 | +Implementation: [src/scripts/index.js](../../src/scripts/index.js) |
12 | 14 |
|
13 | | -ArticleFiller is a utility class that: |
| 15 | +## Related Documentation |
14 | 16 |
|
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 | | -``` |
| 17 | +- [Getting Started](../guide/getting-started.md) |
| 18 | +- [Adding & Publishing Articles](../guide/articles.md) |
0 commit comments