@eightyfourthousand/lib-editing 2026.3.0

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

@@ -0,0 +1,368 @@
+'use client';
+
+import {
+  createGraphQLClient,
+  getBibliographyEntry,
+  getGlossaryInstance,
+  getPassage,
+  getTranslationImprint,
+  getTranslationMetadataByUuid,
+} from '@eightyfourthousand/client-graphql';
+import type {
+  BibliographyEntryItem,
+  GlossaryTermInstance,
+  Imprint,
+  Passage,
+  TohokuCatalogEntry,
+  Work,
+} from '@eightyfourthousand/data-access';
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { ReadonlyURLSearchParams, useSearchParams } from 'next/navigation';
+import {
+  PANEL_NAMES,
+  PanelName,
+  PanelsState,
+  PanelState,
+  TabName,
+} from './types';
+import { HoverCardProvider } from './HoverCardProvider';
+import { GatedFeature, useFeatureFlagEnabled } from '@eightyfourthousand/lib-instr';
+import { useIsMobile } from '@eightyfourthousand/lib-utils';
+import { RestrictionWarning } from './RestrictionWarning';
+import { NavigationContext, DEFAULT_PANELS } from './NavigationContext';
+
+export { NavigationContext, useNavigation } from './NavigationContext';
+export type { NavigationState } from './NavigationContext';
+
+const parsePanelParams = (
+  params: ReadonlyURLSearchParams,
+): {
+  toh?: TohokuCatalogEntry;
+  panels: PanelsState;
+} => {
+  const panels: PanelsState = { ...DEFAULT_PANELS };
+
+  for (const [key, value] of params.entries()) {
+    const match = value.match(/^(open|closed)(?::(.+))?$/);
+    if (match) {
+      const [state, tab, hash] = value.split(':');
+      const panelKey = key as PanelName;
+      if (!PANEL_NAMES.includes(panelKey)) {
+        continue;
+      }
+      panels[panelKey] = {
+        open: state === 'open',
+        tab: tab as TabName | undefined,
+        hash: hash || undefined,
+      };
+    }
+  }
+
+  const toh = (params.get('toh') as TohokuCatalogEntry) || undefined;
+
+  return { toh, panels };
+};
+
+export const NavigationProvider = ({
+  uuid,
+  children,
+}: {
+  uuid: string;
+  children: ReactNode;
+}) => {
+  const graphqlClient = createGraphQLClient();
+  const query = useSearchParams();
+  const isMobile = useIsMobile();
+  const [panels, setPanels] = useState<PanelsState>(
+    parsePanelParams(query).panels || DEFAULT_PANELS,
+  );
+  const isPanelTransitioning = useRef(false);
+  const [toh, setToh] = useState<TohokuCatalogEntry | undefined>();
+  const [showOuterContent, setShowOuterContent] = useState(true);
+  const [hasTranslationContent, setHasTranslationContent] = useState(true);
+  const [imprint, setImprint] = useState<Imprint | undefined>();
+  const bibliographyCache = useRef<{ [uuid: string]: BibliographyEntryItem }>(
+    {},
+  );
+  const endnoteCache = useRef<{ [uuid: string]: Passage }>({});
+  const glossaryCache = useRef<{ [uuid: string]: GlossaryTermInstance }>({});
+  const passageCache = useRef<{ [uuid: string]: Passage }>({});
+  const workCache = useRef<{ [uuid: string]: Work }>({});
+
+  const fetchBibliographyEntry = useCallback(
+    async (uuid: string): Promise<BibliographyEntryItem | undefined> => {
+      if (!bibliographyCache.current) {
+        bibliographyCache.current = {};
+      }
+
+      if (bibliographyCache.current[uuid]) {
+        return bibliographyCache.current[uuid];
+      }
+
+      const entry = await getBibliographyEntry({
+        client: graphqlClient,
+        uuid,
+      });
+      if (!entry) {
+        return undefined;
+      }
+
+      bibliographyCache.current[uuid] = entry;
+      return entry;
+    },
+    [graphqlClient],
+  );
+
+  const fetchEndNote = useCallback(
+    async (uuid: string): Promise<Passage | undefined> => {
+      if (!endnoteCache.current) {
+        endnoteCache.current = {};
+      }
+
+      if (endnoteCache.current[uuid]) {
+        return endnoteCache.current[uuid];
+      }
+
+      const endnote = await getPassage({ client: graphqlClient, uuid });
+      if (!endnote) {
+        return undefined;
+      }
+
+      endnoteCache.current[uuid] = endnote;
+      return endnote;
+    },
+    [graphqlClient],
+  );
+
+  const fetchGlossaryTerm = useCallback(
+    async (uuid: string) => {
+      if (!glossaryCache.current) {
+        glossaryCache.current = {};
+      }
+
+      if (glossaryCache.current[uuid]) {
+        return glossaryCache.current[uuid];
+      }
+
+      const term = await getGlossaryInstance({ client: graphqlClient, uuid });
+      if (!term) {
+        return undefined;
+      }
+
+      glossaryCache.current[uuid] = term;
+      return term;
+    },
+    [graphqlClient],
+  );
+
+  const fetchPassage = useCallback(
+    async (uuid: string): Promise<Passage | undefined> => {
+      if (!passageCache.current) {
+        passageCache.current = {};
+      }
+
+      if (passageCache.current[uuid]) {
+        return passageCache.current[uuid];
+      }
+
+      const passage = await getPassage({ client: graphqlClient, uuid });
+      if (!passage) {
+        return undefined;
+      }
+
+      passageCache.current[uuid] = passage;
+      return passage;
+    },
+    [graphqlClient],
+  );
+
+  const fetchWork = useCallback(
+    async (uuid: string): Promise<Work | undefined> => {
+      if (!workCache.current) {
+        workCache.current = {};
+      }
+
+      if (workCache.current[uuid]) {
+        return workCache.current[uuid];
+      }
+
+      const work = await getTranslationMetadataByUuid({
+        client: graphqlClient,
+        uuid,
+      });
+      if (!work) {
+        return undefined;
+      }
+
+      workCache.current[uuid] = work;
+      return work;
+    },
+    [graphqlClient],
+  );
+
+  const updatePanel = useCallback(
+    ({ name, state }: { name: PanelName; state: PanelState }) => {
+      const { open } = state;
+      isPanelTransitioning.current = true;
+      setPanels((prev) => {
+        const newPanels = {
+          ...prev,
+          [name]: state,
+        };
+
+        // On mobile, auto-close sidebars when navigating to other panels
+        if (isMobile && open) {
+          // If opening left panel with navigation, close right panel
+          if (name === 'left') {
+            newPanels.right = { ...prev.right, open: false };
+          }
+          // If opening right panel with navigation, close left panel
+          else if (name === 'right') {
+            newPanels.left = { ...prev.left, open: false };
+          }
+          // If opening main panel with navigation, close both sidebars
+          else if (name === 'main') {
+            newPanels.left = { ...prev.left, open: false };
+            newPanels.right = { ...prev.right, open: false };
+          }
+        }
+
+        return newPanels;
+      });
+    },
+    [isMobile, hasTranslationContent],
+  );
+
+  useEffect(() => {
+    if (!toh && !panels) {
+      return;
+    }
+
+    isPanelTransitioning.current = true;
+    const params = new URLSearchParams(window.location.search);
+
+    if (toh) {
+      params.set('toh', toh);
+    }
+
+    if (panels) {
+      Object.entries(panels).forEach(([panelName, panelState]) => {
+        const { open, tab, hash } = panelState;
+        const openness = open ? 'open' : 'closed';
+        params.set(
+          panelName,
+          `${openness}${tab ? `:${tab}` : ''}${hash ? `:${hash}` : ''}`,
+        );
+      });
+    }
+
+    const newUrl = `?${params.toString()}${window.location.hash}`;
+    window.history.replaceState(null, '', newUrl);
+  }, [toh, panels]);
+
+  useEffect(() => {
+    if (!uuid || !toh) {
+      return;
+    }
+
+    (async () => {
+      const imprint = await getTranslationImprint({
+        client: graphqlClient,
+        uuid,
+        toh,
+      });
+      setImprint(imprint);
+    })();
+  }, [uuid, toh, graphqlClient]);
+
+  useEffect(() => {
+    if (isPanelTransitioning.current) {
+      isPanelTransitioning.current = false;
+      return;
+    }
+
+    const { panels: newPanels, toh: newToh } = parsePanelParams(query);
+
+    if (newPanels) {
+      setPanels(newPanels);
+    }
+
+    if (newToh) {
+      setToh(newToh);
+    }
+  }, [query, parsePanelParams]);
+
+  const hasHoverCards = useFeatureFlagEnabled('translation-hover-cards');
+
+  useEffect(() => {
+    if (!hasTranslationContent) {
+      setPanels((prev) => {
+        if (!prev.right.open) {
+          return prev;
+        }
+        return {
+          ...prev,
+          right: { ...prev.right, open: false },
+        };
+      });
+    }
+  }, [hasTranslationContent]);
+
+  const contextValue = useMemo(
+    () => ({
+      uuid,
+      imprint,
+      panels,
+      toh,
+      showOuterContent,
+      hasTranslationContent,
+      setToh,
+      setShowOuterContent,
+      setHasTranslationContent,
+      updatePanel,
+      fetchBibliographyEntry,
+      fetchEndNote,
+      fetchGlossaryTerm,
+      fetchPassage,
+      fetchWork,
+    }),
+    [
+      uuid,
+      imprint,
+      panels,
+      toh,
+      showOuterContent,
+      hasTranslationContent,
+      setToh,
+      setShowOuterContent,
+      setHasTranslationContent,
+      updatePanel,
+      fetchBibliographyEntry,
+      fetchEndNote,
+      fetchGlossaryTerm,
+      fetchPassage,
+      fetchWork,
+    ],
+  );
+
+  return (
+    <NavigationContext.Provider value={contextValue}>
+      {hasHoverCards ? (
+        <HoverCardProvider>{children}</HoverCardProvider>
+      ) : (
+        children
+      )}
+      <GatedFeature flag="show-restriction-warning">
+        <RestrictionWarning imprint={imprint} />
+      </GatedFeature>
+    </NavigationContext.Provider>
+  );
+};
+

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

@@ -0,0 +1,75 @@
+import { ImageResponse } from 'next/og';
+import {
+  createServerGraphQLClient,
+  getTranslationMetadataByUuid,
+} from '@eightyfourthousand/client-graphql/ssr';
+import { MainLogoSvg } from '@eightyfourthousand/design-system/ssr';
+import { isUuid, parseToh } from '@eightyfourthousand/lib-utils';
+import { cache } from 'react';
+
+export const runtime = 'nodejs';
+export const alt = '84000 Translation';
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+
+export const OpenGraphImage = async ({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) => {
+  const { slug } = await params;
+
+  // Only fetch work metadata for valid UUIDs
+  let work = null;
+  if (isUuid(slug)) {
+    const client = await createServerGraphQLClient();
+    work = await cache(getTranslationMetadataByUuid)({
+      client,
+      uuid: slug,
+    });
+  }
+
+  const title = work?.title || '84000 Translation';
+  const toh = work?.toh.map(parseToh).join(', ') || '';
+
+  return new ImageResponse(
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#004570',
+        padding: '60px',
+      }}
+    >
+      <MainLogoSvg width={332} height={200} />
+      <div
+        style={{
+          color: 'white',
+          fontSize: 48,
+          fontWeight: 'bold',
+          textAlign: 'center',
+          marginTop: '40px',
+          maxWidth: '1000px',
+        }}
+      >
+        {title}
+      </div>
+      {toh && (
+        <div
+          style={{
+            color: '#F18903',
+            fontSize: 32,
+            marginTop: '20px',
+          }}
+        >
+          {toh}
+        </div>
+      )}
+    </div>,
+    { ...size },
+  );
+};

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

@@ -0,0 +1,10 @@
+import { Skeleton } from '@eightyfourthousand/design-system';
+
+export const PassageSkeleton = () => {
+  return (
+    <div className="flex gap-5 -ms-5 @c/sidebar:-ms-8">
+      <Skeleton className="h-4 w-6" />
+      <Skeleton className="h-32 grow" />
+    </div>
+  );
+};

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

@@ -0,0 +1,177 @@
+'use client';
+
+import { Imprint } from '@eightyfourthousand/data-access';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@eightyfourthousand/design-system';
+import { CircleAlertIcon, XIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+const RESTRICTION_COOKIE_NAME = 'eft-restriction-warning-ignored';
+
+export const getCookie = (name: string): string | undefined => {
+  const cookieValue = document.cookie
+    .split('; ')
+    .find((row) => row.startsWith(`${name}=`))
+    ?.split('=')[1];
+
+  return decodeURIComponent(cookieValue || '');
+};
+
+export const setCookie = (name: string, value: string, days = 365) => {
+  const date = new Date();
+  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+  const expires = `expires=${date.toUTCString()}`;
+  document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
+};
+
+export const useRestrictionWarning = ({ imprint }: { imprint?: Imprint }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [shouldIgnore, setShouldIgnore] = useState(true);
+  const [toIgnore, setToIgnore] = useState<string[]>([]);
+
+  useEffect(() => {
+    const toIgnoreStr = getCookie(RESTRICTION_COOKIE_NAME) || '[]';
+    const toIgnore = JSON.parse(toIgnoreStr) || [];
+    setToIgnore(toIgnore);
+  }, []);
+
+  useEffect(() => {
+    if (!imprint?.uuid) {
+      return;
+    }
+
+    setShouldIgnore(toIgnore.includes(imprint.uuid));
+  }, [toIgnore, imprint]);
+
+  useEffect(() => {
+    if (!shouldIgnore && imprint?.restriction) {
+      setIsOpen(true);
+    }
+  }, [shouldIgnore, imprint]);
+
+  const ignore = () => {
+    if (!imprint?.uuid) {
+      return;
+    }
+
+    const newToIgnore = [...toIgnore, imprint.uuid];
+    setToIgnore(newToIgnore);
+    setCookie(RESTRICTION_COOKIE_NAME, JSON.stringify(newToIgnore));
+  };
+
+  return {
+    isOpen,
+    setIsOpen,
+    ignore,
+  };
+};
+
+export const RestrictionWarning = ({ imprint }: { imprint?: Imprint }) => {
+  const { isOpen, setIsOpen, ignore } = useRestrictionWarning({ imprint });
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent
+        className="max-w-readable w-full font-serif"
+        showCloseButton={false}
+      >
+        <DialogHeader>
+          <div className="flex justify-between pb-4 text-destructive">
+            <CircleAlertIcon className="my-auto" />
+            <DialogTitle className="my-auto text-2xl">
+              Tantra Text Warning
+            </DialogTitle>
+            <DialogClose className="my-auto">
+              <XIcon />
+            </DialogClose>
+          </div>
+        </DialogHeader>
+        <p>
+          Readers are reminded that according to Vajrayāna Buddhist tradition
+          there are restrictions and commitments concerning tantra.
+        </p>
+        <p>
+          Practitioners who are not sure if they should read translations in
+          this section are advised to consult the authorities of their lineage.
+        </p>
+        <p>
+          The responsibility for reading these texts or sharing them with
+          others—and hence the consequences—lies in the hands of readers.
+        </p>
+        <Accordion type="single" collapsible>
+          <AccordionItem value="more-info">
+            <AccordionTrigger className="text-base">
+              About unrestricted access
+            </AccordionTrigger>
+            <AccordionContent className="space-y-2 leading-6">
+              <p>
+                The decision to publish tantra texts without restricted access
+                has been considered carefully. First of all, it should be noted
+                that all the original Tibetan texts of the Kangyur, including
+                those in this Tantra section, are in the public domain. Some of
+                the texts in this section (but by no means all of them) are
+                nevertheless, according to some traditions, only studied with
+                authorization and after suitable preliminaries.
+              </p>
+              <p>
+                It is true, of course, that a translation makes the content
+                accessible to a far greater number of people; 84000 has
+                therefore consulted many senior Buddhist teachers on this
+                question, and most of them felt that to publish the texts openly
+                is, on balance, the best solution. The alternatives would be not
+                to translate them at all (which would defeat the purposes of the
+                whole project), or to place some sort of restriction on their
+                access. Restricted access has been tried by some Buddhist book
+                publishers, and of course needs a system of administration,
+                judgment, and policing that is either a mere formality, or is
+                very difficult to implement. It would be even harder to
+                implement in the case of electronic texts—and even easier to
+                circumvent. Indeed, nowadays practically the whole range of
+                traditionally restricted Tibetan Buddhist material is already
+                available to anyone who looks for it, and is all too often
+                misrepresented, taken out of context, or its secret and esoteric
+                nature deliberately vaunted.
+              </p>
+              <p>
+                84000’s policy is to present carefully authenticated
+                translations in their proper setting of the whole body of
+                Buddhist sacred literature, and to trust the good sense of the
+                vast majority of readers not to misuse or misunderstand them.
+                Readers are reminded that according to Vajrayāna Buddhist
+                tradition there are restrictions and commitments concerning
+                tantra. Practitioners who are not sure if they should read
+                translations in this section are advised to consult the
+                authorities of their lineage. The responsibility, and hence
+                consequences, of reading these texts and/or sharing them with
+                others who may or may not fulfill the requirements lie in the
+                hands of readers.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <DialogFooter>
+          <Button
+            className="font-sans"
+            variant="destructive"
+            onClick={() => {
+              setIsOpen(false);
+              ignore();
+            }}
+          >
+            Don't show again for this text
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,83 @@
+'use client';
+
+import { useInView } from 'motion/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNavigation } from './NavigationProvider';
+import { createGraphQLClient, getWorkFolios } from '@eightyfourthousand/client-graphql';
+import type { Folio } from '@eightyfourthousand/data-access';
+import { LabeledElement } from './LabeledElement';
+import { PassageSkeleton } from './PassageSkeleton';
+import { LotusPond } from '@eightyfourthousand/design-system';
+
+const PAGE_SIZE = 10;
+
+export const SourceReader = () => {
+  const [page, setPage] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const [folios, setFolios] = useState<Folio[]>([]);
+
+  const { toh, uuid } = useNavigation();
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+  const shouldLoadMore = useInView(loadMoreRef);
+  const graphqlClient = createGraphQLClient();
+
+  const fetchMore = useCallback(async () => {
+    if (!toh || !uuid) return;
+
+    const folios = await getWorkFolios({
+      client: graphqlClient,
+      uuid,
+      toh,
+      page,
+      size: PAGE_SIZE,
+    });
+    if (folios.length) {
+      setPage((prevPage) => prevPage + 1);
+      setFolios((prevFolios) => [...prevFolios, ...folios]);
+      setHasMore(folios.length >= PAGE_SIZE);
+    }
+  }, [toh, uuid, page, graphqlClient]);
+
+  useEffect(() => {
+    if (shouldLoadMore && hasMore) {
+      fetchMore();
+    }
+  }, [shouldLoadMore, hasMore, fetchMore]);
+
+  useEffect(() => {
+    // Reset when uuid or toh changes
+    setFolios([]);
+    setPage(0);
+    setHasMore(true);
+  }, [toh, uuid]);
+
+  return (
+    <div className="pt-12 flex flex-col gap-5 mx-auto max-w-readable 2xl:max-w-380">
+      {folios.map((folio, index) => (
+        <LabeledElement
+          key={index}
+          id={folio.uuid}
+          label={`f.${folio.folio}.${folio.side}\nvol.${folio.volume}`}
+          className="mt-0.5"
+          contentType="source"
+        >
+          <div className="leading-7 font-tibetan text-lg 2xl:whitespace-pre-wrap whitespace-normal">
+            {folio.content}
+          </div>
+        </LabeledElement>
+      ))}
+      <div ref={loadMoreRef} className="h-0" />
+      {hasMore ? (
+        <>
+          {Array.from({ length: 3 }).map((_, i) => (
+            <PassageSkeleton key={i} />
+          ))}
+        </>
+      ) : (
+        <div className="w-full pt-16 pb-6">
+          <LotusPond className="mx-auto w-96" />
+        </div>
+      )}
+    </div>
+  );
+};