Skip to content

Commit a3b0018

Browse files
authored
Update jQuery to v4 (#88)
1 parent 7a5f004 commit a3b0018

File tree

14 files changed

+205
-437
lines changed

14 files changed

+205
-437
lines changed

docs/api/article-filler.md

Lines changed: 11 additions & 244 deletions
Original file line numberDiff line numberDiff line change
@@ -1,251 +1,18 @@
1-
# ArticleFiller Class API Reference
1+
# ArticleFiller API
22

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.
44

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

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.
810

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.
1012

11-
## Overview
13+
Implementation: [src/scripts/index.js](../../src/scripts/index.js)
1214

13-
ArticleFiller is a utility class that:
15+
## Related Documentation
1416

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)

docs/api/index.md

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,22 @@
11
# API Reference
22

3-
This section provides detailed API documentation for the core modules and integrations in Small Dev Talk.
3+
This section provides Application Programming Interface (API) documentation for external use of Small Dev Talk.
44

55
## Overview
66

7-
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.
7+
The API reference focuses on public entry points and supported usage from outside the codebase.
88

99
## Available Documentation
1010

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

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

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

17-
- State management and class properties
18-
- Article metadata retrieval
19-
- Dynamic content loading and rendering
20-
- Markdown to HTML conversion
21-
- Error handling and user feedback
22-
- URL parameter parsing and routing
23-
24-
**Use this when:** You need to understand how articles are loaded, rendered, or displayed on the site.
25-
26-
## Quick Reference
27-
28-
### ArticleFiller Core Methods
29-
30-
```javascript
31-
ArticleFiller.retrieveArticleData(); // Fetch article metadata
32-
ArticleFiller.callArticle(); // Route to appropriate display
33-
ArticleFiller.grabArticle(articleName); // Load specific article
34-
ArticleFiller.updateMetaData(data, key); // Update page metadata
35-
ArticleFiller.displayError(msg); // Show error to user
36-
```
17+
Service worker registration and Workbox caching rules.
3718

3819
## Related Documentation
3920

40-
- [System Architecture](../architecture/system.md) — High-level system design
41-
- [Data Flow](../architecture/data-flow.md) — How data moves through the application
4221
- [Getting Started Guide](../guide/getting-started.md) — Local development setup
22+
- [Adding & Publishing Articles](../guide/articles.md) — Article keys and archive structure

docs/api/service-worker.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Service Worker
2+
3+
This document describes service worker registration and caching rules.
4+
5+
## Registration
6+
7+
`registerServiceWorker()` in `src/scripts/index.js` registers the service worker at `./src/serviceWorker/sw.js` when `navigator.serviceWorker` is available.
8+
9+
Implementation: [src/scripts/index.js](../../src/scripts/index.js)
10+
11+
## Precaching and Runtime Caching
12+
13+
Workbox generates `src/serviceWorker/sw.js` from `workbox-config.js`:
14+
15+
- Precaches files under `./src` that match the configured glob patterns
16+
- Excludes `index.html`, `workbox-config.js`, `package.json`, `package-lock.json`, and `node_modules/**/*`
17+
- Applies a CacheFirst strategy for image requests with a maximum of 10 cached entries
18+
19+
Implementation: [workbox-config.js](../../workbox-config.js), [src/serviceWorker/sw.js](../../src/serviceWorker/sw.js)
20+
21+
## Regeneration
22+
23+
Run `npm run workbox` to regenerate the service worker.
24+
25+
Implementation: [package.json](../../package.json)
26+
27+
## Related Documentation
28+
29+
- [System Architecture](../architecture/system.md)

docs/architecture/index.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Complete overview of the system design and component interactions.
1616

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

8080
## Related Documentation
8181

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

0 commit comments

Comments
 (0)