import { tag as h } from "./deps.ts";import { Marked } from "./marked.ts";import { Config, NavLink, PageMeta } from "./mod.ts";import { aTag, getH1, toTitle } from "./utils.ts";import { PageLink } from "./mod.ts";
export function genNavbar(links: Array<NavLink>): string { return h( "ul", ...links.map(({ path, title, items }) => { path ||= "#"; title ||= toTitle(path);
return items ? h("li", h("span", title), genNavbar(items)) : h("li", aTag({ href: path }, title)); }), );}
export function prismJs(path: string, integrity: string) { let tagName = "link"; const cdnHost = "https://cdn.jsdelivr.net/npm/prismjs@1.24.1/"; const attr: Record<string, string | boolean> = { crossorigin: "anonymous", integrity, }; if (path.endsWith("css")) { attr.rel = "stylesheet"; attr.href = `${cdnHost}${path}`; } else { tagName = "script"; attr.src = `${cdnHost}${path}`; attr.defer = true; }
return h(tagName, attr);}
export function getPageType(pageUrl: string) { return /^https?:\/\/[^\/]+\/?$/.test(pageUrl) ? "website" : "article";}
export function genToc(tocLevels: Array<number>, content: string) { const levels = tocLevels.join("").replace(/[^1-6]/g, "");
if (!levels) { return ""; }
const regex = new RegExp( `<h([${levels}]) [^>]*id="([^"]+)"[^>]*>(.*?)<\/h[${levels}]>`, "g", ); let minLevel = 6;
const tocMd = (content.match(regex) || []).map((matched) => { const [levelStr, id] = (matched.replace(regex, "$1 $2") || "").split(" "); const level = Number(levelStr); if (level < minLevel) { minLevel = level; } const text = matched.replace(/<[^>]*>/g, ""); return `${" ".repeat(level)}- [${text}](#${id})`; }).map((str) => str.slice(minLevel * 2)).join("\n");
const tocHtml = Marked.parse(tocMd).content;
return tocHtml ? h( "details", { id: "table-of-contents" }, h("summary", "Table of contents"), tocHtml.replace(/\n/g, ""), ) : "";}
export function genPageLink( page?: PageLink, attributes?: Record<string, string | number | boolean>,) { return page ? aTag({ ...attributes, href: page.path }, page.title) : "";}
export function processTitle(title: string, siteName: string) { return title && title != siteName ? title + " | " + siteName : siteName;}
export function genHead({ content, pageUrl, siteName, description, favicon, image, twitter, removeDefaultStyles = false, bottomHead = "", title = "",}: { content: string; pageUrl: string; siteName: string; description: string; favicon: string; image: string; twitter: string; removeDefaultStyles: boolean; bottomHead: string; title?: string;}): string { const viewport = "width=device-width,initial-scale=1.0,minimum-scale=1.0"; const pageTitle = processTitle(title || getH1(content), siteName); const style = "#table-of-contents{margin:2rem;margin-bottom:0;}" + "#neighbors{display:flex;margin-bottom:1rem}" + "#neighbors>#prev,#neighbors>#next{display:block;width:50%}" + "#neighbors>#next{margin-left:auto}" + "#neighbors>#prev::before{content:'« '}#neighbors>#next::after{content:' »'}" + ".feather{width:.8rem;height:.8rem;stroke:var(--text-color);stroke-width:2;" + "stroke-linecap:round;stroke-linejoin:round;fill:none;" + "display:inline-block;margin:0 .05rem 0 .15rem;vertical-align:-.1em;}";
return h( "head", h("meta", { charset: "UTF-8" }), h("title", pageTitle), h("meta", { name: "viewport", content: viewport }), h("meta", { name: "description", content: description }), h("link", { rel: "icon", href: favicon }), h("meta", { property: "og:url", content: pageUrl }), h("meta", { property: "og:type", content: getPageType(pageUrl) }), h("meta", { property: "og:title", content: pageTitle }), h("meta", { property: "og:description", content: description }), h("meta", { property: "og:site_name", content: siteName }), h("meta", { property: "og:image", content: image }), h("meta", { name: "twitter:card", content: "summary" }), h("meta", { name: "twitter:site", content: twitter }), removeDefaultStyles ? "" : h("link", { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/holiday.css@0.9.8", }) + prismJs( "themes/prism-tomorrow.css", "sha256-0dkohC9ZEupqWbq0hS5cVR4QQXJ+mp6N2oJyuks6gt0=", ) + h("style", style), bottomHead, );}
export function genNeighbors( { prev, next }: { prev?: PageLink; next?: PageLink },) { return prev || next ? h( "div", { id: "neighbors" }, genPageLink(prev, { id: "prev" }), genPageLink(next, { id: "next" }), ) : "";}
export function genBody({ content, siteName, navLinks = [], removeDefaultStyles = false, bottomBody = "", tocLevels = [], prev, next,}: { content: string; siteName: string; navLinks: Array<NavLink>; removeDefaultStyles: boolean; bottomBody: string; tocLevels: Array<number>; prev?: PageLink; next?: PageLink;}): string { const href = "https://github.com/kawarimidoll/deno-diplodocus"; return h( "body", h("header", h("h1", aTag({ href: "/" }, siteName))), h("nav", { id: "header-nav" }, genNavbar(navLinks)), genToc(tocLevels, content), h("main", content), h( "footer", genNeighbors({ prev, next }), h("div", "Powered by ", aTag({ href }, "Diplodocus")), ), removeDefaultStyles ? "" : prismJs( "components/prism-core.min.js", "sha256-dz05jjFU9qYuMvQQlE6iWDtNAnEsmu6uMb1vWhKdkEM=", ) + prismJs( "plugins/autoloader/prism-autoloader.min.js", "sha256-sttoa+EIAvFFfeeIkmPn8ypyOOb6no2sZ2NbxtBXgqU=", ), bottomBody, );}
export function renderPage({ content, pageMeta, siteMeta, pageUrl,}: { content: string; pageMeta: PageMeta; siteMeta: Config; pageUrl: string;}): string { const config = { content, pageUrl, ...siteMeta, ...pageMeta };
return "<!DOCTYPE html>" + h("html", { lang: config.lang }, genHead(config), genBody(config));}