feat(orgues): ✨ afegeix les descripcions

Signed-off-by: Albert Mañosa <[email protected]>

Author: albertms10

src/app/[locale]/(markdown)/layout.tsx

@@ -8,7 +8,5 @@ export default async function Layout({
   const { locale } = await params;
   setRequestLocale(locale);
 
-  return (
-    <div className="flex flex-col-reverse lg:flex-row flex-1">{children}</div>
-  );
+  return children;
 }

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

@@ -5,6 +5,8 @@ import { Scaffold } from "@/components/scaffold";
 import { route } from "@/lib/route";
 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,
@@ -18,6 +20,12 @@ export default async function Page({
   const { provincia, comarca, municipi, edifici, orgue } =
     orgueNavigation(navigation);
 
+  const Content = (
+    await import(
+      `/src/content/orgues/${provincia.link}/${comarca.link}/${municipi.link}/${edifici.link}/${orgue.link}.md`
+    )
+  ).default;
+
   return (
     <Scaffold
       breadcrumbFragments={[
@@ -61,6 +69,7 @@ export default async function Page({
         },
         { label: orgue.nom, position: 7 },
       ]}
+      aside={<TOC headings={findMDXHeadings(Content({}))} />}
     >
       <h1>
         {edifici.nom}
@@ -84,6 +93,7 @@ export default async function Page({
           }
         />
       </div>
+      <Content />
     </Scaffold>
   );
 }

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

@@ -5,6 +5,8 @@ import { Scaffold } from "@/components/scaffold";
 import { route } from "@/lib/route";
 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,
@@ -17,6 +19,12 @@ export default async function Page({
   const t = await getTranslations("metadata");
   const { provincia, comarca, municipi, edifici } = orgueNavigation(navigation);
 
+  const Content = (
+    await import(
+      `/src/content/orgues/${provincia.link}/${comarca.link}/${municipi.link}/${edifici.link}.md`
+    )
+  ).default;
+
   return (
     <Scaffold
       breadcrumbFragments={[
@@ -50,6 +58,7 @@ export default async function Page({
         },
         { label: edifici.nom, position: 6 },
       ]}
+      aside={<TOC headings={findMDXHeadings(Content({}))} />}
     >
       <h1>{edifici.nom}</h1>
       <div className="not-prose flex justify-between items-baseline">
@@ -69,6 +78,7 @@ export default async function Page({
           }
         />
       </div>
+      <Content />
     </Scaffold>
   );
 }

src/components/scaffold.tsx

@@ -14,24 +14,26 @@ export function Scaffold({
 >) {
   return (
     <>
-      <main
-        className={cn(
-          "col-span-2 prose dark:prose-invert pt-8 mx-auto sm:max-md:px-8 px-4 md:px-0",
-          aside && "lg:ms-auto lg:me-0",
-        )}
-      >
-        <PageBreadcrumb
-          fragments={breadcrumbFragments}
-          className="not-prose mb-8"
-        />
-        {children}
+      <main className="flex flex-col-reverse lg:flex-row flex-1">
+        <div
+          className={cn(
+            "prose dark:prose-invert col-span-2 pt-8 mx-auto sm:max-md:px-8 px-4 md:px-0",
+            aside && "lg:ms-auto lg:me-0",
+          )}
+        >
+          <PageBreadcrumb
+            fragments={breadcrumbFragments}
+            className="not-prose mb-8"
+          />
+          {children}
+        </div>
+        {aside ? (
+          // TODO(albertms10): mostra la TOC a la versió mòbil
+          <aside className="container prose hidden lg:block sm:max-md:px-8 md:px-0 w-full lg:max-w-[14rem] lg:pt-20 mx-auto lg:ms-10 lg:me-auto lg:pb-32">
+            {aside}
+          </aside>
+        ) : null}
       </main>
-      {aside ? (
-        // TODO(albertms10): mostra la TOC a la versió mòbil
-        <aside className="container prose hidden lg:block sm:max-md:px-8 md:px-0 w-full lg:max-w-[14rem] lg:pt-20 mx-auto lg:ms-10 lg:me-auto lg:pb-32">
-          {aside}
-        </aside>
-      ) : null}
     </>
   );
 }

src/components/toc.tsx

@@ -1,37 +1,60 @@
 "use client";
 
+import { cn } from "@/lib/utils";
+import type { HeadingElement } from "@/mdx-components";
 import type { ReactNode } from "react";
 import ScrollSpy from "react-scrollspy-navigation";
 
-export function TOC({
-  headings,
-}: Readonly<{ headings: { id: string; label: ReactNode }[] }>) {
+export interface TOCItem {
+  id: string;
+  heading: HeadingElement;
+  headings?: TOCItem[];
+  label: ReactNode;
+}
+
+export interface TOCProps {
+  headings: TOCItem[];
+}
+
+export function TOC({ headings }: Readonly<TOCProps>) {
+  function tocList(items: TOCItem[], className?: string) {
+    return (
+      <ol className={cn("flex flex-col gap-2", className)}>
+        {items.map((item) => tocListItem(item))}
+      </ol>
+    );
+  }
+
+  function tocListItem(item: TOCItem) {
+    return (
+      <li key={item.id} className="leading-tight flex flex-col gap-2">
+        <a
+          href={`#${item.id}`}
+          className="text-primary/80 hover:text-primary data-[active=true]:text-aco data-[active=true]:font-bold"
+        >
+          {item.label}
+        </a>
+        {item.headings?.length ? tocList(item.headings, "ps-4") : <></>}
+      </li>
+    );
+  }
+
   return (
     <ScrollSpy
       activeAttr
       rootMargin="180px"
       onClickEach={(e) => {
         const heading = (e.target as HTMLElement).getAttribute("href");
-        if (!heading || !/^#[a-z-]+$/.test(heading)) return;
+        console.log("hhhh", heading);
+        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>
-        <ul className="flex flex-col gap-2">
-          {headings.map(({ label, id }) => (
-            <li key={id} className="leading-tight">
-              <a
-                href={`#${id}`}
-                className="text-primary/80 hover:text-primary data-[active=true]:text-aco data-[active=true]:font-bold"
-              >
-                {label}
-              </a>
-            </li>
-          ))}
-        </ul>
+        {tocList(headings)}
       </nav>
     </ScrollSpy>
   );

src/content/orgues/barcelona.md

@@ -0,0 +1,3 @@
+---
+layout: base/bc-provincia
+---

src/content/orgues/barcelona/alt-penedes.md

@@ -0,0 +1,3 @@
+---
+layout: base/bc-comarca
+---

src/content/orgues/barcelona/alt-penedes/santa-fe.md

@@ -0,0 +1,3 @@
+---
+layout: base/bc-municipi
+---

src/content/orgues/barcelona/alt-penedes/santa-fe/santa-maria.md

@@ -0,0 +1,42 @@
+---
+layout: base/orgue
+redirect_from:
+  - pages/orgues/barcelona/alt-penedes/santa-fe/santa-maria
+  - orgues/santa-fe
+
+fotos:
+- nom: santa-fe-2.jpg
+  alt: Façana de l'orgue
+  autor: Isidre Vallès
+  portada: 38%
+- nom: santa-fe-4.jpg
+  alt: Consola de l'orgue
+  autor: Isidre Vallès
+- nom: santa-fe-1.jpg
+  alt: Tubs
+  autor: Isidre Vallès
+- nom: santa-fe-5.jpg
+  alt: Façana de l'orgue
+  caption: Isidre Vallès tocant el seu orgue.
+  autor: Isidre Vallès
+---
+
+L'orgue fou construït per Isidre Vallès i Vallès l'any 2001 i acabat l'any 2003. La primera part de
+l'orgue es va inaugurar el 6 d'octubre 2001 (dia de santa Fe). Amb una benedicció acompanyada a 
+l'orgue per Pere Güell i un concert a càrrec de Jonatan Carbó, orgue, Neus Calaf, soprano, Jesús Salius,
+oboè i Miquel Benito, flauta de bec. 
+
+La inauguració de l'orgue acabat es va fer el 6 d'octubre de 2003. L'orgue va ser re-beneït per mossèn
+Jaume Verdoy i el concert inaugural el va oferir Josep Maria Escalona i Canyet, organista de la catedral de Barcelona.
+Des de la primera inauguració, l'orgue s'ha tocat a totes les festes de precepte. Cada any, pels vols de 
+Santa Fe, s'organitza un concert d'orgue sol o amb altres instruments. Enguany (2022) s'ha celebrat la XXI edició. 
+
+### Disposició
+
+Els vuit primers tubs del violó sonen sempre.
+
+{% include disposicions/disposicio.html %}
+
+### Galeria fotogràfica
+
+{% include orgues/gallery-grid.html %}

src/content/orgues/barcelona/alt-penedes/santa-margarida-i-els-monjos.md

@@ -0,0 +1,3 @@
+---
+layout: base/bc-municipi
+---