diff --git a/astro.config.mjs b/astro.config.mjs
index 8e75fe2..b0c19ec 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -8,6 +8,8 @@
import remarkToc from 'remark-toc';
import remarkCodeFile from './src/plugins/remarkCodeFile';
import rehypeMermaid from "rehype-mermaid";
+import { icons } from "@iconify-json/material-symbols"
+
// https://astro.build/config
export default defineConfig({
@@ -32,7 +34,25 @@
excludeLangs: ["mermaid"],
},
rehypePlugins: [
- [rehypeMermaid, { strategy: "img-svg" }]
+ [
+ rehypeMermaid,
+ {
+ mermaindConfig: {
+ registerIconPacks: [
+ {
+ name: icons.prefix,
+ icons
+ },
+ ]
+ },
+ errorFallback: (element, diagram, error) => {
+ console.error("Mermaid error:", error); // ターミナルにエラーを表示
+ return { type: 'text', value: `Error: ${error.message}` };
+ },
+
+ securityLevel: "loose",
+ }
+ ]
],
},
});
diff --git a/package.json b/package.json
index cc4bd04..d55952a 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"@astrojs/react": "^4.4.2",
"@expressive-code/plugin-collapsible-sections": "^0.41.6",
"@expressive-code/plugin-line-numbers": "^0.41.6",
+ "@iconify-json/material-symbols": "^1.2.54",
"@tailwindcss/vite": "^4.1.18",
"@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73350b1..dfceffb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@
'@expressive-code/plugin-line-numbers':
specifier: ^0.41.6
version: 0.41.6
+ '@iconify-json/material-symbols':
+ specifier: ^1.2.54
+ version: 1.2.54
'@tailwindcss/vite':
specifier: ^4.1.18
version: 4.1.18(vite@6.4.1(@types/node@25.0.2)(jiti@2.6.1)(lightningcss@1.30.2))
@@ -447,6 +450,9 @@
resolution: {integrity: sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==}
engines: {node: '>=6'}
+ '@iconify-json/material-symbols@1.2.54':
+ resolution: {integrity: sha512-i2tBZPJeWI/DnvQ3DznodBOBQtZl0swLqyeCZx6yS6qXQ8aMGS4it/JgV3bRrffc3DbdIXGotPQqEBUJaDLqDw==}
+
'@iconify/types@2.0.0':
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -3075,6 +3081,10 @@
'@fortawesome/fontawesome-free@6.7.2': {}
+ '@iconify-json/material-symbols@1.2.54':
+ dependencies:
+ '@iconify/types': 2.0.0
+
'@iconify/types@2.0.0': {}
'@iconify/utils@3.1.0':
diff --git a/public/assets/git/git-remote.svg b/public/assets/git/git-remote.svg
new file mode 100644
index 0000000..fb4b14d
--- /dev/null
+++ b/public/assets/git/git-remote.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx
deleted file mode 100644
index fad5b8b..0000000
--- a/src/components/Counter.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useState } from 'preact/hooks';
-
-export default function Counter({ children }) {
- const [count, setCount] = useState(0);
- const add = () => setCount((i) => i + 1);
- const subtract = () => setCount((i) => i - 1);
-
- return (
- <>
-
- {children}
-
- );
-}
diff --git a/src/constants/sections.ts b/src/constants/sections.ts
index 4b8f2dd..0bf061e 100644
--- a/src/constants/sections.ts
+++ b/src/constants/sections.ts
@@ -91,8 +91,6 @@
filteredPages.map(async ([filePath, resolver]) => {
const module = await resolver();
- console.log(module.title);
-
const page: PageItem = {
file: filePath,
title: module.title || "",
diff --git a/src/pages/git/00-introduction.mdx b/src/pages/git/00-introduction.mdx
index 122e169..f1fb53a 100644
--- a/src/pages/git/00-introduction.mdx
+++ b/src/pages/git/00-introduction.mdx
@@ -7,3 +7,110 @@
export const title = "Gitってなに？";
# {title}
+
+Gitは、ソースコードなどを管理するための分散型バージョン管理システムです。
+
+単語だけだと意味がわかりづらいので、Gitの役割を言い表すと以下のようになります。
+
+- ソースコードの変更履歴を保存する
+- 作業の流れを分ける
+- 変更内容を比較・統合する
+- 複数人で同じソースコードを編集できるようにする
+
+## TOC
+
+## ソースコードの変更履歴を保存する (commit)
+
+Gitの大事な役割として、直前の状態からどのように変更されたかを記録するものがあります。
+これを **「コミット (commit)」** と呼びます。
+
+また、このコミット全体を管理していく仕組みが、 **バージョン管理システム** で、管理されているソースコードのことを **リポジトリ (repository)** と呼びます。
+
+```mermaid
+gitGraph
+ commit id: "履歴1"
+ commit id: "履歴2"
+ commit id: "履歴3"
+```
+
+このコミットのがあることで、そのときの状態に戻すことができます。
+作業中に行き詰ったときや誤ってコードを壊してしまったときに、以前の動く状態に戻せるので安心です。
+
+## 作業の流れを分ける (branch)
+
+例えばいま書いているものが、すでにインターネット上などで動作しているソースコードだったとします。
+いくらコミットで以前の状態に戻せるとはいえ、動いているものを直接変更するのは怖いですよね。
+
+そこでGitでは、 **「ブランチ (branch)」** という仕組みを使って、作業の流れを分けることができます。
+
+動作しているソースコードを **mainブランチ** としたとき、そこから開発用のブランチを作成し、そのブランチ上で変更を加えていきます。
+するとmainブランチのソースコードを直接変更するわけではないので、安心して開発を進めることができます。
+
+作業中のブランチを **featureブランチ** と呼ぶことが多いです。
+
+```mermaid
+gitGraph
+ commit id: "履歴1"
+ commit id: "履歴2"
+ branch feature
+ checkout feature
+ commit id: "機能追加1"
+ commit id: "機能追加2"
+```
+
+## 作業の流れを比較・統合する (merge)
+
+ブランチを分けて作っていた機能が完成したら、それを本番で動いているmainブランチにも反映させたくなりますね。
+Gitでは、 **「マージ (merge)」** という仕組みを使って、別のブランチで行った変更内容を統合することができます。
+
+```mermaid
+gitGraph
+ commit id: "履歴1"
+ commit id: "履歴2"
+ branch feature
+ checkout feature
+ commit id: "機能追加1"
+ commit id: "機能追加2"
+ checkout main
+ merge feature
+```
+
+Gitのコミットは、直前の状態からどのように変更されたかを記録しているものでした。
+その変更を同じ変更をGitが再現することができるので、別のブランチで行った変更内容を統合できるのです。
+
+## 複数人で同じソースコードを編集できるようにする (push, pull)
+
+コミットした情報は差分の情報なので、その流れを開始地点から追うことで最新の状態を再現できます。
+つまり、このコミットを他の人と共有すれば、同じソースコードを編集できるようになるのです。
+
+これを利用して、他の人と同じソースコードを編集することができるようになります。
+
+通常、ソースコードの編集は自分のパソコン上で行います。
+ここではもちろん、他の人がどのような変更を加えたのかを見ることはできないですよね。
+
+そこでGitでは、「リモートリポジトリ (remote repository)」という仕組みを使って、全員の変更内容を集約する場所を用意します。
+文字通りリモートにリポジトリを置き、そこに全員のコミットを集約するイメージです。
+
+対象的に、自分のパソコン上にあるリポジトリは **ローカルリポジトリ (local repository)** と呼びます。
+
+
+
+その場所に対して、自分のコミット情報を送信 (push) することで最新の状態を共有できます。
+また他の作業者は、そのリモートリポジトリから最新のコミット情報を取得 (pull) することで、自分のパソコン上のソースコードを最新の状態に更新できます。
+
+```mermaid
+gitGraph
+ commit id: "履歴1"
+ commit id: "履歴2"
+ branch feature
+ checkout feature
+ commit id: "機能追加1" type: HIGHLIGHT
+ branch remote/other-user/fix-feature
+ checkout remote/other-user/fix-feature
+ commit id: "他の人が不具合修正"
+ checkout feature
+ merge remote/other-user/fix-feature id: "pullすると反映"
+```
+
+誰かが自分の改修に対して、不具合修正などを加えたものをリモートリポジトリにpushしたとします。
+それを自分がpullすることで、自分のローカルリポジトリにもその変更内容が反映されます。