@codemeall/create-word-pages 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemeall/create-word-pages",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Scaffold a Word Pages Obsidian-to-GitHub-Pages starter.",
   "type": "module",
   "bin": {

package/template/wizard/src/configValidation.js

@@ -0,0 +1,32 @@
+const baseUrlPattern = /^[A-Za-z0-9.-]+(\/[A-Za-z0-9._~-]+)*$/
+
+export const requiredSiteFields = ["title", "githubUsername", "repositoryName", "baseUrl"]
+
+export function validateWordPagesConfig(config) {
+  const fieldErrors = {}
+  const site = config?.site ?? {}
+
+  for (const field of requiredSiteFields) {
+    if (!String(site[field] ?? "").trim()) {
+      fieldErrors[field] = "Required"
+    }
+  }
+
+  const baseUrl = String(site.baseUrl ?? "").trim()
+  if (baseUrl) {
+    if (/^[a-z][a-z\d+.-]*:\/\//i.test(baseUrl)) {
+      fieldErrors.baseUrl = "Use the Pages URL without https://"
+    } else if (/\s/.test(baseUrl)) {
+      fieldErrors.baseUrl = "Remove spaces from the Pages URL"
+    } else if (baseUrl.startsWith("/") || baseUrl.endsWith("/")) {
+      fieldErrors.baseUrl = "Do not use leading or trailing slashes"
+    } else if (!baseUrlPattern.test(baseUrl)) {
+      fieldErrors.baseUrl = "Use a value like octocat.github.io/my-site"
+    }
+  }
+
+  return {
+    ok: Object.keys(fieldErrors).length === 0,
+    fieldErrors
+  }
+}

package/template/wizard/src/main.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react"
 import { createRoot } from "react-dom/client"
+import { validateWordPagesConfig } from "./configValidation.js"
 import "./styles.css"
 
 type SaveState = "idle" | "dirty" | "saving" | "saved" | "failed"
@@ -23,6 +24,8 @@ type WordPagesConfig = {
   }
 }
 
+type SiteFieldErrors = Partial<Record<keyof WordPagesConfig["site"], string>>
+
 function deriveBaseUrl(username: string, repositoryName: string) {
   if (!username || !repositoryName) return ""
   if (repositoryName.toLowerCase() === `${username.toLowerCase()}.github.io`) return `${username}.github.io`
@@ -63,6 +66,12 @@ function App() {
     return displayPagesUrl(deriveBaseUrl(config.site.githubUsername, config.site.repositoryName))
   }, [config])
 
+  const fieldErrors = useMemo<SiteFieldErrors>(() => {
+    if (!config) return {}
+    return validateWordPagesConfig(config).fieldErrors
+  }, [config])
+  const canSave = Object.keys(fieldErrors).length === 0 && saveState !== "saving"
+
   if (!config) {
     return (
       <main className="shell">
@@ -95,6 +104,14 @@ function App() {
   }
 
   async function save() {
+    const validation = validateWordPagesConfig(config)
+    if (!validation.ok) {
+      setStatus("Required fields missing")
+      setSaveState("failed")
+      setMessage("Complete the required fields before saving word-pages.config.json.")
+      return
+    }
+
     try {
       setStatus("Saving")
       setSaveState("saving")
@@ -107,6 +124,9 @@ function App() {
       })
       const result = await response.json().catch(() => ({ message: "No response body" }))
       if (!response.ok || result.ok === false) {
+        if (result.fieldErrors) {
+          throw new Error(result.message ?? "Complete the required fields before saving.")
+        }
         throw new Error(result.message ?? "Save failed")
       }
 
@@ -130,7 +150,7 @@ function App() {
           <h1>Configure your Obsidian-powered site.</h1>
           <p className="lede">This wizard writes local configuration only. It does not ask for GitHub credentials and does not upload your vault.</p>
         </div>
-        <button type="button" onClick={save} disabled={saveState === "saving"}>
+        <button type="button" onClick={save} disabled={!canSave}>
           {saveState === "saving" ? "Saving..." : "Save changes"}
         </button>
       </section>
@@ -146,7 +166,8 @@ function App() {
       <section className="grid">
         <label>
           Site title
-          <input value={config.site.title} onChange={(event) => updateSite("title", event.target.value)} />
+          <input value={config.site.title} onChange={(event) => updateSite("title", event.target.value)} aria-invalid={Boolean(fieldErrors.title)} />
+          {fieldErrors.title && <span className="field-error">{fieldErrors.title}</span>}
         </label>
         <label>
           Author or organization
@@ -158,11 +179,13 @@ function App() {
         </label>
         <label>
           GitHub username
-          <input value={config.site.githubUsername} onChange={(event) => updateSite("githubUsername", event.target.value)} />
+          <input value={config.site.githubUsername} onChange={(event) => updateSite("githubUsername", event.target.value)} aria-invalid={Boolean(fieldErrors.githubUsername)} />
+          {fieldErrors.githubUsername && <span className="field-error">{fieldErrors.githubUsername}</span>}
         </label>
         <label>
           Repository name
-          <input value={config.site.repositoryName} onChange={(event) => updateSite("repositoryName", event.target.value)} />
+          <input value={config.site.repositoryName} onChange={(event) => updateSite("repositoryName", event.target.value)} aria-invalid={Boolean(fieldErrors.repositoryName)} />
+          {fieldErrors.repositoryName && <span className="field-error">{fieldErrors.repositoryName}</span>}
         </label>
         <label>
           Repository visibility
@@ -174,7 +197,8 @@ function App() {
         </label>
         <label>
           GitHub Pages base URL
-          <input value={config.site.baseUrl} onChange={(event) => updateSite("baseUrl", event.target.value)} />
+          <input value={config.site.baseUrl} onChange={(event) => updateSite("baseUrl", event.target.value)} aria-invalid={Boolean(fieldErrors.baseUrl)} />
+          {fieldErrors.baseUrl && <span className="field-error">{fieldErrors.baseUrl}</span>}
         </label>
       </section>
 

package/template/wizard/src/styles.css

@@ -60,7 +60,7 @@ button {
 }
 
 button:disabled {
-  cursor: wait;
+  cursor: not-allowed;
   opacity: 0.72;
 }
 
@@ -131,6 +131,17 @@ textarea {
   font: inherit;
 }
 
+input[aria-invalid="true"] {
+  border-color: #b83232;
+  outline-color: #b83232;
+}
+
+.field-error {
+  color: #9f2525;
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
 textarea {
   min-height: 104px;
   resize: vertical;

package/template/wizard/vite.config.ts

@@ -2,8 +2,23 @@ import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import { readFile, writeFile } from "node:fs/promises"
 import path from "node:path"
+import { validateWordPagesConfig } from "./src/configValidation.js"
 
 const configPath = path.resolve(process.cwd(), "word-pages.config.json")
+let printedCompletionHandoff = false
+
+function printCompletionHandoff() {
+  if (printedCompletionHandoff) return
+  printedCompletionHandoff = true
+  console.log(`
+Word Pages setup saved.
+
+Next steps:
+1. Open content/ in Obsidian and edit your pages, posts, and notes.
+2. In another terminal, run: npm run preview
+3. When ready, commit, push to GitHub, and enable Pages with GitHub Actions.
+`)
+}
 
 export default defineConfig({
   root: "wizard",
@@ -29,7 +44,20 @@ export default defineConfig({
               req.on("end", async () => {
                 try {
                   const parsed = JSON.parse(raw)
+                  const validation = validateWordPagesConfig(parsed)
+                  if (!validation.ok) {
+                    res.statusCode = 400
+                    res.setHeader("Content-Type", "application/json")
+                    res.end(JSON.stringify({
+                      ok: false,
+                      message: "Complete the required fields before saving.",
+                      fieldErrors: validation.fieldErrors
+                    }))
+                    return
+                  }
+
                   await writeFile(configPath, `${JSON.stringify(parsed, null, 2)}\n`)
+                  printCompletionHandoff()
                   res.setHeader("Content-Type", "application/json")
                   res.end(JSON.stringify({ ok: true, path: configPath }))
                 } catch (error) {