master: initialize

README.md

@@ -1,22 +1,13 @@
-[![GitHub Issues](https://img.shields.io/github/issues/Ozencb/tilde-enhanced)](https://github.com/Ozencb/tilde-enhanced/issues)
-[![Stars](https://img.shields.io/github/stars/Ozencb/tilde-enhanced)](https://github.com/Ozencb/tilde-enhanced)
-[![Forks](https://img.shields.io/github/forks/Ozencb/tilde-enhanced)](https://github.com/Ozencb/tilde-enhanced)
-[![Unlicense](https://img.shields.io/github/license/Ozencb/tilde-enhanced)](../master/LICENSE)
-
-# Tilde Enhanced
-
-Based on [Cade Scroggins](https://github.com/cadejscroggins)'s [Tilde](https://github.com/cadejscroggins/tilde).
-
-## Screenshots 
-
-![Screenshot](assets/screenshot.png)
+# Shiloh startpage
 
+Based on [Cade Scroggins](https://github.com/cadejscroggins)'s [startpage](https://github.com/cadejscroggins/startpage).
 
 ## Added Features
+
 Most of the features are carried over from the original source.
 Few of the added features are:
 
-- A launch category functionality, which launches every site in a category. Enter a category index number followed by `!`, i.e. `2!` would launch everything under the second category. 
+- A launch category functionality, which launches every site in a category. Enter a category index number followed by `!`, i.e. `2!` would launch everything under the second category.
 - A "Quick Launch" functionality, which launches every site with `quickLaunch` property set to `true` upon entering `q!`.
 - An invertible color theme. Either edit config or use `invert!` command.
 - Show image or SVG as bookmark icon
@@ -24,18 +15,14 @@ Few of the added features are:
 
 ## Usage
 
-To use Tilde as your homepage, simply set your browser's home URL to
-Tilde's index file.
+To use startpage as your homepage, simply set your browser's home URL to
+startpage's index file.
 To go to a site, enter the first letter of the site then hit enter.
-To view the available sites, press `?` or click on the clock.
+To view the available sites, press `?` or click on today's date.
 If your input doesn't match any of the commands,
-a generic DuckDuckGo search will be triggered. For example:
+a mullvad leta search will be triggered.
 
-- Entering `r` would redirect you to [www.reddit.com](https://www.reddit.com).
-- Entering `t` would redirect you to [twitch.tv](https://www.twitch.tv).
-- Entering `cats` would search [Cats](https://duckduckgo.com/?q=cats).
-
-Note that by default, queries are searched on DuckDuckGo but this can be
+Note that by default, queries are searched on Mullvad Leta but this can be
 configured easily by updating two lines on. Check [Configuration](#configuration) for details.
 
 You might have to allow pop-ups for your homepage to use quick launch feature.
@@ -48,10 +35,10 @@ only bring up pre-defined sites.
 You can search any of the sites by typing a colon after the site's key, followed
 by your search query. For example:
 
-- Entering `g:tilde-enhanced` would search
-  [GitHub for tilde-enhanced](https://github.com/search?q=tilde-enhanced).
-- Entering `y:cats` would search
-  [Cats on YouTube](https://www.youtube.com/results?search_query=cats).
+- Entering `g:remnantchat` would search
+  [GitHaven for startpage-enhanced](https://githaven.org/search?q=remnantchat).
+- Entering `stack:cats` would search
+  [Cats on stackoverflow](https://www.stackoverflow.com/results?search_query=cats).
 
 ### Specific Locations
 
@@ -59,20 +46,10 @@ You can go to a specific location on a site by typing a forward slash after the
 site's key, followed by the location on the site you'd like to be redirected to.
 For example:
 
-- Entering `r/r/startpages` would redirect you to
-  [www.reddit.com/r/startpages](https://www.reddit.com/r/startpages)
-- Entering `h/popular` would redirect you to
-  [hypem.com/popular](http://hypem.com/popular).
-
 ### URL Redirects
 
 If you enter in a full domain or URL, you will be redirected to said domain or
-URL. For example:
-
-- Entering `stallman.org` would redirect you to
-  [stallman.org](https://stallman.org/).
-- Entering `keep.google.com` would redirect you to
-  [keep.google.com](https://keep.google.com/).
+URL.
 
 You can also use `Ctrl + Enter` key combination to launch the query with a `.com` TLD.
 
@@ -80,10 +57,10 @@ You can also use `Ctrl + Enter` key combination to launch the query with a `.com
 
 Additionally, you can pass any query via the `q` query param. For example:
 
-- Going to `file:///path/to/tilde/index.html?q=cats` would search
+- Going to `file:///path/to/startpage/index.html?q=cats` would search
   [Cats](https://duckduckgo.com/?q=cats).
 
-This allows you to invoke Tilde with your native browser search bar.
+This allows you to invoke startpage with your native browser search bar.
 
 ## Configuration
 
@@ -94,7 +71,3 @@ Open up the [config.js](js/config.js) file and read through the `CONFIG`!
 By default Firefox won't let you set a custom URL for new tabs but there is a work-around to circumvent the problem.
 
 You can follow [Urimu's Guide](https://github.com/Urimu/Startpage#setting-it-up-on-firefox) to set your new tab to launch custom URLs.
-
-## License
-
-Feel free to [use this and modify it however you like](https://github.com/Ozencb/tilde-enhanced/blob/master/LICENSE).

css/style.css

@@ -72,11 +72,13 @@ textarea {
   margin: 0; /* 2 */
 }
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 button,
@@ -150,11 +152,10 @@ template {
 
 /* == End of Normalize.css == */
 
-
 :root {
   /* colors */
-  --background: #0E0E0E;
-  --foreground: #F1F1F1;
+  --background: #0e0e0e;
+  --foreground: #00bcf3;
 
   /* fonts */
   --base-font-size: 18px;
@@ -163,15 +164,16 @@ template {
 }
 
 @font-face {
-  font-family: 'Metropolis';
-  src: local('Metropolis-Medium'), url('../assets/fonts/Metropolis-Medium.woff2');
+  font-family: "Metropolis";
+  src: local("Metropolis-Medium"),
+    url("../assets/fonts/Metropolis-Medium.woff2");
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Metropolis';
-  src: local('Metropolis-Bold'), url('../assets/fonts/Metropolis-Black.woff2');
+  font-family: "Metropolis";
+  src: local("Metropolis-Bold"), url("../assets/fonts/Metropolis-Black.woff2");
   font-weight: 900;
   font-style: normal;
 }
@@ -236,6 +238,7 @@ a:focus {
 
 .center {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
@@ -251,15 +254,24 @@ a:focus {
   height: 100%;
   visibility: hidden;
 }
-
+.time-container {
+  display: flex;
+  place-content: center;
+  width: 90rem; /* adjust based on maximum length of the time unit */
+  vertical-align: middle;
+}
 .clock {
   display: block;
-  margin-top: -0.06rem;
+  margin: 10px;
   font-size: 4rem;
   font-weight: var(--font-weight-normal);
   text-align: center;
   letter-spacing: 0.05rem;
   cursor: pointer;
+  transition: color 0.5s;
+}
+.clock:hover {
+  color: white;
 }
 
 .am-pm {
@@ -273,7 +285,7 @@ a:focus {
   z-index: 2;
 }
 
-.search-form>div {
+.search-form > div {
   width: 100%;
 }
 
@@ -317,7 +329,7 @@ body.suggestions .search-suggestions {
 }
 
 .search-suggestion b::after {
-  content: ' ';
+  content: " ";
   position: absolute;
   right: 0;
   bottom: -0.3rem;
@@ -380,7 +392,7 @@ body.suggestions .search-suggestions {
 }
 
 .command-name::after {
-  content: ' ';
+  content: " ";
   display: none;
   position: absolute;
   right: 0;
@@ -409,14 +421,13 @@ body.form .search-form {
 }
 
 .disable-select {
-	user-select: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }
 
-
 @media (min-width: 500px) {
   .help {
     display: flex;
@@ -469,4 +480,4 @@ body.form .search-form {
   .categories {
     grid-template-columns: repeat(5, 220px) 175px;
   }
-}
+}

index.html

@@ -1,35 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <link rel="stylesheet" href="css/style.css" class="style" />
+    <title>shiloh</title>
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="robots" content="noindex" />
-  <link rel="stylesheet" href="css/style.css" class="style">
-  <title>~+</title>
-</head>
+  <body>
+    <div class="center disable-select">
+      <img src="https://shilohcode.com/shiloh-logo-white-1.png" width="200" />
+      <div class="time-container"><time class="clock" id="clock"></time></div>
 
-<body>
-  <div class="center disable-select"><time class="clock" id="clock"></time></div>
-  <form autocomplete="off" class="center overlay search-form" id="search-form" spellcheck="false">
-    <div>
-      <input class="search-input" id="search-input" title="search" type="text" />
-      <ul class="search-suggestions" id="search-suggestions"></ul>
+      <p>no announcements</p>
     </div>
-  </form>
-  <aside class="center help overlay disable-select" id="help"></aside>
 
-
-  <script src="js/svg-inject.min.js"></script>
-  <script src="js/config.js"></script>
-  <script src="js/body.js"></script>
-  <script src="js/clock.js"></script>
-  <script src="js/form.js"></script>
-  <script src="js/help.js"></script>
-  <script src="js/influencers.js"></script>
-  <script src="js/queryParser.js"></script>
-  <script src="js/suggester.js"></script>
-  <script src="js/index.js"></script>
-</body>
-
-</html>
+    <form
+      autocomplete="off"
+      class="center overlay search-form"
+      id="search-form"
+      spellcheck="false"
+    >
+      <div>
+        <input
+          class="search-input"
+          id="search-input"
+          title="search"
+          type="text"
+        />
+        <ul class="search-suggestions" id="search-suggestions"></ul>
+      </div>
+    </form>
+    <aside class="center help overlay disable-select" id="help"></aside>
+    <script src="js/svg-inject.min.js"></script>
+    <script src="js/config.js"></script>
+    <script src="js/body.js"></script>
+    <script src="js/clock.js"></script>
+    <script src="js/form.js"></script>
+    <script src="js/help.js"></script>
+    <script src="js/influencers.js"></script>
+    <script src="js/queryParser.js"></script>
+    <script src="js/suggester.js"></script>
+    <script src="js/index.js"></script>
+  </body>
+</html>

js/clock.js

@@ -1,35 +1,41 @@
 class Clock {
-    constructor(options) {
-      this._el = $.el('#clock');
-      this._delimiter = options.delimiter;
-      this._twentyFourHourClock = options.twentyFourHourClock;
-      this._setTime = this._setTime.bind(this);
-      this._el.addEventListener('click', options.toggleHelp);
-      this._start();
+  constructor(options) {
+    this._el = $.el("#clock");
+    this._delimiter = options.delimiter;
+    this._twentyFourHourClock = options.twentyFourHourClock;
+    this._setDate = this._setDate.bind(this);
+    this._el.addEventListener("click", options.toggleHelp);
+    this._start();
+  }
+
+  _setDate() {
+    const now = new Date();
+    let hour = now.getHours();
+    if (!this._twentyFourHourClock && hour > 12) {
+      hour -= 12;
     }
-  
-    _setTime() {
-      const date = new Date();
-      let hours = $.pad(date.getHours());
-      let amPm = '';
-  
-      if (!this._twentyFourHourClock) {
-        hours = date.getHours();
-        if (hours > 12) hours -= 12;
-        else if (hours === 0) hours = 12;
-  
-        amPm =
-          `&nbsp;<span class="am-pm">` +
-          `${date.getHours() >= 12 ? 'PM' : 'AM'}</span>`;
-      }
-  
-      const minutes = $.pad(date.getMinutes());
-      this._el.innerHTML = `${hours}${this._delimiter}${minutes}${amPm}`;
-      this._el.setAttribute('datetime', date.toTimeString());
-    }
-  
-    _start() {
-      this._setTime();
-      setInterval(this._setTime, 1000);
-    }
-  }
+    let minute = now.getMinutes();
+    let second = now.getSeconds();
+
+    let month = now.getMonth() + 1; // getMonth returns a value between 0 and 11, so add 1 to get the actual month number
+    let day = now.getDate();
+    let year = now.getFullYear().toString().slice(-2); // Get last two digits of the full year
+
+    const formattedHour = $.pad(hour);
+    const formattedMinute = $.pad(minute);
+    const formattedSecond = $.pad(second);
+    const formattedMonth = $.pad(month);
+    const formattedDay = $.pad(day);
+
+    this._el.innerHTML = `${formattedMonth}${this._delimiter}${formattedDay}${this._delimiter}${year} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
+    this._el.setAttribute(
+      "datetime",
+      `${year}-${formattedMonth}-${formattedDay}T${formattedHour}:${formattedMinute}:${formattedSecond}`
+    );
+  }
+
+  _start() {
+    this._setDate();
+    setInterval(this._setDate, 1000);
+  }
+}

js/config.js

@@ -6,209 +6,120 @@ const CONFIG = {
    * Commands without a category don't show up in the help menu.
    * Update line 11 and 13 if you prefer using Google.
    */
-  commands: [{
-      name: 'Duckduckgo',
-      key: '*',
-      url: 'https://duckduckgo.com',
-      search: '/?q={}'
+  commands: [
+    {
+      name: "leta",
+      key: "*",
+      url: "https://leta.mullvad.net/",
+      search: "/?q={}",
     },
     {
-      category: 'General',
-      name: 'Mail',
-      key: 'm',
-      url: 'https://gmail.com',
-      search: '/#search/text={}',
-      color: 'linear-gradient(135deg, #dd5145, #dd5145)',
-      icon: 'mail',
+      category: "my accounts",
+      name: "mail",
+      key: "m",
+      url: "https://mail.shilohcode.com",
+      search: "/#search/text={}",
+      color: "linear-gradient(135deg, #dd5145, #dd5145)",
+      icon: "mail",
       quickLaunch: true,
     },
     {
-      category: 'General',
-      name: 'Drive',
-      key: 'd',
-      url: 'https://drive.google.com',
-      search: '/drive/search?q={}',
-      color: 'linear-gradient(135deg, #FFD04B, #1EA362, #4688F3)',
-      icon: 'drive',
+      category: "my accounts",
+      name: "cloud",
+      key: "c",
+      url: "https://cloud.shilohcode.com",
+      search: "/drive/search?q={}",
+      color: "linear-gradient(135deg, #FFD04B, #1EA362, #4688F3)",
+      icon: "cloud",
+      quickLaunch: true,
+    },
+    {
+      category: "my accounts",
+      name: "meet",
+      key: "mtg",
+      url: "https://remnant.chat",
+      color: "#5682a3",
+      icon: "meet",
       quickLaunch: false,
     },
     {
-      category: 'General',
-      name: 'Telegram',
-      key: 'tg',
-      url: 'https://web.telegram.org',
-      color: '#5682a3',
-      icon: 'telegram',
+      category: "my accounts",
+      name: "projects",
+      key: "p",
+      url: "https://taiga.shilohcode.com",
+      color: "linear-gradient(135deg, #25D366, #128C7E, #075E54)",
+      icon: "projects",
+      quickLaunch: true,
+    },
+    {
+      category: "my accounts",
+      name: "passwords",
+      key: "ps",
+      url: "https://vault.shilohcode.com",
+      color: "#7289da",
+      icon: "vault",
       quickLaunch: false,
     },
     {
-      category: 'General',
-      name: 'WhatsApp',
-      key: 'w',
-      url: 'https://web.whatsapp.com',
-      color: 'linear-gradient(135deg, #25D366, #128C7E, #075E54)',
-      icon: 'whatsapp',
-      quickLaunch: false,
-    },
-    {
-      category: 'General',
-      name: 'Discord',
-      key: 'dc',
-      url: 'https://discord.com/app',
-      color: '#7289da',
-      icon: 'discord',
+      category: "my accounts",
+      name: "secure share",
+      key: "sh",
+      url: "https://send.lasthourhosting.org",
+      color: "#7289da",
+      icon: "share",
       quickLaunch: false,
     },
 
-
     {
-      category: 'Programming',
-      name: 'GitHub',
-      key: 'g',
-      url: 'https://github.com',
-      search: '/search?q={}',
-      color: 'linear-gradient(135deg, #2b2b2b, #3b3b3b)',
-      icon: 'github',
+      category: "dev",
+      name: "githaven",
+      key: "g",
+      url: "https://githaven.org",
+      search: "/search?q={}",
+      color: "linear-gradient(135deg, #2b2b2b, #3b3b3b)",
+      icon: "githaven",
       quickLaunch: true,
     },
     {
-      category: 'Programming',
-      name: 'StackOverflow',
-      key: 'st',
-      url: 'https://stackoverflow.com',
-      search: '/search?q={}',
-      color: 'linear-gradient(135deg, #53341C, #F48024)',
-      icon: 'stackoverflow',
+      category: "dev",
+      name: "lasthour",
+      key: "hc",
+      url: "https://console.lasthourhosting.org",
+      search: "/search?q={}",
+      color: "linear-gradient(135deg, #53341C, #F48024)",
+      icon: "lasthour",
       quickLaunch: true,
     },
     {
-      category: 'Programming',
-      name: 'HackerNews',
-      key: 'h',
-      url: 'https://news.ycombinator.com/',
-      search: '/search?stories[query]={}',
-      color: 'linear-gradient(135deg, #FF6600, #DC5901)',
-      icon: 'hackernews',
-      quickLaunch: true,
-    },
-    {
-      category: 'Programming',
-      name: 'MDN',
-      key: 'md',
-      url: 'https://developer.mozilla.org/en-US',
-      search: '/search?q={}',
-      color: '#212121',
-      icon: 'mdn',
-      quickLaunch: false,
-    },
-    {
-      category: 'Programming',
-      name: 'DevDocs',
-      key: 'dd',
-      url: 'https://devdocs.io',
-      color: 'linear-gradient(135deg, #33373A, #484949)',
-      icon: 'devdocs',
+      category: "dev",
+      name: "stackoverflow",
+      key: "stack",
+      url: "https://stackoverflow.com",
+      search: "/search?q={}",
+      color: "linear-gradient(135deg, #53341C, #F48024)",
+      icon: "stackoverflow",
       quickLaunch: false,
     },
 
+    {
+      category: "dev",
+      name: "huggingchat",
+      key: "hc",
+      url: "https://huggingface.co/chat/",
+      search: "/search?q={}",
+      color: "linear-gradient(135deg, #53341C, #F48024)",
+      icon: "huggingchat",
+      quickLaunch: true,
+    },
 
     {
-      category: 'Fun',
-      name: 'YouTube',
-      key: 'y',
-      url: 'https://youtube.com',
-      search: '/results?search_query={}',
-      color: 'linear-gradient(135deg, #cd201f, #cd4c1f)',
-      icon: 'youtube',
-      quickLaunch: false,
-    },
-    {
-      category: 'Fun',
-      name: 'Reddit',
-      key: 'r',
-      url: 'https://reddit.com',
-      search: '/search?q={}',
-      color: 'linear-gradient(135deg, #FF8456, #FF4500)',
-      icon: 'reddit',
-      quickLaunch: false,
-    },
-    {
-      category: 'Fun',
-      name: 'Netflix',
-      key: 'n',
-      url: 'https://www.netflix.com',
-      color: 'linear-gradient(135deg, #E50914, #CB020C)',
-      icon: 'netflix',
-      quickLaunch: false,
-    },
-    {
-      category: 'Fun',
-      name: 'Spotify',
-      key: 's',
-      url: 'https://open.spotify.com/',
-      search: '/search/{}',
-      color: '#1dd35e',
-      icon: 'spotify',
-      quickLaunch: false,
-    },
-    {
-      category: 'Fun',
-      name: 'Twitch',
-      key: 'tw',
-      url: 'https://www.twitch.tv',
-      search: '/directory/game/{}',
-      color: 'linear-gradient(135deg, #6441a5, #4b367c)',
-      icon: 'twitch',
-      quickLaunch: false,
-    },
-
-
-    {
-      category: 'Other',
-      name: 'Twitter',
-      key: 't',
-      url: 'https://www.twitter.com',
-      search: '/search?q={}&src=typed_query',
-      color: 'linear-gradient(135deg, #1DA1F2, #19608F)',
-      icon: 'twitter',
-      quickLaunch: true,
-    },
-    {
-      category: 'Other',
-      name: 'Instagram',
-      key: 'i',
-      url: 'https://www.instagram.com',
-      color: 'linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d)',
-      icon: 'instagram',
-      quickLaunch: true,
-    },
-    {
-      category: 'Other',
-      name: 'LinkedIn',
-      key: 'l',
-      url: 'https://linkedin.com',
-      search: '/search/results/all/?keywords={}',
-      color: 'linear-gradient(135deg, #006CA4, #0077B5)',
-      icon: 'linkedin',
-      quickLaunch: true,
-    },
-    {
-      category: 'Other',
-      name: 'Notion',
-      key: 'ns',
-      url: 'https://www.notion.so',
-      color: 'linear-gradient(135deg, #FFF, #3F3F3F)',
-      icon: 'notion',
-      quickLaunch: true,
-    },
-    {
-      category: 'Other',
-      name: 'Translate',
-      key: 'tr',
-      url: 'https://translate.google.com/',
-      search: '/#view=home&op=translate&sl=auto&tl=en&text={}',
-      color: '#1a73e8',
-      icon: 'translate',
+      category: "Uptime",
+      name: "check status",
+      key: "st",
+      url: "https://status.shilohcode.com",
+      search: "/search?q={}",
+      color: "linear-gradient(135deg, #53341C, #F48024)",
+      icon: "status",
       quickLaunch: false,
     },
   ],
@@ -228,21 +139,22 @@ const CONFIG = {
    * - "DuckDuckGo" suggestions come from the duck duck go search api
    * - "History" suggestions come from your previously entered queries
    */
-  influencers: [{
-      name: 'Commands',
-      limit: 2
+  influencers: [
+    {
+      name: "Commands",
+      limit: 2,
     },
     {
-      name: 'Default',
-      limit: 4
+      name: "Default",
+      limit: 4,
     },
     {
-      name: 'History',
-      limit: 1
+      name: "History",
+      limit: 1,
     },
     {
-      name: 'DuckDuckGo',
-      limit: 4
+      name: "DuckDuckGo",
+      limit: 4,
     },
   ],
 
@@ -250,8 +162,8 @@ const CONFIG = {
    * Default search suggestions for the specified queries.
    */
   defaultSuggestions: {
-    g: ['g/issues', 'g/pulls', 'gist.github.com'],
-    r: ['r/r/unixporn', 'r/r/startpages', 'r/r/webdev', 'r/r/technology'],
+    g: ["githaven.org"],
+    m: ["mail.shilohcode.com"],
   },
 
   /**
@@ -263,7 +175,7 @@ const CONFIG = {
   /**
    * Open triggered queries in a new tab.
    */
-  newTab: false,
+  newTab: true,
 
   /**
    * Dynamic overlay background colors when command domains are matched.
@@ -284,18 +196,18 @@ const CONFIG = {
    * The delimiter between a command key and your search query. For example,
    * to search GitHub for potatoes, you'd type "g:potatoes".
    */
-  searchDelimiter: ':',
+  searchDelimiter: ":",
 
   /**
    * The delimiter between a command key and a path. For example, you'd type
    * "r/r/unixporn" to go to "https://reddit.com/r/unixporn".
    */
-  pathDelimiter: '/',
+  pathDelimiter: "/",
 
   /**
    * The delimiter between the hours and minutes on the clock.
    */
-  clockDelimiter: ' ',
+  clockDelimiter: " ",
 
   /**
    * Show a twenty-four-hour clock instead of a twelve-hour clock with AM/PM.
@@ -305,5 +217,5 @@ const CONFIG = {
   /**
    * File extension for icon images
    */
-  iconExtension: 'png'
+  iconExtension: "png",
 };

js/help.js

@@ -1,95 +1,105 @@
 class Help {
-    constructor(options) {
-      this._el = $.el('#help');
-      this._commands = options.commands;
-      this._newTab = options.newTab;
-      this._toggled = false;
-      this._handleKeydown = this._handleKeydown.bind(this);
-      this.toggle = this.toggle.bind(this);
-      this.launch = this.launch.bind(this);
-      this.launchCategory = this.launchCategory.bind(this);
-      this._inputEl = $.el('#search-input');
-      this._inputElVal = '';
-      this._suggester = options.suggester;
-      this._invertColors = options.invertedColors;
-      this._buildAndAppendLists();
-      this._registerEvents();
-      this._invertValue;
-    }
-  
-    toggle(show) {
-      this._toggled = typeof show !== 'undefined' ? show : !this._toggled;
-      this._toggled ? $.bodyClassAdd('help') : $.bodyClassRemove('help');
-    }
-  
-    hide() {
-      $.bodyClassRemove('form');
-      this._inputEl.value = '';
-      this._inputElVal = '';
-      this._suggester.suggest('');
-    }
-  
-    launch() {
-      this.hide();
-      this.toggle(true);
-      $.bodyClassAdd('help');
-  
-      CONFIG.commands.forEach(command => {
-        if(command.quickLaunch) window.open(command.url);
-      });
-    }
-  
-    launchCategory(){
-      
-      const categorySet = new Set();
-  
-      CONFIG.commands.forEach(command => {
-        if(command.category) categorySet.add(command.category);
-      });
-  
-      const targetCategoryIndex = $.el('#search-input').value.replace('!', '');
-      const targetCategory = Array.from(categorySet)[targetCategoryIndex - 1];
-      
-      CONFIG.commands.forEach(command => {
-        if(targetCategory && command.category === targetCategory) window.open(command.url);
-      });
-    }
-  
-    _buildAndAppendLists() {
-      const lists = document.createElement('ul');
-      lists.classList.add('categories');
-  
-      this._getCategories().forEach(category => {
-        lists.insertAdjacentHTML(
-          'beforeend',
-          `<li class="category">
+  constructor(options) {
+    this._el = $.el("#help");
+    this._commands = options.commands;
+    this._newTab = options.newTab;
+    this._toggled = false;
+    this._handleKeydown = this._handleKeydown.bind(this);
+    this.toggle = this.toggle.bind(this);
+    this.launch = this.launch.bind(this);
+    this.launchCategory = this.launchCategory.bind(this);
+    this._inputEl = $.el("#search-input");
+    this._inputElVal = "";
+    this._suggester = options.suggester;
+    this._invertColors = options.invertedColors;
+    this._buildAndAppendLists();
+    this._registerEvents();
+    this._invertValue;
+  }
+
+  toggle(show) {
+    this._toggled = typeof show !== "undefined" ? show : !this._toggled;
+    this._toggled ? $.bodyClassAdd("help") : $.bodyClassRemove("help");
+  }
+
+  hide() {
+    $.bodyClassRemove("form");
+    this._inputEl.value = "";
+    this._inputElVal = "";
+    this._suggester.suggest("");
+  }
+
+  launch() {
+    this.hide();
+    this.toggle(true);
+    $.bodyClassAdd("help");
+
+    CONFIG.commands.forEach((command) => {
+      if (command.quickLaunch) window.open(command.url);
+    });
+  }
+
+  launchCategory() {
+    const categorySet = new Set();
+
+    CONFIG.commands.forEach((command) => {
+      if (command.category) categorySet.add(command.category);
+    });
+
+    const targetCategoryIndex = $.el("#search-input").value.replace("!", "");
+    const targetCategory = Array.from(categorySet)[targetCategoryIndex - 1];
+
+    CONFIG.commands.forEach((command) => {
+      if (targetCategory && command.category === targetCategory)
+        window.open(command.url);
+    });
+  }
+
+  _buildAndAppendLists() {
+    const lists = document.createElement("ul");
+    lists.classList.add("categories");
+
+    this._getCategories().forEach((category) => {
+      lists.insertAdjacentHTML(
+        "beforeend",
+        `<li class="category">
             <h2 class="category-name">${category}</h2>
             <ul>${this._buildListCommands(category)}</ul>
           </li>`
+      );
+    });
+
+    this._el.appendChild(lists);
+  }
+
+  _buildListCommands(currentCategory) {
+    let invertValue = this._invertColors ? 1 : 0;
+
+    const bgcolor = invertValue
+      ? getComputedStyle(document.documentElement).getPropertyValue(
+          "--foreground"
+        )
+      : getComputedStyle(document.documentElement).getPropertyValue(
+          "--background"
         );
-      });
-  
-      this._el.appendChild(lists);
-    }
-  
-    _buildListCommands(currentCategory) {
-      let invertValue = this._invertColors ? 1: 0;
-  
-      const bgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--foreground') 
-                                  : getComputedStyle(document.documentElement).getPropertyValue('--background');
-  
-      const fgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--background') 
-                                  : getComputedStyle(document.documentElement).getPropertyValue('--foreground');
-  
-  
-      const commandListWithIcons =  this._commands
-        .map(({ category, name, key, url, icon }, i) => {
-          const iconEl = CONFIG.iconExtension !== 'svg'
-                       ? `<img src='assets/icons/${icon}.png' height = 28px center style="filter: invert(${invertValue});">`
-                       : `<img src='assets/icons/${icon}.svg' onload="SVGInject(this)" height = 28px center style="fill: ${fgcolor};">`
-  
-          if (category === currentCategory) {
-            return `
+
+    const fgcolor = invertValue
+      ? getComputedStyle(document.documentElement).getPropertyValue(
+          "--background"
+        )
+      : getComputedStyle(document.documentElement).getPropertyValue(
+          "--foreground"
+        );
+
+    const commandListWithIcons = this._commands
+      .map(({ category, name, key, url, icon }, i) => {
+        const iconEl =
+          CONFIG.iconExtension !== "svg"
+            ? `<img src='assets/icons/${icon}.png' height = 28px center style="filter: invert(${invertValue});">`
+            : `<img src='assets/icons/${icon}.svg' onload="SVGInject(this)" height = 28px center style="fill: ${fgcolor};">`;
+
+        if (category === currentCategory) {
+          return `
               <style>
                 .command-key-${i} {
                   color: ${fgcolor}; 
@@ -98,22 +108,22 @@ class Help {
                 }   
               </style>
               <li class="command">
-                <a href="${url}" target="${this._newTab ? '_blank' : '_self'}">
+                <a href="${url}" target="${this._newTab ? "_blank" : "_self"}">
                   <span class="command-key command-key-${i}">${iconEl}</span>
                   <span class="command-name">${name}</span>
                 </a>
               </li>
             `;
-          }
-        })
-        .join('');
-  
-      const commandListWithKeys = this._commands
-        .map(({ category, name, key, url }, i) => {
-          if (category === currentCategory) {
-            return `
+        }
+      })
+      .join("");
+
+    const commandListWithKeys = this._commands
+      .map(({ category, name, key, url }, i) => {
+        if (category === currentCategory) {
+          return `
               <li class="command">
-                <a href="${url}" target="${this._newTab ? '_blank' : '_self'}">
+                <a href="${url}" target="${this._newTab ? "_blank" : "_self"}">
                       <style>
                         .command-key-${i} {
                           color: ${fgcolor}; 
@@ -126,26 +136,26 @@ class Help {
                 </a>
               </li>
             `;
-          }
-        })
-        .join('');
-  
-      return CONFIG.showKeys ? commandListWithKeys : commandListWithIcons;
-    }
-  
-    _getCategories() {
-      const categories = this._commands
-        .map(v => v.category)
-        .filter(category => category);
-  
-      return [...new Set(categories)];
-    }
-  
-    _handleKeydown(e) {
-      if ($.key(e) === 'escape') this.toggle(false);
-    }
-  
-    _registerEvents() {
-      document.addEventListener('keydown', this._handleKeydown);
-    }
-  }
+        }
+      })
+      .join("");
+
+    return CONFIG.showKeys ? commandListWithKeys : commandListWithIcons;
+  }
+
+  _getCategories() {
+    const categories = this._commands
+      .map((v) => v.category)
+      .filter((category) => category);
+
+    return [...new Set(categories)];
+  }
+
+  _handleKeydown(e) {
+    if ($.key(e) === "escape") this.toggle(false);
+  }
+
+  _registerEvents() {
+    document.addEventListener("keydown", this._handleKeydown);
+  }
+}