Syndria98/dnd-vault-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added only template

Browse Source
This commit is contained in:
Aran Roig
2026-07-13 16:36:52 +02:00
parent 6506284912
commit 6d7fae0159
27 changed files with 43 additions and 14153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
backend/.env.production
View File

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

16
backend/.gitignore vendored
View File

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

1741
backend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
backend/package.json
View File

@@ -1,25 +0,0 @@
{
"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",
"simple-git": "^3.36.0",
"socket.io": "^4.8.3"
},
"devDependencies": {
"nodemon": "^3.1.14"
}
}

14
backend/src/db.js
View File

@@ -1,14 +0,0 @@
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;

66
backend/src/index.js
View File

@@ -1,66 +0,0 @@
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}`);
});

18
backend/src/models/Site.js
View File

@@ -1,18 +0,0 @@
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 },
gitRepoUrl: { type: String, default: "", trim: true },
gitBranch: { type: String, default: "main", trim: true },
},
{ timestamps: true }
);
module.exports = mongoose.model("Site", siteSchema);

168
backend/src/routes/sites.js
View File

@@ -1,168 +0,0 @@
const express = require("express");
const Site = require("../models/Site");
const fs = require("fs");
const path = require("path");
const simpleGit = require("simple-git");
const router = express.Router();
const SITES_GIT_DIR = path.join(__dirname, "../../sites-git-data");
if (!fs.existsSync(SITES_GIT_DIR)) {
fs.mkdirSync(SITES_GIT_DIR, { recursive: true });
}
// 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, gitRepoUrl, gitBranch } = req.body;
const site = new Site({ id, name, url, description, themeColor, targetWindow, enabled, gitRepoUrl: gitRepoUrl || "", gitBranch: gitBranch || "main" });
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, gitRepoUrl, gitBranch } = req.body;
console.log("[PUT /sites] id:", req.params.id, "body:", JSON.stringify({name,url,description,themeColor,targetWindow,enabled,gitRepoUrl,gitBranch}));
const updates = { name, url, description, themeColor, targetWindow, enabled, gitRepoUrl: gitRepoUrl || "", gitBranch: gitBranch || "main" };
const site = await Site.findOneAndUpdate({ id: req.params.id }, { $set: 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" });
const siteGitDir = path.join(SITES_GIT_DIR, site.id);
if (fs.existsSync(siteGitDir)) {
fs.rmSync(siteGitDir, { recursive: true, force: true });
}
res.json({ message: "Site deleted", id: site.id });
} catch (err) {
res.status(500).json({ error: err.message });
}
});
// GET /api/sites/:id/git-log - Get git commit log for a site's repository
router.get("/:id/git-log", async (req, res) => {
try {
const site = await Site.findOne({ id: req.params.id });
if (!site) return res.status(404).json({ error: "Site not found" });
if (!site.gitRepoUrl) return res.status(400).json({ error: "No git repo URL configured" });
const siteGitDir = path.join(SITES_GIT_DIR, site.id);
try {
const git = simpleGit(siteGitDir);
const logs = await git.log();
res.json({ commits: logs.all || [] });
} catch (gitErr) {
res.status(500).json({ error: "Failed to read git log. The repository may need to be cloned first. Use the sync endpoint." });
}
} catch (err) {
res.status(500).json({ error: err.message });
}
});
// POST /api/sites/:id/sync-git - Clone or pull the git repository for a site
router.post("/:id/sync-git", async (req, res) => {
try {
const site = await Site.findOne({ id: req.params.id });
if (!site) return res.status(404).json({ error: "Site not found" });
if (!site.gitRepoUrl) return res.status(400).json({ error: "No git repo URL configured" });
const siteGitDir = path.join(SITES_GIT_DIR, site.id);
const git = simpleGit(siteGitDir);
try {
await git.pull();
res.json({ message: "Repository pulled successfully", commits: (await git.log()).all || [] });
} catch (pullErr) {
if (pullErr.message.includes("repo does not exist") || pullErr.message.includes("No local restart")) {
const branch = site.gitBranch || "main";
const gitInstance = simpleGit();
await gitInstance.clone(site.gitRepoUrl, siteGitDir);
try {
await gitInstance.checkout(branch);
} catch (e) {
// If branch doesn't exist, stay on default branch
}
const logs = await gitInstance.log();
res.json({ message: "Repository cloned successfully", cloned: true, commits: logs.all || [] });
} else {
res.status(500).json({ error: pullErr.message });
}
}
} catch (err) {
res.status(500).json({ error: err.message });
}
});
// GET /api/sites/:id/files - Get file tree for a site's synced repository
router.get("/:id/files", async (req, res) => {
try {
const site = await Site.findOne({ id: req.params.id });
if (!site) return res.status(404).json({ error: "Site not found" });
const siteGitDir = path.join(SITES_GIT_DIR, site.id);
if (!fs.existsSync(siteGitDir)) {
return res.json({ tree: [], message: "Repository not synced yet. Use Sync Git first." });
}
function buildTree(dir, relativePath = "") {
const entries = fs.readdirSync(dir, { withFileTypes: true });
const result = [];
// Folders first, then files
const dirs = entries.filter(e => e.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
const files = entries.filter(e => !e.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
for (const d of dirs) {
result.push({
name: d.name,
path: relativePath ? `${relativePath}/${d.name}` : d.name,
type: "folder",
children: buildTree(path.join(dir, d.name), relativePath ? `${relativePath}/${d.name}` : d.name),
});
}
for (const f of files) {
result.push({
name: f.name,
path: relativePath ? `${relativePath}/${f.name}` : f.name,
type: "file",
});
}
return result;
}
const tree = buildTree(siteGitDir);
res.json({ tree });
} catch (err) {
res.status(500).json({ error: err.message });
}
});
module.exports = router;

61
converter/convert.js
View File

@@ -1,61 +0,0 @@
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);

24
frontend/.gitignore vendored
View File

@@ -1,24 +0,0 @@
# 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

75
frontend/README.md
View File

@@ -1,75 +0,0 @@
# 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.

412
frontend/app/app.vue
View File

@@ -1,412 +0,0 @@
<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>
<main class="body-wrapper">
<div class="layout">
<div class="sidebar-col">
<Sidebar :sites="sites"
:selected-id="selectedId"
:pending-add="pendingAdd"
@select-site="selectSite"
@start-add="startAdd"
@cancel-add="cancelAdd"
@add-site="confirmAdd" />
</div>
<div class="settings-col">
<SettingsPanel v-if="selectedSite"
:site="selectedSite"
:last-saved="lastSaved"
:site-id="selectedSite.id"
@delete="deleteSelected"
@preview="openPreview"
@changed="handleEditChanged" />
<SettingsEmpty v-else />
</div>
<div class="filetree-col" v-if="selectedSite">
<FileTree :site-id="selectedSite.id" />
</div>
</div>
</main>
</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'
import FileTree from './components/FileTree.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,
gitRepoUrl: '',
gitBranch: 'main',
}
}
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; gitRepoUrl?: string; gitBranch?: string }>>([])
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
let autoSaveTimer: 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 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,
gitRepoUrl: site.gitRepoUrl || '',
gitBranch: site.gitBranch || 'main',
}),
})
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() {
if (autoSaveTimer) clearTimeout(autoSaveTimer)
autoSaveTimer = null
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; gitRepoUrl?: string; gitBranch?: string }) {
if (newSites.has(site.id)) {
newSites.set(site.id, site)
} else {
dirtyEdits.set(site.id, site)
}
if (autoSaveTimer) clearTimeout(autoSaveTimer)
autoSaveTimer = setTimeout(async () => {
await bulkSave()
}, 800)
}
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 {
width: 100%;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
position: sticky;
top: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
flex-shrink: 0;
background: var(--bg-primary);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
}
.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);
}
h1 {
text-align: left;
margin: 0;
font-size: 2rem;
color: var(--text-primary);
}
.body-wrapper {
flex: 1;
overflow: hidden;
}
.layout {
display: flex;
gap: 0;
height: 100%;
}
.sidebar-col {
width: 280px;
min-width: 280px;
max-width: 280px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
border-right: 1px solid var(--border-color);
padding: 16px;
}
.settings-col {
flex: 1;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
min-width: 0;
border-right: 1px solid var(--border-color);
padding: 24px;
}
.settings-col .settings-panel,
.settings-col .settings-empty {
width: 100%;
}
.filetree-col {
flex: 1;
min-width: 280px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background: var(--bg-secondary);
padding: 16px;
}
</style>
<style>
html, body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
background: var(--bg-primary);
color: var(--text-primary);
transition: background 0.3s, color 0.3s;
}
* {
box-sizing: border-box;
}
#__nuxt {
height: 100vh;
background: var(--bg-primary);
transition: background 0.3s;
}
</style>

39
frontend/app/assets/themes.scss
View File

@@ -1,39 +0,0 @@
/* 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;
}

120
frontend/app/components/AddSiteForm.vue
View File

@@ -1,120 +0,0 @@
<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>

65
frontend/app/components/FileTree.vue
View File

@@ -1,65 +0,0 @@
<template>
<div class="file-tree">
<div v-if="loading" class="tree-loading">Loading files...</div>
<div v-else-if="error" class="tree-error">{{ error }}</div>
<div v-else-if="!tree || tree.length === 0" class="tree-empty">
No files. Sync the repository first.
</div>
<TreeItem v-else v-model:expanded="expandedPaths" :items="tree" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TreeItem from './TreeItem.vue'
const props = defineProps<{
siteId: string
}>()
const loading = ref(true)
const error = ref('')
const tree = ref<any[]>([])
const expandedPaths = ref<Set<string>>(new Set())
onMounted(async () => {
loading.value = true
try {
const API_BASE = window.location.origin
const res = await fetch(`${API_BASE}/api/sites/${encodeURIComponent(props.siteId)}/files`)
if (res.ok) {
const data = await res.json()
tree.value = data.tree || []
} else {
const errData = await res.json().catch(() => ({}))
error.value = errData.error || 'Failed to load files'
}
} catch {
error.value = 'Could not connect to server'
} finally {
loading.value = false
}
})
</script>
<style scoped>
.file-tree {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
}
.tree-loading,
.tree-error,
.tree-empty {
padding: 16px;
color: var(--text-muted);
text-align: center;
}
.tree-error {
color: #e53e3e;
}
</style>

17
frontend/app/components/SettingsEmpty.vue
View File

@@ -1,17 +0,0 @@
<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>

364
frontend/app/components/SettingsPanel.vue
View File

@@ -1,364 +0,0 @@
<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 git-actions-bar" v-if="hasGit">
<button class="git-sync-btn" @click.prevent="handleSyncGit" :disabled="syncing">
{{ syncing ? 'Syncing...' : 'Sync Git' }}
</button>
<span class="save-status" v-if="lastGitMsg">{{ lastGitMsg }}</span>
</div>
<div class="git-divider" v-if="hasGit"></div>
<div class="form-group git-group" v-if="hasGit">
<label>Git Repository URL</label>
<input v-model="editGitRepoUrl" type="url" placeholder="https://github.com/user/repo.git" class="edit-input" />
</div>
<div class="form-group git-group" v-if="hasGit">
<label>Git Branch</label>
<input v-model="editGitBranch" type="text" placeholder="main" class="edit-input" />
</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; gitRepoUrl?: string; gitBranch?: string }
lastSaved: string
siteId?: string
}>()
const emit = defineEmits<{ delete: []; preview: []; changed: [{ name: string; url: string; description: string; themeColor: string; targetWindow: string; enabled: boolean, gitRepoUrl?: string; gitBranch?: string; id: string }] }>()
const syncing = ref(false)
const lastGitMsg = ref('')
const hasGit = computed(() => {
return !!(props.site.gitRepoUrl || props.siteId)
})
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 editGitRepoUrl = ref(props.site.gitRepoUrl || '')
const editGitBranch = ref(props.site.gitBranch || 'main')
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 ||
editGitRepoUrl.value !== (props.site.gitRepoUrl || '') ||
editGitBranch.value !== (props.site.gitBranch || 'main')
)
})
watch([editName, editUrl, editDescription, editThemeColor, editTargetWindow, editEnabled, editGitRepoUrl, editGitBranch], () => {
emit('changed', {
name: editName.value,
url: editUrl.value,
description: editDescription.value,
themeColor: editThemeColor.value,
targetWindow: editTargetWindow.value,
enabled: editEnabled.value,
gitRepoUrl: editGitRepoUrl.value,
gitBranch: editGitBranch.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,
gitRepoUrl: editGitRepoUrl.value,
gitBranch: editGitBranch.value,
id: props.siteId!,
})
}
async function handleSyncGit() {
if (!props.site.id || syncing.value) return
const API_BASE = window.location.origin
syncing.value = true
lastGitMsg.value = ''
try {
const res = await fetch(`${API_BASE}/api/sites/${encodeURIComponent(props.site.id)}/sync-git`, { method: 'POST', headers: { 'Content-Type': 'application/json' } })
const data = await res.json()
if (res.ok) {
lastGitMsg.value = data.cloned ? 'Cloned repository' : 'Pull succeeded'
} else {
lastGitMsg.value = data.error || 'Sync failed'
}
} catch (err) {
lastGitMsg.value = 'Sync failed'
}
syncing.value = false
}
</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;
}
.git-divider {
border: none;
border-top: 1px dashed var(--border-color);
margin: 16px 0;
}
.git-group {
margin-top: 8px;
}
.git-actions-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 4px;
}
.git-sync-btn {
padding: 8px 16px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
background: #7c3aed;
color: white;
}
.git-sync-btn:hover:not(:disabled) {
background: #6d28d9;
}
.git-sync-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>

35
frontend/app/components/Sidebar.vue
View File

@@ -1,35 +0,0 @@
<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 {
display: flex;
flex-direction: column;
gap: 8px;
}
</style>

59
frontend/app/components/SiteCard.vue
View File

@@ -1,59 +0,0 @@
<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>

97
frontend/app/components/TreeItem.vue
View File

@@ -1,97 +0,0 @@
<template>
<ul class="tree-list">
<li v-for="item in items" :key="item.path">
<div class="tree-item-row" @click="toggle(item)">
<span class="tree-icon">
<svg v-if="item.type === 'folder'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
</svg>
<svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
<polyline points="14,2 14,8 20,8"/>
</svg>
</span>
<span class="tree-name" :title="item.path">{{ item.name }}</span>
</div>
<TreeItem v-if="item.type === 'folder' && expandedPaths.has(item.path)" :key="item.path" v-model:expanded="expandedPaths" :items="item.children || []" />
</li>
</ul>
</template>
<script setup lang="ts">
import { onMounted, watch } from 'vue'
const props = defineProps<{
items: any[]
expanded?: Set<string>
}>()
const emit = defineEmits<{ 'update:expanded': [value: Set<string>] }>()
const expandedPaths = ref(new Set<string>())
defineExpose({ expandedPaths })
function toggle(item: any) {
if (item.type !== 'folder') return
const next = new Set(expandedPaths.value)
if (next.has(item.path)) {
next.delete(item.path)
} else {
next.add(item.path)
}
expandedPaths.value = next
emit('update:expanded', next)
}
function syncExpanded() {
if (props.expanded) {
expandedPaths.value = new Set(props.expanded)
}
}
watch(() => props.expanded, () => syncExpanded(), { immediate: true })
onMounted(() => syncExpanded())
</script>
<style scoped>
.tree-list {
list-style: none;
margin: 0;
padding: 0;
}
.tree-item-row {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
cursor: pointer;
border-radius: 4px;
user-select: none;
color: var(--text-secondary);
}
.tree-item-row:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.tree-icon {
flex-shrink: 0;
display: flex;
align-items: center;
opacity: 0.6;
}
.tree-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tree-list .tree-list {
padding-left: 16px;
}
</style>

23
frontend/nuxt.config.ts
View File

@@ -1,23 +0,0 @@
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',
]
}
}
})

10671
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
frontend/package.json
View File

@@ -1,20 +0,0 @@
{
"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"
}
}

BIN
frontend/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

2
frontend/public/robots.txt
View File

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

18
frontend/tsconfig.json
View File

@@ -1,18 +0,0 @@
{
// 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"
}
]
}

43
gitea/workflows/deploy.yml Normal file
View File

@@ -0,0 +1,43 @@
name: Deploy Vault
on:
push:
branches:
- master
jobs:
copy-into-repo:
runs-on: docker
env:
# URL of the repository to clone
TEMPLATE_REPO_URL: https://git.aranroig.com/Syndria98/dnd-vault-template.git
# Folder name inside the target repo where this repo's contents will be placed
TARGET_SUBFOLDER: my-repo-contents
steps:
- name: Checkout current repository
uses: actions/checkout@v3
with:
path: current-repo
- name: Clone target repository
run: |
git clone "$TEMPLATE_REPO_URL" target-repo
- name: Copy current repo contents into target subfolder
run: |
mkdir -p target-repo/$TARGET_SUBFOLDER
# Exclude the .git directory from the copy
rsync -av --exclude='.git' current-repo/ target-repo/$TARGET_SUBFOLDER/
- name: List result (dry run verification)
run: |
echo "=== Contents of target repo after copy ==="
find target-repo -not -path '*/.git/*' | sort
- name: Upload result as artifact
uses: actions/upload-artifact@v3
with:
name: target-repo-with-contents
path: target-repo/