From 0cbf0bd8664c3b4d09a7dd5af0d773f71be6b6c1 Mon Sep 17 00:00:00 2001 From: thiloho <123883702+thiloho@users.noreply.github.com> Date: Tue, 20 Aug 2024 19:17:05 +0200 Subject: [PATCH] Share styles and update props --- flake.nix | 2 - web-app/src/app.css | 135 -------------- web-app/src/app.html | 16 -- web-app/src/lib/components/DateTime.svelte | 2 +- web-app/src/lib/components/Modal.svelte | 2 +- .../src/lib/components/SuccessOrError.svelte | 6 +- .../src/lib/components/WebsiteEditor.svelte | 4 +- .../src/lib/templates/blog/BlogArticle.svelte | 88 ++++----- .../src/lib/templates/blog/BlogIndex.svelte | 70 +++---- .../templates/blog/common/BlogFooter.svelte | 11 ++ .../lib/templates/blog/common/BlogHead.svelte | 12 ++ .../lib/templates/blog/common/BlogNav.svelte | 17 ++ .../src/lib/templates/docs/DocsEntry.svelte | 27 ++- .../src/lib/templates/docs/DocsIndex.svelte | 13 +- web-app/src/lib/utils.ts | 3 +- .../src/routes/(anonymous)/login/+page.svelte | 2 +- .../routes/(anonymous)/register/+page.svelte | 2 +- .../src/routes/(authenticated)/+page.svelte | 2 +- .../(authenticated)/account/+page.svelte | 2 +- .../website/[websiteId]/+page.svelte | 9 +- .../website/[websiteId]/articles/+page.svelte | 2 +- .../articles/[articleId]/+page.svelte | 6 +- .../[websiteId]/collaborators/+page.svelte | 2 +- .../[websiteId]/publish/+page.server.ts | 13 +- .../website/[websiteId]/publish/+page.svelte | 2 +- web-app/src/routes/+layout.svelte | 3 +- web-app/template-styles/blog-styles.css | 77 +------- web-app/template-styles/common-styles.css | 175 ++++++++++++++++++ web-app/vite.config.ts | 7 +- 29 files changed, 343 insertions(+), 369 deletions(-) create mode 100644 web-app/src/lib/templates/blog/common/BlogFooter.svelte create mode 100644 web-app/src/lib/templates/blog/common/BlogHead.svelte create mode 100644 web-app/src/lib/templates/blog/common/BlogNav.svelte create mode 100644 web-app/template-styles/common-styles.css diff --git a/flake.nix b/flake.nix index 90279a9..d80c69f 100644 --- a/flake.nix +++ b/flake.nix @@ -56,8 +56,6 @@ program = "${pkgs.writeShellScriptBin "api-setup" '' ${pkgs.postgresql_16}/bin/psql postgres://postgres@localhost:15432/archtika -c "ALTER DATABASE archtika SET \"app.jwt_secret\" TO 'a42kVyAhTImYxZeebZkApoAZLmf0VtDA'" - echo "OUT PATH: ${self.outPath}" - ${pkgs.dbmate}/bin/dbmate --url postgres://postgres@localhost:15432/archtika?sslmode=disable --migrations-dir ${self.outPath}/rest-api/db/migrations up PGRST_DB_SCHEMAS="api" PGRST_DB_ANON_ROLE="anon" PGRST_OPENAPI_MODE="ignore-privileges" PGRST_DB_URI="postgres://authenticator@localhost:15432/archtika" PGRST_JWT_SECRET="a42kVyAhTImYxZeebZkApoAZLmf0VtDA" ${pkgs.postgrest}/bin/postgrest diff --git a/web-app/src/app.css b/web-app/src/app.css index 940eda4..edfac0d 100644 --- a/web-app/src/app.css +++ b/web-app/src/app.css @@ -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; diff --git a/web-app/src/app.html b/web-app/src/app.html index 5b48f37..40b3466 100644 --- a/web-app/src/app.html +++ b/web-app/src/app.html @@ -4,22 +4,6 @@ - - %sveltekit.head% diff --git a/web-app/src/lib/components/DateTime.svelte b/web-app/src/lib/components/DateTime.svelte index 987fe14..d569147 100644 --- a/web-app/src/lib/components/DateTime.svelte +++ b/web-app/src/lib/components/DateTime.svelte @@ -1,5 +1,5 @@ {text} diff --git a/web-app/src/lib/components/SuccessOrError.svelte b/web-app/src/lib/components/SuccessOrError.svelte index 3b52515..f7bd87f 100644 --- a/web-app/src/lib/components/SuccessOrError.svelte +++ b/web-app/src/lib/components/SuccessOrError.svelte @@ -1,8 +1,6 @@ {#if success} diff --git a/web-app/src/lib/components/WebsiteEditor.svelte b/web-app/src/lib/components/WebsiteEditor.svelte index 68a6dde..b97456f 100644 --- a/web-app/src/lib/components/WebsiteEditor.svelte +++ b/web-app/src/lib/components/WebsiteEditor.svelte @@ -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; diff --git a/web-app/src/lib/templates/blog/BlogArticle.svelte b/web-app/src/lib/templates/blog/BlogArticle.svelte index a13820e..3ce2ebf 100644 --- a/web-app/src/lib/templates/blog/BlogArticle.svelte +++ b/web-app/src/lib/templates/blog/BlogArticle.svelte @@ -1,54 +1,30 @@ - - - - - - - {title} - - - + - +
@@ -62,14 +38,12 @@
-
-
- {@html mainContent} -
-
+{#if mainContent} +
+
+ {@html mainContent} +
+
+{/if} -
-
- {footerAdditionalText} -
-
+ diff --git a/web-app/src/lib/templates/blog/BlogIndex.svelte b/web-app/src/lib/templates/blog/BlogIndex.svelte index ae64f88..476c924 100644 --- a/web-app/src/lib/templates/blog/BlogIndex.svelte +++ b/web-app/src/lib/templates/blog/BlogIndex.svelte @@ -1,52 +1,28 @@ - - - - - - - {title} - - - + - +
@@ -66,9 +42,11 @@ {@const articleFileName = article.title.toLowerCase().split(" ").join("-")}

  • {article.publication_date}

    -

    - {article.title} -

    +

    + + {article.title} + +

    {#if article.meta_description}

    {article.meta_description}

    {/if} @@ -80,8 +58,4 @@
    • -
    -
    - {footerAdditionalText} -
    -
    + diff --git a/web-app/src/lib/templates/blog/common/BlogFooter.svelte b/web-app/src/lib/templates/blog/common/BlogFooter.svelte new file mode 100644 index 0000000..5e46933 --- /dev/null +++ b/web-app/src/lib/templates/blog/common/BlogFooter.svelte @@ -0,0 +1,11 @@ + + +
    +
    + + {text} + +
    +
    diff --git a/web-app/src/lib/templates/blog/common/BlogHead.svelte b/web-app/src/lib/templates/blog/common/BlogHead.svelte new file mode 100644 index 0000000..353c445 --- /dev/null +++ b/web-app/src/lib/templates/blog/common/BlogHead.svelte @@ -0,0 +1,12 @@ + + + + + + + {title} + + + diff --git a/web-app/src/lib/templates/blog/common/BlogNav.svelte b/web-app/src/lib/templates/blog/common/BlogNav.svelte new file mode 100644 index 0000000..6542061 --- /dev/null +++ b/web-app/src/lib/templates/blog/common/BlogNav.svelte @@ -0,0 +1,17 @@ + + + diff --git a/web-app/src/lib/templates/docs/DocsEntry.svelte b/web-app/src/lib/templates/docs/DocsEntry.svelte index 66e6397..906878b 100644 --- a/web-app/src/lib/templates/docs/DocsEntry.svelte +++ b/web-app/src/lib/templates/docs/DocsEntry.svelte @@ -1,14 +1,21 @@ diff --git a/web-app/src/lib/templates/docs/DocsIndex.svelte b/web-app/src/lib/templates/docs/DocsIndex.svelte index 8eaf5ae..50268cd 100644 --- a/web-app/src/lib/templates/docs/DocsIndex.svelte +++ b/web-app/src/lib/templates/docs/DocsIndex.svelte @@ -1,12 +1,19 @@ diff --git a/web-app/src/lib/utils.ts b/web-app/src/lib/utils.ts index 1ef2bc6..fd64242 100644 --- a/web-app/src/lib/utils.ts +++ b/web-app/src/lib/utils.ts @@ -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(); diff --git a/web-app/src/routes/(anonymous)/login/+page.svelte b/web-app/src/routes/(anonymous)/login/+page.svelte index 3b8aa8e..14e541a 100644 --- a/web-app/src/routes/(anonymous)/login/+page.svelte +++ b/web-app/src/routes/(anonymous)/login/+page.svelte @@ -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(); diff --git a/web-app/src/routes/(anonymous)/register/+page.svelte b/web-app/src/routes/(anonymous)/register/+page.svelte index 3eb506e..2d5d2b9 100644 --- a/web-app/src/routes/(anonymous)/register/+page.svelte +++ b/web-app/src/routes/(anonymous)/register/+page.svelte @@ -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(); diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte index 0c2c1a2..2e6e311 100644 --- a/web-app/src/routes/(authenticated)/+page.svelte +++ b/web-app/src/routes/(authenticated)/+page.svelte @@ -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(); diff --git a/web-app/src/routes/(authenticated)/account/+page.svelte b/web-app/src/routes/(authenticated)/account/+page.svelte index 269f435..2115426 100644 --- a/web-app/src/routes/(authenticated)/account/+page.svelte +++ b/web-app/src/routes/(authenticated)/account/+page.svelte @@ -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(); diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte index fb018ef..e485fd9 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte @@ -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; + } }; diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte index 400891b..ca2115c 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte @@ -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(); diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte index 642509d..1653061 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte @@ -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; + } }; diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte index c1d4af5..cd51705 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte @@ -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(); diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts index 9799910..e315d4f 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts @@ -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)); }; diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte index 2e71c04..1e04987 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte @@ -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(); diff --git a/web-app/src/routes/+layout.svelte b/web-app/src/routes/+layout.svelte index 5abf5c5..2e30d81 100644 --- a/web-app/src/routes/+layout.svelte +++ b/web-app/src/routes/+layout.svelte @@ -1,10 +1,11 @@