Move Tips to markdown page and just link it (#142)

* Move Tips to markdown page and just link it * Add link to Tips and Tricks from main Readme * Added changelog * Remove test --------- Co-authored-by: Simon Heimler <[email protected]>
Fannon · Sep 2, 2024 · f636504 · f636504
1 parent 4395e8d
commit f636504
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ## [v1.10.1]
 
 - **FIXED**: Bookmark tagging autocomplete was partly broken. Fixed update of dependency.
+- **CHANGED**: Moved the tips & tricks to markdown file and just link it, instead of random tips on startup.
 
 ## [v1.10.0]
 

diff --git a/README.md b/README.md
@@ -23,7 +23,9 @@ The tags are considered when searching and can be used for navigation.
 
 The extension is very customizable (see [user options](#user-configuration)) and has a dark / light theme that is selected based on your system settings (see [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)). It's also very lightweight (< 150kb JavaScript, including dependencies).
 
-For a list of recent changes, see [CHANGELOG.md](./CHANGELOG.md).
+> 💡 Have a look at the [Tips & Tricks](./Tips.md) collection.
+
+> 🗎 For a list of recent changes, see [CHANGELOG.md](./CHANGELOG.md).
 
 ## Screenshots & Demo
 

diff --git a/Tips.md b/Tips.md
@@ -0,0 +1,71 @@
+# Tips & Tricks
+
+<strong>Customization</strong>: This extension can be customized via options in many ways. Please refer to the Documentation (link bottom right).
+
+<hr/>
+
+<strong>Tips on startup</strong>: Disable via option: <code>enableHelp: false</code>
+
+<hr/>
+
+<strong>Search Strategies</strong>: Switch between <span class="precise">PRECISE</span> (faster, exact) and <span class="fuzzy">FUZZY</span> (slower, more results, fuzzy).<br/><br/>
+This can be done via clicking on the top-right corner of the popup or by setting it in the options like: <code>searchStrategy: precise</code>
+
+<hr/>
+
+<strong>Keyboard Shortcut</strong>: Trigger the extension via keyboard. <br/>
+The default is <code>CTRL</code> + <code>Shift</code> + <code>.</code>. <br/><br/>
+This can be customized in the browsers extensions settings.
+
+<hr/>
+
+<strong>History Size & History</strong>: By default the number of history items to load are limited.
+Consider increasing or decreasing this, depending on your performance situation and personal preferences:<br /><br />
+Add / adjust option: <code>historyMaxItems: 1024</code> <br/>
+Add / adjust option: <code>historyDaysAgo: 14</code>
+
+<hr/>
+
+<strong>Open selected results</strong>: By default, the extension will open the selected result in a new tab or switch to an existing tab if fitting.<br/><br/>
+Hold <code>Shift</code> or <code>Alt</code> to open the result in the current tab.<br />
+Hold <code>Ctrl</code> to open the result without closing the popup.<br />
+Press <code>Right Click</code> to copy URL of result into clipboard without closing the popup.
+
+<hr/>
+
+<strong>Custom Bonus Scores</strong>: Append <code> + [whole number]</code> to your bookmark title (before tags). <br/><br/>
+Example: <code>Another Bookmark +10 #tag1</code>
+
+<hr/>
+
+<strong>Custom Bonus Scores</strong>: Append <code> + [whole number]</code> to your bookmark title (before tags). <br/><br/>
+Example: <code>Another Bookmark +10 #tag1</code>
+
+<hr/>
+
+<strong>Copy to Clipboard</strong>: Right click a result item to copy its URL to the clipboard.
+
+<hr/>
+
+<strong>Search Modes</strong>: Use search modes to be more selective.<br/><br/>
+Start your search query with a search mode prefix:
+
+<ul>
+ <li><code>#</code>: Only <strong>bookmarks with the tag</strong> will be returned</li>
+ <li><code>~</code>: Only <strong>bookmarks within the folder</strong> will be returned</li>
+ <li><code>t </code>: Only <strong>tabs</strong> will be searched.</li>
+ <li><code>b </code>: Only <strong>bookmarks</strong> will be searched.</li>
+ <li><code>h </code>: Only <strong>history</strong> and <strong>tabs</strong> will be searched.</li>
+ <li><code>s </code>: Only <strong>search engines</strong> will be proposed.</li>
+</ul>
+
+<hr/>
+
+<strong>Special Browser Pages</strong>: You can add special browser pages to your bookmarks, like
+<code>chrome://downloads</code>.
+
+<hr/>
+
+<strong>Keyboard Navigation</strong>: You can navigate result entries also in Emacs / Vim style:<br/><br/>
+<code>Ctrl+N</code> and <code>Ctrl+J</code> to navigate search results up.<br/>
+<code>Ctrl+P</code> and <code>Ctrl+K</code> to navigate search results down.
diff --git a/cypress/e2e/search.cy.js b/cypress/e2e/search.cy.js
@@ -10,11 +10,6 @@ describe('Search View', () => {
     it('completes the initializing phase without errors', () => {
       cy.get('#results-loading').should('not.exist').checkNoErrors()
     })
-    it('starts with no results, but a random tip', () => {
-      cy.get('#result-list').find('li.tip')
-      cy.get('#result-list')
-        .should('have.length', 1)
-    })
   })
 
   describe('Result Navigation', () => {

diff --git a/popup/css/style.css b/popup/css/style.css
@@ -259,7 +259,8 @@ code {
   font-size: 14px;
 }
 #links a {
-  color: #888;
+  color: #87aaca;
+  text-decoration: underline;
 }
 #links #result-counter {
   float: right;
@@ -459,9 +460,6 @@ li.tip {
   #options .help {
     background: #000;
   }
-  #tips .tip {
-    background: #000;
-  }
   .input,
   .input:active,
   .input:focus,

diff --git a/popup/index.html b/popup/index.html
@@ -48,10 +48,14 @@
       </div>
       <footer id="links">
         <span id="result-counter"></span>
-        <a href="#search/">SEARCH</a> | <a href="#tags/">TAGS</a> | <a href="#folders/">FOLDERS</a> |
-        <a href="./options.html">OPTIONS</a> |
+        <a href="#search/">Search</a> | <a href="#tags/">Tags</a> | <a href="#folders/">Folders</a> |
+        <a href="./options.html">Options</a> |
+        <a href="https://github.com/Fannon/search-bookmarks-history-and-tabs/blob/main/Tips.md" target="_newtab"
+          >Tips</a
+        >
+        |
         <a href="https://github.com/Fannon/search-tabs-bookmarks-and-history#readme" target="_newtab"
-          >DOCUMENTATION & HELP</a
+          >Documentation & Help</a
         >
       </footer>
       <ul id="error-list"></ul>

diff --git a/popup/js/initSearch.js b/popup/js/initSearch.js
@@ -3,7 +3,7 @@ import { extensionNamespace as ext } from './model/namespace.js'
 import { getEffectiveOptions } from './model/options.js'
 import { getSearchData } from './model/searchData.js'
 import { search } from './search/common.js'
-import { addDefaultEntries, addHelp } from './search/defaultEntries.js'
+import { addDefaultEntries } from './search/defaultEntries.js'
 import { editBookmark, updateBookmark } from './view/editBookmarkView.js'
 import { loadFoldersOverview } from './view/foldersView.js'
 import {
@@ -68,9 +68,7 @@ export async function initExtension() {
   await addDefaultEntries()
   renderSearchResults(ext.model.result)
   if (!window.location.hash || window.location.hash === '/') {
-    if (ext.opts.enableHelp) {
-      addHelp()
-    }
+    // Placeholder. We could add help-text here.
   } else {
     hashRouter()
   }

diff --git a/popup/js/search/defaultEntries.js b/popup/js/search/defaultEntries.js
@@ -62,59 +62,3 @@ export async function addDefaultEntries() {
   ext.model.result = results
   return results
 }
-
-export function addHelp() {
-  const parser = new DOMParser()
-  var html = helpTexts[(Math.random() * helpTexts.length) | 0]
-  const doc = parser.parseFromString(`<li class="tip">${html}</li>`, 'text/html')
-  document.getElementById('result-list').appendChild(doc.body.firstChild)
-}
-
-export const helpTexts = [
-  `<strong>Customization</strong>: This extension can be customized via options in many ways. Please refer to the Documentation (link bottom right).`,
-
-  `<strong>Tips on startup</strong>: Disable via option: <code>enableHelp: false</code>`,
-
-  `<strong>Search Strategies</strong>: Switch between <span class="precise">PRECISE</span> (faster, exact) and <span class="fuzzy">FUZZY</span> (slower, more results, fuzzy).<br/><br/>
-   This can be done via clicking on the top-right corner of the popup or by setting it in the options like: <code>searchStrategy: precise</code>`,
-
-  `<strong>Keyboard Shortcut</strong>: Trigger the extension via keyboard. <br/>
-   The default is <code>CTRL</code> + <code>Shift</code> + <code>.</code>. <br/><br/>
-   This can be customized in the browsers extensions settings.`,
-
-  `<strong>History Size & History</strong>: By default the number of history items to load are limited.
-   Consider increasing or decreasing this, depending on your performance situation and personal preferences:<br /><br />
-   Add / adjust option: <code>historyMaxItems: 1024</code> <br/>
-   Add / adjust option: <code>historyDaysAgo: 14</code>`,
-
-  `<strong>Open selected results</strong>: By default, the extension will open the selected result in a new tab or switch to an existing tab if fitting.<br/><br/>
-   Hold <code>Shift</code> or <code>Alt</code> to open the result in the current tab.<br />
-   Hold <code>Ctrl</code> to open the result without closing the popup.<br />
-   Press <code>Right Click</code> to copy URL of result into clipboard without closing the popup.`,
-
-  `<strong>Custom Bonus Scores</strong>: Append <code> + [whole number]</code> to your bookmark title (before tags). <br/><br/>
-   Example: <code>Another Bookmark +10 #tag1</code>`,
-
-  `<strong>Custom Bonus Scores</strong>: Append <code> + [whole number]</code> to your bookmark title (before tags). <br/><br/>
-   Example: <code>Another Bookmark +10 #tag1</code>`,
-
-  `<strong>Copy to Clipboard</strong>: Right click a result item to copy its URL to the clipboard.`,
-
-  `<strong>Search Modes</strong>: Use search modes to be more selective.<br/><br/>
-   Start your search query with a search mode prefix:
-   <ul>
-    <li><code>#</code>: Only <strong>bookmarks with the tag</strong> will be returned</li>
-    <li><code>~</code>: Only <strong>bookmarks within the folder</strong> will be returned</li>
-    <li><code>t </code>: Only <strong>tabs</strong> will be searched.</li>
-    <li><code>b </code>: Only <strong>bookmarks</strong> will be searched.</li>
-    <li><code>h </code>: Only <strong>history</strong> and <strong>tabs</strong> will be searched.</li>
-    <li><code>s </code>: Only <strong>search engines</strong> will be proposed.</li>
-   </ul>`,
-
-  `<strong>Special Browser Pages</strong>: You can add special browser pages to your bookmarks, like
-   <code>chrome://downloads</code>.`,
-
-  `<strong>Keyboard Navigation</strong>: You can navigate result entries Emacs / Vim Style:<br/><br/>
-   <code>Ctrl+N</code> and <code>Ctrl+J</code> to navigate search results up.<br/>
-   <code>Ctrl+P</code> and <code>Ctrl+K</code> to navigate search results down.`,
-]
diff --git a/popup/options.html b/popup/options.html
@@ -56,10 +56,14 @@
 
       <!-- Footer Navigation -->
       <footer id="links">
-        <a href="./index.html#search/">SEARCH</a> | <a href="./index.html#tags/">TAGS</a> |
-        <a href="./index.html#folders/">FOLDERS</a> | <a href="#folders/">OPTIONS</a> |
+        <a href="./index.html#search/">Search</a> | <a href="./index.html#tags/">Tags</a> |
+        <a href="./index.html#folders/">Folders</a> | <a href="#folders/">Options</a> |
+        <a href="https://github.com/Fannon/search-bookmarks-history-and-tabs/blob/main/Tips.md" target="_newtab"
+          >Tips</a
+        >
+        |
         <a href="https://github.com/Fannon/search-tabs-bookmarks-and-history#readme" target="_newtab"
-          >DOCUMENTATION & HELP</a
+          >Documentation & Help</a
         >
       </footer>
       <ul id="error-list"></ul>