Visual Git

.github/workflows/publish.yaml

@@ -0,0 +1,25 @@
+name: Publish to GitHub Pages
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+jobs:
+  deploy:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install Deps
+        run: sudo apt-get update && sudo apt-get install make texlive-base texlive-fonts-extra pdf2svg imagemagick ghostscript
+      - name: Fix ImageMagick policy
+        # https://askubuntu.com/questions/1081895
+        run: sudo sed -i -e '/domain="coder" rights="none" pattern="PDF"/d' /etc/ImageMagick-?/policy.xml
+      - name: Build
+        run: make
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
+          exclude_assets: '*.aux,*.log'

.gitignore

@@ -0,0 +1 @@
+/build

Makefile

@@ -0,0 +1,78 @@
+PDFLATEX = pdflatex -halt-on-error -file-line-error
+PDF2SVG = pdf2svg
+PDF2PNG = convert -density 88
+
+FILES := \
+    basic-usage \
+    basic-usage-2 \
+    checkout-after-detached \
+    checkout-b-detached \
+    checkout-branch \
+    checkout-detached \
+    checkout-files \
+    cherry-pick \
+    commit-amend \
+    commit-detached \
+    commit-stable \
+    commit-main \
+    conventions \
+    diff \
+    merge \
+    merge-ff \
+    rebase \
+    rebase-onto \
+    reset \
+    reset-commit \
+    reset-files
+
+STATIC := \
+    goatcounter.js \
+    index.html \
+    index-de.html \
+    index-en.html \
+    index-es.html \
+    index-fr.html \
+    index-it.html \
+    index-ja.html \
+    index-ko.html \
+    index-pl.html \
+    index-pt.html \
+    index-ru.html \
+    index-sk.html \
+    index-vi.html \
+    index-zh-cn.html \
+    index-zh-tw.html \
+    translate-en.html \
+    visual-git-guide.css \
+    visual-git-guide.js
+
+STATIC_OUT = $(addprefix build/,$(STATIC))
+PDF_OUT = $(addprefix build/,$(FILES:=.pdf))
+PNG_OUT = $(PDF_OUT:.pdf=.svg.png)
+SVG_OUT = $(PDF_OUT:.pdf=.svg)
+
+all : pdf png svg static
+pdf : $(PDF_OUT)
+png : $(PNG_OUT)
+svg : $(SVG_OUT)
+static : $(STATIC_OUT)
+
+build/% : % | build
+	cp $^ $@
+
+build/%.pdf : %.tex common.tex | build
+	$(PDFLATEX) -output-directory=build $<
+
+build/%.svg : build/%.pdf | build
+	$(PDF2SVG) $^ $@
+
+build/%.svg.png : build/%.pdf | build
+	$(PDF2PNG) $^ $@
+
+build :
+	mkdir -p $@
+
+clean :
+	$(RM) -r build
+
+.PHONY : clean all pdf png svg static

README-ja.md

@@ -0,0 +1,27 @@
+図解Git
+=======
+
+これは Mark Lodato さんによる visual Git reference の日本語訳です。本人
+の許可を得て、翻訳しています。
+
+ブラウザで本文を読みたい場合は、以下のURLにアクセスして下さい。
+
+<http://www.mew.org/~kazu/proj/visual-git-guide/>
+
+オリジナルのページは、以下を参照して下さい。
+
+<http://marklodato.github.io/visual-git-guide/>
+
+また、オリジナルのソースは、以下を参照して下さい。
+
+<http://github.com/MarkLodato/visual-git-guide>
+
+お願い
+======
+
+* SVG の生成で、フォントがうまく処理されてないようです。どういう設定を
+  すればうまくいくか知っている方は教えて下さい。
+
+* SVG の図中の英語も翻訳したいのですが、うまくいきません。TeX のエキス
+  パートの方がいらっしゃいましたら、どうやればよいか調べていただけると
+  嬉しいです。

README.md

@@ -1,2 +1,67 @@
-# visual-git-guide
-A visual guide to git.
+A Visual Git Reference
+======================
+
+The goal of this website is to be a concise, visual reference for how git
+commands work.  I often draw pictures like this on a whiteboard for my
+colleagues, so I figured I would make a nice electronic version once and for
+all.
+
+Implementation
+--------------
+
+I chose to draw the images using TeX and
+[PGF/Ti*k*Z](http://www.texample.net/tikz/).  I originally tried using
+[Graphviz](http://www.graphviz.org/), but unfortunately there is no way to
+tell it how to lay out the graph exactly.  Using Ti*k*Z, I was able to create
+a domain-specific language to represent commit graphs, and I think the result
+turned out quite well.
+
+All of the common macros are stored in
+[common.tex](http://github.com/MarkLodato/visual-git-guide/blob/main/common.tex).
+Each image source includes this file.  To see an example of how to use these
+macros, look at
+[commit-main.tex](http://github.com/MarkLodato/visual-git-guide/blob/main/commit-main.tex).
+
+To generate the image files, I first create PDFs using
+[pdflatex](http://www.tug.org/applications/pdftex/), and from there I create
+SVGs and PNGs using
+[pdf2svg](http://www.cityinthesky.co.uk/pdf2svg.html) and
+[convert](http://www.imagemagick.org/script/convert.php), respectively.
+
+### Building from Source
+
+First, the following must be installed:
+
+    sudo apt-get install make texlive-base texlive-fonts-extra pdf2svg imagemagick ghostscript
+
+Then, build the images:
+
+    make
+
+The result is in the `./build` directory.
+
+### Pushing to gh-pages
+
+Done via GitHubActions (`.github/workflows/publish.yaml`).
+
+License
+-------
+
+Copyright © 2010, [Mark Lodato](mailto:[email protected]).  Japanese
+translation © 2010, [Kazu Yamamoto](http://github.com/kazu-yamamoto).
+Korean translation © 2011, [Sean](mailto:[email protected]).
+Russian translation © 2012, [Alex Sychev](mailto:[email protected]).
+French translation © 2012, [Michel Lefranc](mailto:[email protected]).
+Chinese translation © 2012, [wych](mailto:[email protected]).
+Spanish translation © 2012, [Lucas Videla](http://www.delucas.com.ar).
+Italian translation © 2012, [Daniel Londero](mailto:[email protected]).
+German translation © 2013, [Martin Funk](mailto:[email protected]), © 2017, [Mirko Westermeier](mailto:[email protected]).
+Vietnamese translation © 2013, [Hoat Le](https://github.com/hoatle).
+Slovak translation © 2013, [Ľudovít Lučenič](https://github.com/llucenic).
+Portuguese translation © 2014, [Gustavo de Oliveira](mailto:[email protected]).
+Traditional Chinese translation © 2015, [Peter Dave Hello](https://github.com/PeterDaveHello).
+Polish translation © 2017, [Emil Wypych](mailto:[email protected]).
+
+This work is licensed under a
+[Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States
+License](https://creativecommons.org/licenses/by-nc-sa/3.0/us/).

basic-usage-2.tex

@@ -0,0 +1,25 @@
+\input{common.tex}
+\geometry{papersize={25\g,9\g}}
+\begin{document}
+\begin{tikzpicture}[main]
+    \boundingbox
+    \historynode[0,2]
+    \indexnode[0,0]
+    \worknode[0,-2]
+
+    \path [line]
+        (work.north east)
+            edge node[cmd] {}
+        (index.south east)
+        (work.north east)
+            edge node[cmd] {git commit (\emph{files}|-a)}
+        (head.south east)
+        (head.south west)
+            edge node[cmd] {git checkout HEAD -- \emph{files}}
+        (work.north west)
+        (head.south west)
+            edge
+        (index.north west)
+        ;
+\end{tikzpicture}
+\end{document}

basic-usage.tex

@@ -0,0 +1,25 @@
+\input{common.tex}
+\geometry{papersize={21\g,9\g}}
+\begin{document}
+\begin{tikzpicture}[main]
+    \boundingbox
+    \historynode[0,2]
+    \indexnode[0,0]
+    \worknode[0,-2]
+
+    \path [line]
+        (work.north east)
+            edge node[cmd] {git add \emph{files}}
+        (index.south east)
+        (index.north east)
+            edge node[cmd] {git commit}
+        (head.south east)
+        (index.south west)
+            edge node[cmd] {git checkout -- \emph{files}}
+        (work.north west)
+        (head.south west)
+            edge node[cmd] {git reset -- \emph{files}}
+        (index.north west)
+        ;
+\end{tikzpicture}
+\end{document}

checkout-after-detached.tex

@@ -0,0 +1,21 @@
+\input{common.tex}
+\begin{document}
+\begin{tikzpicture}[main]
+    \boundingbox
+    \usualsetup
+    \commit 2eecb (2) -> B;
+    \branch main -> E;
+    \branch stable -> A;
+    \olddetachedHEAD -> 2;
+    \HEAD -> main;
+
+    \node [cmd] at (0,3.75) {git checkout main};
+
+    \path [line]
+        (E) edge [bend left=20] (index)
+        (E) edge [bend left=35] (work)
+        (old HEAD) edge [dashed, bend left=15] (HEAD label)
+        ;
+
+\end{tikzpicture}
+\end{document}

checkout-b-detached.tex

@@ -0,0 +1,26 @@
+\input{common.tex}
+\begin{document}
+\begin{tikzpicture}[main]
+    \boundingbox
+    \usualsetup
+    \commit 2eecb (2) -> B;
+    \branch main -> E;
+    \branch stable -> A;
+    \olddetachedHEAD -> 2;
+
+    \begin{pgfonlayer}{HEAD}
+    \node [branch, double shadow, above right=.4\g of 2, draw=none, fill=none]  
+    {};
+    \end{pgfonlayer}
+    \node [branch, above right=.4\g of 2] (new) {new};
+    \path [branch line] (new) edge (2);
+    \HEAD -> new;
+
+    \node [cmd] at (-3,3.75) {git checkout -b new};
+
+    \path [line]
+        (old HEAD) edge [dashed, bend left=15] (HEAD label)
+        ;
+
+\end{tikzpicture}
+\end{document}

checkout-branch.tex

@@ -0,0 +1,20 @@
+\input{common.tex}
+\begin{document}
+\begin{tikzpicture}[main]
+    \boundingbox
+    \usualsetup
+    \branch main -> E;
+    \branch stable -> A;
+    \oldHEAD -> main;
+    \HEAD -> stable;
+
+    \node [cmd] at (0, 3.75) {git checkout stable};
+
+    \path [line]
+        (A) edge [bend right=22] (index)
+        (A) edge [bend right=35] (work)
+        (old HEAD label) edge [dashed, bend right=10] (HEAD label)
+        ;
+
+\end{tikzpicture}
+\end{document}

checkout-detached.tex

@@ -0,0 +1,20 @@
+\input{common.tex}
+\begin{document}
+\begin{tikzpicture}[main]
+    \boundingbox
+    \usualsetup
+    \branch main -> E;
+    \branch stable -> A;
+    \oldHEAD -> main;
+    \detachedHEAD -> B;
+
+    \node [cmd] at (0, 3.75) {git checkout main\~{}3};
+
+    \path [line]
+        (B) edge [bend right=20] (index)
+        (B) edge [bend right=40] (work)
+        (old HEAD label) edge [dashed, bend right=10] (HEAD)
+        ;
+
+\end{tikzpicture}
+\end{document}

checkout-files.tex

@@ -0,0 +1,18 @@
+\input{common.tex}
+\begin{document}
+\begin{tikzpicture}[main]
+    \boundingbox
+    \usualsetup
+    \branch main -> E;
+    \branch stable -> A;
+    \HEAD -> main;
+
+    \node [cmd] at (0, 3.75) {git checkout HEAD\~{} \emph{files}};
+
+    \path [line]
+        (D) edge [bend left=20] (index)
+        (D) edge [bend left=45] (work)
+        ;
+
+\end{tikzpicture}
+\end{document}

cherry-pick.tex

@@ -0,0 +1,27 @@
+\input{common.tex}
+\begin{document}
+\begin{tikzpicture}[main]
+    \boundingbox
+    \usualsetup
+    \newcommit f142b (F) -> E;
+    \commit 169a6 (1) -> A;
+    \commit 2c33a (2) -> 1;
+    \commit 3ba22 (3) -> 2;
+    \branch topic -> 3;
+
+    \oldbranch main -> E;
+    \oldHEAD -> old main;
+    \branch main -> F;
+    \HEAD -> main;
+
+    \node [cmd] at (0, 3.75) {git cherry-pick 2c33a};
+
+    \path [line]
+        (F) edge [bend left=20] (index)
+        (F) edge [bend left=30] (work)
+        (old HEAD) edge [dashed, bend left=50] (HEAD)
+        (2) edge [loosely dashed, bend right=35] (F)
+        ;
+
+\end{tikzpicture}
+\end{document}