website/linux/upandrunningwithvi/getting_started.js.old

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu, addTable } from '/scripts/import.js';
import { local_menu } from '/scripts/webdev.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("Learning Vi"));
heading.append(addParagraph("David D. Levine - LinkedIn Learning - April 2014"));
heading.append(addParagraph("Chapter 2 - Getting Started with vi"));

main.append(addHeader("Entering and Leaving vi"));
main.append(addParagraph("We have already seen that we can invoke vi with either the vi or vim command by itself but it is more usual to invoke it with a filename.  This can be an existing file but if you specify a file that doesn't already exist, it will be created and you will see New File or just New in the bottom left corner as shown in figure 2."));
main.append(addImageWithCaption("./images/figure2.png", "Figure 2 - You will see New in the bottom left corner if you are editing a file that doesn't exist yet."));
main.append(addParagraph("Note that this does not actually create the file but any edits you make to it will be stored in the vi buffer and if you write to the file, it will then be created."));
main.append(addParagraph("There are a couple of ways to save the file.  For example, in command mode, ZZ will save the file and quit.  You can also save the file with the colon command :w in command mode.  If you are editing an existing file, the :w command will write to that file.  If you haven't or if you want to write the current file to a new file, you can add the name of the file you want to save to after the w.  Note that if you try to write to an existing file that is not the file you are currently editing, you will see a warning that the file already exists and you can add ! after the w to force vim to write to that file.  This is shown in figure 3."));
main.append(addImageWithCaption("./images/figure3.png", "Figure 3 - The warning you see if you try to write a file over an existing file (that is not the file you are editing."));
main.append(addParagraph("Writing a file with :w does not quit and you can do that with another colon command. :q.  You might also get a warning if you use the command without writing the file (assuming you have made changes to it) and again, you can override that with ! so :q! will close the file without saving any changes."));
main.append(addParagraph("The most common method you will see to save a file and exit is to combine the w and q so :wq will write the file and then quit."));
main.append(addParagraph("One thing to be wary of, you might think that a command such as"));
main.append(addSyntax(":w newfile.txt q"));
main.append(addParagraph("would write the file to newfile.txt and then quit but it doesn't.  What that actually does is write to a file called 'newfile.txt q' (note, I am adding the single quotes just to make it clear what the file name is, the single quotes are not part of that filename).  Once again, if the filename (including the q at the end) is a file that already exists and is not the name of the file you are currently editing, you will see that warning and can override it by adding the ! after the w."));
main.append(addParagraph("Let's just breifly sum up these methods to save and/or quit from the file you are editing."));
main.append(addSubHeader("quit only"));
main.append(addInset(":q"));
main.append(addParagraph("This will quit the file only and will only work if no changes have been made to the file.  Note that this is essentially a toggle so if you make any change, the file is immediately marked as edited and so you won't be able to exit with only :q and that applies even if you undo those changes.  The main thing is that it doesn't matter whether the file is different or not, the deciding factor for the shell to think the file has been edited is just that something was done to the file after opening.  It doesn't track the changes or check whether the file you want to save is different from the one you opened."));
main.append(addInset(":q!"));
main.append(addParagraph("Similar to the above, this will also quit without saving, but in this case, it doesn't matter if the file has been edited.  Aslo, bear in mind that it will not warn you if there are unsaved changes so it's not the best option if you are not sure whether changes have been made.  As a general rule, I would say that you should never use this option unless you know that there are changes that you don't want to save."));
main.append(addParagraph("A good example of this is where you hace made a mistake when editing a file or if you have accidentally written to a file that you didn't intent to.  In those situations, you can make sure nothing is saved when you quit by adding the !"));
main.append(addSubHeader("write only"));
main.append(addSyntax(":w"));
main.append(addParagraph("This will write to the existing file, the one you opened with vi.  If you opened vi without providing a filename, you will get a warning that you will need to provide a filename."));
main.append(addSyntax(":w filename.txt"));
main.append(addParagraph("That will write the contents of the vi buffer (essentially that means the file you are editing to) a new file called filename.txt assuming there isn't already a file with that name."));
main.append(addSyntax(":w! filename.txt"));
main.append(addParagraph("This will have the same effect but will ignore the warning if the file you are writing to already exists and will simply overwrite that file."));
main.append(addSubHeader("write and close"));
main.append(addSyntax(":wq"));
main.append(addParagraph("This is pretty much the standard method for writing to a file and closing it."));
main.append(addHeader("Understanding vi's Modes"));
main.append(addSubHeader("Command Mode"));
main.append(addParagraph("When you start vi, it starts in command mode.  Whatever you type whilst in command mode is interpreted as a command.  It is in command mode that you type commands like :w to write the file or dd to delete a line."));
main.append(addSubHeader("Insert Mode"));
main.append(addParagraph("When you invoke insert mode, characters you type are interpreted as a text.  You would invoke insert mode in order to edit the file.  You can type any of the characters i, a, o or c to go into insert mode and they all behave in slightly different ways."));
main.append(addSubHeader("i or I"));
main.append(addParagraph("If you enter insert mode by pressing i, you can then start inputting text from the current cursor position."));
main.append(addSubHeader("a or A"));
main.append(addParagraph("If you type an A, this starts inputting text from the end of the current line.  A lower case a will invoke insert mode but will start editing text after the current character."));
main.append(addSubHeader("o or O"));
main.append(addParagraph("Either o or O will insert a new line and allow you to start editing the text from there.  The difference is that o inserts the new line after the current line whereas O inserts the new line before the current line."));
main.append(addSubHeader("c or C"));
main.append(addParagraph("Either c or C will also starting editing om a new line, but will delete the current line and start editing from there.")):
main.append(addParagraph("While you are in insert mode, you can return to command mode by pressing escape."));
main.append(addSubHeader("Ex Mode"));
main.append(addParagraph("Ex mode is sometimes called prompt mode and it is invoked in command mode by pressing one of :, / or ? and is followed by a command or a parameter.  We have already seen some examples of this, for instance with the command to write a file which was :w.  Essentially Ex mode allows you to specify a command with : and either / or ? allows you to perform a search.  You would use the / command to search forwards in the file so it will find the first instance of your search term after the current cursor position.  The search will wrap around so if there is only one instance of the search term and it happens to occur before the current cursor position, the search will still find it!"));
main.append(addParagraph("With the ? you can search backwards and the same applies in that the search will wrap around if the search term isn't found befure the current cursor position."));
main.append(("If the search term is found, you can press n for next to find the next instance (if there is another instance) and it searches in the same direction so if you searched using the / character, n will find the next instance later in the file and if you searched with ?, it will find he next instance earlier in the file and again, this will wrap around."));
main.append(addHeader("Using vi in a Terminal Emulator Window"));





addSidebar("linux");
sidebar.append(addParagraph("A link to <a href='https://www.linkedin.com/learning/learning-vi'>this course</a>."));