Make client side web components part of Nuemark

packages/nuekit/src/init.js

@@ -17,7 +17,7 @@ export async function init({ dist, is_dev, esbuild }) {
 
 
   // has all latest?
-  const latest = join(outdir, '.016')
+  const latest = join(outdir, '.020')
   try {
     return await fs.stat(latest)
 
@@ -64,8 +64,8 @@ export async function init({ dist, is_dev, esbuild }) {
   // lets do it
   log(`Initialize ${dist}`)
 
+  await buildPackage('nuemark', 'nuemark.js')
   await buildPackage('nuejs-core', 'nue.js')
-
   await buildFile('page-router')
   await buildFile('app-router')
   await buildFile('mount')

packages/nuekit/src/nuekit.js

@@ -4,9 +4,9 @@ import { join, parse as parsePath, extname, basename } from 'node:path'
 import { renderHead, getDefaultHTML, getDefaultSPA } from './layout.js'
 import { readStats, printTable, categorize } from './stats.js'
 import { log, colors, getAppDir, getParts } from './util.js'
+import { parsePage, renderPage } from 'nuemark/index.js'
 import { createServer, send } from './nueserver.js'
 import { buildCSS, buildJS } from './builder.js'
-import { parsePage, renderPage } from 'nuemark'
 import { promises as fs } from 'node:fs'
 import { createSite } from './site.js'
 import { fswatch } from './nuefs.js'
@@ -74,6 +74,7 @@ export async function createKit(args) {
     // system scripts
     if (!data.is_spa && data.page_router) push('page-router')
     if (is_dev && !data.no_hotreload) push('hotreload')
+    if (data.page?.isomorphic) push('nuemark')
     if (data.components?.length) push('mount')
   }
 
@@ -142,8 +143,7 @@ export async function createKit(args) {
     const dir = data.appdir || file.dir
     const lib = await site.getLayoutComponents(dir)
 
-    const { html } = renderPage(data.page, { data, lib })
-    data.content = html
+    data.content = renderPage(data.page, { data, lib })
 
     function render(name, def) {
       const layout = lib.find(el => el.tagName == name) || def && parseNue(def)[0]

packages/nuekit/src/site.js

@@ -2,9 +2,9 @@
 import { join, extname, basename, sep, parse as parsePath } from 'node:path'
 import { log, getParts, getAppDir, getDirs, colors } from './util.js'
 import { parse as parseNue } from 'nuejs-core/index.js'
+import { nuemark } from 'nuemark/index.js'
 import { promises as fs } from 'node:fs'
 import { fswalk } from './nuefs.js'
-import { nuemark } from 'nuemark'
 import yaml from 'js-yaml'
 
 

packages/nuemark/package.json

@@ -10,6 +10,9 @@
     "directory": "packages/nuemark",
     "type": "git"
   },
+
+  "main": "src/browser/nuemark.js",
+
   "dependencies": {
     "js-yaml": "^4.1.0",
     "marked": "^9.1.2"

packages/nuemark/src/browser/nuemark.js

@@ -0,0 +1,39 @@
+
+export function $(query, root=document) {
+  return root.querySelector(query)
+}
+
+export function $$(query, root=document) {
+  return [ ...root.querySelectorAll(query)]
+}
+
+function toggleClass(all, item, name='selected') {
+  all.forEach(el => {
+    if (el == item) el.classList.add(name)
+    else el.classList.remove(name)
+  })
+}
+
+class Tabs extends HTMLElement {
+  constructor() {
+    super()
+    const links = $$('nav a', this)
+    const items = $$('li', this)
+
+    function toggle(i) {
+      toggleClass(links, links[i])
+      toggleClass(items, items[i])
+    }
+
+    links.forEach((link, i) => {
+      link.onclick = (e) => {
+        e.preventDefault()
+        toggle(i)
+      }
+    })
+
+    toggle(0)
+  }
+}
+
+customElements.define('nuemark-tabs', Tabs, { extends: 'section' })

packages/nuemark/src/parse.js

@@ -1,6 +1,7 @@
 
 import { parseAttr, parseSpecs, parseComponent } from './component.js'
 import { loadAll, load as parseYAML } from 'js-yaml'
+import { ISOMORPHIC } from './tags.js'
 import { marked } from 'marked'
 const NL = '\n'
 
@@ -12,13 +13,16 @@ export function parsePage(lines) {
 
   const sections = parseSections(rest)
   const headings = [], links = {}
+  let isomorphic
 
   for (const section of sections) {
     const blocks = section.blocks = []
 
     for (const block of parseBlocks(section.lines)) {
       const { name, data, body } = block
 
+      if (name && ISOMORPHIC.includes(name)) isomorphic = true
+
       // component body
       if (body) {
         const content = body.join(NL)
@@ -46,7 +50,7 @@ export function parsePage(lines) {
     meta.title = h1?.text
   }
 
-  return { meta, sections, headings, links }
+  return { meta, sections, headings, links, isomorphic }
 }
 
 

packages/nuemark/src/render.js

@@ -18,7 +18,7 @@ export function renderPage(page, opts) {
 
     const html = join(section.blocks.map(el => {
       const { name, md, attr } = el
-      const comp = name && lib.find(el => el.name == name)
+      const comp = name && lib.find(el => [name, toCamelCase(name)].includes(el.name))
       const alldata = { ...data, ...el.data, attr }
       const tag = tags[name]
 
@@ -37,8 +37,8 @@ export function renderPage(page, opts) {
         // island
         name ? renderIsland(el) :
 
-        // generic block
-        tags.block(alldata, opts)
+        // generic layout
+        tags.layout(alldata, opts)
 
     }))
 
@@ -50,6 +50,10 @@ export function renderPage(page, opts) {
   return { ...page, html: join(ret) }
 }
 
+function toCamelCase(str) {
+  return str.split('-').map(el => el[0].toUpperCase() + el.slice(1)).join('')
+}
+
 export function renderLines(lines, opts={}) {
   const page = parsePage(lines)
   return renderPage(page, opts)

packages/nuemark/src/tags.js

@@ -22,9 +22,11 @@
 */
 
 import { renderCodeBlock } from './render.js'
+import { nuemarkdown } from '../index.js'
 import { parseInline } from 'marked'
-import { nuemarkdown } from '..'
 
+// list all tags that require a client-side Web Component
+export const ISOMORPHIC = ['tabs']
 
 export const tags = {
 
@@ -40,8 +42,8 @@ export const tags = {
     return elem('img', { src, alt: alt || `${_} icon` })
   },
 
-  table({ attr, head, items=[] }) {
-    const ths = toArray(head).map(val => elem('th', parseInline(val.trim())))
+  table({ attr, head, _, items=[] }) {
+    const ths = toArray(head || _).map(val => elem('th', parseInline(val.trim())))
     const thead = elem('thead', elem('tr', join(ths)))
 
     const trs = items.map(row => {
@@ -52,8 +54,8 @@ export const tags = {
     return elem('table', attr, thead + elem('tbody', join(trs)))
   },
 
-  // generic fallback block
-  block(data, opts) {
+  // generic layout block
+  layout(data, opts) {
     const { content=[]} = data
     // const bc = data.block_class || 'block'
     // { class: `${bc} ${bc}-${i + 1}` }
@@ -62,7 +64,7 @@ export const tags = {
       return content[1] ? elem('div', html) : html
     })
 
-    return elem('section', data.attr, join(divs))
+    return elem(divs[1] ? 'section' : 'div', data.attr, join(divs))
   },
 
   /*
@@ -106,7 +108,7 @@ export const tags = {
   video(data, opts) {
     const { _, sources=[] } = data
 
-    // inneer <source> tags
+    // inner <source> tags
     const html = sources.map(src => elem('source', { src, type: getMimeType(src) }) )
 
     // fallback content
@@ -122,19 +124,19 @@ export const tags = {
       2. [tabs "First, Second, Third"]
   */
   tabs(data, opts) {
-    const { attr, name='tab', content=[], _ } = data
+    const { attr, key='tab', content=[], _ } = data
     const half = Math.round(content.length / 2)
     const t = _ || data.tabs
     const tabs_arr = t ? toArray(t) : content.slice(0, half)
 
     const tabs = tabs_arr.map((el, i) => {
       const html = t ? el : nuemarkdown(el, opts)
-      return elem('a', { href: `#${name}-${i+1}` }, html )
+      return elem('a', { href: `#${key}-${i+1}` }, html )
     })
 
     const panes = content.slice(t ? 0 : half).map((el, i) => {
       const html = nuemarkdown(el, opts)
-      return elem('li', { id: `${name}-${i+1}` }, html )
+      return elem('li', { id: `${key}-${i+1}` }, html )
     })
 
     return elem('section', { is: 'nuemark-tabs', class: 'tabs', ...attr },
@@ -143,6 +145,9 @@ export const tags = {
     )
   },
 
+
+  /* later
+
   codetabs(data, opts) {
     const { content=[] } = data
     const types = toArray(data.types) || []
@@ -159,7 +164,6 @@ export const tags = {
     return tags.tabs(data, opts)
   },
 
-  /* later
   grid(data, opts) {
     const { attr, content=[], _='a'} = data
     const { cols, colspan } = getGridCols(content.length, _)
@@ -222,19 +226,20 @@ export function concat(a, b) {
 }
 
 export function createPicture(img_attr, data) {
-  const { small, offset=768 } = data
+  const { small, offset=750 } = data
 
   const sources = [small, img_attr.src].map(src => {
     const prefix = src == small ? 'max' : 'min'
-    const media = `(${prefix}-width: ${offset}px)`
+    const media = `(${prefix}-width: ${parseInt(offset)}px)`
     return elem('source', { src, media, type: getMimeType(src) })
   })
 
   sources.push(elem('img', img_attr))
   return elem('picture', !data.caption && data.attr, join(sources))
 }
 
-// more complex grids later
+
+/* more complex grids later
 const GRID = {
   a: [2, 3, 2, '2/2', 3, '3/3', 4, 3],
   b: [2, '2/2', '3/3']
@@ -246,6 +251,7 @@ export function getGridCols(am, variant='a') {
   const [count, span] = val.toString().split('/')
   return { cols: Array(1 * count).fill('1fr').join(' '), colspan: 1 * span }
 }
+*/
 
 
 function getVideoAttrs(data) {

packages/nuemark/test/file-test.js

@@ -1,6 +1,6 @@
 
+import { nuemarkdown } from '../index.js'
 import { promises as fs } from 'node:fs'
-import { nuemarkdown } from '..'
 
 const opts = {}