@gluonjs/ssr / packages/ssr/src/eleventy / EleventyData

Interface: EleventyData

Indexable

[key: string]: unknown

Properties

page?

readonly optional page?: object

inputPath?

readonly optional inputPath?: string

url?

readonly optional url?: string

Example

Carry Eleventy page and application data into route mapping, request creation, and document serialization:

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);