User guide and Documentation (#11)

Add user guide

README.md

@@ -1 +1,80 @@
-# golinks
+# Go Links
+A browser extension for creating personal URL shortcuts. Available on Chrome and Firefox.
+
+## Installation
+
+### Chrome
+
+https://chrome.google.com/webstore/detail/go-links/gojgbkejhelijlkgpmlbbkklljgmfljj?h1=en
+
+### Firefox
+
+https://addons.mozilla.org/en-US/firefox/addon/go-links/
+
+## User Guide to Go Links
+
+<details>
+    <summary>How to create a golink?</summary>
+
+1. Go to the website you want to create the shortcut for.
+2. Open Go Links.
+3. Expand "Add new shortcut"
+4. Fill in a name for your shortcut.
+5. Click "Save" button.
+
+You will then be able to access the same url using that shortcut. See `How to access a website`for instructions.
+
+![Add shortcut](demo/add_shortcut.gif)
+</details>
+
+<details>
+    <summary>How to access a website?</summary>
+
+#### Access via shortcut
+1. Type `go/<your-shortcut>` in current tab or in a new tab.
+2. You will be redirected to the website linked to that shortcut.
+
+![Access via shortcut](demo/via_shortcut.gif)
+
+#### Access via extension popup
+1. Open Go Links.
+2. Click on the shortcut entry.
+3. The website will be opened in a new tab.
+
+![Access via popup](demo/via_popup.gif)
+</details>
+
+<details>
+    <summary>How to search for a golink?</summary>
+
+1. Open Go Links.
+2. Click on the search box.
+3. Type in your search query.
+4. Your search results will be filtered in ascending order.
+
+![Search example](demo/search.gif)
+</details>
+
+<details>
+    <summary>How to delete a golink?</summary>
+
+1. Open Go Links.
+2. Move your mouse on the entry that you want to delete. The trash icon will appear on hover.
+3. Click on the trash icon.
+4. Confirm your selection.
+
+![Delete shortcut](demo/delete_shortcut.gif)
+
+</details>
+
+<details>
+    <summary>How to overwrite a golink?</summary>
+
+1. Go to the new website for which you want to use the shortcut.
+2. Open Go Links.
+3. Expand "Add new shortcut".
+4. Type in the shortcut you want to overwrite.
+5. Click "Overwrite" button.
+
+![Delete shortcut](demo/overwrite.gif)
+</details>

popup/popup.css

@@ -137,8 +137,3 @@ body {
     background-color: #3bad74;
     color: white;
 }
-
-/* Help section */
-#section-help {
-    display: none;
-}

popup/popup.html

@@ -23,73 +23,61 @@
             <button id="btn-help" class="btn-setting">
                 <i class="far fa-question-circle"></i>
             </button>
-            <button id="btn-home" class="btn-setting">
-                <i class="fas fa-home"></i>
-            </button>
         </div>
 
         <hr/>
 
-        <div id="section-main">
+        <div class="form-inline d-flex justify-content-center" style="margin: 15px 20px; width: 300px; text-align: left;">
+            <i class="fas fa-search" style="color: #3bad74" aria-hidden="true"></i>
+            <input id="search" type="text" autocomplete="off" class="form-control search-box ml-3" style="width: 85%; padding-left: 0" placeholder="Search"></input>
+        </div>
 
-            <div class="form-inline d-flex justify-content-center" style="margin: 15px 20px; width: 300px; text-align: left;">
-                <i class="fas fa-search" style="color: #3bad74" aria-hidden="true"></i>
-                <input id="search" type="text" autocomplete="off" class="form-control search-box ml-3" style="width: 85%; padding-left: 0" placeholder="Search"></input>
+        <li id="btn-expand" class="list-group-item list-group-item-action" style="display: flex">
+            <div class="icon-wrapper">
+                <i class="fas fa-angle-down plus-icon"></i>
             </div>
+            <div align="left" style=" margin-left: 5px; width: 100%">
+                <p style="margin-top: 14px">Add new shortcut</p>
+            </div>
+        </li>
 
-            <li id="btn-expand" class="list-group-item list-group-item-action" style="display: flex">
-                <div class="icon-wrapper">
-                    <i class="fas fa-angle-down plus-icon"></i>
-                </div>
-                <div align="left" style=" margin-left: 5px; width: 100%">
-                    <p style="margin-top: 14px">Add new shortcut</p>
-                </div>
-            </li>
-
-            <div id="section-expand">
-                <div align="left">
-                    <button id="btn-collapse">
-                        <i class="fas fa-angle-up" style="text-align: left; margin-left: 20px"></i>
-                    </button>
-                </div>
-
-                <div class="input-group" style="margin: 10px 20px; width: 300px; text-align: left;">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">go/</span>
-                    </div>
-                    <input class="form-control" id="go-link" placeholder="shortcut"></input>
-                </div>
+        <div id="section-expand">
+            <div align="left">
+                <button id="btn-collapse">
+                    <i class="fas fa-angle-up" style="text-align: left; margin-left: 20px"></i>
+                </button>
+            </div>
 
-                <div style="margin: 15px 20px; width: 300px; text-align: left;">
-                    <input class="form-control" id="full-link" placeholder="https://www.shortcut.com/"></input>
+            <div class="input-group" style="margin: 10px 20px; width: 300px; text-align: left;">
+                <div class="input-group-prepend">
+                    <span class="input-group-text">go/</span>
                 </div>
-
-                <button type="button" class="btn btn-sm button-outline" style="width: 100px; margin-bottom: 15px;" id="save">Save</button>
+                <input class="form-control" id="go-link" placeholder="shortcut"></input>
             </div>
 
-            <ul id="item-list" class="list-group">
-
-            </ul>
+            <div style="margin: 15px 20px; width: 300px; text-align: left;">
+                <input class="form-control" id="full-link" placeholder="https://www.shortcut.com/"></input>
+            </div>
 
-            <!-- Autocomplete box template -->
-            <template id="autocomplete">
-                <li class="list-group-item list-group-item-action" style="display: flex">
-                    <div class="icon-wrapper">
-                        <img id="icon-website">
-                    </div>
-                    <div align="left" style=" margin-left: 5px; width: 80%">
-                        <p style="margin: 0;" id="url-shortcut"></p>
-                        <p style="margin: 0; overflow: hidden; max-width: 200px; text-overflow: ellipsis; white-space: nowrap;" id="url-website"></p>
-                    </div>
-                    <button id="icon-trash">
-                        <i class="fas fa-trash-alt"></i>
-                    </button>
-                </li>
-            </template>
+            <button type="button" class="btn btn-sm button-outline" style="width: 100px; margin-bottom: 15px;" id="save">Save</button>
         </div>
 
-        <div id="section-help">
+        <ul id="item-list" class="list-group"></ul>
 
-        </div>
+        <!-- Autocomplete box template -->
+        <template id="autocomplete">
+            <li class="list-group-item list-group-item-action" style="display: flex">
+                <div class="icon-wrapper">
+                    <img id="icon-website">
+                </div>
+                <div align="left" style=" margin-left: 5px; width: 80%">
+                    <p style="margin: 0;" id="url-shortcut"></p>
+                    <p style="margin: 0; overflow: hidden; max-width: 200px; text-overflow: ellipsis; white-space: nowrap;" id="url-website"></p>
+                </div>
+                <button id="icon-trash">
+                    <i class="fas fa-trash-alt"></i>
+                </button>
+            </li>
+        </template>
     </body>
 </html>

popup/popup.js

@@ -5,7 +5,6 @@ const searchQuery = document.getElementById("search")
 const mainSection = document.getElementById("section-main")
 const helpSection = document.getElementById("section-help")
 const helpBtn = document.getElementById("btn-help")
-const homeBtn = document.getElementById("btn-home")
 const itemList = document.getElementById("item-list")
 const expandSection = document.getElementById("section-expand");
 const expandBtn = document.getElementById("btn-expand");
@@ -16,7 +15,6 @@ golinkInput.oninput = async () => {
     let urlObj = await browser.storage.sync.get(golink)
     if (!urlObj[golink]) {
         saveButton.textContent = "Save";
-        storedUrl.style.display = "none";
         return;
     }
     saveButton.textContent = "Overwrite";
@@ -44,17 +42,7 @@ browser.tabs.query({'active': true, 'lastFocusedWindow': true, 'currentWindow':
     .then(tabs => urlInput.value = tabs[0].url);
 
 helpBtn.addEventListener("click", function() {
-    mainSection.style.display = "none";
-    helpSection.style.display = "block";
-    helpBtn.style.display = "none";
-    homeBtn.style.display = "block";
-});
-
-homeBtn.addEventListener("click", function() {
-    mainSection.style.display = "block";
-    helpSection.style.display = "none";
-    helpBtn.style.display = "block";
-    homeBtn.style.display = "none";
+    browser.tabs.create({active: true, url: "https://github.com/hieupham7127/golinks#user-guide-to-go-links"});
 });
 
 async function getAllEntries() {