Update

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+_book
+target
+EXTERNAL_LICENSE_REPORT.md
+.pnpm-store

.gitignore

@@ -2,3 +2,4 @@ node_modules
 _book
 target
 EXTERNAL_LICENSE_REPORT.md
+.pnpm-store

.gitlab-ci.yml

@@ -28,9 +28,13 @@ release:
       --assets-link "{\"name\":\"book.epub\", \"url\":\"${PACKAGE_REGISTRY_URL}/book-${CI_COMMIT_TAG}.epub\"}"
       --assets-link "{\"name\":\"book.mobi\", \"url\":\"${PACKAGE_REGISTRY_URL}/book-${CI_COMMIT_TAG}.mobi\"}"
 
-image: node:lts-bullseye
 pages:
   stage: build
+  image: docker:24.0.5
+  services:
+    - docker:24.0.5-dind
+  before_script:
+    - docker info
   cache:
     key:
       files:
@@ -38,21 +42,8 @@ pages:
     paths:
       - node_modules/
   script:
-    - apt-get update && apt-get install -y calibre --no-install-recommends
+    - docker build -t devlifefrommodernway .
-
+    - docker run -v ./:/build devlifefrommodernway
-    - apt-get update && apt-get install -y fontconfig unzip sudo
-    - unzip "./fonts/*.zip" -d /usr/share/fonts/
-      && fc-cache -fv
-
-    - mkdir -p /etc/fonts/conf.d &&
-      cp -a ./fonts/fonts.conf /etc/fonts/conf.d/99-firgenerd.conf &&
-      fc-cache -fv
-
-    - sudo corepack enable
-    - sudo -u node pnpm install
-
-    - sudo -u node env LANG=ja_JP.UTF-8 pnpm run build
-
     - cp -a _book/. public/
   artifacts:
     paths:

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "gitbook-plugin-obsidian-code-admonition"]
-	path = plugins/gitbook-plugin-obsidian-code-admonition
-	url = https://github.com/anosatsuk124/gitbook-plugin-obsidian-code-admonition.git

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:lts-bullseye
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+RUN corepack enable
+
+WORKDIR /build
+
+RUN apt-get update && apt-get install -y calibre --no-install-recommends
+
+RUN apt-get update && apt-get install -y fontconfig unzip sudo
+
+COPY ./fonts /build/fonts
+
+RUN unzip "./fonts/*.zip" -d /usr/share/fonts/ && fc-cache -fv
+
+RUN mkdir -p /etc/fonts/conf.d && \
+  cp -a ./fonts/fonts.conf /etc/fonts/conf.d/99-firgenerd.conf && fc-cache -fv
+
+CMD exec sh -c "chown -R node:node /build && sudo -u node pnpm install && sudo -u node pnpm run build"
+

docker-compose.yml

@@ -0,0 +1,10 @@
+volumes:
+  node_modules:
+  pnpm-store:
+services:
+  builder:
+    build: .
+    volumes:
+      - .:/build
+      - node_modules:/build/node_modules/
+      - pnpm-store:/build/.pnpm-store/

licese-report.json

@@ -2,10 +2,6 @@
   "fields": [
     "name",
     "author",
-    "licenseType",
+    "link"
-    "link",
-    "installedVersion",
-    "licensePeriod",
-    "comment"
   ]
 }

package.json

@@ -2,6 +2,7 @@
   "name": "devlifefrommodernway",
   "private": true,
   "scripts": {
+    "docker": "docker-compose up --build; docker-compose down",
     "watch": "run-s license && run-p watch:web",
     "watch:web": "honkit serve",
     "build": "run-s build:content",
@@ -17,7 +18,7 @@
     "gitbook-plugin-collapsible-chapters": "^0.1.8",
     "gitbook-plugin-copy-code-button": "^0.0.2",
     "gitbook-plugin-hide-published-with": "^0.0.1",
-    "gitbook-plugin-obsidian-code-admonition": "link:./plugins/gitbook-plugin-obsidian-code-admonition",
+    "gitbook-plugin-obsidian-code-admonition": "git+https://github.com/anosatsuk124/gitbook-plugin-obsidian-code-admonition",
     "gitbook-plugin-search-pro-fixed": "^1.0.1",
     "graceful-fs": "^4.2.11",
     "honkit": "^5.1.1",

pnpm-lock.yaml

@@ -18,8 +18,8 @@ devDependencies:
     specifier: ^0.0.1
     version: 0.0.1
   gitbook-plugin-obsidian-code-admonition:
-    specifier: link:./plugins/gitbook-plugin-obsidian-code-admonition
+    specifier: git+https://github.com/anosatsuk124/gitbook-plugin-obsidian-code-admonition
-    version: link:plugins/gitbook-plugin-obsidian-code-admonition
+    version: github.com/anosatsuk124/gitbook-plugin-obsidian-code-admonition/a8f0c6189cf5d9ba8ac5cdebbe5646a59972f573
   gitbook-plugin-search-pro-fixed:
     specifier: ^1.0.1
     version: 1.0.1
@@ -321,6 +321,17 @@ packages:
       domutils: 3.1.0
     dev: true
 
+  /cheerio@0.19.0:
+    resolution: {integrity: sha512-Fwcm3zkR37STnPC8FepSHeSYJM5Rd596TZOcfDUdojR4Q735aK1Xn+M+ISagNneuCwMjK28w4kX+ETILGNT/UQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      css-select: 1.0.0
+      dom-serializer: 0.1.1
+      entities: 1.1.2
+      htmlparser2: 3.8.3
+      lodash: 3.10.1
+    dev: true
+
   /cheerio@0.22.0:
     resolution: {integrity: sha512-8/MzidM6G/TgRelkzDG13y3Y9LxBjCb+8yOEZ9+wwq5gVF2w2pV0wmHvjfT0RvuxGyR7UEuK36r+yYMbT4uKgA==}
     engines: {node: '>= 0.6'}
@@ -431,6 +442,10 @@ packages:
     resolution: {integrity: sha512-TF30kpKhTH8AGCG3dut0rdd/19B7Z+qCnrMoBLpyQu/2drZdNrrpcjPEoJeSVsQM+8KmWG5O56oPDjSSUsuTyA==}
     dev: true
 
+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: true
+
   /cp@0.2.0:
     resolution: {integrity: sha512-4ftCvShHjIZG/zzomHyunNpBof3sOFTTmU6s6q9DdqAL/ANqrKV3pr6Z6kVfBI4hjn59DFLImrBqn7GuuMqSZA==}
     dev: true
@@ -462,6 +477,15 @@ packages:
       which: 1.3.1
     dev: true
 
+  /css-select@1.0.0:
+    resolution: {integrity: sha512-/xPlD7betkfd7ChGkLGGWx5HWyiHDOSn7aACLzdH0nwucPvB0EAm8hMBm7Xn7vGfAeRRN7KZ8wumGm8NoNcMRw==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 1.0.0
+      domutils: 1.4.3
+      nth-check: 1.0.2
+    dev: true
+
   /css-select@1.2.0:
     resolution: {integrity: sha512-dUQOBoqdR7QwV90WysXPLXG5LO7nhYBgiWVfxF80DKPF8zx1t/pUd2FYy73emg3zrjtM6dzmYgbHKfV2rxiHQA==}
     dependencies:
@@ -491,6 +515,10 @@ packages:
       nth-check: 2.1.1
     dev: true
 
+  /css-what@1.0.0:
+    resolution: {integrity: sha512-60SUMPBreXrLXgvpM8kYpO0AOyMRhdRlXFX5BMQbZq1SIJCyNE56nqFQhmvREQdUJpedbGRYZ5wOyq3/F6q5Zw==}
+    dev: true
+
   /css-what@2.1.3:
     resolution: {integrity: sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==}
     dev: true
@@ -619,6 +647,12 @@ packages:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
     dev: true
 
+  /domhandler@2.3.0:
+    resolution: {integrity: sha512-q9bUwjfp7Eif8jWxxxPSykdRZAb6GkguBGSgvvCrhI9wB71W2K/Kvv4E61CF/mcCfnVJDeDWx/Vb/uAqbDj6UQ==}
+    dependencies:
+      domelementtype: 1.3.1
+    dev: true
+
   /domhandler@2.4.2:
     resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
     dependencies:
@@ -646,6 +680,12 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
+  /domutils@1.4.3:
+    resolution: {integrity: sha512-ZkVgS/PpxjyJMb+S2iVHHEZjVnOUtjGp0/zstqKGTE9lrZtNHlNQmLwP/lhLMEApYbzc08BKMx9IFpKhaSbW1w==}
+    dependencies:
+      domelementtype: 1.3.1
+    dev: true
+
   /domutils@1.5.1:
     resolution: {integrity: sha512-gSu5Oi/I+3wDENBsOWBiRK1eoGxcywYSqg3rR960/+EfY0CF4EX1VPkgHOZ3WiS/Jg2DtliF6BhWcHlfpYUcGw==}
     dependencies:
@@ -689,6 +729,10 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /entities@1.0.0:
+    resolution: {integrity: sha512-LbLqfXgJMmy81t+7c14mnulFHJ170cM6E+0vMXR9k/ZiZwgX8i5pNgjTCX3SO4VeUsFLV+8InixoretwU+MjBQ==}
+    dev: true
+
   /entities@1.1.2:
     resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
     dev: true
@@ -1188,6 +1232,16 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
+  /htmlparser2@3.8.3:
+    resolution: {integrity: sha512-hBxEg3CYXe+rPIua8ETe7tmG3XDn9B0edOE/e9wH2nLczxzgdu0m0aNHY+5wFZiviLWLdANPJTssa92dMcXQ5Q==}
+    dependencies:
+      domelementtype: 1.3.1
+      domhandler: 2.3.0
+      domutils: 1.5.1
+      entities: 1.0.0
+      readable-stream: 1.1.14
+    dev: true
+
   /htmlparser2@5.0.1:
     resolution: {integrity: sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==}
     dependencies:
@@ -1429,6 +1483,10 @@ packages:
     resolution: {integrity: sha512-nW24QBoPcFGGHJGUwnfpI7Yc5CdqWNdsyHQszVE/z2pKHXzh7FZ5GWhJqSyaQ9wMkQnsTx+kAI8bHlCX4tKdbg==}
     dev: true
 
+  /isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+    dev: true
+
   /isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
     dev: true
@@ -1571,6 +1629,10 @@ packages:
     resolution: {integrity: sha512-j7MJE+TuT51q9ggt4fSgVqro163BEFjAt3u97IqU+JA2DkWl80nFTrowzLpZ/BnpN7rrl0JA/593NAdd8p/scQ==}
     dev: true
 
+  /lodash@3.10.1:
+    resolution: {integrity: sha512-9mDDwqVIma6OZX79ZlDACZl8sBm0TEnkf99zV3iMA4GzkIT/9hiqP5mY0HoT1iNLCrKc/R1HByV+yJfRWVJryQ==}
+    dev: true
+
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: true
@@ -1961,6 +2023,15 @@ packages:
       path-type: 3.0.0
     dev: true
 
+  /readable-stream@1.1.14:
+    resolution: {integrity: sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+    dev: true
+
   /readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -2515,3 +2586,11 @@ packages:
       y18n: 5.0.8
       yargs-parser: 20.2.9
     dev: true
+
+  github.com/anosatsuk124/gitbook-plugin-obsidian-code-admonition/a8f0c6189cf5d9ba8ac5cdebbe5646a59972f573:
+    resolution: {tarball: https://codeload.github.com/anosatsuk124/gitbook-plugin-obsidian-code-admonition/tar.gz/a8f0c6189cf5d9ba8ac5cdebbe5646a59972f573}
+    name: gitbook-plugin-obsidian-code-admonition
+    version: 0.0.9
+    dependencies:
+      cheerio: 0.19.0
+    dev: true

src/EXTERNAL_LICENSE.md

@@ -0,0 +1,3 @@
+# その他の使用ライブラリ等の外部ライセンス
+
+{% include "./EXTERNAL_LICENSE_REPORT.md" %}

src/LICENSE.md

@@ -1,4 +1,4 @@
-# ライセンス情報
+# ページのライセンス情報
 
 ## 本文
 
@@ -14,12 +14,8 @@
 > You should have received a copy of the license along with this
 > work. If not, see <https://creativecommons.org/licenses/by/4.0/>.
 
-# フォント
+## フォント
 
-| Name  | Author       | License type          | Link                           |
+| Name  | Author       | Link                           |
-| :---- | :----------- | :-------------------- | :----------------------------- |
+| :---- | :----------- | :----------------------------- |
-| Firge | Yuko OTAWARA | SIL Open Font License | https://github.com/yuru7/Firge |
+| Firge | Yuko OTAWARA | https://github.com/yuru7/Firge |
-
-## その他の使用ライブラリ等の外部ライセンス
-
-{%include "EXTERNAL_LICENSE_REPORT.md" %}

src/README.md

@@ -12,7 +12,7 @@
 >
 > **link: <https://gitlab.com/DevLifeFromModernWay/devlifefrommodernway.gitlab.io/-/releases/permalink/latest>**
 
----
+<br />
 
 > [!danger] **注意**:
 >
@@ -39,6 +39,8 @@
 
 などを実践的に解決していく形式をとります。
 
+<div style="page-break-before:always;"></div>
+
 その過程での副産物として、
 
 - Google 検索の方法 [^2]
@@ -94,9 +96,9 @@
 
 ### 用語の表記について
 
-プログラミングの周辺分野用語は、Googleablity [^2] を考慮して英語表記を優先しています。
+分かりやすさのため極力日本語で表記しますが、プログラミングの周辺分野用語は Googleability [^2] 等も考慮して英語表記を優先しています。
 初出で重要なキーワードは _Italic_ 体で表記しています。
 
-> プログラミング言語 (あるいは _framework_) の文法や機能を &hellip;
+> プログラミング言語 (あるいは _framework_) の文法や機能を …
 
-[^2]: Google での検索しやすさ。C 言語は `C` と検索せず、 `C-language` `C-lang` などとすると Googleablity が高い。
+[^2]: Google での検索しやすさ。C 言語は `C` と検索せず、 `C-language` `C-lang` などとすると Googleablity が高い。[googleability - Wiktionary, the free dictionary](https://en.wiktionary.org/wiki/googleability#English)

src/SUMMARY.md

@@ -1,11 +1,14 @@
 # 「モダンからはじめる プログラミング生活！」
 
-- [はじめに](README.md)
+- [はじめに](./README.md)
 
-## Web (TypeScript / JavaScript) 編
+## [モダンからはじめる Web アプリ開発！ (TypeScript/JavaScript & React 編)](./contents/WebApps/README.md)
 
-- [モダンからはじめる Web アプリ開発！](WebApps/README.md)
+1. [開発環境の準備 ()](./contents/WebApps/01-prepare-dev-environment.md)
+2. はじめての Web ページ ()
 
-## リポジトリ情報
+## ライセンス情報
 
-- [LICENSE](LICENSE.md)
+- [ページのライセンス情報](./LICENSE.md)
+
+- [その他の使用ライブラリ等の外部ライセンス](./EXTERNAL_LICENSE.md)

src/_layouts/ebook/page.html

@@ -0,0 +1,8 @@
+<!-- prettier-ignore -->
+{% extends template.self %}
+
+<!-- prettier-ignore -->
+{% block style %}
+    {{ super() }}
+<link rel="stylesheet" href="/_styles/ebook.css" />
+{% endblock %}

src/_styles/base.css

@@ -52,52 +52,19 @@
 }
 
 /* Table responsive */
-
 table {
-  width: 100%;
+  width: 50%;
   border-top: 1px solid #ccc;
   border-left: 1px solid #ccc;
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-th,
+.markdown-section table td,
-td {
+.markdown-section table th {
   width: 16.6%;
   padding: 0.6em 1em;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
-}
+  word-break: break-word;
-
-@media screen and (max-width: 640px) {
-  body {
-    overflow: hidden;
-  }
-
-  table {
-    display: flex;
-  }
-
-  thead {
-    white-space: nowrap;
-  }
-
-  tbody {
-    overflow-x: scroll;
-    white-space: nowrap;
-  }
-
-  tbody tr {
-    display: inline-block;
-  }
-
-  tbody tr:last-child {
-    margin-left: -5px;
-  }
-
-  th,
-  td {
-    display: block;
-    width: auto;
-  }
 }

src/_styles/ebook.css

@@ -0,0 +1,4 @@
+table td,
+table th {
+  word-wrap: break-word;
+}

src/contents/WebApps/01-prepare-dev-environment.md

@@ -0,0 +1,3 @@
+# 開発環境の準備 ()
+
+## Terminal を起動する

src/contents/WebApps/README.md

@@ -4,6 +4,5 @@
 
 ## 目次
 
-1. 開発環境の準備 ()
+1. [開発環境の準備 ()](./01-prepare-dev-environment.md)
-
 2. はじめての Web ページ ()