Skip to content

Commit abb0759

Browse files
shainilpsshainilps
committed
responsive in mobile
1 parent 4987b4b commit abb0759

File tree

11 files changed

+977
-339
lines changed

11 files changed

+977
-339
lines changed

‎cmd/build/assets/style.css‎

Lines changed: 310 additions & 156 deletions
Large diffs are not rendered by default.

‎cmd/build/assets/templates.html‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>{{ .Meta.Title }}</title>
6-
76
<meta name="description" content="{{ .Meta.Description }}" />
87
<meta name="author" content="{{ .Meta.Handle }}" />
98
<meta name="og:title" content="{{ .Meta.Title }}" />
@@ -31,10 +30,18 @@
3130
{{ end }}
3231
</head>
3332
<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">{{ .Title }}</a>
38+
</header>
39+
3440
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">
3541
🌙
3642
</button>
37-
<nav class="bar">
43+
44+
<nav class="bar" id="sidebar">
3845
<a href="/" class="logo"> {{ .Title }} </a>
3946
<div class="container">
4047
{{ range .LeftSideBar }}
@@ -51,7 +58,6 @@ <h3>{{ .Title }}</h3>
5158
{{ end }}
5259
</div>
5360
</nav>
54-
5561
<main class="content">
5662
<h1>{{ .Meta.Title }}</h1>
5763
{{ .Content }}
@@ -60,7 +66,6 @@ <h1>{{ .Meta.Title }}</h1>
6066
function toggleTheme() {
6167
const html = document.documentElement;
6268
const toggleBtn = document.getElementById("themeToggle");
63-
6469
if (html.getAttribute("data-theme") === "dark") {
6570
html.removeAttribute("data-theme");
6671
toggleBtn.textContent = "🌙";
@@ -71,6 +76,56 @@ <h1>{{ .Meta.Title }}</h1>
7176
localStorage.setItem("theme", "dark");
7277
}
7378
}
79+
80+
// Mobile navigation functionality
81+
const mobileNavToggle = document.getElementById("mobileNavToggle");
82+
const sidebar = document.getElementById("sidebar");
83+
const mobileOverlay = document.getElementById("mobileOverlay");
84+
85+
function toggleMobileNav() {
86+
sidebar.classList.toggle("open");
87+
mobileOverlay.classList.toggle("active");
88+
89+
// Toggle hamburger icon
90+
if (sidebar.classList.contains("open")) {
91+
mobileNavToggle.textContent = "✕";
92+
} else {
93+
mobileNavToggle.textContent = "☰";
94+
}
95+
}
96+
97+
function closeMobileNav() {
98+
sidebar.classList.remove("open");
99+
mobileOverlay.classList.remove("active");
100+
mobileNavToggle.textContent = "☰";
101+
}
102+
103+
// Event listeners
104+
mobileNavToggle.addEventListener("click", toggleMobileNav);
105+
mobileOverlay.addEventListener("click", closeMobileNav);
106+
107+
// Close mobile nav when clicking on a link
108+
sidebar.addEventListener("click", (e) => {
109+
if (e.target.tagName === "A" && window.innerWidth <= 768) {
110+
closeMobileNav();
111+
}
112+
});
113+
114+
// Close mobile nav on window resize if it's open
115+
window.addEventListener("resize", () => {
116+
if (window.innerWidth > 768) {
117+
closeMobileNav();
118+
}
119+
});
120+
121+
// Load saved theme
122+
(function () {
123+
const savedTheme = localStorage.getItem("theme");
124+
if (savedTheme === "dark") {
125+
document.documentElement.setAttribute("data-theme", "dark");
126+
document.getElementById("themeToggle").textContent = "☀️";
127+
}
128+
})();
74129
</script>
75130
</body>
76131
</html>

‎cmd/build/build.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import (
1515

1616
// TODO: change this in prod
1717
const (
18-
CONFIG_FILE = "vulpix.config.yaml"
18+
CONFIG_FILE = "vulphix.config.yaml"
1919
DEFAULT_SOURCE = "src"
2020
DEFAULT_BUILD = "dist"
2121
)

‎cmd/preview/preview.go‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ func PreviewBuild() int {
2222
http.HandleFunc("/", func(w http.ResponseWriter, req *http.Request) {
2323
extension := filepath.Ext(req.URL.Path)
2424
if extension != "" {
25-
data, err := os.ReadFile(path.Join("dist", req.URL.Path))
25+
data, err := os.ReadFile(path.Join(dir, req.URL.Path))
2626
if err != nil {
2727
w.WriteHeader(404)
2828
w.Write([]byte("404 - Not found"))
@@ -34,7 +34,7 @@ func PreviewBuild() int {
3434
}
3535
html, err := resolveHTMLRequest(req.URL.Path)
3636
if errors.Is(err, fs.ErrNotExist) {
37-
html, _ = os.ReadFile("dist/404.html")
37+
html, _ = os.ReadFile(dir + "/404.html")
3838
w.Header().Set("Content-Type", "text/html; charset=utf-8")
3939
w.WriteHeader(404)
4040
w.Write(html)

‎docs/dist/basics/configfile.html‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Configuration file</title>
6-
76
<meta name="description" content="this is the docs of your vulpix" />
87
<meta name="author" content="https://x.com/codeshaine" />
98
<meta name="og:title" content="Configuration file" />
@@ -31,10 +30,18 @@
3130

3231
</head>
3332
<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+
3440
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">
3541
🌙
3642
</button>
37-
<nav class="bar">
43+
44+
<nav class="bar" id="sidebar">
3845
<a href="/" class="logo"> Vulpix </a>
3946
<div class="container">
4047

@@ -85,7 +92,6 @@ <h3>Links</h3>
8592

8693
</div>
8794
</nav>
88-
8995
<main class="content">
9096
<h1>Configuration file</h1>
9197
<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>
@@ -123,7 +129,6 @@ <h1>Configuration file</h1>
123129
function toggleTheme() {
124130
const html = document.documentElement;
125131
const toggleBtn = document.getElementById("themeToggle");
126-
127132
if (html.getAttribute("data-theme") === "dark") {
128133
html.removeAttribute("data-theme");
129134
toggleBtn.textContent = "🌙";
@@ -134,6 +139,56 @@ <h1>Configuration file</h1>
134139
localStorage.setItem("theme", "dark");
135140
}
136141
}
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+
})();
137192
</script>
138193
</body>
139194
</html>

‎docs/dist/basics/installation.html‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Instllation Process</title>
6-
76
<meta name="description" content="this is the docs of your vulpix" />
87
<meta name="author" content="https://x.com/codeshaine" />
98
<meta name="og:title" content="Instllation Process" />
@@ -31,10 +30,18 @@
3130

3231
</head>
3332
<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+
3440
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">
3541
🌙
3642
</button>
37-
<nav class="bar">
43+
44+
<nav class="bar" id="sidebar">
3845
<a href="/" class="logo"> Vulpix </a>
3946
<div class="container">
4047

@@ -85,7 +92,6 @@ <h3>Links</h3>
8592

8693
</div>
8794
</nav>
88-
8995
<main class="content">
9096
<h1>Instllation Process</h1>
9197
<p>Inroder to install the tool, you need to have Golang installed. If not you can download that <a href="https://go.dev/doc/install">here</a>.</p>
@@ -99,7 +105,6 @@ <h1>Instllation Process</h1>
99105
function toggleTheme() {
100106
const html = document.documentElement;
101107
const toggleBtn = document.getElementById("themeToggle");
102-
103108
if (html.getAttribute("data-theme") === "dark") {
104109
html.removeAttribute("data-theme");
105110
toggleBtn.textContent = "🌙";
@@ -110,6 +115,56 @@ <h1>Instllation Process</h1>
110115
localStorage.setItem("theme", "dark");
111116
}
112117
}
118+
119+
120+
const mobileNavToggle = document.getElementById("mobileNavToggle");
121+
const sidebar = document.getElementById("sidebar");
122+
const mobileOverlay = document.getElementById("mobileOverlay");
123+
124+
function toggleMobileNav() {
125+
sidebar.classList.toggle("open");
126+
mobileOverlay.classList.toggle("active");
127+
128+
129+
if (sidebar.classList.contains("open")) {
130+
mobileNavToggle.textContent = "✕";
131+
} else {
132+
mobileNavToggle.textContent = "☰";
133+
}
134+
}
135+
136+
function closeMobileNav() {
137+
sidebar.classList.remove("open");
138+
mobileOverlay.classList.remove("active");
139+
mobileNavToggle.textContent = "☰";
140+
}
141+
142+
143+
mobileNavToggle.addEventListener("click", toggleMobileNav);
144+
mobileOverlay.addEventListener("click", closeMobileNav);
145+
146+
147+
sidebar.addEventListener("click", (e) => {
148+
if (e.target.tagName === "A" && window.innerWidth <= 768) {
149+
closeMobileNav();
150+
}
151+
});
152+
153+
154+
window.addEventListener("resize", () => {
155+
if (window.innerWidth > 768) {
156+
closeMobileNav();
157+
}
158+
});
159+
160+
161+
(function () {
162+
const savedTheme = localStorage.getItem("theme");
163+
if (savedTheme === "dark") {
164+
document.documentElement.setAttribute("data-theme", "dark");
165+
document.getElementById("themeToggle").textContent = "☀️";
166+
}
167+
})();
113168
</script>
114169
</body>
115170
</html>

0 commit comments

Comments
 (0)