@meith/web 0.16.0

package/app/install/page.tsx

@@ -0,0 +1,221 @@
+import type { Metadata } from 'next'
+import { headers } from 'next/headers'
+import { notFound } from 'next/navigation'
+
+import { DEFAULT_AUTH_POLICY } from '@meith/accounts'
+import { env } from '@meith/core'
+import {
+  blockers,
+  type Check,
+  canProceed,
+  freshReport,
+  INSTALL_STEPS,
+  warnings,
+} from '@meith/install'
+import { isUsableOrigin, MAIL_PRESETS, normaliseOrigin } from '@meith/settings'
+import { Alert, AlertDescription, AlertTitle, Disclosure } from '@meith/ui'
+
+import { InstallForm } from '@/components/install/install-form'
+import { getTranslator, tr } from '@/server/i18n'
+import { gatherPreflight, installerIsSealed, probeMail } from '@/server/install'
+import { installFormCopy } from '@/view/install-copy'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.install') }
+}
+
+export const dynamic = 'force-dynamic'
+
+const LEVEL_KEYS = {
+  blocker: 'installPreflight.level.blocker',
+  warning: 'installPreflight.level.warning',
+  ok: 'installPreflight.level.ok',
+} as const
+
+const MAIL_PRESET_KEYS: Record<string, { readonly label: string; readonly note: string }> = {
+  mailbox: {
+    label: 'install.mailPreset.mailbox.label',
+    note: 'install.mailPreset.mailbox.note',
+  },
+  'resend-http': {
+    label: 'install.mailPreset.resendHttp.label',
+    note: 'install.mailPreset.resendHttp.note',
+  },
+  'resend-smtp': {
+    label: 'install.mailPreset.resendSmtp.label',
+    note: 'install.mailPreset.resendSmtp.note',
+  },
+  brevo: {
+    label: 'install.mailPreset.brevo.label',
+    note: 'install.mailPreset.brevo.note',
+  },
+  postmark: {
+    label: 'install.mailPreset.postmark.label',
+    note: 'install.mailPreset.postmark.note',
+  },
+  ses: {
+    label: 'install.mailPreset.ses.label',
+    note: 'install.mailPreset.ses.note',
+  },
+  smtp: {
+    label: 'install.mailPreset.smtp.label',
+    note: 'install.mailPreset.smtp.note',
+  },
+  http: {
+    label: 'install.mailPreset.http.label',
+    note: 'install.mailPreset.http.note',
+  },
+}
+
+export default async function InstallPage() {
+  const t = await getTranslator()
+  if (await installerIsSealed()) notFound()
+
+  const checks = await gatherPreflight()
+  const ready = canProceed(checks)
+  const mail = await probeMail()
+  const suggestedBoardUrl = await suggestBoardUrl()
+
+  return (
+    <main className="mx-auto flex w-full max-w-2xl flex-col gap-8 px-6 py-12">
+      <header className="flex flex-col gap-2">
+        <h1 className="font-heading text-2xl font-semibold tracking-tight text-foreground">
+          {t.t('page.install-this-board')}
+        </h1>
+        <p className="text-sm text-muted-foreground">{t.t('page.this-page-works-once-when')}</p>
+      </header>
+
+      <Preflight checks={checks} />
+
+      {ready && (
+        <InstallForm
+          presets={MAIL_PRESETS.map((preset) => ({
+            ...preset,
+            label: t.t(MAIL_PRESET_KEYS[preset.id]?.label ?? preset.label),
+            note: t.t(MAIL_PRESET_KEYS[preset.id]?.note ?? preset.note),
+          }))}
+          steps={INSTALL_STEPS.map((step) => ({
+            id: step.id,
+            title: t.t(step.titleKey),
+            detail: t.t(step.detailKey),
+          }))}
+          initialReport={freshReport()}
+          mailIsFromEnvironment={mail.source === 'environment'}
+          suggestedBoardUrl={suggestedBoardUrl}
+          boardUrlIsFromEnvironment={(env.APP_URL ?? '') !== ''}
+          copy={installFormCopy(DEFAULT_AUTH_POLICY.reservedUsernames, t)}
+        />
+      )}
+    </main>
+  )
+}
+
+async function Preflight({ checks }: { checks: readonly Check[] }) {
+  const t = await getTranslator()
+  const stopping = blockers(checks)
+  const warned = warnings(checks)
+  const passed = checks.filter((check) => check.level === 'ok')
+
+  return (
+    <section aria-labelledby="preflight" className="flex flex-col gap-3">
+      <h2
+        id="preflight"
+        className="font-heading text-lg font-semibold tracking-tight text-foreground"
+      >
+        {t.t('page.before-installing')}
+      </h2>
+
+      {stopping.length > 0 && (
+        <div role="alert" className="flex flex-col gap-2">
+          {stopping.map((check) => (
+            <Finding key={check.id} check={check} t={t} />
+          ))}
+          <p className="text-sm text-muted-foreground">
+            {stopping.length === 1
+              ? t.t('installPreflight.blocker.one')
+              : t.t('installPreflight.blocker.other', { count: stopping.length })}
+          </p>
+        </div>
+      )}
+
+      {stopping.length === 0 ? (
+        <>
+          {warned.map((check) => (
+            <Finding key={check.id} check={check} t={t} />
+          ))}
+          {warned.length > 0 && (
+            <p className="text-sm text-muted-foreground">
+              {warned.length === 1
+                ? t.t('installPreflight.warning.one')
+                : t.t('installPreflight.warning.other')}
+            </p>
+          )}
+        </>
+      ) : (
+        warned.length > 0 && (
+          <Disclosure
+            summary={t.t('installPreflight.deferredWarnings', {
+              warnings: warned.length,
+              blockers: stopping.length,
+            })}
+          >
+            <div className="flex flex-col gap-2">
+              {warned.map((check) => (
+                <Finding key={check.id} check={check} t={t} />
+              ))}
+            </div>
+          </Disclosure>
+        )
+      )}
+
+      {passed.length > 0 && (
+        <Disclosure summary={t.t('installPreflight.passed', { count: passed.length })}>
+          <ul className="flex flex-col gap-1 text-sm">
+            {passed.map((check) => (
+              <li key={check.id} className="flex gap-2">
+                <span aria-hidden className="text-muted-foreground">
+                  ✓
+                </span>
+                <span>{t.t(check.titleKey, check.titleArgs)}</span>
+              </li>
+            ))}
+          </ul>
+        </Disclosure>
+      )}
+    </section>
+  )
+}
+
+function Finding({ check, t }: { check: Check; t: Awaited<ReturnType<typeof getTranslator>> }) {
+  return (
+    <Alert tone={check.level === 'blocker' ? 'error' : 'warning'}>
+      <AlertDescription>
+        <span className="font-mono text-xs uppercase text-muted-foreground">
+          {t.t(LEVEL_KEYS[check.level])}
+          {' · '}
+        </span>
+        <AlertTitle>{t.t(check.titleKey, check.titleArgs)}</AlertTitle>
+        {check.detailKey !== undefined && (
+          <span className="mt-1 block text-muted-foreground">
+            {t.t(check.detailKey, check.detailArgs)}
+          </span>
+        )}
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+async function suggestBoardUrl(): Promise<string> {
+  try {
+    const incoming = await headers()
+    const host = incoming.get('x-forwarded-host') ?? incoming.get('host') ?? ''
+    if (host === '') return ''
+
+    const proto = incoming.get('x-forwarded-proto') ?? 'https'
+    const candidate = `${proto.split(',')[0]?.trim() ?? 'https'}://${host.split(',')[0]?.trim() ?? ''}`
+
+    return isUsableOrigin(candidate) ? normaliseOrigin(candidate) : ''
+  } catch {
+    return ''
+  }
+}

package/app/jump/page.tsx

@@ -0,0 +1,28 @@
+import { notFound, redirect } from 'next/navigation'
+
+import { getContainer } from '@/server/container'
+import { getActor } from '@/server/context'
+import { JUMP_FIELD, parseJumpTarget } from '@/view/forum-jump'
+
+export default async function JumpPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}): Promise<never> {
+  const forumId = parseJumpTarget((await searchParams)[JUMP_FIELD])
+
+  if (forumId === null) redirect('/')
+
+  const { authorizer, forums } = getContainer()
+  const actor = await getActor()
+
+  const visible = new Set(await authorizer.forumIdsWhere(actor, 'forum.view'))
+  if (!visible.has(forumId)) notFound()
+
+  const forum = await forums.findById(forumId)
+  if (forum === null) notFound()
+
+  if (forum.type === 'category') redirect('/')
+
+  redirect(`/${forum.id}-${forum.slug}`)
+}

package/app/layout.tsx

@@ -0,0 +1,124 @@
+import type { Metadata, Viewport } from 'next'
+import { Inter } from 'next/font/google'
+
+import { env } from '@meith/core'
+import { currentRequestId } from '@meith/core/logger'
+import { localeDirection, SOURCE_LOCALE } from '@meith/i18n'
+import { resolveBoardUrl } from '@meith/settings'
+
+import { CopyProvider } from '@/components/shell/copy'
+import { CrashNoticeProvider } from '@/components/shell/crash-notice'
+import { DemoBanner } from '@/components/shell/demo-banner'
+import { GroupNameStyle } from '@/components/shell/group-name-style'
+import { ThemeRuntimeStyle } from '@/components/shell/theme-runtime-style'
+import { TimezoneProbe } from '@/components/shell/timezone-probe'
+import { crashNotice } from '@/server/error-notice'
+import { getLocale, getTranslator } from '@/server/i18n'
+import { getSettings } from '@/server/settings'
+import { currentColourScheme, currentThemeKey } from '@/server/theme'
+import { getThemeRuntimeStyle } from '@/server/theme-runtime'
+import { formChromeCopy } from '@/view/copy'
+import { crashNoticeCopy } from '@/view/error-notice'
+import { BOARD_TITLE } from '@/view/shell'
+import { colorSchemeProperty, schemeClass } from '@/view/theme-preference'
+import { untranslated } from '@/view/time'
+
+import '@/styles/globals.css'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+export async function generateMetadata(): Promise<Metadata> {
+  let name = BOARD_TITLE
+  let description: string | undefined
+  let origin = 'http://localhost:3000'
+
+  try {
+    const settings = await getSettings()
+    name = settings.get('board.name').trim() || BOARD_TITLE
+    description = settings.get('board.description').trim() || undefined
+    origin = resolveBoardUrl({ environment: env, settings }).url || origin
+  } catch {
+    /* ignore */
+  }
+
+  return {
+    title: {
+      default: name,
+      template: `%s · ${name}`,
+    },
+    description,
+    metadataBase: new URL(origin),
+    ...BASE_METADATA,
+  }
+}
+
+const BASE_METADATA: Metadata = {
+  alternates: {
+    types: {
+      'application/rss+xml': '/feed.xml',
+      'application/atom+xml': '/atom.xml',
+    },
+  },
+}
+
+export async function generateViewport(): Promise<Viewport> {
+  const { browserThemeColor } = await getThemeRuntimeStyle()
+  return {
+    colorScheme: 'light dark',
+    themeColor: [
+      {
+        media: '(prefers-color-scheme: light)',
+        color: browserThemeColor.light,
+      },
+      {
+        media: '(prefers-color-scheme: dark)',
+        color: browserThemeColor.dark,
+      },
+    ],
+  }
+}
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const [theme, scheme, notice, locale] = await Promise.all([
+    currentThemeKey(),
+    currentColourScheme(),
+    crashNotice(),
+    getLocale().catch(() => ({ locale: SOURCE_LOCALE })),
+  ])
+
+  return (
+    <html
+      lang={locale.locale}
+      dir={localeDirection(locale.locale)}
+      data-theme={theme}
+      style={{ colorScheme: colorSchemeProperty(scheme) }}
+      className={`${inter.variable} bg-background ${schemeClass(scheme)}`}
+    >
+      <head>
+        <ThemeRuntimeStyle />
+        <GroupNameStyle />
+        <TimezoneProbe />
+      </head>
+      <body className="font-sans antialiased">
+        <DemoBanner />
+        <CrashNoticeProvider
+          notice={notice}
+          requestId={currentRequestId() ?? null}
+          copy={crashNoticeCopy(await getTranslator().catch(() => untranslated()))}
+        >
+          <CopyProvider copy={formChromeCopy(await getTranslator().catch(() => untranslated()))}>
+            {children}
+          </CopyProvider>
+        </CrashNoticeProvider>
+      </body>
+    </html>
+  )
+}

package/app/logo/[scheme]/route.ts

@@ -0,0 +1,24 @@
+import { drivers } from '@meith/drivers'
+
+import { isLogoScheme, logoKey } from '@/server/branding'
+import { imageHeaders } from '@/server/image-upload'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(
+  _request: Request,
+  context: { params: Promise<{ scheme: string }> },
+): Promise<Response> {
+  const { scheme } = await context.params
+  if (!isLogoScheme(scheme)) return new Response('Not found', { status: 404 })
+
+  const key = await logoKey(scheme)
+  if (key === null) return new Response('Not found', { status: 404 })
+
+  const bytes = await drivers().files.get(key)
+  if (bytes === undefined) return new Response('Not found', { status: 404 })
+
+  return new Response(bytes as unknown as BodyInit, {
+    headers: imageHeaders(key, bytes.byteLength),
+  })
+}

package/app/manifest.ts

@@ -0,0 +1,43 @@
+import type { MetadataRoute } from 'next'
+
+import { getSettings } from '@/server/settings'
+import { getThemeRuntimeStyle } from '@/server/theme-runtime'
+import { BOARD_TITLE } from '@/view/shell'
+
+export const dynamic = 'force-dynamic'
+
+const SHORT_NAME_MAX = 12
+
+export default async function manifest(): Promise<MetadataRoute.Manifest> {
+  let name = BOARD_TITLE
+  let description = ''
+
+  try {
+    const settings = await getSettings()
+    name = settings.get('board.name').trim() || BOARD_TITLE
+    description = settings.get('board.description').trim()
+  } catch {
+    /* ignore */
+  }
+
+  const { browserThemeColor } = await getThemeRuntimeStyle()
+
+  return {
+    name,
+    short_name: name.length > SHORT_NAME_MAX ? name.slice(0, SHORT_NAME_MAX).trim() : name,
+    ...(description === '' ? {} : { description }),
+    start_url: '/',
+    scope: '/',
+    display: 'standalone',
+    orientation: 'portrait-primary',
+    background_color: browserThemeColor.light,
+    theme_color: browserThemeColor.light,
+    icons: [
+      { src: '/icon', sizes: 'any', type: 'image/svg+xml', purpose: 'any' },
+      { src: '/brand/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
+      { src: '/brand/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
+      { src: '/brand/icon-maskable.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
+      { src: '/apple-icon', sizes: '180x180', type: 'image/png', purpose: 'any' },
+    ],
+  }
+}

package/app/member.php/page.tsx

@@ -0,0 +1,11 @@
+import { serveLegacyUrl } from '@/server/legacy-redirect'
+
+export const dynamic = 'force-dynamic'
+
+export default async function MemberPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}): Promise<never> {
+  return serveLegacyUrl('member.php', await searchParams)
+}

package/app/memberlist.php/page.tsx

@@ -0,0 +1,11 @@
+import { serveLegacyUrl } from '@/server/legacy-redirect'
+
+export const dynamic = 'force-dynamic'
+
+export default async function MemberlistPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}): Promise<never> {
+  return serveLegacyUrl('memberlist.php', await searchParams)
+}

package/app/not-found.tsx

@@ -0,0 +1,14 @@
+import { renderErrorNotice } from '@/server/error-notice'
+import { NOT_FOUND_NOTICE } from '@/view/error-notice'
+
+export default async function NotFound() {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className="flex flex-1 items-center justify-center px-6 py-12"
+    >
+      {await renderErrorNotice(NOT_FOUND_NOTICE)}
+    </main>
+  )
+}

package/app/opengraph-image.ts

@@ -0,0 +1,11 @@
+import { renderBrandSocial } from '@/server/brand-mark'
+
+export const dynamic = 'force-dynamic'
+
+export const size = { width: 1200, height: 630 }
+
+export const contentType = 'image/png'
+
+export default function OpengraphImage(): Promise<Response> {
+  return renderBrandSocial()
+}

package/app/redirect/page.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from 'next'
+
+import { requireSlot, slotCopy } from '@meith/theme-kit'
+
+import { getActor } from '@/server/context'
+import { getTranslator, tr } from '@/server/i18n'
+import { filterView, viewerRef } from '@/server/plugin-view'
+import { currentTheme } from '@/server/theme'
+import { buildRedirectNotice, localHref } from '@/view/redirect-notice'
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: await tr('page.redirecting') }
+}
+
+export default async function RedirectPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ to?: string; message?: string }>
+}) {
+  const { to, message } = await searchParams
+  const filtered = await filterView(
+    'view.redirect-notice',
+    buildRedirectNotice(to, message),
+    viewerRef(await getActor()),
+  )
+  const notice = { ...filtered, targetHref: localHref(filtered.targetHref) }
+  const RedirectNotice = requireSlot(await currentTheme(), 'RedirectNotice')
+
+  return (
+    <>
+      <meta httpEquiv="refresh" content={`${notice.delaySeconds};url=${notice.targetHref}`} />
+      <main
+        id="board-content"
+        tabIndex={-1}
+        className="flex flex-1 items-center justify-center px-6 py-12"
+      >
+        <RedirectNotice
+          {...notice}
+          copy={slotCopy(await currentTheme(), 'RedirectNotice', await getTranslator())}
+        />
+      </main>
+    </>
+  )
+}

package/app/robots.txt/route.ts

@@ -0,0 +1,35 @@
+import { absolute, isIndexable } from '@/server/syndication'
+
+export const dynamic = 'force-dynamic'
+
+const COMPUTED = ['/search', '/discover', '/online', '/stats']
+
+const PRIVATE = [
+  '/usercp',
+  '/messages',
+  '/notifications',
+  '/subscriptions',
+  '/modcp',
+  '/moderation',
+  '/admin',
+  '/api',
+]
+
+export async function GET(): Promise<Response> {
+  const body = (await isIndexable())
+    ? [
+        'User-agent: *',
+        ...[...COMPUTED, ...PRIVATE].map((path) => `Disallow: ${path}`),
+        '',
+        `Sitemap: ${await absolute('/sitemap.xml')}`,
+        '',
+      ].join('\n')
+    : ['User-agent: *', 'Disallow: /', ''].join('\n')
+
+  return new Response(body, {
+    headers: {
+      'content-type': 'text/plain; charset=utf-8',
+      'cache-control': 'public, max-age=300',
+    },
+  })
+}

package/app/showthread.php/page.tsx

@@ -0,0 +1,11 @@
+import { serveLegacyUrl } from '@/server/legacy-redirect'
+
+export const dynamic = 'force-dynamic'
+
+export default async function ShowThreadPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}): Promise<never> {
+  return serveLegacyUrl('showthread.php', await searchParams)
+}

package/app/sitemap/[page]/route.ts

@@ -0,0 +1,64 @@
+import { noFeed, xmlResponse } from '@/server/feed-routes'
+import {
+  absoluteTo,
+  feedRepository,
+  filterSitemapEntries,
+  isIndexable,
+  origin,
+  publicScope,
+  SITEMAP_CHUNK,
+} from '@/server/syndication'
+import { renderSitemap } from '@/view/feed'
+
+export const dynamic = 'force-dynamic'
+
+const THREADS = /^threads-([1-9]\d*)\.xml$/
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ page: string }> },
+): Promise<Response> {
+  const repo = feedRepository()
+  if (repo === null || !(await isIndexable())) return noFeed()
+
+  const { page } = await params
+  const scope = await publicScope()
+  const site = await origin()
+
+  if (page === 'forums.xml') {
+    const forums = await repo.sitemapForums(scope)
+    return xmlResponse(
+      renderSitemap(
+        await filterSitemapEntries(
+          forums.map((forum) => ({
+            loc: absoluteTo(site, `/${forum.forumId}-${forum.slug}`),
+            ...(forum.lastPostAt === null ? {} : { lastmod: forum.lastPostAt }),
+          })),
+          0,
+        ),
+      ),
+    )
+  }
+
+  const match = THREADS.exec(page)
+  if (match === null) return noFeed()
+
+  const chunk = Number(match[1])
+  const afterId = await repo.sitemapBoundaryId((chunk - 1) * SITEMAP_CHUNK, scope)
+  if (afterId === null) return noFeed()
+
+  const threads = await repo.sitemapThreads(afterId, SITEMAP_CHUNK, scope)
+  if (threads.length === 0) return noFeed()
+
+  return xmlResponse(
+    renderSitemap(
+      await filterSitemapEntries(
+        threads.map((thread) => ({
+          loc: absoluteTo(site, `/thread/${thread.threadId}-${thread.slug}`),
+          lastmod: thread.lastPostAt,
+        })),
+        chunk,
+      ),
+    ),
+  )
+}

package/app/sitemap.xml/route.ts

@@ -0,0 +1,31 @@
+import { noFeed, xmlResponse } from '@/server/feed-routes'
+import {
+  absoluteTo,
+  feedRepository,
+  isIndexable,
+  origin,
+  publicScope,
+  SITEMAP_CHUNK,
+} from '@/server/syndication'
+import { renderSitemapIndex } from '@/view/feed'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(): Promise<Response> {
+  const repo = feedRepository()
+  if (repo === null || !(await isIndexable())) return noFeed()
+
+  const scope = await publicScope()
+  const threads = await repo.sitemapThreadCount(scope)
+  const chunks = Math.max(1, Math.ceil(threads / SITEMAP_CHUNK))
+  const site = await origin()
+
+  return xmlResponse(
+    renderSitemapIndex([
+      { loc: absoluteTo(site, '/sitemap/forums.xml') },
+      ...Array.from({ length: chunks }, (_, index) => ({
+        loc: absoluteTo(site, `/sitemap/threads-${index + 1}.xml`),
+      })),
+    ]),
+  )
+}