Skip to content

Commit 344f6b4

Browse files
shainilpsshainilps
committed
experiment
1 parent 0a999cf commit 344f6b4

File tree

9 files changed

+1413
-1
lines changed

9 files changed

+1413
-1
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,3 @@ go.work.sum
3535
# .idea/
3636
# .vscode/
3737
# Added by goreleaser init:
38-
dist/

‎dist/404.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>404 - Page Not Found</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="stylesheet" href="style.css" />
8+
<script>
9+
(function () {
10+
const savedTheme = localStorage.getItem("theme");
11+
if (savedTheme === "dark") {
12+
document.documentElement.setAttribute("data-theme", "dark");
13+
}
14+
})();
15+
</script>
16+
<style>
17+
body {
18+
padding: 0;
19+
min-height: 100vh;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
text-align: center;
25+
}
26+
27+
.error-container {
28+
max-width: 600px;
29+
padding: 2rem;
30+
}
31+
32+
.error-code {
33+
font-size: 8rem;
34+
font-weight: 900;
35+
color: var(--accent);
36+
line-height: 1;
37+
margin-bottom: 1rem;
38+
}
39+
40+
.error-title {
41+
font-size: 2rem;
42+
font-weight: 600;
43+
color: var(--fg);
44+
margin-bottom: 1rem;
45+
}
46+
47+
.error-message {
48+
font-size: 1.1rem;
49+
color: var(--muted);
50+
margin-bottom: 2rem;
51+
line-height: 1.6;
52+
}
53+
54+
.btn {
55+
display: inline-block;
56+
padding: 0.8rem 1.5rem;
57+
background: var(--accent);
58+
color: var(--bg);
59+
text-decoration: none;
60+
border-radius: 8px;
61+
font-weight: 500;
62+
transition: all 0.3s ease;
63+
}
64+
65+
.btn:hover {
66+
background: var(--fg);
67+
transform: translateY(-2px);
68+
}
69+
70+
.theme-toggle {
71+
position: fixed;
72+
top: 2rem;
73+
right: 2rem;
74+
background: var(--code-bg);
75+
border: 1px solid var(--border);
76+
color: var(--fg);
77+
padding: 0.8rem;
78+
border-radius: 50%;
79+
cursor: pointer;
80+
font-size: 1.2rem;
81+
transition: all 0.3s ease;
82+
z-index: 1000;
83+
width: 50px;
84+
height: 50px;
85+
display: flex;
86+
align-items: center;
87+
justify-content: center;
88+
}
89+
90+
.theme-toggle:hover {
91+
background: var(--hover);
92+
transform: scale(1.1);
93+
}
94+
95+
@media (max-width: 768px) {
96+
.error-code {
97+
font-size: 6rem;
98+
}
99+
.error-title {
100+
font-size: 1.5rem;
101+
}
102+
}
103+
</style>
104+
</head>
105+
<body>
106+
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">
107+
🌙
108+
</button>
109+
110+
<div class="error-container">
111+
<div class="error-code">404</div>
112+
<h1 class="error-title">Page Not Found</h1>
113+
<p class="error-message">
114+
The page you're looking for doesn't exist or has been moved.
115+
</p>
116+
<a href="/" class="btn">Go Home</a>
117+
</div>
118+
119+
<script>
120+
function toggleTheme() {
121+
const html = document.documentElement;
122+
const toggleBtn = document.getElementById("themeToggle");
123+
124+
if (html.getAttribute("data-theme") === "dark") {
125+
html.removeAttribute("data-theme");
126+
toggleBtn.textContent = "🌙";
127+
localStorage.setItem("theme", "light");
128+
} else {
129+
html.setAttribute("data-theme", "dark");
130+
toggleBtn.textContent = "☀️";
131+
localStorage.setItem("theme", "dark");
132+
}
133+
}
134+
135+
// Set correct toggle button icon on page load
136+
document.addEventListener("DOMContentLoaded", function () {
137+
const savedTheme = localStorage.getItem("theme");
138+
const toggleBtn = document.getElementById("themeToggle");
139+
140+
if (savedTheme === "dark") {
141+
toggleBtn.textContent = "☀️";
142+
} else {
143+
toggleBtn.textContent = "🌙";
144+
}
145+
});
146+
</script>
147+
</body>
148+
</html>

‎dist/basics/configfile.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Configuration file</title>
6+
<meta name="description" content="this is the docs of your vulpix" />
7+
<meta name="author" content="https://x.com/codeshaine" />
8+
<meta name="og:title" content="Configuration file" />
9+
<meta name="og:description" content="this is the docs of your vulpix" />
10+
<meta name="og:url" content="doc.vulpix.com" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1" />
12+
13+
<link rel="preconnect" href="https://fonts.googleapis.com" />
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
17+
rel="stylesheet"
18+
/>
19+
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
20+
<script>
21+
(function () {
22+
const savedTheme = localStorage.getItem("theme");
23+
if (savedTheme === "dark") {
24+
document.documentElement.setAttribute("data-theme", "dark");
25+
}
26+
})();
27+
</script>
28+
29+
<link rel="stylesheet" href="/style.css" />
30+
31+
</head>
32+
<body>
33+
<div class="mobile-overlay" id="mobileOverlay"></div>
34+
35+
<header class="mobile-header">
36+
<button class="mobile-nav-toggle" id="mobileNavToggle">☰</button>
37+
<a href="/" class="mobile-logo">Vulpix</a>
38+
</header>
39+
40+
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">
41+
🌙
42+
</button>
43+
44+
<nav class="bar" id="sidebar">
45+
<a href="/" class="logo"> Vulpix </a>
46+
<div class="container">
47+
48+
<section>
49+
<h3>Basics</h3>
50+
<ul>
51+
52+
<li>
53+
<a href="/basics/installation">Installation</a>
54+
</li>
55+
56+
<li>
57+
<a href="/basics/usage">Usage</a>
58+
</li>
59+
60+
<li>
61+
<a href="/basics/configfile">Config File</a>
62+
</li>
63+
64+
</ul>
65+
</section>
66+
67+
<section>
68+
<h3>Guides</h3>
69+
<ul>
70+
71+
<li>
72+
<a href="/guides/deploy">Deployement</a>
73+
</li>
74+
75+
</ul>
76+
</section>
77+
78+
<section>
79+
<h3>Links</h3>
80+
<ul>
81+
82+
<li>
83+
<a href="https://github.com/codeshaine/vulpix">Github</a>
84+
</li>
85+
86+
<li>
87+
<a href="https://x.com/code_shaine">Twitter</a>
88+
</li>
89+
90+
</ul>
91+
</section>
92+
93+
</div>
94+
</nav>
95+
<main class="content">
96+
<h1>Configuration file</h1>
97+
<p>As of right now config file of vulpix is very minmal. you don't get lot of features like you get from feature rich ssg like hugo or even the astro starlight. This ssg is simple, minimal and was designed for me</p>
98+
<p>Unlike other SSGs I am using YAML format as the config type, because It is more elegant to look at.</p>
99+
<p>config file:</p>
100+
<pre><code class="language-yaml">title: Vulpix
101+
domain: doc.vulpix.com # (optional)
102+
description: this is the docs of your vulpix
103+
handle: https://x.com/codeshaine
104+
source: doc/src
105+
build: dist
106+
sidebar:
107+
- title: Basics
108+
pages:
109+
- - Getting started
110+
- /getting_started/installation
111+
- title: Links
112+
pages:
113+
- - Github
114+
- https://github.com/codeshaine
115+
- - Twitter
116+
- https://x.com/code_shaine
117+
</code></pre>
118+
<p>The config file is more self exploratory.</p>
119+
<ul>
120+
<li>title, domain, description, handle are used for the meta info of the site.</li>
121+
<li>note that title used as main logo</li>
122+
<li>source and build direcory is the path of your source and build that you want to generate</li>
123+
<li>sidebar is the main feature available here like other SSGs. This follow a list of object so you can have flexibility
124+
these are all the main features and characterstics</li>
125+
</ul>
126+
127+
</main>
128+
<script>
129+
function toggleTheme() {
130+
const html = document.documentElement;
131+
const toggleBtn = document.getElementById("themeToggle");
132+
if (html.getAttribute("data-theme") === "dark") {
133+
html.removeAttribute("data-theme");
134+
toggleBtn.textContent = "🌙";
135+
localStorage.setItem("theme", "light");
136+
} else {
137+
html.setAttribute("data-theme", "dark");
138+
toggleBtn.textContent = "☀️";
139+
localStorage.setItem("theme", "dark");
140+
}
141+
}
142+
143+
144+
const mobileNavToggle = document.getElementById("mobileNavToggle");
145+
const sidebar = document.getElementById("sidebar");
146+
const mobileOverlay = document.getElementById("mobileOverlay");
147+
148+
function toggleMobileNav() {
149+
sidebar.classList.toggle("open");
150+
mobileOverlay.classList.toggle("active");
151+
152+
153+
if (sidebar.classList.contains("open")) {
154+
mobileNavToggle.textContent = "✕";
155+
} else {
156+
mobileNavToggle.textContent = "☰";
157+
}
158+
}
159+
160+
function closeMobileNav() {
161+
sidebar.classList.remove("open");
162+
mobileOverlay.classList.remove("active");
163+
mobileNavToggle.textContent = "☰";
164+
}
165+
166+
167+
mobileNavToggle.addEventListener("click", toggleMobileNav);
168+
mobileOverlay.addEventListener("click", closeMobileNav);
169+
170+
171+
sidebar.addEventListener("click", (e) => {
172+
if (e.target.tagName === "A" && window.innerWidth <= 768) {
173+
closeMobileNav();
174+
}
175+
});
176+
177+
178+
window.addEventListener("resize", () => {
179+
if (window.innerWidth > 768) {
180+
closeMobileNav();
181+
}
182+
});
183+
184+
185+
(function () {
186+
const savedTheme = localStorage.getItem("theme");
187+
if (savedTheme === "dark") {
188+
document.documentElement.setAttribute("data-theme", "dark");
189+
document.getElementById("themeToggle").textContent = "☀️";
190+
}
191+
})();
192+
</script>
193+
</body>
194+
</html>

0 commit comments

Comments
 (0)