@gluonjs/ssr / packages/ssr/src/eleventy / EleventyConfiguration

Interface: EleventyConfiguration

Methods

addExtension()

addExtension(extension, definition): void

Parameters

extension

string

definition

EleventyExtension

Returns

void

addGlobalData()?

optional addGlobalData(name, value): void

Parameters

name

string

value

unknown

Returns

void

addTemplateFormats()

addTemplateFormats(extension): void

Parameters

extension

string

Returns

void

Example

Supply the minimal Eleventy plugin hooks used to register a format, extension compiler, and optional fallback global data:

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