Skip to content

Commit

Permalink
feat(page link): add coloring support via props
Browse files Browse the repository at this point in the history
  • Loading branch information
@yoyurec
yoyurec committed Oct 13, 2022
1 parent 5bd2289 commit 5860a43
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 63 deletions.
5 changes: 5 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
* 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 color (with same inherit feature)
* Page icons`icon::`extended from Emoji to hundreds icons set via Nerd fonts support <a href="#-custom-page-icons">🡖</a>
* Custom **Journal icons** <a href="#-journal-icon">🡖</a>

Expand Down Expand Up @@ -63,6 +64,10 @@ To disable icon for custom links - start link text with space:

![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/page-icons.png)

### 🎨 Page colors

To customize link color, add property (top page, to inherited page) `color::` with HEX value without hash `#` to not make it a tag!)

### ✨ Custom page icons

3600+ icons combined from popular sets (Font Awesome, Material Design, SetiUI, etc...)!
Expand Down
6 changes: 4 additions & 2 deletions src/awesomeLinks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,13 @@ const runStuff = async () => {
journalIconsLoad();
sidebarIconsLoad();
nerdFontLoad();
body.classList.add('is-awesomeLinks');
}, 1000)
setTimeout(() => {
if (globalContext.pluginConfig?.featureFaviconsEnabled || globalContext.pluginConfig?.featurePageIconsEnabled) {
runLinksObserver();
}
body.classList.add('is-awesomeLinks');
}, 1000)
}, 3000)
}
const stopStuff = () => {
pageIconsUnload();
Expand Down
19 changes: 12 additions & 7 deletions src/modules/pageIcons/pageIcons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
doc, body,
setTitleIcon, removeTitleIcon,
stopLinksObserver,
searchIcon
searchProps
} from '../internal';

import './pageIcons.css';
Expand All @@ -13,8 +13,6 @@ export const setPageIcons = async (linkList?: NodeListOf<HTMLAnchorElement>) =>
linkList = doc.querySelectorAll(globalContext.pageLinksSelector);
}
for (let i = 0; i < linkList.length; i++) {
let pageIcon = '';
let pageTitle = '';
const linkItem = linkList[i];
const oldPageIcon = linkItem.querySelector('.page-icon.awLinks-page-icon');
if (oldPageIcon) {
Expand All @@ -24,13 +22,20 @@ export const setPageIcons = async (linkList?: NodeListOf<HTMLAnchorElement>) =>
if (linkText && linkText.startsWith(' ')) {
continue;
}
pageTitle = linkItem.getAttribute('data-ref') || '';
const pageTitle = linkItem.getAttribute('data-ref') || '';
if (!pageTitle) {
continue;
}
pageIcon = await searchIcon(pageTitle);
if (pageIcon) {
linkItem.insertAdjacentHTML('afterbegin', `<span class="page-icon awLinks-page-icon">${pageIcon}</span>`);
const pageProps = await searchProps(pageTitle);
if (pageProps) {
const pageIcon = pageProps['icon'];
if (pageIcon) {
linkItem.insertAdjacentHTML('afterbegin', `<span class="page-icon awLinks-page-icon">${pageIcon}</span>`);
const pageColor = pageProps['color'];
if (pageColor) {
linkItem.style.color = `#${pageColor}`;
}
}
}
}
body.classList.add('is-awesomeLinks-int');
Expand Down
95 changes: 48 additions & 47 deletions src/modules/pageIcons/queries.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
import '@logseq/libs';
import { globalContext } from '../internal';

export const getPageIcon = async (title: string) => {
let pageIcon = '';
interface propsObject {
[key: string]: string;
}

export const getPageProps = async (title: string): Promise<propsObject> => {
let pageProps: propsObject = {};
title = title.toLowerCase();
const iconQuery = `
[
:find ?icon
:find ?props
:where
[?id :block/name "${title}"]
[?id :block/properties ?prop]
[(get ?prop :icon) ?icon]
[?id :block/properties ?props]
]
`;
const journalQuery = `
Expand All @@ -25,14 +28,14 @@ export const getPageIcon = async (title: string) => {
if (isJournal.length && isJournal[0][0] && globalContext.pluginConfig?.featureJournalIcon) {
return globalContext.pluginConfig?.featureJournalIcon;
}
const pageIconArr = await logseq.DB.datascriptQuery(iconQuery);
if (pageIconArr.length) {
pageIcon = pageIconArr[0];
const queryResultArr = await logseq.DB.datascriptQuery(iconQuery);
if (queryResultArr.length) {
pageProps = queryResultArr[0][0];
}
return pageIcon;
return pageProps;
}

export const getInheritedPropsTitle = async (title: string, prop: string) => {
export const getInheritedPropsTitle = async (title: string, prop: string): Promise<string> => {
title = title.toLowerCase();
let inheritedPageTitle = '';
const inheritedTitleQuery = `
Expand All @@ -51,7 +54,7 @@ export const getInheritedPropsTitle = async (title: string, prop: string) => {
return inheritedPageTitle;
}

export const getAliasedPageTitle = async (title: string) => {
export const getAliasedPageTitle = async (title: string): Promise<string> => {
title = title.toLowerCase();
let aliasedPageTitle = '';
const inheritedAliasQuery = `
Expand All @@ -70,71 +73,69 @@ export const getAliasedPageTitle = async (title: string) => {
return aliasedPageTitle;
}

export const searchIcon = async (pageTitle: string): Promise<string> => {
export const searchProps = async (pageTitle: string): Promise<propsObject> => {
// get from page
let pageIcon = await getPageIcon(pageTitle);
if (!pageIcon) {
let pageProps = await getPageProps(pageTitle);
let resultedPageProps = { ...pageProps };
if (!pageProps['icon']) {
// get from aliased page
pageIcon = await getAliasedPageIcon(pageTitle);
if (!pageIcon && globalContext.pluginConfig?.featureInheritPageIcons) {
pageProps = await getAliasedPageProps(pageTitle);
resultedPageProps = { ...pageProps, ...resultedPageProps };
if (!pageProps['icon'] && globalContext.pluginConfig?.featureInheritPageIcons) {
// inherited from page props, when props linked to page
pageIcon = await getInheritedPropsIcon(pageTitle);
if (!pageIcon) {
pageProps = await getInheritedPropsProps(pageTitle);
resultedPageProps = { ...pageProps, ...resultedPageProps };
if (!pageProps['icon']) {
// inherited from aliased page props, when props linked to page
pageIcon = await getAliasedPropsIcon(pageTitle);
if (!pageIcon && pageTitle.includes('/')) {
pageProps = await getAliasedPropsProps(pageTitle);
resultedPageProps = { ...pageProps, ...resultedPageProps };
if (!pageProps['icon'] && pageTitle.includes('/')) {
// inherit from hierarchy root
pageIcon = await getHierarchyPageIcon(pageTitle);
pageProps = await getHierarchyPageProps(pageTitle);
resultedPageProps = { ...pageProps, ...resultedPageProps };
}
}
// if (!pageIcon) {
// // inherited from page props, when props linked to aliased
// const aliasedPageTitle = await getAliasedPageTitle(inheritedPropsTitle);
// if (aliasedPageTitle) {
// pageIcon = await getPageIcon(aliasedPageTitle);
// }
// }
}
}
return pageIcon;
return resultedPageProps;
}

export const getHierarchyPageIcon = async (pageTitle: string): Promise<string> => {
let pageIcon = '';
export const getHierarchyPageProps = async (pageTitle: string): Promise<propsObject> => {
let pageProps: propsObject = {};
pageTitle = pageTitle.split('/')[0];
pageIcon = await getPageIcon(pageTitle);
if (!pageIcon) {
pageIcon = await getInheritedPropsIcon(pageTitle);
pageProps = await getPageProps(pageTitle);
if (!pageProps['icon']) {
pageProps = await getInheritedPropsProps(pageTitle);
}
return pageIcon;
return pageProps;
}

export const getAliasedPageIcon = async (pageTitle: string): Promise<string> => {
let pageIcon = '';
export const getAliasedPageProps = async (pageTitle: string): Promise<propsObject> => {
let pageProps: propsObject = {};
const aliasedPageTitle = await getAliasedPageTitle(pageTitle);
if (aliasedPageTitle) {
pageIcon = await getPageIcon(aliasedPageTitle);
pageProps = await getPageProps(aliasedPageTitle);
}
return pageIcon;
return pageProps;
}

export const getInheritedPropsIcon = async (pageTitle: string): Promise<string> => {
let pageIcon = '';
export const getInheritedPropsProps = async (pageTitle: string): Promise<propsObject> => {
let pageProps: propsObject = {};
const inheritedPropsTitle = await getInheritedPropsTitle(pageTitle, globalContext.pluginConfig?.featureInheritPageIcons);
if (inheritedPropsTitle) {
pageIcon = await getPageIcon(inheritedPropsTitle);
pageProps = await getPageProps(inheritedPropsTitle);
}
return pageIcon;
return pageProps;
}

export const getAliasedPropsIcon = async (pageTitle: string): Promise<string> => {
let pageIcon = '';
export const getAliasedPropsProps = async (pageTitle: string): Promise<propsObject> => {
let pageProps: propsObject = {};
const aliasedPageTitle = await getAliasedPageTitle(pageTitle);
if (aliasedPageTitle) {
const inheritedPageTitle = await getInheritedPropsTitle(aliasedPageTitle, globalContext.pluginConfig?.featureInheritPageIcons);
if (inheritedPageTitle) {
pageIcon = await getPageIcon(inheritedPageTitle);
pageProps = await getPageProps(inheritedPageTitle);
}
}
return pageIcon;
return pageProps;
}
11 changes: 7 additions & 4 deletions src/modules/sidebarIcon/sidebarIcon.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
doc,
searchIcon
searchProps
} from '../internal';

import './sidebarIcon.css';
Expand All @@ -19,9 +19,12 @@ export const setSidebarIcons = async (sidebarLinksList?: NodeListOf<HTMLAnchorEl
if (!pageTitle) {
continue;
}
const pageIcon = await searchIcon(pageTitle);
if (pageIcon) {
sidebarLinkItem.insertAdjacentHTML('afterbegin', `<span class="page-icon awLinks-sidebar-icon">${pageIcon}</span>`);
const pageProps = await searchProps(pageTitle);
if (pageProps) {
const pageIcon = pageProps['icon'];
if (pageIcon) {
sidebarLinkItem.insertAdjacentHTML('afterbegin', `<span class="page-icon awLinks-sidebar-icon">${pageIcon}</span>`);
}
}
}
}
Expand Down
13 changes: 10 additions & 3 deletions src/modules/titleIcon/titleIcon.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
doc,
getHierarchyPageIcon, getInheritedPropsIcon
getHierarchyPageProps, getInheritedPropsProps
} from '../internal';

import './titleIcon.css';
Expand All @@ -9,13 +9,20 @@ export const setTitleIcon = async (pageTitleEl?: Element | null) => {
if (!pageTitleEl) {
pageTitleEl = doc.querySelector('.ls-page-title');
}
let titleIcon = '';
if (pageTitleEl && !pageTitleEl.querySelector('.page-icon')) {
const pageName = pageTitleEl.textContent;
if (pageName) {
let titleIcon = await getInheritedPropsIcon(pageName);
let titleProps = await getInheritedPropsProps(pageName);
if (titleProps) {
titleIcon = titleProps['icon'];
}
if (!titleIcon && pageName.includes('/')) {
// inherit from hierarchy root
titleIcon = await getHierarchyPageIcon(pageName);
titleProps = await getHierarchyPageProps(pageName);
if (titleProps) {
titleIcon = titleProps['icon'];
}
}
if (titleIcon) {
pageTitleEl.insertAdjacentHTML('afterbegin', `<span class="page-icon awLinks-title-icon">${titleIcon}</span>`);
Expand Down

0 comments on commit 5860a43

Please sign in to comment.