Website (#93)

Website version of the book and related tooling.

README-zh_CN.md

@@ -4,6 +4,12 @@
 
 本书完全免费且开源。
 
+## 翻译
+
+本书已被翻译成多种语言版本，包括：
+
+* [中文](./README-zh_CN.md)
+
 ## 下载
 
 您还可以在这里下载 Epub 版本：
@@ -14,6 +20,7 @@
 
 <!-- markdownlint-disable MD004 -->
 - [简洁的TypeScript之书](#简洁的typescript之书)
+  - [翻译](#翻译)
   - [下载](#下载)
   - [目录表](#目录表)
   - [介绍](#介绍)

tools/.vscode/launch.json

@@ -22,6 +22,14 @@
                 "<node_internals>/**",
                 "node_modules/**"
             ]
+        },
+        {
+            "name": "Python: Current File",
+            "type": "python",
+            "request": "launch",
+            "program": "${file}",
+            "console": "integratedTerminal",
+            "justMyCode": true
         }
     ]
 }

tools/Makefile

@@ -0,0 +1,11 @@
+format:
+	npm run format
+
+check:
+	npm run check
+
+website:
+	python3 ./make-website-content.py
+
+books:
+	./make-books.sh

tools/README.md

@@ -11,45 +11,54 @@ nvm use
 npm install
 ```
 
-## Formatting
+## Commands
+
+Use `make` to run the main commands:
+
+- `make format`: Format Markdown files for books.
+- `make check`: Run several checks to ensure the Markdown files are valid.
+- `make website`: Create different Markdown pages for the website.
+- `make books`: Create .epub books.
+
+### Formatting
 
 Consistent code formatting is crucial. To format all TypeScript snippets, we use Prettier. Execute the following command for formatting:
 
 ```shell
 npm run format
 ```
 
-## Compilation
+### Compilation
 
 To compile TypeScript snippets within the Markdown files, utilize the following command:
 
 ```shell
 npm run compile
 ```
 
-## Linting
+### Linting
 
 To ensure that your Markdown files adhere to proper formatting rules, use the linting command:
 
 ```shell
 npm run lint:md
 ```
 
-## Linting and Formatting
+### Linting and Formatting
 
 For a comprehensive process that includes linting all Markdown files, applying Prettier formatting to all TypeScript snippets, and compiling them using TypeScript, use the following command:
 
 ```shell
 npm run check
 ```
 
-## Skipping Compilation
+### Skipping Compilation
 
 If you have specific snippets in the Markdown files that you don't want to compile, simply add `<!-- skip -->` just before the TypeScript demarcation for those snippets.
 
-## Epub Generation
+### Epub Generation
 
-To generate Epub files from your Markdown books, navigate to the `tools`` folder and run the following command:
+To generate Epub files from your Markdown books, navigate to the `tools` folder and run the following command:
 
 ```shell
 make-books.sh

tools/make-website-content.py

@@ -0,0 +1,139 @@
+"""
+Generate multiple Markdown documents from a single Markdown file by splitting it based on headings. 
+This script is designed for creating pages on a website and provides results for multiple languages.
+Note: the number of headings per language must be the same.
+"""
+
+import os
+import re
+import shutil
+
+# INPUT_FILE_PATH = "./test-md/README.md"
+# OUTPUT_DIR_PATH = "./test-md/en"
+# INPUT_FILE_PATH_CN = "./test-md/README-zh_CN.md"
+# OUTPUT_DIR_PATH_CN = "./test-md/zh-cn"
+
+INPUT_FILE_PATH = "../README.md"
+OUTPUT_DIR_PATH = "../website/src/content/docs/book"
+
+INPUT_FILE_PATH_CN = "../README-zh_CN.md"
+OUTPUT_DIR_PATH_CN = "../website/src/content/docs/zh-cn/book"
+
+
+def manage_output_dir(path):
+    if os.path.exists(path):
+        shutil.rmtree(path)
+    os.makedirs(path)
+
+
+def read_content_file(path):
+    with open(path, "r") as file:
+        lines = file.readlines()
+    return lines
+
+
+def make_file_name(name):
+    content_sanitized = re.sub(r"[^a-zA-Z0-9]+", "-", name.lower()).strip("-")
+    return f"{content_sanitized}"
+
+
+def make_output_path(output_dir, file_name):
+    return f"{output_dir}/{file_name}.md"
+
+
+def is_line_header_1_to_2(line):
+    return re.match(r"^(#{1,2})\s+(.+)", line)
+
+
+def make_file_output_path(output_dir, name):
+    file_name = make_file_name(name)
+    output_file_path = make_output_path(output_dir, file_name)
+    return output_file_path
+
+
+def make_markdown_page_metadata(order, header):
+    return [
+        "---\n",
+        f"title: {header}\n",
+        "sidebar:\n",
+        f"  order: {order}\n",
+        f"  label: {order}. {header}\n",
+        "---\n",
+        "\n",
+    ]
+
+
+def save_content_to_file(path, lines):
+    with open(path, "w") as output_file:
+        output_file.writelines(lines)
+
+
+def save_pages_to_files(data_pages, master_headers, output_dir):
+    for index, header in enumerate(master_headers):
+        file = make_file_output_path(output_dir, header)
+        save_content_to_file(file, data_pages[index])
+
+
+def find_master_headers(lines):
+    headers = [x for x in lines if is_line_header_1_to_2(x)]
+    headers_clean = list(map(lambda x: make_file_name(x), headers))
+    return headers_clean
+
+
+def remove_markdown_anchors(markdown_text):
+    pattern = r"\[(.*?)\]\(#[^\)]*\)"
+    replacement = r"\1"
+    transformed_text = re.sub(pattern, replacement, markdown_text)
+    return transformed_text
+
+
+def split_content_by_headings(lines):
+    current_content = []
+    in_page = False
+    header_index = -1
+    content_result = []
+
+    for line in lines:
+        is_header_match = is_line_header_1_to_2(line)
+        if is_header_match:
+            header_text = is_header_match.group(2).strip()
+            header_index += 1
+            if not in_page:
+                in_page = True
+                current_content.extend(
+                    make_markdown_page_metadata(header_index + 1, header_text)
+                )
+            else:
+                content_result.extend([current_content])
+                current_content = []
+                in_page = True
+                current_content.extend(
+                    make_markdown_page_metadata(header_index + 1, header_text)
+                )
+        else:
+            line_new = remove_markdown_anchors(line)
+            current_content.append(line_new)
+
+    header_index += 1
+    content_result.extend([current_content])
+
+    return content_result
+
+
+content_lines_master = read_content_file(INPUT_FILE_PATH)
+master_headers = find_master_headers(content_lines_master)
+
+
+def process(base_input, base_output):
+    manage_output_dir(base_output)
+    content_lines = read_content_file(base_input)
+    data_pages = split_content_by_headings(
+        content_lines,
+    )
+    save_pages_to_files(data_pages, master_headers, base_output)
+    print(f"A total of: {len(master_headers)} files were at: {base_output}")
+
+
+process(INPUT_FILE_PATH, OUTPUT_DIR_PATH)
+
+process(INPUT_FILE_PATH_CN, OUTPUT_DIR_PATH_CN)

tools/test-md/README-zh_CN.md

@@ -0,0 +1,12 @@
+# 简洁 TypeScript 书
+TypeScript 有效开发简明指南。 **免费和开源**。
+## 创建文件和文件夹
+可使用 按钮访问文件资源管理器。
+## 切换到另一个文件
+您的所有文件和文件夹都在文件资源管理器中显示为树。 您可以通过单击树中的文件从一个文件切换到另一个文件。
+### 新标题
+一些家长内容。
+#### 嵌套内容 1
+更多内容在这里。
+##### 嵌套内容 2
+内容甚至更多。

tools/test-md/README.md

@@ -0,0 +1,12 @@
+# The Concise TypeScript Book
+A Concise Guide to Effective Development in TypeScript. **Free and Open Source**.
+## Create files and folders
+The file explorer is accessible using the button.
+## Switch to another file
+All your files and folders are presented as a tree in the file explorer. You can switch from one to another by clicking a file in the tree.
+### New title
+Some parent content.
+#### Nested content 1
+More content here.
+##### Nested content 2
+Even more content.

website/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

website/.nvmrc

@@ -0,0 +1 @@
+v19.7.0

website/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 80,
+    "arrowParens": "avoid"
+}

website/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

website/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

website/README.md

@@ -0,0 +1,54 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   │   └── config.ts
+│   └── env.d.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).