- Re-added font-awesome for the header icons. This time I'm only impo…

…rting the icons needed instead of the while icon font. [#38](#38)

CHANGELOG.md

@@ -3,6 +3,11 @@
 4chan XT uses a different user script namespace, so to migrate you need to export settings from 4chan X, and import them
 in XT.
 
+### Unreleased
+
+- Re-added font-awesome for the header icons. This time I'm only importing the icons needed instead of the while icon
+  font. [#38](https://github.com/TuxedoTako/4chan-xt/issues/38)
+
 ### v2.6.0 (2024-03-30)
 
 - Added an option to Update stats more often and add purge position when a thread is close to getting purged, for anons who manage general threads. [#39](https://github.com/TuxedoTako/4chan-xt/issues/39)

LICENSE

@@ -1,9 +1,11 @@
 /*
-* 4chan X
+* 4chan XT
 *
 * Licensed under the MIT license.
-* https://github.com/ccd0/4chan-x/blob/master/LICENSE
+* https://github.com/TuxedoTako/4chan-xt/blob/project-XT/LICENSE
 *
+* 4chan X Copyright © 2009-2023 ccd0
+* https://github.com/ccd0/4chan-x
 * Appchan X Copyright © 2013-2016 Zixaphir <[email protected]>
 * http://zixaphir.github.io/appchan-x/ 
 * 4chan x Copyright © 2009-2011 James Campos <[email protected]>
@@ -73,5 +75,8 @@
 * src/Monitoring/ThreadUpdater/beep.wav from http://freesound.org/people/pierrecartoons1979/sounds/90112/
 *   cc-by-nc-3.0
 *
+* Font Awesome (https://fontawesome.com)
+*   license: CC BY 4.0 (https://fontawesome.com/license/free#icons)
+*
 * Icons used to identify various websites are property of the respective websites.
 */

package.json

@@ -102,6 +102,9 @@
     }
   },
   "devDependencies": {
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-terser": "^0.4.1",
     "@rollup/plugin-typescript": "^11.0.0",
     "@rollup/pluginutils": "^5.0.2",

src/Filtering/PostHiding.ts

@@ -7,12 +7,6 @@ import Menu from "../Menu/Menu";
 import $ from "../platform/$";
 import Recursive from "./Recursive";
 
-/*
- * decaffeinate suggestions:
- * DS102: Remove unnecessary code created because of implicit returns
- * DS207: Consider shorter variations of null checks
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
- */
 var PostHiding = {
   init() {
     if (!['index', 'thread'].includes(g.VIEW) || (!Conf['Reply Hiding Buttons'] && !(Conf['Menu'] && Conf['Reply Hiding Link']))) { return; }
@@ -22,7 +16,7 @@ var PostHiding = {
     }
 
     this.db = new DataBoard('hiddenPosts');
-    return Callbacks.Post.push({
+    Callbacks.Post.push({
       name: 'Reply Hiding',
       cb:   this.node
     });
@@ -51,9 +45,9 @@ var PostHiding = {
     if (sa = g.SITE.selectors.sideArrows) {
       const sideArrows = $(sa, this.nodes.root);
       $.replace(sideArrows.firstChild, button);
-      return sideArrows.className = 'replacedSideArrows';
+      sideArrows.className = 'replacedSideArrows';
     } else {
-      return $.prepend(this.nodes.info, button);
+      $.prepend(this.nodes.info, button);
     }
   },
 
@@ -146,7 +140,7 @@ var PostHiding = {
             {el: replies}
         ]});
 
-      return Menu.menu.addEntry({
+      Menu.menu.addEntry({
         el: hideStubLink,
         order: 15,
         open(post) {
@@ -177,7 +171,7 @@ var PostHiding = {
         return;
       }
       PostHiding.saveHiddenState(post, true, thisPost, makeStub, replies);
-      return $.event('CloseMenu');
+      $.event('CloseMenu');
     },
 
     show() {
@@ -197,7 +191,7 @@ var PostHiding = {
       if (data = PostHiding.db.get({boardID: post.board.ID, threadID: post.thread.ID, postID: post.ID})) {
         PostHiding.saveHiddenState(post, !(thisPost && replies), !thisPost, data.makeStub, !replies);
       }
-      return $.event('CloseMenu');
+      $.event('CloseMenu');
     },
     hideStub() {
       let data;
@@ -237,16 +231,16 @@ var PostHiding = {
         makeStub,
         hideRecursively
       };
-      return PostHiding.db.set(data);
+      PostHiding.db.set(data);
     } else {
-      return PostHiding.db.delete(data);
+      PostHiding.db.delete(data);
     }
   },
 
   toggle() {
     const post = Get.postFromNode(this);
     PostHiding[(post.isHidden ? 'show' : 'hide')](post);
-    return PostHiding.saveHiddenState(post, post.isHidden);
+    PostHiding.saveHiddenState(post, post.isHidden);
   },
 
   hide(post, makeStub=Conf['Stubs'], hideRecursively=Conf['Recursive Hiding']) {
@@ -275,7 +269,7 @@ var PostHiding = {
     if (Conf['Menu']) {
       $.add(post.nodes.stub, Menu.makeButton(post));
     }
-    return $.prepend(post.nodes.root, post.nodes.stub);
+    $.prepend(post.nodes.root, post.nodes.stub);
   },
 
   show(post, showRecursively=Conf['Recursive Hiding']) {

src/General/Header.ts

@@ -604,10 +604,6 @@ var Header = {
       id: `shortcut-${id}`,
       className: 'shortcut brackets-wrap'
     });
-    if (icon) {
-      shortcut.style.setProperty('--icon', `"${icon}"`);
-      shortcut.classList.add('icon-shortcut');
-    }
     $.add(shortcut, el);
     shortcut.dataset.index = index.toString();
     for (var item of $$('[data-index]', Header.shortcuts)) {

src/General/Index.js

@@ -31,6 +31,7 @@ import PageList from './Index/PageList.html';
 import BoardConfig from './BoardConfig';
 import Get from './Get';
 import { dict, SECOND } from '../platform/helpers';
+import Icon from '../Icons/icon';
 
 var Index = {
   showHiddenThreads: false,
@@ -83,11 +84,10 @@ var Index = {
     this.button = $.el('a', {
       title: 'Refresh',
       href: 'javascript:;',
-      textContent: 'Refresh',
-      className: 'bigger-icon',
     });
+    Icon.set(this.button, 'refresh', 'Refresh')
     $.on(this.button, 'click', () => Index.update());
-    Header.addShortcut('index-refresh', this.button, 590, '🗘');
+    Header.addShortcut('index-refresh', this.button, 590);
 
     // Header "Index Navigation" submenu
     const entries = [];

src/General/Settings.tsx

@@ -30,22 +30,22 @@ import { c, Conf, d, doc, E, g } from '../globals/globals';
 import Header from './Header';
 import h, { hFragment } from '../globals/jsx';
 import { dict, platform } from '../platform/helpers';
+import Icon from '../Icons/icon';
 
 var Settings = {
   dialog: undefined as HTMLDivElement | undefined,
 
   init() {
     // 4chan X settings link
     const link = $.el('a', {
-      className:   'settings-link',
-      textContent: 'Settings',
-      title:       `${meta.name} Settings`,
-      href:        'javascript:;'
-    }
-    );
+      className: 'settings-link',
+      title:     `${meta.name} Settings`,
+      href:      'javascript:;'
+    });
+    Icon.set(link, 'wrench', 'Settings');
     $.on(link, 'click', Settings.open);
 
-    Header.addShortcut('settings', link, 820, '🔧︎');
+    Header.addShortcut('settings', link, 820);
 
     const add = this.addSection;
 

src/Icons/icon.ts

@@ -0,0 +1,38 @@
+import { E } from '../globals/globals';
+import $ from '../platform/$';
+import { svgPathData as imgSvg, width as imgW, height as imgH } from "@fa/faImage";
+import { svgPathData as eyeSvg, width as eyeW, height as eyeH } from "@fa/faEye";
+import { svgPathData as expandSvg, width as expandW, height as expandH } from "@fas/faUpRightAndDownLeftFromCenter";
+import { svgPathData as commentSvg, width as commentW, height as commentH } from "@fa/faComment";
+import { svgPathData as refreshSvg, width as refreshW, height as refreshH } from "@fas/faRotate";
+import { svgPathData as wrenchSvg, width as wrenchW, height as wrenchH } from "@fas/faWrench";
+import { svgPathData as boltSvg, width as boltW, height as boltH } from "@fas/faBolt";
+
+
+const toSvg = (svgPathData: string, width: string | number, height: string | number) => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 ${width} ${height}" preserveAspectRatio="true">` +
+    `<path d="${svgPathData}" fill="currentColor" /></svg>`;
+}
+
+const icons = new Map<string, string>()
+  .set('image', toSvg(imgSvg, imgW, imgH))
+  .set('eye', toSvg(eyeSvg, eyeW, eyeH))
+  .set('expand', toSvg(expandSvg, expandW, expandH))
+  .set('comment', toSvg(commentSvg, commentW, commentH))
+  .set('refresh', toSvg(refreshSvg, refreshW, refreshH))
+  .set('wrench', toSvg(wrenchSvg, wrenchW, wrenchH))
+  .set('bolt', toSvg(boltSvg, boltW, boltH));
+
+
+var Icon = {
+  set (node: HTMLElement, name: string, altText?: string) {
+    const html = icons.get(name);
+    if (altText) {
+     node.innerHTML = `<span class="icon--alt-text">${E(altText)}</span>${html}`;
+    } else {
+      node.innerHTML = html;
+    }
+  }
+};
+
+export default Icon;

src/Icons/icons.css

@@ -0,0 +1,22 @@
+/* Icons */
+svg.icon {
+  height: 14px;
+}
+:root.shortcut-icons #shortcuts .shortcut {
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+  height: 14px;
+}
+:root.shortcut-icons #shortcuts .icon--alt-text,
+:root:not(.shortcut-icons) .shortcut svg {
+  display: none;
+}
+:root.shortcut-icons .shortcut.brackets-wrap::before,
+:root.shortcut-icons .shortcut.brackets-wrap::after{
+  display: none;
+}
+@keyframes spin {
+  0% {transform:rotate(0deg);}
+  100% {transform:rotate(359deg);}
+}

src/Images/Gallery.js

@@ -19,6 +19,7 @@ import { Conf, d, doc, g } from '../globals/globals';
 import UI from '../General/UI';
 import Get from '../General/Get';
 import { debounce, dict, SECOND } from '../platform/helpers';
+import Icon from '../Icons/icon';
 
 var Gallery = {
   init() {
@@ -29,12 +30,12 @@ var Gallery = {
     const el = $.el('a', {
       href: 'javascript:;',
       title: 'Gallery',
-      textContent: 'Gallery',
     });
+    Icon.set(el, 'image', 'Gallery');
 
     $.on(el, 'click', this.cb.toggle);
 
-    Header.addShortcut('gallery', el, 530, '🖼︎');
+    Header.addShortcut('gallery', el, 530);
 
     return Callbacks.Post.push({
       name: 'Gallery',