Git-related parts of the web interface (#78)

Co-authored-by: Ivan Calandra <12525997+ivan-paleo@users.noreply.github.com>
Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/78

content/git/clone-commit-via-http.md

@@ -3,28 +3,39 @@ eleventyNavigation:
   key: CloneCommitViaHTTP
   title: Clone & Commit via HTTP
   parent: Git
+  order: 20
 ---
 
-The user in this examples is `JohnDoe` and it's repository is `foobar`. The repository was created via the Codeberg.org website including a `README.md` file.
+Clone, edit, commit, push and pull can be performed using Git directly from the command line, by using a Git client, or via the web interface. The first option is shown below and in the section [Clone & Commit via SSH](/content/git/clone-commit-via-ssh). The last option is detailed in the section [Clone & Commit via Web](/content/git/clone-commit-via-web).
+
+The user in this examples is `knut` the polar bear and it's repository is `foobar`. The repository was created via the Codeberg website including a `README.md` file.
+
+## Clone
+*Cloning* refers to the process of creating an identical copy of a repository to the local machine.  
+Clone with the Git command `clone` followed by the repo URL.
 
 ```bash
-~$ git clone https://codeberg.org/JohnDoe/foobar.git
+~$ git clone https://codeberg.org/knut/foobar.git
 Cloning into 'foobar'...
 remote: Enumerating objects: 3, done.
 remote: Counting objects: 100% (3/3), done.
-remote: Compressing objects: 100% (2/2), done.
 remote: Total 3 (delta 0), reused 0 (delta 0)
-Unpacking objects: 100% (3/3), done.
+Unpacking objects: 100% (3/3), 214 bytes | 1024 bytes/s, done.
 ```
 
-Modify an existing file
+## Edit
+Modify an existing file:
 
 ```bash
 ~$ cd foobar
 ~/foobar$ vim README.md
 ```
 
-Commit changes to local repository.
+## Commit
+A *commit* is a record of the changes to the repository. This is like a snapshot of your edits.  
+A commit requires a commit message. For the example below, the message is "test". Keep in mind that "test" is not a very informative message, though. In the real world, make sure your commit message is informative, for you, your collaborators and anyone who might be interested in your work. Some advice on how to write a good commit message can be found on countless websites and blogs!
+
+Command lines:
 
 ```bash
 ~/foobar$ git commit -am 'test'
@@ -32,18 +43,23 @@ Commit changes to local repository.
  1 file changed, 2 insertions(+), 1 deletion(-)
 ```
 
-Synchronize ("push") the modifications from the local repository to the remote one on Codeberg.
+## Push
+The last step is to synchronize (*push*) the modifications (commit) from the local repository to the remote one on Codeberg.  
 
 ```bash
-~/foobar$ git push https://codeberg.org/JohnDoe/foobar.git
+~/foobar$ git push https://codeberg.org/knut/foobar.git
-Username for 'https://codeberg.org': JohnDoe
+Username for 'https://codeberg.org': knut
-Password for 'https://JohnDoe@codeberg.org': 
+Password for 'https://knut@codeberg.org': 
 Counting objects: 3, done.
 Delta compression using up to 4 threads.
 Compressing objects: 100% (2/2), done.
 Writing objects: 100% (3/3), 266 bytes | 0 bytes/s, done.
 Total 3 (delta 1), reused 0 (delta 0)
-To https://codeberg.org/JohnDoe/foobar.git
+To https://codeberg.org/knut/foobar.git
    662e04e..10074d7  master -> master
 ```
 
+## Pull
+*Pulling* synchronizes the modifications (commit) from the remote repository on Codeberg to the local one.  
+Pulling is important when you work on different computers to make sure that all computers are on the same stage. It is even more important when you have collaborators on a project; they might change the files too, so you need to pull these modifications before you start working.  
+Because of that, it is recommended to pull before pushing.

content/git/clone-commit-via-ssh.md

@@ -3,6 +3,7 @@ eleventyNavigation:
   key: CloneCommitViaSSH
   title: Clone & Commit via SSH
   parent: Git
+  order: 40
 ---
 
 > **Warning** Please make sure that before connecting to Codeberg via SSH,

content/git/clone-commit-via-web.md

@@ -0,0 +1,65 @@
+---
+eleventyNavigation:
+  key: CloneCommitViaWeb
+  title: Clone & Commit via Web
+  parent: Git
+  order: 30
+---
+
+Clone, edit, commit, push and pull can be performed using Git directly from the command line, by using a Git client, or via the web interface. The first option is shown in the sections [Clone & Commit via HTTP](/git/clone-commit-via-http) and [Clone & Commit via SSH](/git/clone-commit-via-ssh). The last option is detailed below.
+
+The user in this examples is `knut` the polar bear and it's repository is `foobar`. The repository was created via the Codeberg website including a `README.md` file.
+
+## Clone
+*Cloning* refers to the process of creating an identical copy of a repository to the local machine.  
+
+Copy the repo URL from the Codeberg website to your Git client using the `Copy` icon.
+
+> If you want to download a copy of a specific state of the repository, without its version history, click on the `Download Repository` icon to download either as ZIP or TAR.GZ.
+
+<picture>
+  <source srcset="/assets/images/git/clone-commit-via-web/clone.webp" type="image/webp">
+  <img src="/assets/images/git/clone-commit-via-web/clone.png" alt="clone">
+</picture>
+
+## Edit
+Click on the file you want to edit from the list of files in the repo. Let's try it here with the `README.md` file.  
+The pencil tool (`Edit File`) will open a new window.
+
+<picture>
+  <source srcset="/assets/images/git/clone-commit-via-web/edit1.webp" type="image/webp">
+  <img src="/assets/images/git/clone-commit-via-web/edit1.png" alt="edit1">
+</picture>
+
+There you can edit the file as you wish.  
+The `Preview` tab shows you how the file will look like, and the `Preview Changes` will highlight the changes to the file (red for deletions and green for additions).
+
+<picture>
+  <source srcset="/assets/images/git/clone-commit-via-web/edit2.webp" type="image/webp">
+  <img src="/assets/images/git/clone-commit-via-web/edit2.png" alt="edit2">
+</picture>
+
+## Commit
+A *commit* is a record of the changes to the repository. This is like a snapshot of your edits.  
+
+The commit section is at the bottom of the edit window: 
+
+<picture>
+  <source srcset="/assets/images/git/clone-commit-via-web/commit.webp" type="image/webp">
+  <img src="/assets/images/git/clone-commit-via-web/commit.png" alt="commit">
+</picture>
+
+A commit requires a commit message. A default message is added, but do not hesitate to edit it. Make sure your commit message is informative, for you, your collaborators and anyone who might be interested in your work. Some advice on how to write a good commit message can be found on countless websites and blogs!   
+
+If you intend to start a pull request with this commit, you should choose the option `Create a new branch for this commit and start a pull request`. It will make it easier to work on the different commits without mixing them if they are in different forks. Check the documentation on [Pull requests and Git flow](/collaborating/pull-requests-and-git-flow) for more details.  
+
+Submit your changes by clicking on `Commit Changes`.
+
+## Push and pull
+Synchronizing the modifications (commit) from the local repository to the remote one on Codeberg is called *pushing*.  
+
+*Pulling* synchronizes the modifications (commit) from the remote repository on Codeberg to the local one.  
+Pulling is important when you work on different computers to make sure that all computers are on the same stage. It is even more important when you have collaborators on a project; they might change the files too, so you need to pull these modifications before you start working.  
+Because of that, it is recommended to pull before pushing.
+
+Pushing and pulling make sense only if you work locally. This is why there is no "push" or "pull" button on the Codeberg web interface; committing there already pushes to the remote repository on Codeberg, and there is therefore nothing to pull (except pull requests of course).

content/git/index.md

@@ -3,7 +3,7 @@ eleventyNavigation:
   key: Git
   title: Working with Git Repositories
   icon: code-branch
-  order: 20
+  order: 10
 ---
 
 On these pages, you will learn how to use the Git version control system

content/git/squash-commits.md

@@ -3,6 +3,7 @@ eleventyNavigation:
   key: SquashCommits
   title: Merge multiple commits into one
   parent: Git
+  order: 50
 ---
 
 Sometimes you will merge multiple commits into one. Maybe the commits are "dirty" full with not working code or embarrasing commit messages. This solution is only one of mutliple possible solutions. See this [stackoverflow question](https://stackoverflow.com/q/2563632/4865723) for more details and variants.