@eightyfourthousand/lib-editing 2026.3.0

package/src/lib/components/shared/TranslationTable.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { Cell } from '@tanstack/react-table';
+import {
+  SortableHeader,
+  TooltipCell,
+  DataTableColumn,
+  DataTable,
+  FuzzyGlobalFilter,
+} from '@eightyfourthousand/design-system';
+import { Work } from '@eightyfourthousand/data-access';
+import { useEffect, useState } from 'react';
+import { TriangleAlertIcon } from 'lucide-react';
+import { usePathname, useRouter } from 'next/navigation';
+
+const CLASSNAME_FOR_COL: { [key: string]: string } = {
+  title: 'xl:w-[920px] lg:w-[740px] md:w-[490px] w-[246px]',
+  toh: 'xl:w-[100px] md:w-[60px] w-[40px]',
+  pages: 'w-[60px]',
+  publicationVersion: 'w-[40px]',
+  publicationDate: 'w-[80px]',
+  restriction: 'w-5 h-6',
+};
+
+type TableWork = {
+  uuid: string;
+  title: string;
+  toh: string;
+  publicationDate: string;
+  publicationVersion: string;
+  pages: number;
+  restriction: boolean;
+};
+
+const TranslationHeader = SortableHeader<TableWork>;
+
+export const TranslationsTable = ({ works }: { works: Work[] }) => {
+  const [data, setData] = useState<TableWork[]>([]);
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const onCellClick = (cell: Cell<TableWork, unknown>) => {
+    router.push(`${pathname}/${cell.row.original.uuid}`);
+  };
+
+  useEffect(() => {
+    const tableWorks: TableWork[] = works.map((w) => ({
+      ...w,
+      toh: w.toh.join(', '),
+      publicationDate: w.publicationDate?.toLocaleDateString() || 'Unpublished',
+    }));
+    setData(tableWorks);
+  }, [works]);
+
+  const columns: DataTableColumn<TableWork>[] = [
+    {
+      id: 'title',
+      accessorKey: 'title',
+      header: ({ column }) => (
+        <TranslationHeader column={column} name="Work Title" />
+      ),
+      cell: ({ row }) => (
+        <TooltipCell
+          className={CLASSNAME_FOR_COL.title}
+          content={row.original.title}
+        />
+      ),
+      className: CLASSNAME_FOR_COL.title,
+      onCellClick,
+    },
+    {
+      id: 'toh',
+      accessorKey: 'toh',
+      header: ({ column }) => <TranslationHeader column={column} name="Toh" />,
+      cell: ({ row }) => (
+        <TooltipCell
+          className={CLASSNAME_FOR_COL.toh}
+          content={row.original.toh}
+        />
+      ),
+      className: CLASSNAME_FOR_COL.toh,
+      onCellClick,
+    },
+    {
+      id: 'pages',
+      accessorKey: 'pages',
+      header: ({ column }) => (
+        <TranslationHeader column={column} name="Pages" />
+      ),
+      cell: ({ row }) => (
+        <div className={CLASSNAME_FOR_COL.pages}>{row.original.pages}</div>
+      ),
+      className: CLASSNAME_FOR_COL.pages,
+      onCellClick,
+    },
+    {
+      id: 'publicationDate',
+      accessorKey: 'publicationDate',
+      header: ({ column }) => (
+        <TranslationHeader column={column} name="Published" />
+      ),
+      cell: ({ row }) => (
+        <div className={CLASSNAME_FOR_COL.publicationDate}>
+          {row.original.publicationDate}
+        </div>
+      ),
+      className: CLASSNAME_FOR_COL.publicationDate,
+      onCellClick,
+    },
+    {
+      id: 'publicationVersion',
+      accessorKey: 'publicationVersion',
+      header: ({ column }) => (
+        <TranslationHeader column={column} name="Version" />
+      ),
+      cell: ({ row }) => (
+        <div className={CLASSNAME_FOR_COL.publicationVersion}>
+          {row.original.publicationVersion}
+        </div>
+      ),
+      className: CLASSNAME_FOR_COL.publicationVersion,
+      onCellClick,
+    },
+    {
+      id: 'restriction',
+      accessorKey: 'restriction',
+      header: () => '',
+      cell: ({ row }) => (
+        <div className={CLASSNAME_FOR_COL.restriction}>
+          {row.original.restriction ? (
+            <TriangleAlertIcon className="text-warning" />
+          ) : null}
+        </div>
+      ),
+      className: CLASSNAME_FOR_COL.restriction,
+      onCellClick,
+    },
+  ];
+
+  return (
+    <DataTable
+      name="translations"
+      columns={columns}
+      data={data}
+      filters={(table) => (
+        <div className="flex items-center py-4">
+          <FuzzyGlobalFilter
+            table={table}
+            placeholder="Search translations..."
+          />
+        </div>
+      )}
+    />
+  );
+};

package/src/lib/components/shared/bibliography/BibliographyBody.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { BibliographyEntryItem } from '@eightyfourthousand/data-access';
+import { LabeledElement } from '../LabeledElement';
+import { useRef } from 'react';
+import { useGlossaryInstanceListener } from '../hooks/useGlossaryInstanceListener';
+
+export const BibliographyBody = ({
+  entry,
+  label,
+}: {
+  entry: BibliographyEntryItem;
+  label: string;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useGlossaryInstanceListener({ ref });
+
+  return (
+    <LabeledElement
+      id={entry.uuid}
+      key={entry.uuid}
+      label={label}
+      contentType="bibliography"
+    >
+      <div ref={ref} dangerouslySetInnerHTML={{ __html: entry.html }} />
+    </LabeledElement>
+  );
+};

package/src/lib/components/shared/bibliography/BibliographyList.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { SectionTitle } from '@eightyfourthousand/design-system';
+import { LabeledElement } from '../LabeledElement';
+import { BibliographyEntries } from '@eightyfourthousand/data-access';
+import { cn } from '@eightyfourthousand/lib-utils';
+import { useScrollInTab } from '../hooks/useScrollInTab';
+import { BibliographyBody } from './BibliographyBody';
+
+export const BibliographyList = ({
+  content,
+  className,
+}: {
+  content: BibliographyEntries;
+  className?: string;
+}) => {
+  const { ref } = useScrollInTab({
+    panel: 'right',
+    tab: 'bibliography',
+  });
+
+  return (
+    <div ref={ref} className={cn('flex flex-col w-full', className)}>
+      <LabeledElement
+        className="@c/sidebar:mt-5 mt-6"
+        id={'bibliography'}
+        label="b."
+      >
+        <SectionTitle>Bibliography</SectionTitle>
+      </LabeledElement>
+      <div className="mt-3 flex flex-col gap-6">
+        {content.length === 0 && (
+          <div className="py-16 mx-auto text-muted-foreground">
+            No bibliography entries found.
+          </div>
+        )}
+        {content.map((section, i) => (
+          <div key={i} className="flex flex-col gap-4">
+            {section.heading && (
+              <LabeledElement
+                className="@c/sidebar:mt-0.5 mt-4"
+                id={`${section.heading}-${i}`}
+                label={`b.${i + 1}`}
+                contentType="bibliography"
+              >
+                <div className="text-secondary font-sans text-base font-bold">
+                  {section.heading}
+                </div>
+              </LabeledElement>
+            )}
+            {section.entries.map((entry, j) => (
+              <BibliographyBody
+                entry={entry}
+                label={`b.${i + 1}.${j + 1}`}
+                key={entry.uuid}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/lib/components/shared/bibliography/index.ts

@@ -0,0 +1 @@
+export * from './BibliographyList';

package/src/lib/components/shared/generate-metadata.ts

@@ -0,0 +1,44 @@
+import {
+  createServerGraphQLClient,
+  getTranslationMetadataByUuid,
+} from '@eightyfourthousand/client-graphql/ssr';
+import { isUuid, parseToh } from '@eightyfourthousand/lib-utils';
+import { Metadata } from 'next';
+import { cache } from 'react';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+
+  // Skip metadata generation for non-UUID paths (e.g., icon requests)
+  if (!isUuid(slug)) {
+    return { title: '84000 Translation Reader' };
+  }
+
+  const client = await createServerGraphQLClient();
+  const work = await cache(getTranslationMetadataByUuid)({
+    client,
+    uuid: slug,
+  });
+
+  if (!work) {
+    return { title: '84000 Translation Reader' };
+  }
+
+  const tohDisplay = work.toh.map(parseToh).join(', ');
+
+  return {
+    title: `${work.title} | 84000`,
+    description:
+      work.description || `${work.title} - ${tohDisplay} - ${work.section}`,
+    openGraph: {
+      title: work.title,
+      description:
+        work.description || `Buddhist translation from the ${work.section}`,
+      type: 'article',
+    },
+  };
+}

package/src/lib/components/shared/glossary/GlossaryInstanceBody.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import type { GlossaryTermInstance } from '@eightyfourthousand/data-access';
+import { Button, Li, Ul } from '@eightyfourthousand/design-system';
+import { GatedFeature } from '@eightyfourthousand/lib-instr';
+import { cn } from '@eightyfourthousand/lib-utils';
+import { useCallback, useRef, useState } from 'react';
+import { useGlossaryInstanceListener } from '../hooks/useGlossaryInstanceListener';
+import { useNavigation } from '../NavigationProvider';
+import { TAB_FOR_SECTION, PANEL_FOR_SECTION } from '../types';
+import { createGraphQLClient, getTermPassages } from '@eightyfourthousand/client-graphql';
+
+type PassageItem = { uuid: string; type: string; label: string };
+
+export const GlossaryInstanceBody = ({
+  instance,
+  className,
+}: {
+  instance: GlossaryTermInstance;
+  className?: string;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useGlossaryInstanceListener({ ref });
+  const { updatePanel } = useNavigation();
+
+  const initialPage = instance.passages;
+  const [passages, setPassages] = useState<PassageItem[]>(
+    initialPage?.items ?? [],
+  );
+  const [nextCursor, setNextCursor] = useState<string | null>(
+    initialPage?.nextCursor ?? null,
+  );
+  const [hasMore, setHasMore] = useState(initialPage?.hasMore ?? false);
+  const [loading, setLoading] = useState(false);
+
+  const loadMore = useCallback(() => {
+    if (!nextCursor || loading) return;
+    setLoading(true);
+    getTermPassages({
+      client: createGraphQLClient(),
+      uuid: instance.uuid,
+      first: 10,
+      after: nextCursor,
+    }).then((page) => {
+      setPassages((prev) => [...prev, ...page.items]);
+      setNextCursor(page.nextCursor);
+      setHasMore(page.hasMore);
+      setLoading(false);
+    });
+  }, [instance.uuid, nextCursor, loading]);
+
+  const handlePassageClick = useCallback(
+    (passage: PassageItem) => {
+      updatePanel({
+        name: PANEL_FOR_SECTION[passage.type] || 'main',
+        state: {
+          open: true,
+          tab: TAB_FOR_SECTION[passage.type] || 'translation',
+          hash: passage.uuid,
+        },
+      });
+    },
+    [updatePanel],
+  );
+
+  return (
+    <div className={cn('p-2 flex gap-1 flex-col', className)}>
+      {instance.names.english && (
+        <div className="text-secondary font-sans text-base font-bold">
+          {instance.names.english}
+        </div>
+      )}
+      <Ul>
+        {instance.names.wylie && (
+          <Li className="italic">{instance.names.wylie}</Li>
+        )}
+        {instance.names.tibetan && (
+          <Li className="pt-1">
+            <span className="font-tibetan text-base">
+              {instance.names.tibetan}
+            </span>
+          </Li>
+        )}
+        {instance.names.sanskrit && (
+          <Li className="italic">{instance.names.sanskrit}</Li>
+        )}
+        {instance.names.chinese && <Li>{instance.names.chinese}</Li>}
+        {instance.names.pali && (
+          <Li className="italic">{instance.names.pali}</Li>
+        )}
+      </Ul>
+      {instance.definition && (
+        <div
+          ref={ref}
+          className="glossary-instance-definition"
+          dangerouslySetInnerHTML={{ __html: instance.definition }}
+        />
+      )}
+      {passages.length > 0 && (
+        <div>
+          {passages.map((passage, index) => (
+            <span key={passage.uuid}>
+              {index > 0 && ', '}
+              <Button
+                variant="link"
+                className='p-0 h-6 font-normal hover:cursor-pointer'
+                onClick={() => handlePassageClick(passage)}
+              >
+                {passage.label || passage.uuid.slice(0, 6)}
+              </Button>
+            </span>
+          ))}
+          {hasMore && !loading && (
+            <span>
+              {', '}
+              <Button
+                variant="link"
+                className='p-0 h-6 font-normal hover:cursor-pointer'
+                onClick={loadMore}
+              >
+                more &rsaquo;
+              </Button>
+            </span>
+          )}
+          {loading && (
+            <span className="text-muted-foreground text-sm">{', …'}</span>
+          )}
+        </div>
+      )}
+      <GatedFeature flag="authority-pages">
+        <div className="text-sm text-mut my-2">
+          <a
+            href={`/glossary/${instance.authority}`}
+            target="_blank"
+            rel="noreferrer"
+            className="hover:underline decoration-slate hover:text-slate"
+          >
+            {'View full entry ›'}
+          </a>
+        </div>
+      </GatedFeature>
+    </div>
+  );
+};