feat(orgues): ✨ mostra la disposició

next.config.ts

@@ -30,4 +30,6 @@ const withMDX = createMDX({
   },
 });
 
-export default withNextIntl(withMDX(nextConfig));
+const withYAML = require("next-yaml");
+
+export default withNextIntl(withYAML(withMDX(nextConfig)));

package.json

@@ -34,6 +34,7 @@
     "next": "15.3.1",
     "next-intl": "^4.1.0",
     "next-themes": "^0.4.6",
+    "next-yaml": "^1.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-scrollspy-navigation": "^2.0.6",

src/app/[locale]/(markdown)/orgues/[provincia]/[comarca]/[municipi]/[edifici]/[orgue]/page.tsx

@@ -1,12 +1,14 @@
 import { orgueNavigation } from "@/app/[locale]/(markdown)/orgues/orgueNavigation";
 import { slugs } from "@/app/[locale]/(markdown)/orgues/redirects";
+import { AsideOrgue } from "@/components/aside-orgue";
 import { CopyButton } from "@/components/copy-button";
 import { Scaffold } from "@/components/scaffold";
+import { TOC } from "@/components/toc";
+import { normalizeOrgue } from "@/lib/normalize-orgue";
 import { route } from "@/lib/route";
+import { findMDXHeadings } from "@/mdx-components";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 import { OrguesOrgueParams } from "./layout";
-import { TOC } from "@/components/toc";
-import { findMDXHeadings } from "@/mdx-components";
 
 export default async function Page({
   params,
@@ -17,14 +19,26 @@ export default async function Page({
   setRequestLocale(locale);
 
   const t = await getTranslations("metadata");
-  const { provincia, comarca, municipi, edifici, orgue } =
-    orgueNavigation(navigation);
+  const {
+    provincia,
+    comarca,
+    municipi,
+    edifici,
+    orgue: orgueNav,
+  } = orgueNavigation(navigation);
 
   const Content = (
     await import(
-      `/src/content/orgues/${provincia.link}/${comarca.link}/${municipi.link}/${edifici.link}/${orgue.link}.md`
+      `/src/content/orgues/${provincia.link}/${comarca.link}/${municipi.link}/${edifici.link}/${orgueNav.link}.md`
     )
   ).default;
+  const orgue = normalizeOrgue(
+    (
+      await import(
+        `/src/database/disposicions/${provincia.link}/${comarca.link}/${municipi.link}/${edifici.link}/${orgueNav.link}.yml`
+      )
+    ).default,
+  );
 
   return (
     <Scaffold
@@ -67,13 +81,20 @@ export default async function Page({
           label: edifici.nom,
           position: 6,
         },
-        { label: orgue.nom, position: 7 },
+        { label: orgueNav.nom, position: 7 },
       ]}
-      aside={<TOC headings={findMDXHeadings(Content({}))} />}
+      aside={
+        <AsideOrgue
+          orgue={orgue}
+          end={<TOC headings={findMDXHeadings(Content({}))} />}
+        />
+      }
     >
       <h1>
         {edifici.nom}
-        <span className="block mt-2 text-2xl font-semibold">{orgue.nom}</span>
+        <span className="block mt-2 text-2xl font-semibold">
+          {orgueNav.nom}
+        </span>
       </h1>
       <div className="not-prose flex justify-between items-baseline">
         <p>
@@ -87,13 +108,18 @@ export default async function Page({
                 comarca: comarca.link,
                 municipi: municipi.link,
                 edifici: edifici.link,
-                orgue: orgue.link,
+                orgue: orgueNav.link,
               }) as string
             ]
           }
         />
       </div>
       <Content />
+
+      <details>
+        <summary>Disposition</summary>
+        <pre>{JSON.stringify(orgue, null, 2)}</pre>
+      </details>
     </Scaffold>
   );
 }

src/app/[locale]/(markdown)/orgues/[provincia]/[comarca]/[municipi]/[edifici]/page.tsx

@@ -1,12 +1,14 @@
 import { orgueNavigation } from "@/app/[locale]/(markdown)/orgues/orgueNavigation";
 import { slugs } from "@/app/[locale]/(markdown)/orgues/redirects";
+import { AsideOrgue } from "@/components/aside-orgue";
 import { CopyButton } from "@/components/copy-button";
 import { Scaffold } from "@/components/scaffold";
+import { TOC } from "@/components/toc";
+import { normalizeOrgue } from "@/lib/normalize-orgue";
 import { route } from "@/lib/route";
+import { findMDXHeadings } from "@/mdx-components";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 import { OrguesEdificiParams } from "./layout";
-import { TOC } from "@/components/toc";
-import { findMDXHeadings } from "@/mdx-components";
 
 export default async function Page({
   params,
@@ -24,6 +26,13 @@ export default async function Page({
       `/src/content/orgues/${provincia.link}/${comarca.link}/${municipi.link}/${edifici.link}.md`
     )
   ).default;
+  const orgue = normalizeOrgue(
+    (
+      await import(
+        `/src/database/disposicions/${provincia.link}/${comarca.link}/${municipi.link}/${edifici.link}.yml`
+      )
+    ).default,
+  );
 
   return (
     <Scaffold
@@ -58,7 +67,12 @@ export default async function Page({
         },
         { label: edifici.nom, position: 6 },
       ]}
-      aside={<TOC headings={findMDXHeadings(Content({}))} />}
+      aside={
+        <AsideOrgue
+          orgue={orgue}
+          end={<TOC headings={findMDXHeadings(Content({}))} />}
+        />
+      }
     >
       <h1>{edifici.nom}</h1>
       <div className="not-prose flex justify-between items-baseline">

src/components/aside-orgue.tsx

@@ -0,0 +1,74 @@
+import type { Orgue } from "@/lib/normalize-orgue";
+import type { ReactNode } from "react";
+import { StatusLabel } from "./status-label";
+import { Timeline } from "./timeline";
+import { AsideHeading } from "./toc";
+import { Separator } from "./ui/separator";
+
+export function AsideOrgue({ orgue, end }: { orgue: Orgue; end: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-4">
+      <section className="not-prose">
+        <AsideHeading>Resum històric</AsideHeading>
+        <Timeline
+          items={orgue.orgueners.map(
+            ({
+              nom,
+              date,
+              descripcioDate,
+              descripcioDateTooltip,
+              descripcio,
+            }) => ({
+              label: (
+                <>
+                  <span className="font-medium text-gray-900">{nom}</span>,{" "}
+                  {descripcio}
+                </>
+              ),
+              date,
+              dateLabel: descripcioDate,
+              dateTooltip: descripcioDateTooltip,
+            }),
+          )}
+        />
+      </section>
+      {orgue.emplacament ? (
+        <section>
+          <AsideHeading>Emplaçament</AsideHeading>
+          {orgue.emplacament}
+        </section>
+      ) : null}
+      <section>
+        <AsideHeading>Estat de l’instrument</AsideHeading>
+        <StatusLabel
+          level={orgue.estat.at(-1)?.nota}
+          label={orgue.estat.at(-1)?.estat ?? "Estat desconegut"}
+        />
+      </section>
+      <Separator />
+      <section>
+        <AsideHeading>Composició</AsideHeading>
+        {orgue.composicio}
+      </section>
+      <section>
+        <AsideHeading>Transmissió</AsideHeading>
+        <dl>
+          <dt>Notes</dt>
+          <dd>{orgue.transmissio.notes}</dd>
+          <dt>Registres</dt>
+          <dd>{orgue.transmissio.registres}</dd>
+        </dl>
+      </section>
+      <Separator />
+      <section>
+        <AsideHeading>Bisbat</AsideHeading>
+      </section>
+      <Separator />
+      <section>
+        <AsideHeading>Enllaços d’interès</AsideHeading>
+      </section>
+      <Separator />
+      {end}
+    </div>
+  );
+}

src/components/status-label.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils";
+import { Badge } from "./ui/badge";
+
+const colors = ["bg-red-600", "bg-orange-600", "bg-blue-600", "bg-green-600"];
+
+export function StatusLabel({
+  label,
+  level,
+}: {
+  label: string;
+  level?: number;
+}) {
+  return (
+    <span className="flex gap-2 items-center">
+      <Badge
+        variant="circle"
+        className={cn((level && colors[level - 1]) || "bg-gray-600", "size-2")}
+      />
+      {label}
+    </span>
+  );
+}

src/components/timeline.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+export function Timeline({
+  items,
+  dateFormat = Intl.DateTimeFormat(undefined, { year: "numeric" }),
+}: {
+  items: {
+    label: ReactNode;
+    date: Date;
+    dateLabel?: string;
+    dateTooltip?: string;
+  }[];
+  dateFormat?: Intl.DateTimeFormat;
+}) {
+  return (
+    <ul role="list" className="space-y-4">
+      {items.map((item, index) => (
+        <li key={index} className="relative flex gap-2">
+          <div
+            className={cn(
+              index === items.length - 1 ? "h-6" : "-bottom-6",
+              "absolute top-0 left-0 flex w-6 justify-center",
+            )}
+          >
+            <div className="w-[1px] bg-gray-200"></div>
+          </div>
+          <div className="relative flex size-6 flex-none items-center justify-center bg-white">
+            <div className="size-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
+          </div>
+          <p className="flex-auto py-0.5 text-xs text-gray-500">{item.label}</p>
+          <time
+            dateTime={item.date.toISOString()}
+            className="flex-none py-0.5 text-xs text-gray-500"
+            title={item.dateTooltip}
+          >
+            {item.dateLabel ?? dateFormat.format(item.date)}
+          </time>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/components/toc.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import type { HeadingElement } from "@/mdx-components";
-import type { ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import ScrollSpy from "react-scrollspy-navigation";
 
 export interface TOCItem {
@@ -17,9 +17,26 @@ export interface TOCProps {
 }
 
 export function TOC({ headings }: Readonly<TOCProps>) {
+  return (
+    <ScrollSpy
+      activeAttr
+      rootMargin="180px"
+      onClickEach={(e) => {
+        const heading = (e.target as HTMLElement).getAttribute("href");
+        if (!heading || !/^#[0-9a-z-]+$/.test(heading)) return;
+        window.location.href = heading;
+      }}
+    >
+      <nav className="not-prose sticky top-24 ">
+        <AsideHeading>Taula de continguts</AsideHeading>
+        {tocList(headings)}
+      </nav>
+    </ScrollSpy>
+  );
+
   function tocList(items: TOCItem[], className?: string) {
     return (
-      <ol className={cn("flex flex-col gap-2", className)}>
+      <ol className={cn("flex flex-col gap-2 text-sm", className)}>
         {items.map((item) => tocListItem(item))}
       </ol>
     );
@@ -38,23 +55,13 @@ export function TOC({ headings }: Readonly<TOCProps>) {
       </li>
     );
   }
+}
 
+export function AsideHeading(props: ComponentProps<"header">) {
   return (
-    <ScrollSpy
-      activeAttr
-      rootMargin="180px"
-      onClickEach={(e) => {
-        const heading = (e.target as HTMLElement).getAttribute("href");
-        if (!heading || !/^#[0-9a-z-]+$/.test(heading)) return;
-        window.location.href = heading;
-      }}
-    >
-      <nav className="not-prose sticky top-24 text-sm">
-        <header className="font-bold uppercase tracking-wide text-primary/60 mb-4">
-          Taula de continguts
-        </header>
-        {tocList(headings)}
-      </nav>
-    </ScrollSpy>
+    <header
+      className="font-bold uppercase tracking-wide text-primary/60 mb-4 text-sm"
+      {...props}
+    />
   );
 }