${vars.title}
-
-
+ const children = render(html`
+
+
+
-
+
${typeof innerChildren === 'string'
- ? html([innerChildren])
- : innerChildren /* Support both uhtml and string children. Optional. */
+ ? html``
+ : innerChildren
}
-
-
- `
+ `)
const rootArgs = { ...rest, children }
return defaultRootLayout(rootArgs)
}
+
+export default blogLayout
```
Now the `blog.layout.js` becomes a nested layout of `root.layout.js`. No magic, just functions.
-Alternatively, you could compose your layouts from re-usable template functions and strings. If you find your layouts nesting more than one or two levels, perhaps composition would be a better strategy.
+Alternatively, you could compose your layouts from re-usable template functions and strings.
+If you find your layouts nesting more than one or two levels, perhaps composition would be a better strategy.
### Layout styles
You can create a `${layout-name}.layout.css` next to any layout file.
+While the layout file can live anywhere in `src`, the layout style must live next to the associated layout file.
```css
/* /layouts/article.layout.css */
@@ -566,24 +631,25 @@ You can create a `${layout-name}.layout.css` next to any layout file.
Layout styles are loaded on all pages that use that layout.
Layout styles are bundled with [`esbuild`][esbuild] and can bundle relative and `npm` css using css `@import` statements.
-### Layout JS Bundles
+### Layout TS/JS Bundles
-You can create a `${layout-name}.layout.client.js` next to any layout file.
+You can create a `${layout-name}.layout.client.ts` or `${layout-name}.layout.client.js` next to any layout file.
+While the layout file can live anywhere in `src`, the layout client bundles must live next to the associated layout file.
-```js
-/* /layouts/article.layout.client.js */
+```typescript
+/* /layouts/article.layout.client.ts */
console.log('I run on every page rendered with the \'article\' layout')
/* This layout client is included in every page rendered with the 'article' layout */
```
-Layout js bundles are loaded on all pages that use that layout.
-Layout js bundles are bundled with [`esbuild`][esbuild] and can bundle relative and `npm` modules using ESM `import` statements.
+Layout ts/js bundles are loaded on all pages that use that layout.
+Layout ts/js bundles are bundled with [`esbuild`][esbuild] and can bundle relative and `npm` modules using ESM `import` statements.
-### Nested layout JS bundles and styles
+### Nested layout TS/JS bundles and styles
-If you create a nested layout that imports another layout file, **and** that imported layout has a layout style and/or layout js bundle, there is no magic that will include those layout styles and clients into the importing layout. To include those layout styles and clients into an additional layout, just import them into the additional layout client and style files. For example:
+If you create a nested layout that imports another layout file, **and** that imported layout has a layout style and/or layout js bundle, there is no magic that will include those layout styles and clients into the importing layout. To include those layout styles and clients into an additional layout, just import them into the additional layout client and style files. For example, if `article.layout.ts` wraps `root.layout.ts`, you must do the following:
```css
/* article.layout.css */
@@ -592,41 +658,43 @@ If you create a nested layout that imports another layout file, **and** that imp
This will include the layout style from the `root` layout in the `article` layout style.
-```js
-/* article.layout.client.js */
-import './root.layout.client.js'
+```typescript
+/* article.layout.client.ts */
+import './root.layout.client.ts'
```
-These imports will include the `root.layout.js` layout assets into the `blog.layout.js` asset files.
+Adding these imports will include the `root.layout.ts` layout assets into the `blog.layout.ts` asset files.
## Static assets
-All static assets in the `src` directory are copied 1:1 to the `public` directory. Any file in the `src` directory that doesn't end in `.js`, `.css`, `.html`, or `.md` is copied to the `dest` directory.
+All static assets in the `src` directory are copied 1:1 to the `public` directory. Any file in the `src` directory that doesn't end in `.ts`, `.js`, `.css`, `.html`, or `.md` is copied to the `dest` directory.
### `--eject` flag
-The `--eject` (or `-e`) flag extracts top-bun's default layout, global CSS, and client-side JavaScript into your source directory. This allows you to fully customize these files while maintaining the same functionality.
+The `--eject` (or `-e`) flag extracts DOMStack's default layout, global CSS, and client-side JavaScript into your source directory. This allows you to fully customize these files while maintaining the same functionality.
-When you run `top-bun --eject`, it will:
+When you run `domstack --eject`, it will:
1. Create a default root layout file at `layouts/root.layout.js` (or `.mjs` depending on your package.json type)
2. Create a default global CSS file at `globals/global.css`
-3. Create a default client-side JavaScript file at `globals/global.client.js` (or `.mjs`)
+3. Create a default client-side JavaScript file at `globals/global.client.js`
4. Add the necessary dependencies to your package.json:
- mine.css
- - uhtml-isomorphic
+ - preact
+ - htm
+ - preact-render-to-string
- highlight.js
-This is useful when you want to heavily customize the default theme or behavior while still leveraging top-bun's core functionality.
+It is recomended to eject early in your project so that you can customize the root layout as you see fit, and de-couple yourself from potential unwanted changes in the default layout as new versions of DOMStack are released.
### `--copy` directories
You can specify directories to copy into your `dest` directory using the `--copy` flag. Everything in those directories will be copied as-is into the destination, including js, css, html and markdown, preserving the internal directory structure. Conflicting files are not detected or reported and will cause undefined behavior.
-Copy folders must live **outside** of the `dest` directory. Copy directories can be in the src directory allowing for nested builds. In this case they are added to the ignore glob and ignored by the rest of `top-bun`.
+Copy folders must live **outside** of the `dest` directory. Copy directories can be in the src directory allowing for nested builds. In this case they are added to the ignore glob and ignored by the rest of `domstack`.
-This is useful when you have legacy or archived site content that you want to include in your site, but don't want `top-bun` to process or modify it.
-In general, static content should live in your primary `src` directory, however for merging in old static assets over your top-bun build is sometimes easier to reason about when it's kept in a separate folder and isn't processed in any way.
+This is useful when you have legacy or archived site content that you want to include in your site, but don't want `domstack` to process or modify it.
+In general, static content should live in your primary `src` directory, however for merging in old static assets over your domstack build is sometimes easier to reason about when it's kept in a separate folder and isn't processed in any way.
For example:
@@ -656,38 +724,34 @@ public/
Template files let you write any kind of file type to the `dest` folder while customizing the contents of that file with access to the site [Variables](#variables) object, or inject any other kind of data fetched at build time. Template files can be located anywhere and look like:
```bash
-name-of-template.txt.template.js
-
-${name-portion}.template.js
+name-of-template.txt.template.ts
+${name-portion}.template.ts
```
-Template files are a `js` file that default exports one of the following sync/async functions:
+Template files are a `ts`/`js` file that default exports one of the following sync/async functions:
### Simple string template
A function that returns a string. The `name-of-template.txt` portion of the template file name becomes the file name of the output file.
-```js
-/**
- * @template T
- * @typedef {import('top-bun').TemplateFunction} TemplateFunction
- */
-
-/**
- * @type {TemplateFunction<{
- * foo: string,
- * testVar: string
- * }>}
- */
-export default async ({
+```typescript
+// name-of-template.txt.template.ts
+import type { TemplateFunction } from '@domstack/static'
+
+interface TemplateVars {
+ foo: string;
+ testVar: string;
+}
+
+export default const simpleTemplate: TemplateFunction = async ({
vars: {
- foo
+ foo,
+ testVar
}
}) => {
- return `{Hello world
+ return `Hello world
-This is just a file with access to global vars: ${foo}
-`
+This is just a file with access to global vars: ${foo}`
}
```
@@ -695,17 +759,12 @@ This is just a file with access to global vars: ${foo}
A function that returns a single object with a `content` and `outputName` entries. The `outputName` overrides the name portion of the template file name.
-```js
-/**
- * @template T
- * @typedef {import('top-bun').TemplateFunction} TemplateFunction
- */
-
-/**
- * @type {TemplateFunction<{
- * foo: string,
- * }>}
- */
+```typescript
+import type { TemplateFunction } from '@domstack/static'
+
+interface TemplateVars {
+ foo: string;
+}
export default async ({
vars: { foo }
}) => ({
@@ -720,24 +779,20 @@ This is just a file with access to global vars: ${foo}`,
A function that returns an array of objects with a `content` and `outputName` entries. This template file generates more than one file from a single template file.
-```js
-/**
- * @template T
- * @typedef {import('top-bun').TemplateFunction} TemplateFunction
- */
-
-/**
- * @type {TemplateFunction<{
- * foo: string,
- * testVar: string
- * }>}
- */
-export default async function objectArrayTemplate ({
+```typescript
+import type { TemplateFunction } from '@domstack/static'
+
+interface TemplateVars {
+ foo: string;
+ testVar: string;
+}
+
+export default const objectArrayTemplate: TemplateFunction = async ({
vars: {
foo,
testVar
}
-}) {
+}) => {
return [
{
content: `Hello world
@@ -759,17 +814,15 @@ This is just a file with access to global vars: ${testVar}`,
An [AsyncIterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator) that `yields` objects with `content` and `outputName` entries.
-```js
-/**
- * @template T
- * @typedef {import('top-bun').TemplateAsyncIterator} TemplateAsyncIterator
- */
-
-/** @type {TemplateAsyncIterator<{
- * foo: string,
- * testVar: string
- * }>} */
-export default async function * ({
+```typescript
+import type { TemplateAsyncIterator } from '@domstack/static'
+
+interface TemplateVars {
+ foo: string;
+ testVar: string;
+}
+
+export default const templateIterator: TemplateAsyncIterator = async function * ({
vars: {
foo,
testVar
@@ -780,7 +833,7 @@ export default async function * ({
content: `Hello world
This is just a file with access to global vars: ${foo}`,
- outputName: 'async-iterator-1.txt'
+ outputName: 'yielded-1.txt'
}
// Second item
@@ -788,7 +841,7 @@ This is just a file with access to global vars: ${foo}`,
content: `Hello world again
This is just a file with access to global vars: ${testVar}`,
- outputName: 'async-iterator-2.txt'
+ outputName: 'yielded-2.txt'
}
}
```
@@ -799,43 +852,37 @@ Templates receive the standard variables available to pages, so its possible to
The following example shows how to generate an [RSS](https://www.rssboard.org) and [JSON feed](https://www.jsonfeed.org) of the last 10 date sorted pages with the `blog` layout using the AsyncIterator template type.
-```js
+```typescript
import pMap from 'p-map'
-// @ts-ignore
import jsonfeedToAtom from 'jsonfeed-to-atom'
+import type { TemplateAsyncIterator } from '@domstack/static'
+
+interface TemplateVars {
+ title: string;
+ layout: string;
+ siteName: string;
+ homePageUrl: string;
+ authorName: string;
+ authorUrl: string;
+ authorImgUrl?: string;
+ siteDescription: string;
+ language: string;
+}
-/**
- * @template T
- * @typedef {import('top-bun').TemplateAsyncIterator} TemplateAsyncIterator
- */
-
-/** @type {TemplateAsyncIterator<{
- * title: string,
- * layout: string,
- * siteName: string,
- * homePageUrl: string,
- * authorName: string,
- * authorUrl: string,
- * authorImgUrl: string,
- * publishDate: string,
- * siteDescription: string
- * }>}
-*/
-export default async function * feedsTemplate ({
+export default const feedsTemplate: TemplateAsyncIterator = async function * ({
vars: {
siteName,
+ siteDescription,
homePageUrl,
+ language = 'en-us',
authorName,
authorUrl,
authorImgUrl,
- siteDescription
},
pages
}) {
const blogPosts = pages
- // @ts-ignore
.filter(page => page.pageInfo.path.startsWith('blog/') && page.vars['layout'] === 'blog')
- // @ts-ignore
.sort((a, b) => new Date(b.vars.publishDate) - new Date(a.vars.publishDate))
.slice(0, 10)
@@ -875,14 +922,14 @@ export default async function * feedsTemplate ({
## Global Assets
-There are a few important (and optional) global assets that live anywhere in the `src` directory. If duplicate named files that match the global asset file name pattern are found, a build error will occur until the duplicate file is removed.
+There are a few important (and optional) global assets that live anywhere in the `src` directory. If duplicate named files that match the global asset file name pattern are found, a build error will occur until the duplicate file error is resolved.
-### `global.vars.js`
+### `global.vars.ts`
-The `global.vars.js` file should `export default` a variables object or a (sync or async) function that returns a variable object.
+The `global.vars.ts` or `global.vars.js` file should `export default` a variables object or a (sync or async) function that returns a variable object.
The variables in this file are available to all pages, unless the page sets a variable with the same key, taking a higher precedence.
-```js
+```typescript
export default {
siteName: 'The name of my website',
authorName: 'Mr. Wallace'
@@ -891,22 +938,22 @@ export default {
#### `browser` variable
-`global.vars.js` can uniquely export a `browser` object. These object variables are made available in all js bundles. The `browser` export can be an object, or a sync/async function that returns an object.
+`global.vars.ts` can uniquely export a `browser` object. These object variables are made available in all js bundles. The `browser` export can be an object, or a sync/async function that returns an object.
-```js
+```typescript
export const browser = {
- 'process.env.TRANSPORT': transport,
- 'process.env.HOST': host
+ 'process.env.TRANSPORT': 'http',
+ 'process.env.HOST': 'localhost'
}
```
The exported object is passed to esbuild's [`define`](https://esbuild.github.io/api/#define) options and is available to every js bundle.
-### `global.client.js`
+### `global.client.ts`
This is a script bundle that is included on every page. It provides an easy way to inject analytics, or other small scripts that every page should have. Try to minimize what you put in here.
-```js
+```typescript
console.log('I run on every page in the site!')
```
@@ -916,31 +963,109 @@ This is a global stylesheet that every page will use.
Any styles that need to be on every single page should live here.
Importing css from `npm` modules work well here.
-### `esbuild.settings.js`
+### `esbuild.settings.ts`
This is an optional file you can create anywhere.
-It should export a default sync or async function that accepts a single argument (the esbuild settings object generated by top-bun) and returns a modified build object.
+It should export a default sync or async function that accepts a single argument (the esbuild settings object generated by domstack) and returns a modified build object.
Use this to customize the esbuild settings directly.
-You can break top-bun with this, so be careful.
+You can break domstack with this, so be careful.
Here is an example of using this file to polyfill node builtins in the browser bundle:
-```js
+```typescript
import { polyfillNode } from 'esbuild-plugin-polyfill-node'
+// BuildOptions re-exported from esbuild
+import type { BuildOptions } from '@domstack/static'
-export default async function esbuildSettingsOverride (esbuildSettings) {
- esbuildSettings.plugins = [
- polyfillNode(),
- ]
+export default const esbuildSettingsOverride = async (esbuildSettings: BuildOptions): Promise => {
+ esbuildSettings.plugins = [polyfillNode()]
return esbuildSettings
}
```
+Important esbuild settings you may want to set here are:
+
+- [target](https://esbuild.github.io/api/#target) - Set the `target` to make `esbuild` run a few small transforms on your CSS and JS code.
+- [jsx](https://esbuild.github.io/api/#jsx) - Unset this if you want default react transform.
+- [jsxImportSource](https://esbuild.github.io/api/#jsx-import-source) - Unset this if you want default react transform.
+
+### `markdown-it.settings.ts`
+
+This is an optional file you can create anywhere.
+It should export a default sync or async function that accepts a single argument (the markdown-it instance configured by domstack) and returns a modified markdown-it instance.
+Use this to add custom markdown-it plugins or modify the parser configuration.
+Here are some examples:
+
+```typescript
+import markdownItContainer from 'markdown-it-container'
+import markdownItPlantuml from 'markdown-it-plantuml'
+import type { MarkdownIt } from 'markdown-it'
+
+export default const markdownItSettingsOverride = async (md: MarkdownIt) => {
+ // Add custom plugins
+ md.use(markdownItContainer, 'spoiler', {
+ validate: (params: string) => {
+ return params.trim().match(/^spoiler\s+(.*)$/) !== null
+ },
+ render: (tokens: any[], idx: number) => {
+ const m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/)
+ if (tokens[idx].nesting === 1) {
+ return '\n'
+ }
+ }
+ })
+
+ md.use(markdownItPlantuml)
+
+ return md
+}
+```
+
+```typescript
+import markdownIt, { MarkdownIt } from 'markdown-it'
+import myCustomPlugin from './my-custom-plugin'
+
+export default const markdownItSettingsOverride = async (md: MarkdownIt) => {
+ // Create a new instance with different settings
+ const newMd = markdownIt({
+ html: false, // Disable HTML tags in source
+ breaks: true, // Convert \n to
+ linkify: false, // Disable auto-linking + }) + + // Add only the plugins you want + newMd.use(myCustomPlugin) + + return newMd +} + +markdownItSettingsOverride +``` + +By default, DOMStack ships with the following markdown-it plugins enabled: + +- [markdown-it](https://github.com/markdown-it/markdown-it) +- [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) +- [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) +- [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) +- [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub) +- [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup) +- [markdown-it-deflist](https://github.com/markdown-it/markdown-it-deflist) +- [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins) +- [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark) +- [markdown-it-abbr](https://github.com/markdown-it/markdown-it-abbr) +- [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) +- [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) +- [markdown-it-attrs](https://github.com/arve0/markdown-it-attrs) +- [markdown-it-table-of-contents](https://github.com/cmaas/markdown-it-table-of-contents) + ## Variables Pages, Layouts, and `postVars` all receive an object with the following parameters: -- `vars`: An object with the variables of `global.vars.js`, `page.vars.js`, and any front-matter,`vars` exports and `postVars` from the page merged together. -- `pages`: An array of [`PageData`](https://github.com/bcomnes/top-bun/blob/master/lib/build-pages/page-data.js) instances for every page in the site build. Use this array to introspect pages to generate feeds and index pages. +- `vars`: An object with the variables of `global.vars.ts`, `page.vars.ts`, and any front-matter,`vars` exports and `postVars` from the page merged together. +- `pages`: An array of [`PageData`](https://github.com/bcomnes/d omstack/blob/master/lib/build-pages/page-data.js) instances for every page in the site build. Use this array to introspect pages to generate feeds and index pages. - `page`: An object of the page being rendered with the following parameters: - `type`: The type of page (`md`, `html`, or `js`) - `path`: The directory path for the page. @@ -953,39 +1078,38 @@ Pages, Layouts, and `postVars` all receive an object with the following paramete Template files receive a similar set of variables: -- `vars`: An object with the variables of `global.vars.js` -- `pages`: An array of [`PageData`](https://github.com/bcomnes/top-bun/blob/master/lib/build-pages/page-data.js) instances for every page in the site build. Use this array to introspect pages to generate feeds and index pages. +- `vars`: An object with the variables of `global.vars.ts` +- `pages`: An array of [`PageData`](https://github.com/bcomnes/domstack/blob/master/lib/build-pages/page-data.js) instances for every page in the site build. Use this array to introspect pages to generate feeds and index pages. - `template`: An object of the template file data being rendered. -Where `T` is your set of variables in the `vars` object. - ### `postVars` post processing variables (Advanced) {#postVars} -In `page.vars.js` files, you can export a `postVars` sync/async function that returns an object. This function receives the same variable set as pages and layouts. Whatever object is returned from the function is merged into the final `vars` object and is available in the page and layout. This is useful if you want to apply advanced rendering page introspection and insert it into a markdown document (for example, the last few blog posts on a markdown page.) +In `page.vars.ts` files, you can export a `postVars` sync/async function that returns an object. This function receives the same variable set as pages and layouts. Whatever object is returned from the function is merged into the final `vars` object and is available in the page and layout. This is useful if you want to apply advanced rendering page introspection and insert it into a markdown document (for example, the last few blog posts on a markdown page.) For example: -```js -// page.vars.js -import { html, render } from 'uhtml-isomorphic' +```typescript +import { html } from 'htm/preact' +import { render } from 'preact-render-to-string' +import type { PostVarsFunction } from '@domstack/static' -export async function postVars ({ +export const postVars: PostVarsFunction = async ({ pages -}) { +}) => { const blogPosts = pages .filter(page => page.vars.layout === 'article') .sort((a, b) => new Date(b.vars.publishDate) - new Date(a.vars.publishDate)) .slice(0, 5) - const blogpostsHtml = render(String, html`
${vars.title}
+
+
${vars.authorImgUrl
- ? html`
`
+ ? html``
: null
}
${vars.authorName && vars.authorUrl
? html`
-
+
${vars.authorName}
`
: null
@@ -509,47 +576,45 @@ export default function blogLayout (layoutVars) {
${vars.publishDate
? html`
-
`
+ ? html``
: null
}
${vars.authorName && vars.authorUrl
? html`
-
+
${vars.authorName}
`
: null
@@ -509,47 +576,45 @@ export default function blogLayout (layoutVars) {
${vars.publishDate
? html`
- ' + md.utils.escapeHtml(m[1]) + '
\n' + } else { + return '+ linkify: false, // Disable auto-linking + }) + + // Add only the plugins you want + newMd.use(myCustomPlugin) + + return newMd +} + +markdownItSettingsOverride +``` + +By default, DOMStack ships with the following markdown-it plugins enabled: + +- [markdown-it](https://github.com/markdown-it/markdown-it) +- [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) +- [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) +- [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) +- [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub) +- [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup) +- [markdown-it-deflist](https://github.com/markdown-it/markdown-it-deflist) +- [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins) +- [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark) +- [markdown-it-abbr](https://github.com/markdown-it/markdown-it-abbr) +- [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) +- [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) +- [markdown-it-attrs](https://github.com/arve0/markdown-it-attrs) +- [markdown-it-table-of-contents](https://github.com/cmaas/markdown-it-table-of-contents) + ## Variables Pages, Layouts, and `postVars` all receive an object with the following parameters: -- `vars`: An object with the variables of `global.vars.js`, `page.vars.js`, and any front-matter,`vars` exports and `postVars` from the page merged together. -- `pages`: An array of [`PageData`](https://github.com/bcomnes/top-bun/blob/master/lib/build-pages/page-data.js) instances for every page in the site build. Use this array to introspect pages to generate feeds and index pages. +- `vars`: An object with the variables of `global.vars.ts`, `page.vars.ts`, and any front-matter,`vars` exports and `postVars` from the page merged together. +- `pages`: An array of [`PageData`](https://github.com/bcomnes/d omstack/blob/master/lib/build-pages/page-data.js) instances for every page in the site build. Use this array to introspect pages to generate feeds and index pages. - `page`: An object of the page being rendered with the following parameters: - `type`: The type of page (`md`, `html`, or `js`) - `path`: The directory path for the page. @@ -953,39 +1078,38 @@ Pages, Layouts, and `postVars` all receive an object with the following paramete Template files receive a similar set of variables: -- `vars`: An object with the variables of `global.vars.js` -- `pages`: An array of [`PageData`](https://github.com/bcomnes/top-bun/blob/master/lib/build-pages/page-data.js) instances for every page in the site build. Use this array to introspect pages to generate feeds and index pages. +- `vars`: An object with the variables of `global.vars.ts` +- `pages`: An array of [`PageData`](https://github.com/bcomnes/domstack/blob/master/lib/build-pages/page-data.js) instances for every page in the site build. Use this array to introspect pages to generate feeds and index pages. - `template`: An object of the template file data being rendered. -Where `T` is your set of variables in the `vars` object. - ### `postVars` post processing variables (Advanced) {#postVars} -In `page.vars.js` files, you can export a `postVars` sync/async function that returns an object. This function receives the same variable set as pages and layouts. Whatever object is returned from the function is merged into the final `vars` object and is available in the page and layout. This is useful if you want to apply advanced rendering page introspection and insert it into a markdown document (for example, the last few blog posts on a markdown page.) +In `page.vars.ts` files, you can export a `postVars` sync/async function that returns an object. This function receives the same variable set as pages and layouts. Whatever object is returned from the function is merged into the final `vars` object and is available in the page and layout. This is useful if you want to apply advanced rendering page introspection and insert it into a markdown document (for example, the last few blog posts on a markdown page.) For example: -```js -// page.vars.js -import { html, render } from 'uhtml-isomorphic' +```typescript +import { html } from 'htm/preact' +import { render } from 'preact-render-to-string' +import type { PostVarsFunction } from '@domstack/static' -export async function postVars ({ +export const postVars: PostVarsFunction = async ({ pages -}) { +}) => { const blogPosts = pages .filter(page => page.vars.layout === 'article') .sort((a, b) => new Date(b.vars.publishDate) - new Date(a.vars.publishDate)) .slice(0, 5) - const blogpostsHtml = render(String, html`
-
+ const blogpostsHtml = render(html`
- - ${p.vars.title} +
- + ${p.vars.title} ${ publishDate - ? html`
-
${blogPosts.map(p => {
const publishDate = p.vars.publishDate ? new Date(p.vars.publishDate) : null
return html`
-
Hello from TypeScript!
${vars.message}
` -} +`PageFunction` and `LayoutFunction` support additional template parameters for precise return type control: -export default page -``` +**PageFunction