Add layout styles and scripts

bin.js

@@ -105,7 +105,7 @@ async function run () {
     try {
       const results = await siteup.build()
       console.log(tree(generateTreeData(cwd, src, dest, results)))
-      if (results?.warnings) {
+      if (results?.warnings?.length > 0) {
         console.log(
           '\nThere were build warnings:\n'
         )

lib/build-esbuild/index.js

@@ -19,6 +19,11 @@ export async function buildEsbuild (src, dest, siteData, opts) {
     if (page.pageStyle) entryPoints.push(join(src, page.pageStyle.relname))
   }
 
+  for (const layout of Object.values(siteData.layouts)) {
+    if (layout.layoutClient) entryPoints.push(join(src, layout.layoutClient.relname))
+    if (layout.layoutStyle) entryPoints.push(join(src, layout.layoutStyle.relname))
+  }
+
   const browserVars = await resolveVars(siteData?.globalVars?.filepath, 'browser')
 
   const define = {}
@@ -103,6 +108,24 @@ export async function buildEsbuild (src, dest, siteData, opts) {
       }
     }
 
+    for (const layout of Object.values(siteData.layouts)) {
+      if (layout.layoutStyle) {
+        const outputRelname = outputMap[layout.layoutStyle.relname]
+        if (outputRelname) {
+          layout.layoutStyle.outputRelname = outputRelname
+          layout.layoutStyle.outputName = basename(outputRelname)
+        }
+      }
+
+      if (layout.layoutClient) {
+        const outputRelname = outputMap[layout.layoutClient.relname]
+        if (outputRelname) {
+          layout.layoutClient.outputRelname = outputRelname
+          layout.layoutClient.outputName = basename(outputRelname)
+        }
+      }
+    }
+
     return { ...buildResults, buildOpts, type: 'esbuild' }
   } catch (err) {
     const report = {

lib/build-pages/index.js

@@ -102,7 +102,19 @@ export async function buildPagesDirect (src, dest, siteData) {
         }
       )
     } else {
-      resolvedLayouts[resolvedLayoutResult.value[0]] = resolvedLayoutResult.value[1]
+      const layoutName = resolvedLayoutResult.value[0]
+      const layoutFn = resolvedLayoutResult.value[1]
+      const layoutStyle = siteData.layouts?.[layoutName]?.layoutStyle
+      const layoutStylePath = layoutStyle?.outputRelname ?? layoutStyle?.relname
+
+      const layoutClient = siteData.layouts?.[layoutName]?.layoutClient
+      const layoutClientPath = layoutClient?.outputRelname ?? layoutClient?.relname
+
+      resolvedLayouts[layoutName] = {
+        render: layoutFn,
+        layoutStylePath: layoutStylePath ? `/${layoutStylePath}` : null,
+        layoutClientPath: layoutClientPath ? `/${layoutClientPath}` : null
+      }
     }
   }
 
@@ -125,11 +137,10 @@ export async function buildPagesDirect (src, dest, siteData) {
         src,
         dest,
         page,
+        siteData,
         layouts: resolvedLayouts,
-        globalVars: {
-          ...defaultVars.value,
-          ...globalVars.value
-        }
+        defaultVars: defaultVars.value,
+        globalVars: globalVars.value
       })
 
       report.success.push(buildResult)

lib/build-pages/page-builders/create-page-builder.js

@@ -19,15 +19,38 @@ export function createPageBuilder (builder) {
     dest,
     page,
     layouts,
+    siteData,
+    defaultVars,
     globalVars
   }) => {
     const pageVars = await resolveVars(page.pageVars ? page.pageVars.filepath : null)
-    const { vars, pageLayout } = await builder({ page })
+    const { vars: builderVars, pageLayout } = await builder({ page })
 
     const pageDir = join(dest, page.path)
     const pageFile = join(pageDir, page.outputName)
 
-    const finalVars = Object.assign({}, globalVars, pageVars, vars)
+    const finalVars = {
+      siteData,
+      page,
+      ...defaultVars,
+      ...globalVars,
+      ...pageVars,
+      ...builderVars
+    }
+
+    Object.assign({}, globalVars, pageVars, builderVars)
+
+    const output = await pageLayout(finalVars)
+
+    const layout = layouts[finalVars.layout]
+
+    if (layout.layoutStylePath) {
+      finalVars.styles.push(layout.layoutStylePath)
+    }
+
+    if (layout.layoutClientPath) {
+      finalVars.scripts.push(layout.layoutClientPath)
+    }
 
     if (page.pageStyle) {
       finalVars.styles.push(`./${page.pageStyle.outputName ?? page.pageStyle.basename}`)
@@ -36,11 +59,7 @@ export function createPageBuilder (builder) {
       finalVars.scripts.push(`./${page.clientBundle.outputName ?? page.clientBundle.basename}`)
     }
 
-    const output = await pageLayout(finalVars)
-
-    const layout = layouts[finalVars.layout]
-
-    const pageOutput = await layout({
+    const pageOutput = await layout.render({
       ...finalVars,
       children: output
     })

lib/identify-pages.js

@@ -1,11 +1,14 @@
 import { asyncFolderWalker } from 'async-folder-walker'
 import assert from 'webassert'
 import desm from 'desm'
-import { resolve } from 'path'
+import { resolve, relative, join } from 'path'
+import { stat } from 'fs/promises'
 
 const __dirname = desm(import.meta.url)
 
 const layoutSuffix = '.layout.js'
+const layoutClientSuffix = '.layout.client.js'
+const layoutStyleSuffix = '.layout.css'
 const templateSuffix = '.template.js'
 
 /**
@@ -82,7 +85,8 @@ export async function identifyPages (src, pageBuilders, opts = {}) {
         clientBundle,
         pageVars,
         path: dir,
-        outputName: 'index.html'
+        outputName: 'index.html',
+        outputRelname: join(dir, 'index.html')
       })
     }
 
@@ -102,13 +106,52 @@ export async function identifyPages (src, pageBuilders, opts = {}) {
       if (fileName.endsWith(layoutSuffix)) {
         const layoutName = fileName.slice(0, -layoutSuffix.length)
 
-        if (layouts[layoutName]) {
+        if (layouts?.[layoutName]?.relname) {
           warnings.push({
             type: 'duplicate-layout',
             message: `Skipping ${fileInfo.relname}. Duplicate layout name ${layoutName} to ${layouts[layoutName].relname}`
           })
         } else {
           layouts[layoutName] = fileInfo
+          layouts[layoutName].layoutName = layoutName
+        }
+      }
+
+      if (fileName.endsWith(layoutStyleSuffix)) {
+        const layoutStyleName = fileName.slice(0, -layoutStyleSuffix.length)
+
+        if (layouts?.[layoutStyleName]?.layoutStyle) {
+          warnings.push({
+            type: 'duplicate-layout-style',
+            message: `Skipping ${fileInfo.relname}. Duplicate layout style name ${layoutStyleName} to ${layouts[layoutStyleName].layoutStyle.relname}`
+          })
+        } else {
+          if (layouts[layoutStyleName]) {
+            layouts[layoutStyleName].layoutStyle = fileInfo
+          } else {
+            layouts[layoutStyleName] = {
+              layoutStyle: fileInfo
+            }
+          }
+        }
+      }
+
+      if (fileName.endsWith(layoutClientSuffix)) {
+        const layoutClientName = fileName.slice(0, -layoutClientSuffix.length)
+
+        if (layouts?.[layoutClientName]?.layoutClient) {
+          warnings.push({
+            type: 'duplicate-layout-client',
+            message: `Skipping ${fileInfo.relname}. Duplicate layout client name ${layoutClientName} to ${layouts[layoutClientName].layoutClient.relname}`
+          })
+        } else {
+          if (layouts[layoutClientName]) {
+            layouts[layoutClientName].layoutClient = fileInfo
+          } else {
+            layouts[layoutClientName] = {
+              layoutClient: fileInfo
+            }
+          }
         }
       }
 
@@ -133,7 +176,17 @@ export async function identifyPages (src, pageBuilders, opts = {}) {
       message: 'Missing a root.layout.js file. Using default layout file.'
     })
 
-    layouts.root = { filepath: resolve(__dirname, './defaults/default.root.layout.js') }
+    const defaultLayoutBasename = 'default.root.layout.js'
+    const defaultLayoutFilepath = resolve(__dirname, `./defaults/${defaultLayoutBasename}`)
+    const defaultLayoutRelpath = relative(src, defaultLayoutFilepath)
+    layouts.root = {
+      filepath: defaultLayoutFilepath,
+      stat: await stat(defaultLayoutFilepath),
+      relname: defaultLayoutRelpath,
+      basename: defaultLayoutBasename,
+      parentName: defaultLayoutRelpath.slice(0, -(defaultLayoutBasename.length + 1)),
+      layoutName: 'root'
+    }
   }
 
   // TODO: maybe formalize this in identify pages later

lib/identify-pages.test.js

@@ -17,7 +17,7 @@ tap.test('identifyPages works as expected', async (t) => {
   t.equal(Object.keys(results.pages).length, 11, '11 pages are found')
 
   t.equal(results.warnings.length, 0, '0 warnings produced')
-  t.equal(results.nonPageFolders.length, 2, '2 non-page-folder')
+  t.equal(results.nonPageFolders.length, 3, '3 non-page-folder')
   t.equal(results.pages.find(p => p.path === 'html-page').page.type, 'html', 'html page is type html')
   t.equal(results.pages.find(p => p.path === 'md-page').page.type, 'md', 'md page is type md')
   t.equal(results.pages.find(p => p.path === 'js-page').page.type, 'js', 'js-page is type js')

package.json

@@ -19,7 +19,6 @@
   "dependencies": {
     "aggregate-error-ponyfill": "^1.1.0",
     "async-folder-walker": "^2.1.1",
-    "autoprefixer": "^10.3.1",
     "cheerio": "^1.0.0-rc.10",
     "chokidar": "^3.5.2",
     "clean-deep": "^3.4.0",
@@ -43,10 +42,6 @@
     "markdown-it-sup": "^1.0.0",
     "mine.css": "^9.0.1",
     "minimist": "^1.2.5",
-    "postcss": "^8.3.6",
-    "postcss-import": "^15.0.0",
-    "postcss-nesting": "^12.0.0",
-    "postcss-url": "^10.1.3",
     "pretty": "^2.0.0",
     "pretty-tree": "^1.0.0",
     "uhtml-isomorphic": "^2.0.0",
@@ -93,7 +88,7 @@
     "version:changelog": "auto-changelog -p --template keepachangelog auto-changelog --breaking-pattern 'BREAKING CHANGE:'",
     "version:git": "git add CHANGELOG.md",
     "deps": "depcruise --exclude '^node_modules|^[a-zA-Z0-9\\_]+$' --output-type dot . | dot -T svg > dependencygraph.svg",
-    "deps3d": "depcruise --exclude '^node_modules' --output-type plugin:dependency-cruiser/sample-3d-reporter-plugin --output-to 3d-dependency-graph.html .",
+    "deps3d": "depcruise --exclude '^node_modules|^[a-zA-Z0-9\\_]+$' --output-type plugin:dependency-cruiser/sample-3d-reporter-plugin --output-to 3d-dependency-graph.html .",
     "start": "npm run watch"
   },
   "funding": {
@@ -112,9 +107,6 @@
     "index.js"
   ],
   "tap": {
-    "serial": [
-      "*"
-    ],
     "typecheck": false,
     "allow-incomplete-coverage": true,
     "coverage-report": [

test-cases/general-features/src/layouts/blog.layout.client.js

@@ -0,0 +1 @@
+console.log('I run on every blog layout page')

test-cases/general-features/src/layouts/blog.layout.css

@@ -0,0 +1,5 @@
+@import "./root.layout.css";
+
+.some-blog-class {
+  color: purple;
+}

test-cases/general-features/src/layouts/blog.layout.js

@@ -0,0 +1,13 @@
+import defaultRootLayout from './root.layout.js'
+import { html } from 'uhtml-isomorphic'
+
+export default function blogLayout (vars) {
+  const { children: innerChildren, ...rest } = vars
+
+  const children = html`
+    <article>
+      ${typeof innerChildren === 'string' ? html([innerChildren]) : innerChildren /* Support both uhtml and string children. Optional. */}
+    </article>
+  `
+  return defaultRootLayout({ ...rest, children })
+}

test-cases/general-features/src/layouts/root.layout.css

@@ -0,0 +1,3 @@
+.some-root-layout-class {
+  color: green;
+}

test-cases/general-features/src/md-page/README.md

@@ -1,3 +1,6 @@
+---
+layout: "blog"
+---
 # md-page
 
 This is an md page rendered from a README.md in a folder.