@terrafirmagreg-team/changelog 1.2.3 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/changelog",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "description": "Changelog section",
   "license": "LGPL-3.0-only",
@@ -18,7 +18,7 @@
     "./types": "./src/types/index.ts"
   },
   "dependencies": {
-    "@terrafirmagreg-team/kit": "1.2.2",
+    "@terrafirmagreg-team/kit": "1.2.3",
     "@terrafirmagreg-team/mdx": "1.2.1",
     "@terrafirmagreg-team/translate": "1.2.3",
     "@terrafirmagreg-team/ui": "1.2.2",

package/src/components/views/browser.tsx

@@ -0,0 +1,164 @@
+import { redirect } from 'next/navigation';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import {
+  ChangelogTimeline,
+  type ChangelogTimelineEntry,
+} from '@terrafirmagreg-team/changelog/components/timeline';
+import {
+  WorkspaceBody,
+  WorkspaceDescription,
+  WorkspaceTitle,
+} from '@terrafirmagreg-team/ui/components/layouts/workspace';
+import { PageActions } from '@terrafirmagreg-team/kit/components/page-actions';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import type {
+  SectionPageView,
+  SectionWorkspaceProps,
+} from '@terrafirmagreg-team/kit/components/views/section';
+import type {
+  SectionFeatures,
+  SectionPageContext,
+} from '@terrafirmagreg-team/kit/types/features';
+import { sectionConfig } from '@terrafirmagreg-team/kit/lib/config';
+import { UntranslatedCallout } from '@terrafirmagreg-team/ui/components/blocks/lang/untranslated-callout';
+import { getMDXComponents } from '@terrafirmagreg-team/mdx/components/mdx-components';
+import { loadLocaleRegistry } from '@terrafirmagreg-team/translate/server';
+import { stripLangFromUrl } from '@terrafirmagreg-team/translate/lib/slug';
+import type { TranslationState } from '@terrafirmagreg-team/translate/server';
+import type { MDXContent } from 'mdx/types';
+import type { TableOfContents } from '@terrafirmagreg-team/kit/components/toc/base';
+import type { SectionPage } from '@terrafirmagreg-team/kit/types';
+
+export type ChangelogPageContext = SectionPageContext;
+
+export type ChangelogPageFeatures = SectionFeatures;
+
+export function ChangelogBrowser({
+  entries,
+  lang,
+}: {
+  entries: ChangelogTimelineEntry[];
+  lang: Lang;
+}) {
+  return <ChangelogTimeline entries={entries} lang={lang} />;
+}
+
+export function ChangelogPageChrome({
+  page,
+  body,
+  copied,
+  ctx,
+  dataset,
+  features,
+}: {
+  page: SectionPage;
+  body: React.ReactNode;
+  copied?: TranslationState;
+  ctx: ChangelogPageContext;
+  dataset?: { crowdin?: string };
+  features: ChangelogPageFeatures;
+}) {
+  const { languages } = loadLocaleRegistry();
+  return (
+    <>
+      <UntranslatedCallout copied={copied} />
+      <WorkspaceTitle>{page.data.title}</WorkspaceTitle>
+      <WorkspaceDescription className="mb-0">
+        {page.data.description}
+      </WorkspaceDescription>
+      <div className="flex flex-row gap-2 items-center border-b pb-6">
+        <PageActions
+          copied={copied}
+          crowdinUrl={dataset?.crowdin}
+          title={page.data.title}
+          mdUrl={`${stripLangFromUrl(page.url, [...languages])}.md${
+            page.locale ? `?lang=${page.locale}` : ''
+          }`}
+          githubUrl={features.fileUrl?.(ctx.filePath)}
+        />
+        {features.actionsRight?.(ctx)}
+      </div>
+      <WorkspaceBody>
+        {features.wrapBody ? (
+          features.wrapBody(body, ctx)
+        ) : (
+          <div data-md-root className="contents">
+            {body}
+          </div>
+        )}
+      </WorkspaceBody>
+      {features.footer?.(ctx)}
+      {page.data.comments !== false ? features.comments?.(ctx) : null}
+    </>
+  );
+}
+
+export async function changelogPage({
+  page,
+  link,
+  contentDir,
+  copied,
+  crumbs = [],
+  previews,
+  footer,
+  history = true,
+  features = {},
+}: SectionWorkspaceProps & {
+  features?: ChangelogPageFeatures;
+}): Promise<SectionPageView> {
+  if (page.data.redirect) redirect(page.data.redirect);
+  const { body: MDX, toc } = (await (
+    page.data as unknown as {
+      load(): Promise<{ body: MDXContent; toc: TableOfContents }>;
+    }
+  ).load()) as { body: MDXContent; toc: TableOfContents };
+  const filePath = `${contentDir}/${page.path.replace(/\\/g, '/')}`;
+  const datasetId = page.url.split('/').filter(Boolean)[1];
+  const dataset = datasetId
+    ? sectionConfig().datasetConfig[datasetId]
+    : undefined;
+  const ctx: ChangelogPageContext = {
+    page,
+    filePath,
+    datasetId,
+    copied,
+    history,
+  };
+  const body = <MDX components={getMDXComponents({ a: link })} />;
+  return {
+    node: (
+      <ChangelogPageChrome
+        page={page}
+        body={body}
+        copied={copied}
+        ctx={ctx}
+        dataset={dataset}
+        features={features}
+      />
+    ),
+    workspace: {
+      toc,
+      full: page.data.full,
+      className: 'min-h-full',
+      breadcrumb: { items: crumbs, previews },
+      pagination: { items: footer },
+    },
+  };
+}
+
+export function ChangelogBrowserFallback() {
+  return (
+    <div className="flex flex-col gap-8 pt-6">
+      {Array.from({ length: 3 }, (_, i) => (
+        <div key={i} className="flex flex-col gap-3">
+          <Skeleton className="h-6 w-32" />
+          <div className="flex flex-col gap-2.5 border-l border-border ps-4">
+            <Skeleton className="h-4 w-2/3" />
+            <Skeleton className="h-4 w-4/5" />
+            <Skeleton className="h-4 w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/views/landing.tsx

@@ -1,30 +1,43 @@
 import { sectionConfig } from '@terrafirmagreg-team/kit/lib/config';
-import type { SectionLandingView } from '@terrafirmagreg-team/kit/components/views/routes';
-import type { DatasetLanding, SectionSource } from '@terrafirmagreg-team/kit/types';
+import type {
+  SectionLandingProps,
+  SectionLandingView,
+} from '@terrafirmagreg-team/kit/components/views/routes';
+import type { SectionSource } from '@terrafirmagreg-team/kit/types';
+import { Suspense } from 'react';
 import { timelineEntries } from '@terrafirmagreg-team/changelog/components/entries';
 import {
-  ChangelogTimeline,
+  ChangelogBrowser,
+  ChangelogBrowserFallback,
+} from '@terrafirmagreg-team/changelog/components/views/browser';
+import {
   groupByMonth,
   monthAnchor,
 } from '@terrafirmagreg-team/changelog/components/timeline';
 import { ChangelogMonthLabel } from '@terrafirmagreg-team/changelog/components/month-label';
 
-export async function changelogLanding(
-  page: DatasetLanding,
-  { source, route }: { source: SectionSource; route: string },
-): Promise<SectionLandingView> {
+export async function changelogLanding({
+  page,
+  lang,
+  source,
+  route,
+}: SectionLandingProps<SectionSource>): Promise<SectionLandingView> {
   const dataset = page.dataset.id;
   const entries = await timelineEntries(
     source,
     route,
     dataset,
-    page.lang,
+    lang,
     sectionConfig().datasetConfig[dataset]?.repo,
   );
   return {
-    node: <ChangelogTimeline entries={entries} lang={page.lang} />,
+    node: (
+      <Suspense fallback={<ChangelogBrowserFallback />}>
+        <ChangelogBrowser entries={entries} lang={lang} />
+      </Suspense>
+    ),
     workspace: {
-      toc: groupByMonth(entries, page.lang).map((month) => ({
+      toc: groupByMonth(entries, lang).map((month) => ({
         title: <ChangelogMonthLabel monthKey={month.key} />,
         url: `#${monthAnchor(month.key)}`,
         depth: 2,

package/src/components/views/layout.tsx

@@ -0,0 +1,6 @@
+import { Layout } from '@terrafirmagreg-team/kit/components/layouts/layout';
+import type { SectionLayoutViewProps } from '@terrafirmagreg-team/kit/components/views/routes';
+
+export function ChangelogLayout(props: SectionLayoutViewProps) {
+  return <Layout {...props} />;
+}