@terrafirmagreg-team/kit 1.2.11 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/kit",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "type": "module",
   "description": "Fumadocs content engine",
   "license": "LGPL-3.0-only",
@@ -25,10 +25,10 @@
     "@base-ui/react": "^1.9.0",
     "@icons-pack/react-simple-icons": "13.15.1",
     "@terrafirmagreg-team/data": "^1.2.3",
-    "@terrafirmagreg-team/mdx": "^1.2.5",
+    "@terrafirmagreg-team/mdx": "^1.2.6",
     "@terrafirmagreg-team/sites": "^1.2.2",
-    "@terrafirmagreg-team/translate": "^1.2.7",
-    "@terrafirmagreg-team/ui": "^1.2.8",
+    "@terrafirmagreg-team/translate": "^1.2.8",
+    "@terrafirmagreg-team/ui": "^1.2.9",
     "fumadocs-core": "16.17.10",
     "lucide-react": "^1.63.0",
     "server-only": "^0.0.1",

package/src/components/page-actions.tsx

@@ -20,10 +20,6 @@ import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
 import { useUntranslated } from '@terrafirmagreg-team/ui/hooks/use-lang';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
-import {
-  openPageMarkdown,
-  pageMarkdown,
-} from '@terrafirmagreg-team/mdx/lib/markdown';
 import type { TranslationState } from '@terrafirmagreg-team/translate/server';
 
 function ActionButton({
@@ -70,12 +66,10 @@ export function MarkdownCopyButton({
   );
 }
 
-export function CopyPageMarkdown({ title }: { title: string }) {
+export function CopyPageMarkdown({ mdUrl }: { mdUrl: string }) {
   return (
     <MarkdownCopyButton
-      getMarkdown={() =>
-        pageMarkdown(document.querySelector('[data-md-root]'), title)
-      }
+      getMarkdown={() => fetch(mdUrl).then((res) => res.text())}
     />
   );
 }
@@ -107,12 +101,10 @@ export function UntranslatedActions({
 
 export function ViewOptionsPopover({
   githubUrl,
-  title,
   mdUrl,
   ...props
 }: ComponentProps<typeof PopoverTrigger> & {
   githubUrl?: string;
-  title?: string;
   mdUrl?: string;
 }) {
   const t = useTranslations();
@@ -122,17 +114,9 @@ export function ViewOptionsPopover({
       href: githubUrl,
       icon: <SiGithub color="currentColor" className="size-4" />,
     },
-    (mdUrl || title !== undefined) && {
+    mdUrl && {
       title: t('View as Markdown', { note: 'ui.view_markdown' }),
-      ...(mdUrl
-        ? { href: mdUrl }
-        : {
-            onClick: () =>
-              void openPageMarkdown(
-                document.querySelector('[data-md-root]'),
-                title!,
-              ),
-          }),
+      href: mdUrl,
       icon: <TextIcon className="size-4" />,
     },
   ].filter((v) => !!v);
@@ -163,9 +147,9 @@ export function ViewOptionsPopover({
         {items.map((item) => (
           <ItemRow
             key={item.title}
-            {...('href' in item
-              ? { href: item.href, target: '_blank', rel: 'noreferrer noopener' }
-              : { onClick: item.onClick })}
+            href={item.href}
+            target="_blank"
+            rel="noreferrer noopener"
             media={item.icon}
             title={item.title}
             trailing={
@@ -181,20 +165,18 @@ export function ViewOptionsPopover({
 export function PageActions({
   copied,
   crowdinUrl,
-  title,
   mdUrl,
   githubUrl,
 }: {
   copied?: TranslationState;
   crowdinUrl?: string;
-  title: string;
   mdUrl?: string;
   githubUrl?: string;
 }) {
   return (
     <>
-      <CopyPageMarkdown title={title} />
-      <ViewOptionsPopover title={title} mdUrl={mdUrl} githubUrl={githubUrl} />
+      {mdUrl ? <CopyPageMarkdown mdUrl={mdUrl} /> : null}
+      <ViewOptionsPopover mdUrl={mdUrl} githubUrl={githubUrl} />
       <UntranslatedActions copied={copied} crowdinUrl={crowdinUrl} />
     </>
   );

package/src/components/views/dataset.tsx

@@ -3,13 +3,11 @@ import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import { LangContentSwitch } from '@terrafirmagreg-team/ui/components/blocks/lang/content';
 import {
+  datasetLandingMetadata,
   generateDatasetLandingParams,
-  getDatasetLanding,
   resolveDatasetLanding,
 } from '@terrafirmagreg-team/kit/lib/landing';
 import { sectionDatasets } from '@terrafirmagreg-team/kit/lib/datasets';
-import { sectionUrl } from '@terrafirmagreg-team/sites/location';
-import { canonicalUrl } from '@terrafirmagreg-team/kit/lib/urls';
 import type { DatasetLanding, SectionKey } from '@terrafirmagreg-team/kit/types';
 import {
   localeLoader,
@@ -58,22 +56,11 @@ export function createDatasetLandingPage<S extends SectionKey>(
     params,
   }: DatasetPageParams): Promise<Metadata> {
     const { slug } = await params;
-    const page = getDatasetLanding(
+    return datasetLandingMetadata(
       section,
       slug,
-      'en_us',
       await sectionDatasets(section),
     );
-    if (!page) notFound();
-    return {
-      title: page.title,
-      description: page.description,
-      alternates: {
-        canonical: canonicalUrl(
-          `${sectionUrl(section)}/${(slug ?? []).join('/')}`,
-        ),
-      },
-    };
   }
 
   return { Page, generateStaticParams, generateMetadata };

package/src/components/views/routes.tsx

@@ -20,6 +20,7 @@ import {
   sectionDatasets,
 } from '@terrafirmagreg-team/kit/lib/datasets';
 import {
+  datasetLandingMetadata,
   generateDatasetLandingParams,
   getDatasetLanding,
 } from '@terrafirmagreg-team/kit/lib/landing';
@@ -33,7 +34,6 @@ import {
   localeLoader,
   registerLocaleRenderer,
 } from '@terrafirmagreg-team/kit/lib/locale/renderer';
-import { canonicalUrl } from '@terrafirmagreg-team/kit/lib/urls';
 import { sectionUrl } from '@terrafirmagreg-team/sites/location';
 import { langContent, loadLocaleRegistry } from '@terrafirmagreg-team/translate/server';
 import type {
@@ -170,6 +170,7 @@ export function createSectionRoutes<
     }
     if (!PageView) return null;
     return renderSectionWorkspace({
+      section,
       source: src as SectionSource,
       slug,
       contentDir: source.contentDir ?? `content/${section}`,
@@ -275,22 +276,12 @@ export function createSectionRoutes<
 
   async function generateMetadata({ params }: RouteParams): Promise<Metadata> {
     const { slug } = await params;
-    if (slug?.length === 1 && landing) {
-      const page = getDatasetLanding(
+    if (slug?.length === 1 && landing)
+      return datasetLandingMetadata(
         section,
         slug,
-        'en_us',
         await sectionDatasets(section),
       );
-      if (!page) notFound();
-      return {
-        title: page.title,
-        description: page.description,
-        alternates: {
-          canonical: canonicalUrl(`${sectionUrl(section)}/${slug.join('/')}`),
-        },
-      };
-    }
     if (!PageView) return {};
     const src = (await source.getSource()) as SectionSource | undefined;
     if (src) {

package/src/components/views/section.tsx

@@ -10,11 +10,13 @@ import {
 import { loadLocaleRegistry } from '@terrafirmagreg-team/translate/server';
 import { readPageSource, translationState } from '@terrafirmagreg-team/translate/server';
 import { resolvePage, type SectionSource } from '@terrafirmagreg-team/kit/lib/page';
+import { pageJsonLd } from '@terrafirmagreg-team/kit/lib/jsonld';
 import { findNeighbour } from 'fumadocs-core/page-tree';
 import { stripLangFromUrl } from '@terrafirmagreg-team/translate/lib/slug';
 import { sectionConfig } from '@terrafirmagreg-team/kit/lib/config';
 import type {
   DatasetCatalog,
+  SectionKey,
   SectionPage,
   SectionTrees,
 } from '@terrafirmagreg-team/kit/types';
@@ -53,6 +55,7 @@ export type SectionPageViewFn = (
 ) => SectionPageView | Promise<SectionPageView>;
 
 export async function renderSectionWorkspace({
+  section,
   source,
   slug,
   contentDir,
@@ -64,6 +67,7 @@ export async function renderSectionWorkspace({
   page,
   lang,
 }: {
+  section: SectionKey;
   source: SectionSource;
   slug: string[] | undefined;
   contentDir: string;
@@ -117,6 +121,18 @@ export async function renderSectionWorkspace({
     history,
     features,
   });
-  return renderSectionView(view);
+  const jsonLd = JSON.stringify(pageJsonLd({ section, page, crumbs, lang }));
+  return renderSectionView({
+    ...view,
+    node: (
+      <>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: jsonLd }}
+        />
+        {view.node}
+      </>
+    ),
+  });
 }
 

package/src/lib/jsonld.ts

@@ -0,0 +1,46 @@
+import 'server-only';
+import { stripLangFromUrl } from '@terrafirmagreg-team/translate/lib/slug';
+import { sectionConfig } from './config';
+import { canonicalUrl } from './urls';
+import type { SectionCrumb } from './breadcrumb';
+import type { SectionKey, SectionPage } from '@terrafirmagreg-team/kit/types';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+export function pageJsonLd({
+  section,
+  page,
+  crumbs,
+  lang,
+}: {
+  section: SectionKey;
+  page: SectionPage;
+  crumbs: readonly SectionCrumb[];
+  lang: Lang;
+}): Record<string, unknown>[] {
+  const languages = [...sectionConfig().knownLanguages];
+  const url = canonicalUrl(stripLangFromUrl(page.url, languages));
+  const items = crumbs.length ? crumbs : [{ name: page.data.title }];
+  return [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'Article',
+      headline: page.data.title,
+      description: page.data.description,
+      url,
+      inLanguage: lang.replace('_', '-'),
+      isPartOf: { '@type': 'WebSite', url: canonicalUrl(`/${section}`) },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: items.map((crumb, index) => ({
+        '@type': 'ListItem',
+        position: index + 1,
+        name: crumb.name,
+        item: crumb.url
+          ? canonicalUrl(stripLangFromUrl(crumb.url, languages))
+          : url,
+      })),
+    },
+  ];
+}

package/src/lib/landing.ts

@@ -1,5 +1,9 @@
 import 'server-only';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
 import { loadLocaleRegistry } from '@terrafirmagreg-team/translate/server';
+import { sectionUrl } from '@terrafirmagreg-team/sites/location';
+import { canonicalUrl, getDatasetImageUrl } from './urls';
 import { datasetSlugs, findDataset } from './datasets';
 import type {
   DatasetLanding,
@@ -30,6 +34,36 @@ export function getDatasetLanding(
   };
 }
 
+export function datasetLandingMetadata(
+  section: SectionKey,
+  slug: string[] | undefined,
+  datasets: readonly SectionDataset[],
+): Metadata {
+  const page = getDatasetLanding(section, slug, 'en_us', datasets);
+  if (!page) notFound();
+  const meta = findDataset(datasets, { id: slug?.[0] ?? '' });
+  const description = page.description ?? meta?.description;
+  const title = page.datasetTitle ?? page.title;
+  const url = canonicalUrl(`${sectionUrl(section)}/${(slug ?? []).join('/')}`);
+  return {
+    title,
+    description,
+    alternates: { canonical: url },
+    openGraph: {
+      type: 'website',
+      url,
+      title,
+      description,
+      images: getDatasetImageUrl(section, slug?.[0] ?? '').url,
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+    },
+  };
+}
+
 export function resolveDatasetLanding(
   section: SectionKey,
   slug: string[] | undefined,

package/src/lib/page.ts

@@ -1,30 +1,16 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { createGetUrl } from 'fumadocs-core/source';
 import { firstLocalizedPage } from '@terrafirmagreg-team/translate/server';
 import { loadLocaleRegistry } from '@terrafirmagreg-team/translate/server';
 import { stripLangFromUrl, toInternalSlugs, toPublicSlug } from '@terrafirmagreg-team/translate/lib/slug';
 import { sectionConfig } from './config';
 import { sectionDatasets } from './datasets';
+import { canonicalUrl, getPageImageUrl } from './urls';
 import type { SectionKey, SectionPage, SectionSource } from '@terrafirmagreg-team/kit/types';
 import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
 
 export type { SectionSource } from '@terrafirmagreg-team/kit/types';
-
-const canonicalUrl = (pathname: string): string =>
-  new URL(
-    pathname.startsWith('/') ? pathname : `/${pathname}`,
-    sectionConfig().siteUrl,
-  ).toString();
-
-let imageUrl: ReturnType<typeof createGetUrl> | undefined;
-const getImageUrl = () =>
-  (imageUrl ??= createGetUrl(sectionConfig().previewRoute));
-
-function getDatasetImageUrl(section: string, dataset: string) {
-  const segments = [section, dataset, 'image.png'];
-  return { segments, url: getImageUrl()(segments) };
-}
+export { getDatasetImageUrl } from './urls';
 
 export function getPage<S extends SectionSource>(
   source: S,
@@ -97,7 +83,7 @@ export async function sectionMetadata(
       url,
       title: doc.data.title,
       description: doc.data.description,
-      images: getDatasetImageUrl(section, doc.slugs[0]).url,
+      images: getPageImageUrl(section, doc.slugs).url,
     },
     twitter: {
       card: 'summary_large_image',

package/src/lib/urls.ts

@@ -15,6 +15,15 @@ export function getDatasetImageUrl(section: string, dataset: string) {
   };
 }
 
+export function getPageImageUrl(section: string, slugs: string[]) {
+  const segments = [section, ...slugs, 'image.png'];
+
+  return {
+    segments,
+    url: createGetUrl(sectionConfig().previewRoute)(segments),
+  };
+}
+
 export function createGitFileUrl(git: {
   user: string;
   repo: string;