refactor(templates): split resources detail parts

Extract canonical link and related list components, and let blog post template wrap content while updating stories and usage.

Author: georg-schwarz

src/components/molecules/ResourceCanonicalLink/ResourceCanonicalLink.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ResourceCanonicalLink } from "./ResourceCanonicalLink";
+
+const meta = {
+  title: "Molecules/ResourceCanonicalLink",
+  component: ResourceCanonicalLink,
+  args: {
+    canonicalLabel: "Canonical source:",
+    canonicalUrl: "https://example.com/resources/interview-guide",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Small link block that points to the canonical source for a resource.",
+      },
+    },
+  },
+} satisfies Meta<typeof ResourceCanonicalLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/components/molecules/ResourceCanonicalLink/ResourceCanonicalLink.tsx

@@ -0,0 +1,17 @@
+import type { ResourceCanonicalLinkProps } from "./ResourceCanonicalLink.types";
+
+export const ResourceCanonicalLink = ({
+  canonicalUrl,
+  canonicalLabel,
+}: ResourceCanonicalLinkProps) => (
+  <p className="text-sm text-secondary-600">
+    {canonicalLabel}{" "}
+    <a
+      className="text-primary-700 hover:text-primary-800"
+      href={canonicalUrl}
+      rel="noopener noreferrer"
+    >
+      {canonicalUrl}
+    </a>
+  </p>
+);

src/components/molecules/ResourceCanonicalLink/ResourceCanonicalLink.types.ts

@@ -0,0 +1,4 @@
+export interface ResourceCanonicalLinkProps {
+  canonicalUrl: string;
+  canonicalLabel: string;
+}

src/components/molecules/ResourceCanonicalLink/index.ts

@@ -0,0 +1,2 @@
+export { ResourceCanonicalLink } from "./ResourceCanonicalLink";
+export type { ResourceCanonicalLinkProps } from "./ResourceCanonicalLink.types";

src/components/molecules/index.ts

@@ -2,4 +2,5 @@ export { Card } from "./Card";
 export { FeatureGrid } from "./FeatureGrid";
 export { HeroActions } from "./HeroActions";
 export { MetaGroup } from "./MetaGroup";
+export { ResourceCanonicalLink } from "./ResourceCanonicalLink";
 export { TagList } from "./TagList";

src/components/organisms/ResourcesRelatedList/ResourcesRelatedList.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ResourcesRelatedList } from "./ResourcesRelatedList";
+
+const meta = {
+  title: "Organisms/ResourcesRelatedList",
+  component: ResourcesRelatedList,
+  args: {
+    title: "Related resources",
+    resources: [
+      { title: "Synthesis workshop checklist", href: "/resources/synthesis/" },
+      {
+        title: "Participant recruitment guide",
+        href: "/resources/recruitment/",
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Related resources list with heading and linked items for resource detail pages.",
+      },
+    },
+  },
+} satisfies Meta<typeof ResourcesRelatedList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const SingleItem: Story = {
+  args: {
+    resources: [
+      { title: "Remote research facilitation", href: "/resources/remote/" },
+    ],
+  },
+};

src/components/organisms/ResourcesRelatedList/ResourcesRelatedList.tsx

@@ -0,0 +1,19 @@
+import type { ResourcesRelatedListProps } from "./ResourcesRelatedList.types";
+
+export const ResourcesRelatedList = ({
+  title,
+  resources,
+}: ResourcesRelatedListProps) => (
+  <section>
+    <h2 className="text-xl font-semibold text-secondary-900">{title}</h2>
+    <ul className="mt-3 space-y-2 text-secondary-700">
+      {resources.map((resource) => (
+        <li key={resource.href}>
+          <a className="hover:text-primary-700" href={resource.href}>
+            {resource.title}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </section>
+);

src/components/organisms/ResourcesRelatedList/ResourcesRelatedList.types.ts

@@ -0,0 +1,9 @@
+export interface ResourcesRelatedListItem {
+  title: string;
+  href: string;
+}
+
+export interface ResourcesRelatedListProps {
+  title: string;
+  resources: readonly ResourcesRelatedListItem[];
+}

src/components/organisms/ResourcesRelatedList/index.ts

@@ -0,0 +1,5 @@
+export { ResourcesRelatedList } from "./ResourcesRelatedList";
+export type {
+  ResourcesRelatedListItem,
+  ResourcesRelatedListProps,
+} from "./ResourcesRelatedList.types";

src/components/organisms/index.ts

@@ -7,3 +7,4 @@ export { HomeHero } from "./HomeHero";
 export { Navbar } from "./Navbar";
 export { Footer } from "./Footer";
 export { PageIntro } from "./PageIntro";
+export { ResourcesRelatedList } from "./ResourcesRelatedList";