@terrafirmagreg-team/guide 0.0.0-stage → 0.1.0

package/src/components/views/page/text.tsx

@@ -0,0 +1,57 @@
+import { GuideText } from '@terrafirmagreg-team/guide/components/views/text';
+import { pageTexts } from '@terrafirmagreg-team/guide/lib/page-kind';
+import type { PageRendererProps } from '@terrafirmagreg-team/guide/types';
+
+type PageTextProps = Pick<
+  PageRendererProps,
+  | 'page'
+  | 'dataset'
+  | 'lang'
+  | 'bookPath'
+  | 'bookModId'
+  | 'categoryByEntry'
+  | 'langMap'
+  | 'keybinds'
+  | 'book'
+  | 'questLinks'
+  | 'previews'
+>;
+
+export function PageText({
+  page,
+  dataset,
+  lang,
+  bookPath,
+  bookModId,
+  categoryByEntry,
+  book,
+  langMap,
+  keybinds,
+  questLinks,
+  previews,
+}: PageTextProps) {
+  return (
+    <>
+      {pageTexts(page).map((text, index) => (
+        <div
+          key={index}
+          className="whitespace-pre-wrap text-sm leading-relaxed"
+        >
+          <GuideText
+            text={text}
+            dataset={dataset}
+            lang={lang}
+            modId={bookModId}
+            bookPath={bookPath}
+            categoryByEntry={categoryByEntry}
+            macros={book?.macros}
+            langMap={langMap}
+            keybinds={keybinds}
+            questLinks={questLinks}
+            previews={previews}
+          />
+        </div>
+      ))}
+    </>
+  );
+}

package/src/components/views/page/view.tsx

@@ -0,0 +1,279 @@
+import { EntryProvider } from '@terrafirmagreg-team/game/hooks/use-entry-context';
+import { Entry } from '@terrafirmagreg-team/game/components/entry/entry';
+import {
+  Workspace,
+  WorkspaceBody,
+  WorkspaceDescription,
+  WorkspaceTitle,
+} from '@terrafirmagreg-team/kit/components/workspace';
+import { guideConfig } from '@terrafirmagreg-team/guide/lib/config';
+import { GithubInfo } from '@terrafirmagreg-team/ui/components/blocks/git/github-info';
+import { sectionConfig } from '@terrafirmagreg-team/kit/lib/config';
+import { parseDatasetRef } from '@terrafirmagreg-team/kit/lib/location';
+import { categoryMap, guideBreadcrumbItems } from '@terrafirmagreg-team/guide/lib/breadcrumb';
+import { guideToc } from '@terrafirmagreg-team/guide/lib/toc';
+import { GuideText } from '@terrafirmagreg-team/guide/components/views/text';
+import { GuideOverviewBody } from '@terrafirmagreg-team/guide/components/views/page/overview-body';
+import { GuideCategoryBody } from '@terrafirmagreg-team/guide/components/views/page/category-body';
+import { GuideEntryBody } from '@terrafirmagreg-team/guide/components/views/page/entry-body';
+import { guideMessage } from '@terrafirmagreg-team/guide/lib/messages';
+import { Comments } from '@terrafirmagreg-team/comments';
+import {
+  guideBookHref,
+  guideCategoryHref,
+} from '@terrafirmagreg-team/guide/lib/paths';
+import type { GuideIndex, GuidePagePayload } from '@terrafirmagreg-team/guide/types';
+
+type NavItem = { name: string; url: string };
+
+function guideNavItems(
+  payload: GuidePagePayload,
+  overview: GuideIndex | undefined,
+): { previous?: NavItem; next?: NavItem } {
+  const modId = payload.bookModId ?? payload.modId;
+  const bookPath = payload.bookPath;
+  if (!overview || !modId || !bookPath) return {};
+  const { dataset, lang } = payload;
+  const chain: NavItem[] = [];
+  if (overview.book)
+    chain.push({
+      name: overview.book.name,
+      url: guideBookHref(dataset, lang, modId, bookPath),
+    });
+  for (const category of overview.categories) {
+    chain.push({
+      name: category.name,
+      url: guideCategoryHref(dataset, lang, modId, bookPath, category),
+    });
+    for (const entry of category.entries)
+      chain.push({
+        name: entry.name,
+        url: guideBookHref(dataset, lang, modId, bookPath, entry.id),
+      });
+  }
+  const current =
+    payload.kind === 'entry' && payload.entry
+      ? guideBookHref(dataset, lang, modId, bookPath, payload.entry.id)
+      : payload.kind === 'category' && payload.categoryId
+        ? guideCategoryHref(dataset, lang, modId, bookPath, {
+            id: payload.categoryId,
+          })
+        : payload.kind === 'overview'
+          ? guideBookHref(dataset, lang, modId, bookPath)
+          : undefined;
+  const index = current
+    ? chain.findIndex((item) => item.url === current)
+    : -1;
+  return {
+    previous: index > 0 ? chain[index - 1] : undefined,
+    next:
+      index >= 0 && index < chain.length - 1 ? chain[index + 1] : undefined,
+  };
+}
+
+export function GuidePageView({
+  payload,
+  langMap,
+}: {
+  payload: GuidePagePayload;
+  langMap: Record<string, string>;
+}) {
+  const { dataset, lang, kind } = payload;
+  const overview: GuideIndex | undefined =
+    payload.book !== undefined || payload.categories !== undefined
+      ? {
+          status: payload.book ? 'ready' : 'missing',
+          root: '',
+          modId: payload.bookModId ?? payload.modId ?? '',
+          bookPath: payload.bookPath,
+          book: payload.book ?? null,
+          categories: payload.categories ?? [],
+          entries: payload.entries ?? [],
+          language: lang,
+          isFallback: false,
+        }
+      : undefined;
+  const categories = overview
+    ? categoryMap(overview.categories)
+    : new Map<string, string>();
+  const labels = {
+    related: guideMessage(payload.messages, 'guide.related'),
+    objective: guideMessage(payload.messages, 'guide.objective'),
+  };
+
+  let toc: ReturnType<typeof guideToc> | undefined;
+  let body: React.ReactNode = null;
+
+  switch (kind) {
+    case 'pack':
+      break;
+    case 'overview':
+      if (overview) {
+        body = (
+          <GuideOverviewBody
+            dataset={dataset}
+            lang={lang}
+            modId={payload.modId}
+            bookPath={payload.bookPath}
+            overview={overview}
+            categories={categories}
+            langMap={langMap}
+            questLinks={payload.questLinks}
+            previews={payload.previews}
+            messages={payload.messages}
+          />
+        );
+      }
+      break;
+    case 'category':
+      body = (
+        <GuideCategoryBody
+          dataset={dataset}
+          lang={lang}
+          modId={payload.modId}
+          bookPath={payload.bookPath}
+          overview={overview}
+          categoryId={payload.categoryId}
+          messages={payload.messages}
+        />
+      );
+      break;
+    case 'entry':
+      toc = guideToc(
+        payload.entry?.pages,
+        langMap,
+        labels,
+        payload.extras?.entityNames,
+      );
+      body = overview && payload.bookPath && (
+        <GuideEntryBody
+          dataset={dataset}
+          lang={lang}
+          bookPath={payload.bookPath}
+          overview={overview}
+          entry={payload.entry}
+          categories={categories}
+          langMap={langMap}
+          extras={payload.extras}
+          questLinks={payload.questLinks}
+          previews={payload.previews}
+          messages={payload.messages}
+        />
+      );
+      break;
+    default: {
+      const _exhaustive: never = kind;
+      body = <p>{String(_exhaustive)}</p>;
+    }
+  }
+
+  const copied =
+    payload.entry?.translation ??
+    overview?.categories.find((item) => item.id === payload.categoryId)
+      ?.translation ??
+    payload.book?.translation;
+
+  const crumbs = guideBreadcrumbItems({
+    kind,
+    title: payload.title,
+    dataset,
+    modId: payload.modId,
+    bookPath: payload.bookPath,
+    overview,
+    categoryId: payload.categoryId,
+  });
+
+  const datasetConf =
+    sectionConfig().datasetConfig[parseDatasetRef(dataset).id];
+  const repoSlug = datasetConf?.repo?.split('/');
+  const mdQuery = new URLSearchParams();
+  if (payload.modId && payload.bookPath) {
+    mdQuery.set('book', `${payload.modId}:${payload.bookPath}`);
+  }
+  if (kind === 'entry' && payload.entry) {
+    mdQuery.set('entry', payload.entry.id);
+  } else if (kind === 'category' && payload.categoryId) {
+    mdQuery.set('cat', payload.categoryId);
+  }
+  mdQuery.set('lang', lang);
+  const mdUrl = `/guide/${dataset}.md?${mdQuery}`;
+
+  const nav = guideNavItems(payload, overview);
+  const {
+    PageActions,
+    UntranslatedCallout,
+  } = guideConfig().components;
+
+  return (
+    <EntryProvider dataset={dataset} lang={lang} langMap={langMap}>
+      <Workspace
+        toc={toc ?? []}
+        className="min-h-full"
+        breadcrumb={{ items: crumbs, previews: payload.previews }}
+        pagination={{ items: nav }}
+      >
+        <UntranslatedCallout copied={copied} />
+        <WorkspaceTitle>
+          {kind === 'entry' && payload.previewIcon ? (
+            <span className="inline-flex items-center gap-2">
+              <Entry
+                id={payload.previewIcon}
+                kind={payload.previewKind}
+                name={payload.title}
+                href={false}
+                tooltip={false}
+              />
+              {payload.title}
+            </span>
+          ) : (
+            payload.title
+          )}
+        </WorkspaceTitle>
+        {payload.description ? (
+          <WorkspaceDescription className="mb-0">
+            <GuideText
+              text={payload.description}
+              dataset={dataset}
+              lang={lang}
+              modId={payload.modId}
+              bookPath={payload.bookPath}
+              categoryByEntry={categories}
+              macros={overview?.book?.macros}
+              langMap={langMap}
+              questLinks={payload.questLinks}
+              previews={payload.previews}
+            />
+          </WorkspaceDescription>
+        ) : null}
+        <div className="flex flex-row gap-2 items-center border-b pb-6">
+          <PageActions
+            copied={copied}
+            crowdinUrl={datasetConf?.crowdin}
+            title={payload.title}
+            mdUrl={mdUrl}
+            githubUrl={
+              datasetConf?.repo
+                ? `https://github.com/${datasetConf.repo}`
+                : undefined
+            }
+          />
+        </div>
+        {kind === 'pack' && repoSlug ? (
+          <GithubInfo
+            owner={repoSlug[0]}
+            repo={repoSlug[1]}
+            className="not-prose mb-6 w-full"
+          />
+        ) : null}
+        <WorkspaceBody>
+          <div data-md-root className="contents">
+            {body}
+          </div>
+        </WorkspaceBody>
+        <Comments
+          page={`guide:${dataset}:${payload.modId}:${payload.bookPath}:${payload.entry?.id ?? payload.categoryId ?? 'book'}#${lang}`}
+        />
+      </Workspace>
+    </EntryProvider>
+  );
+}

package/src/components/views/text.tsx

@@ -0,0 +1,130 @@
+import { Fragment, type ReactNode } from 'react';
+import { LinkPreview } from '@terrafirmagreg-team/ui/components/blocks/link/link-preview';
+import { guideLink } from '@terrafirmagreg-team/guide/lib/reference';
+import { formatGuide } from '@terrafirmagreg-team/guide/lib/format';
+import { keybindLabels } from '@terrafirmagreg-team/guide/lib/format';
+import { Kbd } from '@terrafirmagreg-team/ui/components/ui/kbd';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import type { GuideFormatOptions } from '@terrafirmagreg-team/guide/types';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+const LINK_STYLE = 'text-primary underline underline-offset-2';
+
+export function GuideText({
+  text,
+  dataset,
+  lang,
+  modId,
+  bookPath,
+  categoryByEntry,
+  macros,
+  langMap,
+  keybinds,
+  questLinks,
+  previews,
+}: {
+  text: string;
+  dataset?: string;
+  lang?: Lang;
+  modId?: string;
+  bookPath?: string;
+} & Omit<GuideFormatOptions, 'dataset' | 'lang' | 'modId' | 'bookPath'>) {
+  if (!text) return null;
+  const nodes = formatGuide(text, {
+    dataset,
+    lang,
+    modId,
+    bookPath,
+    categoryByEntry,
+    macros,
+    langMap,
+    keybinds,
+    questLinks,
+    previews,
+  });
+  const children: ReactNode[] = [];
+  for (const [index, node] of nodes.entries()) {
+    let el: ReactNode = null;
+    if (node.type === 'break') {
+      el = <br />;
+    } else if (node.type === 'keybind') {
+      const { label, title } = keybindLabels(
+        node.value,
+        langMap ?? {},
+        keybinds ?? {},
+      );
+      el = (
+        <Tooltip>
+          <TooltipTrigger render={<Kbd>{label}</Kbd>} />
+          <TooltipContent>{title}</TooltipContent>
+        </Tooltip>
+      );
+    } else if (node.type === 'command') {
+      el = <code className="font-mono text-sm">{node.value}</code>;
+    } else if (node.type === 'text') {
+      el = node.value;
+    }
+    if (el === null) continue;
+    if (node.type === 'text' && node.styles?.length) {
+      el = (
+        <span
+          className={cn(
+            node.styles.includes('bold') && 'font-bold',
+            node.styles.includes('italic') && 'italic',
+            node.styles.includes('underline') && 'underline',
+            node.styles.includes('strike') && 'line-through',
+          )}
+        >
+          {el}
+        </span>
+      );
+    }
+    if (node.type === 'text' && node.color) {
+      el = <span style={{ color: node.color }}>{el}</span>;
+    }
+    if (node.type === 'text' && node.link) {
+      const { href, external } = guideLink(node, {
+        dataset: dataset ?? '',
+        lang: lang ?? 'en_us',
+        modId: modId ?? '',
+        bookPath: bookPath ?? '',
+        categoryByEntry: categoryByEntry ?? new Map(),
+        questLinks,
+      });
+      el = href ? (
+        <LinkPreview
+          preview={previews?.[href]}
+          href={href}
+          variant="raw"
+          className={LINK_STYLE}
+          {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}
+        >
+          {el}
+        </LinkPreview>
+      ) : (
+        el
+      );
+    }
+    if (node.type === 'text' && node.tooltip) {
+      el = (
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <span className="cursor-help underline decoration-dotted underline-offset-4">
+                {el}
+              </span>
+            }
+          />
+          <TooltipContent>{node.tooltip}</TooltipContent>
+        </Tooltip>
+      );
+    }
+    children.push(<Fragment key={index}>{el}</Fragment>);
+  }
+  return <>{children}</>;
+}

package/src/hooks/use-left-sidebar-tree.ts

@@ -0,0 +1,19 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { useLocationSearch } from '@terrafirmagreg-team/ui/hooks/page/use-location-search';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import { useLastValue } from '@terrafirmagreg-team/ui/hooks/use-last-value';
+import { useGuideTree } from '@terrafirmagreg-team/guide/hooks/use-tree';
+import { guideQueryFromParams } from '@terrafirmagreg-team/guide/lib/query';
+import { parseSectionLocation } from '@terrafirmagreg-team/kit/lib/location';
+
+export function useGuideLeftSidebarTree(tree: PageTree.Root): PageTree.Root {
+  const { dataset } = parseSectionLocation(usePathname());
+  const lang = useResolvedLang();
+  const { bookId } = guideQueryFromParams(
+    new URLSearchParams(useLocationSearch()),
+  );
+  const runtime = useLastValue(useGuideTree(dataset, lang, bookId), dataset);
+  return runtime ?? tree;
+}

package/src/hooks/use-tree.ts

@@ -0,0 +1,33 @@
+'use client';
+
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import { loadClientGuideBook } from '@terrafirmagreg-team/guide/lib/client/guides';
+import { listGuideBooks } from '@terrafirmagreg-team/guide/lib/books';
+import { guideTreeChildren } from '@terrafirmagreg-team/guide/lib/tree/children';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+export function useGuideTree(
+  dataset: string | undefined,
+  lang: Lang,
+  bookId: string | undefined,
+): PageTree.Root | undefined {
+  return useAsyncValue(
+    dataset
+      ? async () => {
+          const summaries = await listGuideBooks(dataset, lang);
+          if (!summaries.length) return undefined;
+          const resolvedId = bookId ?? summaries[0]?.bookId;
+          const index = resolvedId
+            ? await loadClientGuideBook(dataset, lang, resolvedId)
+            : undefined;
+          return {
+            name: 'guide',
+            children: index ? guideTreeChildren(dataset, index) : [],
+            $id: `guide/${dataset}/${resolvedId ?? 'none'}/${lang}`,
+          } satisfies PageTree.Root;
+        }
+      : undefined,
+    [dataset, lang, bookId],
+  );
+}

package/src/lib/book/convert.ts

@@ -0,0 +1,74 @@
+import { dumpTextLines } from '@terrafirmagreg-team/game/lib/dump/assets/lang/names';
+import type {
+  GuideBookJson,
+  GuideBookRef,
+} from '@terrafirmagreg-team/guide/lib/data/dto';
+import type { GuideBook } from '@terrafirmagreg-team/guide/types';
+import {
+  type FallbackTracker,
+  fallbackTracker,
+  localize,
+  localizeGuideValue,
+  markTextKeys,
+} from './localize';
+import {
+  asCover,
+  asLanding,
+  displayRecord,
+  macrosFrom,
+  stringField,
+  urlSafeSlug,
+} from './raw';
+
+function bookName(
+  raw: GuideBookJson | undefined,
+  ref: GuideBookRef,
+  slug: string,
+  langMap: Record<string, string>,
+  tracker?: FallbackTracker,
+): string {
+  const display = displayRecord(raw);
+  const nameKey = stringField(display, 'name');
+  return nameKey
+    ? localize(langMap, nameKey, nameKey, tracker)
+    : (stringField(raw, 'id') ?? ref.bookId ?? slug);
+}
+
+export function toBook(
+  raw: GuideBookJson | undefined,
+  ref: GuideBookRef,
+  slug: string,
+  langMap: Record<string, string>,
+  rawLang?: Record<string, string>,
+): GuideBook {
+  const display = displayRecord(raw);
+  const landing = asLanding(display?.landing);
+  const tracker = fallbackTracker(rawLang);
+  markTextKeys(landing, tracker);
+  return {
+    id: stringField(raw, 'id') ?? ref.bookId,
+    slug,
+    name: bookName(raw, ref, slug, langMap, tracker),
+    description: localizeGuideValue(
+      stringField(raw, 'subtitle'),
+      langMap,
+      tracker,
+    ) as string | undefined,
+    landing,
+    landingText: landing.length
+      ? dumpTextLines(langMap, landing).join('\n')
+      : undefined,
+    cover: asCover(raw?.cover),
+    macros: macrosFrom(raw),
+    ...(tracker?.flag ? { translation: tracker.flag } : {}),
+  };
+}
+
+export function bookSlug(
+  raw: GuideBookJson | undefined,
+  ref: GuideBookRef,
+): string {
+  const explicit = stringField(raw, 'slug');
+  if (explicit) return urlSafeSlug(explicit);
+  return urlSafeSlug(ref.bookPath);
+}