Building phase one

README.md

@@ -10,5 +10,4 @@ When you push to the vault repository this triggers a webhook to a repo that you
 
 Also you can have multiple vaults!
 
-
+Valuts -> Simple Publisher -> Multiple deployment sites
-Valuts -> This thing working -> Multiple deployment sites

backend/.env.production

@@ -0,0 +1,3 @@
+PORT=5000
+DB_URI=mongodb://192.168.1.7:27017/simplepublisher
+NODE_ENV=production

backend/.gitignore

@@ -0,0 +1,16 @@
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.production

backend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "nodemon src/index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "cors": "^2.8.6",
+    "dotenv": "^17.4.2",
+    "express": "^5.2.1",
+    "mongoose": "^9.7.4",
+    "socket.io": "^4.8.3"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.14"
+  }
+}

backend/src/db.js

@@ -0,0 +1,14 @@
+const mongoose = require("mongoose");
+
+const connectDB = async () => {
+  try {
+    await mongoose.connect(process.env.DB_URI);
+
+    console.log("MongoDB connected");
+  } catch (error) {
+    console.error("MongoDB connection error:", error);
+    process.exit(1);
+  }
+};
+
+module.exports = connectDB;

backend/src/index.js

@@ -0,0 +1,66 @@
+const express = require("express");
+const cors = require("cors");
+const mongoose = require("mongoose");
+const { createServer } = require("http");
+const { Server } = require("socket.io");
+
+const dotenv = require("dotenv");
+
+if (process.env.NODE_ENV) {
+  dotenv.config({
+    path: `.env.${process.env.NODE_ENV}`,
+  });
+} else {
+  dotenv.config();
+}
+
+const app = express();
+const httpServer = createServer(app);
+const io = new Server(httpServer, {
+  path: '/api/socket.io',
+  cors: {
+    origin: true,
+    credentials: true,
+  },
+});
+
+const connectDB = require("./db");
+
+// const gridCellsRouter = require("./routes/gridCells");
+// gridCellsRouter.setIO(io);
+
+// connect database
+connectDB();
+
+app.use(
+  cors({
+    origin: true,
+    credentials: true,
+  })
+);
+
+app.use(express.json());
+
+// Socket.IO
+io.on("connection", (socket) => {
+  console.log(`Socket connected: ${socket.id}`);
+
+  socket.on("disconnect", () => {
+    console.log(`Socket disconnected: ${socket.id}`);
+  });
+});
+
+app.get("/api/test", (req, res) => {
+  console.log("Hey");
+  res.json({ message: "Hello from backend!" });
+});
+
+// Site management routes
+const sitesRouter = require("./routes/sites");
+app.use("/api/sites", sitesRouter);
+
+const PORT = process.env.PORT || 5000;
+httpServer.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+});
+

backend/src/models/Site.js

@@ -0,0 +1,16 @@
+const mongoose = require("mongoose");
+
+const siteSchema = new mongoose.Schema(
+  {
+    id: { type: String, required: true, unique: true, index: true },
+    name: { type: String, required: true, trim: true },
+    url: { type: String, default: "", trim: true },
+    description: { type: String, default: "", trim: true },
+    themeColor: { type: String, default: "#2563eb" },
+    targetWindow: { type: String, default: "_blank", enum: ["_blank", "_self"] },
+    enabled: { type: Boolean, default: true },
+  },
+  { timestamps: true }
+);
+
+module.exports = mongoose.model("Site", siteSchema);

backend/src/routes/sites.js

@@ -0,0 +1,52 @@
+const express = require("express");
+const Site = require("../models/Site");
+
+const router = express.Router();
+
+// GET /api/sites - List all sites
+router.get("/", async (req, res) => {
+  try {
+    const sites = await Site.find().sort({ createdAt: -1 });
+    res.json(sites);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// POST /api/sites - Create a new site
+router.post("/", async (req, res) => {
+  try {
+    const { id, name, url, description, themeColor, targetWindow, enabled } = req.body;
+    const site = new Site({ id, name, url, description, themeColor, targetWindow, enabled });
+    await site.save();
+    res.status(201).json(site);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// PUT /api/sites/:id - Update a site
+router.put("/:id", async (req, res) => {
+  try {
+    const { name, url, description, themeColor, targetWindow, enabled } = req.body;
+    const updates = { name, url, description, themeColor, targetWindow, enabled };
+    const site = await Site.findOneAndUpdate({ id: req.params.id }, updates, { new: true, runValidators: true });
+    if (!site) return res.status(404).json({ error: "Site not found" });
+    res.json(site);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// DELETE /api/sites/:id - Delete a site
+router.delete("/:id", async (req, res) => {
+  try {
+    const site = await Site.findOneAndDelete({ id: req.params.id });
+    if (!site) return res.status(404).json({ error: "Site not found" });
+    res.json({ message: "Site deleted", id: site.id });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+module.exports = router;

converter/convert.js

@@ -0,0 +1,61 @@
+import fs from "fs/promises";
+import path from "path";
+
+const vault = "./vault";
+
+async function walk(dir) {
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const full = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      await walk(full);
+      continue;
+    }
+
+    if (!entry.name.endsWith(".md")) continue;
+
+    let md = await fs.readFile(full, "utf8");
+
+    // Images / embeds
+    md = md.replace(
+      /!\[\[([^|\]]+)(?:\|([^\]]+))?\]\]/g,
+      (_, target, alt) => {
+        const ext = path.extname(target).toLowerCase();
+
+        if ([".png",".jpg",".jpeg",".gif",".webp",".svg",".avif"].includes(ext))
+          return `![${alt ?? ""}](/${target})`;
+
+        if ([".mp4",".webm"].includes(ext))
+          return `<video controls src="/${target}"></video>`;
+
+        if ([".mp3",".wav",".ogg"].includes(ext))
+          return `<audio controls src="/${target}"></audio>`;
+
+        return `[${alt ?? target}](/${target})`;
+      }
+    );
+
+    // Wikilinks
+    md = md.replace(
+      /\[\[([^|\]]+)(?:\|([^\]]+))?\]\]/g,
+      (_, target, title) => {
+        const text = title ?? path.basename(target);
+
+        return `[${text}](/${target})`;
+      }
+    );
+
+    // Remove block ids
+    md = md.replace(/\s\^[A-Za-z0-9-]+$/gm, "");
+
+    // Remove Obsidian comments
+    md = md.replace(/%%[\s\S]*?%%/g, "");
+
+    await fs.writeFile(full, md);
+    console.log(full);
+  }
+}
+
+walk(vault);

publisher/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

publisher/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

publisher/app/app.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="app">
+    <header class="top-bar">
+      <h1>Simple Publisher</h1>
+      <button class="theme-toggle" @click="toggleDarkMode"
+              :aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'">
+        {{ darkMode ? 'Light Mode' : 'Dark Mode' }}
+      </button>
+    </header>
+
+    <div class="layout">
+      <Sidebar :sites="sites"
+               :selected-id="selectedId"
+               :pending-add="pendingAdd"
+               @select-site="selectSite"
+               @start-add="startAdd"
+               @cancel-add="cancelAdd"
+               @add-site="confirmAdd" />
+
+      <SettingsPanel v-if="selectedSite"
+                     :site="selectedSite"
+                     :last-saved="lastSaved"
+                     :site-id="selectedSite.id"
+                     @delete="deleteSelected"
+                     @preview="openPreview"
+                     @changed="handleEditChanged" />
+      <SettingsEmpty v-else />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import Sidebar from './components/Sidebar.vue'
+import SettingsPanel from './components/SettingsPanel.vue'
+import SettingsEmpty from './components/SettingsEmpty.vue'
+
+const API_BASE = import.meta.url.match(/^https?:\/\/[^/]+/) 
+  ? `${location.protocol}//${location.host}`
+  : ''
+
+function api(url: string, options: RequestInit = {}) {
+  return fetch(`${API_BASE}/api/sites${url}`, {
+    headers: { 'Content-Type': 'application/json', ...options.headers },
+    ...options,
+  })
+}
+
+function genId() {
+  return crypto.randomUUID?.() ?? Date.now().toString(36) + Math.random().toString(36).slice(2)
+}
+
+const STORAGE_KEY = 'simple-publisher-sites'
+const THEME_KEY = 'simple-publisher-theme'
+
+function defaultSite(name: string) {
+  return {
+    id: genId(),
+    name,
+    url: '',
+    description: '',
+    themeColor: '#2563eb',
+    targetWindow: '_blank',
+    enabled: true,
+  }
+}
+
+const darkMode = ref(false)
+
+function toggleDarkMode() {
+  darkMode.value = !darkMode.value
+  applyClass()
+  try { localStorage.setItem(THEME_KEY, darkMode.value ? 'dark' : 'light') } catch {}
+}
+
+function applyClass() {
+  document.documentElement.classList.toggle('dark', darkMode.value)
+}
+
+const sites = ref<Array<{ _id: string; id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean }>>([])
+const selectedId = ref(null)
+const pendingAdd = ref(false)
+const lastSaved = ref('')
+
+let newSites = new Map<string, any>()
+let dirtyEdits = new Map<string, any>()
+let loadTimer: ReturnType<typeof setTimeout> | null = null
+let lastSavedTimeout: ReturnType<typeof setTimeout> | null = null
+
+const selectedSite = computed(() => {
+  return sites.value.find(s => s.id === selectedId.value) || null
+})
+
+onMounted(async () => {
+  try {
+    const saved = localStorage.getItem(THEME_KEY)
+    if (saved === 'dark' || saved === 'light') {
+      darkMode.value = saved === 'dark'
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      darkMode.value = true
+    }
+  } catch {}
+
+  applyClass()
+
+  try {
+    const res = await api('/')
+    if (res.ok) {
+      sites.value = await res.json()
+      return
+    }
+  } catch {}
+
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored) {
+    sites.value = JSON.parse(stored)
+  }
+})
+
+onMounted(() => {
+  loadTimer = setInterval(async () => {
+    try {
+      const res = await api('/')
+      if (res.ok) {
+        const sitesFromServer = await res.json()
+        sites.value = sitesFromServer.map((serverSite: any) => {
+          if (dirtyEdits.has(serverSite.id)) {
+            return { ...serverSite, ...dirtyEdits.get(serverSite.id) }
+          }
+          return serverSite
+        })
+      }
+    } catch {}
+  }, 5000)
+})
+
+async function refreshSites() {
+  try {
+    const res = await api('/')
+    if (res.ok) {
+      sites.value = await res.json()
+    }
+  } catch {
+    // keep local state on network failure
+  }
+}
+
+async function saveSite(site: any) {
+  try {
+    const serverSite = sites.value.find(s => s.id === site.id)
+    const res = await api(`/${encodeURIComponent(site.id)}`, {
+      method: 'PUT',
+      body: JSON.stringify({
+        name: site.name,
+        url: site.url,
+        description: site.description,
+        themeColor: site.themeColor,
+        targetWindow: site.targetWindow,
+        enabled: site.enabled,
+      }),
+    })
+    if (res.ok) {
+      const updated = await res.json()
+      lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
+      return true
+    }
+    return false
+  } catch {
+    return false
+  }
+}
+
+async function bulkSave() {
+  const allEntries = [...newSites.entries(), ...dirtyEdits.entries()]
+  for (const [, site] of allEntries) {
+    await saveSite(site)
+  }
+  newSites.clear()
+  dirtyEdits.clear()
+  try {
+    await refreshSites()
+  } catch {}
+  lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
+  
+  if (lastSavedTimeout) clearTimeout(lastSavedTimeout)
+  lastSavedTimeout = setTimeout(() => {
+    lastSaved.value = ''
+  }, 3000)
+}
+
+async function handleEditChanged(site: { id: string; name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean }) {
+  if (newSites.has(site.id)) {
+    newSites.set(site.id, site)
+  } else {
+    dirtyEdits.set(site.id, site)
+  }
+}
+
+function selectSite(site: { id: string; name: string; enabled: boolean }) {
+  if (selectedId.value && dirtyEdits.has(selectedId.value)) {
+    bulkSave()
+  }
+  selectedId.value = site.id
+}
+
+function startAdd() {
+  pendingAdd.value = true
+}
+
+async function confirmAdd(name: string) {
+  const trimmed = name.trim()
+  if (!trimmed) return
+  const site = defaultSite(trimmed)
+
+  try {
+    const res = await api('/', {
+      method: 'POST',
+      body: JSON.stringify(site),
+    })
+    if (res.ok) {
+      const created = await res.json()
+      sites.value.unshift(created)
+      pendingAdd.value = false
+      selectedId.value = created.id
+      lastSaved.value = 'Updated at ' + new Date().toLocaleTimeString()
+      
+      if (lastSavedTimeout) clearTimeout(lastSavedTimeout)
+      lastSavedTimeout = setTimeout(() => {
+        lastSaved.value = ''
+      }, 3000)
+      return
+    }
+  } catch {}
+
+  sites.value.unshift(site)
+  pendingAdd.value = false
+  selectedId.value = site.id
+  try { saveSites() } catch {}
+}
+
+function cancelAdd() {
+  pendingAdd.value = false
+}
+
+async function removeSite(index: number) {
+   const site = sites.value[index]
+   newSites.delete(site.id)
+   dirtyEdits.delete(site.id)
+   try {
+     const res = await api(`/${encodeURIComponent(site.id)}`, { method: 'DELETE' })
+     if (res.ok) await res.json()
+   } catch {}
+   if (site.id === selectedId.value) selectedId.value = null
+   sites.value.splice(index, 1)
+   try { localStorage.setItem(STORAGE_KEY, JSON.stringify(sites.value)) } catch {}
+}
+
+async function deleteSelected() {
+  if (!selectedSite.value) return
+  const idx = sites.value.findIndex(s => s.id === selectedSite.value!.id)
+  if (idx !== -1) await removeSite(idx)
+}
+
+function openPreview() {
+  const site = selectedSite.value
+  if (!site?.url) return
+  let url = site.url.trim()
+  if (!/^https?:\/\//i.test(url)) url = 'https://' + url
+  window.open(url, site.targetWindow || '_blank')
+}
+</script>
+
+<style scoped>
+.app {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+}
+
+h1 {
+  text-align: left;
+  margin: 0;
+  font-size: 2rem;
+  color: var(--text-primary);
+}
+
+.theme-toggle {
+  padding: 8px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+
+.theme-toggle:hover {
+  background: var(--cancel-bg);
+  border-color: var(--border-input);
+}
+
+.layout {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+}
+</style>
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition: background 0.3s, color 0.3s;
+}
+
+#__nuxt {
+  min-height: 100vh;
+  background: var(--bg-primary);
+  transition: background 0.3s;
+}
+</style>

publisher/app/assets/themes.scss

@@ -0,0 +1,39 @@
+/* Light theme (default) */
+:root {
+  --bg-primary: #fff;
+  --bg-secondary: #fafafa;
+  --bg-active: #eff6ff;
+  --text-primary: #1a1a1a;
+  --text-secondary: #374151;
+  --text-muted: #9ca3af;
+  --border-color: #e5e7eb;
+  --border-input: #d1d5db;
+  --placeholder-bg: transparent;
+  --danger-bg: #fee2e2;
+  --danger-hover: #fecaca;
+  --danger-text: #dc2626;
+  --cancel-bg: #f3f4f6;
+  --cancel-border: #d1d5db;
+  --cancel-text: #6b7280;
+  --cancel-hover: #e5e7eb;
+}
+
+/* Dark theme */
+.dark {
+  --bg-primary: #0f0f0f;
+  --bg-secondary: #1a1a1a;
+  --bg-active: #1e293b;
+  --text-primary: #e5e5e5;
+  --text-secondary: #a3a3a3;
+  --text-muted: #737373;
+  --border-color: #333;
+  --border-input: #404040;
+  --placeholder-bg: #141414;
+  --danger-bg: #2d1b1e;
+  --danger-hover: #3d2528;
+  --danger-text: #f87171;
+  --cancel-bg: #262626;
+  --cancel-border: #404040;
+  --cancel-text: #a3a3a3;
+  --cancel-hover: #333;
+}

publisher/app/components/AddSiteForm.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="show" class="card add-form-card">
+    <input ref="nameInput" v-model="pendingName" type="text"
+           placeholder="Site name" class="edit-input" @keyup.enter="submit" />
+    <div class="edit-actions">
+      <button class="save-btn" @click.prevent="submit">Add</button>
+      <button class="cancel-btn" @click.prevent="emit('cancel')">Cancel</button>
+    </div>
+  </div>
+  <div v-else class="add-placeholder card" @click="$emit('start')">
+    <span class="plus-sign">+</span>
+    <span class="add-label">Add site</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+
+const props = defineProps<{ show: boolean }>()
+const emit = defineEmits<{ start: []; cancel: []; submit: [name: string] }>()
+
+const pendingName = ref('')
+const nameInput = ref<HTMLInputElement | null>(null)
+
+watch(() => props.show, async (val) => {
+  if (val) {
+    pendingName.value = ''
+    await nextTick()
+    nameInput.value?.focus()
+  }
+})
+
+function submit() {
+  const name = pendingName.value.trim()
+  if (!name) return
+  emit('submit', name)
+}
+</script>
+
+<style scoped>
+.add-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 2px dashed var(--border-input);
+  border-radius: 8px;
+  cursor: pointer;
+  background: var(--placeholder-bg);
+  transition: border-color 0.2s, background 0.2s;
+  margin-top: 8px;
+  min-height: 72px;
+}
+
+.add-placeholder:hover {
+  border-color: #2563eb;
+  background: var(--bg-active);
+}
+
+.plus-sign {
+  font-size: 28px;
+  color: var(--text-muted);
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.add-placeholder:hover .plus-sign {
+  color: #2563eb;
+}
+
+.add-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  transition: color 0.2s;
+}
+
+.add-placeholder:hover .add-label {
+  color: #2563eb;
+}
+
+.add-form-card {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.edit-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.save-btn, .cancel-btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  border: none;
+}
+
+.save-btn {
+  background: #2563eb;
+  color: white;
+}
+
+.save-btn:hover {
+  background: #1d4ed8;
+}
+
+.cancel-btn {
+  background: var(--cancel-bg);
+  color: var(--cancel-text);
+  border: 1px solid var(--cancel-border) !important;
+}
+
+.cancel-btn:hover {
+  background: var(--cancel-hover);
+}
+</style>

publisher/app/components/SettingsEmpty.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="settings-empty">
+    <p>Select a site from the list to configure its settings</p>
+  </div>
+</template>
+
+<style scoped>
+.settings-empty {
+  flex: 1;
+  min-width: 320px;
+  padding: 48px;
+  text-align: center;
+  color: var(--text-muted);
+  border: 1px dashed var(--border-input);
+  border-radius: 12px;
+}
+</style>

publisher/app/components/SettingsPanel.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="settings-panel">
+    <h2>Edit: {{ site.name }}</h2>
+
+    <div class="form-group">
+      <label>Name</label>
+      <input v-model="editName" type="text" class="edit-input" />
+    </div>
+
+    <div class="form-group">
+      <label>URL</label>
+      <input v-model="editUrl" type="url" placeholder="https://example.com" class="edit-input" />
+    </div>
+
+    <div class="form-group">
+      <label>Description</label>
+      <textarea v-model="editDescription" rows="3"
+                placeholder="Optional description..." class="edit-input"></textarea>
+    </div>
+
+    <div class="form-group">
+      <label>Theme Color</label>
+      <div class="color-row">
+        <input v-model="editThemeColor" type="color" class="color-picker" />
+        <input v-model="editThemeColor" type="text"
+               placeholder="#2563eb" class="edit-input color-text" />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label>Link Target</label>
+      <select v-model="editTargetWindow" class="edit-input">
+        <option value="_blank">Open in new tab</option>
+        <option value="_self">Open in same tab</option>
+      </select>
+    </div>
+
+    <div class="form-group checkbox-group">
+      <label>
+        <input v-model="editEnabled" type="checkbox" />
+        Enabled (visible on the site)
+      </label>
+    </div>
+
+    <div class="form-actions">
+      <button class="delete-btn" @click.prevent="$emit('delete')">Delete</button>
+      <span class="save-status" v-if="lastSaved">{{ lastSaved }}</span>
+      <button class="preview-btn" @click.prevent="$emit('preview')" :disabled="!site.url">
+        Preview Link
+      </button>
+    </div>
+
+    <div class="form-actions save-bar">
+      <div></div>
+      <button class="save-btn" @click="handleSave" :disabled="!isDirty" :class="{ 'save-btn-dirty': isDirty }">
+        Save
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps<{
+  site: { name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean }
+  lastSaved: string
+  siteId?: string
+}>()
+
+const emit = defineEmits<{ delete: []; preview: []; changed: [{ name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean, id: string }] }>()
+
+const editName = ref(props.site.name)
+const editUrl = ref(props.site.url)
+const editDescription = ref(props.site.description)
+const editThemeColor = ref(props.site.themeColor)
+const editTargetWindow = ref(props.site.targetWindow)
+const editEnabled = ref(props.site.enabled)
+
+const isDirty = computed(() => {
+  return (
+    editName.value !== props.site.name ||
+    editUrl.value !== props.site.url ||
+    editDescription.value !== props.site.description ||
+    editThemeColor.value !== props.site.themeColor ||
+    editTargetWindow.value !== props.site.targetWindow ||
+    editEnabled.value !== props.site.enabled
+  )
+})
+
+watch([editName, editUrl, editDescription, editThemeColor, editTargetWindow, editEnabled], () => {
+  emit('changed', {
+    name: editName.value,
+    url: editUrl.value,
+    description: editDescription.value,
+    themeColor: editThemeColor.value,
+    targetWindow: editTargetWindow.value,
+    enabled: editEnabled.value,
+    id: props.siteId!,
+  })
+})
+
+function handleSave() {
+  emit('changed', {
+    name: editName.value,
+    url: editUrl.value,
+    description: editDescription.value,
+    themeColor: editThemeColor.value,
+    targetWindow: editTargetWindow.value,
+    enabled: editEnabled.value,
+    id: props.siteId!,
+  })
+}
+</script>
+
+<style scoped>
+.settings-panel {
+  flex: 1;
+  min-width: 320px;
+  padding: 24px;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  background: var(--bg-secondary);
+}
+
+.settings-panel h2 {
+  margin: 0 0 20px;
+  font-size: 1.25rem;
+  color: var(--text-primary);
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.edit-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border-input);
+  border-radius: 6px;
+  font-size: 14px;
+  box-sizing: border-box;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.edit-input:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+.edit-input::placeholder {
+  color: var(--text-muted);
+}
+
+textarea.edit-input {
+  resize: vertical;
+  font-family: inherit;
+}
+
+.color-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.color-picker {
+  width: 48px;
+  height: 40px;
+  padding: 2px;
+  border: 1px solid var(--border-input);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.color-text {
+  flex: 1;
+}
+
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 400;
+  cursor: pointer;
+  color: var(--text-primary);
+}
+
+.form-actions {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   margin-top: 24px;
+   padding-top: 16px;
+   border-top: 1px solid var(--border-color);
+ }
+
+ .delete-btn {
+   padding: 8px 16px;
+   background: var(--danger-bg);
+   color: var(--danger-text);
+   border: none;
+   border-radius: 6px;
+   font-size: 14px;
+   cursor: pointer;
+ }
+
+ .delete-btn:hover {
+   background: var(--danger-hover);
+ }
+
+ .save-status {
+   font-size: 12px;
+   color: var(--text-muted);
+ }
+
+.preview-btn {
+ padding: 8px 16px;
+ background: #2563eb;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ cursor: pointer;
+}
+
+.preview-btn:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+.preview-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.save-bar {
+  margin-top: 8px;
+  padding-top: 12px;
+  border-top: none;
+}
+
+.save-btn {
+  padding: 8px 32px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--border-color);
+  color: var(--text-muted);
+}
+
+.save-btn:disabled {
+  cursor: not-allowed;
+}
+
+.save-btn-dirty {
+  background: #2563eb;
+  color: white;
+}
+
+.save-btn-dirty:hover {
+  background: #1d4ed8;
+}
+</style>

publisher/app/components/Sidebar.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="sidebar">
+    <SiteCard v-for="(site, index) in sites" :key="site.id"
+              :site="site"
+              :active="selectedId === site.id"
+              :disabled="!site.enabled"
+              @select="$emit('select-site', site)" />
+
+    <AddSiteForm :show="pendingAdd"
+                 @start="$emit('start-add')"
+                 @cancel="$emit('cancel-add')"
+                 @submit="(name) => $emit('add-site', name)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SiteCard from './SiteCard.vue'
+import AddSiteForm from './AddSiteForm.vue'
+
+defineProps<{
+  sites: Array<{ id: string; name: string; enabled: boolean }>
+  selectedId: string | null
+  pendingAdd: boolean
+}>()
+
+defineEmits<{ 'select-site': [site: { id: string; name: string; enabled: boolean }]; 'start-add': []; 'cancel-add': []; 'add-site': [name: string] }>()
+</script>
+
+<style scoped>
+.sidebar {
+  width: 280px;
+  min-width: 280px;
+  position: sticky;
+  top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>

publisher/app/components/SiteCard.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="site-card"
+       :class="{ active, disabled }"
+       @click="$emit('select')">
+    <span class="site-name">{{ site.name }}</span>
+    <span v-if="!site.enabled" class="badge disabled">Disabled</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  site: { id: string; name: string; enabled: boolean }
+  active: boolean
+  disabled: boolean
+}>()
+
+defineEmits<{ select: [] }>()
+</script>
+
+<style scoped>
+.site-card {
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  cursor: pointer;
+  background: var(--bg-secondary);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.site-card:hover {
+  border-color: #2563eb;
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
+}
+
+.site-card.active {
+  border-color: #2563eb;
+  background: var(--bg-active);
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
+}
+
+.site-card.disabled {
+  opacity: 0.5;
+}
+
+.site-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.badge.disabled {
+  font-size: 10px;
+  color: var(--danger-text);
+  background: var(--danger-bg);
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-top: 4px;
+  display: inline-block;
+}
+</style>

publisher/nuxt.config.ts

@@ -0,0 +1,23 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import { resolve } from 'node:path'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  srcDir: 'app',
+  css: [resolve(__dirname, 'app/assets/themes.scss')],
+  nitro: {
+    routeRules: {
+      '/api/sites/**': { proxy: 'http://localhost:5000/api/sites/**' },
+    },
+  },
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+      ]
+    }
+  }
+})

publisher/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "publisher",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^4.4.8",
+    "vue": "^3.5.39",
+    "vue-router": "^5.1.0"
+  },
+  "devDependencies": {
+    "sass": "^1.101.0"
+  }
+}

publisher/public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

publisher/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

template/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

template/README.md

@@ -0,0 +1,75 @@
+# Nuxt Content Starter
+
+Look at the [Nuxt Content documentation](https://content.nuxt.com) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

template/app/app.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="app">
+    <NuxtRouteAnnouncer />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

template/app/assets/css/global.css

@@ -0,0 +1,305 @@
+/* ── Light Theme (Default) ────────────────────────────────── */
+:root {
+  --bg-body: #faf6f0;
+  --bg-elevated: #fffdf8;
+  --text-primary: #2d2418;
+  --text-heading: #1a1408;
+  --text-secondary: #5c4a37;
+  --text-muted: #7a6b56;
+  --border-light: #f0e5d7;
+  --border-medium: #e8dbcc;
+  --border-accent: #d4c4b0;
+  --link-color: #b45309;
+  --link-hover: #92400e;
+  --link-border: rgba(180, 83, 9, 0.25);
+  --link-border-hover: rgba(180, 83, 9, 0.6);
+  --strong-color: #1a1408;
+  --marker-color: #5c4a37;
+  --blockquote-bg: #fdf9f3;
+  --blockquote-border: #d4c4b0;
+  --blockquote-text: #5c4a37;
+  --code-inline-bg: #fef3e2;
+  --code-inline-color: #9a4710;
+  --code-block-bg: #1f1910;
+  --code-block-color: #e8dbcc;
+  --table-border: #e8dbcc;
+  --table-header-bg: #fdf9f3;
+  --table-header-text: #4a3b2c;
+  --table-row-border: #f5efe6;
+  --table-cell-text: #5c4a37;
+  --hr-color: #e8dbcc;
+}
+
+/* ── Dark Theme ───────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-body: #17120c;
+    --bg-elevated: #1f1810;
+    --text-primary: #d4c4b0;
+    --text-heading: #e8dbcc;
+    --text-secondary: #a89580;
+    --text-muted: #7a6b56;
+    --border-light: #2e2419;
+    --border-medium: #3d3125;
+    --border-accent: #4f4030;
+    --link-color: #fb923c;
+    --link-hover: #fdba74;
+    --link-border: rgba(251, 146, 60, 0.3);
+    --link-border-hover: rgba(251, 146, 60, 0.6);
+    --strong-color: #e8dbcc;
+    --marker-color: #a89580;
+    --blockquote-bg: #1f1810;
+    --blockquote-border: #4f4030;
+    --blockquote-text: #a89580;
+    --code-inline-bg: #2a2015;
+    --code-inline-color: #fb923c;
+    --code-block-bg: #0e0a06;
+    --code-block-color: #d4c4b0;
+    --table-border: #3d3125;
+    --table-header-bg: #1f1810;
+    --table-header-text: #cbd5c4;
+    --table-row-border: #2e2419;
+    --table-cell-text: #a89580;
+    --hr-color: #3d3125;
+  }
+}
+
+/* ── Reset & Base ─────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0 auto;
+  padding: 0;
+  line-height: 1.7;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  color: var(--text-primary);
+  background-color: var(--bg-body);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+/* ── Layout Container ─────────────────────────────────────── */
+.prose-wrapper {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 4rem;
+}
+
+/* ── Typography ───────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 2em;
+  margin-bottom: 0.6em;
+  line-height: 1.3;
+  color: var(--text-heading);
+  font-weight: 700;
+}
+
+h1 {
+  font-size: 2.25rem;
+  padding-bottom: 0.5em;
+  border-bottom: 2px solid var(--border-medium);
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  font-size: 1.75rem;
+  padding-bottom: 0.35em;
+  border-bottom: 1px solid var(--border-light);
+}
+
+h3 {
+  font-size: 1.375rem;
+}
+
+h4 {
+  font-size: 1.125rem;
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+p {
+  margin: 0 0 1.25em;
+  line-height: 1.8;
+}
+
+/* ── Links ────────────────────────────────────────────────── */
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  border-bottom: 1px solid var(--link-border);
+  transition: color 0.2s, border-color 0.2s;
+}
+
+a:hover {
+  color: var(--link-hover);
+  border-bottom-color: var(--link-border-hover);
+}
+
+/* ── Emphasis & Strong ────────────────────────────────────── */
+strong {
+  font-weight: 700;
+  color: var(--strong-color);
+}
+
+em {
+  font-style: italic;
+}
+
+/* ── Lists ────────────────────────────────────────────────── */
+ul, ol {
+  margin: 0 0 1.25em;
+  padding-left: 1.5rem;
+}
+
+li {
+  margin-bottom: 0.35em;
+  line-height: 1.7;
+}
+
+li::marker {
+  color: var(--marker-color);
+}
+
+/* ── Blockquote ───────────────────────────────────────────── */
+blockquote {
+  margin: 0 0 1.25em;
+  padding: 0.85em 1.25em;
+  border-left: 4px solid var(--blockquote-border);
+  background: var(--blockquote-bg);
+  color: var(--blockquote-text);
+  border-radius: 0 6px 6px 0;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Inline Code ──────────────────────────────────────────── */
+code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 0.15em 0.4em;
+  background: var(--code-inline-bg);
+  color: var(--code-inline-color);
+  border-radius: 4px;
+}
+
+/* ── Code Blocks ──────────────────────────────────────────── */
+pre {
+  margin: 0 0 1.25em;
+  padding: 0;
+  background: var(--code-block-bg);
+  border-radius: 8px;
+  overflow: auto;
+}
+
+pre code {
+  font-size: 0.835rem;
+  line-height: 1.65;
+  padding: 0;
+  background: none;
+  color: var(--code-block-color);
+  border-radius: 0;
+}
+
+/* ── Tables ───────────────────────────────────────────────── */
+table {
+  width: 100%;
+  margin: 0 0 1.25em;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid var(--table-border);
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 0.9375rem;
+}
+
+thead {
+  background: var(--table-header-bg);
+}
+
+th {
+  font-weight: 600;
+  color: var(--table-header-text);
+  border-bottom: 2px solid var(--table-border);
+}
+
+td {
+  padding: 0.6rem 1rem;
+  border-bottom: 1px solid var(--table-row-border);
+  color: var(--table-cell-text);
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+/* ── Horizontal Rule ──────────────────────────────────────── */
+hr {
+  margin: 2em 0;
+  border: none;
+  border-top: 2px solid var(--hr-color);
+}
+
+/* ── Images ───────────────────────────────────────────────── */
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  display: block;
+  margin: 0.5em 0;
+}
+
+/* ── Forms ────────────────────────────────────────────────── */
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* ── Responsive ───────────────────────────────────────────── */
+@media (max-width: 640px) {
+  html {
+    font-size: 15px;
+  }
+
+  .prose-wrapper {
+    padding: 1.25rem 1rem 3rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  h3 {
+    font-size: 1.2rem;
+  }
+}

template/app/components/Alert.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="alert" :style="{ 'border-color': color }">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { color } = defineProps({
+  color: {
+    type: String,
+    default: 'orange'
+  }
+})
+</script>
+
+<style scoped>
+.alert {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border: 2px solid;
+  border-radius: 0.5rem;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  .alert {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+  }
+
+  .alert:hover {
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5);
+  }
+}
+</style>

template/app/components/Counter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h3>Counter: {{ count }}</h3>
+    <button @click="increment">
+      Increment
+    </button>
+    <button @click="decrement">
+      Decrement
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const count = ref(0)
+
+const increment = () => {
+  count.value++
+}
+
+const decrement = () => {
+  count.value--
+}
+</script>
+
+<style scoped>
+button {
+  margin: 5px;
+}
+</style>

template/app/components/NotFound.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="prose-wrapper">
+    <h1>Page not found dskldksla</h1>
+  </div>
+</template>
+
+<style scoped>
+</style>

template/app/pages/[...slug].vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const { data: page } = await useAsyncData('page-' + route.path, () => {
+  return queryCollection('content').path(route.path).first()
+})
+
+if (!page.value) {
+  useHead({ title: 'Page not found', meta: [{ name: 'robots', content: 'noindex' }] })
+}
+</script>
+
+<template>
+  <div class="prose-wrapper" v-if="page">
+    <ContentRenderer :value="page" />
+  </div>
+  <NotFound />
+</template>

template/content.config.ts

@@ -0,0 +1,10 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      type: 'page',
+      source: '**',
+    }),
+  },
+})

template/content/about.md

@@ -0,0 +1,3 @@
+# About Content Version 3
+
+[Back home](/)

template/content/index.md

@@ -0,0 +1,24 @@
+# Welcome to Nuxt Content Starter
+
+This is the main page displaying Markdown located at [content/index.md](https://github.com/nuxt/starter/blob/content/content/index.md).
+
+Move to [about](/about) page.
+
+## Manage your Contents
+
+Create new pages or modify the existing ones in `content/` directory.
+
+## Query & Render Pages
+
+You can find an example of querying contents and rendering them in a [catch-all page](https://github.com/nuxt/starter/blob/content/app/pages/%5B...slug%5D.vue)
+
+## Integrate Vue Component
+
+::alert{color="green"}
+The current [alert](https://github.com/nuxt/starter/blob/content/app/components/Alert.vue) and the [counter](https://github.com/nuxt/starter/blob/content/app/components/Counter.vue) below are `Vue` components integrated into the Markdown.
+::
+
+::counter
+::
+
+Checkout out the [documentation](https://content.nuxt.com/docs/getting-started) to learn more.

template/nuxt.config.ts

@@ -0,0 +1,17 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/content',
+  ],
+  css: ['~/assets/css/global.css'],
+  devtools: { enabled: true },
+  compatibilityDate: '2024-04-03',
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+      ]
+    }
+  }
+})

template/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "publisher",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@nuxt/content": "^3.14.0",
+    "better-sqlite3": "^12.11.1",
+    "nuxt": "^4.4.8",
+    "vue": "^3.5.35",
+    "vue-router": "^5.1.0"
+  }
+}

template/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}