feat(create-vivliostyle-theme): update default theme example based on…

… VFM document

packages/create-vivliostyle-theme/templates/default/example/default.md

@@ -1 +1,104 @@
-# Theme Example
+---
+title: 'Vivliostyle Theme Example'
+body:
+  class: 'foo bar'
+vfm:
+  hardLineBreaks: false
+---
+
+This sample is based on [VFM (Vivliostyle Flavored Markdown) document](https://vivliostyle.github.io/vfm/vfm). If you need more information, please check the document.
+
+# Code
+
+```javascript
+function main() {}
+```
+
+## with caption
+
+```javascript:app.js
+function main() {}
+```
+
+or
+
+```javascript title=app.js
+function main() {}
+```
+
+# Footnotes
+
+VFM is developed in the GitHub repository[^1].
+Issues are managed on GitHub[^issues].
+Footnotes can also be written inline^[This part is a footnote.].
+
+[^1]: [VFM](https://github.com/vivliostyle/vfm)
+[^issues]: [Issues](https://github.com/vivliostyle/vfm/issues)
+
+# Frontmater
+
+(You can define metadata on the top of the Markdown file. Try to set `lang` option `ja` in the frontmatter! If you need more information, please check [Frontmatter part in VFM document](https://vivliostyle.github.io/vfm/vfm#frontmatter).)
+
+# Hard new line
+
+(Try to set the `hardLineBreaks` option `true` in the frontmatter!)
+
+はじめまして。
+
+Vivliostyle Flavored Markdown（略して VFM）の世界へようこそ。
+VFM は出版物の執筆に適した Markdown 方言であり、Vivliostyle プロジェクトのために策定・実装されました。
+
+# Image
+
+![](<./assets/Logo%20(Mark%20+%20Type).png>)
+
+## with caption and single line
+
+![Vivliostyle Logo](<./assets/Logo%20(Mark%20+%20Type).png>)
+
+![Vivliostyle Logo](<./assets/Logo%20(Mark%20+%20Type).png> 'distributed on the official website'){id="image" data-sample="sample"}
+
+text ![Vivliostyle Logo](<./assets/Logo%20(Mark%20+%20Type).png>)
+
+# Math equation
+
+inline: $x = y$
+
+display: $$1 + 1 = 2$$
+
+# Raw HTML
+
+<div class="custom">
+  <p>Hey</p>
+</div>
+
+## with Markdown
+
+<div class="custom">
+
+- hoge
+- fuga
+
+</div>
+
+# Ruby
+
+This is {Ruby|ルビ}
+
+## Escape pipe in ruby body
+
+{a\|b|c}
+
+# Sectionization
+
+# Plain
+
+# Introduction {#intro}
+
+# Welcome {.title}
+
+# Level 1
+
+## Level 2
+
+> # Not Sectionize

packages/create-vivliostyle-theme/templates/default/scss/_variables.scss

@@ -0,0 +1,4 @@
+$color--gray: #e6e6e6;
+$color--gray-light: #f6f6f6;
+$color--red-light: #ff8989;
+$color--red: #de3e3e;

packages/create-vivliostyle-theme/templates/default/scss/_vfm_code.scss

@@ -0,0 +1,20 @@
+// Syntax highlighting
+// https://prismjs.com
+@import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css';
+
+code {
+  background-color: $color--gray-light;
+  padding: 0 3pt;
+}
+
+figure[class^='language-'] {
+  margin: 0.5em 0;
+
+  figcaption {
+    background-color: $color--gray;
+  }
+
+  pre {
+    margin: 0pt;
+  }
+}

packages/create-vivliostyle-theme/templates/default/scss/_vfm_footnotes.scss

@@ -0,0 +1,11 @@
+.footnote-ref sup {
+  background-color: $color--red-light;
+}
+
+.footnote-back {
+  background-color: $color--red-light;
+}
+
+.footnotes {
+  font-size: 8pt;
+}

packages/create-vivliostyle-theme/templates/default/scss/_vfm_frontmatter.scss

@@ -0,0 +1,2 @@
+.foo.bar {
+}

packages/create-vivliostyle-theme/templates/default/scss/_vfm_hard_new_line.scss

@@ -0,0 +1,13 @@
+p {
+  margin: 0;
+  text-align: justify;
+  text-indent: 3em;
+
+  &:first-of-type {
+    text-indent: 0;
+  }
+
+  :root:lang(ja) & {
+    text-indent: 1em;
+  }
+}

packages/create-vivliostyle-theme/templates/default/scss/_vfm_image.scss

@@ -0,0 +1,24 @@
+img {
+  max-width: 100%;
+}
+
+figure {
+  img {
+  }
+
+  figcaption {
+    text-align: center;
+
+    // counter
+    counter-increment: figure;
+
+    &:before {
+      margin-right: 1rem;
+      content: 'Figure' counter(figure) '.';
+
+      :root:lang(ja) & {
+        content: '図' counter(figure) '.';
+      }
+    }
+  }
+}

packages/create-vivliostyle-theme/templates/default/scss/_vfm_math_equation.scss

@@ -0,0 +1,5 @@
+.math.inline {
+}
+
+.math.display {
+}

packages/create-vivliostyle-theme/templates/default/scss/_vfm_raw_html.scss

@@ -0,0 +1,3 @@
+.custom {
+  color: $color--red;
+}

packages/create-vivliostyle-theme/templates/default/scss/_vfm_ruby.scss

@@ -0,0 +1,5 @@
+ruby {
+  rt {
+    color: $color--red;
+  }
+}

packages/create-vivliostyle-theme/templates/default/scss/_vfm_sectionization.scss

@@ -0,0 +1,62 @@
+body > section {
+  margin: 10px auto;
+}
+
+html {
+  // counter
+  counter-reset: section subsection figure;
+}
+
+section > {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    padding: 0;
+    font-weight: bold;
+    break-after: avoid;
+  }
+
+  h1 {
+    margin: 10pt auto 5pt;
+    font-size: 14pt;
+    line-height: 1.5;
+
+    // counter
+    counter-increment: section;
+    counter-reset: subsection;
+
+    &:before {
+      margin-right: 1rem;
+      content: counter(section) '.';
+    }
+  }
+
+  h2 {
+    margin: 8pt auto 4pt;
+    font-size: 12pt;
+
+    // counter
+    counter-increment: subsection;
+
+    &:before {
+      margin-right: 1rem;
+      content: counter(section) '.' counter(subsection) '.';
+    }
+  }
+}
+
+section.title {
+  color: $color--red;
+}
+
+blockquote > h1 {
+  font-size: inherit;
+}
+
+.level1 {
+}
+.level2 {
+}

packages/create-vivliostyle-theme/templates/default/scss/theme_common.scss

@@ -10,15 +10,25 @@
 html {
   orphans: 1;
   widows: 1;
+  font-family: sans-serif;
+  font-size: 10pt;
+}
+
+title {
+  // Named strings
+  // https://vivliostyle.github.io/vivliostyle_doc/ja/events/vivliostyle-css-paged-media-20210410/slide.html#named-strings
+  string-set: doc-title content();
 }
 
 @page {
   size: A5;
 }
 
-title {
-  string-set: doc-title content();
-}
+// Left/right page layout
+// https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol1/shinyu/index.html#%E5%B7%A6%E5%8F%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88-page-left-%E3%81%A8-page-right
+
+// Page header/footer (page mergin box)
+// https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol1/shinyu/index.html#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%EF%BC%8F%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%EF%BC%88%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%9E%E3%83%BC%E3%82%B8%E3%83%B3%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%EF%BC%89
 
 @page :left {
   @top-left {
@@ -32,19 +42,15 @@ title {
   }
 }
 
-html {
-  font-family: sans-serif;
-  line-height: 1.666rem;
-}
-
-h1 {
-  break-after: avoid;
-}
-
-h2 {
-  font-size: 1.18rem;
-  text-indent: 3rem;
-  break-after: avoid;
-}
+@import '_variables';
+@import '_vfm_code';
+@import '_vfm_footnotes';
+@import '_vfm_frontmatter';
+@import '_vfm_hard_new_line';
+@import '_vfm_image';
+@import '_vfm_math_equation';
+@import '_vfm_raw_html';
+@import '_vfm_ruby';
+@import '_vfm_sectionization';
 
 /* and more... 🖋 */