A

MDX link override — routes through the shared Link component, applies zd-invert-color-link styling, and auto-prefixes a Discord icon for discord.gg invite links.

Article Typography

Internal link

External link

Discord invite

Locale-aware (EN)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the article `A` component — new coverage (epic #1647, wave 6, #1662). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { A, EnA } from './a'; const meta: StoryMeta = { title: 'A', category: 'Article Typography', description: 'MDX link override — routes through the shared Link component, applies zd-invert-color-link styling, and auto-prefixes a Discord icon for discord.gg invite links.', usage: `import { A } from '@/components/article/a';\n\n<A href="/products/">製品一覧を見る</A>`, }; export default meta; export const InternalLink = defineStory({ name: 'Internal link', render: () => <A href="/products/">製品一覧を見る</A>, }); export const ExternalLink = defineStory({ name: 'External link', render: () => <A href="https://example.com">外部サイトへ</A>, }); export const DiscordInvite = defineStory({ name: 'Discord invite', render: () => <A href="https://discord.gg/example">Discordサーバーに参加する</A>, }); // `EnA` (createLocaleA('en')) prefixes internal paths with /en/ — the // `/pj/`, `/manuals/`, `/metamodule-ref/` prefixes are deliberately excluded // (no EN variant exists at those paths). export const LocaleAwareEn = defineStory({ name: 'Locale-aware (EN)', render: () => <EnA href="/products/">View all products</EnA>, });