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

135
web-app/src/app.css
View File

@@ -1,93 +1,3 @@
:root {
--bg-primary: white;
--bg-secondary: hsl(0 0% 95%);
--bg-tertiary: hsl(0 0% 90%);
--color-text: black;
--color-text-invert: white;
--color-accent: hsl(210, 100%, 30%);
--color-success: hsl(105, 100%, 30%);
--color-error: hsl(0, 100%, 30%);
--border-primary: 0.0625rem solid var(--bg-tertiary);
--border-radius: 0.125rem;
/* Step -1: 14.9953px → 14.2222px */
--font-size--1: clamp(0.8889rem, 0.9592rem + -0.1098cqi, 0.9372rem);
/* Step 0: 16px → 16px */
--font-size-0: clamp(1rem, 1rem + 0cqi, 1rem);
/* Step 1: 17.072px → 18px */
--font-size-1: clamp(1.067rem, 1.0406rem + 0.1318cqi, 1.125rem);
/* Step 2: 18.2158px → 20.25px */
--font-size-2: clamp(1.1385rem, 1.0807rem + 0.2889cqi, 1.2656rem);
/* Step 3: 19.4363px → 22.7813px */
--font-size-3: clamp(1.2148rem, 1.1197rem + 0.4751cqi, 1.4238rem);
/* Step 4: 20.7385px → 25.6289px */
--font-size-4: clamp(1.2962rem, 1.1572rem + 0.6947cqi, 1.6018rem);
/* Step 5: 22.128px → 28.8325px */
--font-size-5: clamp(1.383rem, 1.1925rem + 0.9523cqi, 1.802rem);
/* Space 3xs: 4px → 5px */
--space-3xs: clamp(0.25rem, 0.2336rem + 0.0822cqi, 0.3125rem);
/* Space 2xs: 8px → 10px */
--space-2xs: clamp(0.5rem, 0.4671rem + 0.1645cqi, 0.625rem);
/* Space xs: 12px → 15px */
--space-xs: clamp(0.75rem, 0.7007rem + 0.2467cqi, 0.9375rem);
/* Space s: 16px → 20px */
--space-s: clamp(1rem, 0.9342rem + 0.3289cqi, 1.25rem);
/* Space m: 24px → 30px */
--space-m: clamp(1.5rem, 1.4013rem + 0.4934cqi, 1.875rem);
/* Space l: 32px → 40px */
--space-l: clamp(2rem, 1.8684rem + 0.6579cqi, 2.5rem);
/* Space xl: 48px → 60px */
--space-xl: clamp(3rem, 2.8026rem + 0.9868cqi, 3.75rem);
/* Space 2xl: 64px → 80px */
--space-2xl: clamp(4rem, 3.7368rem + 1.3158cqi, 5rem);
/* Space 3xl: 96px → 120px */
--space-3xl: clamp(6rem, 5.6053rem + 1.9737cqi, 7.5rem);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: hsl(0 0% 15%);
--bg-secondary: hsl(0 0% 20%);
--bg-tertiary: hsl(0 0% 25%);
--color-text: white;
--color-text-invert: black;
--color-accent: hsl(210, 100%, 80%);
--color-success: hsl(105, 100%, 80%);
--color-error: hsl(0, 100%, 80%);
color-scheme: dark;
}
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
line-height: 1.5;
font-family: system-ui, sans-serif;
background-color: var(--bg-primary);
display: flex;
flex-direction: column;
min-block-size: 100vh;
}
section {
display: flex;
flex-direction: column;
gap: var(--space-s);
}
section + section {
margin-block-start: var(--space-l);
}
@@ -135,10 +45,6 @@ input[type="color"] {
padding: 0;
}
a {
color: var(--color-accent);
}
a[role="button"] {
display: inline-block;
max-inline-size: fit-content;
@@ -149,10 +55,6 @@ summary {
max-inline-size: fit-content;
}
details[open] summary {
margin-block-end: var(--space-s);
}
button,
a[role="button"],
label[for="toggle-mobile-preview"],
@@ -170,48 +72,11 @@ summary {
outline-offset: 0.25rem;
}
img,
picture,
svg,
video {
max-inline-size: 100%;
block-size: auto;
}
ul,
ol {
list-style: none;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
h6 {
font-size: var(--font-size-0);
}
h5 {
font-size: var(--font-size-1);
}
h4 {
font-size: var(--font-size-2);
}
h3 {
font-size: var(--font-size-3);
}
h2 {
font-size: var(--font-size-4);
}
h1 {
font-size: var(--font-size-5);
}
form {
display: flex;
flex-direction: column;

16
web-app/src/app.html
View File

@@ -4,22 +4,6 @@
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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"
/>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

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();

2
web-app/src/routes/(anonymous)/login/+page.svelte
View File

@@ -3,7 +3,7 @@
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData } from "./$types";
const { form } = $props<{ form: ActionData }>();
const { form }: { form: ActionData } = $props();
</script>
<SuccessOrError success={form?.success} message={form?.message} />

2
web-app/src/routes/(anonymous)/register/+page.svelte
View File

@@ -3,7 +3,7 @@
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData } from "./$types";
const { form } = $props<{ form: ActionData }>();
const { form }: { form: ActionData } = $props();
</script>
<SuccessOrError success={form?.success} message={form?.message} />

2
web-app/src/routes/(authenticated)/+page.svelte
View File

@@ -7,7 +7,7 @@
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
const { form, data } = $props<{ form: ActionData; data: PageServerData }>();
const { form, data }: { form: ActionData; data: PageServerData } = $props();
</script>
<SuccessOrError success={form?.success} message={form?.message} />

2
web-app/src/routes/(authenticated)/account/+page.svelte
View File

@@ -4,7 +4,7 @@
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
const { data, form }: { data: PageServerData; form: ActionData } = $props();
</script>
<SuccessOrError success={form?.success} message={form?.message} />

9
web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
View File

@@ -3,10 +3,10 @@
import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
import { ALLOWED_MIME_TYPES, handleImagePaste } from "$lib/utils";
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
import type { ActionData, LayoutServerData, PageServerData } from "./$types";
import Modal from "$lib/components/Modal.svelte";
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
const { data, form }: { data: PageServerData & LayoutServerData; form: ActionData } = $props();
let previewContent = $state(data.home.main_content);
let mainContentTextarea: HTMLTextAreaElement;
@@ -19,7 +19,10 @@
const handlePaste = async (event: ClipboardEvent) => {
const newContent = await handleImagePaste(event, data.API_BASE_PREFIX);
previewContent = newContent;
if (newContent) {
previewContent = newContent;
}
};
</script>

2
web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
View File

@@ -7,7 +7,7 @@
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
const { data, form }: { data: PageServerData; form: ActionData } = $props();
</script>
<SuccessOrError success={form?.success} message={form?.message} />

6
web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
View File

@@ -7,7 +7,7 @@
import Modal from "$lib/components/Modal.svelte";
import { handleImagePaste } from "$lib/utils";
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
const { data, form }: { data: PageServerData; form: ActionData } = $props();
let previewContent = $state(data.article.main_content);
let mainContentTextarea: HTMLTextAreaElement;
@@ -20,7 +20,9 @@
const handlePaste = async (event: ClipboardEvent) => {
const newContent = await handleImagePaste(event, data.API_BASE_PREFIX);
previewContent = newContent;
if (newContent) {
previewContent = newContent;
}
};
</script>

2
web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
View File

@@ -5,7 +5,7 @@
import Modal from "$lib/components/Modal.svelte";
import type { ActionData, PageServerData } from "./$types";
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
const { data, form }: { data: PageServerData; form: ActionData } = $props();
</script>
<SuccessOrError success={form?.success} message={form?.message} />

13
web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
View File

@@ -10,7 +10,7 @@ import DocsIndex from "$lib/templates/docs/DocsIndex.svelte";
import DocsEntry from "$lib/templates/docs/DocsEntry.svelte";
import { dev } from "$app/environment";
export const load: PageServerLoad = async ({ params, fetch, cookies }) => {
export const load: PageServerLoad = async ({ params, fetch, cookies, parent }) => {
const websiteOverviewData = await fetch(
`${API_BASE_PREFIX}/website_overview?id=eq.${params.websiteId}`,
{
@@ -24,6 +24,7 @@ export const load: PageServerLoad = async ({ params, fetch, cookies }) => {
);
const websiteOverview = await websiteOverviewData.json();
const { website } = await parent();
generateStaticFiles(websiteOverview);
@@ -31,7 +32,8 @@ export const load: PageServerLoad = async ({ params, fetch, cookies }) => {
return {
websiteOverview,
websitePreviewUrl
websitePreviewUrl,
website
};
};
@@ -152,8 +154,11 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
);
}
const styles = await readFile(`${process.cwd()}/template-styles/blog-styles.css`, {
const commonStyles = await readFile(`${process.cwd()}/template-styles/common-styles.css`, {
encoding: "utf-8"
});
await writeFile(join(uploadDir, "styles.css"), styles);
const specificStyles = await readFile(`${process.cwd()}/template-styles/blog-styles.css`, {
encoding: "utf-8"
});
await writeFile(join(uploadDir, "styles.css"), commonStyles.concat(specificStyles));
};

2
web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
View File

@@ -4,7 +4,7 @@
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
const { data, form }: { data: PageServerData; form: ActionData } = $props();
</script>
<SuccessOrError success={form?.success} message={form?.message} />

3
web-app/src/routes/+layout.svelte
View File

@@ -1,10 +1,11 @@
<script lang="ts">
import "../app.css";
import "../../template-styles/common-styles.css";
import { page } from "$app/stores";
import type { LayoutServerData } from "./$types";
import type { Snippet } from "svelte";
const { data, children } = $props<{ data: LayoutServerData; children: Snippet }>();
const { data, children }: { data: LayoutServerData; children: Snippet } = $props();
const isProjectRoute = $derived($page.url.pathname.startsWith("/website") && !$page.error);
const routeName = $derived(