Merge pull request #11 from kght6123/feature/addSize-105x173

新書版サイズへの対応

README.md

@@ -99,6 +99,7 @@ Appleシリコン版Macや、Intel版Macの場で動作確認しています。
 
 ```ts
 export default {
+  size: "JIS-B5", // B5判と"105mm 173mm"（新書）サイズのみ対応
   title: "(本のタイトル)",
   author: "(著者名)",
   publisher: "(サークル名)",
@@ -120,6 +121,13 @@ brタグで改行ができます。`,
       image: "../images/(プロファイル画像を置いて指定する).png",
     },
   ],
+  cover: {
+    // TODO: 表紙画像が必要な場合は置いて指定してください
+    // front: "front-cover.png",
+    // back: "back-cover.png",
+    // start: "start-cover.png",
+    // end: "end-cover.png",
+  },
   copyright: "(コピーライトを書く)",
 };
 ```

docs/99-1_samples.md

@@ -1,6 +1,6 @@
 ---
 description:
-  利用できるのマークダウンの構文とカスタム構文のサンプル集です。
+  利用できるマークダウンの構文とカスタム構文のサンプル集です。
   追加のプラグインやHandlebar.jsで拡張した構文もふくめて、全ての構文を確認するためのサンプルになります。
 color:
   primary:

docs/_finally.md

@@ -3,3 +3,5 @@ columns: true
 ---
 
 # さいごに
+
+TODO: 作成する本の最後に記述する内容を記述します。作成する本に合わせて内容を変更してください。

docs/_introduction.md

@@ -3,3 +3,27 @@ columns: true
 ---
 
 # はじめに
+
+TODO: 作成する本のイントロダクションを記述します。作成する本に合わせて内容を変更してください。
+
+お手にとっていただきありがとうございます。
+
+<div class="doc-author">
+サークル名 編 著／20yy-mm-dd 発行 v1.0.0
+</div>
+
+## この本の内容について
+
+## お問い合わせ先
+
+X（旧Twitter）: [@xxx](https://twitter.com/xxx){{footnote 'https://twitter.com/xxx'}}
+
+<!-- qrcode: https://twitter.com/xxx -->
+
+## 本書のフォントについて
+
+「Mgen+」を使用しています。
+
+Licensed under SIL Open Font License 1.1 (http://scripts.sil.org/OFL)
+© 2015 自家製フォント工房、© 2014, 2015 Adobe Systems Incorporated、© 2015 M+ FONTS PROJECT
+(http://jikasei.me/font/mgenplus/)

src/chapter-template.html

@@ -63,7 +63,7 @@
     <div class="bottomRightCorner"></div>
     <div class="bottomLeft"></div>
     <div class="bottomLeftCorner"></div>
-    <div id="chaptercover" class="flex flex-col items-end justify-center bg-primary-500 rounded  [page-break-before:always] w-[565px] h-[777px]">
+    <div id="chaptercover" class="chapterCover flex flex-col items-end justify-center bg-primary-500 rounded  [page-break-before:always] w-[565px] h-[777px]">
       <div class="text-right pr-6">
         <a class="chapterCoverTitle border-t-0 border-l-0 border-r-0 border-b-[2px] border-solid border-white pb-1 px-2 text-white font-semibold no-underline" href="#{{slug}}">{{title}}</a>
       </div>
@@ -83,7 +83,7 @@
         <p class="text-white">{{split data.matter.description 1 " " 2}}</p>
       </div>
     </div>
-    <div class="break-before-page"></div>
+    <div class="chapterCover break-before-page"></div>
     <!-- INFO: https://github.com/vivliostyle/vivliostyle.js/issues/542 -->
     <!-- {{#if data.matter.columns}}<div class="colmun-count-2">{{/if}} -->
     {{{body}}}

src/cli.ts

@@ -1,6 +1,9 @@
 import { Command } from 'commander';
 import concurrently from 'concurrently';
+import config from "../techbook.config";
+
 const program = new Command();
+const cssSrcFileName = config.size === "JIS-B5" ? "global.css" : config.size === "105mm 173mm" ? "global-105x173.css" : "global.css";
 
 program
   .name('techbook-cli')
@@ -17,7 +20,7 @@ program.command('dev')
         { command: "npx --yes vite-node src/main.ts", name: "init" },
         { command: "npx --yes chokidar-cli \"src/**/*.ts\" \"src/**/*.html\" \"docs/**/*.md\" -c \"npx --yes vite-node src/main.ts\"", name: "main" },
         { command: `npx --yes listhen --host 0.0.0.0 --port ${h3Port} --watch ./src/viewer.ts`, name: "h3" },
-        { command: "npx --yes wait-on --interval 500 ./dist/lockfile && npx  --yes tailwindcss@latest -i ./src/global.css -o ./dist/global.css --watch --no-autoprefixer --postcss ./postcss.config.cjs", name: "tailwind" },
+        { command: `npx --yes wait-on --interval 500 ./dist/lockfile && npx  --yes tailwindcss@latest -i ./src/${cssSrcFileName} -o ./dist/global.css --watch --no-autoprefixer --postcss ./postcss.config.cjs`, name: "tailwind" },
         { command: `npx --yes wait-on --interval 500 ./dist/global.css ./dist/lockfile && npx --yes browser-sync start --no-ui --port ${syncPort} --config 'bs-config.js' --files="dist/lockfile,dist/global.css,images/*" --reload-delay=4000 --reload-throttle=4000 --startPath="/index.html#src=/dist/publication.json&bookMode=true&renderAllPages=true&style=/dist/global.css" --browser "google chrome"`, name: "browser-sync" },
         // { command: `npx --yes wait-on --interval 500 ./dist/global.css ./dist/lockfile && npx --yes browser-sync start --no-ui --port ${syncPort} --config 'bs-config.js' --files="dist/*" --reload-delay=4000 --reload-throttle=4000 --startPath="/index.html#src=/dist/publication.json&bookMode=true&renderAllPages=true&style=/dist/global.css" --browser "google chrome"`, name: "browser-sync" },
       ],
@@ -36,7 +39,7 @@ program.command('build')
     const { result } = concurrently(
       [
         { command: "npx --yes vite-node src/main.ts", name: "main" },
-        { command: "npx --yes tailwindcss@latest -i ./src/global.css -o ./dist/global.css --no-autoprefixer --postcss ./postcss.config.cjs", name: "tailwind" },
+        { command: `npx --yes tailwindcss@latest -i ./src/${cssSrcFileName} -o ./dist/global.css --no-autoprefixer --postcss ./postcss.config.cjs`, name: "tailwind" },
         { command: "npx --yes @vivliostyle/cli build --style ./dist/global.css", name: "vivliostyle" },
       ],
       {

src/constants.ts

@@ -41,6 +41,7 @@ export const lockFileSrcPath = "src/lockfile";
 export const lockFileDistPath = "dist/lockfile";
 
 export const chapterTemplateHtmlPath = "src/chapter-template.html";
+export const simpleChapterTemplateHtmlPath = "src/simplechapter-template.html";
 
 export const appendixTitle = "Appendix";
 export const appendixDistPath = "dist/appendix.dist.html";
@@ -59,6 +60,7 @@ export const finallyDocPath = "docs/_finally.md";
 export const introductionDistPath = "dist/_introduction.dist.html";
 export const finallyDistPath = "dist/_finally.dist.html";
 export const introductionTemplateHtmlPath = "src/introduction-template.html";
+export const simpleIntroductionTemplateHtmlPath = "src/simpleintroduction-template.html";
 
 export const tocDistPath = "dist/toc.dist.html";
 
@@ -67,12 +69,6 @@ export const frontCoverDistPath = "dist/front-cover.dist.html";
 export const backCoverDistPath = "dist/back-cover.dist.html";
 export const startCoverDistPath = "dist/start-cover.dist.html";
 export const endCoverDistPath = "dist/end-cover.dist.html";
-export const coverDistPaths = [
-  { path: frontCoverDistPath, image: "front-cover.png" },
-  { path: backCoverDistPath, image: "back-cover.png" },
-  { path: startCoverDistPath, image: "start-cover.png" },
-  { path: endCoverDistPath, image: "end-cover.png" },
-];
 
 // unifiedのプロセッサを作成する
 export const processorRehype = unified()

src/cover-template.html

@@ -9,6 +9,32 @@
     </style>
   </head>
   <body>
+    {{#if coverImage}}
     <div id="cover" class="cover"></div>
+    {{/if}}
+    {{#unless coverImage}}
+    {{#switch kind}}
+      {{#case "start"}}
+      <div id="cover" class="cover coverText flex flex-col justify-around items-center content-center">
+        <div class="text-black font-extrabold text-6xl">{{title}}</div>
+        <div class="text-black font-extrabold text-xl">{{publisher}} 編 著</div>
+        <div class="text-black font-extrabold text-md">{{lastEdition.datetimeView}} {{lastEdition.version}} {{lastEdition.name}}</div>
+      </div>
+      {{/case}}
+      {{#case "front"}}
+      <div id="cover" class="cover coverText flex flex-col justify-around items-center content-center">
+        <div class="text-black font-extrabold text-6xl">{{title}}</div>
+      </div>
+      {{/case}}
+      {{#case "back"}}
+      <div id="cover" class="cover coverText flex flex-col justify-around items-center content-center">
+        <div class="text-black font-extrabold text-xl">{{publisher}}</div>
+        <div class="text-black font-extrabold text-xl">{{author}}</div>
+      </div>
+      {{/case}}
+      {{#default}}
+      {{/default}}
+    {{/switch}}
+    {{/unless}}
   </body>
 </html>

src/cover.ts

@@ -1,10 +1,14 @@
 import fs from "fs";
 import Handlebars from "handlebars";
 import {
-  coverDistPaths,
   coverTemplateHtmlPath,
   handlebarCompileOptions,
+  frontCoverDistPath,
+  backCoverDistPath,
+  startCoverDistPath,
+  endCoverDistPath,
 } from "./constants";
+import config from "../techbook.config";
 
 // HTMLのテンプレートをHandlebarsで読み込む
 const templateHtml = Handlebars.compile(
@@ -13,11 +17,46 @@ const templateHtml = Handlebars.compile(
 );
 
 export const coverCompile = () => {
-  for (const { path, image } of coverDistPaths) {
-    // HTMLのテンプレートへ埋め込む
+  const edition = config.editions[config.editions.length - 1];
+  {
     const html = templateHtml({
-      coverImage: image,
+      kind: "front",
+      coverImage: config.cover.front,
+      title: config.title,
+      publisher: config.publisher,
+      author: config.author,
+      lastEdition: edition,
     });
-    fs.writeFileSync(path, html);
+    fs.writeFileSync(frontCoverDistPath, html);
+  }{
+    const html = templateHtml({
+      kind: "back",
+      coverImage: config.cover.back,
+      title: config.title,
+      publisher: config.publisher,
+      author: config.author,
+      lastEdition: edition,
+    });
+    fs.writeFileSync(backCoverDistPath, html);
+  }{
+    const html = templateHtml({
+      kind: "start",
+      coverImage: config.cover.start,
+      title: config.title,
+      publisher: config.publisher,
+      author: config.author,
+      lastEdition: edition,
+    });
+    fs.writeFileSync(startCoverDistPath, html);
+  }{
+    const html = templateHtml({
+      kind: "end",
+      coverImage: config.cover.end,
+      title: config.title,
+      publisher: config.publisher,
+      author: config.author,
+      lastEdition: edition,
+    });
+    fs.writeFileSync(endCoverDistPath, html);
   }
 };

src/generateVivlioStyleConfig.ts

@@ -16,7 +16,7 @@ import {
 import { docsHeadingList } from "./toc";
 
 export default function generateVivlioStyleConfig() {
-  const { title, author } = miraiBookConfig;
+  const { title, author, size } = miraiBookConfig;
   // MEMO: build（PDF生成）用にvivliostyle.config.cjsを生成する
   const docsEntryList = docsHeadingList.map(({ headings, dist }) => ({
     path: dist,
@@ -26,8 +26,7 @@ export default function generateVivlioStyleConfig() {
     title,
     author,
     language: "ja",
-    size: "JIS-B5",
-    // size: "105mm 173mm",
+    size: size,
     entryContext: ".",
     entry: [
       frontCoverDistPath,