New SiteContent.
This commit is contained in:
parent
02222a5c16
commit
7e7672d52b
5 changed files with 285 additions and 0 deletions
225
app/pages/admin/site-content.vue
Normal file
225
app/pages/admin/site-content.vue
Normal file
|
|
@ -0,0 +1,225 @@
|
||||||
|
<template>
|
||||||
|
<div class="admin-site-content">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Site Content</h1>
|
||||||
|
<p>Editable copy rendered on the public site. Leave fields blank to use defaults.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="pending" class="loading-state">Loading…</div>
|
||||||
|
<div v-else class="content-blocks">
|
||||||
|
<section v-for="entry in entries" :key="entry.key" class="content-block">
|
||||||
|
<div class="block-header">
|
||||||
|
<div>
|
||||||
|
<div class="block-key">{{ entry.key }}</div>
|
||||||
|
<div class="block-label">{{ KEY_LABELS[entry.key] || entry.key }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="entry.updatedAt" class="block-meta">
|
||||||
|
Updated {{ formatTime(entry.updatedAt) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label>Title</label>
|
||||||
|
<input v-model="entry.title" type="text" maxlength="300" >
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label>Body</label>
|
||||||
|
<textarea v-model="entry.body" rows="8" maxlength="5000" />
|
||||||
|
<p class="help-text">Paragraphs separated by blank lines. Plain text only.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="block-actions">
|
||||||
|
<button
|
||||||
|
class="btn btn-primary"
|
||||||
|
:disabled="entry.saving"
|
||||||
|
@click="save(entry)"
|
||||||
|
>
|
||||||
|
{{ entry.saving ? 'Saving…' : 'Save' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'admin',
|
||||||
|
middleware: 'admin',
|
||||||
|
})
|
||||||
|
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
const KEY_LABELS = {
|
||||||
|
'homepage.wiki_feature': 'Homepage: From the Wiki',
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data: keysData } = await useFetch('/api/site-content/keys')
|
||||||
|
const knownKeys = computed(() => keysData.value?.keys || [])
|
||||||
|
|
||||||
|
const entries = ref([])
|
||||||
|
const pending = ref(true)
|
||||||
|
|
||||||
|
const load = async () => {
|
||||||
|
pending.value = true
|
||||||
|
const results = await Promise.all(
|
||||||
|
knownKeys.value.map((key) => $fetch(`/api/site-content/${key}`))
|
||||||
|
)
|
||||||
|
entries.value = results.map((r) => ({
|
||||||
|
key: r.key,
|
||||||
|
title: r.title || '',
|
||||||
|
body: r.body || '',
|
||||||
|
updatedAt: r.updatedAt || null,
|
||||||
|
saving: false,
|
||||||
|
}))
|
||||||
|
pending.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
await load()
|
||||||
|
|
||||||
|
const save = async (entry) => {
|
||||||
|
entry.saving = true
|
||||||
|
try {
|
||||||
|
const updated = await $fetch(`/api/admin/site-content/${entry.key}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: { title: entry.title, body: entry.body },
|
||||||
|
})
|
||||||
|
entry.updatedAt = updated.updatedAt
|
||||||
|
toast.add({ title: 'Saved', color: 'green' })
|
||||||
|
} catch (err) {
|
||||||
|
toast.add({
|
||||||
|
title: 'Save failed',
|
||||||
|
description: err.data?.statusMessage || err.message,
|
||||||
|
color: 'red',
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
entry.saving = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = (iso) => {
|
||||||
|
if (!iso) return ''
|
||||||
|
const d = new Date(iso)
|
||||||
|
return d.toLocaleString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: 'numeric',
|
||||||
|
minute: '2-digit',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.admin-site-content {
|
||||||
|
padding: 24px;
|
||||||
|
max-width: 780px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px dashed var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header h1 {
|
||||||
|
font-family: 'Brygada 1918', serif;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header p {
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-state {
|
||||||
|
color: var(--text-faint);
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-blocks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-block {
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
padding: 20px;
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-key {
|
||||||
|
font-family: 'Commit Mono', monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-meta {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field label {
|
||||||
|
display: block;
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--text-dim);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input,
|
||||||
|
.field textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 10px;
|
||||||
|
background: var(--input-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field textarea {
|
||||||
|
resize: vertical;
|
||||||
|
font-family: 'Commit Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field input:focus,
|
||||||
|
.field textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--candle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-text {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
28
server/api/admin/site-content/[key].put.js
Normal file
28
server/api/admin/site-content/[key].put.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import SiteContent from '../../../models/siteContent.js'
|
||||||
|
import { requireAdmin } from '../../../utils/auth.js'
|
||||||
|
import { validateBody } from '../../../utils/validateBody.js'
|
||||||
|
import { SITE_CONTENT_KEYS, siteContentUpsertSchema } from '../../../utils/schemas.js'
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
await requireAdmin(event)
|
||||||
|
|
||||||
|
const key = getRouterParam(event, 'key')
|
||||||
|
if (!SITE_CONTENT_KEYS.includes(key)) {
|
||||||
|
throw createError({ statusCode: 404, statusMessage: 'Unknown content key' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const body = await validateBody(event, siteContentUpsertSchema)
|
||||||
|
|
||||||
|
const doc = await SiteContent.findOneAndUpdate(
|
||||||
|
{ key },
|
||||||
|
{ $set: { title: body.title || '', body: body.body || '' } },
|
||||||
|
{ upsert: true, new: true, runValidators: true }
|
||||||
|
).lean()
|
||||||
|
|
||||||
|
return {
|
||||||
|
key: doc.key,
|
||||||
|
title: doc.title || '',
|
||||||
|
body: doc.body || '',
|
||||||
|
updatedAt: doc.updatedAt || null
|
||||||
|
}
|
||||||
|
})
|
||||||
18
server/api/site-content/[key].get.js
Normal file
18
server/api/site-content/[key].get.js
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import SiteContent from '../../models/siteContent.js'
|
||||||
|
import { SITE_CONTENT_KEYS } from '../../utils/schemas.js'
|
||||||
|
|
||||||
|
export default defineEventHandler(async (event) => {
|
||||||
|
const key = getRouterParam(event, 'key')
|
||||||
|
|
||||||
|
if (!SITE_CONTENT_KEYS.includes(key)) {
|
||||||
|
throw createError({ statusCode: 404, statusMessage: 'Unknown content key' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const doc = await SiteContent.findOne({ key }).lean()
|
||||||
|
return {
|
||||||
|
key,
|
||||||
|
title: doc?.title || '',
|
||||||
|
body: doc?.body || '',
|
||||||
|
updatedAt: doc?.updatedAt || null
|
||||||
|
}
|
||||||
|
})
|
||||||
5
server/api/site-content/keys.get.js
Normal file
5
server/api/site-content/keys.get.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { SITE_CONTENT_KEYS } from '../../utils/schemas.js'
|
||||||
|
|
||||||
|
export default defineEventHandler(() => {
|
||||||
|
return { keys: [...SITE_CONTENT_KEYS] }
|
||||||
|
})
|
||||||
9
server/models/siteContent.js
Normal file
9
server/models/siteContent.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import mongoose from 'mongoose'
|
||||||
|
|
||||||
|
const siteContentSchema = new mongoose.Schema({
|
||||||
|
key: { type: String, required: true, unique: true, index: true },
|
||||||
|
title: { type: String, default: '' },
|
||||||
|
body: { type: String, default: '' },
|
||||||
|
}, { timestamps: true })
|
||||||
|
|
||||||
|
export default mongoose.models.SiteContent || mongoose.model('SiteContent', siteContentSchema)
|
||||||
Loading…
Add table
Add a link
Reference in a new issue