@artian-techs/adonis-orbit 0.1.0

package/build/src/recorder.js

@@ -0,0 +1,102 @@
+import logger from '@adonisjs/core/services/logger';
+import { tracingChannels } from '@adonisjs/queue';
+/** The steps of a job that this package does not read. */
+const IGNORED = {
+    end: () => { },
+    asyncStart: () => { },
+    error: () => { },
+};
+/**
+ * What the reader of the trace needs to understand the failure.
+ *
+ * A job that reached its last try fails with an error that names the count,
+ * and carries the real one as its cause.
+ */
+function describe(error) {
+    if (!error) {
+        return null;
+    }
+    const cause = error.cause instanceof Error ? `\n${error.cause.stack ?? error.cause.message}` : '';
+    return `${error.stack ?? error.message}${cause}`;
+}
+/**
+ * What one job carries, as much of it as the configuration keeps.
+ *
+ * A payload holds what a person wrote: an address, a name, a number. An
+ * application that sends its trace to another machine says here what leaves
+ * its own.
+ */
+function keep(rule, job, payload) {
+    const values = (payload ?? {});
+    if (rule === 'none') {
+        return {};
+    }
+    if (typeof rule === 'function') {
+        return rule(values, job);
+    }
+    return values;
+}
+/**
+ * Keep what the queue does with its jobs.
+ *
+ * The queue holds its jobs in Redis and removes them when they end. The trace
+ * holds what a job carried, how many tries it took, and the error that stopped
+ * it.
+ *
+ * The channels of the queue answer at once, thus the events are written apart.
+ * A sink that refuses an event must never stop the job that runs.
+ *
+ * A configuration that names no sink keeps nothing.
+ */
+export function recordJobRuns(config) {
+    const sinks = config.sinks ?? [];
+    const rule = config.payload ?? 'full';
+    function write(events) {
+        for (const sink of sinks) {
+            void sink.write(events).catch((error) => {
+                logger.error({ err: error }, 'The trace of a job could not be written');
+            });
+        }
+    }
+    function identify(job, queue) {
+        const identity = { id: job.id, name: job.name, queue, attempts: job.attempts ?? 0 };
+        return { ...identity, payload: keep(rule, identity, job.payload) };
+    }
+    tracingChannels.dispatchChannel.subscribe({
+        ...IGNORED,
+        start: () => { },
+        asyncEnd(message) {
+            /**
+             * A dispatch that the window of `dedup` held opens no job, thus it gives
+             * no event either.
+             */
+            if (message.error || (message.dedupOutcome && message.dedupOutcome !== 'added')) {
+                return;
+            }
+            const at = new Date();
+            write(message.jobs.map((job) => ({
+                type: 'dispatched',
+                at,
+                job: identify(job, message.queue),
+            })));
+        },
+    });
+    tracingChannels.executeChannel.subscribe({
+        ...IGNORED,
+        start(message) {
+            write([{ type: 'started', at: new Date(), job: identify(message.job, message.queue) }]);
+        },
+        asyncEnd(message) {
+            write([
+                {
+                    type: 'finished',
+                    at: new Date(),
+                    job: identify(message.job, message.queue),
+                    outcome: message.status ?? 'retrying',
+                    duration: message.duration ?? null,
+                    error: describe(message.error),
+                },
+            ]);
+        },
+    });
+}

package/build/src/retry.d.ts

@@ -0,0 +1,9 @@
+import type JobRun from './models/job_run.js';
+/**
+ * Ask the queue for a job that already ran.
+ *
+ * The row is never replaced: the new job takes a new identifier and opens its
+ * own row, and the old one names it. A job asked for twice is thus read twice
+ * in the table, with the two answers it gave.
+ */
+export declare function retryRun(run: JobRun): Promise<string>;

package/build/src/retry.js

@@ -0,0 +1,18 @@
+import { Locator } from '@adonisjs/queue';
+import { DateTime } from 'luxon';
+/**
+ * Ask the queue for a job that already ran.
+ *
+ * The row is never replaced: the new job takes a new identifier and opens its
+ * own row, and the old one names it. A job asked for twice is thus read twice
+ * in the table, with the two answers it gave.
+ */
+export async function retryRun(run) {
+    const JobClass = Locator.get(run.name);
+    if (!JobClass) {
+        throw new Error(`The job "${run.name}" is not registered`);
+    }
+    const { jobId } = await JobClass.dispatch(run.payload).toQueue(run.queue).run();
+    await run.merge({ retriedAt: DateTime.now(), retriedJobId: jobId }).save();
+    return jobId;
+}

package/build/src/routes.d.ts

@@ -0,0 +1,8 @@
+import type { HttpRouterService } from '@adonisjs/core/types';
+import type { OrbitConfig } from './types.js';
+/**
+ * The addresses of the page: the lists, the button that asks for a job again,
+ * the button that silences a class, and the mode that a person reads in. They
+ * live under the path that the application chose.
+ */
+export declare function registerRoutes(router: HttpRouterService, config: OrbitConfig): void;

package/build/src/routes.js

@@ -0,0 +1,20 @@
+import { dashboardAuth } from './middleware/dashboard_auth.js';
+const DashboardController = () => import('./controllers/dashboard_controller.js');
+/**
+ * The addresses of the page: the lists, the button that asks for a job again,
+ * the button that silences a class, and the mode that a person reads in. They
+ * live under the path that the application chose.
+ */
+export function registerRoutes(router, config) {
+    router
+        .group(() => {
+        router.get('/', [DashboardController, 'index']).as('orbit.index');
+        router.get('/silenced', [DashboardController, 'silenced']).as('orbit.silenced');
+        router.get('/metrics', [DashboardController, 'metrics']).as('orbit.metrics');
+        router.post('/runs/:id/retry', [DashboardController, 'retry']).as('orbit.retry');
+        router.post('/jobs/:name/silence', [DashboardController, 'silence']).as('orbit.silence');
+        router.post('/theme/:theme', [DashboardController, 'theme']).as('orbit.theme');
+    })
+        .prefix(config.path)
+        .use(dashboardAuth(config));
+}

package/build/src/sinks/database_sink.d.ts

@@ -0,0 +1,16 @@
+import type { JobEvent, Sink } from '../types.js';
+/**
+ * Keep the trace of the jobs in the table of the application.
+ *
+ * The two inserts are written in SQL because they need `on conflict`, which
+ * Lucid does not carry. The model would read the row before writing it, and
+ * two processes that write together would then undo each other.
+ *
+ * The row that the dispatch writes and the row that the worker writes are the
+ * same row. Either of the two can arrive first, thus the first one writes and
+ * the second one completes.
+ */
+export default class DatabaseSink implements Sink {
+    #private;
+    write(events: JobEvent[]): Promise<void>;
+}

package/build/src/sinks/database_sink.js

@@ -0,0 +1,88 @@
+import db from '@adonisjs/lucid/services/db';
+import JobRun, { JobRunStatus } from '../models/job_run.js';
+/** What one status of the queue is called in the table. */
+const STATUS = {
+    completed: JobRunStatus.COMPLETED,
+    failed: JobRunStatus.FAILED,
+    retrying: JobRunStatus.RETRYING,
+};
+/**
+ * Keep the trace of the jobs in the table of the application.
+ *
+ * The two inserts are written in SQL because they need `on conflict`, which
+ * Lucid does not carry. The model would read the row before writing it, and
+ * two processes that write together would then undo each other.
+ *
+ * The row that the dispatch writes and the row that the worker writes are the
+ * same row. Either of the two can arrive first, thus the first one writes and
+ * the second one completes.
+ */
+export default class DatabaseSink {
+    async write(events) {
+        const dispatched = events.filter((event) => event.type === 'dispatched');
+        if (dispatched.length > 0) {
+            await this.#open(dispatched);
+        }
+        for (const event of events) {
+            if (event.type === 'started') {
+                await this.#take(event);
+            }
+            if (event.type === 'finished') {
+                await this.#close(event);
+            }
+        }
+    }
+    /** Write the row of every job that waits for a worker. */
+    #open(events) {
+        const rows = events.map(() => '(?, ?, ?, ?, ?, ?, ?, ?, ?)').join(', ');
+        const values = events.flatMap(({ job, at }) => [
+            job.id,
+            job.name,
+            job.queue,
+            JobRunStatus.PENDING,
+            JSON.stringify(job.payload),
+            job.attempts,
+            at,
+            at,
+            at,
+        ]);
+        return db.rawQuery(`insert into ${JobRun.table}
+         (job_id, name, queue, status, payload, attempts, dispatched_at, created_at, updated_at)
+       values ${rows}
+       on conflict (job_id) do nothing`, values);
+    }
+    /** Write the row of the job that a worker holds, or complete it. */
+    #take({ job, at }) {
+        return db.rawQuery(`insert into ${JobRun.table}
+         (job_id, name, queue, status, payload, attempts, started_at, created_at, updated_at)
+       values (?, ?, ?, ?, ?, ?, ?, ?, ?)
+       on conflict (job_id) do update set
+         status = excluded.status,
+         attempts = excluded.attempts,
+         started_at = excluded.started_at,
+         updated_at = excluded.updated_at`, [
+            job.id,
+            job.name,
+            job.queue,
+            JobRunStatus.RUNNING,
+            JSON.stringify(job.payload),
+            job.attempts,
+            at,
+            at,
+            at,
+        ]);
+    }
+    /** Say how the try of a job ended. */
+    #close({ job, at, outcome, duration, error }) {
+        const ended = outcome === 'completed' || outcome === 'failed';
+        return JobRun.query()
+            .where('jobId', job.id)
+            .update({
+            status: STATUS[outcome],
+            duration,
+            error,
+            finishedAt: ended ? at : null,
+            updatedAt: at,
+        });
+    }
+}

package/build/src/types.d.ts

@@ -0,0 +1,92 @@
+import type { HttpContext } from '@adonisjs/core/http';
+/**
+ * Who may read the page.
+ *
+ * The answer is `true`, and the request goes on. The answer is `false`, and
+ * the page says "not found" — a guard that wants to say something else writes
+ * its own answer before it says `false`.
+ */
+export type Authorize = (ctx: HttpContext) => boolean | Promise<boolean>;
+/**
+ * What names one job, in every event that it gives.
+ *
+ * The three events carry the same identity. A sink that reads one event alone
+ * thus knows the job, and needs none of the events that came before.
+ */
+export interface JobIdentity {
+    /** The identifier that the queue gives to the job. */
+    id: string;
+    /** The name of the class that does the work. */
+    name: string;
+    /** The queue that holds the job. */
+    queue: string;
+    /** What the job carries. The configuration says how much of it is kept. */
+    payload: Record<string, unknown>;
+    /** How many times a worker took the job. */
+    attempts: number;
+}
+/** How a try of a job ended. */
+export type JobOutcome = 'completed' | 'failed' | 'retrying';
+/**
+ * One step of one job.
+ *
+ * The words are those of a queue, and of no framework: a sink writes them in a
+ * table, or sends them to a machine that reads them.
+ */
+export type JobEvent = {
+    type: 'dispatched';
+    at: Date;
+    job: JobIdentity;
+} | {
+    type: 'started';
+    at: Date;
+    job: JobIdentity;
+} | {
+    type: 'finished';
+    at: Date;
+    job: JobIdentity;
+    outcome: JobOutcome;
+    /** How long the try took, in milliseconds. */
+    duration: number | null;
+    /** The error that stopped the job, and the error that caused it. */
+    error: string | null;
+};
+/**
+ * Where the trace of the jobs goes.
+ *
+ * The recorder gives the events of one step together. A sink that writes
+ * several rows at once thus writes them in one call.
+ */
+export interface Sink {
+    write(events: JobEvent[]): Promise<void>;
+}
+/**
+ * How much of what a job carries is kept.
+ *
+ * `full` keeps everything. `none` keeps nothing. A function keeps what it
+ * gives back, thus an application takes out the values that it does not want
+ * to read again.
+ */
+export type PayloadRule = 'full' | 'none' | ((payload: Record<string, unknown>, job: Omit<JobIdentity, 'payload'>) => Record<string, unknown>);
+/**
+ * What the application tells Orbit.
+ */
+export interface OrbitConfig {
+    /** Where the page answers. */
+    path: string;
+    /**
+     * Who may read the page. The package carries `basicAuth`, and an application
+     * writes its own guard when it reads a name of a person instead.
+     */
+    authorize: Authorize;
+    /**
+     * Where the trace of the jobs goes.
+     *
+     * Nothing is kept that this list does not name. An application that wants
+     * the table of `job_runs` and the page that reads it thus names
+     * `DatabaseSink` here.
+     */
+    sinks: Sink[];
+    /** How much of what a job carries is kept. Without a rule, everything. */
+    payload?: PayloadRule;
+}

package/build/src/types.js

@@ -0,0 +1 @@
+export {};

package/build/stubs/config/orbit.stub

@@ -0,0 +1,31 @@
+{{{
+  exports({ to: app.configPath('orbit.ts') })
+}}}
+import { DatabaseSink, basicAuth, defineConfig } from '@artian-techs/adonis-orbit'
+
+import env from '#start/env'
+
+/**
+ * The page that shows what the queue does.
+ *
+ * It is read by the team that runs the machine, not by the users of the
+ * application, thus it holds no session.
+ */
+export default defineConfig({
+  path: '/queue',
+
+  /**
+   * Who may read the page. `basicAuth` asks for a name and a word, and answers
+   * "not found" while one of the two is missing.
+   */
+  authorize: basicAuth({
+    user: env.get('ORBIT_DASHBOARD_USER'),
+    password: env.get('ORBIT_DASHBOARD_PASSWORD'),
+  }),
+
+  /**
+   * Where the trace of the jobs goes. Nothing is kept that this list does not
+   * name: take `DatabaseSink` away, and the table stays empty.
+   */
+  sinks: [new DatabaseSink()],
+})

package/build/stubs/main.d.ts

@@ -0,0 +1 @@
+export declare const stubsRoot: string;

package/build/stubs/main.js

@@ -0,0 +1 @@
+export const stubsRoot = import.meta.dirname;

package/build/stubs/migrations/create_job_runs_table.stub

@@ -0,0 +1,62 @@
+{{{
+  exports({ to: app.makePath(migration.folder, migration.fileName) })
+}}}
+import { BaseSchema } from '@adonisjs/lucid/schema'
+
+/**
+ * What the queue did with each job.
+ *
+ * The queue keeps its jobs in Redis and removes them when they end. This table
+ * holds the trace: a job that failed stays here, with the values it carried,
+ * and a person can ask for it again.
+ *
+ * One row for one job. A job that is tried again keeps its row, and the row
+ * counts the tries.
+ */
+export default class extends BaseSchema {
+  protected tableName = 'job_runs'
+
+  async up() {
+    this.schema.createTable(this.tableName, (table) => {
+      table.bigIncrements('id')
+
+      /**
+       * The identifier that the queue gives to a job. It names the same job in
+       * the journal of the worker and in Redis.
+       */
+      table.uuid('job_id').notNullable().unique()
+
+      table.string('name').notNullable()
+      table.string('queue').notNullable()
+      table.string('status').notNullable()
+
+      table.jsonb('payload').notNullable().defaultTo('{}')
+
+      table.integer('attempts').notNullable().defaultTo(0)
+      table.text('error').nullable()
+      table.decimal('duration', 12, 2).nullable()
+
+      table.timestamp('dispatched_at').nullable()
+      table.timestamp('started_at').nullable()
+      table.timestamp('finished_at').nullable()
+
+      /**
+       * The day a person asked for this job again, and the job that answered
+       * that request. A row keeps its own history: it is never replaced.
+       */
+      table.timestamp('retried_at').nullable()
+      table.uuid('retried_job_id').nullable()
+
+      table.timestamp('created_at')
+      table.timestamp('updated_at')
+
+      table.index('status')
+      table.index('name')
+      table.index(['status', 'id'])
+    })
+  }
+
+  async down() {
+    this.schema.dropTable(this.tableName)
+  }
+}

package/build/stubs/migrations/create_silenced_jobs_table.stub

@@ -0,0 +1,29 @@
+{{{
+  exports({ to: app.makePath(migration.folder, migration.fileName) })
+}}}
+import { BaseSchema } from '@adonisjs/lucid/schema'
+
+/**
+ * The jobs that the page does not show.
+ *
+ * A row holds the name of a class, not a job. Nothing is removed and nothing
+ * stops: the worker keeps its work, the table keeps its trace, and only the
+ * lists of the page leave the name out. Take the row away, and everything the
+ * job did comes back, including what it did while it was silent.
+ */
+export default class extends BaseSchema {
+  protected tableName = 'silenced_jobs'
+
+  async up() {
+    this.schema.createTable(this.tableName, (table) => {
+      table.bigIncrements('id')
+      table.string('name').notNullable().unique()
+      table.timestamp('created_at')
+      table.timestamp('updated_at')
+    })
+  }
+
+  async down() {
+    this.schema.dropTable(this.tableName)
+  }
+}

package/build/templates/components/layout.edge

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en"{{{ theme ? ` data-theme="${theme}"` : '' }}}>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ title }} — Orbit</title>
+  <link rel="icon" href="{{ favicon }}">
+  <style>
+    :root {
+      color-scheme: light dark;
+      --bg: #f6f7f9;
+      --card: #ffffff;
+      --side: #ffffff;
+      --line: #e3e6ea;
+      --text: #1b1f23;
+      --muted: #6b7280;
+      --accent: #4338ca;
+      --accent-soft: #eef2ff;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #14171a; --card: #1c2024; --side: #191d21; --line: #2c3238;
+        --text: #e8eaed; --muted: #9aa3ad; --accent: #a5b4fc; --accent-soft: #312e81;
+      }
+    }
+    /* A person who chose reads what they chose, whatever the machine says. */
+    :root[data-theme="light"] {
+      color-scheme: light;
+      --bg: #f6f7f9; --card: #ffffff; --side: #ffffff; --line: #e3e6ea;
+      --text: #1b1f23; --muted: #6b7280; --accent: #4338ca; --accent-soft: #eef2ff;
+    }
+    :root[data-theme="dark"] {
+      color-scheme: dark;
+      --bg: #14171a; --card: #1c2024; --side: #191d21; --line: #2c3238;
+      --text: #e8eaed; --muted: #9aa3ad; --accent: #a5b4fc; --accent-soft: #312e81;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; display: flex; min-height: 100vh; background: var(--bg); color: var(--text);
+      font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    }
+    aside {
+      width: 220px; flex: 0 0 220px; background: var(--side);
+      border-right: 1px solid var(--line); padding: 20px 12px;
+      display: flex; flex-direction: column;
+      position: sticky; top: 0; height: 100vh; overflow-y: auto;
+    }
+    .theme { margin-top: auto; padding-top: 18px; }
+    .theme button {
+      display: flex; align-items: center; gap: 10px; width: 100%;
+      padding: 8px 10px; border: 0; border-radius: 6px; cursor: pointer;
+      background: none; color: var(--muted); font: inherit; text-align: left;
+    }
+    .theme button:hover { background: var(--bg); color: var(--text); }
+    /*
+     * The page shows the mode that the person does not read now. The machine
+     * says which one that is while nobody chose, thus the page asks it here
+     * and no script asks it later.
+     */
+    .to-light { display: none; }
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme]) .to-light { display: flex; }
+      :root:not([data-theme]) .to-dark { display: none; }
+    }
+    :root[data-theme="dark"] .to-light { display: flex; }
+    :root[data-theme="dark"] .to-dark { display: none; }
+    :root[data-theme="light"] .to-light { display: none; }
+    :root[data-theme="light"] .to-dark { display: flex; }
+    .brand {
+      font-weight: 600; font-size: 15px; padding: 0 10px 18px;
+      display: flex; align-items: center; gap: 8px;
+    }
+    .brand span { color: var(--muted); font-weight: 400; }
+    .brand svg { width: 30px; height: 30px; flex: none; }
+    nav a {
+      display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 2px;
+      border-radius: 6px; color: inherit; text-decoration: none;
+    }
+    nav a:hover { background: var(--bg); }
+    nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+    nav a svg { flex: 0 0 16px; }
+    nav a .count {
+      margin-left: auto; font-size: 12px; color: var(--muted);
+      background: var(--bg); border-radius: 999px; padding: 1px 8px;
+    }
+    nav a.active .count { background: var(--card); color: var(--accent); }
+    main { flex: 1; padding: 24px 28px; min-width: 0; }
+    h1 { font-size: 20px; margin: 0 0 20px; }
+    h2 { font-size: 15px; margin: 28px 0 12px; }
+    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
+    .card {
+      background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px;
+    }
+    .card .value { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; }
+    .card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; margin-top: 4px; }
+    .panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
+    table { border-collapse: collapse; width: 100%; min-width: 860px; }
+    th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; }
+    tr:last-child td { border-bottom: none; }
+    .status { padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
+    .pending { background: #e5e7eb; color: #374151; }
+    .running { background: #dbeafe; color: #1e40af; }
+    .retrying { background: #fef3c7; color: #92400e; }
+    .completed { background: #d1fae5; color: #065f46; }
+    .failed { background: #fee2e2; color: #991b1b; }
+    .muted { color: var(--muted); font-size: 12px; }
+    .actions { display: flex; gap: 6px; align-items: center; }
+    .actions a { color: inherit; white-space: nowrap; }
+    button {
+      font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
+      border: 1px solid var(--line); background: var(--card); color: inherit;
+    }
+    button:hover { border-color: var(--accent); color: var(--accent); }
+    pre {
+      margin: 8px 0 0; padding: 10px; background: var(--bg); border-radius: 6px;
+      overflow-x: auto; font-size: 12px; max-width: 520px; white-space: pre-wrap;
+    }
+    details summary { cursor: pointer; color: var(--muted); font-size: 12px; }
+    .pager { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
+    .pager a { color: inherit; }
+    .empty { padding: 28px; text-align: center; color: var(--muted); }
+  </style>
+</head>
+<body>
+  <aside>
+    <div class="brand">{{{ logo }}}Orbit <span>for AdonisJS</span></div>
+    <nav>
+      @each(item in menu)
+        <a href="{{ item.href }}" class="{{ item.key === active ? 'active' : '' }}">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">{{{ item.icon }}}</svg>
+          {{ item.label }}
+          @if(item.count !== null)
+            <span class="count">{{ item.count }}</span>
+          @end
+        </a>
+      @end
+    </nav>
+    <div class="theme">
+      <form method="post" action="{{ path }}/theme/dark">
+        @if(csrfToken)
+          <input type="hidden" name="_csrf" value="{{ csrfToken }}">
+        @end
+        <button type="submit" class="to-dark">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 13a8.5 8.5 0 0 1-10-10 8.5 8.5 0 1 0 10 10z"/>
+          </svg>
+          Dark
+        </button>
+      </form>
+      <form method="post" action="{{ path }}/theme/light">
+        @if(csrfToken)
+          <input type="hidden" name="_csrf" value="{{ csrfToken }}">
+        @end
+        <button type="submit" class="to-light">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="4.5"/>
+            <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4"/>
+          </svg>
+          Light
+        </button>
+      </form>
+    </div>
+  </aside>
+
+  <main>
+    <h1>{{ title }}</h1>
+    {{{ await $slots.main() }}}
+  </main>
+</body>
+</html>