thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Share styles and update props

Browse Source
This commit is contained in:
thiloho
2024-08-20 19:17:05 +02:00
parent bf791f9bfc
commit 0cbf0bd866
29 changed files with 343 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web-app/src/lib/templates/blog/BlogArticle.svelte
View File

@@ -1,54 +1,30 @@
<script lang="ts">
const { title, logoType, logo, mainContent, coverImage, publicationDate, footerAdditionalText } =
$props<{
title: string;
logoType: "text" | "image";
logo: string;
mainContent: string;
coverImage: string;
publicationDate: string;
footerAdditionalText: string;
}>();
import BlogHead from "./common/BlogHead.svelte";
import BlogNav from "./common/BlogNav.svelte";
import BlogFooter from "./common/BlogFooter.svelte";
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>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
media="(prefers-color-scheme: light)"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css"
integrity="sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme: dark)"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github-dark.min.css"
integrity="sha512-rO+olRTkcf304DQBxSWxln8JXCzTHlKnIdnMUwYvQa9/Jd4cQaNkItIUj6Z4nvW1dqK0SKXLbn9h4KwZTNtAyw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>{title}</title>
<link rel="stylesheet" href="../styles.css" />
</head>
</svelte:head>
<BlogHead {title} nestingLevel={1} />
<nav>
<div class="container">
<a href="../">
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
</a>
</div>
</nav>
<BlogNav {logoType} {logo} />
<header>
<div class="container">
@@ -62,14 +38,12 @@
</div>
</header>
<main>
<div class="container">
{@html mainContent}
</div>
</main>
{#if mainContent}
<main>
<div class="container">
{@html mainContent}
</div>
</main>
{/if}
<footer>
<div class="container">
{footerAdditionalText}
</div>
</footer>
<BlogFooter text={footerAdditionalText} />

70
web-app/src/lib/templates/blog/BlogIndex.svelte
View File

@@ -1,52 +1,28 @@
<script lang="ts">
const { title, logoType, logo, mainContent, articles, footerAdditionalText } = $props<{
import BlogHead from "./common/BlogHead.svelte";
import BlogNav from "./common/BlogNav.svelte";
import BlogFooter from "./common/BlogFooter.svelte";
const {
title,
logoType,
logo,
mainContent,
articles,
footerAdditionalText
}: {
title: string;
logoType: "text" | "image";
logo: string;
mainContent: string;
articles: any[];
articles: { title: string; publication_date: string; meta_description: string }[];
footerAdditionalText: string;
}>();
} = $props();
</script>
<svelte:head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
media="(prefers-color-scheme: light)"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css"
integrity="sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
media="(prefers-color-scheme: dark)"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github-dark.min.css"
integrity="sha512-rO+olRTkcf304DQBxSWxln8JXCzTHlKnIdnMUwYvQa9/Jd4cQaNkItIUj6Z4nvW1dqK0SKXLbn9h4KwZTNtAyw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>{title}</title>
<link rel="stylesheet" href="./styles.css" />
</head>
</svelte:head>
<BlogHead {title} />
<nav>
<div class="container">
<a href="../">
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
</a>
</div>
</nav>
<BlogNav {logoType} {logo} />
<header>
<div class="container">
@@ -66,9 +42,11 @@
{@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
<li>
<p>{article.publication_date}</p>
<h3>
<a href="./articles/{articleFileName}.html">{article.title}</a>
</h3>
<p>
<strong>
<a href="./articles/{articleFileName}.html">{article.title}</a>
</strong>
</p>
{#if article.meta_description}
<p>{article.meta_description}</p>
{/if}
@@ -80,8 +58,4 @@
</div>
</main>
<footer>
<div class="container">
{footerAdditionalText}
</div>
</footer>
<BlogFooter text={footerAdditionalText} />

11
web-app/src/lib/templates/blog/common/BlogFooter.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
const { text }: { text: string } = $props();
</script>
<footer>
<div class="container">
<small>
{text}
</small>
</div>
</footer>

12
web-app/src/lib/templates/blog/common/BlogHead.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
const { title, nestingLevel = 0 }: { title: string; nestingLevel?: number } = $props();
</script>
<svelte:head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<link rel="stylesheet" href={`${"../".repeat(nestingLevel)}styles.css`} />
</head>
</svelte:head>

17
web-app/src/lib/templates/blog/common/BlogNav.svelte Normal file
View File

@@ -0,0 +1,17 @@
<script lang="ts">
const { logoType, logo }: { logoType: "text" | "image"; logo: string } = $props();
</script>
<nav>
<div class="container">
<a href="../">
{#if logoType === "text"}
<p>
<strong>{logo}</strong>
</p>
{:else}
<img src={logo} alt="" />
{/if}
</a>
</div>
</nav>

27
web-app/src/lib/templates/docs/DocsEntry.svelte
View File

@@ -1,14 +1,21 @@
<script lang="ts">
const { title, logoType, logo, mainContent, coverImage, publicationDate, footerAdditionalText } =
$props<{
title: string;
logoType: "text" | "image";
logo: string;
mainContent: string;
coverImage: string;
publicationDate: string;
footerAdditionalText: string;
}>();
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>

13
web-app/src/lib/templates/docs/DocsIndex.svelte
View File

@@ -1,12 +1,19 @@
<script lang="ts">
const { title, logoType, logo, mainContent, articles, footerAdditionalText } = $props<{
const {
title,
logoType,
logo,
mainContent,
articles,
footerAdditionalText
}: {
title: string;
logoType: "text" | "image";
logo: string;
mainContent: string;
articles: any[];
articles: { title: string; publication_date: string; meta_description: string }[];
footerAdditionalText: string;
}>();
} = $props();
</script>
<svelte:head>