import { addBanner, addArticle, addTitle, addHeader, addParagraph, addSubHeader } from '/scripts/article.js';
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js';
import { addImageWithCaption, addButtonGroup } from '/scripts/visuals.js';
import { addSidebar} from '/scripts/sidebar.js';
import { addSyntax } from '/scripts/code.js';
import { menu } from '/scripts/web_dev_buttons.js';
import { global_menu } from '/scripts/grid_layout1.js';
import { local_menu } from '/scripts/linux.js';
const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");
heading.append(addTitle("Learn Bash Scripting"));
heading.append(addParagraph("Scott Simpson - LinkedIn Learning - September 2022"));
heading.append(addParagraph("INTRODUCTION"));
main.append(addHeader("Introducing GitHub Codespaces"));
main.append(addParagraph("The course uses GitHub Codespaces to allow bash scripts to be written and executed, but any Linux machine should be perfectly adequate to use. However, it seems interesting enough to give at least a brief description of how this works. We will start by going to Codespaces and signing in. If you don't already have an account, you can sign up for one for free."));
main.append(addParagraph("There are some advantages to using CodeSspaces. It provides a version of Visual Studio Code you can access through a browser. Behind the scenes, this is actually running on a Linux container so it's not too different from using a Linux Virtual Machine. Alternatives would of course include a Linux VM or an actual Linux machine and you could also use a shell running on Windows using the Windows Subsystem for Linux."));
main.append(addParagraph("My preferred option would be to use a Raspberry Pi since I have a couple of these running on my local network, one of which is the web server hosting this site."));
main.append(addParagraph("Using Codespaces with the course is fairly straightforward. First, you should click on the Open link next to GitHub Codespaces on the course overview page. This will take you to the page shown in figure 1 (note that if you are not logged in to GitHub, you may be asked to do that)."));
main.append(addImageWithCaption("./images/codespaces.png", "Figure 1 - the Codespaces page for the Learn Bash Scripting course."));
main.append(addParagraph("From there, click on the button labelled Create codespace on main and this will open up the online version of Visual Studio Code as shown in figure 2."));
main.append(addImageWithCaption("./images/codespaces1.png", "Figure 2 - Visual Studio Code on Codespaces."));
main.append(addParagraph("This gives you access to everything you need to start experimenting with Bash scripting in general but also, of course, to run the examples provided in the Exercise Files which are accessible from the pane on the left side of the screen. To demonstrate this. I created a folder called scripts and inside that, a very short shell script that simply echoes the current working directory. This is shown in figure 3 and as you can see, it is simply outputting the environment variable that holds the name of the current directory - $pwd."));
main.append(addImageWithCaption("./images/codespaces2.png", "Figure 3 - A demonstration script in Codespaces."));
main.append(addParagraph("This was all done in the terminal window but notice that the scripts folder and the file b_script.sh are now showing in the VS Code file explorer pane to the left. In addition, the file itself is being displayed in VS Code, but it was edited in the terminal and we can also view the file there as we would in any terminal using, for example, vim or as is the case in figure 3, the cat command."));
main.append(addParagraph("A couple of other interesting points here, although this is VS Code runnung in a browser, it is still VS Code (or a version of it) and it is not too different to running the Windows or Mac version of it, including extensions. You may find that when you sign into Codespaces for a particular course, some extensions that are either relevant to that course or that the course instruction considers useful might be pre-installed for you. Also, because this is running on a Linux VM, you should find that the machine state is automatically saved if you close the browser window although when I experimented wuith this, this didn't seem to be the case. You can, of course, save the file as you would in any version of VS Code."));
main.append(addParagraph("Since Codespaces is hosted by GitHub, there are also several options that you might associate with GitHub such as branches (with each branch representing the code for a different course video and including the code versions for the start and end of each exercise, if there are any), the ability to fork the code, make pull requests, report issues and so on. If you make any changes to any of the code in the reposiort, the file will show an M next to the filename and you can, if you like, commit that change. If you don't and you then try to open a new branch, you will get a message letting you know that there are changes that need to be committed first and you can decide whether to go ahead and open the new branch or you can cancel."));
main.append(addParagraph("That being said, in most cases, if not all, you won't be able to push changes to the repository unless you have created your own fork."));
main.append(addParagraph("Creating a new fork is a straightforward process and in figure 4, you can see that I have done that."));
main.append(addImageWithCaption("./images/fork.png", "Figure 4 - A fork of the course code."));
main.append(addParagraph("Notice that the URL has my name in it now. This means I can just log into GitHub with my own account and see the code for this course there and I can download it, share it and so on. I probably won't do this since I tend to use BitBucket for version control, but I could commit any changes I make to the code to that repository. I could either do that through the Codespaces interface or through a terminal."));
main.append(addParagraph("You can also edit the code directly in GitHub and commit the changes from there as shown in figure 5."));
main.append(addImageWithCaption("./images/fork1.png", "Figure 5 - You can commit changes on your own fork."));
main.append(addParagraph("The image in figure 6 shows my fork of the code for this course in GitHub. Note, this is in GitHub but it is not GitHub Codespaces. I have selected the Code menu."));
main.append(addImageWithCaption("./images/fork2.png", "Figure 6 - Open your own Codespaces page."));
main.append(addParagraph("Notice that there are two tabs, Local and Codespaces and I have selected the Codespaces tab. From here, you can click the + sign to open your fork of the code in Codespaces."));
main.append(addParagraph("If you subsequntly log in to GitHub, you can click on Codespaces and this will show you a list of Codespaces you own and this includes Codespaces you created using the original fork as shown in figure 7."));
main.append(addImageWithCaption("./images/fork3.png", "Figure 7 - A list of Codespaces owned by me."));
main.append(addParagraph("There is a key on the left hand side that shows that the Codespaces created on the original fork are shown with a LinkedIn icon whereas those created on my own fork have a different icon. I have been experimenting a bit with the original fork which is why I have 4 copies of it. From here, I can open or delete the Codespaces. Openin it can be a little bit tricky. If you look at the Codespace created on my own fork in figure 7, you might notice that there is a link to the code, which looks like PhilipOsztromok/learning-bash-scripting-3212393 and there is also a weird looking name which GitHub kindly created for me. If you click on the link (either on the Codespaces list or here), this will open up the code page in GitHub. To open the Codespaces, you can click on the name, which in this case is literate space rotary-phone and you might notice that when it does open, that weird looking name is part of the URL so this is GitHub's whimsical way of generating a URL for your Codespace."));
main.append(addParagraph("When you do open up the Codespace, you muight see that the terminal is not visible by default so you may need to click on the menu in the tion right corner (those three vertical bars) and then select Terminal and then New Terminal."));
main.append(addParagraph("You can commit and push changes just as you would with any repo. This is shown in figure 8."));
main.append(addImageWithCaption("./images/fork4.png", "Figure 8 - Checking on the git status using the terminal."));
main.append(addParagraph("Notice that figure 8 shows that a change has been made (as you can see from the M next to the filename) and I executed the git status command in the terminal. You can also add the changes in the terminal using"));
main.append(addSyntax("git add -A"));
main.append(addParagraph("commit then with"));
main.append(addSyntax("git commit =m \"commit message\""));
main.append(addParagraph("and finally push the changes over to Git with"));
main.append(addSyntax("git push origin main"));
main.append(addParagraph("Note that in this case, the name of the branch is main but you may have to edit this if you have a different branch name. Note that if you are not sure of this, the git status command will confirm the "));
main.append(addParagraph("In Codespaces, however, there is an easier way to do this which avoid you having to even know the branch name. You can click the Source Control icon in the left hand pane, it should have a number next to it if there are changes to be committed and you can see this in figure 9."));
main.append(addImageWithCaption("./images/fork5.png", "Figure 9 - Source Control in Codespaces."));
main.append(addParagraph("You then insert a Commit message in the box above the commit button in Codespaces as shown in figure 10"));
main.append(addImageWithCaption("./images/fork6.png", "Figure 10 - The commit message in Codespaces."));
main.append(addParagraph("and click Commit and then Sync Changes. You may also have to answer a question about whether you want to stage the changes. When you are committing the changes, you may also be asked if you want to periodically run Git Fetch and if you click yes, you will automatically sync with the forked repo."));
main.append(addParagraph("So, if you want to push changes, you will need to create your own fork of the code. If you try to push changes to the original fork, you will be prompted to do that anyway, so it's not critical if you forget to do that."));
main.append(addParagraph("Another point to bear in mind is that you may find that the course instructor provides additional info on Codespaces specific to the course, so if you are using Codespaces, you probably want to watch out for that. You may also see, as is the case in this course - see the next section below, that the course also includes an additional video covering the use of Codespaces with that course."));
main.append(addHeader("Using Bash in GitHub"));
main.append(addParagraph("We have already seen that with Codespaces, you can choose to edit your Bash scripts either in the code window in VS Code or in the terminal. You will probably find that it is easier to do it in the terminal so you may want to adjust the relative sizes so that more space is taken by the terminal. I am assuming that you can't close the code windows but you can adjust the terminal size so that the code window is hidden behind it."));
main.append(addParagraph("It might be worth remembering that the user account you are using in the Codespaces terminal has account priviliges so you can install additional software on the linux VM if you need to. If you are curious, you can also run the whoami command to see that the username is for that account - it's codespace."));
main.append(addParagraph("If you are used to working in a Bash shell, you might be surprised to know that when you open the terminal, it doesn't open in the users home directory and one of the consequences of that is if you navigate to another directory, you can't get back to the directory you were most likely working in with cd since this will take you to the home directory for codespace. For the sake of clarity, I will refer to the directory you are in when opening the terminal as the working directory. If you are worried about this, there are a couple of ways you can get back to that working directory, the simplest of which is to just open a new terminal."));
main.append(addParagraph("Another method, which I use quite often if I need to be able to easily navigate to a specific directory, is to create an alias as shown in figure 11."));
main.append(addImageWithCaption("./images/alias.png", "Figure 11 - the .bashrc command showing the alias I created to get back to the working directory."));
main.append(addParagraph("In case you are not too familiar with the terminal, there are a couple of places where you can put bash aliases, one is the .bashrc file and this is the file shown in figure 11. The alias I created is cdlb (short for cd to the learning bash directory!) but notice that there is also a conditional statement lower down which mentions the .bash_aliases file and it is usually considered best practice to put any user-defined aliases there. I would normally do that and may in fact move the alias to that file, but for now, I just want to demonstrate this method."));
main.append(addParagraph("The alias won't take effect until you open a new shell. In this instance, the best way to do that is to open a new terminal but there is a shortcut you can use if you know the users password. We don't know what the password for codespace is but if we did, we could su to the user using with a hyphen so"));
main.append(addSyntax("su - codespace"));
main.append(addParagraph("This doesn't really have much effect since you are switching from the account for codespace to the account for codespace but adding the hyphen means a new shell is created in the terminal and so that's enough to cause the new alias to take effect."));
main.append(addParagraph("Figure 12 shows this in action!"));
main.append(addImageWithCaption("./images/alias1.png", "Figure 12 - using our alias to get back to the working directory."));
main.append(addParagraph("As you can see, I have executed the pwd command to show we are in the working directory and then the cd command. This takes us to the home directory for the current user and running the pwd command again shows us that this is not the same as the working directory. I have then used the alias - not executed the alias, this executes the cd command that the alias references - and now pwd shows that we are back in the working directory."));
main.append(addParagraph("In the list of files shown in the files panel in Codespaces, which you can see in figure 8 for example, there is a file called Snippets.md. This is just a list of commands to be used in this course so you might find them useful. You can pin this to the editor pance so that it is always easily accessible, you do that by right clicking its tab in the code editor and selecting pin and this has the effect of keeping that file permanently open. If you are planning on using something other than Codespaces such as a local machine you can ssh to - as I plan to do - you can right-click on it in the File Explorer window and select Download and then you can copy it over to the machine you intend to use."));
addSidebar("linux");