サンプルページ作成

_data/sample_other.yml

@@ -0,0 +1,81 @@
+ja:
+  - category: その他
+    samples:
+      - name: The Adventures of Sherlock Holmes（書籍）
+        tags:
+          - name: ウェブフォント
+          - name: ページカウンタ
+          - name: 目次
+          - name: ページヘッダー
+        urls:
+          - name: デフォルト
+            url: https://vivliostyle.org/viewer/#x=https://vivliostyle.github.io/vivliostyle_doc/samples/gutenberg/Sherlock.html
+          - name: HTML
+            url: https://vivliostyle.github.io/vivliostyle_doc/samples/gutenberg/Sherlock.html
+          - name: ソース
+            url: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/samples/gutenberg/
+      - name: The Malay Archipelago（雑誌）
+        tags:
+          - name: 段組
+          - name: 脚注
+        urls:
+          - name: 可変サイズ
+            url: https://vivliostyle.org/viewer/#x=https://vivliostyle.github.io/vivliostyle_doc/samples/variable-page-size/TheMalayArchipelago/main.xhtml
+          - name: HTML
+            url: https://vivliostyle.github.io/vivliostyle_doc/samples/variable-page-size/TheMalayArchipelago/main.xhtml
+          - name: ソース
+            url: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/samples/variable-page-size/TheMalayArchipelago
+      - name: 高瀬舟（書籍）
+        tags:
+          - name: レスポンシブ
+        urls:
+          - name: デフォルト（縦組）
+            url: https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://vivliostyle.github.io/vivliostyle_doc/samples/variable-page-size/ja-vertical/Takasebune/main.xhtml
+          - name: HTML
+            url: https://vivliostyle.github.io/vivliostyle_doc/samples/variable-page-size/ja-vertical/Takasebune/main.xhtml
+          - name: ソース
+            url: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/samples/variable-page-size/ja-vertical/Takasebune
+      - name: Candle（書籍）
+        tags:
+          - name: ウェブフォント
+          - name: ページカウンタ
+          - name: 目次
+          - name: ページヘッダー
+          - name: EAL
+            url: http://idpf.org/epub/pgt/
+        urls:
+          - name: デフォルト
+            url: https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://vivliostyle.github.io/vivliostyle_doc/samples/adaptive-layout/candle/index.xhtml&spread=false
+          - name: HTML
+            url: https://vivliostyle.github.io/vivliostyle_doc/samples/adaptive-layout/candle/index.xhtml
+          - name: ソース
+            url: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/samples/adaptive-layout/candle
+        comment: from Peter Sorotokin’s [Adaptive Layout](https://github.com/sorotokin/adaptive-layout)
+      - name: Advanced Adaptive Layout（雑誌）
+        tags:
+          - name: ウェブフォント
+          - name: ページカウンタ
+          - name: 目次
+          - name: ページヘッダー
+          - name: EAL
+            url: http://idpf.org/epub/pgt/
+        urls:
+          - name: デフォルト
+            url: https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://vivliostyle.github.io/vivliostyle_doc/samples/adaptive-layout/adaptive/main.xhtml&spread=false
+          - name: HTML
+            url: https://vivliostyle.github.io/vivliostyle_doc/samples/adaptive-layout/adaptive/main.xhtml
+          - name: ソース
+            url: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/samples/adaptive-layout/adaptive
+        comment: from Peter Sorotokin’s [Adaptive Layout](https://github.com/sorotokin/adaptive-layout)
+      - name: Wood Engraving（書籍）
+        tags:
+          - name: ウェブフォント
+        urls:
+          - name: Justification ＆hyphenation 有
+            url: https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://vivliostyle.github.io/vivliostyle_doc/samples/wood/index.html
+          - name: Justification ＆hyphenation 無
+            url: https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=https://vivliostyle.github.io/vivliostyle_doc/samples/wood_chrome/index.html
+          - name: HTML
+            url: https://vivliostyle.github.io/vivliostyle_doc/samples/wood/index.html
+          - name: ソース
+            url: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/samples/wood

_includes/page/samples.html

@@ -1,57 +1,44 @@
-{% for category in include.categories %}
+<section class="section--gray">
+  <div class="container">
+    <h1>{{ include.title }}</h1>
+    <p>{{ include.lead }}</p>
+  </div>
+</section>
+
+{% for category in include.sample %}
   <section class="section page_sample">
     <div class="container">
-      <h2>{{ category.title }}</h2>
-
-      {{ category.description | markdownify }}
+      <h2>{{ category.category }}</h2>
 
       <ol class="list--medium--column">
         {% for sample in category.samples %}
           <li class="frame--large">
-            <h3>{{ sample.title }}</h3>
+            <h3>{{ sample.name }}</h3>
 
             <div class="frame__contents sample-wrap">
-              <a href="{{ sample.urls[0].viewer }}">
+              <a href="{{ sample.urls[0].url }}">
                 <img src="{{ sample.img | relative_url }}" class="thumbnail">
               </a>
 
-              <div class="container">
-                {{ sample.description | markdownify }}
-
-                <ul class="list--small--column">
-                  {% for item in sample.urls %}
-                    <li>
-                      {% if item.name %}
-                        <h4>{{ item.name }}</h4>
-                      {% endif %}
-                      <ol class="list--medium">
-                        {% if item.viewer %}
-                          <li>{% include button/button.html link=item.viewer text=include.viewer_buttontext class="button--secondary--medium" %}</li>
-                        {% endif %}
-                        {% if item.print %}
-                          <li>{% include button/button.html link=item.print text=include.print_buttontext class="button--secondary--medium" %}</li>
-                        {% endif %}
-                        {% if item.html %}
-                          <li>{% include button/button.html link=item.html text=include.html_buttontext class="button--secondary--medium" %}</li>
-                        {% endif %}
-                        {% if item.source %}
-                          <li>{% include button/github.html link=item.source text=include.source_buttontext class="button--github--medium" %}</li>
-                        {% endif %}
-                      </ol>
-                    </li>
-                  {% endfor %}
-                </ul>
-
-                <ul class="list--small">
-                  {% for tag in sample.tags %}
-                    <li class="tip">{{ tag }}</li>
-                  {% endfor %}
-                </ul>
-              </div>
+              {% include sample_contents.html sample=sample %}
             </div>
           </li>
         {% endfor %}
       </ol>
     </div>
   </section>
 {% endfor %}
+
+{% for category in include.sample_other %}
+  <section class="section page_sample">
+    <div class="container">
+      <h2>{{ category.category }}</h2>
+
+      {% for sample in category.samples %}
+        <h3>{{ sample.name }}</h3>
+
+        {% include sample_contents.html sample=sample %}
+      {% endfor %}
+    </div>
+  </section>
+{% endfor %}

_includes/sample_contents.html

@@ -0,0 +1,29 @@
+<div class="container">
+  <div class="list--small--column">
+    <ul class="list--small">
+      {% for item in include.sample.urls %}
+        {% if item.url contains 'github.com' %}
+          <li>{% include button/github.html link=item.url text=item.name class="button--github--medium" %}</li>
+        {% else %}
+          <li>{% include button/button.html link=item.url text=item.name class="button--secondary--medium" %}</li>
+        {% endif %}
+      {% endfor %}
+    </ul>
+
+    <ul class="list--small">
+      {% for tag in include.sample.tags %}
+        <li class="tip">
+          {% if tag.url %}
+            <a href="{{ tag.url }}">{{ tag.name }}</a>
+          {% else %}
+            {{ tag.name }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+
+  {% if include.sample.comment %}
+    <p>{{ include.sample.comment | markdownify }}</p>
+  {% endif %}
+</div>

_sass/_page_samples.scss

@@ -1,4 +1,8 @@
 .page_sample {
+  .sample-wrap {
+    justify-content: unset;
+  }
+
   @include media_large {
     .sample-wrap {
       @include list_column($gap_large, false);

_sass/_tip.scss

@@ -4,8 +4,8 @@
     height: fit-content;
     padding: 5px 20px;
     border-radius: 20px;
-    background-color: $black;
-    color: $white;
+    background-color: $gray_lighter;
+    color: $black;
     font-size: $small_font_size;
     font-family: $monospace_font;
   }