stack-site-builder 1.10.0

package/src/i18n/ui.ts

@@ -0,0 +1,337 @@
+/**
+ * Central place for everything language-related.
+ *
+ * Locale routing (configured in astro.config.mjs): `en` is the default and is
+ * served at the root, `ko` is served under `/ko/`. Tool content lives in
+ * `src/content/stacks/<lang>/`. Use `astro:i18n`'s `getRelativeLocaleUrl` to
+ * build locale-aware links so the base path and `/ko` prefix are handled for us.
+ */
+import { site } from '@aas-data/site';
+
+export const languages = {
+  en: 'English',
+  ko: '한국어',
+} as const;
+
+export type Lang = keyof typeof languages;
+
+export const defaultLang: Lang = 'en';
+
+/** UI chrome strings, keyed by a dotted id. */
+export const ui = {
+  en: {
+    'site.tagline':
+      'A curated stack of the tools and services you actually use to build AI systems — each with a detail page and runnable sample code.',
+    'nav.browse': 'Browse',
+    'nav.concepts': 'Concepts',
+    'nav.blog': 'Writing',
+    'nav.samples': 'Samples',
+    'nav.slides': 'Slides',
+    'nav.backToTop': 'Back to top',
+    'nav.glossary': 'Glossary',
+    'slides.title': 'Slides',
+    'slides.tagline': 'Concept decks — the same ideas as the concept pages, in slide form.',
+    'slides.deck': 'Deck',
+    'slides.open': 'Open deck',
+    'slides.readConcept': 'Read the concept',
+    'slides.prev': 'Previous slide',
+    'slides.next': 'Next slide',
+    'slides.contents': 'Contents',
+    'slides.menu': 'Menu',
+    'slides.print': 'Print / PDF',
+    'slides.fullscreen': 'Fullscreen',
+    'slides.zoom': 'Enlarge',
+    'slides.close': 'Close',
+    'slides.overview': 'Overview',
+    'sample.title': 'Samples',
+    'sample.tagline':
+      'The runnable mini-projects behind the catalog — download a folder and run it with Docker.',
+    'sample.usedBy': 'Used by',
+    'sample.related': 'Related sample',
+    'sample.search': 'Search samples…',
+    'sample.searchAll': 'Title + body',
+    'sample.searchTitle': 'Title',
+    'sample.searchBody': 'Body',
+    'sample.tools': 'Source tools',
+    'sample.noResults': 'No matching samples.',
+    'glossary.title': 'Glossary',
+    'glossary.tagline': 'Terms used across the catalog and concepts, each linked to its page.',
+    'glossary.tool': 'Tools',
+    'glossary.concept': 'Concepts',
+    'glossary.article': 'Writing',
+    'glossary.term': 'Terms',
+    'glossary.external': 'External',
+    'glossary.search': 'Search terms…',
+    'glossary.noResults': 'No matching terms.',
+    'search.placeholder': 'Search tools…',
+    'concept.title': 'Concepts',
+    'concept.tagline': 'Patterns that compose catalog tools into a working AI stack.',
+    'concept.empty': 'No concepts yet.',
+    'concept.usedTools': 'Tools it uses',
+    'concept.relatedConcepts': 'Related concepts',
+    'concept.learnMore': 'Learn more',
+    'concept.backToConcepts': 'All concepts',
+    'concept.updated': 'Updated',
+    'detail.usedInConcepts': 'Used in concepts',
+    'sort.label': 'Sort',
+    'sort.alpha': 'A–Z',
+    'sort.recent': 'Recently updated',
+    'sort.stars': 'Stars',
+    'list.seeAll': 'See all {n}',
+    'filter.clear': 'Clear',
+    'view.label': 'View',
+    'view.standard': 'Standard',
+    'view.gallery': 'Gallery',
+    'filter.updated': 'Last updated',
+    'updated.all': 'Show all',
+    'updated.6m': 'Within 6 months',
+    'updated.1y': 'Within 1 year',
+    'updated.2y': 'Within 2 years',
+    'results.none': 'No tools match.',
+    'detail.allTools': 'All tools',
+    'detail.website': 'Website',
+    'detail.repository': 'Repository',
+    'detail.docs': 'Docs',
+    'detail.language': 'Language',
+    'detail.license': 'License',
+    'detail.pricing': 'Pricing',
+    'detail.source': 'Source',
+    'detail.asOf': 'as of',
+    'detail.plan': 'Plan',
+    'detail.price': 'Price',
+    'detail.notes': 'Notes',
+    'pricing.stale': 'Prices not checked in 1+ year',
+    'pricing.staleHint': 'Pricing was last verified more than a year ago — may be out of date',
+    'pricing.aging': 'Prices not checked in 6+ months',
+    'pricing.agingHint': 'Pricing was last verified more than six months ago — may be out of date',
+    'detail.relatedWriting': 'Related writing',
+    'detail.relatedTools': 'Related tools',
+    'blog.title': 'Writing',
+    'blog.tagline': 'Notes and comparisons on building AI systems, linked to the tools they discuss.',
+    'blog.empty': 'No posts yet.',
+    'article.backToBlog': 'All writing',
+    'article.referencedTools': 'Tools in this article',
+    'theme.label': 'Theme',
+    'theme.system': 'System',
+    'theme.light': 'Light',
+    'theme.dark': 'Dark',
+    'tab.overview': 'Overview',
+    'tab.pricing': 'Pricing',
+    'tab.code': 'Code samples',
+    'tab.impl': 'Implementation',
+    'project.intro': 'A real, runnable mini-project. Download it and run with Docker.',
+    // Rendered around the folder path: "View samples/<folder> on GitHub".
+    'project.viewOnGitHubPre': 'View',
+    'project.viewOnGitHubPost': 'on GitHub',
+    // Dev-only twin: "View samples/<folder> locally".
+    'project.viewLocallyPre': 'View',
+    'project.viewLocallyPost': 'locally',
+    'project.example': 'Example',
+    'project.files': 'Files',
+    'project.relatedTools': 'Related tools',
+    'project.unregistered': 'Not in our catalog',
+    'project.readmeExpand': 'Show README',
+    'project.readmeCollapse': 'Hide README',
+    'sample.example': 'Example',
+    'sample.diagram': 'Structure',
+    'tag.heading': 'Tag',
+    'tag.allTools': 'All tools',
+    'detail.vendor': 'Vendor',
+    'vendor.heading': 'By',
+    'toc.onThisPage': 'On this page',
+    'toc.collapseAll': 'Collapse all',
+    'toc.expandAll': 'Expand all',
+    'toc.versions': 'Versions',
+    'meta.released': 'Last release',
+    'meta.updated': 'Updated',
+    'meta.docVersion': 'Doc version',
+    'collapse.more': '+{n} more',
+    'collapse.less': 'Show less',
+    'meta.deprecated': 'Maintenance only',
+    'meta.stale': 'No updates in 1+ year',
+    'meta.staleHint': 'The latest release is more than a year old',
+    'meta.formerly': 'Formerly',
+    'meta.aging': 'No updates in 6+ months',
+    'meta.agingHint': 'The latest release is more than six months old',
+    'top.label': 'Back to top',
+    'footer.builtWith': 'Built with',
+    'footer.contribute': 'Contributions welcome — add a tool by dropping an MDX file.',
+  },
+  ko: {
+    'site.tagline':
+      'AI 시스템을 만들 때 실제로 쓰는 도구와 서비스를 모았습니다 — 각 항목마다 상세 페이지와 바로 실행 가능한 샘플 코드를 제공합니다.',
+    'nav.browse': '둘러보기',
+    'nav.concepts': '개념',
+    'nav.blog': '글',
+    'nav.samples': '샘플',
+    'nav.slides': '슬라이드',
+    'nav.backToTop': '맨 위로',
+    'nav.glossary': '용어집',
+    'slides.title': '슬라이드',
+    'slides.tagline': '개념 덱 — 개념 페이지와 같은 내용을 슬라이드로 옮겼습니다.',
+    'slides.deck': '덱',
+    'slides.open': '덱 열기',
+    'slides.readConcept': '개념 문서 보기',
+    'slides.prev': '이전 슬라이드',
+    'slides.next': '다음 슬라이드',
+    'slides.contents': '목차',
+    'slides.menu': '메뉴',
+    'slides.print': '인쇄 / PDF',
+    'slides.fullscreen': '전체화면',
+    'slides.zoom': '크게 보기',
+    'slides.close': '닫기',
+    'slides.overview': '한눈에 보기',
+    'sample.title': '샘플',
+    'sample.tagline': '카탈로그 뒤의 실행 가능한 미니 프로젝트 — 폴더를 받아 Docker로 실행해 보세요.',
+    'sample.usedBy': '이 샘플을 쓰는 곳',
+    'sample.related': '관련 샘플',
+    'sample.search': '샘플 검색…',
+    'sample.searchAll': '제목+내용',
+    'sample.searchTitle': '제목',
+    'sample.searchBody': '내용',
+    'sample.tools': '사용 도구',
+    'sample.noResults': '일치하는 샘플이 없습니다.',
+    'glossary.title': '용어집',
+    'glossary.tagline': '카탈로그와 개념 전반에서 쓰는 용어, 그리고 각 용어가 가리키는 페이지.',
+    'glossary.tool': '도구',
+    'glossary.concept': '개념',
+    'glossary.article': '글',
+    'glossary.term': '용어',
+    'glossary.external': '외부',
+    'glossary.search': '용어 검색…',
+    'glossary.noResults': '일치하는 용어가 없습니다.',
+    'search.placeholder': '도구 검색…',
+    'concept.title': '개념',
+    'concept.tagline': '카탈로그의 도구를 엮어 동작하는 AI 스택을 구성하는 패턴.',
+    'concept.empty': '아직 개념이 없습니다.',
+    'concept.usedTools': '쓰는 도구',
+    'concept.relatedConcepts': '관련 개념',
+    'concept.learnMore': '더 알아보기',
+    'concept.backToConcepts': '개념 전체',
+    'concept.updated': '업데이트',
+    'detail.usedInConcepts': '이 도구가 쓰이는 개념',
+    'sort.label': '정렬',
+    'sort.alpha': '이름순',
+    'sort.recent': '최근 업데이트순',
+    'list.seeAll': '전체 {n}개',
+    'sort.stars': 'Star순',
+    'filter.clear': '초기화',
+    'view.label': '보기',
+    'view.standard': '표준',
+    'view.gallery': '갤러리',
+    'filter.updated': '최신 업데이트',
+    'updated.all': '전체보기',
+    'updated.6m': '최근 6개월 이내',
+    'updated.1y': '최근 1년 이내',
+    'updated.2y': '최근 2년 이내',
+    'results.none': '조건에 맞는 도구가 없습니다.',
+    'detail.allTools': '전체 도구',
+    'detail.website': '웹사이트',
+    'detail.repository': '저장소',
+    'detail.docs': '문서',
+    'detail.language': '언어',
+    'detail.license': '라이선스',
+    'detail.pricing': '가격',
+    'detail.source': '출처',
+    'detail.asOf': '기준일',
+    'detail.plan': '플랜',
+    'detail.price': '가격',
+    'detail.notes': '비고',
+    'pricing.stale': '가격 1년 이상 미확인',
+    'pricing.staleHint': '가격을 마지막으로 확인한 지 1년이 지나, 현재가와 다를 수 있습니다',
+    'pricing.aging': '가격 6개월 이상 미확인',
+    'pricing.agingHint': '가격을 마지막으로 확인한 지 6개월이 지나, 현재가와 다를 수 있습니다',
+    'detail.relatedWriting': '관련 글',
+    'detail.relatedTools': '관련 도구',
+    'blog.title': '글',
+    'blog.tagline': 'AI 시스템 구축에 관한 노트와 비교 — 다루는 도구로 바로 연결됩니다.',
+    'blog.empty': '아직 글이 없습니다.',
+    'article.backToBlog': '전체 글',
+    'article.referencedTools': '이 글에서 다루는 도구',
+    'theme.label': '테마',
+    'theme.system': '시스템',
+    'theme.light': '라이트',
+    'theme.dark': '다크',
+    'tab.overview': '설명',
+    'tab.pricing': '가격',
+    'tab.code': '코드 샘플',
+    'tab.impl': '구현 샘플',
+    'project.intro': '실제로 실행 가능한 미니 프로젝트입니다. 받아서 Docker로 실행해 보세요.',
+    // 폴더 경로를 감싸 렌더됨: "GitHub에서 samples/<folder> 보기".
+    'project.viewOnGitHubPre': 'GitHub에서',
+    'project.viewOnGitHubPost': '보기',
+    // dev 전용 쌍둥이: "로컬에서 samples/<folder> 보기".
+    'project.viewLocallyPre': '로컬에서',
+    'project.viewLocallyPost': '보기',
+    'project.example': '예제',
+    'project.files': '파일',
+    'project.relatedTools': '관련 도구',
+    'project.unregistered': '목록에 없는 도구',
+    'project.readmeExpand': '본문 펼치기',
+    'project.readmeCollapse': '본문 접기',
+    'sample.example': '예제',
+    'sample.diagram': '구조',
+    'tag.heading': '태그',
+    'tag.allTools': '전체 도구',
+    'detail.vendor': '만든 곳',
+    'vendor.heading': '만든 곳',
+    'toc.onThisPage': '목차',
+    'toc.collapseAll': '모두 접기',
+    'toc.expandAll': '모두 펼치기',
+    'toc.versions': '버전',
+    'meta.released': '최신 릴리스',
+    'meta.updated': '업데이트',
+    'meta.docVersion': '문서버전',
+    'collapse.more': '+{n}개 더 보기',
+    'collapse.less': '접기',
+    'meta.deprecated': '유지보수 전용',
+    'meta.stale': '1년 이상 업데이트 없음',
+    'meta.staleHint': '최신 릴리스가 1년 이상 지났습니다',
+    'meta.formerly': '이전',
+    'meta.aging': '6개월 이상 업데이트 없음',
+    'meta.agingHint': '최신 릴리스가 6개월 이상 지났습니다',
+    'top.label': '맨 위로',
+    'footer.builtWith': '제작 도구:',
+    'footer.contribute': '기여를 환영합니다 — MDX 파일 하나만 추가하면 도구가 등록됩니다.',
+  },
+} as const;
+
+export type UIKey = keyof (typeof ui)['en'];
+
+/**
+ * Returns a `t(key)` translator bound to the given language. A site can
+ * override any string (taglines, headings…) via `site.ui.<lang>` in its
+ * `src/data/site.ts` — overrides win over the theme defaults here.
+ */
+export function useTranslations(lang: Lang) {
+  return function t(key: UIKey): string {
+    return site.ui?.[lang]?.[key] ?? ui[lang][key] ?? ui[defaultLang][key];
+  };
+}
+
+/** Human labels for the `pricing` frontmatter enum, per locale. */
+export const pricingLabels: Record<Lang, Record<string, string>> = {
+  en: {
+    'completely-free': 'Completely free',
+    'open-source': 'Open source',
+    'free-tier': 'Free tier',
+    paid: 'Paid',
+    free: 'Free',
+  },
+  ko: {
+    'completely-free': '완전 무료',
+    'open-source': '오픈소스',
+    'free-tier': '무료 티어',
+    paid: '유료',
+    free: '무료',
+  },
+};
+
+/** Descriptive (non-name) licenses get localized; real license names pass through. */
+const licenseLabels: Record<Lang, Record<string, string>> = {
+  en: { proprietary: 'Proprietary' },
+  ko: { proprietary: '독점' },
+};
+export function licenseLabel(lang: Lang, value: string): string {
+  return licenseLabels[lang][value] ?? value;
+}

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,287 @@
+---
+import '../styles/global.css';
+import { site } from '@aas-data/site';
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import { useTranslations, languages, type Lang } from '../i18n/ui';
+import LanguageSwitcher from '../components/LanguageSwitcher.astro';
+import ThemeToggle from '../components/ThemeToggle.astro';
+import BackToTop from '../components/BackToTop.astro';
+
+interface Props {
+  title: string;
+  description?: string;
+  lang: Lang;
+  /** Locale-relative path of this page, e.g. '' (home) or 'stack/litellm/'. */
+  path: string;
+  /** Wider container — used by detail pages that have a right-rail TOC. */
+  wide?: boolean;
+}
+
+const { title, lang, path, wide = false } = Astro.props;
+const t = useTranslations(lang);
+// Collapse any authored line breaks (used for on-page wrapping) to a single
+// space so the SEO meta description stays one clean line.
+const description = (Astro.props.description ?? t('site.tagline')).replace(/\s*\n\s*/g, ' ');
+const container = wide ? 'max-w-[81rem]' : 'max-w-[75rem]';
+
+const home = getRelativeLocaleUrl(lang, '');
+const base = import.meta.env.BASE_URL;
+
+// Home URL per locale, for the language auto-detect redirect on the root home.
+const localeHomes = Object.fromEntries(
+  (Object.keys(languages) as Lang[]).map((c) => [c, getRelativeLocaleUrl(c, '')]),
+);
+const isDefaultHome = path === '' && lang === 'en';
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/svg+xml" href={`${base.replace(/\/$/, '')}/favicon.svg`} />
+    {/* On the root (default-locale) home, send first-time visitors to the
+        locale matching their browser — unless they've already picked one (the
+        language switcher stores `aas:lang`). Runs before paint, no history entry. */}
+    {
+      isDefaultHome && (
+        <script is:inline define:vars={{ curLang: lang, localeHomes }}>
+          (function () {
+            try {
+              var supported = Object.keys(localeHomes);
+              var target = localStorage.getItem('aas:lang');
+              if (!target || supported.indexOf(target) === -1) {
+                target = null;
+                var navs = navigator.languages || [navigator.language || ''];
+                for (var i = 0; i < navs.length; i++) {
+                  var b = (navs[i] || '').toLowerCase().split('-')[0];
+                  if (supported.indexOf(b) !== -1) {
+                    target = b;
+                    break;
+                  }
+                }
+              }
+              if (target && target !== curLang && localeHomes[target]) location.replace(localeHomes[target]);
+            } catch (e) {}
+          })();
+        </script>
+      )
+    }
+    {/* Set the theme before first paint to avoid a flash of the wrong theme. */}
+    <script is:inline>
+      (function () {
+        try {
+          var pref = localStorage.getItem('theme') || 'system';
+          var dark =
+            pref === 'dark' ||
+            (pref === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+          document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+        } catch (e) {}
+      })();
+    </script>
+    {/* Listing density (standard / gallery), persisted in localStorage. Gallery
+        is the default; only an explicit 'grid' choice falls back to standard.
+        Set before paint so the layout doesn't flash. */}
+    <script is:inline>
+      (function () {
+        try {
+          if (localStorage.getItem('aas:view') !== 'grid')
+            document.documentElement.dataset.view = 'gallery';
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body class="min-h-screen">
+    <header class="border-b border-[var(--aas-border)]">
+      <div class:list={['mx-auto flex items-center justify-between gap-3 px-5 py-4', container]}>
+        <a
+          href={home}
+          data-keep-filters
+          aria-label={site.name}
+          class="flex min-w-0 items-center gap-1.5 text-base font-bold tracking-tight whitespace-nowrap no-underline sm:text-lg"
+        >
+          <span aria-hidden="true">⚡</span>
+          {/* Below 600px only the bolt remains, so the narrow header never truncates the wordmark. */}
+          <span class="hidden truncate min-[600px]:inline">{site.name}</span>
+        </a>
+        {/* Nav links are icon-only at every width (labels live in aria-label). */}
+        <nav class="flex shrink-0 items-center gap-3 text-sm text-[var(--aas-muted)] sm:gap-4">
+          <a
+            href={`${home}#categories`}
+            data-keep-filters
+            class="flex items-center no-underline hover:text-[var(--aas-text)]"
+            aria-label={t('nav.browse')}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
+          </a>
+          <a
+            href={getRelativeLocaleUrl(lang, 'concept/')}
+            class="flex items-center no-underline hover:text-[var(--aas-text)]"
+            aria-label={t('nav.concepts')}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/></svg>
+          </a>
+          <a
+            href={getRelativeLocaleUrl(lang, 'article/')}
+            class="flex items-center no-underline hover:text-[var(--aas-text)]"
+            aria-label={t('nav.blog')}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
+          </a>
+          <a
+            href={getRelativeLocaleUrl(lang, 'sample/')}
+            class="flex items-center no-underline hover:text-[var(--aas-text)]"
+            aria-label={t('nav.samples')}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>
+          </a>
+          <a
+            href={getRelativeLocaleUrl(lang, 'slides/')}
+            class="flex items-center no-underline hover:text-[var(--aas-text)]"
+            aria-label={t('nav.slides')}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/><path d="M12 12v9"/></svg>
+          </a>
+          <a
+            href={getRelativeLocaleUrl(lang, 'glossary/')}
+            class="flex items-center no-underline hover:text-[var(--aas-text)]"
+            aria-label={t('nav.glossary')}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
+          </a>
+          <a
+            href={site.repoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center no-underline hover:text-[var(--aas-text)]"
+            aria-label="GitHub"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C4 2 3 2 3 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 2 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
+          </a>
+          <ThemeToggle lang={lang} />
+          <LanguageSwitcher lang={lang} path={path} />
+        </nav>
+      </div>
+    </header>
+
+    <main class:list={['mx-auto px-5 py-10', container]}>
+      <slot />
+    </main>
+
+    <footer
+      class="border-t border-[var(--aas-border)] py-8 text-center text-sm text-[var(--aas-muted)]"
+    >
+      <p>
+        {t('footer.builtWith')}
+        <a
+          href="https://astro.build"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-[var(--aas-accent)]">Astro</a
+        >. {
+          t('footer.contribute')
+        }
+      </p>
+    </footer>
+
+    <BackToTop lang={lang} />
+
+    <script>
+      // Clicking a heading's "#" anchor copies that section's URL to the
+      // clipboard (and updates the address bar) instead of just navigating.
+      document.addEventListener('click', (e) => {
+        const anchor = (e.target as HTMLElement).closest<HTMLAnchorElement>('a.aas-anchor');
+        if (!anchor) return;
+        e.preventDefault();
+        const hash = anchor.getAttribute('href') ?? '';
+        const url = location.origin + location.pathname + location.search + hash;
+        history.replaceState(null, '', hash);
+        navigator.clipboard?.writeText(url).catch(() => {});
+        anchor.classList.add('copied');
+        setTimeout(() => anchor.classList.remove('copied'), 1200);
+      });
+
+      // Mount a copy-to-clipboard button on every code block: README/overview
+      // prose (.prose pre), the file viewer (.aas-projfile), and the Code tab
+      // (.aas-code). The button is pinned to a non-scrolling host so it stays in
+      // place on long, horizontally-scrolling code.
+      (function mountCopyButtons() {
+        const koLang = document.documentElement.lang === 'ko';
+        const LABEL = koLang ? '코드 복사' : 'Copy code';
+        const DONE = koLang ? '복사됨' : 'Copied';
+        const COPY_ICON =
+          '<svg class="aas-ico-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="13" height="13" x="9" y="9" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+        const CHECK_ICON =
+          '<svg class="aas-ico-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+
+        function wrap(el: Element): HTMLElement {
+          const w = document.createElement('div');
+          w.className = 'aas-copyhost';
+          el.parentNode?.insertBefore(w, el);
+          w.appendChild(el);
+          return w;
+        }
+
+        function mount(source: HTMLElement, host: HTMLElement) {
+          if (host.querySelector(':scope > .aas-copy-btn')) return; // already mounted
+          host.classList.add('aas-copyhost');
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'aas-copy-btn';
+          btn.setAttribute('aria-label', LABEL);
+          btn.title = LABEL;
+          btn.innerHTML = COPY_ICON + CHECK_ICON;
+          let timer = 0;
+          btn.addEventListener('click', () => {
+            const text = source.innerText.replace(/\n$/, '');
+            navigator.clipboard?.writeText(text).then(() => {
+              btn.classList.add('copied');
+              btn.setAttribute('aria-label', DONE);
+              window.clearTimeout(timer);
+              timer = window.setTimeout(() => {
+                btn.classList.remove('copied');
+                btn.setAttribute('aria-label', LABEL);
+              }, 1400);
+            });
+          });
+          host.appendChild(btn);
+        }
+
+        // Prose code blocks (READMEs, overviews, articles): wrap each <pre>.
+        document
+          .querySelectorAll<HTMLElement>('.prose pre:not(.mermaid)')
+          .forEach((pre) => mount(pre, wrap(pre)));
+        // Code tab: the .aas-code div is the scroll container — wrap it.
+        document
+          .querySelectorAll<HTMLElement>('.aas-code')
+          .forEach((el) => mount(el, wrap(el)));
+        // File viewer: anchor the button on the figure (above the scroll area).
+        document.querySelectorAll<HTMLElement>('.aas-projfile').forEach((el) => {
+          const fig = el.closest('figure');
+          mount(el, (fig as HTMLElement) ?? wrap(el));
+        });
+      })();
+
+      // Close any open <details> dropdown when clicking outside it (or on Esc).
+      // Only nav dropdowns — leave file-tree folders (.aas-tree-dir) and prose
+      // content reveals (inside .prose, e.g. "구체적인 예시") alone; those toggle
+      // only via their own summary.
+      const isDropdown = (d: Element) => !d.closest('.aas-tree-dir') && !d.closest('.prose');
+      document.addEventListener('click', (e) => {
+        const target = e.target as Node;
+        document.querySelectorAll<HTMLDetailsElement>('details[open]').forEach((d) => {
+          if (isDropdown(d) && !d.contains(target)) d.open = false;
+        });
+      });
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape')
+          document
+            .querySelectorAll<HTMLDetailsElement>('details[open]')
+            .forEach((d) => isDropdown(d) && (d.open = false));
+      });
+    </script>
+  </body>
+</html>

package/src/lib/articles.ts

@@ -0,0 +1,27 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import type { Lang } from '../i18n/ui';
+
+export type ArticleEntry = CollectionEntry<'articles'>;
+
+/** The url slug of an article, i.e. its id with the `<lang>/` prefix removed. */
+export function articleSlugOf(entry: ArticleEntry): string {
+  return entry.id.replace(/^[a-z]{2}\//, '');
+}
+
+/** Published articles for one locale, newest first. */
+export async function getArticles(lang: Lang): Promise<ArticleEntry[]> {
+  const all = await getCollection('articles');
+  return all
+    .filter((e) => e.id.startsWith(`${lang}/`) && !e.data.draft)
+    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
+}
+
+/**
+ * Backlinks: articles in the given locale that reference `toolSlug` in their
+ * `tools` frontmatter. Astro has no native backlinks — we compute the reverse
+ * lookup here so a tool's detail page can list the writing that mentions it.
+ */
+export async function getArticlesForTool(lang: Lang, toolSlug: string): Promise<ArticleEntry[]> {
+  const articles = await getArticles(lang);
+  return articles.filter((a) => a.data.tools.includes(toolSlug));
+}