x/wiki
1
0
Fork 0
mirror of https://github.com/waynesutton/markdown-site.git synced 2026-01-12 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add ES module compatibility to configure-fork.ts using fileURLToPath

Browse Source
This commit is contained in:
Wayne Sutton
2025-12-31 12:36:55 -08:00
parent db960ec163
commit 86d97e80eb
9 changed files with 280 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
TASK.md
View File

@@ -7,10 +7,16 @@
## Current Status
v2.2.0 ready. Footer content via markdown page complete. Created `content/pages/footer.md` for managing footer content via markdown sync. Footer content syncs with `npm run sync` without redeploy needed. Falls back to `siteConfig.footer.defaultContent` when page not found. Documentation updated in files.md, changelog.md, changelog-page.md, FORK_CONFIG.md, docs.md, setup-guide.md, and TASK.md.
v2.2.1 ready. ES module compatibility fix for configure-fork.ts. Fixed `__dirname is not defined` error when running `npm run configure`. Added `fileURLToPath` import to create ES module equivalent of `__dirname`. Script now works correctly with `"type": "module"` in package.json.
## Completed
- [x] ES module compatibility fix for configure-fork.ts
- [x] Fixed `__dirname is not defined` error when running `npm run configure`
- [x] Added `fileURLToPath` import from `url` module
- [x] Created ES module equivalent of `__dirname` using `import.meta.url`
- [x] Updated files.md, changelog.md, changelog-page.md, TASK.md
- [x] Footer content via markdown page (footer.md)
- [x] Created `content/pages/footer.md` for managing footer content via markdown sync
- [x] Footer content syncs with `npm run sync` without redeploy needed

14
changelog.md
View File

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [2.2.1] - 2025-12-31
### Fixed
- ES module compatibility for configure-fork.ts
- Fixed `__dirname is not defined` error when running `npm run configure`
- Added `fileURLToPath` import from `url` module
- Created ES module equivalent of `__dirname` using `import.meta.url`
- Script now works correctly with `"type": "module"` in package.json
### Technical
- Updated: `scripts/configure-fork.ts` - Added ES module compatible __dirname using fileURLToPath
## [2.2.0] - 2025-12-30
### Added

110
content/blog/markdown-with-code-examples.md
View File

@@ -605,3 +605,113 @@ Indent code blocks with 4 spaces inside list items:
| `![alt](image.png)` | image |
| `> quote` | blockquote |
| `---` | horizontal rule |
## Image grid
Create a grid layout using HTML and CSS Grid. Each cell contains an image, text, and a link:
```html
<div
style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0;"
>
<div style="text-align: center;">
<img
src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=200&h=200&fit=crop"
alt=""
style="width: 100%; height: auto; border-radius: 4px;"
/>
<p style="margin: 0.5rem 0 0.25rem;">Nature</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;"
>View</a
>
</div>
<!-- Repeat for 15 more cells -->
</div>
```
Result:
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0;">
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Nature</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Mountains</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Ocean</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Forest</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Landscape</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Desert</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Sky</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Sunset</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Beach</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">River</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Valley</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Flowers</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Lake</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Meadow</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Waterfall</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Sunrise</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
</div>
**Note:** The grid uses CSS Grid with `repeat(4, 1fr)` to create 4 equal columns. Images have empty `alt` attributes so no captions appear. Adjust the `gap` value to change spacing between cells.

12
content/pages/changelog-page.md
View File

@@ -10,6 +10,18 @@ layout: "sidebar"
All notable changes to this project.
![](https://img.shields.io/badge/License-MIT-yellow.svg)
## v2.2.1
Released December 31, 2025
**ES module compatibility fix for configure-fork.ts**
- Fixed `__dirname is not defined` error when running `npm run configure`
- Added `fileURLToPath` import from `url` module to create ES module equivalent of `__dirname`
- Script now works correctly with `"type": "module"` in package.json
Updated files: `scripts/configure-fork.ts`, `files.md`, `changelog.md`, `content/pages/changelog-page.md`, `TASK.md`
## v2.2.0
Released December 30, 2025

2
files.md
View File

@@ -211,7 +211,7 @@ Markdown files for static pages like About, Projects, Contact, Changelog.
| `sync-posts.ts` | Syncs markdown files to Convex at build time (markdown sync v2) |
| `sync-discovery-files.ts` | Updates AGENTS.md, CLAUDE.md, and llms.txt with current app data |
| `import-url.ts` | Imports external URLs as markdown posts (Firecrawl) |
| `configure-fork.ts` | Automated fork configuration (reads fork-config.json) |
| `configure-fork.ts` | Automated fork configuration (reads fork-config.json). ES module compatible using fileURLToPath for __dirname equivalent. |
| `send-newsletter.ts` | CLI tool for sending newsletter posts (npm run newsletter:send <slug>). Calls scheduleSendPostNewsletter mutation directly. |
| `send-newsletter-stats.ts` | CLI tool for sending weekly stats summary (npm run newsletter:send:stats). Calls scheduleSendStatsSummary mutation directly. |
| `sync-server.ts` | Local HTTP server for executing sync commands from Dashboard UI. Runs on localhost:3001 with optional token authentication. Whitelisted commands only. Part of markdown sync v2. |

12
public/raw/changelog.md
View File

@@ -8,6 +8,18 @@ Date: 2025-12-31
All notable changes to this project.
![](https://img.shields.io/badge/License-MIT-yellow.svg)
## v2.2.1
Released December 31, 2025
**ES module compatibility fix for configure-fork.ts**
- Fixed `__dirname is not defined` error when running `npm run configure`
- Added `fileURLToPath` import from `url` module to create ES module equivalent of `__dirname`
- Script now works correctly with `"type": "module"` in package.json
Updated files: `scripts/configure-fork.ts`, `files.md`, `changelog.md`, `content/pages/changelog-page.md`, `TASK.md`
## v2.2.0
Released December 30, 2025

110
public/raw/markdown-with-code-examples.md
View File

@@ -600,3 +600,113 @@ Indent code blocks with 4 spaces inside list items:
| `![alt](image.png)` | image |
| `> quote` | blockquote |
| `---` | horizontal rule |
## Image grid
Create a grid layout using HTML and CSS Grid. Each cell contains an image, text, and a link:
```html
<div
style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0;"
>
<div style="text-align: center;">
<img
src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=200&h=200&fit=crop"
alt=""
style="width: 100%; height: auto; border-radius: 4px;"
/>
<p style="margin: 0.5rem 0 0.25rem;">Nature</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;"
>View</a
>
</div>
<!-- Repeat for 15 more cells -->
</div>
```
Result:
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0;">
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Nature</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Mountains</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Ocean</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Forest</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Landscape</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Desert</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Sky</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Sunset</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Beach</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">River</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Valley</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Flowers</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Lake</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Meadow</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Waterfall</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
<div style="text-align: center;">
<img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=200&h=200&fit=crop" alt="" style="width: 100%; height: auto; border-radius: 4px;" />
<p style="margin: 0.5rem 0 0.25rem;">Sunrise</p>
<a href="https://unsplash.com" style="font-size: 0.875rem; color: inherit;">View</a>
</div>
</div>
**Note:** The grid uses CSS Grid with `repeat(4, 1fr)` to create 4 equal columns. Images have empty `alt` attributes so no captions appear. Adjust the `gap` value to change spacing between cells.

5
scripts/configure-fork.ts
View File

@@ -21,6 +21,11 @@
import * as fs from "fs";
import * as path from "path";
import { fileURLToPath } from "url";
// ES module equivalent of __dirname
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// Configuration interface matching fork-config.json
interface ForkConfig {

9
src/components/BlogPost.tsx
View File

@@ -11,7 +11,7 @@ import NewsletterSignup from "./NewsletterSignup";
import ContactForm from "./ContactForm";
import siteConfig from "../config/siteConfig";
// Sanitize schema that allows collapsible sections (details/summary) and inline styles for lists
// Sanitize schema that allows collapsible sections (details/summary) and inline styles
const sanitizeSchema = {
...defaultSchema,
tagNames: [...(defaultSchema.tagNames || []), "details", "summary"],
@@ -21,6 +21,13 @@ const sanitizeSchema = {
ul: ["style"], // Allow inline styles on ul for list-style control
ol: ["style"], // Allow inline styles on ol for list-style control
li: ["style"], // Allow inline styles on li elements
div: ["style"], // Allow inline styles on div for grid layouts
p: ["style"], // Allow inline styles on p elements
a: ["style", "href", "target", "rel"], // Allow inline styles on links
img: [
...(defaultSchema.attributes?.img || []),
"style",
], // Allow inline styles on images
},
};