Add version 1.0.0-alpha.1

hkamran80 · Oct 2, 2021 · a0f9774 · a0f9774
1 parent 55d5edf
commit a0f9774
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Nebula
+## A simple and clean new tab page
+
+![Nebula screenshot](screenshots/nebula-new-tab-screenshot.png)
+
+## Installation
+TBA
diff --git a/index.ts b/index.ts
@@ -1,25 +1,50 @@
 const container = document.getElementById("content");
 const time = document.getElementById("time");
 const date = document.getElementById("date");
+const newBackgroundButton = document.getElementById("new-background-button");
 
+// Background Image Initialization
 if (container) {
-    // container.style.backgroundImage = `url('https://source.unsplash.com/${window.screen.width}x${window.screen.height}/?space')`;
-    container.style.backgroundImage = `url('https://source.unsplash.com/collection/935518/${window.screen.width}x${window.screen.height}')`;
-}
+    const lastUpdated = browser.storage.local.get("lastUpdated");
+    lastUpdated.then(
+        ({ lastUpdated }) => {
+            if (
+                new Date().getTime() - new Date(lastUpdated).getTime() >=
+                86400000
+            ) {
+                saveNewBackgroundImage();
+            }
 
-function padNumber(number: number | string): string {
-    return Number(number < 10)
-        ? "0" + Number(number).toString()
-        : Number(number).toString();
+            const backgroundImage =
+                browser.storage.local.get("backgroundImage");
+            backgroundImage.then(
+                (imageData: any) => {
+                    if (imageData.backgroundImage) {
+                        container.style.backgroundImage = `url('${imageData.backgroundImage}')`;
+                    } else {
+                        saveNewBackgroundImage((dataUrl: string) => {
+                            container.style.backgroundImage = `url('${dataUrl}')`;
+                        });
+                    }
+                },
+                () =>
+                    console.error(
+                        "Error occurred when setting background image"
+                    )
+            );
+        },
+        () => console.error("Error occurred when getting last updated time")
+    );
 }
 
-setTimeout(() => {
+// Initialization
+setTimeout((): void => {
     const d = new Date();
 
     if (time) {
         time.classList.remove("opacity-0");
         time.textContent =
-            padNumber(d.getHours().toString()) +
+            d.getHours().toString() +
             ":" +
             padNumber(d.getMinutes().toString());
     }
@@ -33,19 +58,26 @@ setTimeout(() => {
             day: "numeric",
         });
     }
-}, 700);
 
+    if (newBackgroundButton) {
+        newBackgroundButton.classList.remove("opacity-0");
+    }
+}, 300);
+
+// Intervals
+// Time Interval
 setInterval((): void => {
     if (time) {
         const d = new Date();
         time.textContent =
-            padNumber(d.getHours().toString()) +
+            d.getHours().toString() +
             ":" +
             padNumber(d.getMinutes().toString());
     }
-    // 5000 ms = 5 second
+    // 5000 ms = 5 seconds
 }, 5000);
 
+// Date Interval
 setInterval((): void => {
     if (date) {
         const d = new Date();
@@ -59,34 +91,72 @@ setInterval((): void => {
     // 3600000 ms = 1 hour
 }, 3600000);
 
-// Source: https://appcropolis.com/blog/web-technology/javascript-encode-images-dataurl/
-function getImageDataURL(url: string, success: Function, error: Function) {
-    var data, canvas, ctx;
+// New Background Button
+if (newBackgroundButton) {
+    newBackgroundButton.addEventListener("click", () => {
+        newBackgroundButton.classList.add("animate-spin");
+
+        saveNewBackgroundImage((dataUrl: string) => {
+            if (container) {
+                container.style.backgroundImage = `url('${dataUrl}')`;
+                newBackgroundButton.classList.remove("animate-spin");
+            }
+        });
+    });
+}
+
+function saveNewBackgroundImage(callback = null as Function | null): void {
+    const d = new Date();
+    toDataURL(
+        `https://source.unsplash.com/collection/935518/${window.screen.width}x${
+            window.screen.height
+        }?q=${d.getTime()}`,
+        (dataUrl: string) => {
+            browser.storage.local.set({
+                backgroundImage: dataUrl,
+                lastUpdated: d.toISOString(),
+            });
+
+            if (callback) {
+                callback(dataUrl);
+            }
+        }
+    );
+}
+
+function toDataURL(
+    src: string,
+    callback: Function,
+    outputFormat = "image/png"
+) {
     var img = new Image();
+    img.crossOrigin = "Anonymous";
     img.onload = function () {
-        // Create the canvas element.
-        canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
-        // Get '2d' context and draw the image.
-        ctx = canvas.getContext("2d");
+        var canvas = document.createElement("canvas");
+        var ctx = canvas.getContext("2d");
+        var dataURL;
+
+        canvas.height = img.naturalHeight;
+        canvas.width = img.naturalWidth;
+
         if (ctx) {
             ctx.drawImage(img, 0, 0);
 
-            // Get canvas data URL
-            try {
-                data = canvas.toDataURL();
-                success({ image: img, data: data });
-            } catch (e) {
-                error(e);
-            }
+            dataURL = canvas.toDataURL(outputFormat);
+            callback(dataURL);
         }
     };
 
-    // Load image URL
-    try {
-        img.src = url;
-    } catch (e) {
-        error(e);
+    img.src = src;
+    if (img.complete || img.complete === undefined) {
+        img.src =
+            "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+        img.src = src;
     }
 }
+
+function padNumber(number: number | string): string {
+    return Number(number < 10)
+        ? "0" + Number(number).toString()
+        : Number(number).toString();
+}
diff --git a/manifest.json b/manifest.json
@@ -1,9 +1,14 @@
 {
     "manifest_version": 2,
     "name": "Nebula New Tab",
-    "version": "0.1.0",
+    "short_name": "Nebula",
+    "version": "0.9.0",
     "description": "A simple and clean new tab page",
     "author": "H. Kamran",
+    "developer": {
+        "name": "H. Kamran",
+        "url": "https://hkamran.com"
+    },
     "chrome_url_overrides": {
         "newtab": "index.html"
     },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,18 +1,27 @@
 {
     "name": "nebula-new-tab",
-    "version": "1.0.0",
-    "description": "",
+    "version": "1.0.0-alpha.1",
+    "private": true,
+    "description": "A simple and clean new tab page",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/hkamran80/nebula-new-tab.git"
+    },
     "scripts": {
         "dev:firefox": "web-ext run --source-dir dist",
+        "dev:chromium": "web-ext run --source-dir dist --target chromium",
         "build": "rimraf dist && tsc && rollup -c rollup.config.js",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
+    "keywords": [
+        "new tab"
+    ],
+    "author": "H. Kamran",
+    "license": "GPLV3",
     "devDependencies": {
         "@open-wc/building-rollup": "^1.10.0",
         "@rollup/plugin-typescript": "^8.2.5",
+        "@types/webextension-polyfill": "^0.8.0",
         "autoprefixer": "^10.3.6",
         "deepmerge": "^4.2.2",
         "onchange": "^7.1.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -24,6 +24,10 @@ export default merge(baseConfig, {
                     src: "./node_modules/webextension-polyfill/dist/browser-polyfill.min.js",
                     dest: "dist",
                 },
+                {
+                    src: "./node_modules/webextension-polyfill/dist/browser-polyfill.min.js.map",
+                    dest: "dist",
+                },
             ],
         }),
         html({

diff --git a/screenshots/nebula-new-tab-screenshot.png b/screenshots/nebula-new-tab-screenshot.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,6 @@
 module.exports = {
     mode: "jit",
-    purge: ["./template.html"],
+    purge: ["./template.html", "./index.ts"],
     darkMode: "media",
     theme: {
         extend: {

diff --git a/template.html b/template.html
@@ -17,20 +17,68 @@
                 min-h-screen
                 flex
                 justify-center
-                bg-no-repeat bg-cover
-                bg-opacity-80
+                bg-no-repeat bg-cover bg-opacity-80
                 relative
                 items-center
             "
         >
             <div class="text-center p-4 bg-opacity-80">
-                <h1 id="time" class="block opacity-0 transition-opacity duration-300 text-8xl text-black dark:text-white">
+                <h1
+                    id="time"
+                    class="
+                        block
+                        opacity-0
+                        transition-opacity
+                        duration-300
+                        text-8xl text-black
+                        dark:text-white
+                    "
+                >
                     16:30
                 </h1>
-                <h2 id="date" class="block opacity-0 transition-opacity duration-300 mt-2 text-3xl text-black dark:text-white">
+                <h2
+                    id="date"
+                    class="
+                        block
+                        opacity-0
+                        transition-opacity
+                        duration-300
+                        mt-2
+                        text-3xl text-black
+                        dark:text-white
+                    "
+                >
                     Friday, October 1, 2021
                 </h2>
             </div>
+
+            <div class="absolute top-7 left-7">
+                <button
+                    id="new-background-button"
+                    class="opacity-0 transition-opacity duration-300 w-4"
+                    title="Refresh the background"
+                    aria-label="Refresh the background"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="
+                            stroke-current stroke-2
+                            text-black
+                            dark:text-white
+                        "
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <polyline points="23 4 23 10 17 10" />
+                        <polyline points="1 20 1 14 7 14" />
+                        <path
+                            d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"
+                        />
+                    </svg>
+                </button>
+            </div>
         </div>
     </body>
 </html>