Release 0.3.0
This commit is contained in:
hnzio committed
1 parent
08e8875cb5
commit
7590be66a5
31 files changed
+3270
-151
No files matched your search
+611
-2
@@ -79,7 +79,8 @@ body {
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@@ -1291,7 +1292,9 @@ a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.secondary-button:disabled {
|
||||
.primary-button:disabled,
|
||||
.secondary-button:disabled,
|
||||
.text-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
@@ -1464,6 +1467,560 @@ a {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.editable-taxonomy span {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.editable-taxonomy form {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.editable-taxonomy button {
|
||||
display: grid;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.taxonomy-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.taxonomy-form label:first-of-type {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.taxonomy-form input:not([type='color']) {
|
||||
width: 100%;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.4rem 0.55rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.55rem;
|
||||
background: var(--panel-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.taxonomy-form input[type='color'] {
|
||||
width: 2.3rem;
|
||||
height: 2.25rem;
|
||||
padding: 0.2rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.55rem;
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.template-picker {
|
||||
margin-bottom: 0.85rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-medium);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.template-picker summary {
|
||||
padding: 0.75rem 0.9rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.template-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.6rem;
|
||||
padding: 0 0.75rem 0.75rem;
|
||||
}
|
||||
|
||||
.template-grid button {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 5rem;
|
||||
gap: 0.2rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-small);
|
||||
background: var(--panel-soft);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.template-grid button span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.library-filters {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(15rem, 1.5fr) repeat(4, minmax(7rem, 0.65fr)) auto auto;
|
||||
align-items: end;
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.library-filters > label:not(.search-field) {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.library-filters select {
|
||||
min-width: 0;
|
||||
height: 2.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.7rem;
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: var(--accent);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.piece-card {
|
||||
grid-template-columns: auto minmax(0, 1.65fr) minmax(8rem, 0.85fr) minmax(9rem, auto) auto;
|
||||
}
|
||||
|
||||
.piece-thumbnail {
|
||||
width: 3.8rem;
|
||||
height: 3.8rem;
|
||||
border-radius: 0.72rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.piece-thumbnail-placeholder {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text-faint);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.piece-primary h2 a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.piece-actions {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 0.22rem;
|
||||
}
|
||||
|
||||
.danger-text {
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.capture-panel {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.capture-panel h2,
|
||||
.inbox-list h2 {
|
||||
margin: 0.18rem 0 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.capture-form,
|
||||
.upload-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto;
|
||||
align-items: end;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.capture-form label,
|
||||
.upload-form label {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.capture-form label span {
|
||||
color: var(--text-faint);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.capture-form input,
|
||||
.upload-form input {
|
||||
width: 100%;
|
||||
min-height: 2.6rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-small);
|
||||
background: var(--panel-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.inbox-list {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.inbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.inbox-item > span:first-child {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.inbox-item small {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.archive-list {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.archive-list article {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-medium);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.archive-list h2 {
|
||||
margin: 0;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.archive-list p {
|
||||
margin: 0.15rem 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.editor-page {
|
||||
max-width: 82rem;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.editor-header h1 {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: clamp(1.5rem, 2.4vw, 2.2rem);
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.save-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.save-indicator i {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.save-indicator.problem,
|
||||
.editor-savebar .problem {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.save-indicator.problem i {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.piece-editor {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.editor-section {
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-large);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
margin: 0.15rem 0 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.section-title small {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.split-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.editor-fields,
|
||||
.markdown-grid {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.two-columns,
|
||||
.markdown-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.wide-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.editor-fields label,
|
||||
.markdown-grid > label,
|
||||
.source-row label {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.25rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.editor-fields input,
|
||||
.editor-fields select,
|
||||
.editor-fields textarea,
|
||||
.markdown-grid textarea,
|
||||
.source-row input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 0.55rem 0.65rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-small);
|
||||
background: var(--panel-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.editor-fields input,
|
||||
.editor-fields select,
|
||||
.source-row input {
|
||||
min-height: 2.6rem;
|
||||
}
|
||||
|
||||
.editor-fields textarea,
|
||||
.markdown-grid textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.taxonomy-editor fieldset {
|
||||
margin: 0 0 0.75rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.taxonomy-editor legend {
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.choice-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.choice-grid label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.38rem 0.55rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 2rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.choice-grid i {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: 50%;
|
||||
background: var(--choice-color);
|
||||
}
|
||||
|
||||
.private-field {
|
||||
padding: 0.65rem;
|
||||
border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line));
|
||||
border-radius: var(--radius-medium);
|
||||
background: color-mix(in srgb, var(--gold) 6%, var(--panel));
|
||||
}
|
||||
|
||||
.markdown-preview {
|
||||
min-height: 3.2rem;
|
||||
padding: 0.65rem;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: var(--radius-small);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.55;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.markdown-preview > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-preview > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-preview a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-preview pre {
|
||||
overflow-x: auto;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.4rem;
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.source-list {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.source-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8rem, 0.65fr) minmax(14rem, 1.5fr) minmax(8rem, 0.6fr) auto;
|
||||
align-items: end;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 0.55rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.editor-savebar {
|
||||
position: sticky;
|
||||
z-index: 5;
|
||||
bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 0.55rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-medium);
|
||||
background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.editor-savebar span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.media-editor {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.media-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.media-grid figure {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-medium);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.media-grid img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.media-grid figcaption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.4rem;
|
||||
padding: 0.45rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 72rem) {
|
||||
.library-filters {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.library-filters .search-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.piece-card {
|
||||
grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 0.7fr) auto;
|
||||
}
|
||||
.piece-state {
|
||||
grid-column: 2 / 4;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.source-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 72rem) {
|
||||
.page-wrap {
|
||||
padding-inline: 2rem;
|
||||
@@ -1575,6 +2132,44 @@ a {
|
||||
.page-heading h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.template-grid,
|
||||
.two-columns,
|
||||
.markdown-grid,
|
||||
.library-filters,
|
||||
.capture-form,
|
||||
.upload-form,
|
||||
.source-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.library-filters .search-field,
|
||||
.wide-field {
|
||||
grid-column: auto;
|
||||
}
|
||||
.editor-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.editor-section {
|
||||
padding: 0.85rem;
|
||||
border-radius: var(--radius-medium);
|
||||
}
|
||||
.editor-savebar {
|
||||
bottom: calc(var(--mobile-nav) + 0.6rem);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.split-section-title,
|
||||
.archive-list article {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
.editor-actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
.editor-actions form,
|
||||
.editor-actions button {
|
||||
width: 100%;
|
||||
}
|
||||
.show-heading,
|
||||
.live-header {
|
||||
align-items: flex-start;
|
||||
@@ -1613,6 +2208,13 @@ a {
|
||||
border-radius: var(--radius-medium);
|
||||
background: var(--panel);
|
||||
}
|
||||
.piece-thumbnail {
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
}
|
||||
.piece-thumbnail-placeholder {
|
||||
display: none;
|
||||
}
|
||||
.piece-card:last-child {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
@@ -1641,6 +2243,13 @@ a {
|
||||
.piece-facts {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.piece-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
.show-summary {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
let { html }: { html: string } = $props();
|
||||
</script>
|
||||
|
||||
<!-- html is produced exclusively by the allowlist sanitizer in $lib/server/markdown.ts. -->
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
||||
<div class="markdown-preview">{@html html}</div>
|
||||
@@ -0,0 +1,169 @@
|
||||
import { execFileSync } from 'node:child_process';
|
||||
import { existsSync, mkdtempSync, rmSync } from 'node:fs';
|
||||
import { tmpdir } from 'node:os';
|
||||
import path from 'node:path';
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
|
||||
import {
|
||||
createPiece,
|
||||
createTaxonomy,
|
||||
deletePieceImage,
|
||||
deleteTaxonomy,
|
||||
duplicatePiece,
|
||||
getMediaFile,
|
||||
getPiece,
|
||||
getTaxonomy,
|
||||
listPieces,
|
||||
savePiece,
|
||||
setPieceArchived,
|
||||
uploadPieceImage,
|
||||
type PieceInput
|
||||
} from './content.js';
|
||||
import { closeDatabase } from './database.js';
|
||||
import { renderMarkdown } from './markdown.js';
|
||||
|
||||
let directory: string;
|
||||
|
||||
beforeEach(() => {
|
||||
directory = mkdtempSync(path.join(tmpdir(), 'sendewerk-content-test-'));
|
||||
process.env.SENDEWERK_DB_PATH = path.join(directory, 'test.sqlite');
|
||||
process.env.SENDEWERK_UPLOAD_DIR = path.join(directory, 'uploads');
|
||||
execFileSync(process.execPath, ['scripts/migrate.mjs'], { cwd: process.cwd(), env: process.env });
|
||||
execFileSync(process.execPath, ['scripts/seed.mjs'], { cwd: process.cwd(), env: process.env });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
closeDatabase();
|
||||
delete process.env.SENDEWERK_DB_PATH;
|
||||
delete process.env.SENDEWERK_UPLOAD_DIR;
|
||||
rmSync(directory, { recursive: true, force: true });
|
||||
});
|
||||
|
||||
function completeInput(overrides: Partial<PieceInput> = {}): PieceInput {
|
||||
return {
|
||||
title: 'Getestetes Piece',
|
||||
summary: 'Eine persistente Kurzbeschreibung.',
|
||||
formatId: 'format-talk',
|
||||
status: 'ready',
|
||||
durationSeconds: 420,
|
||||
intro: '**Starker Einstieg**',
|
||||
researchText: 'Private Recherche',
|
||||
moderationNotes: '- Punkt eins',
|
||||
transitionText: 'Weiter geht es.',
|
||||
presentationText: '## Sichtbare Aussage',
|
||||
topicIds: ['topic-gaming', 'topic-internet'],
|
||||
categoryIds: ['cat-jc', 'cat-reaction'],
|
||||
sources: [
|
||||
{ label: 'Dokumentation', url: 'https://example.com/dokumentation', timecodeSeconds: 75 }
|
||||
],
|
||||
...overrides
|
||||
};
|
||||
}
|
||||
|
||||
describe('content management', () => {
|
||||
it('persists complete pieces and rejects stale revisions atomically', () => {
|
||||
const id = createPiece('talk');
|
||||
const initial = getPiece(id)!;
|
||||
const saved = savePiece(id, initial.revision, completeInput());
|
||||
const piece = getPiece(id)!;
|
||||
|
||||
expect(saved.revision).toBe(2);
|
||||
expect(piece).toMatchObject({
|
||||
title: 'Getestetes Piece',
|
||||
status: 'ready',
|
||||
researchText: 'Private Recherche',
|
||||
topicIds: ['topic-gaming', 'topic-internet'],
|
||||
categoryIds: ['cat-jc', 'cat-reaction']
|
||||
});
|
||||
expect(piece.sources).toEqual([
|
||||
{ label: 'Dokumentation', url: 'https://example.com/dokumentation', timecodeSeconds: 75 }
|
||||
]);
|
||||
expect(() =>
|
||||
savePiece(id, initial.revision, completeInput({ title: 'Veralteter Titel', topicIds: [] }))
|
||||
).toThrow('CONFLICT');
|
||||
expect(getPiece(id)).toMatchObject({
|
||||
title: 'Getestetes Piece',
|
||||
topicIds: ['topic-gaming', 'topic-internet']
|
||||
});
|
||||
});
|
||||
|
||||
it('searches independent taxonomies and archives, restores and duplicates pieces', async () => {
|
||||
createTaxonomy('topic', 'Technikgeschichte');
|
||||
const topic = getTaxonomy().topics.find((entry) => entry.name === 'Technikgeschichte')!;
|
||||
const sourceId = createPiece('find');
|
||||
const source = getPiece(sourceId)!;
|
||||
savePiece(
|
||||
sourceId,
|
||||
source.revision,
|
||||
completeInput({
|
||||
title: 'Seltene Hardware',
|
||||
formatId: 'format-find',
|
||||
topicIds: [topic.id],
|
||||
categoryIds: ['cat-reaction']
|
||||
})
|
||||
);
|
||||
|
||||
expect(
|
||||
listPieces({ statuses: ['ready'], query: 'dokumentation', topicId: topic.id })
|
||||
).toHaveLength(1);
|
||||
expect(listPieces({ statuses: ['ready'], query: '%' })).toHaveLength(0);
|
||||
expect(() => deleteTaxonomy('topic', topic.id)).toThrow('TAXONOMY_IN_USE');
|
||||
createTaxonomy('topic', 'Unbenutzt');
|
||||
const unused = getTaxonomy().topics.find((entry) => entry.name === 'Unbenutzt')!;
|
||||
deleteTaxonomy('topic', unused.id);
|
||||
expect(getTaxonomy().topics.some((entry) => entry.id === unused.id)).toBe(false);
|
||||
expect(() => deleteTaxonomy('format', 'format-find')).toThrow('TAXONOMY_IN_USE');
|
||||
const duplicateId = await duplicatePiece(sourceId);
|
||||
expect(getPiece(duplicateId)).toMatchObject({
|
||||
title: 'Kopie von Seltene Hardware',
|
||||
status: 'preparing',
|
||||
topicIds: [topic.id]
|
||||
});
|
||||
const current = getPiece(sourceId)!;
|
||||
setPieceArchived(sourceId, current.revision, true);
|
||||
expect(listPieces({ statuses: ['ready'] }).some((piece) => piece.id === sourceId)).toBe(false);
|
||||
const archived = listPieces({ statuses: ['archived'] }).find((piece) => piece.id === sourceId)!;
|
||||
setPieceArchived(sourceId, archived.revision, false);
|
||||
expect(getPiece(sourceId)?.status).toBe('ready');
|
||||
});
|
||||
|
||||
it('sanitizes dangerous markdown while preserving useful formatting', () => {
|
||||
const html = renderMarkdown(
|
||||
'# Verbotene Ebene\n\n**sicher** <script>globalThis.compromised = true</script> [Link](javascript:alert(1))'
|
||||
);
|
||||
expect(html).toContain('<strong>sicher</strong>');
|
||||
expect(html).not.toContain('<script');
|
||||
expect(html).not.toContain('javascript:');
|
||||
expect(html).not.toContain('<h1');
|
||||
});
|
||||
|
||||
it('accepts signed raster images, rejects disguised files and keeps storage private', async () => {
|
||||
const id = createPiece();
|
||||
const png = Buffer.from(
|
||||
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
|
||||
'base64'
|
||||
);
|
||||
await uploadPieceImage(
|
||||
id,
|
||||
1,
|
||||
new File([png], '../bild.png', { type: 'text/html' }),
|
||||
'Ein heller Pixel'
|
||||
);
|
||||
const piece = getPiece(id)!;
|
||||
expect(piece.media).toHaveLength(1);
|
||||
expect(piece.media[0]).toMatchObject({ mimeType: 'image/png', altText: 'Ein heller Pixel' });
|
||||
const media = await getMediaFile(piece.media[0].id);
|
||||
expect(media?.data.equals(png)).toBe(true);
|
||||
expect(existsSync(path.join(directory, 'uploads', '../bild.png'))).toBe(false);
|
||||
|
||||
await expect(
|
||||
uploadPieceImage(
|
||||
id,
|
||||
piece.revision,
|
||||
new File(['<script>alert(1)</script>'], 'angriff.png', { type: 'image/png' }),
|
||||
''
|
||||
)
|
||||
).rejects.toThrow('INVALID_IMAGE_TYPE');
|
||||
await deletePieceImage(id, piece.media[0].id, piece.revision);
|
||||
expect(getPiece(id)?.media).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,803 @@
|
||||
import { randomUUID } from 'node:crypto';
|
||||
import { copyFile, mkdir, readFile, rename, unlink, writeFile } from 'node:fs/promises';
|
||||
import path from 'node:path';
|
||||
import { fileTypeFromBuffer } from 'file-type';
|
||||
import { getDatabase } from './database.js';
|
||||
import { getServerPaths } from './config.js';
|
||||
|
||||
export const PIECE_STATUSES = ['inbox', 'preparing', 'ready', 'archived'] as const;
|
||||
export type PieceStatus = (typeof PIECE_STATUSES)[number];
|
||||
export type EditablePieceStatus = Exclude<PieceStatus, 'archived'>;
|
||||
export type TaxonomyKind = 'category' | 'format' | 'topic';
|
||||
|
||||
export type PieceSourceInput = {
|
||||
label: string;
|
||||
url: string;
|
||||
timecodeSeconds: number | null;
|
||||
};
|
||||
|
||||
export type PieceInput = {
|
||||
title: string;
|
||||
summary: string;
|
||||
formatId: string | null;
|
||||
status: EditablePieceStatus;
|
||||
durationSeconds: number;
|
||||
intro: string;
|
||||
researchText: string;
|
||||
moderationNotes: string;
|
||||
transitionText: string;
|
||||
presentationText: string;
|
||||
topicIds: string[];
|
||||
categoryIds: string[];
|
||||
sources: PieceSourceInput[];
|
||||
};
|
||||
|
||||
export type PieceListItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
status: PieceStatus;
|
||||
revision: number;
|
||||
durationSeconds: number;
|
||||
formatId: string | null;
|
||||
format: string;
|
||||
categories: { id: string; name: string; color: string }[];
|
||||
topics: { id: string; name: string }[];
|
||||
sourceCount: number;
|
||||
mediaId: string | null;
|
||||
};
|
||||
|
||||
export type PieceEditor = Omit<PieceInput, 'status'> & {
|
||||
id: string;
|
||||
status: PieceStatus;
|
||||
revision: number;
|
||||
createdAtUtc: string;
|
||||
updatedAtUtc: string;
|
||||
media: PieceMedia[];
|
||||
};
|
||||
|
||||
export type PieceMedia = {
|
||||
id: string;
|
||||
originalName: string;
|
||||
mimeType: string;
|
||||
byteSize: number;
|
||||
altText: string;
|
||||
position: number;
|
||||
};
|
||||
|
||||
export type Taxonomy = {
|
||||
categories: { id: string; name: string; color: string }[];
|
||||
formats: { id: string; name: string }[];
|
||||
topics: { id: string; name: string }[];
|
||||
};
|
||||
|
||||
export const pieceTemplates = [
|
||||
{
|
||||
id: 'blank',
|
||||
name: 'Leer starten',
|
||||
description: 'Ein freies Piece ohne Vorgaben.'
|
||||
},
|
||||
{
|
||||
id: 'talk',
|
||||
name: 'Gespräch',
|
||||
description: 'Leitfragen, Recherche und eine klare Überleitung.'
|
||||
},
|
||||
{
|
||||
id: 'find',
|
||||
name: 'Reaction / Fundstück',
|
||||
description: 'Quelle, Einordnung und präsentierbare Kernaussage.'
|
||||
},
|
||||
{
|
||||
id: 'interaction',
|
||||
name: 'Interaktion',
|
||||
description: 'Quiz, Publikumsfrage oder kleines Spiel.'
|
||||
}
|
||||
] as const;
|
||||
|
||||
export type PieceTemplateId = (typeof pieceTemplates)[number]['id'];
|
||||
|
||||
const MAX_UPLOAD_BYTES = 5 * 1024 * 1024;
|
||||
const ALLOWED_IMAGES = new Map([
|
||||
['image/jpeg', 'jpg'],
|
||||
['image/png', 'png'],
|
||||
['image/webp', 'webp'],
|
||||
['image/gif', 'gif']
|
||||
]);
|
||||
|
||||
function cleanText(value: unknown, max: number, field: string): string {
|
||||
const text = String(value ?? '').trim();
|
||||
if (text.length > max) throw new Error(`INVALID_${field.toUpperCase()}`);
|
||||
return text;
|
||||
}
|
||||
|
||||
function uniqueIds(values: string[]): string[] {
|
||||
return [...new Set(values.filter(Boolean))];
|
||||
}
|
||||
|
||||
function validUrl(value: string): boolean {
|
||||
try {
|
||||
const url = new URL(value);
|
||||
return url.protocol === 'http:' || url.protocol === 'https:';
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function requireTaxonomyIds(table: 'formats' | 'topics' | 'section_categories', ids: string[]) {
|
||||
if (!ids.length) return;
|
||||
const placeholders = ids.map(() => '?').join(', ');
|
||||
const count = getDatabase()
|
||||
.prepare(`SELECT count(*) AS count FROM ${table} WHERE id IN (${placeholders})`)
|
||||
.get(...ids) as { count: number };
|
||||
if (count.count !== ids.length) throw new Error('INVALID_TAXONOMY');
|
||||
}
|
||||
|
||||
function validatePieceInput(input: PieceInput): PieceInput {
|
||||
const title = cleanText(input.title, 200, 'title');
|
||||
if (!title) throw new Error('INVALID_TITLE');
|
||||
if (!['inbox', 'preparing', 'ready'].includes(input.status)) throw new Error('INVALID_STATUS');
|
||||
if (
|
||||
!Number.isInteger(input.durationSeconds) ||
|
||||
input.durationSeconds < 0 ||
|
||||
input.durationSeconds > 86_400
|
||||
) {
|
||||
throw new Error('INVALID_DURATION');
|
||||
}
|
||||
const topicIds = uniqueIds(input.topicIds);
|
||||
const categoryIds = uniqueIds(input.categoryIds);
|
||||
if (topicIds.length > 20 || categoryIds.length > 20) throw new Error('INVALID_TAXONOMY');
|
||||
if (input.formatId) requireTaxonomyIds('formats', [input.formatId]);
|
||||
requireTaxonomyIds('topics', topicIds);
|
||||
requireTaxonomyIds('section_categories', categoryIds);
|
||||
if (input.sources.length > 20) throw new Error('INVALID_SOURCES');
|
||||
const sources = input.sources.map((source) => {
|
||||
const label = cleanText(source.label, 200, 'source');
|
||||
const url = cleanText(source.url, 2_000, 'source');
|
||||
if (!label || !validUrl(url)) throw new Error('INVALID_SOURCES');
|
||||
if (
|
||||
source.timecodeSeconds !== null &&
|
||||
(!Number.isInteger(source.timecodeSeconds) ||
|
||||
source.timecodeSeconds < 0 ||
|
||||
source.timecodeSeconds > 86_400)
|
||||
) {
|
||||
throw new Error('INVALID_SOURCES');
|
||||
}
|
||||
return { label, url, timecodeSeconds: source.timecodeSeconds };
|
||||
});
|
||||
return {
|
||||
title,
|
||||
summary: cleanText(input.summary, 2_000, 'summary'),
|
||||
formatId: input.formatId || null,
|
||||
status: input.status,
|
||||
durationSeconds: input.durationSeconds,
|
||||
intro: cleanText(input.intro, 50_000, 'intro'),
|
||||
researchText: cleanText(input.researchText, 50_000, 'research'),
|
||||
moderationNotes: cleanText(input.moderationNotes, 50_000, 'moderation'),
|
||||
transitionText: cleanText(input.transitionText, 50_000, 'transition'),
|
||||
presentationText: cleanText(input.presentationText, 50_000, 'presentation'),
|
||||
topicIds,
|
||||
categoryIds,
|
||||
sources
|
||||
};
|
||||
}
|
||||
|
||||
export function getTaxonomy(): Taxonomy {
|
||||
const database = getDatabase();
|
||||
return {
|
||||
categories: database
|
||||
.prepare('SELECT id, name, color FROM section_categories ORDER BY sort_order, name')
|
||||
.all() as Taxonomy['categories'],
|
||||
formats: database
|
||||
.prepare('SELECT id, name FROM formats ORDER BY name')
|
||||
.all() as Taxonomy['formats'],
|
||||
topics: database
|
||||
.prepare('SELECT id, name FROM topics ORDER BY name')
|
||||
.all() as Taxonomy['topics']
|
||||
};
|
||||
}
|
||||
|
||||
type PieceListRow = {
|
||||
id: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
status: PieceStatus;
|
||||
revision: number;
|
||||
duration_seconds: number;
|
||||
format_id: string | null;
|
||||
format: string;
|
||||
source_count: number;
|
||||
media_id: string | null;
|
||||
};
|
||||
|
||||
export function listPieces(filters: {
|
||||
statuses: PieceStatus[];
|
||||
query?: string;
|
||||
formatId?: string;
|
||||
topicId?: string;
|
||||
categoryId?: string;
|
||||
}): PieceListItem[] {
|
||||
if (!filters.statuses.length) return [];
|
||||
const conditions = [`p.status IN (${filters.statuses.map(() => '?').join(', ')})`];
|
||||
const parameters: unknown[] = [...filters.statuses];
|
||||
const query = filters.query?.trim().toLowerCase();
|
||||
if (query) {
|
||||
const escapedQuery = query
|
||||
.replaceAll('\\', '\\\\')
|
||||
.replaceAll('%', '\\%')
|
||||
.replaceAll('_', '\\_');
|
||||
conditions.push(`(
|
||||
lower(p.title) LIKE ? ESCAPE '\\' OR lower(p.summary) LIKE ? ESCAPE '\\' OR
|
||||
EXISTS (SELECT 1 FROM piece_sources ps WHERE ps.piece_id = p.id AND (lower(ps.label) LIKE ? ESCAPE '\\' OR lower(ps.url) LIKE ? ESCAPE '\\')) OR
|
||||
EXISTS (SELECT 1 FROM piece_topics pt JOIN topics t ON t.id = pt.topic_id WHERE pt.piece_id = p.id AND lower(t.name) LIKE ? ESCAPE '\\')
|
||||
)`);
|
||||
parameters.push(...Array(5).fill(`%${escapedQuery}%`));
|
||||
}
|
||||
if (filters.formatId) {
|
||||
conditions.push('p.format_id = ?');
|
||||
parameters.push(filters.formatId);
|
||||
}
|
||||
if (filters.topicId) {
|
||||
conditions.push(
|
||||
'EXISTS (SELECT 1 FROM piece_topics pt WHERE pt.piece_id = p.id AND pt.topic_id = ?)'
|
||||
);
|
||||
parameters.push(filters.topicId);
|
||||
}
|
||||
if (filters.categoryId) {
|
||||
conditions.push(
|
||||
'EXISTS (SELECT 1 FROM piece_category_suggestions pc WHERE pc.piece_id = p.id AND pc.category_id = ?)'
|
||||
);
|
||||
parameters.push(filters.categoryId);
|
||||
}
|
||||
const database = getDatabase();
|
||||
const rows = database
|
||||
.prepare(
|
||||
`SELECT p.id, p.title, p.summary, p.status, p.revision, p.duration_seconds,
|
||||
p.format_id, COALESCE(f.name, 'Ohne Format') AS format,
|
||||
(SELECT count(*) FROM piece_sources ps WHERE ps.piece_id = p.id) AS source_count,
|
||||
(SELECT pm.id FROM piece_media pm WHERE pm.piece_id = p.id ORDER BY pm.position LIMIT 1) AS media_id
|
||||
FROM pieces p LEFT JOIN formats f ON f.id = p.format_id
|
||||
WHERE ${conditions.join(' AND ')}
|
||||
ORDER BY CASE p.status WHEN 'ready' THEN 0 WHEN 'preparing' THEN 1 WHEN 'inbox' THEN 2 ELSE 3 END,
|
||||
p.updated_at_utc DESC, p.title`
|
||||
)
|
||||
.all(...parameters) as PieceListRow[];
|
||||
const categoryStatement = database.prepare(
|
||||
`SELECT c.id, c.name, c.color FROM piece_category_suggestions pc
|
||||
JOIN section_categories c ON c.id = pc.category_id
|
||||
WHERE pc.piece_id = ? ORDER BY c.sort_order, c.name`
|
||||
);
|
||||
const topicStatement = database.prepare(
|
||||
`SELECT t.id, t.name FROM piece_topics pt JOIN topics t ON t.id = pt.topic_id
|
||||
WHERE pt.piece_id = ? ORDER BY t.name`
|
||||
);
|
||||
return rows.map((row) => ({
|
||||
id: row.id,
|
||||
title: row.title,
|
||||
summary: row.summary,
|
||||
status: row.status,
|
||||
revision: row.revision,
|
||||
durationSeconds: row.duration_seconds,
|
||||
formatId: row.format_id,
|
||||
format: row.format,
|
||||
categories: categoryStatement.all(row.id) as PieceListItem['categories'],
|
||||
topics: topicStatement.all(row.id) as PieceListItem['topics'],
|
||||
sourceCount: row.source_count,
|
||||
mediaId: row.media_id
|
||||
}));
|
||||
}
|
||||
|
||||
type PieceRow = {
|
||||
id: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
format_id: string | null;
|
||||
status: PieceStatus;
|
||||
duration_seconds: number;
|
||||
intro: string;
|
||||
research_text: string;
|
||||
moderation_notes: string;
|
||||
transition_text: string;
|
||||
presentation_text: string;
|
||||
revision: number;
|
||||
created_at_utc: string;
|
||||
updated_at_utc: string;
|
||||
};
|
||||
|
||||
export function getPiece(id: string): PieceEditor | null {
|
||||
const database = getDatabase();
|
||||
const row = database
|
||||
.prepare(
|
||||
`SELECT id, title, summary, format_id, status, duration_seconds, intro, research_text,
|
||||
moderation_notes, transition_text, presentation_text, revision, created_at_utc, updated_at_utc
|
||||
FROM pieces WHERE id = ?`
|
||||
)
|
||||
.get(id) as PieceRow | undefined;
|
||||
if (!row) return null;
|
||||
return {
|
||||
id: row.id,
|
||||
title: row.title,
|
||||
summary: row.summary,
|
||||
formatId: row.format_id,
|
||||
status: row.status,
|
||||
durationSeconds: row.duration_seconds,
|
||||
intro: row.intro,
|
||||
researchText: row.research_text,
|
||||
moderationNotes: row.moderation_notes,
|
||||
transitionText: row.transition_text,
|
||||
presentationText: row.presentation_text,
|
||||
revision: row.revision,
|
||||
createdAtUtc: row.created_at_utc,
|
||||
updatedAtUtc: row.updated_at_utc,
|
||||
topicIds: (
|
||||
database.prepare('SELECT topic_id FROM piece_topics WHERE piece_id = ?').all(id) as {
|
||||
topic_id: string;
|
||||
}[]
|
||||
).map((entry) => entry.topic_id),
|
||||
categoryIds: (
|
||||
database
|
||||
.prepare('SELECT category_id FROM piece_category_suggestions WHERE piece_id = ?')
|
||||
.all(id) as { category_id: string }[]
|
||||
).map((entry) => entry.category_id),
|
||||
sources: (
|
||||
database
|
||||
.prepare(
|
||||
'SELECT label, url, timecode_seconds FROM piece_sources WHERE piece_id = ? ORDER BY position'
|
||||
)
|
||||
.all(id) as { label: string; url: string; timecode_seconds: number | null }[]
|
||||
).map((source) => ({
|
||||
label: source.label,
|
||||
url: source.url,
|
||||
timecodeSeconds: source.timecode_seconds
|
||||
})),
|
||||
media: (
|
||||
database
|
||||
.prepare(
|
||||
`SELECT id, original_name, mime_type, byte_size, alt_text, position
|
||||
FROM piece_media WHERE piece_id = ? ORDER BY position`
|
||||
)
|
||||
.all(id) as {
|
||||
id: string;
|
||||
original_name: string;
|
||||
mime_type: string;
|
||||
byte_size: number;
|
||||
alt_text: string;
|
||||
position: number;
|
||||
}[]
|
||||
).map((media) => ({
|
||||
id: media.id,
|
||||
originalName: media.original_name,
|
||||
mimeType: media.mime_type,
|
||||
byteSize: media.byte_size,
|
||||
altText: media.alt_text,
|
||||
position: media.position
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
function replaceRelations(pieceId: string, input: PieceInput) {
|
||||
const database = getDatabase();
|
||||
database.prepare('DELETE FROM piece_topics WHERE piece_id = ?').run(pieceId);
|
||||
const addTopic = database.prepare('INSERT INTO piece_topics (piece_id, topic_id) VALUES (?, ?)');
|
||||
for (const id of input.topicIds) addTopic.run(pieceId, id);
|
||||
database.prepare('DELETE FROM piece_category_suggestions WHERE piece_id = ?').run(pieceId);
|
||||
const addCategory = database.prepare(
|
||||
'INSERT INTO piece_category_suggestions (piece_id, category_id) VALUES (?, ?)'
|
||||
);
|
||||
for (const id of input.categoryIds) addCategory.run(pieceId, id);
|
||||
database.prepare('DELETE FROM piece_sources WHERE piece_id = ?').run(pieceId);
|
||||
const addSource = database.prepare(
|
||||
`INSERT INTO piece_sources (id, piece_id, label, url, timecode_seconds, position)
|
||||
VALUES (?, ?, ?, ?, ?, ?)`
|
||||
);
|
||||
input.sources.forEach((source, position) =>
|
||||
addSource.run(randomUUID(), pieceId, source.label, source.url, source.timecodeSeconds, position)
|
||||
);
|
||||
}
|
||||
|
||||
export function savePiece(id: string, expectedRevision: number, rawInput: PieceInput) {
|
||||
if (!Number.isInteger(expectedRevision) || expectedRevision < 1)
|
||||
throw new Error('INVALID_REVISION');
|
||||
const input = validatePieceInput(rawInput);
|
||||
const database = getDatabase();
|
||||
const updatedAtUtc = new Date().toISOString();
|
||||
const save = database.transaction(() => {
|
||||
const result = database
|
||||
.prepare(
|
||||
`UPDATE pieces SET title = ?, summary = ?, format_id = ?, status = ?, duration_seconds = ?,
|
||||
intro = ?, research_text = ?, moderation_notes = ?, transition_text = ?, presentation_text = ?,
|
||||
updated_at_utc = ?, revision = revision + 1, archived_from_status = NULL
|
||||
WHERE id = ? AND revision = ? AND status != 'archived'`
|
||||
)
|
||||
.run(
|
||||
input.title,
|
||||
input.summary,
|
||||
input.formatId,
|
||||
input.status,
|
||||
input.durationSeconds,
|
||||
input.intro,
|
||||
input.researchText,
|
||||
input.moderationNotes,
|
||||
input.transitionText,
|
||||
input.presentationText,
|
||||
updatedAtUtc,
|
||||
id,
|
||||
expectedRevision
|
||||
);
|
||||
if (result.changes !== 1) {
|
||||
const exists = database.prepare('SELECT 1 FROM pieces WHERE id = ?').get(id);
|
||||
throw new Error(exists ? 'CONFLICT' : 'NOT_FOUND');
|
||||
}
|
||||
replaceRelations(id, input);
|
||||
});
|
||||
save();
|
||||
return { revision: expectedRevision + 1, updatedAtUtc };
|
||||
}
|
||||
|
||||
function templateDefaults(template: PieceTemplateId): Partial<PieceInput> & { title: string } {
|
||||
if (template === 'talk') {
|
||||
return {
|
||||
title: 'Unbenanntes Gespräch',
|
||||
formatId: 'format-talk',
|
||||
categoryIds: ['cat-jc'],
|
||||
moderationNotes: '## Leitfragen\n\n- '
|
||||
};
|
||||
}
|
||||
if (template === 'find') {
|
||||
return {
|
||||
title: 'Neues Fundstück',
|
||||
formatId: 'format-find',
|
||||
categoryIds: ['cat-reaction'],
|
||||
presentationText: '## Kernaussage\n\n'
|
||||
};
|
||||
}
|
||||
if (template === 'interaction') {
|
||||
return {
|
||||
title: 'Neue Interaktion',
|
||||
formatId: 'format-quiz',
|
||||
categoryIds: ['cat-game'],
|
||||
moderationNotes: '## Ablauf\n\n1. '
|
||||
};
|
||||
}
|
||||
return { title: 'Neues Piece' };
|
||||
}
|
||||
|
||||
export function createPiece(template: PieceTemplateId = 'blank'): string {
|
||||
if (!pieceTemplates.some((entry) => entry.id === template)) throw new Error('INVALID_TEMPLATE');
|
||||
const defaults = templateDefaults(template);
|
||||
const id = randomUUID();
|
||||
const now = new Date().toISOString();
|
||||
const input = validatePieceInput({
|
||||
title: defaults.title,
|
||||
summary: '',
|
||||
formatId: defaults.formatId ?? null,
|
||||
status: 'preparing',
|
||||
durationSeconds: 0,
|
||||
intro: '',
|
||||
researchText: '',
|
||||
moderationNotes: defaults.moderationNotes ?? '',
|
||||
transitionText: '',
|
||||
presentationText: defaults.presentationText ?? '',
|
||||
topicIds: [],
|
||||
categoryIds: defaults.categoryIds ?? [],
|
||||
sources: []
|
||||
});
|
||||
const database = getDatabase();
|
||||
database.transaction(() => {
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO pieces (id, title, summary, format_id, status, duration_seconds, intro,
|
||||
research_text, moderation_notes, transition_text, presentation_text, created_at_utc,
|
||||
updated_at_utc, revision) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)`
|
||||
)
|
||||
.run(
|
||||
id,
|
||||
input.title,
|
||||
input.summary,
|
||||
input.formatId,
|
||||
input.status,
|
||||
input.durationSeconds,
|
||||
input.intro,
|
||||
input.researchText,
|
||||
input.moderationNotes,
|
||||
input.transitionText,
|
||||
input.presentationText,
|
||||
now,
|
||||
now
|
||||
);
|
||||
replaceRelations(id, input);
|
||||
})();
|
||||
return id;
|
||||
}
|
||||
|
||||
export function captureInbox(titleValue: string, urlValue: string): string {
|
||||
const title = cleanText(titleValue, 200, 'title');
|
||||
if (!title) throw new Error('INVALID_TITLE');
|
||||
const url = cleanText(urlValue, 2_000, 'source');
|
||||
if (url && !validUrl(url)) throw new Error('INVALID_SOURCES');
|
||||
const id = createPiece('blank');
|
||||
const piece = getPiece(id)!;
|
||||
savePiece(id, piece.revision, {
|
||||
...piece,
|
||||
title,
|
||||
status: 'inbox',
|
||||
sources: url ? [{ label: 'Schnellaufnahme', url, timecodeSeconds: null }] : []
|
||||
});
|
||||
return id;
|
||||
}
|
||||
|
||||
export function setPieceArchived(id: string, expectedRevision: number, archived: boolean) {
|
||||
const database = getDatabase();
|
||||
const now = new Date().toISOString();
|
||||
const result = archived
|
||||
? database
|
||||
.prepare(
|
||||
`UPDATE pieces SET archived_from_status = status, status = 'archived', revision = revision + 1,
|
||||
updated_at_utc = ? WHERE id = ? AND revision = ? AND status != 'archived'`
|
||||
)
|
||||
.run(now, id, expectedRevision)
|
||||
: database
|
||||
.prepare(
|
||||
`UPDATE pieces SET status = COALESCE(archived_from_status, 'preparing'), archived_from_status = NULL,
|
||||
revision = revision + 1, updated_at_utc = ?
|
||||
WHERE id = ? AND revision = ? AND status = 'archived'`
|
||||
)
|
||||
.run(now, id, expectedRevision);
|
||||
if (result.changes !== 1) {
|
||||
const exists = database.prepare('SELECT 1 FROM pieces WHERE id = ?').get(id);
|
||||
throw new Error(exists ? 'CONFLICT' : 'NOT_FOUND');
|
||||
}
|
||||
}
|
||||
|
||||
export async function duplicatePiece(sourceId: string): Promise<string> {
|
||||
const source = getPiece(sourceId);
|
||||
if (!source) throw new Error('NOT_FOUND');
|
||||
const id = randomUUID();
|
||||
const now = new Date().toISOString();
|
||||
const uploadDirectory = getServerPaths().uploads;
|
||||
await mkdir(uploadDirectory, { recursive: true, mode: 0o700 });
|
||||
const database = getDatabase();
|
||||
const storedMedia = database
|
||||
.prepare('SELECT * FROM piece_media WHERE piece_id = ? ORDER BY position')
|
||||
.all(sourceId) as {
|
||||
id: string;
|
||||
storage_name: string;
|
||||
original_name: string;
|
||||
mime_type: string;
|
||||
byte_size: number;
|
||||
alt_text: string;
|
||||
position: number;
|
||||
}[];
|
||||
const copied: { source: (typeof storedMedia)[number]; storageName: string }[] = [];
|
||||
try {
|
||||
for (const media of storedMedia) {
|
||||
const extension = ALLOWED_IMAGES.get(media.mime_type)!;
|
||||
const storageName = `${randomUUID()}.${extension}`;
|
||||
await copyFile(
|
||||
path.join(uploadDirectory, media.storage_name),
|
||||
path.join(uploadDirectory, storageName)
|
||||
);
|
||||
copied.push({ source: media, storageName });
|
||||
}
|
||||
database.transaction(() => {
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO pieces (id, title, summary, format_id, status, duration_seconds, intro,
|
||||
research_text, moderation_notes, transition_text, presentation_text, created_at_utc,
|
||||
updated_at_utc, revision) VALUES (?, ?, ?, ?, 'preparing', ?, ?, ?, ?, ?, ?, ?, ?, 1)`
|
||||
)
|
||||
.run(
|
||||
id,
|
||||
`Kopie von ${source.title}`.slice(0, 200),
|
||||
source.summary,
|
||||
source.formatId,
|
||||
source.durationSeconds,
|
||||
source.intro,
|
||||
source.researchText,
|
||||
source.moderationNotes,
|
||||
source.transitionText,
|
||||
source.presentationText,
|
||||
now,
|
||||
now
|
||||
);
|
||||
replaceRelations(id, { ...source, status: 'preparing' });
|
||||
const addMedia = database.prepare(
|
||||
`INSERT INTO piece_media (id, piece_id, storage_name, original_name, mime_type,
|
||||
byte_size, alt_text, position, created_at_utc) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
|
||||
);
|
||||
for (const media of copied) {
|
||||
addMedia.run(
|
||||
randomUUID(),
|
||||
id,
|
||||
media.storageName,
|
||||
media.source.original_name,
|
||||
media.source.mime_type,
|
||||
media.source.byte_size,
|
||||
media.source.alt_text,
|
||||
media.source.position,
|
||||
now
|
||||
);
|
||||
}
|
||||
})();
|
||||
return id;
|
||||
} catch (error) {
|
||||
await Promise.all(
|
||||
copied.map((media) => unlink(path.join(uploadDirectory, media.storageName)).catch(() => {}))
|
||||
);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function uploadPieceImage(
|
||||
pieceId: string,
|
||||
expectedRevision: number,
|
||||
file: File,
|
||||
altTextValue: string
|
||||
) {
|
||||
if (!file.size || file.size > MAX_UPLOAD_BYTES) throw new Error('INVALID_IMAGE_SIZE');
|
||||
const buffer = Buffer.from(await file.arrayBuffer());
|
||||
const detected = await fileTypeFromBuffer(buffer);
|
||||
const extension = detected ? ALLOWED_IMAGES.get(detected.mime) : undefined;
|
||||
if (!detected || !extension) throw new Error('INVALID_IMAGE_TYPE');
|
||||
const altText = cleanText(altTextValue, 300, 'alt');
|
||||
const storageName = `${randomUUID()}.${extension}`;
|
||||
const uploadDirectory = getServerPaths().uploads;
|
||||
await mkdir(uploadDirectory, { recursive: true, mode: 0o700 });
|
||||
const filePath = path.join(uploadDirectory, storageName);
|
||||
await writeFile(filePath, buffer, { flag: 'wx', mode: 0o600 });
|
||||
const database = getDatabase();
|
||||
try {
|
||||
database.transaction(() => {
|
||||
const updated = database
|
||||
.prepare(
|
||||
`UPDATE pieces SET revision = revision + 1, updated_at_utc = ?
|
||||
WHERE id = ? AND revision = ? AND status != 'archived'`
|
||||
)
|
||||
.run(new Date().toISOString(), pieceId, expectedRevision);
|
||||
if (updated.changes !== 1) throw new Error('CONFLICT');
|
||||
const count = database
|
||||
.prepare('SELECT count(*) AS count FROM piece_media WHERE piece_id = ?')
|
||||
.get(pieceId) as { count: number };
|
||||
if (count.count >= 8) throw new Error('TOO_MANY_IMAGES');
|
||||
database
|
||||
.prepare(
|
||||
`INSERT INTO piece_media (id, piece_id, storage_name, original_name, mime_type,
|
||||
byte_size, alt_text, position, created_at_utc) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
|
||||
)
|
||||
.run(
|
||||
randomUUID(),
|
||||
pieceId,
|
||||
storageName,
|
||||
path.basename(file.name).slice(0, 200) || `bild.${extension}`,
|
||||
detected.mime,
|
||||
buffer.byteLength,
|
||||
altText,
|
||||
count.count,
|
||||
new Date().toISOString()
|
||||
);
|
||||
})();
|
||||
} catch (error) {
|
||||
await unlink(filePath).catch(() => {});
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function deletePieceImage(pieceId: string, mediaId: string, expectedRevision: number) {
|
||||
const database = getDatabase();
|
||||
const media = database
|
||||
.prepare('SELECT storage_name FROM piece_media WHERE id = ? AND piece_id = ?')
|
||||
.get(mediaId, pieceId) as { storage_name: string } | undefined;
|
||||
if (!media) throw new Error('NOT_FOUND');
|
||||
const originalPath = path.join(getServerPaths().uploads, media.storage_name);
|
||||
const quarantinePath = `${originalPath}.deleting-${randomUUID()}`;
|
||||
await rename(originalPath, quarantinePath);
|
||||
try {
|
||||
database.transaction(() => {
|
||||
const updated = database
|
||||
.prepare(
|
||||
`UPDATE pieces SET revision = revision + 1, updated_at_utc = ?
|
||||
WHERE id = ? AND revision = ? AND status != 'archived'`
|
||||
)
|
||||
.run(new Date().toISOString(), pieceId, expectedRevision);
|
||||
if (updated.changes !== 1) throw new Error('CONFLICT');
|
||||
database.prepare('DELETE FROM piece_media WHERE id = ?').run(mediaId);
|
||||
})();
|
||||
} catch (error) {
|
||||
await rename(quarantinePath, originalPath).catch((restoreError) => {
|
||||
console.error(
|
||||
'Bilddatei konnte nach fehlgeschlagener Löschung nicht wiederhergestellt werden.',
|
||||
restoreError
|
||||
);
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
try {
|
||||
await unlink(quarantinePath);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
'Gelöschte Bilddatei konnte nicht aus dem Quarantänepfad entfernt werden.',
|
||||
error
|
||||
);
|
||||
throw new Error('IMAGE_CLEANUP_FAILED', { cause: error });
|
||||
}
|
||||
}
|
||||
|
||||
export async function getMediaFile(id: string) {
|
||||
const row = getDatabase()
|
||||
.prepare('SELECT storage_name, mime_type, byte_size, alt_text FROM piece_media WHERE id = ?')
|
||||
.get(id) as
|
||||
{ storage_name: string; mime_type: string; byte_size: number; alt_text: string } | undefined;
|
||||
if (!row) return null;
|
||||
return {
|
||||
data: await readFile(path.join(getServerPaths().uploads, row.storage_name)),
|
||||
mimeType: row.mime_type,
|
||||
byteSize: row.byte_size,
|
||||
altText: row.alt_text
|
||||
};
|
||||
}
|
||||
|
||||
export function createTaxonomy(kind: TaxonomyKind, nameValue: string, colorValue?: string) {
|
||||
const name = cleanText(nameValue, 80, 'taxonomy');
|
||||
if (!name) throw new Error('INVALID_TAXONOMY');
|
||||
const database = getDatabase();
|
||||
const duplicate = database
|
||||
.prepare(
|
||||
`SELECT 1 FROM ${kind === 'category' ? 'section_categories' : kind === 'format' ? 'formats' : 'topics'}
|
||||
WHERE lower(name) = lower(?)`
|
||||
)
|
||||
.get(name);
|
||||
if (duplicate) throw new Error('TAXONOMY_EXISTS');
|
||||
const id = randomUUID();
|
||||
if (kind === 'category') {
|
||||
const color = String(colorValue ?? '');
|
||||
if (!/^#[0-9a-fA-F]{6}$/.test(color)) throw new Error('INVALID_COLOR');
|
||||
const order = database
|
||||
.prepare('SELECT COALESCE(max(sort_order), -1) + 1 AS next FROM section_categories')
|
||||
.get() as {
|
||||
next: number;
|
||||
};
|
||||
database
|
||||
.prepare('INSERT INTO section_categories (id, name, color, sort_order) VALUES (?, ?, ?, ?)')
|
||||
.run(id, name, color, order.next);
|
||||
} else {
|
||||
const table = kind === 'format' ? 'formats' : 'topics';
|
||||
database.prepare(`INSERT INTO ${table} (id, name) VALUES (?, ?)`).run(id, name);
|
||||
}
|
||||
}
|
||||
|
||||
export function deleteTaxonomy(kind: TaxonomyKind, id: string) {
|
||||
const table =
|
||||
kind === 'category' ? 'section_categories' : kind === 'format' ? 'formats' : 'topics';
|
||||
if (
|
||||
['format-talk', 'format-find', 'format-quiz', 'cat-jc', 'cat-reaction', 'cat-game'].includes(id)
|
||||
) {
|
||||
throw new Error('TAXONOMY_IN_USE');
|
||||
}
|
||||
const database = getDatabase();
|
||||
const usage =
|
||||
kind === 'format'
|
||||
? (
|
||||
database.prepare('SELECT count(*) AS count FROM pieces WHERE format_id = ?').get(id) as {
|
||||
count: number;
|
||||
}
|
||||
).count
|
||||
: kind === 'topic'
|
||||
? (
|
||||
database
|
||||
.prepare('SELECT count(*) AS count FROM piece_topics WHERE topic_id = ?')
|
||||
.get(id) as {
|
||||
count: number;
|
||||
}
|
||||
).count
|
||||
: (
|
||||
database
|
||||
.prepare(
|
||||
`SELECT
|
||||
(SELECT count(*) FROM piece_category_suggestions WHERE category_id = ?) +
|
||||
(SELECT count(*) FROM show_sections WHERE category_id = ?) AS count`
|
||||
)
|
||||
.get(id, id) as { count: number }
|
||||
).count;
|
||||
if (usage > 0) throw new Error('TAXONOMY_IN_USE');
|
||||
const result = database.prepare(`DELETE FROM ${table} WHERE id = ?`).run(id);
|
||||
if (result.changes !== 1) throw new Error('NOT_FOUND');
|
||||
}
|
||||
@@ -52,7 +52,7 @@ describe('database setup', () => {
|
||||
.get() as { migrations: number; pieces: number; shows: number; usages: number };
|
||||
database.close();
|
||||
|
||||
expect(counts).toEqual({ migrations: 2, pieces: 4, shows: 1, usages: 3 });
|
||||
expect(counts).toEqual({ migrations: 3, pieces: 6, shows: 1, usages: 3 });
|
||||
expect(databasePath).not.toBe(path.resolve('.data/sendewerk.sqlite'));
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { marked } from 'marked';
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
|
||||
export function renderMarkdown(markdown: string): string {
|
||||
const rendered = marked.parse(markdown, {
|
||||
async: false,
|
||||
breaks: true,
|
||||
gfm: true
|
||||
}) as string;
|
||||
return sanitizeHtml(rendered, {
|
||||
allowedTags: [
|
||||
'p',
|
||||
'br',
|
||||
'strong',
|
||||
'em',
|
||||
'del',
|
||||
'blockquote',
|
||||
'ul',
|
||||
'ol',
|
||||
'li',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'code',
|
||||
'pre',
|
||||
'a',
|
||||
'hr'
|
||||
],
|
||||
allowedAttributes: {
|
||||
a: ['href', 'title', 'target', 'rel']
|
||||
},
|
||||
allowedSchemes: ['http', 'https', 'mailto'],
|
||||
allowProtocolRelative: false,
|
||||
enforceHtmlBoundary: true,
|
||||
transformTags: {
|
||||
a: (_tagName, attributes) => ({
|
||||
tagName: 'a',
|
||||
attribs: { ...attributes, target: '_blank', rel: 'noopener noreferrer' }
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -85,7 +85,7 @@ export function getPieces(): PreviewPiece[] {
|
||||
(SELECT count(*) FROM piece_sources ps WHERE ps.piece_id = p.id) AS source_count
|
||||
FROM pieces p
|
||||
LEFT JOIN formats f ON f.id = p.format_id
|
||||
WHERE p.status != 'archived'
|
||||
WHERE p.status IN ('preparing', 'ready')
|
||||
ORDER BY CASE p.status WHEN 'ready' THEN 0 ELSE 1 END, p.title`
|
||||
)
|
||||
.all() as PieceRow[];
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { fail } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import { listPieces, setPieceArchived } from '#lib/server/content.js';
|
||||
|
||||
export const load: PageServerLoad = ({ locals }) => {
|
||||
requireUser(locals.user);
|
||||
return { pieces: listPieces({ statuses: ['archived'] }) };
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
restore: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
try {
|
||||
setPieceArchived(String(data.get('pieceId') || ''), Number(data.get('revision')), false);
|
||||
return { success: 'Piece wurde in seinen vorherigen Bereich zurückgelegt.' };
|
||||
} catch {
|
||||
return fail(409, { error: 'Das Piece wurde inzwischen geändert. Bitte Seite neu laden.' });
|
||||
}
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -1,13 +1,35 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
let { data, form }: PageProps = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Archiv | Sendewerk</title></svelte:head>
|
||||
|
||||
<div class="page-wrap narrow-page">
|
||||
<header class="page-heading">
|
||||
<h1>Archiv</h1>
|
||||
<p class="page-intro">Abgeschlossene Sendungen in ihrem damaligen Stand.</p>
|
||||
<p class="page-intro">Abgelegte Pieces; abgeschlossene Sendungen folgen in Etappe 6.</p>
|
||||
</header>
|
||||
<section class="quiet-panel planned-panel">
|
||||
<div class="planned-icon" aria-hidden="true">□</div>
|
||||
<h2>Noch keine Sendung archiviert</h2>
|
||||
<p>Abgeschlossene Sendungen werden hier später dauerhaft auffindbar.</p>
|
||||
</section>
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
{#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if}
|
||||
{#if data.pieces.length}<div class="archive-list">
|
||||
{#each data.pieces as piece (piece.id)}<article>
|
||||
<div>
|
||||
<h2>{piece.title}</h2>
|
||||
<p>{piece.summary || 'Keine Kurzbeschreibung.'}</p>
|
||||
</div>
|
||||
<form method="POST" action="?/restore">
|
||||
<input type="hidden" name="pieceId" value={piece.id} /><input
|
||||
type="hidden"
|
||||
name="revision"
|
||||
value={piece.revision}
|
||||
/><button class="secondary-button" type="submit">Wiederherstellen</button>
|
||||
</form>
|
||||
</article>{/each}
|
||||
</div>
|
||||
{:else}<section class="quiet-panel planned-panel">
|
||||
<div class="planned-icon" aria-hidden="true">□</div>
|
||||
<h2>Keine Pieces archiviert</h2>
|
||||
<p>Archivierte Inhalte lassen sich hier später wiederherstellen.</p>
|
||||
</section>{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
import { fail, redirect } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import { captureInbox, listPieces } from '#lib/server/content.js';
|
||||
|
||||
export const load: PageServerLoad = ({ locals }) => {
|
||||
requireUser(locals.user);
|
||||
return { pieces: listPieces({ statuses: ['inbox'] }) };
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
capture: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
try {
|
||||
const id = captureInbox(String(data.get('title') || ''), String(data.get('url') || ''));
|
||||
redirect(303, `/fundus/${id}`);
|
||||
} catch (cause) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
return fail(400, {
|
||||
title: String(data.get('title') || ''),
|
||||
url: String(data.get('url') || ''),
|
||||
error:
|
||||
code === 'INVALID_SOURCES'
|
||||
? 'Bitte eine vollständige HTTP- oder HTTPS-Adresse eingeben.'
|
||||
: 'Ein Titel ist erforderlich.'
|
||||
});
|
||||
}
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -1,13 +1,60 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import type { PageProps } from './$types';
|
||||
let { data, form }: PageProps = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Eingang | Sendewerk</title></svelte:head>
|
||||
|
||||
<div class="page-wrap narrow-page">
|
||||
<header class="page-heading">
|
||||
<h1>Eingang</h1>
|
||||
<p class="page-intro">Neue Gedanken und Fundstücke vor der Übernahme in den Fundus.</p>
|
||||
<p class="page-intro">Gedanken und Fundstücke schnell festhalten und später ausarbeiten.</p>
|
||||
</header>
|
||||
<section class="quiet-panel planned-panel">
|
||||
<div class="planned-icon" aria-hidden="true">＋</div>
|
||||
<h2>Keine neuen Inhalte</h2>
|
||||
<p>Hier erscheinen später neue Gedanken und ausgewählte Feed-Fundstücke.</p>
|
||||
<section class="quiet-panel capture-panel">
|
||||
<div>
|
||||
<p class="eyebrow">Schnellaufnahme</p>
|
||||
<h2>Was soll nicht verloren gehen?</h2>
|
||||
</div>
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
<form method="POST" action="?/capture" class="capture-form">
|
||||
<label
|
||||
>Titel oder Gedanke<input
|
||||
name="title"
|
||||
required
|
||||
maxlength="200"
|
||||
value={form?.title ?? ''}
|
||||
placeholder="Kurze Idee festhalten"
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Link <span>optional</span><input
|
||||
name="url"
|
||||
type="url"
|
||||
maxlength="2000"
|
||||
value={form?.url ?? ''}
|
||||
placeholder="https://…"
|
||||
/></label
|
||||
>
|
||||
<button class="primary-button" type="submit">Aufnehmen und öffnen</button>
|
||||
</form>
|
||||
</section>
|
||||
{#if data.pieces.length}
|
||||
<section class="inbox-list">
|
||||
<h2>{data.pieces.length} {data.pieces.length === 1 ? 'offener Inhalt' : 'offene Inhalte'}</h2>
|
||||
{#each data.pieces as piece (piece.id)}<a
|
||||
class="inbox-item"
|
||||
href={resolve('/fundus/[id]', { id: piece.id })}
|
||||
><span
|
||||
><strong>{piece.title}</strong><small
|
||||
>{piece.sourceCount ? `${piece.sourceCount} Quelle` : 'Gedanke ohne Link'}</small
|
||||
></span
|
||||
><span>Ausarbeiten →</span></a
|
||||
>{/each}
|
||||
</section>
|
||||
{:else}<section class="quiet-panel planned-panel">
|
||||
<div class="planned-icon" aria-hidden="true">＋</div>
|
||||
<h2>Eingang ist leer</h2>
|
||||
<p>Neue Gedanken und Links können oben direkt aufgenommen werden.</p>
|
||||
</section>{/if}
|
||||
</div>
|
||||
@@ -1,5 +1,82 @@
|
||||
import { getPieces } from '#lib/server/previews.js';
|
||||
import { fail, redirect } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import {
|
||||
createPiece,
|
||||
duplicatePiece,
|
||||
getTaxonomy,
|
||||
listPieces,
|
||||
pieceTemplates,
|
||||
setPieceArchived,
|
||||
type PieceTemplateId
|
||||
} from '#lib/server/content.js';
|
||||
|
||||
export function load() {
|
||||
return { pieces: getPieces() };
|
||||
export const load: PageServerLoad = ({ locals, url }) => {
|
||||
requireUser(locals.user);
|
||||
const filters = {
|
||||
query: url.searchParams.get('q') ?? '',
|
||||
formatId: url.searchParams.get('format') ?? '',
|
||||
topicId: url.searchParams.get('topic') ?? '',
|
||||
categoryId: url.searchParams.get('category') ?? '',
|
||||
status: url.searchParams.get('status') ?? ''
|
||||
};
|
||||
return {
|
||||
pieces: listPieces({
|
||||
statuses:
|
||||
filters.status === 'ready'
|
||||
? ['ready']
|
||||
: filters.status === 'preparing'
|
||||
? ['preparing']
|
||||
: ['preparing', 'ready'],
|
||||
query: filters.query,
|
||||
formatId: filters.formatId,
|
||||
topicId: filters.topicId,
|
||||
categoryId: filters.categoryId
|
||||
}),
|
||||
taxonomy: getTaxonomy(),
|
||||
templates: pieceTemplates,
|
||||
filters
|
||||
};
|
||||
};
|
||||
|
||||
function actionError(cause: unknown) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
if (code === 'CONFLICT') return 'Das Piece wurde inzwischen geändert. Bitte Seite neu laden.';
|
||||
if (code === 'NOT_FOUND') return 'Das Piece wurde nicht gefunden.';
|
||||
return 'Die Aktion konnte nicht ausgeführt werden.';
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
create: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
let id: string;
|
||||
try {
|
||||
id = createPiece(String(data.get('template') || 'blank') as PieceTemplateId);
|
||||
} catch (cause) {
|
||||
return fail(400, { intent: 'create', error: actionError(cause) });
|
||||
}
|
||||
redirect(303, `/fundus/${id}`);
|
||||
},
|
||||
duplicate: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
let id: string;
|
||||
try {
|
||||
id = await duplicatePiece(String(data.get('pieceId') || ''));
|
||||
} catch (cause) {
|
||||
return fail(400, { intent: 'duplicate', error: actionError(cause) });
|
||||
}
|
||||
redirect(303, `/fundus/${id}`);
|
||||
},
|
||||
archive: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
try {
|
||||
setPieceArchived(String(data.get('pieceId') || ''), Number(data.get('revision')), true);
|
||||
return { intent: 'archive', success: 'Piece archiviert.' };
|
||||
} catch (cause) {
|
||||
return fail(409, { intent: 'archive', error: actionError(cause) });
|
||||
}
|
||||
}
|
||||
} satisfies Actions;
|
||||
+108
-56
@@ -1,19 +1,9 @@
|
||||
<script lang="ts">
|
||||
import PreviewNotice from '#lib/components/PreviewNotice.svelte';
|
||||
import { resolve } from '$app/paths';
|
||||
import { formatClock } from '#lib/format.js';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
let query = $state('');
|
||||
let filter = $state<'all' | 'ready' | 'preparing'>('all');
|
||||
let filteredPieces = $derived(
|
||||
data.pieces.filter((piece) => {
|
||||
const text =
|
||||
`${piece.title} ${piece.summary} ${piece.format} ${piece.topics.join(' ')}`.toLowerCase();
|
||||
return text.includes(query.toLowerCase()) && (filter === 'all' || piece.status === filter);
|
||||
})
|
||||
);
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
const statusLabel = {
|
||||
ready: 'Sendefertig',
|
||||
preparing: 'In Vorbereitung',
|
||||
@@ -30,57 +20,125 @@
|
||||
<h1>Fundus</h1>
|
||||
<p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p>
|
||||
</div>
|
||||
<div class="heading-stat" aria-label={`${data.pieces.length} Inhalte im Beispieldatensatz`}>
|
||||
<div class="heading-stat" aria-label={`${data.pieces.length} gefundene Inhalte`}>
|
||||
<strong>{data.pieces.length}</strong><span>Inhalte</span>
|
||||
</div>
|
||||
</header>
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
{#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if}
|
||||
|
||||
<PreviewNotice area="Fundus" />
|
||||
|
||||
<section class="library-toolbar" aria-label="Fundus durchsuchen und filtern">
|
||||
<label class="search-field">
|
||||
<span aria-hidden="true">⌕</span>
|
||||
<span class="sr-only">Fundus durchsuchen</span>
|
||||
<input bind:value={query} type="search" placeholder="Titel, Thema oder Format suchen" />
|
||||
</label>
|
||||
<div class="filter-tabs" aria-label="Status filtern">
|
||||
<button class:active={filter === 'all'} type="button" onclick={() => (filter = 'all')}
|
||||
>Alle</button
|
||||
>
|
||||
<button class:active={filter === 'ready'} type="button" onclick={() => (filter = 'ready')}
|
||||
>Sendefertig</button
|
||||
>
|
||||
<button
|
||||
class:active={filter === 'preparing'}
|
||||
type="button"
|
||||
onclick={() => (filter = 'preparing')}>In Arbeit</button
|
||||
>
|
||||
<details class="template-picker">
|
||||
<summary>Neues Piece anlegen</summary>
|
||||
<div class="template-grid">
|
||||
{#each data.templates as template (template.id)}
|
||||
<form method="POST" action="?/create">
|
||||
<input type="hidden" name="template" value={template.id} />
|
||||
<button type="submit"
|
||||
><strong>{template.name}</strong><span>{template.description}</span></button
|
||||
>
|
||||
</form>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</details>
|
||||
|
||||
{#if filteredPieces.length > 0}
|
||||
<form class="library-filters" method="GET" aria-label="Fundus durchsuchen und filtern">
|
||||
<label class="search-field"
|
||||
><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
|
||||
name="q"
|
||||
type="search"
|
||||
value={data.filters.query}
|
||||
placeholder="Titel, Quelle oder Thema suchen"
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
><span>Status</span><select name="status"
|
||||
><option value="">Alle</option><option
|
||||
value="ready"
|
||||
selected={data.filters.status === 'ready'}>Sendefertig</option
|
||||
><option value="preparing" selected={data.filters.status === 'preparing'}>In Arbeit</option
|
||||
></select
|
||||
></label
|
||||
>
|
||||
<label
|
||||
><span>Format</span><select name="format"
|
||||
><option value="">Alle</option>{#each data.taxonomy.formats as item (item.id)}<option
|
||||
value={item.id}
|
||||
selected={data.filters.formatId === item.id}>{item.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<label
|
||||
><span>Thema</span><select name="topic"
|
||||
><option value="">Alle</option>{#each data.taxonomy.topics as item (item.id)}<option
|
||||
value={item.id}
|
||||
selected={data.filters.topicId === item.id}>{item.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<label
|
||||
><span>Abschnitt</span><select name="category"
|
||||
><option value="">Alle</option>{#each data.taxonomy.categories as item (item.id)}<option
|
||||
value={item.id}
|
||||
selected={data.filters.categoryId === item.id}>{item.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<button class="secondary-button" type="submit">Anwenden</button>
|
||||
<a class="text-link" href={resolve('/fundus')}>Zurücksetzen</a>
|
||||
</form>
|
||||
|
||||
{#if data.pieces.length}
|
||||
<div class="piece-grid">
|
||||
{#each filteredPieces as piece (piece.id)}
|
||||
<article class="piece-card" style={`--category: ${piece.categoryColor}`}>
|
||||
{#each data.pieces as piece (piece.id)}
|
||||
<article
|
||||
class="piece-card"
|
||||
style={`--category: ${piece.categories[0]?.color ?? '#8b8f98'}`}
|
||||
>
|
||||
{#if piece.mediaId}<img
|
||||
class="piece-thumbnail"
|
||||
src={`/media/${piece.mediaId}`}
|
||||
alt=""
|
||||
/>{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true"
|
||||
>S</span
|
||||
>{/if}
|
||||
<div class="piece-primary">
|
||||
<h2>{piece.title}</h2>
|
||||
<p>{piece.summary}</p>
|
||||
<h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2>
|
||||
<p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p>
|
||||
</div>
|
||||
<div class="piece-classification">
|
||||
<span class="category-label"><i></i>{piece.category}</span>
|
||||
<span class="category-label"
|
||||
><i></i>{piece.categories.map((item) => item.name).join(', ') || 'Offen'}</span
|
||||
>
|
||||
<div class="piece-tags">
|
||||
<span>{piece.format}</span>
|
||||
{#each piece.topics as topic (topic)}<span>{topic}</span>{/each}
|
||||
<span>{piece.format}</span>{#each piece.topics as topic (topic.id)}<span
|
||||
>{topic.name}</span
|
||||
>{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="piece-state">
|
||||
<span class:ready={piece.status === 'ready'} class="status-label"
|
||||
>{statusLabel[piece.status]}</span
|
||||
><span class="piece-facts"
|
||||
><span><b>{formatClock(piece.durationSeconds)}</b> geplant</span><span
|
||||
>{piece.sourceCount} {piece.sourceCount === 1 ? 'Quelle' : 'Quellen'}</span
|
||||
></span
|
||||
>
|
||||
<span class="piece-facts">
|
||||
<span><b>{formatClock(piece.durationSeconds)}</b> geplant</span>
|
||||
<span>{piece.sourceCount} {piece.sourceCount === 1 ? 'Quelle' : 'Quellen'}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="piece-actions">
|
||||
<a class="text-link" href={resolve('/fundus/[id]', { id: piece.id })}>Bearbeiten</a>
|
||||
<form method="POST" action="?/duplicate">
|
||||
<input type="hidden" name="pieceId" value={piece.id} /><button
|
||||
class="text-button"
|
||||
type="submit">Duplizieren</button
|
||||
>
|
||||
</form>
|
||||
<form method="POST" action="?/archive">
|
||||
<input type="hidden" name="pieceId" value={piece.id} /><input
|
||||
type="hidden"
|
||||
name="revision"
|
||||
value={piece.revision}
|
||||
/><button class="text-button danger-text" type="submit">Archivieren</button>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
@@ -88,15 +146,9 @@
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
<span aria-hidden="true">⌕</span>
|
||||
<h2>Kein passendes Stück</h2>
|
||||
<p>Suche oder Filter zurücksetzen, um wieder alle Beispieldaten zu sehen.</p>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
query = '';
|
||||
filter = 'all';
|
||||
}}>Filter zurücksetzen</button
|
||||
>
|
||||
<h2>Kein passendes Piece</h2>
|
||||
<p>Andere Filter wählen oder ein neues Piece anlegen.</p>
|
||||
<a class="secondary-button" href={resolve('/fundus')}>Filter zurücksetzen</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,171 @@
|
||||
import { error, fail, redirect } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import {
|
||||
deletePieceImage,
|
||||
duplicatePiece,
|
||||
getPiece,
|
||||
getTaxonomy,
|
||||
savePiece,
|
||||
setPieceArchived,
|
||||
uploadPieceImage,
|
||||
type EditablePieceStatus,
|
||||
type PieceInput,
|
||||
type PieceSourceInput
|
||||
} from '#lib/server/content.js';
|
||||
import { renderMarkdown } from '#lib/server/markdown.js';
|
||||
|
||||
function renderedFields(
|
||||
piece: Pick<
|
||||
PieceInput,
|
||||
'intro' | 'researchText' | 'moderationNotes' | 'transitionText' | 'presentationText'
|
||||
>
|
||||
) {
|
||||
return {
|
||||
intro: renderMarkdown(piece.intro),
|
||||
research: renderMarkdown(piece.researchText),
|
||||
moderation: renderMarkdown(piece.moderationNotes),
|
||||
transition: renderMarkdown(piece.transitionText),
|
||||
presentation: renderMarkdown(piece.presentationText)
|
||||
};
|
||||
}
|
||||
|
||||
function text(data: FormData, name: string) {
|
||||
return String(data.get(name) || '');
|
||||
}
|
||||
|
||||
function pieceInput(data: FormData): PieceInput {
|
||||
const labels = data.getAll('sourceLabel').map(String);
|
||||
const urls = data.getAll('sourceUrl').map(String);
|
||||
const timecodes = data.getAll('sourceTimecode').map(String);
|
||||
const sources: PieceSourceInput[] = [];
|
||||
for (let index = 0; index < Math.max(labels.length, urls.length, timecodes.length); index += 1) {
|
||||
const label = labels[index]?.trim() ?? '';
|
||||
const url = urls[index]?.trim() ?? '';
|
||||
const timecode = timecodes[index]?.trim() ?? '';
|
||||
if (!label && !url && !timecode) continue;
|
||||
sources.push({
|
||||
label,
|
||||
url,
|
||||
timecodeSeconds: timecode ? Number(timecode) : null
|
||||
});
|
||||
}
|
||||
return {
|
||||
title: text(data, 'title'),
|
||||
summary: text(data, 'summary'),
|
||||
formatId: text(data, 'formatId') || null,
|
||||
status: text(data, 'status') as EditablePieceStatus,
|
||||
durationSeconds: Number(data.get('durationSeconds')),
|
||||
intro: text(data, 'intro'),
|
||||
researchText: text(data, 'researchText'),
|
||||
moderationNotes: text(data, 'moderationNotes'),
|
||||
transitionText: text(data, 'transitionText'),
|
||||
presentationText: text(data, 'presentationText'),
|
||||
topicIds: data.getAll('topicIds').map(String),
|
||||
categoryIds: data.getAll('categoryIds').map(String),
|
||||
sources
|
||||
};
|
||||
}
|
||||
|
||||
function saveError(cause: unknown) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
if (code === 'CONFLICT')
|
||||
return {
|
||||
status: 409,
|
||||
error: 'Eine neuere Änderung liegt vor. Deine Eingaben wurden nicht überschrieben.',
|
||||
conflict: true
|
||||
};
|
||||
if (code === 'INVALID_TITLE') return { status: 400, error: 'Bitte einen Titel eingeben.' };
|
||||
if (code === 'INVALID_DURATION')
|
||||
return { status: 400, error: 'Die Dauer muss zwischen 0 und 86.400 Sekunden liegen.' };
|
||||
if (code === 'INVALID_SOURCES')
|
||||
return {
|
||||
status: 400,
|
||||
error: 'Quellen benötigen einen Namen und eine vollständige HTTP- oder HTTPS-Adresse.'
|
||||
};
|
||||
if (code.startsWith('INVALID_'))
|
||||
return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
|
||||
return {
|
||||
status: 500,
|
||||
error: 'Speichern fehlgeschlagen. Deine Eingaben bleiben im Formular erhalten.'
|
||||
};
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = ({ locals, params }) => {
|
||||
requireUser(locals.user);
|
||||
const piece = getPiece(params.id);
|
||||
if (!piece) error(404, 'Piece nicht gefunden');
|
||||
if (piece.status === 'archived') redirect(303, '/archiv');
|
||||
return { piece, taxonomy: getTaxonomy(), rendered: renderedFields(piece) };
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
save: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
const input = pieceInput(data);
|
||||
try {
|
||||
const saved = savePiece(params.id, Number(data.get('revision')), input);
|
||||
return { intent: 'save', saved: true, ...saved, rendered: renderedFields(input) };
|
||||
} catch (cause) {
|
||||
const problem = saveError(cause);
|
||||
return fail(problem.status, { intent: 'save', ...problem });
|
||||
}
|
||||
},
|
||||
upload: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
const image = data.get('image');
|
||||
if (!(image instanceof File))
|
||||
return fail(400, { intent: 'upload', error: 'Bitte ein Bild auswählen.' });
|
||||
try {
|
||||
await uploadPieceImage(params.id, Number(data.get('revision')), image, text(data, 'altText'));
|
||||
} catch (cause) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
if (code === 'CONFLICT')
|
||||
return fail(409, {
|
||||
intent: 'upload',
|
||||
error: 'Das Piece wurde inzwischen geändert. Bitte neu laden.'
|
||||
});
|
||||
if (code === 'INVALID_IMAGE_SIZE')
|
||||
return fail(400, {
|
||||
intent: 'upload',
|
||||
error: 'Das Bild darf höchstens 5 MB groß und nicht leer sein.'
|
||||
});
|
||||
if (code === 'INVALID_IMAGE_TYPE')
|
||||
return fail(400, { intent: 'upload', error: 'Erlaubt sind JPEG, PNG, WebP und GIF.' });
|
||||
return fail(400, { intent: 'upload', error: 'Bild konnte nicht gespeichert werden.' });
|
||||
}
|
||||
redirect(303, `/fundus/${params.id}`);
|
||||
},
|
||||
deleteImage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
try {
|
||||
await deletePieceImage(params.id, text(data, 'mediaId'), Number(data.get('revision')));
|
||||
} catch (cause) {
|
||||
return fail(409, { intent: 'deleteImage', error: saveError(cause).error });
|
||||
}
|
||||
redirect(303, `/fundus/${params.id}`);
|
||||
},
|
||||
duplicate: async ({ locals, params }) => {
|
||||
requireUser(locals.user);
|
||||
let id: string;
|
||||
try {
|
||||
id = await duplicatePiece(params.id);
|
||||
} catch {
|
||||
return fail(400, { intent: 'duplicate', error: 'Das Piece konnte nicht dupliziert werden.' });
|
||||
}
|
||||
redirect(303, `/fundus/${id}`);
|
||||
},
|
||||
archive: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
try {
|
||||
setPieceArchived(params.id, Number(data.get('revision')), true);
|
||||
} catch (cause) {
|
||||
return fail(409, { intent: 'archive', error: saveError(cause).error });
|
||||
}
|
||||
redirect(303, '/archiv');
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -0,0 +1,363 @@
|
||||
<script lang="ts">
|
||||
import { enhance, type SubmitFunction } from '$app/forms';
|
||||
import { beforeNavigate, goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
import { onDestroy, untrack } from 'svelte';
|
||||
import MarkdownPreview from '#lib/components/MarkdownPreview.svelte';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
let draft = $state(untrack(() => ({ ...data.piece })));
|
||||
let revision = $state(untrack(() => data.piece.revision));
|
||||
let sources = $state(untrack(() => data.piece.sources.map((source) => ({ ...source }))));
|
||||
let rendered = $state(untrack(() => ({ ...data.rendered })));
|
||||
let saveState = $state<'idle' | 'dirty' | 'saving' | 'saved' | 'error' | 'conflict'>('idle');
|
||||
let saveMessage = $state('Alle Änderungen gespeichert');
|
||||
let editorForm: HTMLFormElement;
|
||||
let saveButton: HTMLButtonElement;
|
||||
let timer: ReturnType<typeof setTimeout> | undefined;
|
||||
let generation = 0;
|
||||
let saving = $state(false);
|
||||
let actionsBlocked = $derived(
|
||||
saveState === 'dirty' ||
|
||||
saveState === 'saving' ||
|
||||
saveState === 'error' ||
|
||||
saveState === 'conflict'
|
||||
);
|
||||
let pendingHref: string | null = null;
|
||||
let allowNavigation = false;
|
||||
|
||||
onDestroy(() => clearTimeout(timer));
|
||||
beforeNavigate((navigation) => {
|
||||
if (allowNavigation) return;
|
||||
if (saveState === 'error' || saveState === 'conflict') {
|
||||
if (!confirm('Ungespeicherte Änderungen verwerfen und Seite verlassen?')) navigation.cancel();
|
||||
return;
|
||||
}
|
||||
if (saveState !== 'dirty' && saveState !== 'saving') return;
|
||||
navigation.cancel();
|
||||
if (navigation.willUnload) return;
|
||||
pendingHref = navigation.to?.url.href ?? null;
|
||||
if (!saving) submitSave();
|
||||
});
|
||||
|
||||
function scheduleSave() {
|
||||
generation += 1;
|
||||
saveState = 'dirty';
|
||||
saveMessage = 'Ungespeicherte Änderungen';
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(submitSave, 900);
|
||||
}
|
||||
|
||||
function submitSave() {
|
||||
if (saving) return;
|
||||
editorForm.requestSubmit(saveButton);
|
||||
}
|
||||
|
||||
function addSource() {
|
||||
sources.push({ label: '', url: '', timecodeSeconds: null });
|
||||
scheduleSave();
|
||||
}
|
||||
|
||||
function removeSource(index: number) {
|
||||
sources.splice(index, 1);
|
||||
scheduleSave();
|
||||
}
|
||||
|
||||
const enhanceSave: SubmitFunction = () => {
|
||||
const submittedGeneration = generation;
|
||||
saving = true;
|
||||
saveState = 'saving';
|
||||
saveMessage = 'Speichert …';
|
||||
return async ({ result }) => {
|
||||
saving = false;
|
||||
if (result.type === 'success') {
|
||||
const response = result.data as { revision: number; rendered: typeof rendered };
|
||||
revision = response.revision;
|
||||
rendered = response.rendered;
|
||||
if (generation === submittedGeneration) {
|
||||
saveState = 'saved';
|
||||
saveMessage = 'Gespeichert';
|
||||
if (pendingHref) {
|
||||
const target = pendingHref;
|
||||
pendingHref = null;
|
||||
allowNavigation = true;
|
||||
// The target comes from SvelteKit's own NavigationTarget, never from user input.
|
||||
// eslint-disable-next-line svelte/no-navigation-without-resolve
|
||||
await goto(new URL(target), { invalidateAll: true });
|
||||
}
|
||||
} else {
|
||||
saveState = 'dirty';
|
||||
saveMessage = 'Weitere Änderungen warten';
|
||||
timer = setTimeout(submitSave, 250);
|
||||
}
|
||||
} else if (result.type === 'failure') {
|
||||
const response = result.data as { error?: string; conflict?: boolean };
|
||||
saveState = response.conflict ? 'conflict' : 'error';
|
||||
saveMessage = response.error ?? 'Speichern fehlgeschlagen.';
|
||||
} else {
|
||||
saveState = 'error';
|
||||
saveMessage = 'Speichern fehlgeschlagen.';
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head><title>{draft.title} | Fundus | Sendewerk</title></svelte:head>
|
||||
|
||||
<div class="page-wrap editor-page">
|
||||
<header class="editor-header">
|
||||
<div>
|
||||
<a class="back-link" href={resolve('/fundus')}>← Fundus</a>
|
||||
<h1>{draft.title}</h1>
|
||||
</div>
|
||||
<div
|
||||
class:problem={saveState === 'error' || saveState === 'conflict'}
|
||||
class="save-indicator"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
<i></i><span>{saveMessage}</span>
|
||||
</div>
|
||||
</header>
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
|
||||
<form
|
||||
bind:this={editorForm}
|
||||
use:enhance={enhanceSave}
|
||||
method="POST"
|
||||
action="?/save"
|
||||
class="piece-editor"
|
||||
oninput={scheduleSave}
|
||||
onchange={scheduleSave}
|
||||
>
|
||||
<input type="hidden" name="revision" value={revision} />
|
||||
<section class="editor-section editor-basics">
|
||||
<div class="section-title">
|
||||
<p class="eyebrow">Grundlagen</p>
|
||||
<h2>Worum geht es?</h2>
|
||||
</div>
|
||||
<div class="editor-fields two-columns">
|
||||
<label class="wide-field"
|
||||
>Titel<input name="title" required maxlength="200" bind:value={draft.title} /></label
|
||||
>
|
||||
<label
|
||||
>Status<select name="status" bind:value={draft.status}
|
||||
><option value="inbox">Eingang</option><option value="preparing">In Vorbereitung</option
|
||||
><option value="ready">Sendefertig</option></select
|
||||
></label
|
||||
>
|
||||
<label
|
||||
>Format<select name="formatId" bind:value={draft.formatId}
|
||||
><option value={null}>Ohne Format</option
|
||||
>{#each data.taxonomy.formats as item (item.id)}<option value={item.id}
|
||||
>{item.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<label
|
||||
>Dauer in Sekunden<input
|
||||
name="durationSeconds"
|
||||
type="number"
|
||||
min="0"
|
||||
max="86400"
|
||||
step="1"
|
||||
bind:value={draft.durationSeconds}
|
||||
/></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
>Kurzbeschreibung<textarea
|
||||
name="summary"
|
||||
rows="2"
|
||||
maxlength="2000"
|
||||
bind:value={draft.summary}></textarea></label
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editor-section taxonomy-editor">
|
||||
<div class="section-title">
|
||||
<p class="eyebrow">Einordnung</p>
|
||||
<h2>Themen und Abschnitte</h2>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>Themen</legend>
|
||||
<div class="choice-grid">
|
||||
{#each data.taxonomy.topics as item (item.id)}<label
|
||||
><input
|
||||
type="checkbox"
|
||||
name="topicIds"
|
||||
value={item.id}
|
||||
bind:group={draft.topicIds}
|
||||
/>{item.name}</label
|
||||
>{/each}
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Vorgeschlagene Abschnittskategorien</legend>
|
||||
<div class="choice-grid">
|
||||
{#each data.taxonomy.categories as item (item.id)}<label
|
||||
><input
|
||||
type="checkbox"
|
||||
name="categoryIds"
|
||||
value={item.id}
|
||||
bind:group={draft.categoryIds}
|
||||
/><i style={`--choice-color:${item.color}`}></i>{item.name}</label
|
||||
>{/each}
|
||||
</div>
|
||||
</fieldset>
|
||||
</section>
|
||||
|
||||
<section class="editor-section markdown-section">
|
||||
<div class="section-title">
|
||||
<p class="eyebrow">Redaktion</p>
|
||||
<h2>Getrennte Arbeitsbereiche</h2>
|
||||
<small>Markdown wird unterstützt und vor der Anzeige bereinigt.</small>
|
||||
</div>
|
||||
<div class="markdown-grid">
|
||||
<label
|
||||
><span>Einleitung</span><textarea
|
||||
name="intro"
|
||||
rows="7"
|
||||
maxlength="50000"
|
||||
bind:value={draft.intro}></textarea>
|
||||
<MarkdownPreview html={rendered.intro} /></label
|
||||
>
|
||||
<label class="private-field"
|
||||
><span>Private Recherche</span><textarea
|
||||
name="researchText"
|
||||
rows="7"
|
||||
maxlength="50000"
|
||||
bind:value={draft.researchText}></textarea>
|
||||
<MarkdownPreview html={rendered.research} /></label
|
||||
>
|
||||
<label
|
||||
><span>Moderationsstichpunkte</span><textarea
|
||||
name="moderationNotes"
|
||||
rows="7"
|
||||
maxlength="50000"
|
||||
bind:value={draft.moderationNotes}></textarea>
|
||||
<MarkdownPreview html={rendered.moderation} /></label
|
||||
>
|
||||
<label
|
||||
><span>Überleitung</span><textarea
|
||||
name="transitionText"
|
||||
rows="7"
|
||||
maxlength="50000"
|
||||
bind:value={draft.transitionText}></textarea>
|
||||
<MarkdownPreview html={rendered.transition} /></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
><span>Präsentationstext</span><textarea
|
||||
name="presentationText"
|
||||
rows="7"
|
||||
maxlength="50000"
|
||||
bind:value={draft.presentationText}></textarea>
|
||||
<MarkdownPreview html={rendered.presentation} /></label
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editor-section source-editor">
|
||||
<div class="section-title split-section-title">
|
||||
<div>
|
||||
<p class="eyebrow">Belege</p>
|
||||
<h2>Quellen</h2>
|
||||
</div>
|
||||
<button class="secondary-button" type="button" onclick={addSource}>Quelle hinzufügen</button
|
||||
>
|
||||
</div>
|
||||
{#if sources.length}<div class="source-list">
|
||||
{#each sources as source, index (index)}<div class="source-row">
|
||||
<label
|
||||
>Name<input name="sourceLabel" maxlength="200" bind:value={source.label} /></label
|
||||
><label
|
||||
>URL<input
|
||||
name="sourceUrl"
|
||||
type="url"
|
||||
maxlength="2000"
|
||||
bind:value={source.url}
|
||||
/></label
|
||||
><label
|
||||
>Zeitmarke in Sekunden<input
|
||||
name="sourceTimecode"
|
||||
type="number"
|
||||
min="0"
|
||||
max="86400"
|
||||
bind:value={source.timecodeSeconds}
|
||||
/></label
|
||||
><button
|
||||
class="text-button danger-text"
|
||||
type="button"
|
||||
onclick={() => removeSource(index)}>Entfernen</button
|
||||
>
|
||||
</div>{/each}
|
||||
</div>{:else}<p class="quiet-copy">Noch keine Quellen hinterlegt.</p>{/if}
|
||||
</section>
|
||||
|
||||
<div class="editor-savebar">
|
||||
<span class:problem={saveState === 'error' || saveState === 'conflict'}>{saveMessage}</span
|
||||
><button bind:this={saveButton} class="primary-button" type="submit" disabled={saving}
|
||||
>Jetzt speichern</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section class="editor-section media-editor">
|
||||
<div class="section-title">
|
||||
<p class="eyebrow">Private Dateien</p>
|
||||
<h2>Bilder</h2>
|
||||
<small>JPEG, PNG, WebP oder GIF bis 5 MB; nur angemeldet abrufbar.</small>
|
||||
</div>
|
||||
{#if data.piece.media.length}<div class="media-grid">
|
||||
{#each data.piece.media as media (media.id)}<figure>
|
||||
<img src={`/media/${media.id}`} alt={media.altText} />
|
||||
<figcaption>
|
||||
<span>{media.altText || media.originalName}</span>
|
||||
<form method="POST" action="?/deleteImage">
|
||||
<input type="hidden" name="revision" value={revision} /><input
|
||||
type="hidden"
|
||||
name="mediaId"
|
||||
value={media.id}
|
||||
/><button class="text-button danger-text" type="submit" disabled={actionsBlocked}
|
||||
>Entfernen</button
|
||||
>
|
||||
</form>
|
||||
</figcaption>
|
||||
</figure>{/each}
|
||||
</div>{/if}
|
||||
<form method="POST" action="?/upload" enctype="multipart/form-data" class="upload-form">
|
||||
<input type="hidden" name="revision" value={revision} /><label
|
||||
>Bild<input
|
||||
name="image"
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,image/gif"
|
||||
required
|
||||
/></label
|
||||
><label
|
||||
>Alternativtext<input
|
||||
name="altText"
|
||||
maxlength="300"
|
||||
placeholder="Was ist auf dem Bild zu sehen?"
|
||||
/></label
|
||||
><button class="secondary-button" type="submit" disabled={actionsBlocked}
|
||||
>Bild hochladen</button
|
||||
>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="editor-actions">
|
||||
<form method="POST" action="?/duplicate">
|
||||
<button class="secondary-button" type="submit" disabled={actionsBlocked}
|
||||
>Piece duplizieren</button
|
||||
>
|
||||
</form>
|
||||
<form method="POST" action="?/archive">
|
||||
<input type="hidden" name="revision" value={revision} /><button
|
||||
class="secondary-button danger-text"
|
||||
type="submit"
|
||||
disabled={actionsBlocked}>Piece archivieren</button
|
||||
>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import { getMediaFile } from '#lib/server/content.js';
|
||||
|
||||
export const GET: RequestHandler = async ({ locals, params }) => {
|
||||
requireUser(locals.user);
|
||||
const media = await getMediaFile(params.id);
|
||||
if (!media) error(404, 'Bild nicht gefunden');
|
||||
return new Response(media.data, {
|
||||
headers: {
|
||||
'Content-Type': media.mimeType,
|
||||
'Content-Length': String(media.byteSize),
|
||||
'Cache-Control': 'private, no-store',
|
||||
'Content-Security-Policy': "default-src 'none'; sandbox",
|
||||
'Cross-Origin-Resource-Policy': 'same-origin',
|
||||
'X-Content-Type-Options': 'nosniff'
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -1,6 +1,11 @@
|
||||
import { fail } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { getTaxonomy } from '#lib/server/previews.js';
|
||||
import {
|
||||
createTaxonomy,
|
||||
deleteTaxonomy,
|
||||
getTaxonomy,
|
||||
type TaxonomyKind
|
||||
} from '#lib/server/content.js';
|
||||
import { getMailConfig } from '#lib/server/config.js';
|
||||
import {
|
||||
inviteUser,
|
||||
@@ -29,7 +34,12 @@ function actionError(cause: unknown): string {
|
||||
if (code === 'USER_EXISTS') return 'Für diese E-Mail existiert bereits ein Konto.';
|
||||
if (code === 'SELF_LOCK') return 'Das eigene Konto kann nicht gesperrt werden.';
|
||||
if (code === 'LAST_BARKEEPER') return 'Mindestens ein aktiver Barkeeper muss erhalten bleiben.';
|
||||
if (code === 'NOT_FOUND') return 'Das Konto wurde nicht gefunden.';
|
||||
if (code === 'NOT_FOUND') return 'Der Eintrag wurde nicht gefunden.';
|
||||
if (code === 'TAXONOMY_EXISTS') return 'Dieser Name ist bereits vorhanden.';
|
||||
if (code === 'TAXONOMY_IN_USE')
|
||||
return 'Verwendete oder für Vorlagen benötigte Einträge können nicht entfernt werden.';
|
||||
if (code === 'INVALID_COLOR') return 'Bitte eine gültige Farbe wählen.';
|
||||
if (code === 'INVALID_TAXONOMY') return 'Bitte einen gültigen Namen eingeben.';
|
||||
return 'Die Aktion konnte nicht ausgeführt werden.';
|
||||
}
|
||||
|
||||
@@ -93,5 +103,33 @@ export const actions = {
|
||||
const data = await request.formData();
|
||||
revokeInvitation(actor, String(data.get('invitationId') || ''));
|
||||
return { intent: 'revokeInvitation', success: 'Einladung widerrufen.' };
|
||||
},
|
||||
createTaxonomy: async ({ locals, request }) => {
|
||||
requireBarkeeper(locals.user);
|
||||
const data = await request.formData();
|
||||
const kind = String(data.get('kind') || '') as TaxonomyKind;
|
||||
if (!['category', 'format', 'topic'].includes(kind)) {
|
||||
return fail(400, { intent: 'taxonomy', error: 'Ungültige Taxonomieart.' });
|
||||
}
|
||||
try {
|
||||
createTaxonomy(kind, String(data.get('name') || ''), String(data.get('color') || ''));
|
||||
return { intent: 'taxonomy', success: 'Eintrag angelegt.' };
|
||||
} catch (cause) {
|
||||
return fail(400, { intent: 'taxonomy', error: actionError(cause) });
|
||||
}
|
||||
},
|
||||
deleteTaxonomy: async ({ locals, request }) => {
|
||||
requireBarkeeper(locals.user);
|
||||
const data = await request.formData();
|
||||
const kind = String(data.get('kind') || '') as TaxonomyKind;
|
||||
if (!['category', 'format', 'topic'].includes(kind)) {
|
||||
return fail(400, { intent: 'taxonomy', error: 'Ungültige Taxonomieart.' });
|
||||
}
|
||||
try {
|
||||
deleteTaxonomy(kind, String(data.get('taxonomyId') || ''));
|
||||
return { intent: 'taxonomy', success: 'Eintrag entfernt.' };
|
||||
} catch (cause) {
|
||||
return fail(400, { intent: 'taxonomy', error: actionError(cause) });
|
||||
}
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -1,6 +1,10 @@
|
||||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
let { data, form }: PageProps = $props();
|
||||
|
||||
function confirmTaxonomyRemoval(event: SubmitEvent) {
|
||||
if (!confirm('Eintrag wirklich entfernen?')) event.preventDefault();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Verwaltung | Sendewerk</title></svelte:head>
|
||||
@@ -114,25 +118,86 @@
|
||||
<section class="quiet-panel taxonomy-panel">
|
||||
<p class="eyebrow">Abschnittskategorien</p>
|
||||
<h2>Struktur im Ablauf</h2>
|
||||
<div class="taxonomy-list">
|
||||
<div class="taxonomy-list editable-taxonomy">
|
||||
{#each data.taxonomy.categories as category (category.id)}<span
|
||||
><i style={`--tax-color: ${category.color}`}></i>{category.name}</span
|
||||
><i style={`--tax-color: ${category.color}`}></i>{category.name}
|
||||
<form method="POST" action="?/deleteTaxonomy" onsubmit={confirmTaxonomyRemoval}>
|
||||
<input type="hidden" name="kind" value="category" /><input
|
||||
type="hidden"
|
||||
name="taxonomyId"
|
||||
value={category.id}
|
||||
/><button type="submit" aria-label={`${category.name} entfernen`}>×</button>
|
||||
</form></span
|
||||
>{/each}
|
||||
</div>
|
||||
<form class="taxonomy-form" method="POST" action="?/createTaxonomy">
|
||||
<input type="hidden" name="kind" value="category" /><label
|
||||
><span class="sr-only">Neue Abschnittskategorie</span><input
|
||||
name="name"
|
||||
required
|
||||
maxlength="80"
|
||||
placeholder="Neue Kategorie"
|
||||
/></label
|
||||
><label class="color-field"
|
||||
><span class="sr-only">Farbe</span><input
|
||||
name="color"
|
||||
type="color"
|
||||
value="#67DDE8"
|
||||
/></label
|
||||
><button class="text-button" type="submit">Hinzufügen</button>
|
||||
</form>
|
||||
</section>
|
||||
<section class="quiet-panel taxonomy-panel">
|
||||
<p class="eyebrow">Formate</p>
|
||||
<h2>Form des Stücks</h2>
|
||||
<div class="taxonomy-list">
|
||||
{#each data.taxonomy.formats as format (format.id)}<span>{format.name}</span>{/each}
|
||||
<div class="taxonomy-list editable-taxonomy">
|
||||
{#each data.taxonomy.formats as format (format.id)}<span
|
||||
>{format.name}
|
||||
<form method="POST" action="?/deleteTaxonomy" onsubmit={confirmTaxonomyRemoval}>
|
||||
<input type="hidden" name="kind" value="format" /><input
|
||||
type="hidden"
|
||||
name="taxonomyId"
|
||||
value={format.id}
|
||||
/><button type="submit" aria-label={`${format.name} entfernen`}>×</button>
|
||||
</form></span
|
||||
>{/each}
|
||||
</div>
|
||||
<form class="taxonomy-form" method="POST" action="?/createTaxonomy">
|
||||
<input type="hidden" name="kind" value="format" /><label
|
||||
><span class="sr-only">Neues Format</span><input
|
||||
name="name"
|
||||
required
|
||||
maxlength="80"
|
||||
placeholder="Neues Format"
|
||||
/></label
|
||||
><button class="text-button" type="submit">Hinzufügen</button>
|
||||
</form>
|
||||
</section>
|
||||
<section class="quiet-panel taxonomy-panel">
|
||||
<p class="eyebrow">Themen</p>
|
||||
<h2>Inhaltliche Zuordnung</h2>
|
||||
<div class="taxonomy-list">
|
||||
{#each data.taxonomy.topics as topic (topic.id)}<span>{topic.name}</span>{/each}
|
||||
<div class="taxonomy-list editable-taxonomy">
|
||||
{#each data.taxonomy.topics as topic (topic.id)}<span
|
||||
>{topic.name}
|
||||
<form method="POST" action="?/deleteTaxonomy" onsubmit={confirmTaxonomyRemoval}>
|
||||
<input type="hidden" name="kind" value="topic" /><input
|
||||
type="hidden"
|
||||
name="taxonomyId"
|
||||
value={topic.id}
|
||||
/><button type="submit" aria-label={`${topic.name} entfernen`}>×</button>
|
||||
</form></span
|
||||
>{/each}
|
||||
</div>
|
||||
<form class="taxonomy-form" method="POST" action="?/createTaxonomy">
|
||||
<input type="hidden" name="kind" value="topic" /><label
|
||||
><span class="sr-only">Neues Thema</span><input
|
||||
name="name"
|
||||
required
|
||||
maxlength="80"
|
||||
placeholder="Neues Thema"
|
||||
/></label
|
||||
><button class="text-button" type="submit">Hinzufügen</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user