robin/kontextwerk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zwischenstand

Browse Source
This commit is contained in:
Robin Grenzdörfer
2025-10-02 09:03:39 +00:00
parent 099530b7c8
commit f3dc0dc9bd
52 changed files with 994 additions and 5602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
frontend/src/routes/Content.svelte
View File

@@ -1,62 +1,110 @@
<script lang="ts">
import { getCachedEntry } from "../api"
import NotFound from "./NotFound.svelte"
import Breadcrumbs from "../lib/components/pagebuilder/Breadcrumbs.svelte"
import ContentBlock from "../lib/components/pagebuilder/ContentBlock.svelte"
import Loader from "../lib/components/pagebuilder/Loader.svelte"
import Index from "../lib/components/pagebuilder/SEO/Index.svelte"
export let location: LocationStore = undefined,
id: string = undefined
export let location: LocationStore | undefined
export let id: string | undefined
let loading = true
let contentEntry: ContentEntry
async function loadContent() {
let contentEntry: ContentEntry | null = null
let errorMessage = ""
const loadContent = async () => {
loading = true
errorMessage = ""
contentEntry = null
try {
contentEntry = await getCachedEntry(
"content",
location ? { $or: [{ path: location.path }, { "alternativePaths.path": location.path }] } : { _id: id }
)
} catch (e) {
console.error(e)
if (id) {
contentEntry = await getCachedEntry("content", { _id: id })
} else if (location?.path) {
contentEntry = await getCachedEntry("content", {
$or: [{ path: location.path }, { "alternativePaths.path": location.path }],
})
}
} catch (error) {
console.error("Failed to load content", error)
errorMessage = "Beim Laden der Inhalte ist ein Fehler aufgetreten."
} finally {
loading = false
}
loading = false
}
// only load new content if location.path or id changes
let _location: typeof location
let _id: typeof id
$: if (location?.path != _location?.path || id != _id) {
_id = id
_location = location
$: if (location?.path || id) {
loadContent()
}
$: breadCrumbPosition = contentEntry?.blocks?.length && contentEntry.blocks[0].type?.startsWith("hero") ? 1 : 0
</script>
{#if loading}
<Loader size="3" />
<section class="content-loading">
<p>Inhalt wird geladen …</p>
</section>
{:else if errorMessage}
<section class="content-error">
<p>{errorMessage}</p>
</section>
{:else if contentEntry}
<Index
createdAt={new Date(contentEntry.insertTime)}
updatedAt={new Date(contentEntry.updateTime)}
metaDescription={contentEntry.meta?.description}
title={contentEntry.meta?.title}
keywords={contentEntry.meta?.keywords}
article={contentEntry.meta.isArticle}
active={contentEntry.active}
FAQ={contentEntry.meta.hasFAQ}
FAQDetails={contentEntry.meta.FAQ}
/>
{#each contentEntry.blocks || [] as block, idx}
{#if idx === breadCrumbPosition}
<Breadcrumbs location={location} />
<article class="content-article">
<header>
<h1>{contentEntry.meta?.title ?? contentEntry.name}</h1>
{#if contentEntry.meta?.description}
<p class="lead">{contentEntry.meta.description}</p>
{/if}
</header>
{#if contentEntry.blocks?.length}
<section class="content-debug">
<h2>Struktur</h2>
<pre>{JSON.stringify(contentEntry.blocks, null, 2)}</pre>
</section>
{:else}
<p>Für diesen Inhalt sind noch keine Bausteine definiert.</p>
{/if}
<ContentBlock block={block} />
{/each}
</article>
{:else}
<NotFound />
{/if}
<style lang="less">
.content-loading,
.content-error,
.content-article {
max-width: 920px;
margin: 4rem auto;
padding: 0 1.5rem;
}
.content-article {
display: flex;
flex-direction: column;
gap: 2rem;
header {
display: flex;
flex-direction: column;
gap: 0.8rem;
h1 {
font-size: clamp(2.2rem, 4vw, 3.2rem);
margin: 0;
}
.lead {
font-size: 1.1rem;
color: rgba(0, 0, 0, 0.7);
}
}
.content-debug {
background: rgba(0, 0, 0, 0.04);
border-radius: 12px;
padding: 1.5rem;
pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
}
}
</style>

75
frontend/src/routes/NotFound.svelte
View File

@@ -1,69 +1,22 @@
<script>
import Index from "../lib/components/pagebuilder/SEO/Index.svelte"
// set 404 for ssr
if (typeof window === "undefined") {
// @ts-ignore
if (context) context.is404 = true
}
export let disableIndex = false
</script>
{#if disableIndex}
<Index
title="404 - Nicht Gefunden"
metaDescription="Die Seite konnte nicht gefunden werden."
keywords="404, Nicht Gefunden, Seite"
/>
{/if}
<div class="not-found">
<div class="content">
<h1>404</h1>
<h2>Nicht Gefunden</h2>
<p></p>
<a
href="/"
class="back-home">Zurück</a
>
</div>
</div>
<section class="not-found">
<h1>Seite nicht gefunden</h1>
<p>Der angeforderte Inhalt ist nicht verfügbar.</p>
</section>
<style lang="less">
@import "../lib/assets/css/variables.less";
.not-found {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
max-width: 720px;
margin: 4rem auto;
padding: 0 1.5rem;
text-align: center;
.content {
text-align: center;
padding: 2rem;
background-color: rgba(255, 255, 255, 0.9);
h1 {
font-size: clamp(2.4rem, 5vw, 3.4rem);
}
h1 {
font-size: 6rem;
color: var(--text-invers-200);
margin-bottom: 2rem;
}
h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
p {
margin-bottom: 2rem;
}
.back-home {
text-decoration: none;
border: 1px solid black;
padding: 0.5rem 1rem;
transition: background-color 0.2s, color 0.2s;
}
p {
margin-top: 1rem;
color: rgba(0, 0, 0, 0.7);
}
}
</style>