Skip to content

New feature: custom favicon and styles #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pabliqe wants to merge 4 commits into
base: master
Choose a base branch
from
Open

New feature: custom favicon and styles #120

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0513124
New feature: custom favicon and styles
pabliqe Aug 21, 2021
9bf7e5a
fix(workers.js): revert powered by Fruition footnote
pabliqe Aug 27, 2021
99f6807
fix(worker.js): quotes on conflit
pabliqe Aug 27, 2021
a604cfa
style(worker.js): adding newline to fix conflict
pabliqe Aug 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 41 additions & 11 deletions worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,13 @@ const PAGE_DESCRIPTION =
/* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */
const GOOGLE_FONT = "Rubik";

/* Step 5: enter any custom scripts you'd like */
/* Step 5: Add a custom favicon (your Notion avatar URL works too) */
const CUSTOM_AVATAR = "";
Copy link

@elprotectorado elprotectorado Sep 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello, this section manually works for me,

pd: the only thing that does not come out to the main script?

Copy link

@huaciii huaciii Feb 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, could you tell me how it worked? I rewrote it but cloudflare said script can't be deployed. Is there anything wrong with these code?

/* Step 5: Add a custom favicon (your Notion avatar URL works too) */
const CUSTOM_AVATAR = "";

Copy link

@huaciii huaciii Feb 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const CUSTOM_AVATAR = "";
const CUSTOM_AVATAR = "<link href="https://uploads-ssl.webflow.com/5f66a66ce4b959957c4e8057/60ec40cd1484673a14eeb4b9_chiali_favicon.png" rel="shortcut icon" type="image/x-icon">";


/* Step 6: enter any custom CSS, no style tag needed */
const CUSTOM_STYLE = ``;

/* Step 7: enter any custom scripts you'd like, script tag needed */
const CUSTOM_SCRIPT = ``;

/* CONFIGURATION ENDS HERE */
Expand Down Expand Up @@ -175,12 +181,26 @@ class MetaRewriter {
}
}

class LinkRewriter {
element(element) {
if (element.getAttribute('rel') === 'shortcut icon') {
element.setAttribute('href', CUSTOM_AVATAR);
}

if (element.getAttribute('rel') === 'apple-touch-icon') {
element.setAttribute('href', CUSTOM_AVATAR);
}
}
}

class HeadRewriter {
element(element) {
if (GOOGLE_FONT !== "") {
element.append(
`<link href='https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap' rel='stylesheet'>
<style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`,
element.append(`<link href="https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap" rel="stylesheet">
<style>
* { font-family: "${GOOGLE_FONT}" !important; }
a { font-weight: inherit !important; }
</style>`,
{
html: true
}
Expand All @@ -196,6 +216,8 @@ class HeadRewriter {
div.notion-topbar-mobile > div:nth-child(4) { display: none !important; }
div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; }
div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; }

${CUSTOM_STYLE}
</style>`,
{
html: true
Expand All @@ -209,8 +231,9 @@ class BodyRewriter {
this.SLUG_TO_PAGE = SLUG_TO_PAGE;
}
element(element) {
element.append(
element.append(
`<script>
window.CONFIG.domainBaseUrl = 'https://${MY_DOMAIN}';
const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)};
const PAGE_TO_SLUG = {};
const slugs = [];
Expand Down Expand Up @@ -258,7 +281,7 @@ class BodyRewriter {
el.addEventListener('click', toggle);
nav.appendChild(el);

// enable smart dark mode based on user-preference
// enable smart dark mode basded on user-preference
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
onDark();
} else {
Expand All @@ -271,6 +294,12 @@ class BodyRewriter {
});
}
const observer = new MutationObserver(function() {
document.querySelectorAll('link').forEach((element) => {
if (element.getAttribute('rel') === 'shortcut icon') {
element.setAttribute('href', '${CUSTOM_AVATAR}');
}
})

if (redirected) return;
const nav = document.querySelector('.notion-topbar');
const mobileNav = document.querySelector('.notion-topbar-mobile');
Expand Down Expand Up @@ -325,9 +354,10 @@ class BodyRewriter {

async function appendJavascript(res, SLUG_TO_PAGE) {
return new HTMLRewriter()
.on("title", new MetaRewriter())
.on("meta", new MetaRewriter())
.on("head", new HeadRewriter())
.on("body", new BodyRewriter(SLUG_TO_PAGE))
.on('title', new MetaRewriter())
.on('meta', new MetaRewriter())
.on('head', new HeadRewriter())
.on('link', new LinkRewriter())
.on('body', new BodyRewriter(SLUG_TO_PAGE))
.transform(res);
}
}