@gluonjs/ssr / packages/ssr/src/eleventy / GluonEleventyDocumentContext

Interface: GluonEleventyDocumentContext<Data>

Extends

GluonEleventyRenderContext<Data>

Type Parameters

Data

Data = EleventyData

Properties

assets

readonly assets: AssetManifest

Inherited from

GluonEleventyRenderContext.assets

csp?

readonly optional csp?: string

data

readonly data: Data

Inherited from

GluonEleventyRenderContext.data

hydrationEntry?

readonly optional hydrationEntry?: string

nonce?

readonly optional nonce?: string

Inherited from

GluonEleventyRenderContext.nonce

result

readonly result: SsrRequestResult

signal

readonly signal: AbortSignal

Inherited from

GluonEleventyRenderContext.signal

url

readonly url: string

Inherited from

GluonEleventyRenderContext.url

Example

Build a custom document from the complete SSR result and the resolved route, data, asset, CSP, nonce, and hydration inputs:

import { createApp, html } from '@gluonjs/core';
import { renderRequest } from '@gluonjs/ssr';
import {
  gluonEleventyPlugin,
  renderEleventyPage,
  type EleventyConfiguration,
  type EleventyData,
  type EleventyExtension,
  type GluonEleventyAdapterOptions,
  type GluonEleventyDocumentContext,
  type GluonEleventyRenderContext,
  type GluonEleventyRequest,
  type GluonEleventyRoute,
} from '@gluonjs/ssr/eleventy';

type PageData = EleventyData & { readonly locale: string };
const options = {
  assets: { entry: '/assets/app.js', imports: ['/assets/vendor.js'] },
  dynamicFallbacks: ['/products/:slug'],
  route: (content: string): GluonEleventyRoute => ({ url: content.trim() }),
  createRequest: (context: GluonEleventyRenderContext<PageData>): GluonEleventyRequest => ({
    render: () => renderRequest({
      url: context.url,
      state: { locale: context.data.locale },
      createApp: () => createApp(() => html`<main>${context.url}</main>`),
    }),
  }),
  document: (context: GluonEleventyDocumentContext<PageData>) =>
    `<!doctype html><head>${context.result.head}</head><body>${context.result.html}${context.result.stateScript}</body>`,
} satisfies GluonEleventyAdapterOptions<PageData>;

let extension: EleventyExtension | undefined;
const config: EleventyConfiguration = {
  addTemplateFormats() {},
  addExtension(_name, value) { extension = value; },
};
gluonEleventyPlugin(config, options);
const output = await renderEleventyPage(options, '/', 'index.gluon', { locale: 'en' });
console.log(extension?.outputFileExtension, output);