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.
Files changed (43) hide show
  1. package/.bashrc +1 -0
  2. package/README.md +203 -0
  3. package/content/keeping-things-simple.md +13 -0
  4. package/content/three-small-steps.md +14 -0
  5. package/content/welcome-to-the-blog.md +14 -0
  6. package/dist/about/index.html +60 -0
  7. package/dist/assets/input.css +92 -0
  8. package/dist/assets/site.css +630 -0
  9. package/dist/blog/about/index.html +88 -0
  10. package/dist/blog/building-a-static-site-generator/index.html +86 -0
  11. package/dist/blog/hello-world/index.html +86 -0
  12. package/dist/blog/index.html +125 -0
  13. package/dist/blog/keeping-things-simple/index.html +70 -0
  14. package/dist/blog/three-small-steps/index.html +70 -0
  15. package/dist/blog/welcome-to-the-blog/index.html +70 -0
  16. package/dist/blog/why-kiss-matters/index.html +86 -0
  17. package/dist/contact/index.html +83 -0
  18. package/dist/index.html +56 -0
  19. package/dist/tags/index.html +65 -0
  20. package/dist/tags/javascript/index.html +125 -0
  21. package/dist/tags/webdev/index.html +125 -0
  22. package/output/assets/input.css +92 -0
  23. package/output/assets/site.css +630 -0
  24. package/package.json +31 -0
  25. package/pages/about.md +21 -0
  26. package/pages/contact.md +44 -0
  27. package/smirky.js +391 -0
  28. package/theme/assets/input.css +92 -0
  29. package/theme/assets/site.css +630 -0
  30. package/theme/blog.html +8 -0
  31. package/theme/debug.html +5 -0
  32. package/theme/index.html +10 -0
  33. package/theme/layout.html +23 -0
  34. package/theme/navbar.html +16 -0
  35. package/theme/page.html +5 -0
  36. package/theme/partials/blog_post_card.html +12 -0
  37. package/theme/partials/footer.html +4 -0
  38. package/theme/partials/head.html +2 -0
  39. package/theme/partials/navbar.html +14 -0
  40. package/theme/partials/tag_pill.html +5 -0
  41. package/theme/post.html +10 -0
  42. package/theme/site.json +8 -0
  43. 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
+