@beautinique/shared-markdown-to-html
v1.0.0
Published
Shared Markdown file to HTML file generation for Beautinique.
Maintainers
Readme
@beautinique/shared-markdown-to-html
Renders a Markdown file (typically a service's own README.md) into a single, self-contained, GitHub-styled HTML page (light/dark aware, no external requests) at build time.
Installation
npm install @beautinique/shared-markdown-to-htmlUsage
Call generateHtmlFromMarkdown from a small build-time script in the consuming service, and wire that script into the service's own postbuild (or predev) npm script - not into request-handling code. This way the HTML is generated once, at build time, and the server just serves the static file on every request instead of re-parsing Markdown per request:
// scripts/generate-html.mjs
import { generateHtmlFromMarkdown } from '@beautinique/shared-markdown-to-html';
generateHtmlFromMarkdown({
markdownPath: 'README.md', // default
outputPath: 'public/index.html', // default
title: 'Media Service', // required - no sensible default across services
});// package.json
{
"scripts": {
"build": "tsc",
"postbuild": "node scripts/generate-html.mjs"
}
}Then in the server:
app.get('/', (_req, res) => {
res.sendFile(path.resolve('public/index.html'));
});| Option | Default | Description |
| ------------- | -------------------- | ------------------------------------------------------------------------------ |
| markdownPath | 'README.md' | Path to the source Markdown file, resolved against cwd. |
| outputPath | 'public/index.html' | Path to write the generated HTML file to - parent directories are created if missing, resolved against cwd. |
| title | (required) | <title> of the generated page - no sensible default shared across services. |
| lang | 'en' | <html lang="...">. |
| extraStyles | undefined | Extra CSS appended after the built-in page styles (e.g. to override a color or add branding). |
| cwd | process.cwd() | Directory both paths above are resolved against. |
Using this in a frontend (Vite/React) app
This package itself only ever runs in Node.js (it reads/writes files via node:fs) - never import generateHtmlFromMarkdown into browser-bundled source (anything under src/ that Vite ships to the client). Wire it into the app's own build-time scripts instead, exactly like a backend service:
// scripts/generate-html.mjs
import { generateHtmlFromMarkdown } from '@beautinique/shared-markdown-to-html';
generateHtmlFromMarkdown({
markdownPath: 'README.md',
outputPath: 'public/docs.html', // see warning below - don't use 'public/index.html'
title: 'My App Docs',
});// package.json
{
"scripts": {
"predev": "node scripts/generate-html.mjs",
"dev": "vite",
"build": "vite build",
"postbuild": "node scripts/generate-html.mjs"
}
}Anything inside Vite's public/ directory is served as-is, unprocessed, at the matching URL path - in both vite dev and after vite build. So once public/docs.html exists, it's reachable at /docs.html, and can be shown inside the app with a plain iframe - no need to import this package (or touch node:fs) from any browser code at all:
function DocsPage() {
return <iframe src="/docs.html" title="Docs" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}Don't set outputPath to public/index.html in a Vite app - Vite's own SPA entry point is an index.html (conventionally at the project root, sometimes copied into public/), containing the <script type="module"> tag that boots the app. Overwriting it with this package's rendered Markdown page would break the app entirely. Pick a distinct filename (public/docs.html, public/readme.html, etc.) instead.
Repository
https://github.com/Nageshwar1997/BQ-Packages
Homepage
https://github.com/Nageshwar1997/BQ-Packages
Issues
https://github.com/Nageshwar1997/BQ-Packages/issues
Author
Nageshwar Pawar
License
This package is licensed under the MIT License. See the root LICENSE file for details.