Add Awesome Vivliostyle reference page

.gitmodules

@@ -10,3 +10,6 @@
 [submodule "submodules/vivliostyle.js"]
 	path = submodules/vivliostyle.js
 	url = https://github.com/vivliostyle/vivliostyle.js.git
+[submodule "submodules/awesome-vivliostyle"]
+	path = submodules/awesome-vivliostyle
+	url = https://github.com/vivliostyle/awesome-vivliostyle.git

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.showEncoding": true,
+    "editor.fontFamily": "Noto Sans Mono CJK JP, Menlo, Monaco, monospace",
+    "terminal.integrated.fontFamily": "Noto Sans Mono CJK JP",
+    "terminal.integrated.fontSize": 16
+}

content/en/reference/index.md

@@ -8,6 +8,7 @@ lang: en
 
 ### Documentation
 
+- [Awesome Vivliostyle](/en/reference/awesome-vivliostyle/)
 - [Supported CSS Features](/en/reference/supported-css-features/)
 - [Core API Reference](/en/reference/api/)
 

content/ja/reference/index.md

@@ -8,6 +8,7 @@ lang: ja
 
 ### ドキュメント
 
+- [Awesome Vivliostyle](/ja/reference/awesome-vivliostyle/)
 - [サポートする CSS 機能](/ja/reference/supported-css-features/)
 - [Core API リファレンス](/ja/reference/api/)
 

src/content.config.ts

@@ -150,6 +150,29 @@ const referenceDocsJa = defineCollection({
   schema: docsSchema,
 });
 
+// Awesome Vivliostyle（英語）
+const awesomeDocsEn = defineCollection({
+  loader: vfmLoader({
+    base: 'submodules/awesome-vivliostyle',
+    lang: 'en',
+    includePattern: /^README\.md$/,
+    collectionName: 'awesome-vivliostyle-en',
+  }),
+  schema: docsSchema,
+});
+
+// Awesome Vivliostyle（日本語）
+// 注: 現在は英語版のみのため、同一READMEを日本語ページとしても扱う
+const awesomeDocsJa = defineCollection({
+  loader: vfmLoader({
+    base: 'submodules/awesome-vivliostyle',
+    lang: 'ja',
+    includePattern: /^README\.md$/,
+    collectionName: 'awesome-vivliostyle-ja',
+  }),
+  schema: docsSchema,
+});
+
 // Reference Index ページ（英語）
 const referenceIndexEn = defineCollection({
   loader: vfmLoader({
@@ -216,6 +239,8 @@ export const collections = {
   'vivliostyle-viewer-ja': viewerDocsJa,
   'vivliostyle-reference-en': referenceDocsEn,
   'vivliostyle-reference-ja': referenceDocsJa,
+  'awesome-vivliostyle-en': awesomeDocsEn,
+  'awesome-vivliostyle-ja': awesomeDocsJa,
   'vivliostyle-reference-index-en': referenceIndexEn,
   'vivliostyle-reference-index-ja': referenceIndexJa,
   'vivliostyle-cli-contributing-en': cliContributingEn,

src/layouts/DocsLayout.astro

@@ -51,6 +51,7 @@ const navLinks = {
   },
   reference: {
     docs: [
+      { label: 'Awesome Vivliostyle', href: `/${lang}/reference/awesome-vivliostyle/` },
       { label: isJa ? 'サポートする CSS 機能' : 'Supported CSS Features', href: `/${lang}/reference/supported-css-features/` },
       { label: isJa ? 'Core API リファレンス' : 'Core API Reference', href: `/${lang}/reference/api/` },
     ],

src/loaders/vfm-loader.ts

@@ -207,6 +207,7 @@ export function vfmLoader(options: VFMLoaderOptions): Loader {
               continue;
             }
 
+
             // doctoc TOCをHTMLに変換（存在する場合）
             let extractedTocHtml: string | undefined;
             if (extractedToc) {
@@ -215,6 +216,11 @@ export function vfmLoader(options: VFMLoaderOptions): Loader {
                   hardLineBreaks: false,
                   disableFormatHtml: false,
                 });
+                if (collectionName?.includes('awesome-vivliostyle')) {
+                  extractedTocHtml = extractedTocHtml
+                    .replace(/>PrintCSS sites</g, '>Print CSS sites<')
+                    .replace(/href="#printcss-sites"/g, 'href="#print-css-sites"');
+                }
               } catch (tocError) {
                 logger.warn(`VFM Loader [${lang}]: Failed to convert doctoc TOC to HTML: ${tocError}`);
               }

src/pages/en/reference/[...slug].astro

@@ -12,14 +12,36 @@ import { getCollection } from 'astro:content';
 export async function getStaticPaths() {
   const referenceDocs = await getCollection('vivliostyle-reference-en');
   const referenceDocsJa = await getCollection('vivliostyle-reference-ja');
+  const awesomeDocs = await getCollection('awesome-vivliostyle-en');
+  const awesomeDocsJa = await getCollection('awesome-vivliostyle-ja');
 
   // CLI、Themes、VFMのContributingドキュメントも取得
   const cliContributing = await getCollection('vivliostyle-cli-contributing-en');
   const themesContributing = await getCollection('vivliostyle-themes-contributing-en');
   const vfmContributing = await getCollection('vivliostyle-vfm-contributing-en');
 
+  const awesomeDoc = awesomeDocs[0];
+  const awesomeDocJa = awesomeDocsJa[0];
+  const awesomeTitle = awesomeDoc?.data?.title || 'Awesome Vivliostyle';
+  const awesomeReferenceDoc = awesomeDoc
+    ? {
+        ...awesomeDoc,
+        id: 'awesome-vivliostyle',
+        data: {
+          ...awesomeDoc.data,
+          title: awesomeTitle,
+        },
+      }
+    : null;
+  const referenceDocsAll = awesomeReferenceDoc
+    ? [...referenceDocs, awesomeReferenceDoc]
+    : referenceDocs;
+
   // 日本語版に存在するIDのセットを作成
-  const jaIds = new Set(referenceDocsJa.map(d => d.id));
+  const jaIds = new Set([
+    ...referenceDocsJa.map(d => d.id),
+    ...(awesomeDocJa ? ['awesome-vivliostyle'] : []),
+  ]);
 
   const paths = [];
 
@@ -29,12 +51,24 @@ export async function getStaticPaths() {
       params: { slug: doc.id },
       props: { 
         doc, 
-        referenceDocs,
+        referenceDocs: referenceDocsAll,
         hasJaTranslation: jaIds.has(doc.id),
         isContributing: false,
       },
     });
   });
+
+  if (awesomeReferenceDoc) {
+    paths.push({
+      params: { slug: 'awesome-vivliostyle' },
+      props: {
+        doc: awesomeReferenceDoc,
+        referenceDocs: referenceDocsAll,
+        hasJaTranslation: jaIds.has('awesome-vivliostyle'),
+        isContributing: false,
+      },
+    });
+  }
 
   // CLI Contributing
   cliContributing.forEach(doc => {
@@ -49,7 +83,7 @@ export async function getStaticPaths() {
             title: doc.data?.title || 'Vivliostyle CLI Contribution Guide',
           },
         },
-        referenceDocs,
+        referenceDocs: referenceDocsAll,
         hasJaTranslation: true,
         isContributing: true,
       },
@@ -69,7 +103,7 @@ export async function getStaticPaths() {
             title: doc.data?.title || 'Vivliostyle Themes Contribution Guide',
           },
         },
-        referenceDocs,
+        referenceDocs: referenceDocsAll,
         hasJaTranslation: true,
         isContributing: true,
       },
@@ -89,7 +123,7 @@ export async function getStaticPaths() {
             title: doc.data?.title || 'VFM Contribution Guide',
           },
         },
-        referenceDocs,
+        referenceDocs: referenceDocsAll,
         hasJaTranslation: true,
         isContributing: true,
       },
@@ -110,6 +144,7 @@ const headings = doc.data?.headings || [];
 
 // Define page order (match index.md order)
 const pageOrder = [
+  'awesome-vivliostyle',
   'supported-css-features',
   'api',
   'contribution-guide-heading',  // Heading only (for sidebar display)
@@ -122,7 +157,7 @@ const pageOrder = [
 
 // Combine all documents (regular reference + contributing pages)
 const allDocs = [
-  ...referenceDocs,  // includes contribution-guide
+  ...referenceDocs,  // includes awesome-vivliostyle, contribution-guide
   // Add virtual documents for sidebar display
   { id: 'contribution-guide-heading', data: { title: 'Contribution Guidelines' } },  // Heading only
   { id: 'contributing-viewer', data: { title: 'Vivliostyle Viewer' } },
@@ -248,6 +283,9 @@ for (let i = currentIndex + 1; i < sortedDocs.length; i++) {
               <span class="toggle-icon">▶</span>Documentation
             </button>
             <ul class="accordion-content" id="docs-group" style="display: block; list-style: none; padding-left: 1.5rem; margin: 0.25rem 0 0 0;">
+              <li class:list={[{ active: doc.id === 'awesome-vivliostyle' }]}>
+                <a href="/en/reference/awesome-vivliostyle/" aria-current={doc.id === 'awesome-vivliostyle' ? 'page' : undefined}>Awesome Vivliostyle</a>
+              </li>
               <li class:list={[{ active: doc.id === 'supported-css-features' }]}>
                 <a href="/en/reference/supported-css-features/" aria-current={doc.id === 'supported-css-features' ? 'page' : undefined}>Supported CSS Features</a>
               </li>
@@ -285,7 +323,12 @@ for (let i = currentIndex + 1; i < sortedDocs.length; i++) {
 
     <!-- Display extracted TOC if exists -->
     {extractedToc && (
-      <div class="toc" set:html={extractedToc}></div>
+      <div class="toc">
+        {doc.id === 'awesome-vivliostyle' && (
+          <h2 class="toc-title">Contents</h2>
+        )}
+        <div class="toc-body" set:html={extractedToc}></div>
+      </div>
     )}
 
     <div set:html={htmlContent}></div>
@@ -325,6 +368,12 @@ for (let i = currentIndex + 1; i < sortedDocs.length; i++) {
     margin: 2rem 0;
   }
 
+  .toc-title {
+    margin: 0 0 1rem;
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+
   .toc :global(ul) {
     list-style: none;
     padding-left: 0;

src/pages/en/reference/index.astro

@@ -49,6 +49,7 @@ const description = indexDoc?.data?.description || 'Reference documentation for
           <span class="toggle-icon">▶</span>Documentation
         </button>
         <ul class="accordion-content" id="docs-group" style="display: block; list-style: none; padding-left: 1.5rem; margin: 0.25rem 0 0 0;">
+          <li><a href="/en/reference/awesome-vivliostyle/">Awesome Vivliostyle</a></li>
           <li><a href="/en/reference/supported-css-features/">Supported CSS Features</a></li>
           <li><a href="/en/reference/api/">Core API Reference</a></li>
         </ul>

src/pages/ja/reference/[...slug].astro

@@ -12,14 +12,36 @@ import { getCollection } from 'astro:content';
 export async function getStaticPaths() {
   const referenceDocs = await getCollection('vivliostyle-reference-ja');
   const referenceDocsEn = await getCollection('vivliostyle-reference-en');
+  const awesomeDocs = await getCollection('awesome-vivliostyle-ja');
+  const awesomeDocsEn = await getCollection('awesome-vivliostyle-en');
 
   // CLI、Themes、VFMのContributingドキュメントも取得
   const cliContributing = await getCollection('vivliostyle-cli-contributing-en');
   const themesContributing = await getCollection('vivliostyle-themes-contributing-en');
   const vfmContributing = await getCollection('vivliostyle-vfm-contributing-en');
 
+  const awesomeDoc = awesomeDocs[0];
+  const awesomeDocEn = awesomeDocsEn[0];
+  const awesomeTitle = awesomeDoc?.data?.title || 'Awesome Vivliostyle';
+  const awesomeReferenceDoc = awesomeDoc
+    ? {
+        ...awesomeDoc,
+        id: 'awesome-vivliostyle',
+        data: {
+          ...awesomeDoc.data,
+          title: awesomeTitle,
+        },
+      }
+    : null;
+  const referenceDocsAll = awesomeReferenceDoc
+    ? [...referenceDocs, awesomeReferenceDoc]
+    : referenceDocs;
+
   // 英語版に存在するIDのセットを作成
-  const enIds = new Set(referenceDocsEn.map(d => d.id));
+  const enIds = new Set([
+    ...referenceDocsEn.map(d => d.id),
+    ...(awesomeDocEn ? ['awesome-vivliostyle'] : []),
+  ]);
 
   const paths = [];
 
@@ -29,12 +51,24 @@ export async function getStaticPaths() {
       params: { slug: doc.id },
       props: { 
         doc, 
-        referenceDocs,
+        referenceDocs: referenceDocsAll,
         hasEnTranslation: enIds.has(doc.id),
         isContributing: false,
       },
     });
   });
+
+  if (awesomeReferenceDoc) {
+    paths.push({
+      params: { slug: 'awesome-vivliostyle' },
+      props: {
+        doc: awesomeReferenceDoc,
+        referenceDocs: referenceDocsAll,
+        hasEnTranslation: enIds.has('awesome-vivliostyle'),
+        isContributing: false,
+      },
+    });
+  }
 
   // CLI Contributing（CONTRIBUTING.mdをcontributing-cliとしてマップ）
   cliContributing.forEach(doc => {
@@ -49,7 +83,7 @@ export async function getStaticPaths() {
             title: doc.data?.title || 'Vivliostyle CLI コントリビューションガイド',
           },
         },
-        referenceDocs,
+        referenceDocs: referenceDocsAll,
         hasEnTranslation: true,
         isContributing: true,
       },
@@ -69,7 +103,7 @@ export async function getStaticPaths() {
             title: doc.data?.title || 'Vivliostyle Themes コントリビューションガイド',
           },
         },
-        referenceDocs,
+        referenceDocs: referenceDocsAll,
         hasEnTranslation: true,
         isContributing: true,
       },
@@ -89,7 +123,7 @@ export async function getStaticPaths() {
             title: doc.data?.title || 'VFM コントリビューションガイド',
           },
         },
-        referenceDocs,
+        referenceDocs: referenceDocsAll,
         hasEnTranslation: true,
         isContributing: true,
       },
@@ -110,6 +144,7 @@ const headings = doc.data?.headings || [];
 
 // ページの順序を定義（index.mdの順番に合わせる）
 const pageOrder = [
+  'awesome-vivliostyle',
   'supported-css-features',
   'api',
   'contribution-guide-heading',  // 見出し専用（サイドバー表示用）
@@ -122,7 +157,7 @@ const pageOrder = [
 
 // 全てのドキュメント（通常のリファレンス + contributingページ）を統合
 const allDocs = [
-  ...referenceDocs,  // contribution-guide含む
+  ...referenceDocs,  // awesome-vivliostyle, contribution-guide含む
   // サイドバー表示用の仮想ドキュメントを追加
   { id: 'contribution-guide-heading', data: { title: 'コントリビューションガイド' } },  // 見出し専用
   { id: 'contributing-viewer', data: { title: 'Vivliostyle Viewer' } },
@@ -248,6 +283,9 @@ for (let i = currentIndex + 1; i < sortedDocs.length; i++) {
               <span class="toggle-icon">▶</span>ドキュメント
             </button>
             <ul class="accordion-content" id="docs-group" style="display: block; list-style: none; padding-left: 1.5rem; margin: 0.25rem 0 0 0;">
+              <li class:list={[{ active: doc.id === 'awesome-vivliostyle' }]}>
+                <a href="/ja/reference/awesome-vivliostyle/" aria-current={doc.id === 'awesome-vivliostyle' ? 'page' : undefined}>Awesome Vivliostyle</a>
+              </li>
               <li class:list={[{ active: doc.id === 'supported-css-features' }]}>
                 <a href="/ja/reference/supported-css-features/" aria-current={doc.id === 'supported-css-features' ? 'page' : undefined}>サポートする CSS 機能</a>
               </li>
@@ -284,7 +322,12 @@ for (let i = currentIndex + 1; i < sortedDocs.length; i++) {
   <article class="docs-content">
     <!-- 抽出したTOCが存在する場合は表示 -->
     {extractedToc && (
-      <div class="toc" set:html={extractedToc}></div>
+      <div class="toc">
+        {doc.id === 'awesome-vivliostyle' && (
+          <h2 class="toc-title">目次</h2>
+        )}
+        <div class="toc-body" set:html={extractedToc}></div>
+      </div>
     )}
 
     <div set:html={htmlContent}></div>
@@ -324,6 +367,12 @@ for (let i = currentIndex + 1; i < sortedDocs.length; i++) {
     margin: 2rem 0;
   }
 
+  .toc-title {
+    margin: 0 0 1rem;
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+
   .toc :global(ul) {
     list-style: none;
     padding-left: 0;