Skip to content

Commit

Permalink
🛠️ 1.2.0
Browse files Browse the repository at this point in the history 
- Added `aboutBlank()`
- Added `reset()`
- Updated Demo
- Added Docs
  • Loading branch information
@Thedogecraft
Thedogecraft committed Nov 3, 2024
1 parent 845519a commit c2ee0ad
Show file tree
Hide file tree
Showing 10 changed files with 340 additions and 1,115 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
node_modules
package-lock.json
153 changes: 153 additions & 0 deletions demo/docs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!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>Docs - Cloak.js</title>
<meta
name="description"
content="Cloak js is a simple library that allows you to change the title and favicon of your webpage."
/>
<meta
name="keywords"
content="Cloak, favicon, title management, web development unblocked, unblockedgames, games, unblocked"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
/>
</head>
<body class="min-h-screen bg-base-200 flex flex-col">
<header class="bg-base-300 p-4 shadow">
<h1 class="text-5xl font-bold text-center">Cloak Module Documentation</h1>
<p class="text-lg text-center text-base-content mt-2">
Manage document title and favicon with ease.
</p>
</header>

<main
class="flex-grow container mx-auto flex flex-col items-start justify-center py-8 px-4"
>
<section class="mb-8">
<h2 class="text-4xl font-bold mb-4">Functions</h2>

<div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
<h3 class="text-2xl font-semibold">getFavicon()</h3>
<p>Retrieves the current favicon URL of the document.</p>
<h4 class="text-xl font-semibold">Example:</h4>
<pre class="bg-base-300 p-4 rounded-lg">
<code>
const faviconUrl = cloak.getFavicon();
console.log(faviconUrl); // Outputs the current favicon URL
</code>
</pre>
</div>

<div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
<h3 class="text-2xl font-semibold">setFavicon(url)</h3>
<p>Sets the favicon of the document to the provided URL.</p>
<h4 class="text-xl font-semibold">Example:</h4>
<pre class="bg-base-300 p-4 rounded-lg">
<code>
cloak.setFavicon("https://example.com/new-favicon.ico");
</code>
</pre>
</div>

<div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
<h3 class="text-2xl font-semibold">getTitle()</h3>
<p>Returns the current title of the document.</p>
<h4 class="text-xl font-semibold">Example:</h4>
<pre class="bg-base-300 p-4 rounded-lg">
<code>
const title = cloak.getTitle();
console.log(title); // Outputs the current document title
</code>
</pre>
</div>

<div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
<h3 class="text-2xl font-semibold">setTitle(title)</h3>
<p>Sets the title of the document to the provided string.</p>
<h4 class="text-xl font-semibold">Example:</h4>
<pre class="bg-base-300 p-4 rounded-lg">
<code>
cloak.setTitle("New Document Title");
</code>
</pre>
</div>

<div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
<h3 class="text-2xl font-semibold">setCloak(title, url)</h3>
<p>
Sets both the title and favicon of the document and saves them in
<code>localStorage</code>.
</p>
<h4 class="text-xl font-semibold">Example:</h4>
<pre class="bg-base-300 p-4 rounded-lg">
<code>
cloak.setCloak("My Awesome Page", "https://example.com/favicon.ico");
</code>
</pre>
</div>

<div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
<h3 class="text-2xl font-semibold">init()</h3>
<p>
Initializes the cloak settings by retrieving values from
<code>localStorage</code>.
</p>
<h4 class="text-xl font-semibold">Example:</h4>
<pre class="bg-base-300 p-4 rounded-lg">
<code>
document.addEventListener("DOMContentLoaded", () => {
cloak.init(); // Call this to set initial cloak settings
});
</code>
</pre>
</div>

<div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
<h3 class="text-2xl font-semibold">aboutBlank(url)</h3>
<p>
Opens the current tab in an <code>about:blank</code> iframe. If no
URL is provided, it defaults to
<code
>https://www.google.com/search?q=how+many+seconds+in+a+day</code
>.
</p>
<h4 class="text-xl font-semibold">Example:</h4>
<pre class="bg-base-300 p-4 rounded-lg">
<code>
cloak.aboutBlank("https://wikipedia.org");
</code>
</pre>
</div>

<div class="bg-base-100 p-4 rounded-lg shadow-md mb-4">
<h3 class="text-2xl font-semibold">reset()</h3>
<p>Resets the cloak to the default document title.</p>
<h4 class="text-xl font-semibold">Example:</h4>
<pre class="bg-base-300 p-4 rounded-lg">
<code>
cloak.reset();
</code>
</pre>
</div>
</section>
</main>

<footer class="p-4 bg-base-300 text-center mt-8 shadow">
<p class="text-base-content">
&copy; 2024 Parcoil Network. All rights reserved.
</p>
</footer>
</body>
</html>
82 changes: 55 additions & 27 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,69 @@
<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>
<title>Home - Cloak.js</title>
<meta
name="description"
content="Cloak js is a simple library that allows you to change the title and favicon of your webpage."
/>
<meta
name="keywords"
content="Cloak, favicon, title management, web development unblocked, unblockedgames, games, unblocked"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<script src="../src/index.js" type=""></script>

<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
/>
</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">
<body class="min-h-screen bg-base-200 flex flex-col">
<main
class="flex-grow container mx-auto flex flex-col items-center justify-center py-16"
>
<a
href="https://github.com/parcoil/cloak"
class="absolute top-4 right-4 text-3xl btn btn-ghost btn-circle"
><i class="devicon-github-original"></i
></a>
<img
src=""
id="favicon"
alt=""
width="48"
height="48"
class="w-[48px] height-[48px]"
/>
<h2 id="cloakText" class="text-3xl font-bold mb-6">
The cloak is set to:
</h2>
<div class="flex flex-col space-y-4 w-full max-w-md">
<a href="docs.html" class="btn btn-outline w-full">View Docs</a>
<a href="other.html" class="btn btn-primary w-full"
>Go to Settings Page</a
>
<a href="showcase.html" class="btn btn-secondary w-full"
>View Showcase</a
>
<p class="text-sm text-base-content/60 text-center">
Go to the other page to change cloak (simulated settings page).
</p>
</div>
</main>

<footer class="p-4 bg-base-300 text-center">
<p class="text-base-content">
&copy; 2024 Parcoil Network. All rights reserved.
</footer>
</div>
</p>
</footer>

<script src="main.js"></script>
</body>
</html>
2 changes: 0 additions & 2 deletions demo/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ function updateCloakInfo() {
if (cloakText) {
cloakText.textContent = `The cloak is set to: ${title}`;
}

document.querySelector("h1").textContent = title;
}

document.addEventListener("DOMContentLoaded", () => {
Expand Down
Loading

0 comments on commit c2ee0ad

Please sign in to comment.