smirky 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.bashrc +1 -0
- package/README.md +203 -0
- package/content/keeping-things-simple.md +13 -0
- package/content/three-small-steps.md +14 -0
- package/content/welcome-to-the-blog.md +14 -0
- package/dist/about/index.html +60 -0
- package/dist/assets/input.css +92 -0
- package/dist/assets/site.css +630 -0
- package/dist/blog/about/index.html +88 -0
- package/dist/blog/building-a-static-site-generator/index.html +86 -0
- package/dist/blog/hello-world/index.html +86 -0
- package/dist/blog/index.html +125 -0
- package/dist/blog/keeping-things-simple/index.html +70 -0
- package/dist/blog/three-small-steps/index.html +70 -0
- package/dist/blog/welcome-to-the-blog/index.html +70 -0
- package/dist/blog/why-kiss-matters/index.html +86 -0
- package/dist/contact/index.html +83 -0
- package/dist/index.html +56 -0
- package/dist/tags/index.html +65 -0
- package/dist/tags/javascript/index.html +125 -0
- package/dist/tags/webdev/index.html +125 -0
- package/output/assets/input.css +92 -0
- package/output/assets/site.css +630 -0
- package/package.json +31 -0
- package/pages/about.md +21 -0
- package/pages/contact.md +44 -0
- package/smirky.js +391 -0
- package/theme/assets/input.css +92 -0
- package/theme/assets/site.css +630 -0
- package/theme/blog.html +8 -0
- package/theme/debug.html +5 -0
- package/theme/index.html +10 -0
- package/theme/layout.html +23 -0
- package/theme/navbar.html +16 -0
- package/theme/page.html +5 -0
- package/theme/partials/blog_post_card.html +12 -0
- package/theme/partials/footer.html +4 -0
- package/theme/partials/head.html +2 -0
- package/theme/partials/navbar.html +14 -0
- package/theme/partials/tag_pill.html +5 -0
- package/theme/post.html +10 -0
- package/theme/site.json +8 -0
- package/theme/tags.html +8 -0
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
|
|
7
|
+
<title>Building A Static Site Generator - My Awesome Blog</title>
|
|
8
|
+
<meta name="description" content="">
|
|
9
|
+
|
|
10
|
+
<!-- Tailwind CDN -->
|
|
11
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
function toggleMenu() {
|
|
15
|
+
document.getElementById("mobile-menu").classList.toggle("hidden");
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body class="bg-slate-50 text-slate-900">
|
|
21
|
+
|
|
22
|
+
<!-- NAVBAR -->
|
|
23
|
+
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
|
24
|
+
<div class="max-w-5xl mx-auto px-4">
|
|
25
|
+
<div class="flex justify-between items-center h-16">
|
|
26
|
+
|
|
27
|
+
<!-- Logo -->
|
|
28
|
+
<a href="/" class="text-xl font-bold text-indigo-600">
|
|
29
|
+
My Awesome Blog
|
|
30
|
+
</a>
|
|
31
|
+
|
|
32
|
+
<!-- Desktop Nav -->
|
|
33
|
+
<div class="hidden md:flex space-x-8 text-sm font-medium">
|
|
34
|
+
<a href="/about/" class="hover:text-indigo-600 text-slate-600">About</a>
|
|
35
|
+
<a href="/contact/" class="hover:text-indigo-600 text-slate-600">Contact</a>
|
|
36
|
+
<a href="/blog/" class="hover:text-indigo-600 text-indigo-600 font-semibold">Blog</a>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<!-- Mobile Button -->
|
|
40
|
+
<button onclick="toggleMenu()" class="md:hidden text-slate-700">
|
|
41
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none"
|
|
42
|
+
viewBox="0 0 24 24" stroke="currentColor">
|
|
43
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
44
|
+
d="M4 6h16M4 12h16M4 18h16" />
|
|
45
|
+
</svg>
|
|
46
|
+
</button>
|
|
47
|
+
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<!-- Mobile Menu -->
|
|
52
|
+
<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
|
|
53
|
+
<div class="px-4 py-3 space-y-2 text-sm">
|
|
54
|
+
<a href="/about/" class="block text-slate-700">About</a>
|
|
55
|
+
<a href="/contact/" class="block text-slate-700">Contact</a>
|
|
56
|
+
<a href="/blog/" class="block text-indigo-600 font-semibold">Blog</a>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</nav>
|
|
60
|
+
|
|
61
|
+
<!-- MAIN CONTENT -->
|
|
62
|
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
|
63
|
+
<article class="prose prose-lg max-w-none">
|
|
64
|
+
<h1 class="mb-2">Building A Static Site Generator</h1>
|
|
65
|
+
|
|
66
|
+
<p class="text-sm text-gray-500 mb-6">
|
|
67
|
+
{{ date }}
|
|
68
|
+
<span class="ml-2">
|
|
69
|
+
{{ tags }}
|
|
70
|
+
</span>
|
|
71
|
+
</p>
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
</article>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
</main>
|
|
78
|
+
|
|
79
|
+
<!-- FOOTER -->
|
|
80
|
+
<footer class="py-10 text-center text-slate-500 text-sm">
|
|
81
|
+
© 2026 My Name
|
|
82
|
+
</footer>
|
|
83
|
+
|
|
84
|
+
</body>
|
|
85
|
+
</html>
|
|
86
|
+
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
|
|
7
|
+
<title>Hello World - My Awesome Blog</title>
|
|
8
|
+
<meta name="description" content="">
|
|
9
|
+
|
|
10
|
+
<!-- Tailwind CDN -->
|
|
11
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
function toggleMenu() {
|
|
15
|
+
document.getElementById("mobile-menu").classList.toggle("hidden");
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body class="bg-slate-50 text-slate-900">
|
|
21
|
+
|
|
22
|
+
<!-- NAVBAR -->
|
|
23
|
+
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
|
24
|
+
<div class="max-w-5xl mx-auto px-4">
|
|
25
|
+
<div class="flex justify-between items-center h-16">
|
|
26
|
+
|
|
27
|
+
<!-- Logo -->
|
|
28
|
+
<a href="/" class="text-xl font-bold text-indigo-600">
|
|
29
|
+
My Awesome Blog
|
|
30
|
+
</a>
|
|
31
|
+
|
|
32
|
+
<!-- Desktop Nav -->
|
|
33
|
+
<div class="hidden md:flex space-x-8 text-sm font-medium">
|
|
34
|
+
<a href="/about/" class="hover:text-indigo-600 text-slate-600">About</a>
|
|
35
|
+
<a href="/contact/" class="hover:text-indigo-600 text-slate-600">Contact</a>
|
|
36
|
+
<a href="/blog/" class="hover:text-indigo-600 text-indigo-600 font-semibold">Blog</a>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<!-- Mobile Button -->
|
|
40
|
+
<button onclick="toggleMenu()" class="md:hidden text-slate-700">
|
|
41
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none"
|
|
42
|
+
viewBox="0 0 24 24" stroke="currentColor">
|
|
43
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
44
|
+
d="M4 6h16M4 12h16M4 18h16" />
|
|
45
|
+
</svg>
|
|
46
|
+
</button>
|
|
47
|
+
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<!-- Mobile Menu -->
|
|
52
|
+
<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
|
|
53
|
+
<div class="px-4 py-3 space-y-2 text-sm">
|
|
54
|
+
<a href="/about/" class="block text-slate-700">About</a>
|
|
55
|
+
<a href="/contact/" class="block text-slate-700">Contact</a>
|
|
56
|
+
<a href="/blog/" class="block text-indigo-600 font-semibold">Blog</a>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</nav>
|
|
60
|
+
|
|
61
|
+
<!-- MAIN CONTENT -->
|
|
62
|
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
|
63
|
+
<article class="prose prose-lg max-w-none">
|
|
64
|
+
<h1 class="mb-2">Hello World</h1>
|
|
65
|
+
|
|
66
|
+
<p class="text-sm text-gray-500 mb-6">
|
|
67
|
+
{{ date }}
|
|
68
|
+
<span class="ml-2">
|
|
69
|
+
{{ tags }}
|
|
70
|
+
</span>
|
|
71
|
+
</p>
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
</article>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
</main>
|
|
78
|
+
|
|
79
|
+
<!-- FOOTER -->
|
|
80
|
+
<footer class="py-10 text-center text-slate-500 text-sm">
|
|
81
|
+
© 2026 My Name
|
|
82
|
+
</footer>
|
|
83
|
+
|
|
84
|
+
</body>
|
|
85
|
+
</html>
|
|
86
|
+
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="stylesheet" href="/assets/site.css">
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<meta charset="UTF-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
|
|
10
|
+
<title>Blog - My Site</title>
|
|
11
|
+
<meta name="description" content="A simple static site powered by a KISS SSG." />
|
|
12
|
+
</head>
|
|
13
|
+
<body class="bg-slate-50 text-slate-900">
|
|
14
|
+
|
|
15
|
+
<nav class="bg-white shadow-sm">
|
|
16
|
+
<div class="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
|
|
17
|
+
|
|
18
|
+
<a href="/" class="text-xl font-bold text-indigo-600">
|
|
19
|
+
My Site
|
|
20
|
+
</a>
|
|
21
|
+
|
|
22
|
+
<div class="space-x-6 text-sm font-medium">
|
|
23
|
+
<a href="/about/" class="text-slate-700 hover:text-slate-900">About</a>
|
|
24
|
+
<a href="/contact/" class="text-slate-700 hover:text-slate-900">Contact</a>
|
|
25
|
+
<a href="/blog/" class="text-indigo-600 font-semibold">Blog</a>
|
|
26
|
+
<a href="/tags/" class="text-slate-700 hover:text-slate-900">Tags</a>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
</div>
|
|
30
|
+
</nav>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
|
35
|
+
<section class="space-y-8">
|
|
36
|
+
<h1 class="text-3xl font-bold text-slate-900">Blog</h1>
|
|
37
|
+
|
|
38
|
+
<div class="grid gap-6">
|
|
39
|
+
<article class="p-6 bg-white rounded-lg shadow hover:shadow-md transition">
|
|
40
|
+
<h2 class="text-xl font-semibold text-slate-900">
|
|
41
|
+
<a href="/blog/three-small-steps/" class="hover:underline">Three Small Steps</a>
|
|
42
|
+
</h2>
|
|
43
|
+
|
|
44
|
+
<p class="text-sm text-slate-500 mt-1">2026-01-12</p>
|
|
45
|
+
|
|
46
|
+
<div class="mt-3 flex flex-wrap gap-2">
|
|
47
|
+
<a href="/tags/javascript/"
|
|
48
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
49
|
+
javascript
|
|
50
|
+
</a>
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
<a href="/tags/webdev/"
|
|
54
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
55
|
+
webdev
|
|
56
|
+
</a>
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
</div>
|
|
60
|
+
</article>
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
<article class="p-6 bg-white rounded-lg shadow hover:shadow-md transition">
|
|
64
|
+
<h2 class="text-xl font-semibold text-slate-900">
|
|
65
|
+
<a href="/blog/keeping-things-simple/" class="hover:underline">Keeping Things Simple</a>
|
|
66
|
+
</h2>
|
|
67
|
+
|
|
68
|
+
<p class="text-sm text-slate-500 mt-1">2026-01-11</p>
|
|
69
|
+
|
|
70
|
+
<div class="mt-3 flex flex-wrap gap-2">
|
|
71
|
+
<a href="/tags/javascript/"
|
|
72
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
73
|
+
javascript
|
|
74
|
+
</a>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<a href="/tags/webdev/"
|
|
78
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
79
|
+
webdev
|
|
80
|
+
</a>
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
</div>
|
|
84
|
+
</article>
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
<article class="p-6 bg-white rounded-lg shadow hover:shadow-md transition">
|
|
88
|
+
<h2 class="text-xl font-semibold text-slate-900">
|
|
89
|
+
<a href="/blog/welcome-to-the-blog/" class="hover:underline">Welcome to the Blog</a>
|
|
90
|
+
</h2>
|
|
91
|
+
|
|
92
|
+
<p class="text-sm text-slate-500 mt-1">2026-01-10</p>
|
|
93
|
+
|
|
94
|
+
<div class="mt-3 flex flex-wrap gap-2">
|
|
95
|
+
<a href="/tags/javascript/"
|
|
96
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
97
|
+
javascript
|
|
98
|
+
</a>
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
<a href="/tags/webdev/"
|
|
102
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
103
|
+
webdev
|
|
104
|
+
</a>
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
</div>
|
|
108
|
+
</article>
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
</div>
|
|
112
|
+
</section>
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
</main>
|
|
116
|
+
|
|
117
|
+
<footer class="mt-12 border-t border-slate-200 py-6 text-sm text-slate-500 text-center">
|
|
118
|
+
© 2026 My Site
|
|
119
|
+
</footer>
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
</body>
|
|
124
|
+
</html>
|
|
125
|
+
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="stylesheet" href="/assets/site.css">
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<meta charset="UTF-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
|
|
10
|
+
<title>Keeping Things Simple - My Site</title>
|
|
11
|
+
<meta name="description" content="A simple static site powered by a KISS SSG." />
|
|
12
|
+
</head>
|
|
13
|
+
<body class="bg-slate-50 text-slate-900">
|
|
14
|
+
|
|
15
|
+
<nav class="bg-white shadow-sm">
|
|
16
|
+
<div class="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
|
|
17
|
+
|
|
18
|
+
<a href="/" class="text-xl font-bold text-indigo-600">
|
|
19
|
+
My Site
|
|
20
|
+
</a>
|
|
21
|
+
|
|
22
|
+
<div class="space-x-6 text-sm font-medium">
|
|
23
|
+
<a href="/about/" class="text-slate-700 hover:text-slate-900">About</a>
|
|
24
|
+
<a href="/contact/" class="text-slate-700 hover:text-slate-900">Contact</a>
|
|
25
|
+
<a href="/blog/" class="text-indigo-600 font-semibold">Blog</a>
|
|
26
|
+
<a href="/tags/" class="text-slate-700 hover:text-slate-900">Tags</a>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
</div>
|
|
30
|
+
</nav>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
|
35
|
+
<article class="prose prose-slate max-w-none">
|
|
36
|
+
<h1>Keeping Things Simple</h1>
|
|
37
|
+
|
|
38
|
+
<div class="flex flex-wrap gap-2 mb-6">
|
|
39
|
+
<a href="/tags/javascript/"
|
|
40
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
41
|
+
javascript
|
|
42
|
+
</a>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<a href="/tags/webdev/"
|
|
46
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
47
|
+
webdev
|
|
48
|
+
</a>
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<h1>Keeping Things Simple</h1>
|
|
54
|
+
<p>Simplicity is underrated. When you remove unnecessary complexity, you make room for clarity and creativity.</p>
|
|
55
|
+
<p>This site is built with that philosophy in mind. No heavy frameworks. No complicated build steps. Just clean content and a straightforward workflow.</p>
|
|
56
|
+
|
|
57
|
+
</article>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
</main>
|
|
61
|
+
|
|
62
|
+
<footer class="mt-12 border-t border-slate-200 py-6 text-sm text-slate-500 text-center">
|
|
63
|
+
© 2026 My Site
|
|
64
|
+
</footer>
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
70
|
+
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="stylesheet" href="/assets/site.css">
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<meta charset="UTF-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
|
|
10
|
+
<title>Three Small Steps - My Site</title>
|
|
11
|
+
<meta name="description" content="A simple static site powered by a KISS SSG." />
|
|
12
|
+
</head>
|
|
13
|
+
<body class="bg-slate-50 text-slate-900">
|
|
14
|
+
|
|
15
|
+
<nav class="bg-white shadow-sm">
|
|
16
|
+
<div class="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
|
|
17
|
+
|
|
18
|
+
<a href="/" class="text-xl font-bold text-indigo-600">
|
|
19
|
+
My Site
|
|
20
|
+
</a>
|
|
21
|
+
|
|
22
|
+
<div class="space-x-6 text-sm font-medium">
|
|
23
|
+
<a href="/about/" class="text-slate-700 hover:text-slate-900">About</a>
|
|
24
|
+
<a href="/contact/" class="text-slate-700 hover:text-slate-900">Contact</a>
|
|
25
|
+
<a href="/blog/" class="text-indigo-600 font-semibold">Blog</a>
|
|
26
|
+
<a href="/tags/" class="text-slate-700 hover:text-slate-900">Tags</a>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
</div>
|
|
30
|
+
</nav>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
|
35
|
+
<article class="prose prose-slate max-w-none">
|
|
36
|
+
<h1>Three Small Steps</h1>
|
|
37
|
+
|
|
38
|
+
<div class="flex flex-wrap gap-2 mb-6">
|
|
39
|
+
<a href="/tags/javascript/"
|
|
40
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
41
|
+
javascript
|
|
42
|
+
</a>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<a href="/tags/webdev/"
|
|
46
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
47
|
+
webdev
|
|
48
|
+
</a>
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<h1>Three Small Steps</h1>
|
|
54
|
+
<p>Big projects don’t start big — they grow from small, consistent steps.</p>
|
|
55
|
+
<p>This blog is one of those steps. Each post is a chance to learn, refine, and move forward. Thanks for being part of the journey.</p>
|
|
56
|
+
|
|
57
|
+
</article>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
</main>
|
|
61
|
+
|
|
62
|
+
<footer class="mt-12 border-t border-slate-200 py-6 text-sm text-slate-500 text-center">
|
|
63
|
+
© 2026 My Site
|
|
64
|
+
</footer>
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
70
|
+
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="stylesheet" href="/assets/site.css">
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<meta charset="UTF-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
|
|
10
|
+
<title>Welcome to the Blog - My Site</title>
|
|
11
|
+
<meta name="description" content="A simple static site powered by a KISS SSG." />
|
|
12
|
+
</head>
|
|
13
|
+
<body class="bg-slate-50 text-slate-900">
|
|
14
|
+
|
|
15
|
+
<nav class="bg-white shadow-sm">
|
|
16
|
+
<div class="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
|
|
17
|
+
|
|
18
|
+
<a href="/" class="text-xl font-bold text-indigo-600">
|
|
19
|
+
My Site
|
|
20
|
+
</a>
|
|
21
|
+
|
|
22
|
+
<div class="space-x-6 text-sm font-medium">
|
|
23
|
+
<a href="/about/" class="text-slate-700 hover:text-slate-900">About</a>
|
|
24
|
+
<a href="/contact/" class="text-slate-700 hover:text-slate-900">Contact</a>
|
|
25
|
+
<a href="/blog/" class="text-indigo-600 font-semibold">Blog</a>
|
|
26
|
+
<a href="/tags/" class="text-slate-700 hover:text-slate-900">Tags</a>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
</div>
|
|
30
|
+
</nav>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
|
35
|
+
<article class="prose prose-slate max-w-none">
|
|
36
|
+
<h1>Welcome to the Blog</h1>
|
|
37
|
+
|
|
38
|
+
<div class="flex flex-wrap gap-2 mb-6">
|
|
39
|
+
<a href="/tags/javascript/"
|
|
40
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
41
|
+
javascript
|
|
42
|
+
</a>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<a href="/tags/webdev/"
|
|
46
|
+
class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded-full">
|
|
47
|
+
webdev
|
|
48
|
+
</a>
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<h1>Welcome to the Blog</h1>
|
|
54
|
+
<p>Thanks for stopping by. This site is a simple, clean space to share thoughts, ideas, and experiments.</p>
|
|
55
|
+
<p>Everything here is built with a lightweight static site generator that focuses on clarity and simplicity. More posts will be added soon.</p>
|
|
56
|
+
|
|
57
|
+
</article>
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
</main>
|
|
61
|
+
|
|
62
|
+
<footer class="mt-12 border-t border-slate-200 py-6 text-sm text-slate-500 text-center">
|
|
63
|
+
© 2026 My Site
|
|
64
|
+
</footer>
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
70
|
+
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
|
|
7
|
+
<title>Why Kiss Matters - My Awesome Blog</title>
|
|
8
|
+
<meta name="description" content="">
|
|
9
|
+
|
|
10
|
+
<!-- Tailwind CDN -->
|
|
11
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
function toggleMenu() {
|
|
15
|
+
document.getElementById("mobile-menu").classList.toggle("hidden");
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body class="bg-slate-50 text-slate-900">
|
|
21
|
+
|
|
22
|
+
<!-- NAVBAR -->
|
|
23
|
+
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
|
24
|
+
<div class="max-w-5xl mx-auto px-4">
|
|
25
|
+
<div class="flex justify-between items-center h-16">
|
|
26
|
+
|
|
27
|
+
<!-- Logo -->
|
|
28
|
+
<a href="/" class="text-xl font-bold text-indigo-600">
|
|
29
|
+
My Awesome Blog
|
|
30
|
+
</a>
|
|
31
|
+
|
|
32
|
+
<!-- Desktop Nav -->
|
|
33
|
+
<div class="hidden md:flex space-x-8 text-sm font-medium">
|
|
34
|
+
<a href="/about/" class="hover:text-indigo-600 text-slate-600">About</a>
|
|
35
|
+
<a href="/contact/" class="hover:text-indigo-600 text-slate-600">Contact</a>
|
|
36
|
+
<a href="/blog/" class="hover:text-indigo-600 text-indigo-600 font-semibold">Blog</a>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<!-- Mobile Button -->
|
|
40
|
+
<button onclick="toggleMenu()" class="md:hidden text-slate-700">
|
|
41
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none"
|
|
42
|
+
viewBox="0 0 24 24" stroke="currentColor">
|
|
43
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
44
|
+
d="M4 6h16M4 12h16M4 18h16" />
|
|
45
|
+
</svg>
|
|
46
|
+
</button>
|
|
47
|
+
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<!-- Mobile Menu -->
|
|
52
|
+
<div id="mobile-menu" class="hidden md:hidden bg-white border-t">
|
|
53
|
+
<div class="px-4 py-3 space-y-2 text-sm">
|
|
54
|
+
<a href="/about/" class="block text-slate-700">About</a>
|
|
55
|
+
<a href="/contact/" class="block text-slate-700">Contact</a>
|
|
56
|
+
<a href="/blog/" class="block text-indigo-600 font-semibold">Blog</a>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</nav>
|
|
60
|
+
|
|
61
|
+
<!-- MAIN CONTENT -->
|
|
62
|
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
|
63
|
+
<article class="prose prose-lg max-w-none">
|
|
64
|
+
<h1 class="mb-2">Why Kiss Matters</h1>
|
|
65
|
+
|
|
66
|
+
<p class="text-sm text-gray-500 mb-6">
|
|
67
|
+
{{ date }}
|
|
68
|
+
<span class="ml-2">
|
|
69
|
+
{{ tags }}
|
|
70
|
+
</span>
|
|
71
|
+
</p>
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
</article>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
</main>
|
|
78
|
+
|
|
79
|
+
<!-- FOOTER -->
|
|
80
|
+
<footer class="py-10 text-center text-slate-500 text-sm">
|
|
81
|
+
© 2026 My Name
|
|
82
|
+
</footer>
|
|
83
|
+
|
|
84
|
+
</body>
|
|
85
|
+
</html>
|
|
86
|
+
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="stylesheet" href="/assets/site.css">
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<meta charset="UTF-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
+
|
|
10
|
+
<title>Contact - My Site</title>
|
|
11
|
+
<meta name="description" content="A simple static site powered by a KISS SSG." />
|
|
12
|
+
</head>
|
|
13
|
+
<body class="bg-slate-50 text-slate-900">
|
|
14
|
+
|
|
15
|
+
<nav class="bg-white shadow-sm">
|
|
16
|
+
<div class="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
|
|
17
|
+
|
|
18
|
+
<a href="/" class="text-xl font-bold text-indigo-600">
|
|
19
|
+
My Site
|
|
20
|
+
</a>
|
|
21
|
+
|
|
22
|
+
<div class="space-x-6 text-sm font-medium">
|
|
23
|
+
<a href="/about/" class="text-slate-700 hover:text-slate-900">About</a>
|
|
24
|
+
<a href="/contact/" class="text-indigo-600 font-semibold">Contact</a>
|
|
25
|
+
<a href="/blog/" class="text-slate-700 hover:text-slate-900">Blog</a>
|
|
26
|
+
<a href="/tags/" class="text-slate-700 hover:text-slate-900">Tags</a>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
</div>
|
|
30
|
+
</nav>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<main class="max-w-5xl mx-auto px-4 py-10">
|
|
35
|
+
<article class="prose prose-slate max-w-none">
|
|
36
|
+
<h1>Contact</h1>
|
|
37
|
+
<h1>Contact</h1>
|
|
38
|
+
<p>If you'd like to reach out, feel free to send a message using the form below.</p>
|
|
39
|
+
<!--
|
|
40
|
+
This contact form uses the Fabform.io backend service.
|
|
41
|
+
Fabform handles form submissions without requiring a custom server.
|
|
42
|
+
Learn more at: https://fabform.io
|
|
43
|
+
Documentation: https://fabform.io/docs
|
|
44
|
+
-->
|
|
45
|
+
|
|
46
|
+
<form action="https://fabform.io/f/YOUR_FORM_ID_HERE" method="POST" class="space-y-4">
|
|
47
|
+
|
|
48
|
+
<div>
|
|
49
|
+
<label class="block mb-1 font-medium">Your Name</label>
|
|
50
|
+
<input type="text" name="name" required class="w-full border p-2 rounded">
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<div>
|
|
54
|
+
<label class="block mb-1 font-medium">Your Email</label>
|
|
55
|
+
<input type="email" name="email" required class="w-full border p-2 rounded">
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div>
|
|
59
|
+
<label class="block mb-1 font-medium">Message</label>
|
|
60
|
+
<textarea name="message" rows="5" required class="w-full border p-2 rounded"></textarea>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">
|
|
64
|
+
Send Message
|
|
65
|
+
</button>
|
|
66
|
+
|
|
67
|
+
</form>
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
</article>
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
</main>
|
|
74
|
+
|
|
75
|
+
<footer class="mt-12 border-t border-slate-200 py-6 text-sm text-slate-500 text-center">
|
|
76
|
+
© 2026 My Site
|
|
77
|
+
</footer>
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
83
|
+
|