import { html, node, hydrate } from 'wirejs-dom/v2'; import { auth } from 'internal-api'; import { AccountMenu } from '../components/index.js'; import type { AuthenticationState } from 'wirejs-resources'; const TITLE = 'My New Site'; const SUBTITLE = 'Made with wirejs'; const MENU_ID = 'account-menu'; const DISCLAIMER = html`

For the purposes of awesomeness only.

`; async function Account() { return html`

${await AccountMenu({ api: auth })}

`; } export async function Main(slots: { /** * Replaces the default prefix in the final page title. */ siteTitle?: | string | ((state: AuthenticationState) => string); /** * Appears on the page under the site title. * * Set to empty-string explicitly to omit the default. */ siteSubTitle?: | string | ((state: AuthenticationState) => string); /** * The page title. Appears below the site title and subtitle when given. */ pageTitle?: | string | ((state: AuthenticationState) => string); /** * Author for this page. Appears next to the title in lighter font and * in the address bar. */ pageAuthor?: | string | ((state: AuthenticationState) => string); /** * The main content for the page. */ content: | HTMLElement | ((state: AuthenticationState) => HTMLElement); /** * Appears in the top of the footer. */ disclaimer?: | string | HTMLElement | ((state: AuthenticationState) => string | HTMLElement); }) { const pageAuthorElement = slots.pageAuthor ? html` : according to ${slots.pageAuthor} ` : ''; const pageTitle = slots.pageTitle ? html`

${slots.pageTitle} ${pageAuthorElement}

` : ''; const browserBarTitle = [ slots.pageTitle, slots.pageAuthor, slots.siteTitle || TITLE, slots.siteSubTitle || SUBTITLE, ].filter(Boolean).slice(0, 3).join(' - '); const page = html` ${browserBarTitle}

${ slots.siteTitle || TITLE }

${slots.siteSubTitle ?? SUBTITLE}

${node('account', await Account())}

${pageTitle}

${slots.content}

`; return page; } // TODO: fix wirejs `hydrate()` type hydrate(MENU_ID, Account as any);