feat: (WIP) load marked extensions from js file

packages/nuekit/src/nuekit.js

@@ -24,7 +24,7 @@ export async function createKit(args) {
  // site: various file based functions
  const site = await createSite(args)
 
- const { dist, port, read, copy, write, is_empty } = site
+ const { dist, port, read, copy, write, is_empty, marked_extensions } = site
  const is_dev = !is_prod
 
  // make sure @nue dir has all the latest
@@ -134,7 +134,7 @@ export async function createKit(args) {
  const dir = data.appdir || file.dir
  const lib = await site.getLayoutComponents(dir)
 
- data.content = renderPage(data.page, { data, lib }).html
+ data.content = renderPage(data.page, { data, lib, marked_extensions }).html
 
  function render(name, def) {
  const layout = lib.find(el => el.tagName == name) || def && parseNue(def)[0]

packages/nuekit/src/site.js

@@ -80,6 +80,10 @@ export async function createSite(args) {
  self.is_empty = true
  }
 
+ const markedConfig = join(process.cwd(), root, site_data.marked_config || 'marked.config.js')
+ const { default: marked_extensions=[] } = await import(markedConfig).catch(() => ({}))
+ // TODO: exclude `markedConfig` path from output dir
+
  async function write(content, dir, filename) {
  const todir = join(dist, dir)
 
@@ -300,6 +304,6 @@ export async function createSite(args) {
  }
  }
 
- return { ...self, dist, port, read, write, copy }
+ return { ...self, dist, port, read, write, copy, marked_extensions }
 
 }

packages/nuemark/src/render.js

@@ -4,14 +4,48 @@ import { parsePage, parseHeading } from './parse.js'
 import { parseAttr } from './component.js'
 import { marked } from 'marked'
 
+let exts_loaded = false
+
+marked.setOptions({
+ smartypants: true,
+ headerIds: false,
+ smartLists: false,
+ mangle: false
+})
+
+// marked renderers
+const renderer = {
+
+ heading(html, level, raw) {
+ const plain = parseHeading(raw)
+ const cls = plain.class
+ const title = plain.text.replaceAll('"', '')
+ const rich = parseHeading(html)
+
+ delete plain.text
+ const a = elem('a', { href: `#${plain.id}`, title: title })
+ return elem(`h${level}`, plain, a + rich.text)
+ },
+
+ // lazyload images by default
+ image(src, title, alt) {
+ return elem('img', { src, title, alt, loading: 'lazy' })
+ },
+}
+
+marked.use({ renderer })
 
 export function renderPage(page, opts) {
- const { lib=[] } = opts
+ const { lib=[], marked_extensions=[] } = opts
  const data = { ...opts.data, ...page.meta }
  const draw_sections = data?.draw_sections || page.sections[1]
  const section_attr = data.sections || []
  const ret = []
 
+ if (!exts_loaded && marked_extensions.length) {
+ exts_loaded = true
+ marked.use(...marked_extensions)
+ }
 
  // section_attr
  page.sections.forEach((section, i) => {
@@ -94,32 +128,3 @@ function parseLink(href) {
  if (title) href = href.slice(0, i)
  return { href, title }
 }
-
-marked.setOptions({
- smartypants: true,
- headerIds: false,
- smartLists: false,
- mangle: false
-})
-
-// marked renderers
-const renderer = {
-
- heading(html, level, raw) {
- const plain = parseHeading(raw)
- const cls = plain.class
- const title = plain.text.replaceAll('"', '')
- const rich = parseHeading(html)
-
- delete plain.text
- const a = elem('a', { href: `#${plain.id}`, title: title })
- return elem(`h${level}`, plain, a + rich.text)
- },
-
- // lazyload images by default
- image(src, title, alt) {
- return elem('img', { src, title, alt, loading: 'lazy' })
- },
-}
-
-marked.use({ renderer })