🚀 1.1.0

- Updated Demo page - Removed id="cloakSelect" - Added data-cloak-select - Cleaned up code
Parcoil · Oct 26, 2024 · f95646a · f95646a
1 parent f4ee98f
commit f95646a
Show file tree

Hide file tree

Showing 17 changed files with 219 additions and 92 deletions.
diff --git a/cloak.js b/cloak.js
diff --git a/example/cloaks/favicon.ico → demo/cloaks/favicon.ico b/example/cloaks/favicon.ico → demo/cloaks/favicon.ico
diff --git a/example/cloaks/poop.ico → demo/cloaks/poop.ico b/example/cloaks/poop.ico → demo/cloaks/poop.ico
diff --git a/example/cloaks/purple.ico → demo/cloaks/purple.ico b/example/cloaks/purple.ico → demo/cloaks/purple.ico
diff --git a/example/cloaks/sparkles.ico → demo/cloaks/sparkles.ico b/example/cloaks/sparkles.ico → demo/cloaks/sparkles.ico
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dim">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="cloaks/favicon.ico" />
+    <title>My cool games site</title>
+    <script src="../src/index.js"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/daisyui@4.12.13/dist/full.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="min-h-screen bg-base-200">
+    <div class="container mx-auto px-4 py-8">
+      <main class="card bg-base-100 shadow-xl p-6">
+        <div class="flex items-center mb-4">
+          <img
+            id="favicon"
+            src=""
+            alt="Favicon"
+            class="w-8 h-8 mr-2"
+            id="cloakImage"
+          />
+          <h1 class="text-2xl font-bold">Default Cloak</h1>
+        </div>
+        <p id="cloakText" class="text-lg mb-4">The cloak is set to:</p>
+        <div class="flex flex-col space-y-4">
+          <a href="other.html" class="btn btn-primary">Go to settings page</a>
+          <a href="showcase.html" class="btn btn-primary">Showcase</a>
+          <p class="text-sm text-base-content/70">
+            Go to the other page to change cloak (simulated settings page)
+          </p>
+        </div>
+      </main>
+      <footer class="block mt-4 p-4 bg-base-300 rounded-lg footer">
+        &copy; 2024 Parcoil Network. All rights reserved.
+      </footer>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/example/main.css → demo/main.css b/example/main.css → demo/main.css
diff --git a/demo/main.js b/demo/main.js
@@ -0,0 +1,29 @@
+const cloakText = document.getElementById("cloakText");
+
+const favicon = cloak.getFavicon();
+
+function updateCloakInfo() {
+  const title = cloak.getTitle();
+  const icon = cloak.getFavicon();
+
+  const faviconImage = document.getElementById("favicon");
+  if (faviconImage) {
+    faviconImage.src = icon;
+  }
+
+  if (cloakText) {
+    cloakText.textContent = `The cloak is set to: ${title}`;
+  }
+
+  document.querySelector("h1").textContent = title;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  updateCloakInfo();
+});
+
+window.addEventListener("storage", (event) => {
+  if (event.key === "cloakTitle" || event.key === "cloakFavicon") {
+    updateCloakInfo();
+  }
+});
diff --git a/demo/other.html b/demo/other.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dim">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cloak Settings</title>
+    <link rel="icon" type="image/x-icon" href="cloaks/favicon.ico" />
+    <link rel="stylesheet" href="./main.css" />
+    <script src="../src/index.js"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/daisyui@4.12.13/dist/full.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="min-h-screen bg-base-200">
+    <div class="container mx-auto px-4 py-8">
+      <main class="card bg-base-100 shadow-xl p-6">
+        <h1 class="text-2xl font-bold mb-4">Cloak Settings</h1>
+        <a href="index.html" class="btn btn-primary mb-4">Go home</a>
+        <div class="form-control">
+          <label for="cloakSelect" class="label">
+            <span class="label-text">Select a Cloak:</span>
+          </label>
+          <select
+            name="cloak"
+            data-cloak-select
+            class="select select-bordered w-full max-w-xs"
+          >
+            <option value="default">Default Cloak</option>
+            <option value="poop">Poop Cloak</option>
+            <option value="purple">Purple Cloak</option>
+            <option value="sparkles">Sparkle Cloak</option>
+          </select>
+        </div>
+      </main>
+      <footer class="block mt-4 p-4 bg-base-300 rounded-lg footer">
+        &copy; 2024 Parcoil Network. All rights reserved.
+      </footer>
+    </div>
+  </body>
+  <script>
+    const cloaks = [
+      { name: "default", icon: "./cloaks/default.ico", title: "Default Cloak" },
+      { name: "poop", icon: "./cloaks/poop.ico", title: "Poop Cloak" },
+      { name: "purple", icon: "./cloaks/purple.ico", title: "Purple Cloak" },
+      {
+        name: "sparkles",
+        icon: "./cloaks/sparkles.ico",
+        title: "Sparkle Cloak",
+      },
+    ];
+
+    document.addEventListener("DOMContentLoaded", () => {
+      const cloakSelect = document.getElementById("cloakSelect");
+      const currentTitle = localStorage.getItem("cloakTitle");
+      const currentCloak = cloaks.find((cloak) => cloak.title === currentTitle);
+
+      if (currentCloak) {
+        cloakSelect.value = currentCloak.name;
+      }
+    });
+  </script>
+</html>
diff --git a/demo/showcase.html b/demo/showcase.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dim">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="cloaks/favicon.ico" />
+    <title>CloakJS Showcase</title>
+    <script src="../src/index.js"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/daisyui@4.12.13/dist/full.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="min-h-screen bg-base-200">
+    <div class="container mx-auto px-4 py-8">
+      <main class="card bg-base-100 shadow-xl p-6">
+        <h1 class="text-3xl font-bold mb-6">CloakJS Showcase</h1>
+        <p class="text-lg mb-8">
+          Discover websites using CloakJS for enhanced privacy and
+          customization:
+        </p>
+
+        <div
+          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 justify-center items-center"
+        >
+          <!-- Example Site 1 -->
+          <div
+            class="card bg-base-200 shadow-xl transition-all active:scale-[.99] hover:scale-[1.01]"
+          >
+            <figure>
+              <img src="sites/lunaar.png" alt="lunaar image" />
+            </figure>
+            <div class="card-body">
+              <h2 class="card-title">Lunaar.org</h2>
+              <p>A Unblocked games site made by Parcoil.</p>
+              <div class="card-actions justify-end mt-4">
+                <a href="https://lunaar.org" class="btn btn-primary"
+                  >Visit Site</a
+                >
+              </div>
+            </div>
+          </div>
+          <p>Add yours by making a pull request!</p>
+        </div>
+
+        <div class="mt-8">
+          <a href="index.html" class="btn btn-secondary">Back to Home</a>
+        </div>
+      </main>
+      <footer class="block mt-4 p-4 bg-base-300 rounded-lg footer">
+        &copy; 2024 Parcoil Network. All rights reserved.
+      </footer>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/demo/sites/lunaar.png b/demo/sites/lunaar.png
diff --git a/example/index.html b/example/index.html
diff --git a/example/main.js b/example/main.js
diff --git a/example/other.html b/example/other.html
diff --git a/package.json b/package.json
@@ -2,27 +2,21 @@
   "name": "@parcoil/cloak",
   "version": "1.0.0",
   "description": "Tab Cloaking lib",
-  "main": "index.js",
-  "scripts": {
-    "build": "minify index.js > cloak.js && npm publish --access public",
-    "min": "minify index.js > cloak.js"
-  },
+  "main": "src/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Parcoil/cloak.git"
   },
   "keywords": [
     "cloak",
     "tabcloak",
-    "proxy"
+    "proxy",
+    "unblocked"
   ],
   "author": "Parcoil Network",
   "license": "CC0",
   "bugs": {
     "url": "https://github.com/Parcoil/cloak/issues"
   },
-  "homepage": "https://github.com/Parcoil/cloak#readme",
-  "dependencies": {
-    "minify": "^11.4.0"
-  }
+  "homepage": "https://github.com/Parcoil/cloak#readme"
 }
diff --git a/readme.md b/readme.md
@@ -6,6 +6,8 @@ CloakJS is a lightweight JavaScript library designed for easy tab cloaking.
 
 ![Demo](https://github.com/Parcoil/cloak/blob/main/assets/demo.gif)
 
+View a live demo at [](DEMO)
+
 ## Get Started
 
 To start using CloakJS quickly use Jsdelivr:
@@ -34,18 +36,18 @@ Make sure your webpage has a title:
 
 To configure cloaks on your page:
 
-1. Create a `<select>` element with the id `cloakSelect`:
+1. Create a `<select>` element with the data tag `data-cloak-select`:
 
 ```html
-<select name="cloak" id="cloakSelect">
+<select name="cloak" data-cloak-select>
   <option value="default">Default Cloak</option>
   <option value="poop">Poop Cloak</option>
   <option value="purple">Purple Cloak</option>
   <option value="sparkles">Sparkle Cloak</option>
 </select>
 ```
 
-2. Define your cloaks in a `<script>` tag:
+2. Define your cloaks in a `<script>` tag on your settings page:
 
 ```html
 <script>
@@ -58,13 +60,14 @@ To configure cloaks on your page:
 </script>
 ```
 
-### Using CloakJS APIs
+## Using CloakJS APIs
 
 You can use the following APIs with CloakJS:
 
 - **getTitle()**: Get the current document title.
-  
+
   Example:
+
   ```javascript
   const title = cloak.getTitle();
   console.log(title); // Outputs the current title of the document
@@ -73,13 +76,15 @@ You can use the following APIs with CloakJS:
 - **setTitle(newTitle)**: Set a new document title.
 
   Example:
+
   ```javascript
   cloak.setTitle("New Title");
   ```
 
 - **getFavicon()**: Get the current favicon URL.
 
   Example:
+
   ```javascript
   const favicon = cloak.getFavicon();
   console.log(favicon); // Outputs the current favicon URL
@@ -88,13 +93,15 @@ You can use the following APIs with CloakJS:
 - **setFavicon(url)**: Set a new favicon URL.
 
   Example:
+
   ```javascript
   cloak.setFavicon("new-icon-url.ico");
   ```
 
 - **setCloak(newTitle, url)**: Set both the document title and favicon, and store them in localStorage.
 
   Example:
+
   ```javascript
   cloak.setCloak("New Cloak Title", "new-cloak-icon-url.ico");
   ```