V0.0.2

README.md

@@ -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>

build.sh

@@ -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

js/content.js

@@ -11,6 +11,7 @@ const sendMessage = async (params) => {
     }
   });
 };
+
 const getStorageData = async (params) => {
   return new Promise((resolve, reject) => {
     try {
@@ -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");

js/options.js

@@ -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) => {
@@ -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,
@@ -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) => {
@@ -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) => {
@@ -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 });
+  });
 };