Gato/MarkdownRender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init project

Browse Source
This commit is contained in:
Cédric OLIVIER
2026-06-04 08:30:34 +02:00
commit 1265beefb8
1625 changed files with 208085 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/converter.js
+389
View File
@@ -0,0 +1,389 @@
const fs = require('fs');
const path = require('path');
const { marked } = require('marked');
const { markedHighlight } = require('marked-highlight');
const hljs = require('highlight.js');
marked.use(markedHighlight({
langPrefix: 'hljs language-',
highlight(code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
},
}));
// ─────────────────────────────────────────────────────────────────────────────
// CSS — inspiré de https://github.com/PavelLaptev/markdown-theme-shell
// ─────────────────────────────────────────────────────────────────────────────
const STYLES = `
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
::selection { background: #ffc3c3; }
html, body { height: 100%; margin: 0; }
body {
font-family: 'Poppins', sans-serif;
background: #fff;
color: #222;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ── Sidebar ── */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 264px;
height: 100vh;
background: #1a1b2e;
display: flex;
flex-direction: column;
z-index: 99;
overflow: hidden;
}
.sidebar__title-block {
margin: 48px 24px 8px;
flex-shrink: 0;
}
.sidebar__title-block a {
text-decoration: none;
}
.sidebar__title-block__title {
color: #fff;
font-size: 26px;
font-weight: 700;
margin: 0 0 4px;
line-height: 1.25;
pointer-events: none;
}
.sidebar__title-block__version {
color: rgba(255,255,255,0.3);
font-size: 14px;
font-weight: 700;
display: block;
margin-bottom: 24px;
}
/* ── Sidebar menu ── */
.sidebar__menu {
list-style: none;
margin: 0;
padding: 8px 0 48px 0;
flex: 1;
overflow-y: auto;
}
.sidebar__menu::-webkit-scrollbar { width: 0; }
/* First-level = section group label (non-clickable) */
.sidebar__menu__group-label {
display: block;
padding: 16px 24px 6px;
color: rgba(255,255,255,0.35);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* First-level links (root files or group header links) */
.sidebar__menu__first-level-title { margin: 0; }
.sidebar__menu__first-level-title__link {
display: block;
padding: 7px 24px;
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
transition: color 0.2s;
}
.sidebar__menu__first-level-title__link:hover { color: #ff5577; }
.sidebar__menu__first-level-title__link.active {
color: #ff5577;
font-weight: 500;
}
/* Second-level links (files inside a group) */
.sidebar__menu__second-level { list-style: none; padding: 0; margin: 0; }
.sidebar__menu__second-level-title { margin: 0; }
.sidebar__menu__second-level-title__link {
display: block;
padding: 5px 24px 5px 36px;
color: rgba(255,255,255,0.55);
text-decoration: none;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
transition: color 0.2s;
}
.sidebar__menu__second-level-title__link:hover { color: #ff5577; }
.sidebar__menu__second-level-title__link.active {
color: #ff5577;
opacity: 1;
}
/* ── Content ── */
.content {
margin-left: 264px;
padding: 48px 72px 96px;
max-width: 1080px;
min-height: 100vh;
background: #fff;
}
/* ── Typography ── */
.content a { color: #0000ee; text-decoration: none; transition: color 0.16s; }
.content a:hover { color: #ff5577; }
.content a:visited { color: #551a8b; }
.content a:visited:hover { color: #ff5577; }
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
color: #222;
margin-top: 48px;
margin-bottom: 12px;
line-height: 1.3;
}
.content h1 { font-size: 2em; margin-top: 0; }
.content h2 { font-size: 1.5em; }
.content h3 { font-size: 1.25em; }
.content hr { margin: 72px 0; border: none; border-top: 1px solid rgba(34,34,34,0.15); }
.content p { color: #222; font-size: 1em; line-height: 1.64em; margin: 0 0 1em; }
.content code {
font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;
font-size: 85%;
font-weight: 700;
background: #f4f4f7;
padding: 0.15em 0.4em;
border-radius: 4px;
line-height: 1.4;
}
.content pre { background: #f4f4f7; padding: 20px 24px; border-radius: 6px; overflow-x: auto; margin: 16px 0; }
.content pre code { background: none; padding: 0; font-weight: 400; font-size: 13px; }
.content blockquote {
border-left: 3px solid rgba(34,34,34,0.25);
margin: 24px 0;
padding: 4px 24px;
color: rgba(34,34,34,0.65);
}
.content img { max-width: 100%; margin: 8px 0; }
.content table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
margin: 24px 0 48px;
font-size: 14px;
color: #222;
}
.content table th {
border-bottom: 1px solid #ff5577;
padding: 10px;
text-align: left;
font-weight: 600;
}
.content table td {
border-bottom: 1px solid rgba(255,85,119,0.25);
padding: 10px;
}
.content ul li, .content ol li {
color: #222;
font-size: 1em;
line-height: 1.64em;
margin-bottom: 8px;
}
.content ul li code, .content ol li code { font-weight: 700; }
/* ── Responsive ── */
@media screen and (max-width: 1020px) {
.sidebar {
left: -300px;
transition: left 0.2s cubic-bezier(0.09, 0.46, 0.45, 0.94);
}
.content { margin-left: 0; padding: 32px 24px 64px; }
}
@media screen and (max-width: 540px) {
.content { padding: 24px 16px 48px; }
}`;
const SSE_SCRIPT = `
<script>
const es = new EventSource('/events');
es.onmessage = () => location.reload();
es.onerror = () => { es.close(); console.warn('Live reload disconnected'); };
</script>`;
// ─────────────────────────────────────────────────────────────────────────────
// Helpers
// ─────────────────────────────────────────────────────────────────────────────
function escapeHtml(str) {
return String(str)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
}
/** Build the sidebar HTML from the list of all pages (Shell theme structure). */
function buildSidebar(baseDir, files, currentFile) {
const currentRel = currentFile ? path.relative(baseDir, currentFile) : null;
// Group by first-level subdirectory
const groups = new Map(); // groupName → [rel, ...]
files.forEach((f) => {
const rel = path.relative(baseDir, f);
const parts = rel.split(path.sep);
const group = parts.length > 1 ? parts[0] : '';
if (!groups.has(group)) groups.set(group, []);
groups.get(group).push(rel);
});
const dirName = path.basename(baseDir);
let html = `
<aside class="sidebar">
<div class="sidebar__title-block">
<a href="/"><h1 class="sidebar__title-block__title">${escapeHtml(dirName)}</h1></a>
</div>
<ul class="sidebar__menu">`;
const sortedGroups = [...groups.keys()].sort((a, b) => {
if (a === '') return -1;
if (b === '') return 1;
return a.localeCompare(b);
});
sortedGroups.forEach((group) => {
const pages = groups.get(group).sort();
if (group !== '') {
// Group label + second-level links
html += `\n <li class="sidebar__menu__first-level-title">
<span class="sidebar__menu__group-label">${escapeHtml(group)}</span>
<ul class="sidebar__menu__second-level">`;
pages.forEach((rel) => {
const pagePath = rel.replace(/\.md$/i, '');
const label = path.basename(pagePath).replace(/-/g, ' ');
const href = '/' + pagePath.split('/').map(encodeURIComponent).join('/');
const isActive = rel === currentRel;
const cls = isActive ? 'active' : '';
html += `\n <li class="sidebar__menu__second-level-title">
<a href="${href}" class="sidebar__menu__second-level-title__link ${cls}">${escapeHtml(label)}</a>
</li>`;
});
html += `\n </ul>
</li>`;
} else {
// Root-level links as first-level items
pages.forEach((rel) => {
const pagePath = rel.replace(/\.md$/i, '');
const label = path.basename(pagePath).replace(/-/g, ' ');
const href = '/' + pagePath.split('/').map(encodeURIComponent).join('/');
const isActive = rel === currentRel;
const cls = isActive ? 'active' : '';
html += `\n <li class="sidebar__menu__first-level-title">
<a href="${href}" class="sidebar__menu__first-level-title__link ${cls}">${escapeHtml(label)}</a>
</li>`;
});
}
});
html += `\n </ul>
</aside>`;
return html;
}
// ─────────────────────────────────────────────────────────────────────────────
// Shell
// ─────────────────────────────────────────────────────────────────────────────
function htmlShell({ title, sidebar, body, watchMode }) {
const hasSidebar = !!sidebar;
const noSidebarStyle = hasSidebar ? '' : `
<style>
body { max-width: 860px; margin: 48px auto; padding: 0 32px; }
.content { margin-left: 0; padding: 0; }
</style>`;
return `<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${escapeHtml(title)}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Mono&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<style>${STYLES}</style>${noSidebarStyle}
</head>
<body>
${hasSidebar ? sidebar : ''}
<div class="content">
${body}
</div>${watchMode ? SSE_SCRIPT : ''}
</body>
</html>`;
}
// ─────────────────────────────────────────────────────────────────────────────
// Public API
// ─────────────────────────────────────────────────────────────────────────────
/**
* Convert a single .md file to a full HTML page.
* @param {string} inputFile Absolute path to the .md file
* @param {boolean} watchMode Inject SSE live-reload script
* @param {{ baseDir: string, files: string[] }} [nav] When set, render with sidebar
*/
function convert(inputFile, watchMode = false, nav = null) {
const content = fs.readFileSync(inputFile, 'utf-8');
const body = marked.parse(content);
const title = path.basename(inputFile, '.md');
const sidebar = nav ? buildSidebar(nav.baseDir, nav.files, inputFile) : null;
return htmlShell({ title, sidebar, body, watchMode });
}
/**
* Build an index/home page listing all .md files.
* Only used when no Home.md exists.
*/
function buildIndex(baseDir, files, watchMode = false) {
const dirName = path.basename(baseDir);
const sidebar = buildSidebar(baseDir, files, null);
const groups = new Map();
files.forEach((f) => {
const rel = path.relative(baseDir, f);
const parts = rel.split(path.sep);
const group = parts.length > 1 ? parts[0] : '';
if (!groups.has(group)) groups.set(group, []);
groups.get(group).push(rel);
});
const listHtml = [...groups.keys()].sort().map((group) => {
const items = groups.get(group).sort().map((rel) => {
const pagePath = rel.replace(/\.md$/i, '');
const label = path.basename(pagePath).replace(/-/g, ' ');
const href = '/' + pagePath.split('/').map(encodeURIComponent).join('/');
return ` <li><a href="${href}">${escapeHtml(label)}</a></li>`;
}).join('\n');
if (group === '') return `<ul>\n${items}\n</ul>`;
return `<h3>${escapeHtml(group)}</h3>\n<ul>\n${items}\n</ul>`;
}).join('\n');
const body = `<h1>📂 ${escapeHtml(dirName)}</h1>
<p>${files.length} fichier${files.length > 1 ? 's' : ''} Markdown</p>
${listHtml}`;
return htmlShell({ title: dirName, sidebar, body, watchMode });
}
module.exports = { convert, buildIndex };