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
package/.bashrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
alias tb="nc termbin.com 9999"
|
package/README.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
Below is a clean, professional, publication‑ready **README.md** for Smirky.
|
|
2
|
+
No emojis. No fluff. Just a clear, well‑structured document that positions Smirky as a serious static site generator with a Tailwind‑based default theme and Fabform integration.
|
|
3
|
+
|
|
4
|
+
You can drop this directly into your repository.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Smirky
|
|
9
|
+
A lightweight, theme‑friendly static website generator powered by Markdown and Node.js. Smirky focuses on clarity, simplicity, and extensibility, making it an ideal choice for blogs, documentation sites, and small business websites.
|
|
10
|
+
|
|
11
|
+
Smirky ships with a default Tailwind CSS theme that includes a fully functional contact form powered by the Fabform backend service. You can use the included theme as‑is or create your own custom themes with complete control over layout, styling, and structure.
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- Markdown‑based content and pages
|
|
18
|
+
- Clean, minimal templating system
|
|
19
|
+
- Theme‑driven architecture
|
|
20
|
+
- Built‑in blog system with tags
|
|
21
|
+
- Tailwind CSS default theme
|
|
22
|
+
- Fabform‑powered contact form integration
|
|
23
|
+
- Zero configuration required
|
|
24
|
+
- Fast builds and simple folder structure
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## Folder Structure
|
|
29
|
+
|
|
30
|
+
A typical Smirky project looks like this:
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
project/
|
|
34
|
+
smirky/
|
|
35
|
+
smirky.js
|
|
36
|
+
content/
|
|
37
|
+
pages/
|
|
38
|
+
theme/
|
|
39
|
+
layout.html
|
|
40
|
+
index.html
|
|
41
|
+
page.html
|
|
42
|
+
post.html
|
|
43
|
+
blog.html
|
|
44
|
+
tags.html
|
|
45
|
+
partials/
|
|
46
|
+
head.html
|
|
47
|
+
navbar.html
|
|
48
|
+
footer.html
|
|
49
|
+
blog_post_card.html
|
|
50
|
+
tag_pill.html
|
|
51
|
+
assets/
|
|
52
|
+
site.json
|
|
53
|
+
dist/
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## Installation
|
|
59
|
+
|
|
60
|
+
Smirky can be installed locally within your project:
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
npm install smirky
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Or used directly via npx:
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
npx smirky
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Usage
|
|
75
|
+
|
|
76
|
+
Smirky is designed to be simple and predictable. Once your content, pages, and theme are in place, you can build your site with a single command.
|
|
77
|
+
|
|
78
|
+
### Build your site
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
npm run build
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
This generates a fully static website inside the `dist/` directory.
|
|
85
|
+
|
|
86
|
+
### Development mode
|
|
87
|
+
|
|
88
|
+
If you prefer to rebuild manually during development:
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
npm run dev
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## Content and Pages
|
|
97
|
+
|
|
98
|
+
Smirky uses two types of Markdown files:
|
|
99
|
+
|
|
100
|
+
### Pages
|
|
101
|
+
Stored in `/pages`, each file becomes a standalone route:
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
/pages/about.md → /about/index.html
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Blog Posts
|
|
108
|
+
Stored in `/content`, each file becomes a blog post:
|
|
109
|
+
|
|
110
|
+
```
|
|
111
|
+
/content/my-first-post.md → /blog/my-first-post/index.html
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Both support front‑matter:
|
|
115
|
+
|
|
116
|
+
```yaml
|
|
117
|
+
---
|
|
118
|
+
title: About Us
|
|
119
|
+
slug: about
|
|
120
|
+
tags: [company, mission]
|
|
121
|
+
---
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
## Default Theme
|
|
127
|
+
|
|
128
|
+
Smirky includes a Tailwind CSS theme located in the `/theme` directory. It provides:
|
|
129
|
+
|
|
130
|
+
- Responsive layout
|
|
131
|
+
- Navigation bar
|
|
132
|
+
- Blog index and post templates
|
|
133
|
+
- Tag pages
|
|
134
|
+
- Footer
|
|
135
|
+
- Contact form powered by Fabform
|
|
136
|
+
|
|
137
|
+
### Fabform Integration
|
|
138
|
+
|
|
139
|
+
The default theme includes a ready‑to‑use contact form that posts directly to Fabform.
|
|
140
|
+
To enable it, update the form action in your theme’s HTML:
|
|
141
|
+
|
|
142
|
+
```
|
|
143
|
+
<form action="https://fabform.io/f/your-form-id" method="POST">
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
No backend code is required.
|
|
147
|
+
|
|
148
|
+
---
|
|
149
|
+
|
|
150
|
+
## Creating Your Own Themes
|
|
151
|
+
|
|
152
|
+
Smirky is fully theme‑driven. A theme consists of:
|
|
153
|
+
|
|
154
|
+
- HTML templates
|
|
155
|
+
- Partials
|
|
156
|
+
- Assets (CSS, JS, images)
|
|
157
|
+
- A `site.json` configuration file
|
|
158
|
+
|
|
159
|
+
You can create a new theme by duplicating the default theme and modifying:
|
|
160
|
+
|
|
161
|
+
- Layout structure
|
|
162
|
+
- Tailwind classes or CSS framework
|
|
163
|
+
- Partials
|
|
164
|
+
- Blog card design
|
|
165
|
+
- Tag pill design
|
|
166
|
+
|
|
167
|
+
Smirky does not enforce any styling framework. You may use Tailwind, Bootstrap, custom CSS, or anything else.
|
|
168
|
+
|
|
169
|
+
### Required template placeholders
|
|
170
|
+
|
|
171
|
+
Every theme must include the following tokens:
|
|
172
|
+
|
|
173
|
+
```
|
|
174
|
+
{{ head }}
|
|
175
|
+
{{ navbar }}
|
|
176
|
+
{{ footer }}
|
|
177
|
+
{{ content }}
|
|
178
|
+
{{ title }}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
Smirky replaces these during the build process.
|
|
182
|
+
|
|
183
|
+
---
|
|
184
|
+
|
|
185
|
+
## Deployment
|
|
186
|
+
|
|
187
|
+
Since Smirky outputs a fully static site, you can deploy the `dist/` folder to any static hosting provider:
|
|
188
|
+
|
|
189
|
+
- Netlify
|
|
190
|
+
- Vercel
|
|
191
|
+
- GitHub Pages
|
|
192
|
+
- Cloudflare Pages
|
|
193
|
+
- AWS S3
|
|
194
|
+
- Any static file server
|
|
195
|
+
|
|
196
|
+
---
|
|
197
|
+
|
|
198
|
+
## License
|
|
199
|
+
|
|
200
|
+
MIT License
|
|
201
|
+
Copyright © Geoffrey Callaghan
|
|
202
|
+
|
|
203
|
+
---
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Keeping Things Simple"
|
|
3
|
+
description: "Why simplicity matters when building websites and tools."
|
|
4
|
+
template: "post"
|
|
5
|
+
date: "2026-01-11"
|
|
6
|
+
tags: ["javascript", "webdev"]
|
|
7
|
+
---
|
|
8
|
+
# Keeping Things Simple
|
|
9
|
+
|
|
10
|
+
Simplicity is underrated. When you remove unnecessary complexity, you make room for clarity and creativity.
|
|
11
|
+
|
|
12
|
+
This site is built with that philosophy in mind. No heavy frameworks. No complicated build steps. Just clean content and a straightforward workflow.
|
|
13
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Three Small Steps"
|
|
3
|
+
description: "A short reflection on how small steps lead to meaningful progress."
|
|
4
|
+
template: "post"
|
|
5
|
+
date: "2026-01-12"
|
|
6
|
+
tags: ["javascript", "webdev"]
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Three Small Steps
|
|
10
|
+
|
|
11
|
+
Big projects don’t start big — they grow from small, consistent steps.
|
|
12
|
+
|
|
13
|
+
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.
|
|
14
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Welcome to the Blog"
|
|
3
|
+
description: "A short introduction to this new site and what to expect."
|
|
4
|
+
template: "post"
|
|
5
|
+
date: "2026-01-10"
|
|
6
|
+
tags: ["javascript", "webdev"]
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Welcome to the Blog
|
|
10
|
+
|
|
11
|
+
Thanks for stopping by. This site is a simple, clean space to share thoughts, ideas, and experiments.
|
|
12
|
+
|
|
13
|
+
Everything here is built with a lightweight static site generator that focuses on clarity and simplicity. More posts will be added soon.
|
|
14
|
+
|
|
@@ -0,0 +1,60 @@
|
|
|
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>About - 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-indigo-600 font-semibold">About</a>
|
|
24
|
+
<a href="/contact/" class="text-slate-700 hover:text-slate-900">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>About</h1>
|
|
37
|
+
<h1>About This Site</h1>
|
|
38
|
+
<p>This website is built using a tiny static site generator that follows the KISS principle.</p>
|
|
39
|
+
<p>Everything is intentionally simple:</p>
|
|
40
|
+
<ul>
|
|
41
|
+
<li>No complex frameworks </li>
|
|
42
|
+
<li>No heavy build tools </li>
|
|
43
|
+
<li>No unnecessary features</li>
|
|
44
|
+
</ul>
|
|
45
|
+
<p>Just clean Markdown, simple templates, and fast static HTML output.</p>
|
|
46
|
+
|
|
47
|
+
</article>
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
</main>
|
|
51
|
+
|
|
52
|
+
<footer class="mt-12 border-t border-slate-200 py-6 text-sm text-slate-500 text-center">
|
|
53
|
+
© 2026 My Site
|
|
54
|
+
</footer>
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
60
|
+
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
/* ---------------------------
|
|
4
|
+
Global Markdown Typography
|
|
5
|
+
Tailwind v4 — No Config File
|
|
6
|
+
---------------------------- */
|
|
7
|
+
|
|
8
|
+
/* Headings */
|
|
9
|
+
h1 {
|
|
10
|
+
@apply text-4xl font-bold leading-tight mt-8 mb-4;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
h2 {
|
|
14
|
+
@apply text-3xl font-semibold leading-snug mt-6 mb-3;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
h3 {
|
|
18
|
+
@apply text-2xl font-semibold leading-snug mt-5 mb-2;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
h4 {
|
|
22
|
+
@apply text-xl font-semibold mt-4 mb-2;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
h5 {
|
|
26
|
+
@apply text-lg font-medium mt-3 mb-2;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
h6 {
|
|
30
|
+
@apply text-base font-medium mt-2 mb-2;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Paragraphs */
|
|
34
|
+
p {
|
|
35
|
+
@apply text-base leading-relaxed mb-4;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Links */
|
|
39
|
+
a {
|
|
40
|
+
@apply text-blue-600 underline hover:text-blue-800;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Images */
|
|
44
|
+
img {
|
|
45
|
+
@apply rounded-lg my-4;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Lists */
|
|
49
|
+
ul {
|
|
50
|
+
@apply list-disc pl-6 mb-4;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
ol {
|
|
54
|
+
@apply list-decimal pl-6 mb-4;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
li {
|
|
58
|
+
@apply mb-1;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Blockquotes */
|
|
62
|
+
blockquote {
|
|
63
|
+
@apply border-l-4 border-gray-300 pl-4 italic text-gray-700 my-4;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Code blocks */
|
|
67
|
+
pre {
|
|
68
|
+
@apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
code {
|
|
72
|
+
@apply bg-gray-100 text-red-600 px-1 py-0.5 rounded;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Horizontal rule */
|
|
76
|
+
hr {
|
|
77
|
+
@apply border-gray-300 my-8;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Tables */
|
|
81
|
+
table {
|
|
82
|
+
@apply w-full border-collapse my-6;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
th {
|
|
86
|
+
@apply border-b font-semibold p-2 text-left;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
td {
|
|
90
|
+
@apply border-b p-2;
|
|
91
|
+
}
|
|
92
|
+
|