diff --git a/README.md b/README.md
index 29bea09..7c1eacf 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,10 @@
* **Favicons** for external links! 🡖
-* **Pages icons** for internal links 🡖
+* **Pages icons** for internal links🡖
+ * Common page `icon::`
+ * Aliased page icon
+ * Inherited from props page (+ place icon on page title & current tab)
* Page icons`icon::`extended from Emoji to hundreds icons set via Nerd fonts support 🡖
* Custom **Journal icons** 🡖
@@ -14,7 +17,7 @@
## Install
-From Logseq store - `Plugins -> Marketplace`.
+From Logseq store - `Plugins -> Marketplace`
@@ -33,18 +36,20 @@ From Logseq store - `Plugins -> Marketplace`.
### ✨ Page icons
Enable feature to show Logseq page (or aliased page) icon for internal links in content.
-In addition you can config icon inheriting from related page proprty, to avoid manual setting `icon::` for common pages.
+In addition you can config icon inheriting from page property referenced page, to avoid manual setting `icon::` for common pages.
For ex.:
* create "Projects" page, set `icon::` for it
* create "Some project" page, set `page-type:: [[Projects]]`
* set in plugin settings "Inherit icon from..." `page-type`
* ...and all pages with `page-type:: [[Projects]]` will have inherited "Projects" page icon!
+Inherited icons also will be shown on current page title, current tab (if "Tabs" plugin installed) and sidebar.
+
### ✨ Custom page icons
-3600+ icons combined from popular sets (Font Awesome, Material Design, Seti-UI, etc...)!
+3600+ icons combined from popular sets (Font Awesome, Material Design, SetiUI, etc...)!
Native Logseq props `icon::` extended with Nerd icons font:
* Search in collection ([Icons Cheat Sheet](https://www.nerdfonts.com/cheat-sheet)),
* select
@@ -52,6 +57,7 @@ Native Logseq props `icon::` extended with Nerd icons font:
* paste to `icon::` props
Banners & Tabs plugin support included 😎
+Feature can be disabled.
@@ -60,6 +66,7 @@ Banners & Tabs plugin support included 😎
### ✨ Journal icon
Can be customized in settings.
+Delete value to disable feature.
diff --git a/screenshots/settings.png b/screenshots/settings.png
index e238b40..2eea167 100644
Binary files a/screenshots/settings.png and b/screenshots/settings.png differ
diff --git a/src/css/awesomeLinks.css b/src/css/awesomeLinks.css
index 05b664b..35fd19d 100644
--- a/src/css/awesomeLinks.css
+++ b/src/css/awesomeLinks.css
@@ -30,6 +30,10 @@
line-height: 1.2em;
width: 1.4em;
}
+/* sidebar */
+.awLinks-sidebar-icon + .page-icon {
+ display: none !important;
+}
/* content */
.is-awesomeLinks-int .page-icon.awLinks-page-icon {
display: inline-block;
diff --git a/src/js/awesomeLinks.ts b/src/js/awesomeLinks.ts
index 6500af9..9f2ef50 100644
--- a/src/js/awesomeLinks.ts
+++ b/src/js/awesomeLinks.ts
@@ -11,6 +11,7 @@ import { pageIconsLoad, pageIconsUnload, toggleIconsFeature } from './modules/in
import { nerdFontLoad, nerdFontUnload, toggleNerdFonFeature } from './modules/internal';
import { faviconsLoad, faviconsUnload, toggleFaviconsFeature } from './modules/internal';
import { journalIconsLoad, journalIconsUnload, toggleJournalIconFeature } from './modules/internal';
+import { sidebarIconsLoad, sidebarIconsUnload } from './modules/internal';
import { stopLinksObserver, runLinksObserver, initLinksObserver } from './modules/internal';
import '../css/awesomeLinks.css';
@@ -32,6 +33,7 @@ const runStuff = async () => {
nerdFontLoad();
faviconsLoad();
journalIconsLoad();
+ sidebarIconsLoad();
if (globalContext.pluginConfig?.featureFaviconsEnabled || globalContext.pluginConfig?.featurePageIconsEnabled) {
runLinksObserver();
}
@@ -43,6 +45,7 @@ const stopStuff = () => {
nerdFontUnload();
faviconsUnload();
journalIconsUnload();
+ sidebarIconsUnload();
stopLinksObserver();
body.classList.remove('is-awesomeLinks');
}
diff --git a/src/js/modules/favIcons.ts b/src/js/modules/favIcons.ts
index 7799a9b..af35a82 100644
--- a/src/js/modules/favIcons.ts
+++ b/src/js/modules/favIcons.ts
@@ -3,7 +3,10 @@ import { doc, body } from './DOMContainers';
import { stopLinksObserver } from './internal';
// External links favicons
-export const setFavicons = async (extLinkList: NodeListOf) => {
+export const setFavicons = async (extLinkList?: NodeListOf | HTMLAnchorElement[]) => {
+ if (!extLinkList) {
+ extLinkList = doc.querySelectorAll('.external-link');
+ }
for (let i = 0; i < extLinkList.length; i++) {
const oldFav = extLinkList[i].querySelector('.page-icon.awLinks-link-icon');
if (oldFav) {
@@ -36,8 +39,7 @@ const removeFavicons = () => {
export const faviconsLoad = async () => {
if (globalContext.pluginConfig?.featureFaviconsEnabled) {
setTimeout(() => {
- const extLinkList: NodeListOf = doc.querySelectorAll('.external-link');
- setFavicons(extLinkList);
+ setFavicons();
}, 500);
}
}
diff --git a/src/js/modules/internal.ts b/src/js/modules/internal.ts
index f297f02..1084c1f 100644
--- a/src/js/modules/internal.ts
+++ b/src/js/modules/internal.ts
@@ -5,3 +5,4 @@ export * from './nerdFont';
export * from './journalIcons';
export * from './favIcons';
export * from './titleIcon';
+export * from './sidebarIcon';
diff --git a/src/js/modules/linksObserver.ts b/src/js/modules/linksObserver.ts
index dd7873d..d8ecf2b 100644
--- a/src/js/modules/linksObserver.ts
+++ b/src/js/modules/linksObserver.ts
@@ -1,5 +1,5 @@
import { appContainer } from './DOMContainers';
-import { setFavicons, setPageIcons, setTitleIcon } from './internal';
+import { setFavicons, setPageIcons, setSidebarIcons, setTitleIcon } from './internal';
let linksObserver: MutationObserver, linksObserverConfig: MutationObserverInit;
@@ -20,15 +20,23 @@ const linksObserverCallback: MutationCallback = function (mutationsList) {
if (titleEl) {
setTitleIcon(titleEl);
}
+ // sidebar icon
+ console.log(addedNode);
+ if (addedNode.classList.contains('favorite-item') || addedNode.classList.contains('recent-item')) {
+ const sidebarLink = addedNode.querySelector('a') as HTMLAnchorElement;
+ if (sidebarLink) {
+ setSidebarIcons([sidebarLink]);
+ }
+ }
// favicons
- const extLinkList = addedNode.querySelectorAll('.external-link') as NodeListOf;
- if (extLinkList.length) {
- setFavicons(extLinkList);
+ const extLink = addedNode.querySelector('.external-link') as HTMLAnchorElement;
+ if (extLink) {
+ setFavicons([extLink]);
}
// page icons
- const linkList = addedNode.querySelectorAll('.ls-block .page-ref:not(.page-property-key)') as NodeListOf;
- if (linkList.length) {
- setPageIcons(linkList);
+ const pageLink = addedNode.querySelector('.ls-block .page-ref:not(.page-property-key)') as HTMLAnchorElement;
+ if (pageLink) {
+ setPageIcons([pageLink]);
}
}
}
diff --git a/src/js/modules/pageIcons.ts b/src/js/modules/pageIcons.ts
index 364a63d..5a3219a 100644
--- a/src/js/modules/pageIcons.ts
+++ b/src/js/modules/pageIcons.ts
@@ -4,7 +4,10 @@ import { searchIcon } from './queries';
import { setTitleIcon, removeTitleIcon } from './internal';
import { stopLinksObserver } from './internal';
-export const setPageIcons = async (linkList: NodeListOf) => {
+export const setPageIcons = async (linkList?: NodeListOf | HTMLAnchorElement[]) => {
+ if (!linkList) {
+ linkList = doc.querySelectorAll('.ls-block .page-ref:not(.page-property-key)');
+ }
for (let i = 0; i < linkList.length; i++) {
const linkItem = linkList[i];
const oldPageIcon = linkItem.querySelector('.page-icon.awLinks-page-icon');
@@ -34,8 +37,7 @@ const removePageIcons = () => {
}
export const pageIconsLoad = async () => {
- const linkList: NodeListOf = doc.querySelectorAll('.ls-block .page-ref:not(.page-property-key)');
- setPageIcons(linkList);
+ setPageIcons();
setTitleIcon();
}
diff --git a/src/js/modules/sidebarIcon.ts b/src/js/modules/sidebarIcon.ts
new file mode 100644
index 0000000..7b02141
--- /dev/null
+++ b/src/js/modules/sidebarIcon.ts
@@ -0,0 +1,40 @@
+import { doc } from './DOMContainers';
+import { searchIcon } from './queries';
+
+export const setSidebarIcons = async (sidebarLinksList?: NodeListOf | HTMLAnchorElement[]) => {
+ if (!sidebarLinksList) {
+ sidebarLinksList = doc.querySelectorAll('.nav-contents-container :is(.favorite-item , .recent-item) .items-center');
+ }
+ for (let i = 0; i < sidebarLinksList.length; i++) {
+ const sidebarLinkItem = sidebarLinksList[i];
+ const defaultIcon = sidebarLinkItem.querySelector('.ui__icon');
+ if (!defaultIcon) {
+ continue;
+ }
+ const pageTitle = sidebarLinkItem.querySelector('.page-title')?.textContent;
+ if (!pageTitle) {
+ continue;
+ }
+ const pageIcon = await searchIcon(pageTitle);
+ if (pageIcon) {
+ sidebarLinkItem.insertAdjacentHTML('afterbegin', ``);
+ }
+ }
+}
+
+const removeSidebarIcons = () => {
+ const pageIcons = doc.querySelectorAll('.nav-contents-container .page-icon.awLinks-sidebar-icon');
+ if (pageIcons.length) {
+ for (let i = 0; i < pageIcons.length; i++) {
+ pageIcons[i].remove();
+ }
+ }
+}
+
+export const sidebarIconsLoad = async () => {
+ setSidebarIcons();
+}
+
+export const sidebarIconsUnload = () => {
+ removeSidebarIcons();
+}
diff --git a/src/js/modules/titleIcon.ts b/src/js/modules/titleIcon.ts
index eeb3c1f..2007fc8 100644
--- a/src/js/modules/titleIcon.ts
+++ b/src/js/modules/titleIcon.ts
@@ -1,14 +1,16 @@
import { doc } from './DOMContainers';
import { getInheritedPropsIcon } from './queries';
-export const setTitleIcon = async (pageNameEl?: Element) => {
- const title = pageNameEl || doc.querySelector('.ls-page-title');
- if (title && !title.querySelector('.page-icon')) {
- const pageName = title.textContent;
+export const setTitleIcon = async (pageTitleEl?: Element | null) => {
+ if (!pageTitleEl) {
+ pageTitleEl = doc.querySelector('.ls-page-title');
+ }
+ if (pageTitleEl && !pageTitleEl.querySelector('.page-icon')) {
+ const pageName = pageTitleEl.textContent;
if (pageName) {
const titleIcon = await getInheritedPropsIcon(pageName);
if (titleIcon) {
- title.insertAdjacentHTML('afterbegin', `${titleIcon}`);
+ pageTitleEl.insertAdjacentHTML('afterbegin', `${titleIcon}`);
setTabIcon(titleIcon);
}
}