Update

Dockerfile

@@ -1,5 +1,10 @@
 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
@@ -13,12 +18,5 @@ 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
 
-RUN sudo corepack enable
+CMD exec sh -c "chown -R node:node /build && sudo -u node pnpm install && sudo -u node pnpm run build"
-
-
-ENV LANG=ja_JP.UTF-8
-
-USER node
-
-ENTRYPOINT exec sh -c "pnpm install && 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/

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",

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,14 +1,13 @@
 # 「モダンからはじめる プログラミング生活！」
 
-- [はじめに](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.md)
 

src/_layouts/ebook/page.html

@@ -1,10 +1,5 @@
 <!-- prettier-ignore -->
 {% extends template.self %}
-{% extends "../layout.html" %}
-
-<!-- prettier-ignore -->
-{% block title %}{{ page.title }}{% endblock %}
-{% block description %}{{ page.description }}{% endblock %}
 
 <!-- prettier-ignore -->
 {% block style %}

src/_styles/ebook.css

@@ -1,4 +1,4 @@
-.markdown-section table td,
+table td,
-.markdown-section table th {
+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 ページ ()