From 470566b8b602a06cf32670a7206578634b70b6bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Wickstr=C3=B6m?= <oskar@wickstrom.tech>
Date: Sat, 25 Jan 2025 14:32:13 +0100
Subject: [PATCH] make publishable to NPM

---
 Makefile     |  3 ++-
 index.html   | 11 ++++++-----
 index.md     |  1 -
 package.json | 22 ++++++++++++++++++++++
 4 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 package.json

diff --git a/Makefile b/Makefile
index ea9885f..97f7155 100644
--- a/Makefile
+++ b/Makefile
@@ -1,3 +1,4 @@
+VERSION=$(shell jq -r .version package.json)
 
 all: index.html
 
@@ -5,6 +6,6 @@ clean:
 	rm -f index.html
 
 index.html: index.md template.html Makefile
-	pandoc --toc -s --css reset.css --css index.css -i $< -o $@ --template=template.html
+	pandoc --toc -s --css reset.css --css index.css -Vversion=v$(VERSION) -i $< -o $@ --template=template.html
 
 .PHONY: all clean
diff --git a/index.html b/index.html
index e07d84e..8d922ce 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
       <span class="subtitle">A minimalist design exploration</span>
     </td>
     <th>Version</th>
-    <td class="width-min">v0.1.1</td>
+    <td class="width-min">v0.1.2</td>
   </tr>
   <tr>
     <th>Updated</th>
@@ -61,7 +61,7 @@ responsive, shrinking in character-sized steps. Standard elements should
 <em>just work</em>, at least that’s the goal. It’s semantic HTML,
 rendered as if we were back in the 70s.</p>
 <p>All right, but is this even a good idea? It’s a technical and
-creative challenge and I like the aesthetic. If you’d like to use it,
+creative challenge and I like the aestethic. If you’d like to use it,
 feel free to fork or copy the bits you need, respecting the license. I
 might update it over time with improvements and support for more
 standard elements.</p>
@@ -203,10 +203,11 @@ Save
 name <input type="text" placeholder="Text goes here..." /></label>
 <label>Age <input type="text" value="30" /></label>
 </form>
+<p>And radio buttons:</p>
 <form class="grid">
-<label><input name="radio" type="radio" /> One</label>
-<label><input name="radio" type="radio" /> Two</label>
-<label><input name="radio" type="radio" /> Three</label>
+<label><input name="radio" type="radio" /> Option #1</label>
+<label><input name="radio" type="radio" /> Option #2</label>
+<label><input name="radio" type="radio" /> Option #3</label>
 </form>
 <h2 id="grids">Grids</h2>
 <p>Add the <code>grid</code> class to a container to divide up the
diff --git a/index.md b/index.md
index 5322e7e..cbebdc5 100644
--- a/index.md
+++ b/index.md
@@ -6,7 +6,6 @@ author-url: "https://wickstrom.tech"
 date: 2024-08-26
 lang: en
 toc-title: Contents
-version: v0.1.2
 ---
 
 ## Introduction
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..96e2512
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@owickstrom/the-monospace-web",
+  "version": "0.1.2",
+  "description": " A minimalist design exploration",
+  "main": "index.css",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/owickstrom/the-monospace-web.git"
+  },
+  "keywords": [
+    "css"
+  ],
+  "author": "Oskar Wickström",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/owickstrom/the-monospace-web/issues"
+  },
+  "homepage": "https://github.com/owickstrom/the-monospace-web#readme"
+}