LinkCards

Rich internal-link nav cards. Renders the pure `LinkCard` presentational component (`@/components/mdx/link-card`) directly from fixture `ResolvedLinkTarget` data, mirroring what the Wave 1 href resolver (#1224) would produce for each real href — `link-card.tsx` has no server-side dependency, so the story never reaches `@takazudo/zfb/content` (`getCollection`) even under unbundled dev serving (#2380). Covers all thumb kinds against realistic site content: `image` (product/guide/series/note), `svg` (built page + `/s/*`), and `news` (highlights `news_no` fallback, no hero image). An unresolvable href falls back to a plain link.

Article Blocks

Default

English

Single link

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { LinkCard } from './link-card'; import type { ResolvedLinkTarget } from '@/lib/link-nav/types'; import type { Locale } from '@/lib/i18n/types'; const meta: StoryMeta = { title: 'LinkCards', category: 'Article Blocks', description: 'Rich internal-link nav cards. Renders the pure `LinkCard` presentational component (`@/components/mdx/link-card`) directly from fixture `ResolvedLinkTarget` data, mirroring what the Wave 1 href resolver (#1224) would produce for each real href — `link-card.tsx` has no server-side dependency, so the story never reaches `@takazudo/zfb/content` (`getCollection`) even under unbundled dev serving (#2380). Covers all thumb kinds against realistic site content: `image` (product/guide/series/note), `svg` (built page + `/s/*`), and `news` (highlights `news_no` fallback, no hero image). An unresolvable href falls back to a plain link.', usage: `import { LinkCards } from '@/components/mdx/link-cards';\n\n<LinkCards links={[{ href: '/guides/series/oxi-coral-guide/', label: 'OXI Coralガイド' }]} />`, }; export default meta; interface SampleLink { href: string; label: string; /** Pre-resolved fixture standing in for the server-side href resolver's output; `null` mirrors an unresolvable href. */ target: ResolvedLinkTarget | null; } // image thumb, no badge/date (product — resolver omits both for products); image // thumb + guide badge + date; image thumb + guide badge + date + "N episodes"/"全N回" // meta; image thumb + news badge + date (notes collection); news (NewsThumb) thumb + // highlights badge + date — imgThumb: null, news_no set; svg thumb (built page, // no content-collection backing) — no badge/date/description; svg thumb (/s/* // dedicated glyph) + description, no badge/date; unresolvable — falls back to a // plain link using the authored label. JA and EN fixtures are separate (not the // same objects re-rendered under a different `locale` prop) since the real // resolver returns locale-specific title/description/href per collection. const SAMPLE_LINKS_JA: SampleLink[] = [ { href: '/products/oxi-coral-intro/', label: 'OXI Instruments: OXI Coral', target: { href: '/products/oxi-coral-intro/', title: 'OXI Instruments: OXI Coral', description: 'OXI Instruments OXI Coralの紹介記事になります。OXI Coralは、8ボイスのマルチティンバーなポリシンセサイザーモジュールです。', thumb: { kind: 'image', slug: 'coral-0-front__og' }, }, }, { href: '/guides/oxi-coral-guide-ep1/', label: 'OXI Coral 解説 EP.1', target: { href: '/guides/oxi-coral-guide-ep1/', title: 'OXI Coral 解説 EP.1: パネルコントロールとMIDIの基本', description: 'OXI Coralの解説シリーズEP.1。パネル上のエンコーダー、ノブ群の役割と、MIDIの基本的な使い方を解説します。', thumb: { kind: 'image', slug: 'coral-ep1-thumb' }, curatedTagKey: 'guide', createdDate: '2026/04/13', }, }, { href: '/guides/series/oxi-coral-guide/', label: 'OXI Coralガイド', target: { href: '/guides/series/oxi-coral-guide/', title: 'OXI Coralガイド', description: 'OXI Coral音源モジュールの使い方を、公式チュートリアル動画に沿って日本語で解説するシリーズです。', thumb: { kind: 'image', slug: 'coral-ep1-thumb' }, curatedTagKey: 'guide', createdDate: '2026/04/13', meta: '全7回', }, }, { href: '/notes/s32-announce/', label: 'Notes008: SHIK S32 発表！', target: { href: '/notes/s32-announce/', title: 'Notes008: SHIK S32 発表！', description: 'SHIKより発表されたスタンドアロンMIDIプロセッサー／マクロコントローラーS32の紹介テキストの日本語訳です。', thumb: { kind: 'image', slug: 's32-rack__og' }, curatedTagKey: 'news', }, }, { href: '/notes/news-vol-16/', label: 'Highlights vol.16', target: { href: '/notes/news-vol-16/', title: 'vol.16 zudo-block-60販売開始／OXI再入荷', description: 'Takazudo Modularからのお知らせメルマガログです。', thumb: { kind: 'news', volume: 16 }, curatedTagKey: 'takazudo-modular-highlights', createdDate: '2025/01/28', }, }, { href: '/contact/', label: 'お問い合わせ', target: { href: '/contact/', title: 'お問い合わせ', thumb: { kind: 'svg', key: 'contact' }, }, }, { href: '/s/about/', label: 'About: Takazudo Modularについて', target: { href: '/s/about/', title: 'About: Takazudo Modularについて', description: 'Takazudo ModularというWebサイトは何ぞやというのをまとめたものです。', thumb: { kind: 'svg', key: 'about' }, }, }, { href: '/this-page-does-not-exist/', label: 'Example: unresolved fallback link', target: null, }, ]; /** English counterparts of `SAMPLE_LINKS_JA`, sourced from each page's `.en.mdx` frontmatter / `descriptionEn` field — every href carries the `/en` locale prefix, as `localePath()` would produce. */ const SAMPLE_LINKS_EN: SampleLink[] = [ { href: '/en/products/oxi-coral-intro/', label: 'OXI Instruments: OXI Coral', target: { href: '/en/products/oxi-coral-intro/', title: 'OXI Instruments: OXI Coral', description: 'An introduction to the OXI Instruments OXI Coral. OXI Coral is an 8-voice multitimbral polyphonic synthesizer module.', thumb: { kind: 'image', slug: 'coral-0-front__og' }, }, }, { href: '/en/guides/oxi-coral-guide-ep1/', label: 'OXI Coral Guide EP.1', target: { href: '/en/guides/oxi-coral-guide-ep1/', title: 'OXI Coral Guide EP.1: Panel Controls and MIDI Basics', description: 'A guide series on the OXI Coral. In EP.1, we cover the roles of the encoder and knobs on the panel, plus the basics of using MIDI.', thumb: { kind: 'image', slug: 'coral-ep1-thumb' }, curatedTagKey: 'guide', createdDate: '2026/04/13', }, }, { href: '/en/guides/series/oxi-coral-guide/', label: 'OXI Coral Guide', target: { href: '/en/guides/series/oxi-coral-guide/', title: 'OXI Coral Guide', description: 'A guide series for the OXI Coral sound module, following the official tutorial videos.', thumb: { kind: 'image', slug: 'coral-ep1-thumb' }, curatedTagKey: 'guide', createdDate: '2026/04/13', meta: '7 episodes', }, }, { href: '/en/notes/s32-announce/', label: 'Notes008: SHIK S32 Announced!', target: { href: '/en/notes/s32-announce/', title: 'Notes008: SHIK S32 Announced!', description: 'An English version of the press release for the SHIK S32, a standalone MIDI processor and macro controller with 32 macro knobs.', thumb: { kind: 'image', slug: 's32-rack__og' }, curatedTagKey: 'news', }, }, { href: '/en/notes/news-vol-16/', label: 'Highlights vol.16', target: { href: '/en/notes/news-vol-16/', title: 'vol.16 zudo-block-60 Launch / OXI Restocked', description: 'Newsletter archive from Takazudo Modular.', thumb: { kind: 'news', volume: 16 }, curatedTagKey: 'takazudo-modular-highlights', createdDate: '2025/01/28', }, }, { href: '/en/contact/', label: 'Contact', target: { href: '/en/contact/', title: 'Contact', thumb: { kind: 'svg', key: 'contact' }, }, }, { href: '/en/s/about/', label: 'About: About Takazudo Modular', target: { href: '/en/s/about/', title: 'About: About Takazudo Modular', description: 'Learn about Takazudo Modular, a Japan-based online shop specializing in modular synthesizers.', thumb: { kind: 'svg', key: 'about' }, }, }, { href: '/this-page-does-not-exist/', label: 'Example: unresolved fallback link', target: null, }, ]; /** * Stands in for `LinkCards`' render body without importing it: an unresolved * fixture (`target: null`) renders the same plain-`<a>` fallback `LinkCards` * itself renders for an unresolvable href. */ function renderSampleLinks(links: SampleLink[], locale: Locale) { return ( <div className="grid gap-y-vgap-md max-w-[720px] mb-vgap-lg" data-link-cards> {links.map((link) => link.target ? ( <LinkCard key={link.href} target={link.target} locale={locale} /> ) : ( <a key={link.href} href={link.href} className="zd-invert-color-link"> {link.label} </a> ), )} </div> ); } /** Japanese (default) */ export const Default = defineStory({ name: 'Default', render: () => renderSampleLinks(SAMPLE_LINKS_JA, 'ja'), }); /** English */ export const English = defineStory({ name: 'English', render: () => renderSampleLinks(SAMPLE_LINKS_EN, 'en'), }); /** Single card — the most common authoring shape (one `- [text](/path/)` line) */ export const SingleLink = defineStory({ name: 'Single link', render: () => renderSampleLinks([SAMPLE_LINKS_JA[2]!], 'ja'), });