v3: src/ is documented like api/ and shared/, and the reference covers the whole repository — the frontend had no module docs, JSDoc on some components and hooks and not on others, props typed inline in half the components and in private interfaces in the rest, // comments on declarations, and no return types on 147 exported functions, so deno doc --lint over src/ found 637 errors. The rule api/ follows is applied to every non-test module of src/: a /** … @module */ block, JSDoc on every export and every field of an exported interface, /** */ for declarations and // for notes, verbs for functions ("Renders…" for a component), parameters named in the prose, {@link} only for symbols in scope, and a page's JSDoc names its route and who may see it (App.tsx's module doc lists the route table). For deno doc to show them, every exported function states its return type: components React.JSX.Element (or | null, or a portal), memo and forwardRef components their exotic types, contexts React.Context<…>, and a hook returning several things a documented Use<Name>Result interface (useAuth, useRequiredAuth, useFading, useEmojiTrigger, useMentionAutocomplete, useDumpCardLink, usePlayRichContent; FeedCacheResult, YouTubePlaylistControls and UseApiFormReturn are renamed to match). Every component that takes props takes an exported, documented <Name>Props interface — the 64 inline prop types are lifted into one, DumpFeed gets DumpFeedProps extending MainFeedProps. React types go through the global React namespace: the four default imports of react are gone, since deno doc can't follow them. Two duplicates go too: useMentionAutocomplete's UserResult was shared/'s UserSuggestion, and JournalCard re-exported JournalShape for no one; i18n.ts no longer re-exports Lingui's i18n, which its three users now import from @lingui/core. deno task doc and doc:lint now take src/ (but its tests and the generated locales), the index page gains a Frontend section linking every module by layer and domain, mod.test.ts walks src/ as well, and the docs workflow runs on changes to src/. deno doc doesn't document npm packages, so it takes a type imported from one — react-hook-form's FieldValues in the form fields, frimousse's SkinTone — for a private one; doc:lint now goes through doc-lint.ts, which fails on every diagnostic but those, 25 of them. The README states the frontend's part of the rule. No behaviour changes; 205 backend and 628 frontend tests pass, and tsc, deno check and deno lint are clean.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,17 @@
|
||||
/**
|
||||
* The tab's title: the page's, the site's name, and an unread badge.
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
// The server injects the configured site name into both <title> and this meta
|
||||
// tag (see api/lib/static.ts / api/middleware/og.ts). Read it once at startup.
|
||||
// In the Vite dev server the placeholder isn't substituted, so fall back.
|
||||
/**
|
||||
* Returns the site's name. The server injects the configured site name into
|
||||
* both <title> and a `site-name` meta tag (see api/lib/static.ts /
|
||||
* api/middleware/og.ts). In the Vite dev server the placeholder isn't
|
||||
* substituted, so it falls back to "gerbeur".
|
||||
*/
|
||||
function readSiteName(): string {
|
||||
const meta = document.querySelector('meta[name="site-name"]')
|
||||
?.getAttribute("content")?.trim();
|
||||
@@ -10,10 +19,13 @@ function readSiteName(): string {
|
||||
return "gerbeur";
|
||||
}
|
||||
|
||||
export const SITE_NAME = readSiteName();
|
||||
/** The site's name, read once at startup. */
|
||||
export const SITE_NAME: string = readSiteName();
|
||||
|
||||
// The server injects the configured emoji into a <meta name="site-emoji"> tag.
|
||||
// In the Vite dev server it's substituted too; fall back to the default truck.
|
||||
/**
|
||||
* Returns the site's emoji. The server injects the configured emoji into a
|
||||
* `site-emoji` meta tag; it falls back to the default truck.
|
||||
*/
|
||||
function readSiteEmoji(): string {
|
||||
const meta = document.querySelector('meta[name="site-emoji"]')
|
||||
?.getAttribute("content")?.trim();
|
||||
@@ -21,14 +33,20 @@ function readSiteEmoji(): string {
|
||||
return "🚚";
|
||||
}
|
||||
|
||||
export const SITE_EMOJI = readSiteEmoji();
|
||||
/** The site's emoji, read once at startup. */
|
||||
export const SITE_EMOJI: string = readSiteEmoji();
|
||||
|
||||
// The page title and the unread badge are set from different places (each
|
||||
// page, and the live-updates provider), so both are kept here and composed.
|
||||
// `null` base means no page has set one yet: keep the server-rendered title.
|
||||
/**
|
||||
* The page's title and the site's name. The page title and the unread badge are
|
||||
* set from different places (each page, and the live-updates provider), so both
|
||||
* are kept here and composed. `null` means no page has set one yet: keep the
|
||||
* server-rendered title.
|
||||
*/
|
||||
let baseTitle: string | null = null;
|
||||
/** The unread count. */
|
||||
let badge = 0;
|
||||
|
||||
/** Sets the tab's title from {@link baseTitle} and {@link badge}. */
|
||||
function applyTitle() {
|
||||
const base = baseTitle ?? document.title.replace(/^\(\d+\+?\) /, "");
|
||||
document.title = badge > 0 ? `(${badge > 99 ? "99+" : badge}) ${base}` : base;
|
||||
@@ -39,11 +57,11 @@ function applyTitle() {
|
||||
* navigation. Without this the tab title only ever reflects the server-rendered
|
||||
* <title> from the initial page load and goes stale on every SPA navigation.
|
||||
*
|
||||
* - Pass a non-empty string to show `<title> · <site name>`.
|
||||
* - Pass a non-empty `title` to show `<title> · <site name>`.
|
||||
* - Pass `null` to show just the site name (home / generic pages).
|
||||
* - Pass `undefined` while the page-specific title is still loading: the title
|
||||
* is left untouched, so a server-rendered OG title survives until data
|
||||
* arrives (avoids a flash to the bare site name on direct loads).
|
||||
* is left untouched, so a server-rendered OG title survives until data
|
||||
* arrives (avoids a flash to the bare site name on direct loads).
|
||||
*/
|
||||
export function useDocumentTitle(title: string | null | undefined): void {
|
||||
useEffect(() => {
|
||||
@@ -53,7 +71,9 @@ export function useDocumentTitle(title: string | null | undefined): void {
|
||||
}, [title]);
|
||||
}
|
||||
|
||||
/** Prefixes the tab title with an unread count, e.g. "(3) Chat · gerbeur". */
|
||||
/**
|
||||
* Prefixes the tab title with the unread `count`, e.g. "(3) Chat · gerbeur".
|
||||
*/
|
||||
export function setTitleBadge(count: number): void {
|
||||
if (count === badge) return;
|
||||
badge = count;
|
||||
|
||||
Reference in New Issue
Block a user