feat(all): performanc, rendering + cqache,tags fix, text-stroke, etc

README.md

@@ -6,15 +6,14 @@
 </p>
 
 * Custom **journal icon** <a href="#-journal-icon">🡖</a>
-* **Favicons** for external links <a href="#-auto-favicons-for-external-links">🡖</a>
-* **Pages icons** for internal links & tags <a href="#-page-icons">🡖</a>
+* **Favicons** for external links (with caching) <a href="#-auto-favicons-for-external-links">🡖</a>
+* **Pages icons/colors** for internal links & tags (shows in content, sidebar, page title & tabs) <a href="#-page-icons">🡖</a>
     * Common page `icon::`
     * Icon for cases when the page is an alias
     * Inherit icon from page prop
-    * Inherit icons for cases when the prop is an alias
-    * Inherit icons from hierarchy root item or it's props
-    * Show inherited page icons on content links, sidebar, page title & tabs
-* Page links & tags **color** (with same inherit feature) - any valid CSS value (for ex [color names](https://enes.in/sorted-colors) ) <a href="#-page-colors">🡖</a>
+    * Inherit icon for cases when the prop is an alias
+    * Inherit icon from hierarchy root item or it's props
+* In addition page links & tags **color** `color: "value"` <a href="#-page-colors">🡖</a>
 * Page icons`icon::`extended from Emoji to hundreds icons set via Nerd fonts support <a href="#-custom-page-icons">🡖</a>
 
 ![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/logseq-awesome-links.png)
@@ -37,7 +36,7 @@ From Logseq store - `Plugins -> Marketplace`
 
 ### ⭐ Auto favicons for external links
 
-<img src="https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/favicons.png" width="640">
+<img src="https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/favicons.png" width="500">
 
 ### ✨ Page icons
 
@@ -68,16 +67,16 @@ To disable icon for specific page if it was inherited, but not needed
 ```
 icon:: none
 ```
-
-![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/page-icons.png)
+<img src="https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/page-icons.png" width="640">
 
 ### 🎨 Page colors
 
-To customize link color, add property _(to page or to inherited page)_ `color::` with double quotes.
+To customize link color, add property _(to page or to inherited page)_ `color::` with double quotes. Any valid CSS value (for ex [color names](https://enes.in/sorted-colors) )
 
 `color:: "#00ff00"`
 
-![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/page-colors.png)
+<img src="https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/page-colors.png" width="540">
+
 
 ![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/tag-colors.png)
 
@@ -93,16 +92,18 @@ Native Logseq props `icon::` extended with Nerd icons font:
 Banners & Tabs plugin support included 😎
 Feature can be disabled.
 
-![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/nerd-icons.png)
+<img src="https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/nerd-icons.png" width="640">
+
+<img src="https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/nerd.png" width="640">
 
-![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/nerd.png)
 
 ### ✨ Journal icon
 
 Can be customized in settings.
 Delete value to disable feature.
 
-![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/journal-icon.png)
+<img src="https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/journal-icon.png" width="500">
+
 
 ## What is Logseq?
 Logseq is a privacy-first, open-source knowledge base. Visit https://logseq.com for more information.
@@ -113,7 +114,7 @@ Logseq is a privacy-first, open-source knowledge base. Visit https://logseq.com
 * If you have any questions, issues or feature request, use the issue submission on GitHub: https://github.com/yoyurec/logseq-awesome-links/issues
 
 ## Credits
-* Icon - https://www.flaticon.com/free-icon/social-media_4089948?related_id=4089948
+* Icon - https://www.flaticon.com/free-icon/clicking_1721678
 
 ## License
 

package.json

@@ -16,7 +16,9 @@
     }
   },
   "dependencies": {
-    "@logseq/libs": "0.0.9"
+    "@logseq/libs": "0.0.9",
+    "fastdom": "^1.0.11",
+    "tinycolor2": "^1.4.2"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.1",

src/awesomeLinks.ts

@@ -2,51 +2,52 @@ import '@logseq/libs';
 
 import {
     globalContext,
-    doc, body, getDOMContainers,
+    getDOMContainers,
+    doc, body,
     pageIconsLoad, pageIconsUnload,
     nerdFontLoad, nerdFontUnload,
     faviconsLoad, faviconsUnload,
-    sidebarIconsLoad, sidebarIconsUnload,
     initLinksObserver, stopLinksObserver, runLinksObserver,
     settingsLoad,
-    tabIconsLoad, tabIconsUnload
+    initTabsObserver, runTabsObserver, stopTabsObserver,
 } from './modules/internal';
 import { checkUpdate } from './modules/utils';
 
 const registerPlugin = async () => {
     setTimeout(() => {
         if (doc.head) {
-            doc.head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" id="css-awesomeLinks" href="lsp://logseq.io/${globalContext.pluginID}/dist/assets/awesomeLinks.css">`)
+            doc.head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" id="css-awLi" href="lsp://logseq.io/${globalContext.pluginID}/dist/assets/awesomeLinks.css">`)
         }
     }, 500);
 }
 
 // Main logic runners
 const runStuff = async () => {
-    initLinksObserver();
     getDOMContainers();
+    body.classList.add(globalContext.isPluginEnabled);
+    nerdFontLoad();
     setTimeout(() => {
         pageIconsLoad();
         faviconsLoad();
-        nerdFontLoad();
-        body.classList.add('is-awesomeLinks');
-    }, 2000)
+    }, 2000);
     setTimeout(() => {
-        sidebarIconsLoad();
-        tabIconsLoad();
-        if (globalContext.pluginConfig?.featureFaviconsEnabled || globalContext.pluginConfig?.featurePageIconsEnabled) {
+        if (globalContext.pluginConfig.faviconsEnabled || globalContext.pluginConfig.pageIconsEnabled) {
+            initLinksObserver();
             runLinksObserver();
         }
-    }, 3000)
+        if (globalContext.pluginConfig.pageIconsEnabled) {
+            initTabsObserver();
+            runTabsObserver();
+        }
+    }, 4000);
 }
 const stopStuff = () => {
+    body.classList.remove(globalContext.isPluginEnabled);
     pageIconsUnload();
     faviconsUnload();
-    sidebarIconsUnload();
-    tabIconsUnload();
     nerdFontUnload();
     stopLinksObserver();
-    body.classList.remove('is-awesomeLinks');
+    stopTabsObserver();
 }
 
 // Main logseq on ready

src/modules/DOMContainers.ts

@@ -2,10 +2,12 @@ export let doc: Document;
 export let root: HTMLElement;
 export let body: HTMLElement;
 export let appContainer: HTMLElement | null;
+export let tabsPluginIframe: HTMLIFrameElement;
 
-export const getDOMContainers = async () => {
+export const getDOMContainers = () => {
     doc = parent.document;
     root = doc.documentElement;
     body = doc.body;
     appContainer = doc.getElementById('app-container');
+    tabsPluginIframe = doc.getElementById('logseq-tabs_iframe') as HTMLIFrameElement;
 }

src/modules/favicons/favIcons.ts

@@ -1,37 +1,44 @@
-import { doc, body } from '../DOMContainers';
 import {
+    doc,
     globalContext,
     stopLinksObserver
 } from '../internal';
+import { getBase64FromUrl } from '../utils';
 
 import './favicons.css';
 
 // External links favicons
-export const setFavicons = async (extLinkList?: NodeListOf<HTMLAnchorElement>) => {
+export const setFavicons = async (extLinkList?: HTMLElement[]) => {
     if (!extLinkList) {
-        extLinkList = doc.querySelectorAll('.external-link');
+        extLinkList = [...doc.querySelectorAll(globalContext.extLinksSelector)];
     }
     for (let i = 0; i < extLinkList.length; i++) {
-        const extLinkItem = extLinkList[i];
-        const oldFav = extLinkList[i].querySelector('.awLinks-fav-icon');
+        const extLinkItem = extLinkList[i] as HTMLAnchorElement;
+        const oldFav = extLinkList[i].querySelector('.awLi-favicon');
         if (oldFav) {
             oldFav.remove();
         }
         const { hostname, protocol } = new URL(extLinkItem.href);
         if ((protocol === 'http:') || (protocol === 'https:')) {
-            const faviconValue = `https://www.google.com/s2/favicons?domain=${hostname}&sz=32`;
+            let faviconData = null;
+            if (globalContext.favIconsCache.has(hostname)) {
+                faviconData = globalContext.favIconsCache.get(hostname);
+            }
+            if (!faviconData) {
+                faviconData = await getBase64FromUrl(`https://t3.gstatic.com/faviconV2?url=${protocol}${hostname}&size=32&client=social`);
+                globalContext.favIconsCache.set(hostname, faviconData);
+
+            }
             const fav = doc.createElement('img');
-            fav.src = faviconValue;
-            fav.width = 16;
-            fav.height = 16;
-            fav.classList.add('awLinks-fav-icon');
+            fav.classList.add('awLi-favicon');
+            fav.src = faviconData;
             extLinkItem.insertAdjacentElement('afterbegin', fav);
         }
     }
 }
 
 const removeFavicons = () => {
-    const favicons = doc.querySelectorAll('.awLinks-fav-icon');
+    const favicons = doc.querySelectorAll('.awLi-favicon');
     if (favicons.length) {
         for (let i = 0; i < favicons.length; i++) {
             favicons[i].remove();
@@ -40,24 +47,26 @@ const removeFavicons = () => {
 }
 
 export const toggleFaviconsFeature = () => {
-    if (globalContext.pluginConfig?.featureFaviconsEnabled) {
+    if (globalContext.pluginConfig.faviconsEnabled) {
         faviconsLoad();
     } else {
         faviconsUnload();
     }
 }
 
 export const faviconsLoad = async () => {
-    if (globalContext.pluginConfig?.featureFaviconsEnabled) {
+    if (globalContext.pluginConfig.faviconsEnabled) {
         setTimeout(() => {
+            globalContext.favIconsCache = new Map();
             setFavicons();
         }, 500);
     }
 }
 
 export const faviconsUnload = () => {
+    globalContext.favIconsCache.clear();
     removeFavicons();
-    if (!globalContext.pluginConfig?.featurePageIconsEnabled && !globalContext.pluginConfig?.featureFaviconsEnabled) {
+    if (!globalContext.pluginConfig.pageIconsEnabled && !globalContext.pluginConfig.faviconsEnabled) {
         stopLinksObserver();
     }
 }

src/modules/favicons/favicons.css

@@ -3,10 +3,10 @@
 .external-link::after {
     display: none !important;
 }
-.awLinks-fav-icon {
+.awLi-favicon {
     display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin: -3px 5px 0 0;
+    width: 1.1em;
+    height: 1.1em;
+    margin: -3px 0.34em 0 0;
     border-radius: 3px;
 }

src/modules/globals.ts

@@ -8,7 +8,19 @@ type globalContextType = {
 export const globalContext: globalContextType = {
     pluginID: PL.id,
     pluginConfig: null,
-    pageLinksSelector: '.tag, .page-ref:not(.page-property-key)',
-    titleSelector: '.ls-page-title, .journal-title .title',
-    tagHasBg: false
+    isPluginEnabled: 'is-awLi-enabled',
+    extLinksSelector: '.external-link',
+    pageLinksSelector: '.page-ref:not(.page-property-key), .tag, .references li a',
+    titleSelector: '.page-title, .journal-title .title',
+    sidebarLinkSelector: '.nav-contents-container .page-title',
+    tabLinkSelector: '.logseq-tab:not(.close-all) .logseq-tab-title',
+    tagHasBg: false,
+    themeBg: '',
+    favIconsCache: Object.create(null),
+    doc: parent.document,
+    root: parent.document.documentElement,
+    body: parent.document.body,
+    appContainer: parent.document.getElementById('app-container'),
+    tabsPluginIframe: parent.document.getElementById('logseq-tabs_iframe')
 };
+

src/modules/internal.ts

@@ -3,9 +3,5 @@ export * from './DOMContainers';
 export * from './settings/settings';
 export * from './linksObserver/linksObserver';
 export * from './pageIcons/pageIcons';
-export * from './pageIcons/queries';
-export * from './titleIcon/titleIcon';
-export * from './tabIcon/tabIcon';
-export * from './sidebarIcon/sidebarIcon';
 export * from './favicons/favIcons';
 export * from './nerdFont/nerdFont';