Add categories for docs template

This commit is contained in:
thiloho
2024-08-27 16:39:29 +02:00
parent 0753345bba
commit 1b1767c0f7
24 changed files with 651 additions and 154 deletions

View File

@@ -0,0 +1,51 @@
<script lang="ts">
import Head from "../common/Head.svelte";
import Nav from "../common/Nav.svelte";
import Footer from "../common/Footer.svelte";
const {
favicon,
title,
logoType,
logo,
mainContent,
coverImage,
publicationDate,
footerAdditionalText
}: {
favicon: string;
title: string;
logoType: "text" | "image";
logo: string;
mainContent: string;
coverImage: string;
publicationDate: string;
footerAdditionalText: string;
} = $props();
</script>
<Head {title} {favicon} nestingLevel={1} />
<Nav {logoType} {logo} isDocsTemplate={true} />
<header>
<div class="container">
<hgroup>
<p>{publicationDate}</p>
<h1>{title}</h1>
</hgroup>
{#if coverImage}
<img src={coverImage} alt="" />
{/if}
</div>
</header>
{#if mainContent}
<main>
<div class="container">
{@html mainContent}
</div>
</main>
{/if}
<Footer text={footerAdditionalText} />

View File

@@ -1,52 +0,0 @@
<script lang="ts">
const {
title,
logoType,
logo,
mainContent,
coverImage,
publicationDate,
footerAdditionalText
}: {
title: string;
logoType: "text" | "image";
logo: string;
mainContent: string;
coverImage: string;
publicationDate: string;
footerAdditionalText: string;
} = $props();
</script>
<svelte:head>
<head>
<title>{title}</title>
<link rel="stylesheet" href="../styles.css" />
</head>
</svelte:head>
<nav>
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
</nav>
<header>
{#if coverImage}
<img src={coverImage} alt="" />
{/if}
<h1>{title}</h1>
<p>{publicationDate}</p>
</header>
<main>
{@html mainContent}
</main>
<footer>
{footerAdditionalText}
</footer>

View File

@@ -1,5 +1,10 @@
<script lang="ts">
import Head from "../common/Head.svelte";
import Nav from "../common/Nav.svelte";
import Footer from "../common/Footer.svelte";
const {
favicon,
title,
logoType,
logo,
@@ -7,6 +12,7 @@
articles,
footerAdditionalText
}: {
favicon: string;
title: string;
logoType: "text" | "image";
logo: string;
@@ -16,50 +22,44 @@
} = $props();
</script>
<svelte:head>
<head>
<title>{title}</title>
<link rel="stylesheet" href="./styles.css" />
</head>
</svelte:head>
<Head {title} {favicon} />
<nav>
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
</nav>
<Nav {logoType} {logo} isDocsTemplate={true} />
<header>
<h1>{title}</h1>
<div class="container">
<h1>{title}</h1>
</div>
</header>
<main>
{@html mainContent}
{#if articles.length > 0}
<section class="articles" id="articles">
<h2>Articles</h2>
<div class="container">
{@html mainContent}
{#if articles.length > 0}
<section class="articles" id="articles">
<h2>
<a href="#articles">Articles</a>
</h2>
{#each articles as article}
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
<article>
<p>{article.publication_date}</p>
<h3>
<a href="./documents/{articleFileName}.html">{article.title}</a>
</h3>
{#if article.meta_description}
<p>{article.meta_description}</p>
{/if}
</article>
{/each}
</section>
{/if}
<ul class="unpadded">
{#each articles as article}
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
<li>
<p>{article.publication_date}</p>
<p>
<strong>
<a href="./articles/{articleFileName}.html">{article.title}</a>
</strong>
</p>
{#if article.meta_description}
<p>{article.meta_description}</p>
{/if}
</li>
{/each}
</ul>
</section>
{/if}
</div>
</main>
<footer>
{footerAdditionalText}
</footer>
<Footer text={footerAdditionalText} />