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

@@ -5,6 +5,7 @@ stages:
 
 variables:
   PACKAGE_REGISTRY_URL: "${CI_API_V4_URL}/projects/${CI_PROJECT_ID}/packages/generic/devlifefrommodernway/${CI_COMMIT_TAG}"
+  GIT_SUBMODULE_STRATEGY: recursive
 
 upload:
   stage: upload
@@ -27,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:
@@ -37,21 +42,8 @@ pages:
     paths:
       - node_modules/
   script:
-    - apt-get update && apt-get install -y calibre --no-install-recommends
-
-    - 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
-
+    - docker build -t devlifefrommodernway .
+    - docker run -v ./:/build devlifefrommodernway
     - 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 = git@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",
-    "installedVersion",
-    "licensePeriod",
-    "comment"
+    "link"
   ]
 }

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
-    version: link:plugins/gitbook-plugin-obsidian-code-admonition
+    specifier: git+https://github.com/anosatsuk124/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                           |
-| :---- | :----------- | :-------------------- | :----------------------------- |
-| Firge | Yuko OTAWARA | SIL Open Font License | https://github.com/yuru7/Firge |
-
-## その他の使用ライブラリ等の外部ライセンス
-
-{%include "EXTERNAL_LICENSE_REPORT.md" %}
+| Name  | Author       | Link                           |
+| :---- | :----------- | :----------------------------- |
+| Firge | Yuko OTAWARA | https://github.com/yuru7/Firge |

src/README.md

@@ -4,15 +4,15 @@
 >
 > [**Releases**](https://gitlab.com/DevLifeFromModernWay/devlifefrommodernway.gitlab.io/-/releases/permalink/latest) から以下のファイル形式でのダウンロードも可能です。
 >
-> - PDF
+> -   PDF
 >
-> - EPUB
+> -   EPUB
 >
-> - MOBI
+> -   MOBI
 >
 > **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]
@@ -49,11 +51,11 @@
 
 - 複数のプログラミング言語を書く力
 
-  - `JavaScript / TypeScript`
+    - `JavaScript / TypeScript`
 
-  - `Rust`
+    - `Rust`
 
-  - `C#`
+    - `C#`
 
 など、プログラミングとは切り離せない周辺分野の知識さえも得られます。
 
@@ -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,
-td {
+.markdown-section table td,
+.markdown-section table th {
   width: 16.6%;
   padding: 0.6em 1em;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
-}
-
-@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;
-  }
+  word-break: break-word;
 }

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 ページ ()