Merge branch 'master' into issue-95

.github/workflows/auto-release.yml

@@ -20,6 +20,10 @@ jobs:
           ref: master
           # Ensure custom credentials are used when pushing
           persist-credentials: false
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12.x
       - name: Update simple-icons
         id: update
         run: |

.github/workflows/publish.yml

@@ -35,7 +35,7 @@ jobs:
       - name: Build Website
         run: npm run build
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@4.1.7
+        uses: JamesIves/github-pages-deploy-action@4.2.1
         with:
           branch: gh-pages
           folder: _site

.gitignore

@@ -9,3 +9,4 @@ node_modules/
 .cache/
 _site/
 tests/_artifacts/
+.DS_Store

README.md

@@ -1,7 +1,5 @@
 <p align="center">
-<a href="https://simpleicons.org/">
-<img src="https://simpleicons.org/icons/simpleicons.svg" alt="Simple Icons" width=64 height=64>
-</a>
+<img src="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/simpleicons.svg#gh-light-mode-only" alt="Simple Icons" width=70><img src="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/assets/readme/simpleicons-white.svg#gh-dark-mode-only" alt="Simple Icons" width=70>
 <h3 align="center">Simple Icons: <em>Website</em></h3>
 <p align="center">
 Website for the Simple Icons library for popular brands. Find it at <a href="https://simpleicons.org">SimpleIcons.org</a>. Contributions, corrections & requests can be made on GitHub.</p>

package.json

@@ -31,39 +31,40 @@
     "test:unit": "cross-env TEST_ENV=unit jest"
   },
   "dependencies": {
-    "simple-icons": "6.0.0"
+    "fast-fuzzy": "1.11.1",
+    "simple-icons": "6.7.0"
   },
   "devDependencies": {
-    "@babel/core": "7.16.0",
-    "@babel/preset-env": "7.16.4",
-    "@prettier/plugin-pug": "1.18.0",
+    "@babel/core": "7.16.7",
+    "@babel/preset-env": "7.16.7",
+    "@prettier/plugin-pug": "1.19.1",
     "anywhere": "1.5.0",
-    "autoprefixer": "10.4.0",
-    "babel-jest": "27.4.2",
-    "copy-webpack-plugin": "10.0.0",
+    "autoprefixer": "10.4.2",
+    "babel-jest": "27.4.6",
+    "copy-webpack-plugin": "10.2.0",
     "cross-env": "7.0.3",
     "css-loader": "6.5.1",
-    "css-minimizer-webpack-plugin": "3.2.0",
+    "css-minimizer-webpack-plugin": "3.3.1",
     "get-relative-luminance": "1.0.0",
     "html-webpack-plugin": "5.5.0",
     "husky": "7.0.4",
     "is-ci": "3.0.1",
-    "jest": "27.4.3",
-    "jest-puppeteer": "6.0.2",
-    "mini-css-extract-plugin": "2.4.5",
+    "jest": "27.4.7",
+    "jest-puppeteer": "6.0.3",
+    "mini-css-extract-plugin": "2.4.6",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.4",
+    "postcss": "8.4.5",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.2.1",
-    "prettier": "2.5.0",
+    "prettier": "2.5.1",
     "pug": "3.0.2",
     "pug-lexer": "5.0.1",
     "pug-loader": "2.4.0",
-    "puppeteer": "12.0.1",
+    "puppeteer": "13.0.1",
     "rimraf": "3.0.2",
     "sdown": "1.0.2",
     "svgo": "2.8.0",
-    "webpack": "5.64.4",
+    "webpack": "5.65.0",
     "webpack-cli": "4.9.1"
   },
   "engines": {

public/index.pug

@@ -30,6 +30,12 @@ html(lang='en-US')
     )
     link(rel='license', href='license.txt')
     link(rel='canonical', href=pageUrl)
+    svg(xmlns='http://www.w3.org/2000/svg', style='display: none')
+      defs
+        symbol#cp
+          path(
+            d='M11.2 0a.8.8 0 0 0-.8.8v11.4L7.26 9.44a.803.803 0 0 0-1.13.074l-1.05 1.2a.8.8 0 0 0 .073 1.13l6.33 5.54a.795.795 0 0 0 1.05 0l6.32-5.54a.8.8 0 0 0 .074-1.13l-1.05-1.2a.804.804 0 0 0-1.13-.074l-3.14 2.76V.8a.8.8 0 0 0-.8-.8zm-8 20.8a.8.8 0 0 0-.8.8v1.6a.8.8 0 0 0 .8.8h17.6a.8.8 0 0 0 .8-.8v-1.6a.8.8 0 0 0-.8-.8z'
+          )
 
   body.no-js.order-alphabetically.layout-comfortable.download-svg(
     tabindex='-1'
@@ -360,7 +366,7 @@ html(lang='en-US')
                 disabled
               )
                 img.icon-preview(
-                  src=`data:image/svg+xml;base64,${icon.base64Svg}`,
+                  src=`icons/${icon.slug}.svg`,
                   loading='lazy',
                   alt=`${icon.title} icon`
                 )

public/scripts/copy.js

@@ -5,7 +5,7 @@ function setCopied($el) {
   setTimeout(() => $el.classList.remove('copied'), COPIED_TIMEOUT);
 }
 
-export default function initCopyButtons(window, document, navigator) {
+export default function initCopyButtons(document, navigator, fetch) {
   const $copyInput = document.getElementById('copy-input');
   const $colorButtons = document.querySelectorAll('.copy-color');
   const $svgButtons = document.querySelectorAll('.copy-svg');
@@ -23,16 +23,20 @@ export default function initCopyButtons(window, document, navigator) {
 
   $svgButtons.forEach(($svgButton) => {
     $svgButton.removeAttribute('disabled');
-    $svgButton.addEventListener('click', (event) => {
+    $svgButton.addEventListener('click', async (event) => {
       event.preventDefault();
 
       const $img = $svgButton.querySelector('img');
-      const srcValue = $img.getAttribute('src');
-      const base64Svg = srcValue.replace('data:image/svg+xml;base64,', '');
-
-      const value = window.atob(base64Svg);
-      copyValue(value);
-      setCopied($svgButton);
+      const iconUrl = $img.getAttribute('src');
+
+      try {
+        const data = await fetch(iconUrl);
+        const svgValue = await data.text();
+        copyValue(svgValue);
+        setCopied($svgButton);
+      } catch (err) {
+        console.error(err);
+      }
     });
   });
 

public/scripts/download-type.js

@@ -24,6 +24,8 @@ export default function initDownloadType(document, storage) {
   if (storage.hasItem(STORAGE_KEY_DOWNLOAD_TYPE)) {
     const storedDownloadType = storage.getItem(STORAGE_KEY_DOWNLOAD_TYPE);
     selectDownloadType(storedDownloadType);
+  } else {
+    storage.setItem(STORAGE_KEY_DOWNLOAD_TYPE, DEFAULT_DOWNLOAD_TYPE);
   }
 
   $downloadPdf.addEventListener('click', (event) => {

public/scripts/index.js

@@ -15,7 +15,7 @@ document.body.classList.remove('no-js');
 
 const storage = newStorage(localStorage);
 initColorScheme(document, storage);
-initCopyButtons(window, document, navigator);
+initCopyButtons(document, navigator, fetch);
 const orderingControls = initOrdering(document, storage);
 initSearch(window.history, document, orderingControls, domUtils);
 initDownloadType(document, storage);

public/scripts/search.js

@@ -1,5 +1,6 @@
 import { ORDER_BY_RELEVANCE } from './ordering.js';
 import { decodeURIComponent, debounce, normalizeSearchTerm } from './utils.js';
+import { Searcher } from 'fast-fuzzy';
 
 const QUERY_PARAMETER = 'q';
 
@@ -13,23 +14,6 @@ function getQueryFromParameter(location, parameter) {
   return '';
 }
 
-function getScore(query, iconName) {
-  let score = iconName.length - query.length;
-  let index = 0;
-
-  for (const letter of query) {
-    index = iconName.indexOf(letter, index);
-    if (index === -1) {
-      return -1;
-    }
-
-    score += index;
-    index++;
-  }
-
-  return score;
-}
-
 function setSearchQueryInURL(history, path, query) {
   if (query !== '') {
     history.replaceState(
@@ -51,7 +35,9 @@ export default function initSearch(history, document, ordering, domUtils) {
   const $orderByRelevance = document.getElementById('order-relevance');
   const $gridItemIfEmpty = document.querySelector('.grid-item--if-empty');
   const $icons = document.querySelectorAll('.grid-item[data-brand]');
-
+  const searcher = new Searcher($icons, {
+    keySelector: (obj) => obj.dataset.brand,
+  });
   $searchInput.disabled = false;
   $searchInput.focus();
   $searchInput.addEventListener(
@@ -67,6 +53,7 @@ export default function initSearch(history, document, ordering, domUtils) {
     event.preventDefault();
     $searchInput.value = '';
     search('');
+    $searchInput.focus();
   });
 
   // Load search query if present
@@ -79,33 +66,38 @@ export default function initSearch(history, document, ordering, domUtils) {
   function search(rawQuery) {
     setSearchQueryInURL(history, document.location.pathname, rawQuery);
     const query = normalizeSearchTerm(rawQuery);
-    if (query !== '') {
-      domUtils.showElement($searchClear);
-      domUtils.showElement($orderByRelevance);
-      domUtils.addClass($orderByRelevance, 'last__button');
-      domUtils.removeClass($orderByColor, 'last__button');
-      if (activeQuery === '') {
-        ordering.selectOrdering(ORDER_BY_RELEVANCE);
-      }
-    } else {
+    if (!query) {
       domUtils.hideElement($searchClear);
       domUtils.hideElement($orderByRelevance);
       domUtils.removeClass($orderByRelevance, 'last__button');
       domUtils.addClass($orderByColor, 'last__button');
       if (ordering.currentOrderingIs(ORDER_BY_RELEVANCE)) {
         ordering.resetOrdering();
       }
+      domUtils.hideElement($gridItemIfEmpty);
+
+      $icons.forEach(($icon) => domUtils.showElement($icon));
+      return;
+    }
+
+    domUtils.showElement($searchClear);
+    domUtils.showElement($orderByRelevance);
+    domUtils.addClass($orderByRelevance, 'last__button');
+    domUtils.removeClass($orderByColor, 'last__button');
+
+    if (activeQuery === '') {
+      ordering.selectOrdering(ORDER_BY_RELEVANCE);
     }
 
+    const result = searcher.search(query);
     let noResults = true;
     $icons.forEach(($icon) => {
-      const brandName = $icon.getAttribute('data-brand');
-      const score = getScore(query, brandName);
-      if (score < 0) {
+      const score = result.indexOf($icon);
+      if (score === -1) {
         $icon.style.removeProperty('--order-relevance');
         domUtils.hideElement($icon);
       } else {
-        $icon.style.setProperty('--order-relevance', score);
+        $icon.style.setProperty('--order-relevance', 1 + score);
         domUtils.showElement($icon);
         noResults = false;
       }

public/scripts/utils.js

@@ -1,3 +1,20 @@
+const NORMALIZE_SEARCH_TERM_REPLACEMENTS = {
+  đ: 'd',
+  ħ: 'h',
+  ı: 'i',
+  ĸ: 'k',
+  ŀ: 'l',
+  ł: 'l',
+  ß: 'ss',
+  ŧ: 't',
+};
+
+const NORMALIZE_SEARCH_TERM_CHARS_REGEX = RegExp(
+  Object.keys(NORMALIZE_SEARCH_TERM_REPLACEMENTS).join('|'),
+  'g',
+);
+const NORMALIZE_SEARCH_TERM_RANGE_REGEX = RegExp('[\u0300-\u036f]', 'g');
+
 module.exports = {
   decodeURIComponent: decodeURIComponent,
   debounce: function (func, wait, immediate) {
@@ -32,16 +49,11 @@ module.exports = {
   },
   normalizeSearchTerm: function (value) {
     return value
-      .toLowerCase()
-      .replace(/đ/g, 'd')
-      .replace(/ħ/g, 'h')
-      .replace(/ı/g, 'i')
-      .replace(/ĸ/g, 'k')
-      .replace(/ŀ/g, 'l')
-      .replace(/ł/g, 'l')
-      .replace(/ß/g, 'ss')
-      .replace(/ŧ/g, 't')
+      .replace(
+        NORMALIZE_SEARCH_TERM_CHARS_REGEX,
+        (char) => NORMALIZE_SEARCH_TERM_REPLACEMENTS[char],
+      )
       .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '');
+      .replace(NORMALIZE_SEARCH_TERM_RANGE_REGEX, '');
   },
 };

public/stylesheet.css

@@ -439,6 +439,7 @@ a {
     justify-content: flex-end;
     margin-bottom: 0.5rem;
     position: relative;
+    top: -1.2rem;
   }
 }