Add Logbuch: project update blog with admin, media and API
Public archive with sidebar navigation, project pages, month archive, search and entry pages with image blocks. Admin area for brands, projects, post types, users, api clients, media and the entry editor with drag and drop images, preview per audience, scheduling and publish checks. Read and write API with bearer tokens, audience scoping, idempotent creation, OpenAPI document and editorial guide. Magic link login with configurable allowed domains, whole app behind the session gate. 456 tests including design rule checks.
This commit is contained in:
Matthias Giesselmann
@@ -0,0 +1,88 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getFormatter, getTranslations } from 'next-intl/server'
|
||||
import { ProjectArchive } from '~/components/archive/ProjectArchive'
|
||||
import {
|
||||
listArchiveMonths,
|
||||
listPostTypeCounts,
|
||||
listPostsForArchive,
|
||||
loadArchiveStats,
|
||||
loadHighestNumber,
|
||||
loadPostCovers,
|
||||
} from '~/data/repositories/archive'
|
||||
import { monthYearFormat } from '~/lib/dates'
|
||||
import { findProjectView } from '~/lib/project-view'
|
||||
import { perPage, readMonth, readPage, readPostType, readYear, recentDays, type SearchParams } from '~/lib/query'
|
||||
import type { ViewerScope } from '~/domain/types'
|
||||
|
||||
const scope: ViewerScope = 'internal'
|
||||
|
||||
const coverCount = 3
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ project: string, entry: string, month: string }>
|
||||
searchParams: Promise<SearchParams>
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const resolved = await params
|
||||
const app = await getTranslations('app')
|
||||
const year = readYear(resolved.entry)
|
||||
const month = readMonth(resolved.month)
|
||||
|
||||
if (year === undefined || month === undefined) {
|
||||
const t = await getTranslations('notFound')
|
||||
return { title: `${app('name')} - ${t('title')}` }
|
||||
}
|
||||
|
||||
const format = await getFormatter()
|
||||
const view = await findProjectView(resolved.project, scope)
|
||||
const period = format.dateTime(new Date(Date.UTC(year, month - 1, 1)), monthYearFormat)
|
||||
|
||||
return { title: view ? `${period} - ${view.project.name} - ${app('name')}` : app('name') }
|
||||
}
|
||||
|
||||
export default async function MonthPage({ params, searchParams }: Props) {
|
||||
const resolved = await params
|
||||
const year = readYear(resolved.entry)
|
||||
const month = readMonth(resolved.month)
|
||||
|
||||
if (year === undefined || month === undefined) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const query = await searchParams
|
||||
const page = readPage(query.page)
|
||||
const type = readPostType(query.type)
|
||||
const view = await findProjectView(resolved.project, scope)
|
||||
|
||||
if (!view) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const [stats, months, list, typeCounts, highest] = await Promise.all([
|
||||
loadArchiveStats({ scope, projectSlug: resolved.project, recentDays }),
|
||||
listArchiveMonths({ scope, projectSlug: resolved.project }),
|
||||
listPostsForArchive({ scope, projectSlug: resolved.project, year, month, type, page, perPage }),
|
||||
listPostTypeCounts({ scope, projectSlug: resolved.project, year, month }),
|
||||
loadHighestNumber({ scope, projectSlug: resolved.project }),
|
||||
])
|
||||
|
||||
const covers = await loadPostCovers(list.items.slice(0, coverCount).map(item => item.id))
|
||||
|
||||
return (
|
||||
<ProjectArchive
|
||||
view={view}
|
||||
stats={stats}
|
||||
months={months}
|
||||
list={list}
|
||||
typeCounts={typeCounts}
|
||||
page={page}
|
||||
covers={covers}
|
||||
highest={highest}
|
||||
year={year}
|
||||
month={month}
|
||||
type={type}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getTranslations } from 'next-intl/server'
|
||||
import { PostDetail } from '~/components/archive/PostDetail'
|
||||
import { ProjectArchive } from '~/components/archive/ProjectArchive'
|
||||
import {
|
||||
findPostWithBlocks,
|
||||
listArchiveMonths,
|
||||
listPostTypeCounts,
|
||||
listPostsForArchive,
|
||||
loadArchiveStats,
|
||||
loadHighestNumber,
|
||||
loadPostCovers,
|
||||
} from '~/data/repositories/archive'
|
||||
import { findProjectView } from '~/lib/project-view'
|
||||
import { perPage, readPage, readPostType, readYear, recentDays, type SearchParams } from '~/lib/query'
|
||||
import type { ViewerScope } from '~/domain/types'
|
||||
|
||||
const scope: ViewerScope = 'internal'
|
||||
|
||||
const coverCount = 3
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ project: string, entry: string }>
|
||||
searchParams: Promise<SearchParams>
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { project, entry } = await params
|
||||
const app = await getTranslations('app')
|
||||
const year = readYear(entry)
|
||||
|
||||
if (year !== undefined) {
|
||||
const view = await findProjectView(project, scope)
|
||||
|
||||
return { title: view ? `${year} - ${view.project.name} - ${app('name')}` : app('name') }
|
||||
}
|
||||
|
||||
const detail = await findPostWithBlocks({ slug: entry, scope, projectSlug: project })
|
||||
|
||||
if (!detail) {
|
||||
const t = await getTranslations('notFound')
|
||||
return { title: `${app('name')} - ${t('title')}` }
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${detail.post.title} - ${detail.project.name}`,
|
||||
description: detail.post.teaser ?? undefined,
|
||||
}
|
||||
}
|
||||
|
||||
export default async function EntryPage({ params, searchParams }: Props) {
|
||||
const { project, entry } = await params
|
||||
const year = readYear(entry)
|
||||
|
||||
if (year === undefined) {
|
||||
const detail = await findPostWithBlocks({ slug: entry, scope, projectSlug: project })
|
||||
|
||||
if (!detail) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return <PostDetail detail={detail} />
|
||||
}
|
||||
|
||||
const query = await searchParams
|
||||
const page = readPage(query.page)
|
||||
const type = readPostType(query.type)
|
||||
const view = await findProjectView(project, scope)
|
||||
|
||||
if (!view) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const [stats, months, list, typeCounts, highest] = await Promise.all([
|
||||
loadArchiveStats({ scope, projectSlug: project, recentDays }),
|
||||
listArchiveMonths({ scope, projectSlug: project }),
|
||||
listPostsForArchive({ scope, projectSlug: project, year, type, page, perPage }),
|
||||
listPostTypeCounts({ scope, projectSlug: project, year }),
|
||||
loadHighestNumber({ scope, projectSlug: project }),
|
||||
])
|
||||
|
||||
const covers = await loadPostCovers(list.items.slice(0, coverCount).map(item => item.id))
|
||||
|
||||
return (
|
||||
<ProjectArchive
|
||||
view={view}
|
||||
stats={stats}
|
||||
months={months}
|
||||
list={list}
|
||||
typeCounts={typeCounts}
|
||||
page={page}
|
||||
covers={covers}
|
||||
highest={highest}
|
||||
year={year}
|
||||
type={type}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { notFound } from 'next/navigation'
|
||||
import { getTranslations } from 'next-intl/server'
|
||||
import { ProjectArchive } from '~/components/archive/ProjectArchive'
|
||||
import {
|
||||
listArchiveMonths,
|
||||
listPostTypeCounts,
|
||||
listPostsForArchive,
|
||||
loadArchiveStats,
|
||||
loadHighestNumber,
|
||||
loadPostCovers,
|
||||
} from '~/data/repositories/archive'
|
||||
import { findProjectView } from '~/lib/project-view'
|
||||
import { perPage, readPage, readPostType, recentDays, type SearchParams } from '~/lib/query'
|
||||
import type { ViewerScope } from '~/domain/types'
|
||||
|
||||
const scope: ViewerScope = 'internal'
|
||||
|
||||
const coverCount = 3
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ project: string }>
|
||||
searchParams: Promise<SearchParams>
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { project } = await params
|
||||
const app = await getTranslations('app')
|
||||
const view = await findProjectView(project, scope)
|
||||
|
||||
if (!view) {
|
||||
const t = await getTranslations('notFound')
|
||||
return { title: `${app('name')} - ${t('title')}` }
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${view.project.name} - ${app('name')}`,
|
||||
description: view.project.description ?? undefined,
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ProjectPage({ params, searchParams }: Props) {
|
||||
const { project } = await params
|
||||
const query = await searchParams
|
||||
const page = readPage(query.page)
|
||||
const type = readPostType(query.type)
|
||||
const view = await findProjectView(project, scope)
|
||||
|
||||
if (!view) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const [stats, months, list, typeCounts, highest] = await Promise.all([
|
||||
loadArchiveStats({ scope, projectSlug: project, recentDays }),
|
||||
listArchiveMonths({ scope, projectSlug: project }),
|
||||
listPostsForArchive({ scope, projectSlug: project, type, page, perPage }),
|
||||
listPostTypeCounts({ scope, projectSlug: project }),
|
||||
loadHighestNumber({ scope, projectSlug: project }),
|
||||
])
|
||||
|
||||
const covers = await loadPostCovers(list.items.slice(0, coverCount).map(item => item.id))
|
||||
|
||||
return (
|
||||
<ProjectArchive
|
||||
view={view}
|
||||
stats={stats}
|
||||
months={months}
|
||||
list={list}
|
||||
typeCounts={typeCounts}
|
||||
page={page}
|
||||
covers={covers}
|
||||
highest={highest}
|
||||
type={type}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import { AppShell } from '~/components/layout/AppShell'
|
||||
import { SiteFooter } from '~/components/layout/SiteFooter'
|
||||
import { SiteNav } from '~/components/layout/SiteNav'
|
||||
import { Wordmark } from '~/components/layout/Wordmark'
|
||||
import { loadHighestNumber } from '~/data/repositories/archive'
|
||||
import { requireSession } from '~/lib/auth-guards'
|
||||
import { currentPath } from '~/lib/request-path'
|
||||
import type { ViewerScope } from '~/domain/types'
|
||||
|
||||
const scope: ViewerScope = 'internal'
|
||||
|
||||
export default async function SiteLayout({ children }: { children: ReactNode }) {
|
||||
const viewer = await requireSession(await currentPath())
|
||||
const number = await loadHighestNumber({ scope })
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
nav={<SiteNav scope={scope} number={number} viewer={viewer} />}
|
||||
mark={<Wordmark number={number} />}
|
||||
>
|
||||
{children}
|
||||
<SiteFooter />
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
import { getTranslations } from 'next-intl/server'
|
||||
import { ArchiveMonths } from '~/components/archive/ArchiveMonths'
|
||||
import { EmptyNotice } from '~/components/archive/EmptyNotice'
|
||||
import { EntryList } from '~/components/archive/EntryList'
|
||||
import { FeatureEntry } from '~/components/archive/FeatureEntry'
|
||||
import { FilterBar } from '~/components/archive/FilterBar'
|
||||
import { Pagination } from '~/components/archive/Pagination'
|
||||
import { SideEntries } from '~/components/archive/SideEntries'
|
||||
import { TypeFilter } from '~/components/archive/TypeFilter'
|
||||
import { ViewHeader } from '~/components/archive/ViewHeader'
|
||||
import { Wrap } from '~/components/layout/Wrap'
|
||||
import {
|
||||
listArchiveMonths,
|
||||
listPostTypeCounts,
|
||||
listPostsForArchive,
|
||||
loadArchiveStats,
|
||||
loadPostCovers,
|
||||
} from '~/data/repositories/archive'
|
||||
import { perPage, readMonth, readPage, readPostType, readYear, recentDays, type SearchParams } from '~/lib/query'
|
||||
import { adminPath, overviewPath } from '~/lib/routes'
|
||||
import type { ViewerScope } from '~/domain/types'
|
||||
|
||||
const scope: ViewerScope = 'internal'
|
||||
|
||||
const sideCount = 3
|
||||
|
||||
const sideThreshold = 4
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const app = await getTranslations('app')
|
||||
const t = await getTranslations('overview')
|
||||
|
||||
return {
|
||||
title: `${app('name')} - ${t('title')}`,
|
||||
description: t('intro'),
|
||||
}
|
||||
}
|
||||
|
||||
export default async function OverviewPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams
|
||||
const page = readPage(params.page)
|
||||
const year = readYear(params.year)
|
||||
const month = readMonth(params.month)
|
||||
const type = readPostType(params.type)
|
||||
|
||||
const t = await getTranslations('overview')
|
||||
const archive = await getTranslations('archive')
|
||||
const entry = await getTranslations('entry')
|
||||
|
||||
const [stats, months, list, typeCounts] = await Promise.all([
|
||||
loadArchiveStats({ scope, recentDays }),
|
||||
listArchiveMonths({ scope }),
|
||||
listPostsForArchive({ scope, year, month, type, page, perPage }),
|
||||
listPostTypeCounts({ scope, year, month }),
|
||||
])
|
||||
|
||||
const period = year !== undefined || month !== undefined
|
||||
const narrowed = period || type !== undefined
|
||||
const beyond = list.total > 0 && list.items.length === 0
|
||||
const emptyTitle = beyond ? t('emptyPageTitle') : type && list.total === 0 ? t('emptyTypeTitle') : period ? t('emptyFilteredTitle') : t('emptyTitle')
|
||||
const emptyText = beyond ? t('emptyPage') : type && list.total === 0 ? t('emptyType') : period ? t('emptyFiltered') : t('empty')
|
||||
const lead = page === 1 && !narrowed ? list.items[0] : undefined
|
||||
const side = lead && list.items.length >= sideThreshold ? list.items.slice(1, 1 + sideCount) : []
|
||||
const rows = lead ? list.items.slice(1 + side.length) : list.items
|
||||
const updated = page === 1 ? list.items[0]?.publishAt ?? null : stats.to ?? null
|
||||
const typeTotal = typeCounts.reduce((sum, count) => sum + count.postCount, 0)
|
||||
const covers = await loadPostCovers(lead ? [lead, ...side].map(item => item.id) : [])
|
||||
|
||||
return (
|
||||
<main id="content">
|
||||
<Wrap>
|
||||
<ViewHeader title={t('title')} intro={t('intro')} updated={updated} total={list.total}>
|
||||
<TypeFilter
|
||||
counts={typeCounts}
|
||||
total={typeTotal}
|
||||
active={type}
|
||||
hrefFor={target => overviewPath({ year, month, type: target })}
|
||||
/>
|
||||
</ViewHeader>
|
||||
|
||||
<FilterBar year={year} month={month} resetHref={overviewPath({ type })} />
|
||||
|
||||
{list.items.length === 0 ? (
|
||||
<EmptyNotice
|
||||
title={emptyTitle}
|
||||
action={
|
||||
<Link
|
||||
href={beyond ? overviewPath({ year, month, type }) : narrowed ? overviewPath() : adminPath()}
|
||||
className="font-mono text-small"
|
||||
>
|
||||
{beyond ? archive('firstPage') : narrowed ? archive('all') : t('toAdmin')}
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
{emptyText}
|
||||
</EmptyNotice>
|
||||
) : (
|
||||
<div className="flex flex-col gap-10 pb-14 pt-6">
|
||||
{lead ? (
|
||||
<div className="flex flex-col gap-6 lg:flex-row lg:items-start">
|
||||
<FeatureEntry item={lead} cover={covers.get(lead.id)} newest className="min-w-0 flex-1" />
|
||||
<SideEntries items={side} covers={covers} className="lg:w-72 lg:shrink-0" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<EntryList items={rows} label={lead ? entry('older') : entry('latest')} />
|
||||
|
||||
<Pagination
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
total={list.total}
|
||||
hrefFor={target => overviewPath({ page: target, year, month, type })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="archive" className="scroll-mt-6">
|
||||
<ArchiveMonths
|
||||
months={months}
|
||||
activeYear={year}
|
||||
activeMonth={month}
|
||||
hrefFor={item => overviewPath({ year: item.year, month: item.month, type })}
|
||||
/>
|
||||
</div>
|
||||
</Wrap>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import type { Metadata } from 'next'
|
||||
import Form from 'next/form'
|
||||
import Link from 'next/link'
|
||||
import { getTranslations } from 'next-intl/server'
|
||||
import { TbSearch } from 'react-icons/tb'
|
||||
import { EmptyNotice } from '~/components/archive/EmptyNotice'
|
||||
import { EntryList } from '~/components/archive/EntryList'
|
||||
import { Pagination } from '~/components/archive/Pagination'
|
||||
import { ViewHeader } from '~/components/archive/ViewHeader'
|
||||
import { Wrap } from '~/components/layout/Wrap'
|
||||
import { listPostsForArchive, listRecentPosts } from '~/data/repositories/archive'
|
||||
import { perPage, readPage, readText, type SearchParams } from '~/lib/query'
|
||||
import { archivePath, overviewPath, searchPath } from '~/lib/routes'
|
||||
import type { ViewerScope } from '~/domain/types'
|
||||
|
||||
const scope: ViewerScope = 'internal'
|
||||
|
||||
const suggestionCount = 5
|
||||
|
||||
export async function generateMetadata({ searchParams }: { searchParams: Promise<SearchParams> }): Promise<Metadata> {
|
||||
const app = await getTranslations('app')
|
||||
const t = await getTranslations('search')
|
||||
const query = readText((await searchParams).q)
|
||||
|
||||
return { title: query ? `${t('title')}: ${query} - ${app('name')}` : `${t('title')} - ${app('name')}` }
|
||||
}
|
||||
|
||||
export default async function SearchPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
|
||||
const params = await searchParams
|
||||
const query = readText(params.q)
|
||||
const page = readPage(params.page)
|
||||
|
||||
const t = await getTranslations('search')
|
||||
const archive = await getTranslations('archive')
|
||||
const nav = await getTranslations('nav')
|
||||
const overview = await getTranslations('overview')
|
||||
|
||||
const list = query
|
||||
? await listPostsForArchive({ scope, query, page, perPage })
|
||||
: { items: [], total: 0 }
|
||||
|
||||
const suggestions = list.total === 0 ? await listRecentPosts({ scope, limit: suggestionCount }) : []
|
||||
|
||||
return (
|
||||
<main id="content">
|
||||
<Wrap>
|
||||
<ViewHeader title={t('title')} intro={t('intro')} total={query ? list.total : undefined}>
|
||||
<Form action={searchPath()} className="flex flex-wrap items-center gap-3">
|
||||
<label htmlFor="q" className="sr-only">
|
||||
{t('label')}
|
||||
</label>
|
||||
<span className="relative flex min-w-0 flex-1 items-center">
|
||||
<TbSearch aria-hidden="true" className="pointer-events-none absolute left-3 size-4 text-ink-3" />
|
||||
<input
|
||||
id="q"
|
||||
name="q"
|
||||
type="search"
|
||||
defaultValue={query ?? ''}
|
||||
placeholder={t('placeholder')}
|
||||
autoComplete="off"
|
||||
className="w-full min-w-0 border border-rule bg-surface py-2 pl-9 pr-3 font-body text-base text-ink placeholder:text-ink-3 focus:border-signal"
|
||||
/>
|
||||
</span>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex cursor-pointer items-center gap-2 border border-ink bg-ink px-4 py-2.5 font-mono text-micro font-semibold uppercase tracking-badge text-paper hover:border-signal hover:bg-signal"
|
||||
>
|
||||
{t('submit')}
|
||||
</button>
|
||||
</Form>
|
||||
</ViewHeader>
|
||||
|
||||
<div className="flex flex-col gap-10 pb-14 pt-6">
|
||||
{list.total > 0 && list.items.length === 0 ? (
|
||||
<EmptyNotice
|
||||
title={overview('emptyPageTitle')}
|
||||
action={
|
||||
<Link href={searchPath({ query })} className="font-mono text-small">
|
||||
{archive('firstPage')}
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
{overview('emptyPage')}
|
||||
</EmptyNotice>
|
||||
) : list.total > 0 ? (
|
||||
<>
|
||||
<EntryList
|
||||
items={list.items}
|
||||
label={t('found', { query: query ?? '' })}
|
||||
meta={archive('entries', { count: list.total })}
|
||||
highlight={query}
|
||||
/>
|
||||
<Pagination
|
||||
page={page}
|
||||
perPage={perPage}
|
||||
total={list.total}
|
||||
hrefFor={target => searchPath({ query, page: target })}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EmptyNotice
|
||||
title={query === undefined ? t('promptTitle') : t('emptyTitle')}
|
||||
action={
|
||||
<span className="flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||
<Link href={overviewPath()} className="font-mono text-small">
|
||||
{archive('all')}
|
||||
</Link>
|
||||
<Link href={archivePath()} className="font-mono text-small">
|
||||
{nav('archive')}
|
||||
</Link>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{query === undefined ? t('prompt') : t('empty', { query })}
|
||||
</EmptyNotice>
|
||||
|
||||
<EntryList items={suggestions} label={t('suggestions')} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Wrap>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user