Renderer API

Lunaria allows for slotting and overriding content into your generated dashboard. This reference covers all the available options of the renderer field of your Lunaria configuration.

lunaria.config.mjs

import { defineConfig } from '@lunariajs/core/config';

export default defineConfig({
  renderer: {
    // your renderer options go here...
  },
});

Components

Lunaria comes with a built-in html tagged template literal to allow for a better component authoring experience.

lunaria.config.mjs

import { html } from '@lunariajs/core';
import { defineConfig } from '@lunariajs/core/config';

export default defineConfig({
  renderer: {
    slots: {
      afterTitle: () => html`<p>This is a example component!</p>`,
    },
  },
});

Syntax highlighting and language support is available through the lit-html VSCode extension and the vim-jsx-pretty plugin.

defineRendererConfig()

The defineRendererConfig() helper exported by @lunariajs/core adds IntelliSense support to your renderer configuration in your code editor. Use it to write your renderer configuration in a separate file, then import it into the renderer field of your lunaria.config.mjs file:

renderer.config.mjs

import { defineRendererConfig, html } from '@lunariajs/core';

export default defineRendererConfig({
  slots: {
    afterTitle: () => html`<p>This is a example component!</p>`,
  },
});

lunaria.config.mjs

import { defineConfig } from '@lunariajs/core/config';
import renderer from './renderer.config.mjs';

export default defineConfig({
  renderer,
});

Top-level Options

slots

Type: Slots

export default defineConfig({
  renderer: {
    slots: {
      head: (config) => html`<meta name="robots" content="noindex" />`,
      beforeTitle: (config) => html`<p>Example component</p>`,
      afterTitle: (config) => html`<p>Example component</p>`,
      afterStatusByLocale: (config) => html`<p>Example component</p>`,
      afterStatusByFile: (config) => html`<p>Example component</p>`,
    },
  },
});

Slots

type Slots = {
  head?: (config: LunariaConfig) => string;
  beforeTitle?: (config: LunariaConfig) => string;
  afterTitle?: (config: LunariaConfig) => string;
  afterStatusByLocale?: (config: LunariaConfig) => string;
  afterStatusByFile?: (config: LunariaConfig) => string;
};

overrides

Type: Overrides

export default defineConfig({
  renderer: {
    overrides: {
      meta: (config) => html`<meta name="robots" content="noindex" />`,
      body: (config, status) => html`<main>Example component</main>`,
      statusByLocale: (config, status) => html`<p>Example component</p>`,
      statusByFile: (config, status) => html`<p>Example component</p>`,
    },
  },
});

Overrides

type Overrides = {
  meta?: (config: LunariaConfig) => string;
  body?: (config: LunariaConfig, status: LunariaStatus) => string;
  statusByLocale?: (config: LunariaConfig, status: LunariaStatus) => string;
  statusByFile?: (config: LunariaConfig, status: LunariaStatus) => string;
};