thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 19:01:35 +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

2
web-app/src/lib/components/DateTime.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
const { date } = $props<{ date: string }>();
const { date }: { date: string } = $props();
const options: Intl.DateTimeFormatOptions = {
year: "numeric",

2
web-app/src/lib/components/Modal.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import type { Snippet } from "svelte";
const { children, id, text } = $props<{ children: Snippet; id: string; text: string }>();
const { children, id, text }: { children: Snippet; id: string; text: string } = $props();
</script>
<a href={`#${id}`} role="button">{text}</a>

6
web-app/src/lib/components/SuccessOrError.svelte
View File

@@ -1,8 +1,6 @@
<script lang="ts">
const { success, message } = $props<{
success: boolean | undefined;
message: string;
}>();
const { success, message }: { success: boolean | undefined; message: string | undefined } =
$props();
</script>
{#if success}

4
web-app/src/lib/components/WebsiteEditor.svelte
View File

@@ -9,14 +9,14 @@
fullPreview = false,
previewContent,
previewScrollTop = 0
} = $props<{
}: {
id: string;
title: string;
children: Snippet;
fullPreview?: boolean;
previewContent: string;
previewScrollTop?: number;
}>();
} = $props();
let previewElement: HTMLDivElement;

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>

3
web-app/src/lib/utils.ts
View File

@@ -1,7 +1,6 @@
import markdownit from "markdown-it";
import hljs from "highlight.js";
import type { StateCore } from "markdown-it/index.js";
import { dev } from "$app/environment";
export const sortOptions = [
{ value: "creation-time", text: "Creation time" },
@@ -117,7 +116,7 @@ export const handleImagePaste = async (event: ClipboardEvent, API_BASE_PREFIX: s
const clipboardItems = Array.from(event.clipboardData?.items || []);
const file = clipboardItems.find((item) => item.type.startsWith("image/"));
if (!file) return;
if (!file) return null;
event.preventDefault();