From eaf56b09c6588b87de8a4d2b8776493b9683efc5 Mon Sep 17 00:00:00 2001
From: Julie Kirsch <julie.kirsch@pt.lu>
Date: Mon, 28 Oct 2024 11:14:47 +0100
Subject: [PATCH] user 4 and 5

---
 book/workflows/edit_book.md | 100 ++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/book/workflows/edit_book.md b/book/workflows/edit_book.md
index b3bb50c..871b400 100644
--- a/book/workflows/edit_book.md
+++ b/book/workflows/edit_book.md
@@ -344,6 +344,56 @@ Alternatively, you can also click on `Push origin` in the top bar.
     <img src="figures/Push_GitHubDesktop2.PNG" alt="Example Image" width="650">
 </figure>
 
+````
+````{tab-item} ... using 'VS Code in your browser'
+
+Using this feature, you can open VS Code in your browser and edit the files in your repository. This can be really useful for quick fixes when you dont want to launch GitHub Dekstop or VS Code.
+
+1. Navigate to the repository you want to work in and make sure you're in the correct branch.
+2. Navigate to your main page (`code`) of your repository in GitHub.
+3. Press the dot key on your keyboard `.` This will open VS Code.
+4. In case you want to add a new file, navigate to the explorer file (the page icon) and click on the `New File` icon. This will create a new file in the folder that you are in. Give it the right extension!
+
+```{figure} ./figures/Online_VS0.PNG
+:name: New File
+:width: 50%
+:align: center
+
+New File
+```
+
+5. In case you want to make changes to an existing file, navigate to a file and make some changes.
+
+```{figure} ./figures/Online_VS1.PNG
+:name: VS Code in Browser
+:width: 70%
+:align: center
+
+VS Code in Browser
+```
+In the bottom left you can see the branch you are working in.
+
+6. Once all the changes are made it's time to commit and push. GitHub Dev requires you to use git in VS Code. You can do that in the Source Control tab in the activity bar on the left side of the window (it looks like a branching icon). Write your commit message and click on commit & push.
+7. Now let's see the result. Go back to your GitHub repo. In the top bar, go to actions.
+
+```{figure} ./figures/Online_VS2.PNG
+:name: GitHub Actions
+:width: 70%
+:align: center
+
+GitHub Actions
+```
+You will see the latest commit you just did (in this case text). After the pipeline has run, the yellow icon will turn green. Click on the commit and scroll until you see the title Deployed Branches.
+
+```{figure} ./figures/Online_VS3.PNG
+:name: Deployed Branches
+:width: 60%
+:align: center
+
+Deployed Branches
+```
+Click on the link and admire your changes:)
+
 ````
 `````
 ``````
@@ -662,6 +712,56 @@ Alternatively, you can also click on `Push origin` in the top bar.
 <figure align="center">
     <img src="figures/Push_GitHubDesktop2.PNG" alt="Example Image" width="650">
 </figure>   
+````
+````{tab-item} ... using 'VS Code in your browser'
+
+Using this feature, you can open VS Code in your browser and edit the files in your repository. This can be really useful for quick fixes when you dont want to launch GitHub Dekstop or VS Code.
+
+1. Navigate to the repository you want to work in and make sure you're in the correct branch.
+2. Navigate to your main page (`code`) of your repository in GitHub.
+3. Press the dot key on your keyboard `.` This will open VS Code.
+4. In case you want to add a new file, navigate to the explorer file (the page icon) and click on the `New File` icon. This will create a new file in the folder that you are in. Give it the right extension!
+
+```{figure} ./figures/Online_VS0.PNG
+:name: New File
+:width: 50%
+:align: center
+
+New File
+```
+
+5. In case you want to make changes to an existing file, navigate to a file and make some changes.
+
+```{figure} ./figures/Online_VS1.PNG
+:name: VS Code in Browser
+:width: 70%
+:align: center
+
+VS Code in Browser
+```
+In the bottom left you can see the branch you are working in.
+
+6. Once all the changes are made it's time to commit and push. GitHub Dev requires you to use git in VS Code. You can do that in the Source Control tab in the activity bar on the left side of the window (it looks like a branching icon). Write your commit message and click on commit & push.
+7. Now let's see the result. Go back to your GitHub repo. In the top bar, go to actions.
+
+```{figure} ./figures/Online_VS2.PNG
+:name: GitHub Actions
+:width: 70%
+:align: center
+
+GitHub Actions
+```
+You will see the latest commit you just did (in this case text). After the pipeline has run, the yellow icon will turn green. Click on the commit and scroll until you see the title Deployed Branches.
+
+```{figure} ./figures/Online_VS3.PNG
+:name: Deployed Branches
+:width: 60%
+:align: center
+
+Deployed Branches
+```
+Click on the link and admire your changes:)
+
 ````
 `````
 ``````