@hagicode/hagilight-starlight 0.2.1-dev.14.1.41f9759 → 0.2.1-dev.15.1.e6bdd48

package/ArticlePromotion.astro

@@ -1,52 +1,108 @@
 ---
+import heroImage from './assets/light-main.png';
 import { getArticlePromotionCopy } from './article-promotion.mjs';
 
 const { lang } = Astro.props;
 const copy = getArticlePromotionCopy(lang);
 ---
 
-<aside class="hagilight-article-promotion" aria-labelledby="hagilight-article-promotion-title">
-  <h2 id="hagilight-article-promotion-title">{copy.title}</h2>
-  <p>{copy.description}</p>
-  <a href="https://www.hagicode.com/">{copy.link}</a>
-</aside>
+<section class="hagilight-article-promotion" aria-labelledby="hagilight-article-promotion-title">
+  <div>
+    <h2 id="hagilight-article-promotion-title">{copy.title}</h2>
+    <p>{copy.lead}</p>
+    <p>{copy.subheadline}</p>
+  </div>
+  <img
+    src={heroImage.src}
+    alt={copy.imageAlt}
+    width={heroImage.width}
+    height={heroImage.height}
+    loading="lazy"
+    decoding="async"
+  />
+  <ul aria-label={copy.title}>
+    {copy.features.map((feature) => (
+      <li>
+        <strong>{feature.label}</strong>
+        <span>{feature.description}</span>
+      </li>
+    ))}
+  </ul>
+  <a href="https://www.hagicode.com/">{copy.visitLabel}</a>
+</section>
 
 <style>
   .hagilight-article-promotion {
-    margin-block: 2.5rem;
-    padding: 1.25rem;
+    display: grid;
+    gap: 1rem;
+    margin: 2rem auto;
+    padding: clamp(1rem, 3vw, 1.75rem);
     border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.75rem;
+    border-radius: var(--sl-radius-lg);
     background: var(--sl-color-bg-nav);
     color: var(--sl-color-text);
   }
 
   .hagilight-article-promotion h2 {
     margin: 0;
-    font-size: var(--sl-text-h3);
   }
 
   .hagilight-article-promotion p {
-    margin-block: 0.75rem;
+    margin: 0.5rem 0;
+    line-height: 1.6;
   }
 
-  .hagilight-article-promotion a {
-    display: inline-block;
-    color: var(--sl-color-accent-high);
-    font-weight: 600;
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
+  .hagilight-article-promotion img {
+    width: 100%;
+    height: auto;
+    border-radius: var(--sl-radius-md);
   }
 
-  .hagilight-article-promotion a:focus-visible {
-    outline: 2px solid var(--sl-color-accent-high);
+  .hagilight-article-promotion ul {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.75rem;
+    padding: 0;
+    list-style: none;
+  }
+
+  .hagilight-article-promotion li {
+    display: grid;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: var(--sl-radius-md);
+  }
+
+  .hagilight-article-promotion li strong {
+    color: var(--sl-color-text-accent);
+  }
+
+  .hagilight-article-promotion > a {
+    display: inline-flex;
+    justify-self: start;
+    align-items: center;
+    min-height: 2.75rem;
+    padding: 0.5rem 1rem;
+    border-radius: var(--sl-radius-sm);
+    background: var(--sl-color-text-accent);
+    color: var(--sl-color-bg);
+    font-weight: 700;
+    text-decoration: none;
+  }
+
+  .hagilight-article-promotion > a:hover {
+    filter: brightness(1.08);
+  }
+
+  .hagilight-article-promotion > a:focus-visible {
+    outline: 2px solid var(--sl-color-text-accent);
     outline-offset: 3px;
-    border-radius: 2px;
   }
 
-  @media (min-width: 40rem) {
-    .hagilight-article-promotion {
-      padding: 1.5rem 2rem;
+  @media (max-width: 30rem) {
+    .hagilight-article-promotion ul {
+      grid-template-columns: 1fr;
     }
   }
 </style>

package/NotFoundHero.astro

@@ -0,0 +1,44 @@
+---
+import DefaultHero from '@astrojs/starlight/components/Hero.astro';
+import context from 'virtual:starlight/project-context';
+import {
+  getNotFoundHomeHref,
+  getNotFoundHomeLabel,
+  isNotFoundEntry,
+} from './not-found.mjs';
+
+const route = Astro.locals.starlightRoute;
+const isNotFound = isNotFoundEntry(route.entry.id);
+const homeHref = getNotFoundHomeHref({
+  basePath: import.meta.env.BASE_URL,
+  locale: route.locale,
+  trailingSlash: context.trailingSlash,
+});
+const homeLabel = getNotFoundHomeLabel(route.lang);
+---
+
+{
+  isNotFound ? (
+    <div class="not-found-hero">
+      <DefaultHero />
+      <div class="recovery-action">
+        <a class="sl-link-button primary" href={homeHref}>{homeLabel}</a>
+      </div>
+    </div>
+  ) : (
+    <DefaultHero />
+  )
+}
+
+<style>
+  .not-found-hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .recovery-action {
+    margin-block: 0.5rem 2rem;
+    text-align: center;
+  }
+</style>

package/article-promotion.mjs

@@ -1,53 +1,123 @@
 const COPY = {
-  'de-DE': {
-    title: 'Über HagiCode',
-    description: 'HagiCode entwickelt Werkzeuge und eine Community für Menschen, die gemeinsam Software bauen.',
-    link: 'HagiCode besuchen',
+  'zh-CN': {
+    title: 'HagiCode',
+    lead: 'HagiCode 是一套智能体编码工作台：结构化工作流、多 Agent 并行执行与 Hero Dungeon 视图，把想法变成真正交付的软件。',
+    subheadline: '让想法更快变成好用的软件，让智能编码更聪明、更高效，也更有趣。',
+    imageAlt: 'HagiCode 浅色主题主界面截图',
+    features: [
+      { label: 'Smart', description: '结构化工作流将意图转化为从想法到交付的可执行路径。' },
+      { label: 'Efficient', description: '多 Agent 工作流让调研、实现与审阅并行推进。' },
+      { label: 'Fun', description: 'Hero Dungeon 让长时间编码协作更直观、更有参与感。' },
+    ],
+    visitLabel: '访问 HagiCode',
   },
   'en-US': {
-    title: 'About HagiCode',
-    description: 'HagiCode builds tools and a community for people creating software together.',
-    link: 'Visit HagiCode',
-  },
-  'es-ES': {
-    title: 'Acerca de HagiCode',
-    description: 'HagiCode crea herramientas y una comunidad para quienes desarrollan software en equipo.',
-    link: 'Visitar HagiCode',
+    title: 'HagiCode',
+    lead: 'HagiCode is an agentic coding workspace: structured workflows, multi-agent execution, and Hero Dungeon views turn ideas into shipped software.',
+    subheadline: 'Turn ideas into polished, usable software with a smarter, faster, and more enjoyable agentic coding workflow.',
+    imageAlt: 'HagiCode light theme main interface screenshot',
+    features: [
+      { label: 'Smart', description: 'Structured workflows turn intent into an executable path from idea to shipped change.' },
+      { label: 'Efficient', description: 'Multi-agent workflows keep research, implementation, and review moving in parallel.' },
+      { label: 'Fun', description: 'Hero Dungeon interfaces make long coding sessions visual, collaborative, and rewarding.' },
+    ],
+    visitLabel: 'Visit HagiCode',
   },
-  'fr-FR': {
-    title: 'À propos de HagiCode',
-    description: 'HagiCode crée des outils et une communauté pour les personnes qui développent des logiciels ensemble.',
-    link: 'Découvrir HagiCode',
+  'zh-Hant': {
+    title: 'HagiCode',
+    lead: 'HagiCode 是智慧代理程式開發工作台，結合結構化工作流程、多代理程式執行與 Hero Dungeon 介面，將想法化為交付成果。',
+    subheadline: '以更聰明、更快速且更有趣的智慧代理程式工作流程，打造實用的軟體。',
+    imageAlt: 'HagiCode 淺色主題介面畫面',
+    features: [
+      { label: 'Smart', description: '結構化流程將意圖轉化為從構想到交付的可執行步驟。' },
+      { label: 'Efficient', description: '多代理程式工作流程讓研究、實作與審查並行進行。' },
+      { label: 'Fun', description: 'Hero Dungeon 讓長時間的程式協作更直覺、更有參與感。' },
+    ],
+    visitLabel: '造訪 HagiCode',
   },
   'ja-JP': {
-    title: 'HagiCodeについて',
-    description: 'HagiCodeは、ソフトウェアを共につくる人々のためのツールとコミュニティを提供します。',
-    link: 'HagiCodeを見る',
+    title: 'HagiCode',
+    lead: 'HagiCode は構造化ワークフロー、マルチエージェント実行、Hero Dungeon ビューを備えたエージェント型コーディングワークスペースです。',
+    subheadline: 'よりスマートで速く、楽しいエージェント型ワークフローで、使いやすいソフトウェアを形にします。',
+    imageAlt: 'HagiCode ライトテーマのメイン画面',
+    features: [
+      { label: 'Smart', description: '構造化ワークフローは意図をアイデアから変更のリリースまで実行可能な道筋にします。' },
+      { label: 'Efficient', description: 'マルチエージェントのワークフローで調査、実装、レビューを並行して進めます。' },
+      { label: 'Fun', description: 'Hero Dungeon により長時間のコーディングを視覚的で協力的な体験にします。' },
+    ],
+    visitLabel: 'HagiCode を見る',
   },
   'ko-KR': {
-    title: 'HagiCode 소개',
-    description: 'HagiCode는 함께 소프트웨어를 만드는 사람들을 위한 도구와 커뮤니티를 만듭니다.',
-    link: 'HagiCode 방문하기',
+    title: 'HagiCode',
+    lead: 'HagiCode는 구조화된 워크플로, 다중 에이전트 실행, Hero Dungeon 뷰를 갖춘 에이전트 코딩 작업 공간입니다.',
+    subheadline: '더 스마트하고 빠르며 즐거운 에이전트 워크플로로 유용한 소프트웨어를 만드세요.',
+    imageAlt: 'HagiCode 라이트 테마 메인 화면',
+    features: [
+      { label: 'Smart', description: '구조화된 워크플로는 의도를 아이디어부터 배포까지 실행 가능한 경로로 바꿉니다.' },
+      { label: 'Efficient', description: '다중 에이전트 워크플로로 조사, 구현, 검토를 병렬로 진행합니다.' },
+      { label: 'Fun', description: 'Hero Dungeon은 긴 코딩 세션을 시각적이고 협업적인 경험으로 만듭니다.' },
+    ],
+    visitLabel: 'HagiCode 방문',
   },
-  'pt-BR': {
-    title: 'Sobre a HagiCode',
-    description: 'A HagiCode cria ferramentas e uma comunidade para pessoas que desenvolvem software em conjunto.',
-    link: 'Visite a HagiCode',
+  'de-DE': {
+    title: 'HagiCode',
+    lead: 'HagiCode ist ein agentischer Coding-Arbeitsplatz mit strukturierten Workflows, Multi-Agent-Ausführung und Hero-Dungeon-Ansichten.',
+    subheadline: 'Mit einem intelligenteren, schnelleren und unterhaltsameren agentischen Workflow wird aus Ideen nutzbare Software.',
+    imageAlt: 'HagiCode-Hauptoberfläche im hellen Design',
+    features: [
+      { label: 'Smart', description: 'Strukturierte Workflows machen aus Absichten einen umsetzbaren Weg von der Idee bis zur Auslieferung.' },
+      { label: 'Efficient', description: 'Multi-Agent-Workflows führen Recherche, Umsetzung und Prüfung parallel aus.' },
+      { label: 'Fun', description: 'Hero Dungeon macht lange Coding-Sitzungen anschaulich und gemeinschaftlich.' },
+    ],
+    visitLabel: 'HagiCode besuchen',
   },
-  'ru-RU': {
-    title: 'О HagiCode',
-    description: 'HagiCode создаёт инструменты и сообщество для тех, кто вместе разрабатывает программное обеспечение.',
-    link: 'Посетить HagiCode',
+  'fr-FR': {
+    title: 'HagiCode',
+    lead: 'HagiCode est un espace de développement agentique qui associe workflows structurés, exécution multi-agent et vues Hero Dungeon.',
+    subheadline: 'Transformez vos idées en logiciels utiles grâce à un workflow agentique plus intelligent, rapide et agréable.',
+    imageAlt: 'Interface principale de HagiCode en thème clair',
+    features: [
+      { label: 'Smart', description: 'Des workflows structurés transforment une intention en parcours exécutable, de l’idée à la livraison.' },
+      { label: 'Efficient', description: 'Les workflows multi-agents font avancer recherche, réalisation et revue en parallèle.' },
+      { label: 'Fun', description: 'Hero Dungeon rend les longues sessions de code plus visuelles et collaboratives.' },
+    ],
+    visitLabel: 'Visiter HagiCode',
   },
-  'zh-CN': {
-    title: '关于 HagiCode',
-    description: 'HagiCode 为协作构建软件的人们提供工具与社区。',
-    link: '访问 HagiCode',
+  'es-ES': {
+    title: 'HagiCode',
+    lead: 'HagiCode es un espacio de trabajo de programación con agentes, flujos estructurados, ejecución multiagente y vistas de Hero Dungeon.',
+    subheadline: 'Convierte ideas en software útil con un flujo de trabajo con agentes más inteligente, rápido y ameno.',
+    imageAlt: 'Interfaz principal de HagiCode con tema claro',
+    features: [
+      { label: 'Smart', description: 'Los flujos estructurados convierten la intención en un itinerario ejecutable desde la idea hasta la entrega.' },
+      { label: 'Efficient', description: 'Los flujos multiagente permiten avanzar en paralelo con la investigación, implementación y revisión.' },
+      { label: 'Fun', description: 'Hero Dungeon hace que las largas sesiones de programación sean visuales y colaborativas.' },
+    ],
+    visitLabel: 'Visitar HagiCode',
   },
-  'zh-Hant': {
-    title: '關於 HagiCode',
-    description: 'HagiCode 為協作打造軟體的人們提供工具與社群。',
-    link: '造訪 HagiCode',
+  'pt-BR': {
+    title: 'HagiCode',
+    lead: 'HagiCode é um ambiente de programação com agentes, fluxos estruturados, execução multiagente e visualizações Hero Dungeon.',
+    subheadline: 'Transforme ideias em software útil com um fluxo de trabalho com agentes mais inteligente, rápido e agradável.',
+    imageAlt: 'Interface principal do HagiCode no tema claro',
+    features: [
+      { label: 'Smart', description: 'Fluxos estruturados transformam intenções em um caminho executável da ideia à entrega.' },
+      { label: 'Efficient', description: 'Fluxos multiagente mantêm pesquisa, implementação e revisão em andamento simultaneamente.' },
+      { label: 'Fun', description: 'O Hero Dungeon torna longas sessões de programação mais visuais e colaborativas.' },
+    ],
+    visitLabel: 'Acessar HagiCode',
+  },
+  'ru-RU': {
+    title: 'HagiCode',
+    lead: 'HagiCode — агентная среда разработки со структурированными процессами, параллельным выполнением несколькими агентами и интерфейсами Hero Dungeon.',
+    subheadline: 'Превращайте идеи в полезное ПО с более умным, быстрым и увлекательным агентным рабочим процессом.',
+    imageAlt: 'Главный экран HagiCode в светлой теме',
+    features: [
+      { label: 'Smart', description: 'Структурированные процессы превращают намерение в исполнимый путь от идеи до готового изменения.' },
+      { label: 'Efficient', description: 'Мультиагентные процессы параллельно продвигают исследование, реализацию и проверку.' },
+      { label: 'Fun', description: 'Hero Dungeon делает длительную совместную разработку наглядной и увлекательной.' },
+    ],
+    visitLabel: 'Перейти на HagiCode',
   },
 };
 
@@ -62,8 +132,7 @@ function resolveArticlePromotion(frontmatterValue, siteDefault = true) {
 }
 
 function getArticlePromotionCopy(lang) {
-  const language = lang?.split('-')[0];
-  return COPY[lang] ?? COPY[language] ?? COPY['en-US'];
+  return COPY[lang] ?? COPY['en-US'];
 }
 
 export { COPY, getArticlePromotionCopy, resolveArticlePromotion };

package/index.mjs

@@ -179,6 +179,13 @@ export default function hagilight(options = {}) {
   if (options.header?.enabled !== undefined && typeof options.header.enabled !== 'boolean') {
     throw new TypeError('Hagilight header enabled option must be a boolean.');
   }
+  if (options.notFoundPage !== undefined
+    && (!options.notFoundPage || typeof options.notFoundPage !== 'object' || Array.isArray(options.notFoundPage))) {
+    throw new TypeError('Hagilight notFoundPage options must be an object.');
+  }
+  if (options.notFoundPage?.enabled !== undefined && typeof options.notFoundPage.enabled !== 'boolean') {
+    throw new TypeError('Hagilight notFoundPage enabled option must be a boolean.');
+  }
   if (options.analytics !== undefined
     && (!options.analytics || typeof options.analytics !== 'object' || Array.isArray(options.analytics))) {
     throw new TypeError('Hagilight analytics options must be an object.');
@@ -209,12 +216,16 @@ export default function hagilight(options = {}) {
   });
   const instanceId = randomUUID();
   const headerEnabled = options.header?.enabled !== false;
+  const notFoundPageEnabled = options.notFoundPage?.enabled !== false;
   const pageTitleEnabled = options.contentComponents?.pageTitle !== false;
   const markdownContentEnabled = options.contentComponents?.markdownContent !== false;
   const componentIds = {
     header: headerEnabled
       ? `virtual:hagilight-starlight/${instanceId}/Header.astro`
       : undefined,
+    hero: notFoundPageEnabled
+      ? fileURLToPath(new URL('./NotFoundHero.astro', import.meta.url))
+      : undefined,
     footer: `virtual:hagilight-starlight/${instanceId}/Footer.astro`,
     pageTitle: pageTitleEnabled ? `virtual:hagilight-starlight/${instanceId}/PageTitle.astro` : undefined,
     markdownContent: markdownContentEnabled
@@ -240,6 +251,9 @@ export default function hagilight(options = {}) {
         if (headerEnabled && config.components?.Header) {
           throw new Error('Hagilight cannot replace an existing Starlight Header override. Set header: { enabled: false } to keep it, or compose @hagicode/hagilight-starlight/Header directly.');
         }
+        if (notFoundPageEnabled && config.components?.Hero) {
+          throw new Error('Hagilight cannot replace an existing Starlight Hero override. Set notFoundPage: { enabled: false } to keep it, or compose @hagicode/hagilight-starlight/NotFoundHero directly.');
+        }
         if (config.components?.Footer) {
           throw new Error('Hagilight cannot replace an existing Starlight Footer override.');
         }
@@ -264,6 +278,7 @@ export default function hagilight(options = {}) {
           components: {
             ...config.components,
             ...(componentIds.header ? { Header: componentIds.header } : {}),
+            ...(componentIds.hero ? { Hero: componentIds.hero } : {}),
             Footer: componentIds.footer,
             ...(componentIds.pageTitle ? { PageTitle: componentIds.pageTitle } : {}),
             ...(componentIds.markdownContent ? { MarkdownContent: componentIds.markdownContent } : {}),

package/not-found.mjs

@@ -0,0 +1,33 @@
+const homeLabels = {
+  de: 'Zur Startseite',
+  en: 'Back to home',
+  es: 'Volver al inicio',
+  fr: 'Retour à l’accueil',
+  ja: 'ホームに戻る',
+  ko: '홈으로 돌아가기',
+  pt: 'Voltar ao início',
+  ru: 'На главную',
+  'zh-cn': '返回首页',
+  'zh-hant': '返回首頁',
+};
+
+export function isNotFoundEntry(entryId) {
+  return entryId === '404' || entryId.endsWith('/404');
+}
+
+export function getNotFoundHomeHref({ basePath = '/', locale, trailingSlash = 'ignore' }) {
+  const base = basePath.replace(/\/+$/u, '');
+  const localePath = locale && locale !== 'root' ? `/${locale}` : '';
+  const path = `${base}${localePath}` || '/';
+
+  if (trailingSlash === 'never') {
+    return path.replace(/\/+$/u, '') || '/';
+  }
+
+  return `${path.replace(/\/+$/u, '')}/`;
+}
+
+export function getNotFoundHomeLabel(lang) {
+  const language = lang?.replaceAll('_', '-').toLowerCase() ?? 'en';
+  return homeLabels[language] ?? homeLabels[language.split('-')[0]] ?? homeLabels.en;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hagicode/hagilight-starlight",
-  "version": "0.2.1-dev.14.1.41f9759",
+  "version": "0.2.1-dev.15.1.e6bdd48",
   "type": "module",
   "description": "Starlight customizations for HagiCode documentation",
   "repository": {
@@ -22,16 +22,18 @@
     "./MarkdownContent": "./MarkdownContent.astro",
     "./ArticlePromotion": "./ArticlePromotion.astro",
     "./PageTitle": "./PageTitle.astro",
+    "./NotFoundHero": "./NotFoundHero.astro",
     "./PromotoFooter": "./PromotoFooter.astro"
   },
   "files": [
     "index.mjs",
     "*.css",
     "*.mjs",
-    "*.astro"
+    "*.astro",
+    "assets/*.png"
   ],
   "dependencies": {
-    "@hagicode/hagilight": "0.2.1-dev.14.1.41f9759"
+    "@hagicode/hagilight": "0.2.1-dev.15.1.e6bdd48"
   },
   "peerDependencies": {
     "@astrojs/starlight": "^0.42.4",