living-documentation 1.1.0 → 1.2.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.
@@ -11,19 +11,6 @@
11
11
  tailwind.config = { darkMode: "class", theme: { extend: {} } };
12
12
  </script>
13
13
 
14
- <style>
15
- .field-label {
16
- @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
17
- }
18
- .field-input {
19
- @apply w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700
20
- bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
21
- placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm;
22
- }
23
- .field-hint {
24
- @apply mt-1 text-xs text-gray-400 dark:text-gray-500;
25
- }
26
- </style>
27
14
  </head>
28
15
 
29
16
  <body
@@ -61,195 +48,124 @@
61
48
  </header>
62
49
 
63
50
  <!-- ── Page ── -->
64
- <main class="max-w-2xl mx-auto px-6 py-10">
65
- <!-- Title -->
66
- <div class="mb-8">
67
- <h2 class="text-xl font-bold text-gray-900 dark:text-gray-50">
68
- Configuration
69
- </h2>
70
- <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
71
- Settings are saved to
72
- <code
73
- class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded"
74
- >.living-doc.json</code
75
- >
76
- in your docs folder.
77
- </p>
78
- </div>
51
+ <main class="max-w-6xl mx-auto px-6 py-10">
79
52
 
80
- <!-- ── Form ── -->
81
- <form id="config-form" class="space-y-6" novalidate>
82
- <!-- Read-only info card -->
83
- <div
84
- class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5"
85
- >
86
- <h3
87
- class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4"
88
- >
89
- Server Info
90
- </h3>
91
- <dl class="grid grid-cols-[1fr_auto] gap-x-6 gap-y-3 text-sm">
92
- <div>
93
- <dt class="text-xs text-gray-400 uppercase tracking-wide mb-0.5">
94
- Docs Folder
95
- </dt>
96
- <dd
97
- id="info-folder"
98
- class="font-mono text-xs text-gray-700 dark:text-gray-300 break-all"
99
- >
100
-
101
- </dd>
102
- </div>
103
- <div>
104
- <dt class="text-xs text-gray-400 uppercase tracking-wide mb-0.5">
105
- Port
106
- </dt>
107
- <dd
108
- id="info-port"
109
- class="font-mono text-xs text-gray-700 dark:text-gray-300"
110
- >
111
-
112
- </dd>
113
- </div>
114
- </dl>
115
- </div>
53
+ <!-- ── Two-column layout ── -->
54
+ <form id="config-form" novalidate>
116
55
 
117
- <!-- Extra Files -->
118
- <div
119
- class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 space-y-4"
120
- >
56
+ <!-- Title + Save on same row -->
57
+ <div class="flex items-center justify-between mb-8">
121
58
  <div>
122
- <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
123
- General Extra Files
124
- </h3>
125
- <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
126
- Add Markdown files from outside the docs folder to the General
127
- section.
59
+ <h2 class="text-xl font-bold text-gray-900 dark:text-gray-50">Configuration</h2>
60
+ <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
61
+ Settings are saved to
62
+ <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">.living-doc.json</code>
63
+ in your docs folder.
128
64
  </p>
129
65
  </div>
130
-
131
- <!-- File browser -->
132
- <div
133
- class="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
134
- >
135
- <div
136
- class="flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
137
- >
138
- <button
139
- id="browse-up"
140
- onclick="browseUp()"
141
- class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0"
142
- >
143
- &#8593; Up
144
- </button>
145
- <span
146
- id="browse-path"
147
- class="font-mono text-xs text-gray-400 dark:text-gray-500 truncate flex-1 text-right"
148
- ></span>
149
- </div>
150
- <div
151
- id="browse-list"
152
- class="divide-y divide-gray-100 dark:divide-gray-800 max-h-52 overflow-y-auto"
153
- ></div>
154
- </div>
155
-
156
- <!-- Added files -->
157
- <div>
158
- <p
159
- class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2"
160
- >
161
- Added files
162
- </p>
163
- <div id="extra-files-list" class="space-y-1"></div>
164
- <p id="extra-files-empty" class="text-xs text-gray-400 italic">
165
- No extra files added yet.
166
- </p>
66
+ <div class="flex items-center gap-4 shrink-0">
67
+ <div id="save-msg" class="text-sm"></div>
68
+ <button type="submit"
69
+ class="px-5 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-950">
70
+ Save changes
71
+ </button>
167
72
  </div>
168
73
  </div>
169
74
 
170
- <!-- Editable settings -->
171
- <div
172
- class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 space-y-5"
173
- >
174
- <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
175
- Appearance & Metadata
176
- </h3>
75
+ <div class="grid grid-cols-2 gap-8 items-start">
76
+
77
+ <!-- ── Left column ── -->
78
+ <div class="space-y-6">
79
+
80
+ <!-- Server Info -->
81
+ <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5">
82
+ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">Server Info</h3>
83
+ <dl class="grid grid-cols-[1fr_auto] gap-x-6 gap-y-3 text-sm">
84
+ <div>
85
+ <dt class="text-xs text-gray-400 uppercase tracking-wide mb-0.5">Docs Folder</dt>
86
+ <dd id="info-folder" class="font-mono text-xs text-gray-700 dark:text-gray-300 break-all">—</dd>
87
+ </div>
88
+ <div>
89
+ <dt class="text-xs text-gray-400 uppercase tracking-wide mb-0.5">Port</dt>
90
+ <dd id="info-port" class="font-mono text-xs text-gray-700 dark:text-gray-300">—</dd>
91
+ </div>
92
+ </dl>
93
+ </div>
177
94
 
178
- <!-- Site Title -->
179
- <div>
180
- <label class="field-label" for="field-title">Site Title</label>
181
- <input
182
- id="field-title"
183
- name="title"
184
- type="text"
185
- class="field-input"
186
- placeholder="Living Documentation"
187
- />
188
- <p class="field-hint">
189
- Displayed in the browser tab and sidebar header.
190
- </p>
191
- </div>
95
+ <!-- Extra Files -->
96
+ <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 space-y-4">
97
+ <div>
98
+ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">General — Extra Files</h3>
99
+ <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Add Markdown files from outside the docs folder to the General section.</p>
100
+ </div>
101
+
102
+ <!-- File browser -->
103
+ <div class="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
104
+ <div class="flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
105
+ <button id="browse-up" onclick="browseUp()"
106
+ class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0">
107
+ &#8593; Up
108
+ </button>
109
+ <span id="browse-path" class="font-mono text-xs text-gray-400 dark:text-gray-500 truncate flex-1 text-right"></span>
110
+ </div>
111
+ <div id="browse-list" class="divide-y divide-gray-100 dark:divide-gray-800 max-h-52 overflow-y-auto"></div>
112
+ </div>
113
+
114
+ <!-- Added files -->
115
+ <div>
116
+ <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Added files</p>
117
+ <div id="extra-files-list" class="space-y-1"></div>
118
+ <p id="extra-files-empty" class="text-xs text-gray-400 italic">No extra files added yet.</p>
119
+ </div>
120
+ </div>
192
121
 
193
- <!-- Theme -->
194
- <div>
195
- <label class="field-label" for="field-theme">Default Theme</label>
196
- <select id="field-theme" name="theme" class="field-input">
197
- <option value="system">System (follow OS preference)</option>
198
- <option value="light">Light</option>
199
- <option value="dark">Dark</option>
200
- </select>
201
- <p class="field-hint">
202
- Users can always override this with the toggle button.
203
- </p>
204
122
  </div>
205
123
 
206
- <!-- Filename Pattern -->
207
- <div>
208
- <label class="field-label" for="field-pattern"
209
- >Filename Pattern</label
210
- >
211
- <input
212
- id="field-pattern"
213
- name="filenamePattern"
214
- type="text"
215
- class="field-input"
216
- placeholder="YYYY_MM_DD_[Category]_title"
217
- />
218
- <p class="field-hint">
219
- Documents matching this pattern are parsed for date, category, and
220
- title.
221
- <span class="font-mono bg-gray-100 dark:bg-gray-800 px-1 rounded"
222
- >YYYY_MM_DD_[Category]_title.md</span
223
- >
224
- </p>
225
- </div>
226
- </div>
124
+ <!-- ── Right column ── -->
125
+ <div class="space-y-6">
126
+
127
+ <!-- Appearance & Metadata -->
128
+ <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800">
129
+ <div class="px-5 py-4">
130
+ <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Appearance & Metadata</h3>
131
+ </div>
132
+ <div class="px-5 py-4 space-y-1.5">
133
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="field-title">Site Title</label>
134
+ <input id="field-title" name="title" type="text"
135
+ class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
136
+ placeholder="Living Documentation" />
137
+ <p class="text-xs text-gray-400 dark:text-gray-500">Displayed in the browser tab and sidebar header.</p>
138
+ </div>
139
+ <div class="px-5 py-4 space-y-1.5">
140
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="field-theme">Default Theme</label>
141
+ <select id="field-theme" name="theme"
142
+ class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
143
+ <option value="system">System (follow OS preference)</option>
144
+ <option value="light">Light</option>
145
+ <option value="dark">Dark</option>
146
+ </select>
147
+ <p class="text-xs text-gray-400 dark:text-gray-500">Users can always override with the toggle button.</p>
148
+ </div>
149
+ <div class="px-5 py-4 space-y-1.5">
150
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="field-pattern">Filename Pattern</label>
151
+ <input id="field-pattern" name="filenamePattern" type="text"
152
+ class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
153
+ placeholder="YYYY_MM_DD_[Category]_title" />
154
+ <p class="text-xs text-gray-400 dark:text-gray-500">
155
+ Parsed for date, category, and title.
156
+ <span class="font-mono bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-1 rounded">YYYY_MM_DD_[Category]_title.md</span>
157
+ </p>
158
+ </div>
159
+ </div>
227
160
 
228
- <!-- Pattern preview -->
229
- <div
230
- id="pattern-preview"
231
- class="rounded-xl border border-blue-100 dark:border-blue-900 bg-blue-50 dark:bg-blue-950/30 p-5"
232
- >
233
- <h3
234
- class="text-sm font-semibold text-blue-700 dark:text-blue-400 mb-3"
235
- >
236
- Pattern Preview
237
- </h3>
238
- <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
239
- How your pattern parses example filenames:
240
- </p>
241
- <div id="preview-rows" class="space-y-2 text-sm"></div>
242
- </div>
161
+ <!-- Pattern Preview -->
162
+ <div id="pattern-preview" class="rounded-xl border border-blue-100 dark:border-blue-900 bg-blue-50 dark:bg-blue-950/30 p-5">
163
+ <h3 class="text-sm font-semibold text-blue-700 dark:text-blue-400 mb-3">Pattern Preview</h3>
164
+ <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">How your pattern parses example filenames:</p>
165
+ <div id="preview-rows" class="space-y-2 text-sm"></div>
166
+ </div>
243
167
 
244
- <!-- Submit -->
245
- <div class="flex items-center justify-between">
246
- <div id="save-msg" class="text-sm"></div>
247
- <button
248
- type="submit"
249
- class="px-5 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
250
- >
251
- Save changes
252
- </button>
168
+ </div>
253
169
  </div>
254
170
  </form>
255
171
  </main>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "living-documentation",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "A CLI tool that serves a local Markdown documentation viewer",
5
5
  "main": "dist/src/server.js",
6
6
  "bin": {
@@ -12,7 +12,7 @@
12
12
  ],
13
13
  "scripts": {
14
14
  "build": "tsc && node scripts/copy-assets.js && chmod +x dist/bin/cli.js",
15
- "dev": "ts-node bin/cli.ts",
15
+ "dev": "nodemon --watch src --watch bin --ext ts,html --exec 'ts-node bin/cli.ts'",
16
16
  "start": "node dist/bin/cli.js",
17
17
  "prepublishOnly": "npm run build"
18
18
  },
@@ -32,6 +32,7 @@
32
32
  "devDependencies": {
33
33
  "@types/express": "^4.17.21",
34
34
  "@types/node": "^20.14.0",
35
+ "nodemon": "^3.1.14",
35
36
  "ts-node": "^10.9.2",
36
37
  "typescript": "^5.4.5"
37
38
  },