Skip to content

Commit

Permalink
Merge pull request #2 from notionblog/v0.0.2
Browse files Browse the repository at this point in the history
V0.0.2
  • Loading branch information
yudax42 authored Jan 11, 2022
2 parents 87df481 + 4af1bde commit 0466827
Show file tree
Hide file tree
Showing 11 changed files with 315 additions and 52 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
![NotionThemes](./assets/notionthemes.gif)
![NotionThemes](./assets/notionthemes.png)

<h1 align="center">Notion Themes</h1>
<p align="center">Make your Notion pretty with custom themes</p>
Expand Down
Binary file added assets/notionthemes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 7 additions & 5 deletions build.sh
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@

# Copy neccesary files
mkdir ext
cp -r ./assets ./icons ./js ./background.js ./options.html ./popup.html ./manifest.json ./ext
cp -r ./icons ./js ./background.js ./options.html ./popup.html ./manifest.json ./ext

mkdir build
cd ext

# Generate Firefox .xpi
7z a -r build/firefox.xpi *
7z a -r ../build/firefox.xpi *

# Generate Chrome .crx
7z a -r build/chrome.zip *
7z a -r ../build/chrome.zip *

cd ..
# delete uneccesary files
mv build ../
rm -rf ../ext
rm -rf ./ext
Binary file modified icons/128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified icons/16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified icons/48.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 26 additions & 5 deletions js/content.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const sendMessage = async (params) => {
}
});
};

const getStorageData = async (params) => {
return new Promise((resolve, reject) => {
try {
Expand All @@ -28,28 +29,48 @@ const getStorageData = async (params) => {
};

const getTheme = async () => {
let { path, name, style } = await getStorageData(["path", "name", "style"]);
let { path, name, style, font } = await getStorageData([
"path",
"name",
"style",
"font",
]);

if (path && name && style) {
const global = await sendMessage({
query: "getTheme",
url: `${BASE_URL}/${style}/global.css?random=${Math.random()}`,
url: `${BASE_URL}/${style}/global.css`,
});
const theme = await sendMessage({
query: "getTheme",
url: `${BASE_URL}/${path}?random=${Math.random()}`,
url: `${BASE_URL}/${path}`,
});
let customFont = ``;

if (global !== undefined && theme !== undefined) {
const head = document.head || document.getElementsByTagName("head")[0],
style = document.createElement("style");
head.appendChild(style);
style.type = "text/css";

if (font && font !== "Default") {
customFont = `
@import url('https://fonts.googleapis.com/css2?family=${font.replace(
" ",
"+"
)}:wght@300;400;500;700&display=swap');
#notion-app * {
font-family:${font}, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
`;
}

if (style.styleSheet) {
style.styleSheet.cssText = `${theme} \n ${global} `;
style.styleSheet.cssText = `${customFont} \n ${theme} \n ${global}`;
} else {
style.appendChild(document.createTextNode(`${theme} \n ${global} `));
style.appendChild(
document.createTextNode(`${customFont} \n ${theme} \n ${global}`)
);
}
} else {
console.log("error fetching theme");
Expand Down
111 changes: 105 additions & 6 deletions js/options.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@ const getThemes = async () => {
}
};

// Fetch fonts
const getFonts = async () => {
try {
const data = await fetch(`${BASE_URL}/fonts.json`);
return await data.json();
} catch (err) {
console.error(err);
return null;
}
};

// get Storage Data
const getStorageData = async (params) => {
return new Promise((resolve, reject) => {
Expand All @@ -28,8 +39,25 @@ const getStorageData = async (params) => {
});
};

// Set storage data
const setStorageData = async (params) => {
return new Promise((resolve, reject) => {
try {
chrome.storage.sync.set(params, async (result) => {
if (result) {
resolve(true);
} else {
resolve(false);
}
});
} catch (err) {
reject(err);
}
});
};

// Set theme
const setTheme = async (theme) => {
const setTheme = async (theme, target) => {
chrome.storage.sync.set(
{
path: theme.path,
Expand All @@ -38,11 +66,35 @@ const setTheme = async (theme) => {
style: theme.style,
},
function () {
window.location.reload();
const toast = document.querySelector("#mainToast");
toast.classList.remove("hidden");

const selected = document.querySelector(".selected");
if (selected) {
selected.classList.remove("selected");
}
if (target) {
target.classList.add("selected");
}

setTimeout(() => {
toast.classList.add("hidden");
}, 3000);
}
);
};

// Preview fonts
const previewFonts = (data) => {
const select = document.getElementById("selectFont");
data.forEach((el) => {
let opt = document.createElement("option");
opt.value = el;
opt.innerHTML = el;
select.appendChild(opt);
});
};

// Preview Themes
const previewThemes = async (data) => {
const themes = Object.entries(data).map((theme) => {
Expand All @@ -69,11 +121,12 @@ const previewThemes = async (data) => {
darkThemesContainer.appendChild(li);
li.innerHTML = `<img src="${BASE_URL}${theme.img}" alt="${theme.name}" />
<div class="description">
<span class="indicator"></span>
<span class="name">${theme.name}</span>
</div>`;
li.addEventListener("click", () => {
setTheme(theme);
li.addEventListener("click", (event) => {
setTheme(theme, event.currentTarget);
});
});
ligth.forEach((theme) => {
Expand All @@ -83,17 +136,63 @@ const previewThemes = async (data) => {
ligthThemesContainer.appendChild(li);
li.innerHTML = `<img src="${BASE_URL}${theme.img}" alt="${theme.name}" />
<div class="description">
<span class="indicator"></span>
<span class="name">${theme.name}</span>
</div>`;
li.addEventListener("click", () => {
setTheme(theme);
li.addEventListener("click", (event) => {
setTheme(theme, event.currentTarget);
});
});
};

// Reset to default theme
const resetTheme = async () => {
await setTheme({
path: null,
name: "default",
img: null,
style: null,
});
};

// Config selected theme

const fontSelectConfig = async () => {
let { font } = await getStorageData(["font"]);
const selectFont = document.querySelector("#selectFont");
selectFont.value = font;
};

// Load Themes
window.onload = async () => {
/*
State
*/
// Themes
const data = await getThemes();
if (data !== null) previewThemes(data);

// Fonts
const { fonts } = await getFonts();
if (fonts !== null) previewFonts(fonts);

// Selected font
fontSelectConfig();

/*
Actions
*/

// Reset button
const resetBtn = document.querySelector("#resetTheme");
resetBtn.addEventListener("click", () => {
resetTheme();
});
// selectFont
const selectFont = document.querySelector("#selectFont");
selectFont.addEventListener("change", async (event) => {
console.log(event.target.value);
await setStorageData({ font: event.target.value });
});
};
Loading

0 comments on commit 0466827

Please sign in to comment.