add screenshots and more content in "sharing"

content/sharing.md

@@ -1,7 +1,8 @@
 # How to turn your project to a Git repo and share it
 
 :::{objectives}
-- Turn our own coding project (small or large) into a Git repository.
+- Turn our own coding project (small or large, finished or unfinished) into a
+  Git repository.
 - Be able to share a repository on the web to have a backup or so that others
   can reuse and collaborate.
 :::
@@ -17,87 +18,191 @@
 
 :::::{exercise} Exercise: Turn your project to a Git repo and share it (25 min)
 
-1. Create a new directory with one or few files in it. This represents our
-   own project. It is not yet a Git repository.
+1. Create a new directory called **myproject** with one or few files in it.
+   This represents our own project. It is not yet a Git repository.
 2. Turn this directory into a Git repository.
 3. Share this repository on GitHub.
 
 We offer **three different flows** of how to do this exercise.
 ::::{tabs}
 
 :::{group-tab} Only using GitHub
+### Create an repository on GitHub
+
+First log into GitHub, then follow the screenshots and descriptions below.
+```{figure} img/sharing/new-repository.png
+:alt: Screenshot on GitHub before a new repository form is opened
+:width: 60%
+:class: with-border
+
+Click on the "plus" symbol on top right, then on "New repository".
+```
+
+Then:
+```{figure} img/sharing/create-repository-with-readme.png
+:alt: Screenshot on GitHub just before a new repository is created
+:width: 100%
+:class: with-border
+
+Choose a repository name, add a short description, and in this case **make sure to check** "Add a
+README file". Finally "Create repository".
+```
+
+
+### Upload your files
+
+Now that the repository is created, you can upload your files:
+```{figure} img/sharing/upload-files.png
+:alt: Screenshot on GitHub just before uploading files
+:width: 100%
+:class: with-border
+
+Click on the "+" symbol and then on "Upload files".
+```
 :::
 
 :::{group-tab} VS Code
-To do:
-- https://github.com/login/oauth/authorize
-- add screenshot about authorizing
+In VS Code it only takes few clicks.
+
+First, open the folder in VS Code. Then click on the source control icon:
+```{figure} img/sharing/vscode-start.png
+:alt: Screenshot of VS Code before clicking on the source control icon
+:width: 100%
+:class: with-border
+
+Open the folder in VS Code. Then click on the source control icon.
+```
+
+```{figure} img/sharing/vscode-publish-to-github1.png
+:alt: Screenshot of VS Code before publishing to GitHub
+:width: 100%
+:class: with-border
+
+Choose "Publish to GitHub".
+```
+
+```{figure} img/sharing/vscode-publish-to-github2.png
+:alt: Screenshot of VS Code before publishing to GitHub
+:width: 100%
+:class: with-border
+
+In my case I chose to "Publish to GitHub public repository".
+```
+
+```{figure} img/sharing/vscode-authorize.png
+:alt: Screenshot of VS Code asking for authorization
+:width: 50%
+:class: with-border
+
+First time you do this you might need to authorize VS Code to access your GitHub account.
+```
+
+```{figure} img/sharing/vscode-publish-to-github3.png
+:alt: Screenshot of VS Code after publishing to GitHub
+:width: 100%
+:class: with-border
+
+After it is published, click on "Open on GitHub".
+```
 :::
 
 :::{group-tab} Command line
+### Make sure your Git is configured
+
+First, make sure your Git is configured. If you haven't done this before, you
+need to set your name and email address. This is used for the commits you make.
+
+```console
+$ git config --global user.name "Your Name"
+$ git config --global user.email [email protected]
+```
+
+
 ### Put your project under version control
 
-...
+My example project here consists of two files. Replace this with your own
+example files:
+```console
+$ ls -l
+
+.rw------- 19k user  7 Mar 17:36 LICENSE
+.rw-------  21 user  7 Mar 17:36 myscript.py
+```
+
+I will first initialize a Git repository in this directory:
+```console
+$ git init -b main
+```
+
+For Git versions older than 2.28, use this instead (and your default branch will then be called `master`):
+```console
+$ git init
+```
+
+Now add and commit two two files to the Git repository:
+```console
+$ git add LICENSE myscript.py
+$ git commit -m "putting my project under version control"
+```
+
+If you want to add all files without listing them one by one, you can use `git
+add .` instead of `git add LICENSE myscript.py`.
+
+Now you have a Git repository with one commit. Verify this with `git log`.
+But it's still only on your computer. Let's put it on GitHub next.
 
 
 ### Create an <u>empty</u> repository on GitHub
 
 First log into GitHub, then follow the screenshots and descriptions below.
+```{figure} img/sharing/new-repository.png
+:alt: Screenshot on GitHub before a new repository form is opened
+:width: 60%
+:class: with-border
 
-```{figure} img/basics/new-repo-plus.png
-   :alt: Screenshot on GitHub before a new repository form is opened
-   :width: 100%
-   :class: with-border
-
-   Click on the "plus" symbol on top right, then on "New repository".
+Click on the "plus" symbol on top right, then on "New repository".
 ```
 
-Another way to create a new repository is to visit
-<https://github.com/new> directly.
-
-```{figure} img/remotes/new-bare-repo-form.png
-   :alt: Screenshot on GitHub just before a new repository is created
-   :width: 100%
-   :class: with-border
+Then:
+```{figure} img/sharing/create-repository.png
+:alt: Screenshot on GitHub just before a new repository is created
+:width: 100%
+:class: with-border
 
-   Choose a repository name, add a short description, but please **do not check** "Add a
-   README file"**. For "Add .gitignore" and "Choose a license" also leave as "None". Finally "Create repository".
+Choose a repository name, add a short description, but please **do not check** "Add a
+README file". For "Add .gitignore" and "Choose a license" also leave as "None". Finally "Create repository".
 ```
 
 Once you click the green "Create repository", you will see a page similar to:
-```{figure} img/remotes/bare-repo.png
-   :alt: Screenshot on GitHub after a bare repository was created
-   :width: 100%
-   :class: with-border
+```{figure} img/sharing/bare-repository.png
+:alt: Screenshot on GitHub after a bare repository was created
+:width: 100%
+:class: with-border
 ```
 
 What this means is that we have now an empty project with either an HTTPS or an
 SSH address: click on the HTTPS and SSH buttons to see what happens.
 
 
-### Push an existing repository from laptop to GitHub
-
+### Push an existing repository from your computer to GitHub
 
 
-We now want to follow the "**... or push an existing repository from the command line**:
+We now want to follow the "**... or push an existing repository from the command line**":
 
-1. Now go to your guacamole repository on your computer.
-2. Check that you are in the right place with `git status`.
-3. Copy paste the three lines to the terminal and execute those, in my case (**you
-  need to replace the "USER" part and possibly also the repository name**):
+1. In your terminal make sure you are still in your myproject directory.
+2. Copy paste the three lines to the terminal and execute those, in my case (**you
+   need to replace the "USER" part and possibly also the repository name**):
 
 
 `````{tabs}
   ````{group-tab} SSH
-  See above for if SSH is the right option for you.
   ```console
-  $ git remote add origin [email protected]:USER/recipe.git
+  $ git remote add origin [email protected]:USER/myproject.git
   ```
   ````
   ````{group-tab} HTTPS
-  See above for if HTTPS is the right option for you.
   ```console
-  $ git remote add origin https://github.com/USER/recipe.git
+  $ git remote add origin https://github.com/USER/myproject.git
   ```
   ````
 `````
@@ -116,13 +221,15 @@ The meaning of the above lines:
 You should now see:
 
 ```text
-Enumerating objects: 3, done.
-Counting objects: 100% (3/3), done.
-Writing objects: 100% (3/3), 221 bytes | 221.00 KiB/s, done.
-Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
-To github.com:USER/recipe.git
+Enumerating objects: 4, done.
+Counting objects: 100% (4/4), done.
+Delta compression using up to 12 threads
+Compressing objects: 100% (3/3), done.
+Writing objects: 100% (4/4), 6.08 KiB | 6.08 MiB/s, done.
+Total 4 (delta 0), reused 0 (delta 0), pack-reused 0
+To github.com:USER/myproject.git
  * [new branch]      main -> main
-Branch 'main' set up to track remote branch 'main' from 'origin'.
+branch 'main' set up to track 'origin/main'.
 ```
 
 Reload your GitHub project website and your commits should now be
@@ -161,7 +268,7 @@ We will learn how to work with remote repositories in detail in the
 [collaborative distributed version
 control](https://coderefinery.github.io/git-collaborative/) lesson.  To store
 your git data on another server, you use **remotes**.  A remote is a repository
-on its own, with its own branches We can **push** changes to the remote and
+on its own, with its own branches. We can **push** changes to the remote and
 **pull** from the remote.
 
 You might use remotes to: