Skip to content

Commit feac067

Browse files
SahinurDEVSahinurDEV
committed
Make the site more professional and creative
docs.html: copy buttons on every code block, a mobile nav drawer (sidebar was lg-only before), clickable heading anchors, and a quick-links card row up top. index.html: animated gradient hero text, floating background blobs, a live ticker cycling real generator output under the headline, animated count-up stats (111 generators / 16 modules / 9 locales / 100% coverage), and scroll-reveal fade-ins across every major section. All motion respects prefers-reduced-motion. package.json: homepage now points at the live GitHub Pages site instead of the repo.
1 parent a4cd090 commit feac067

5 files changed

Lines changed: 349 additions & 78 deletions

File tree

‎docs/dist/output.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/docs.html‎

Lines changed: 104 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,53 @@
2020
</a>
2121
<nav class="hidden items-center gap-8 md:flex">
2222
<a href="./index.html" class="nav-link">Home</a>
23+
<a href="./index.html#playground" class="nav-link">Playground</a>
2324
<a href="https://github.com/devSahinur/ForgeData" class="nav-link">GitHub</a>
2425
<a href="https://www.npmjs.com/package/@sahinur/forgedata" class="nav-link">npm</a>
2526
</nav>
26-
<button
27-
id="theme-toggle"
28-
type="button"
29-
aria-label="Toggle dark mode"
30-
class="rounded-lg border border-slate-300 p-2 text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-900"
31-
>
32-
<svg id="icon-sun" class="hidden h-5 w-5 dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
33-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" />
34-
</svg>
35-
<svg id="icon-moon" class="block h-5 w-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
36-
<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646Z" />
37-
</svg>
38-
</button>
27+
<div class="flex items-center gap-2">
28+
<button
29+
id="theme-toggle"
30+
type="button"
31+
aria-label="Toggle dark mode"
32+
class="rounded-lg border border-slate-300 p-2 text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-900"
33+
>
34+
<svg id="icon-sun" class="hidden h-5 w-5 dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
35+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364-.707-.707M6.343 6.343l-.707-.707m12.728 0-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" />
36+
</svg>
37+
<svg id="icon-moon" class="block h-5 w-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
38+
<path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 0 1 8.646 3.646 9.003 9.003 0 0 0 12 21a9.003 9.003 0 0 0 8.354-5.646Z" />
39+
</svg>
40+
</button>
41+
<button
42+
id="mobile-menu-btn"
43+
type="button"
44+
aria-label="Toggle navigation menu"
45+
aria-expanded="false"
46+
class="rounded-lg border border-slate-300 p-2 text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-900 lg:hidden"
47+
>
48+
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
49+
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
50+
</svg>
51+
</button>
52+
</div>
53+
</div>
54+
55+
<!-- Mobile nav panel -->
56+
<div id="mobile-sidebar" class="hidden border-t border-slate-200 bg-white px-6 py-4 dark:border-slate-800 dark:bg-slate-950 lg:hidden">
57+
<nav class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
58+
<a href="#getting-started" class="nav-link py-1">Getting Started</a>
59+
<a href="#seeding" class="nav-link py-1">Seeding</a>
60+
<a href="#locales" class="nav-link py-1">Locales</a>
61+
<a href="#custom-generators" class="nav-link py-1">Custom Generators</a>
62+
<a href="#unique-values" class="nav-link py-1">Unique Values</a>
63+
<a href="#helpers" class="nav-link py-1">Helpers</a>
64+
<a href="#api-reference" class="nav-link py-1">API Reference</a>
65+
<a href="#react" class="nav-link py-1">React Integration</a>
66+
<a href="#cli" class="nav-link py-1">CLI Reference</a>
67+
<a href="#migration-guide" class="nav-link py-1">Migration from Faker.js</a>
68+
<a href="#contributing" class="nav-link py-1">Contributing</a>
69+
</nav>
3970
</div>
4071
</header>
4172

@@ -67,6 +98,25 @@
6798
<h1>Documentation</h1>
6899
<p>Everything you need to install, seed, extend, and ship fake data with ForgeData.</p>
69100

101+
<div class="not-prose my-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
102+
<a href="#getting-started" class="card !p-4 no-underline">
103+
<p class="text-sm font-semibold">🚀 Getting Started</p>
104+
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Install and generate your first fake data.</p>
105+
</a>
106+
<a href="#api-reference" class="card !p-4 no-underline">
107+
<p class="text-sm font-semibold">📚 API Reference</p>
108+
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">All 16 modules and 111+ generators.</p>
109+
</a>
110+
<a href="#react" class="card !p-4 no-underline">
111+
<p class="text-sm font-semibold">⚛️ React Integration</p>
112+
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Provider + hooks for React apps.</p>
113+
</a>
114+
<a href="#cli" class="card !p-4 no-underline">
115+
<p class="text-sm font-semibold">⌨️ CLI Reference</p>
116+
<p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Generate fake data from your terminal.</p>
117+
</a>
118+
</div>
119+
70120
<h2 id="getting-started">Getting Started</h2>
71121
<pre><code>npm install @sahinur/forgedata</code></pre>
72122
<pre><code>import { ForgeData } from "@sahinur/forgedata";
@@ -279,6 +329,47 @@ <h2 id="contributing">Contributing</h2>
279329
const isDark = document.documentElement.classList.toggle("dark");
280330
localStorage.theme = isDark ? "dark" : "light";
281331
});
332+
333+
const menuBtn = document.getElementById("mobile-menu-btn");
334+
const mobileSidebar = document.getElementById("mobile-sidebar");
335+
menuBtn.addEventListener("click", () => {
336+
const isOpen = mobileSidebar.classList.toggle("hidden") === false;
337+
menuBtn.setAttribute("aria-expanded", String(isOpen));
338+
});
339+
mobileSidebar.querySelectorAll("a").forEach((link) => {
340+
link.addEventListener("click", () => {
341+
mobileSidebar.classList.add("hidden");
342+
menuBtn.setAttribute("aria-expanded", "false");
343+
});
344+
});
345+
346+
// Copy-to-clipboard button on every code block.
347+
document.querySelectorAll("main pre").forEach((pre) => {
348+
pre.classList.add("group", "relative");
349+
const btn = document.createElement("button");
350+
btn.type = "button";
351+
btn.textContent = "Copy";
352+
btn.className =
353+
"absolute right-2 top-2 rounded-md border border-slate-700 bg-slate-900/80 px-2 py-1 text-xs text-slate-300 opacity-0 transition group-hover:opacity-100 hover:bg-slate-800 focus:opacity-100";
354+
const code = pre.querySelector("code");
355+
btn.addEventListener("click", async () => {
356+
await navigator.clipboard.writeText((code ?? pre).textContent);
357+
btn.textContent = "Copied!";
358+
setTimeout(() => (btn.textContent = "Copy"), 1500);
359+
});
360+
pre.appendChild(btn);
361+
});
362+
363+
// Clickable "#" anchor on every section heading, for easy linking/sharing.
364+
document.querySelectorAll("main h2[id]").forEach((heading) => {
365+
heading.classList.add("group", "scroll-mt-24");
366+
const anchor = document.createElement("a");
367+
anchor.href = `#${heading.id}`;
368+
anchor.textContent = "#";
369+
anchor.setAttribute("aria-label", `Link to this section: ${heading.textContent}`);
370+
anchor.className = "ml-2 text-slate-400 no-underline opacity-0 transition group-hover:opacity-100";
371+
heading.appendChild(anchor);
372+
});
282373
</script>
283374
</body>
284375
</html>

0 commit comments

Comments
 (0)