From 1033963ddbebac3f6cb71ce93a53a696f212e7ef Mon Sep 17 00:00:00 2001 From: Jeremy Weinstein Date: Mon, 15 Jan 2024 21:32:03 -0800 Subject: [PATCH] feat: add ability to customize class on main element #173 --- .../src/page-builder.ts | 39 +++++++++++++++++-- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/packages/amagaki-plugin-page-builder/src/page-builder.ts b/packages/amagaki-plugin-page-builder/src/page-builder.ts index d25f55e0..c3dbea6d 100644 --- a/packages/amagaki-plugin-page-builder/src/page-builder.ts +++ b/packages/amagaki-plugin-page-builder/src/page-builder.ts @@ -216,6 +216,17 @@ export interface PageBuilderOptions { /** Append extra HTML to the bottom of the element. */ extra?: string[]; }; + main ?: { + /** + * Add a class on the
element. The class can either be a + * string or an async function that returns a string. + */ + class?: string | ((context: TemplateContext) => Promise); + /** Prepend HTML to the top of the
element. */ + prepend?: string[]; + /** Append extra HTML to the bottom of the
element. */ + extra?: string[]; + }, partialPaths?: PartialPaths; /** Options for generating the sitemap. */ sitemapXml?: { @@ -335,7 +346,7 @@ export class PageBuilder { return this.doc.fields[name] ?? this.doc.collection?.fields[name]; } - async buildBodyTag() { + async buildBodyElement() { if (this.options.body?.class) { const className = typeof this.options.body?.class === 'function' @@ -347,6 +358,18 @@ export class PageBuilder { } } + async buildMainElement() { + if (this.options.main?.class) { + const className = + typeof this.options.main?.class === 'function' + ? await this.options.main?.class(this.context) + : this.options.main?.class; + return html`
`; + } else { + return html`
`; + } + } + async buildDocument() { const partials = this.doc.fields.partials ?? this.doc.collection?.fields.partials; @@ -356,7 +379,7 @@ export class PageBuilder { this.doc.locale )}" itemscope itemtype="https://schema.org/WebPage"> ${await this.buildHeadElement()} - ${await this.buildBodyTag()} + ${await this.buildBodyElement()} ${ this.options.body?.prepend ? safeString(await this.buildExtraElements(this.options.body?.prepend)) @@ -368,7 +391,12 @@ export class PageBuilder { ? '' : await this.buildBuiltinPartial('header', this.options.header) } -
+ ${await this.buildMainElement()} + ${ + this.options.main?.prepend + ? safeString(await this.buildExtraElements(this.options.main?.prepend)) + : '' + } ${safeString( ( await Promise.all( @@ -378,6 +406,11 @@ export class PageBuilder { ) ).join('\n') )} + ${ + this.options.main?.extra + ? safeString(await this.buildExtraElements(this.options.main?.extra)) + : '' + }
${ this.getFieldValue('footer') === false || this.options.footer?.enabled === false