Add tags

v-rogg · Nov 4, 2023 · 1006e6c · 1006e6c
1 parent 35cd0c9
commit 1006e6c
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 184 deletions.
diff --git a/...ations/20231024120552_init_signatures.sql → ...ations/20231024120552_init_signatures.sql b/...ations/20231024120552_init_signatures.sql → ...ations/20231024120552_init_signatures.sql
diff --git a/...20231024120552_init_signatures_sqlite.sql → ...20231024120552_init_signatures_sqlite.sql b/...20231024120552_init_signatures_sqlite.sql → ...20231024120552_init_signatures_sqlite.sql
diff --git a/supabase/seed.sql → drizzle/seed.sql b/supabase/seed.sql → drizzle/seed.sql
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/components/globals/Tag/Tag.svelte b/src/lib/components/globals/Tag/Tag.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let color;
+</script>
+
+<!--<div class="mt-4 inline-flex items-center rounded-md backdrop-blur-sm px-2 py-1 text-xs font-medium ring-1 ring-inset ring-current max-w-max" style="color: {color}">-->
+<!--	<slot/>-->
+<!--</div>-->
+
+<div
+	class="relative z-10 pointer-events-none backdrop-blur-md px-2 py-1 rounded-lg ring-1 ring-inset ring-current flex items-center overflow-hidden" style="color: {color}">
+	<div class="absolute top-0 left-0 bg-current opacity-10" style="width: 100%; height: 100%">
+	</div>
+	<div class="text-xs" style="color: {color}">
+		<slot/>
+	</div>
+</div>
diff --git a/src/lib/components/sections/Memories/Memories.svelte b/src/lib/components/sections/Memories/Memories.svelte
diff --git a/src/lib/components/sections/Memories/Memory.svelte b/src/lib/components/sections/Memories/Memory.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { storyblokEditable } from "@storyblok/svelte";
-	import type { MemoryContent } from "$lib/storyblok/schema";
+	import type { MemoryContent } from "$lib/storyblok";
+	import Tag from "$lib/components/globals/Tag/Tag.svelte";
 	export let blok: MemoryContent;
 </script>
 
@@ -28,6 +29,11 @@
 			</div>
 		{/if}
 	</div>
+	<div class="absolute left-8 top-8">
+		<Tag color="{blok.tag_color.color}">
+			Trip
+		</Tag>
+	</div>
 </div>
 
 <style lang="postcss">

diff --git a/src/lib/components/sections/Project/Project.svelte b/src/lib/components/sections/Project/Project.svelte
@@ -1,25 +1,31 @@
 <script lang="ts">
 	import { StoryblokComponent, storyblokEditable } from "@storyblok/svelte";
+	import Tag from "$lib/components/globals/Tag/Tag.svelte";
 
 	export let blok;
 </script>
 
 <section
 	use:storyblokEditable="{blok}"
-	class="grid-settings flex gap-4 justify-between bg-white-600 dark:bg-blue-800 sm:rounded-2xl p-8 col-span max-sm:min-h-[25rem] md:h-[25rem] overflow-hidden"
+	class="grid-settings flex gap-4 justify-between bg-white-600 dark:bg-blue-800 sm:rounded-2xl p-8 col-span max-sm:min-h-[25rem] md:h-[25rem] overflow-hidden relative"
 	style="--sm: {blok.grid_sm}; --md: {blok.grid_md}; --lg: {blok.grid_lg}; --xl: {blok.grid_xl};">
 	<div class="flex flex-col gap-4">
 		<div>
 			<h3 class="text-3xl font-semibold">{blok.title}</h3>
-			<h4 class="font-semibold" style="color: {blok.subtitle_color.color}">{blok.subtitle}</h4>
+			<h4 class="font-regular" style="color: {blok.subtitle_color.color}">{blok.subtitle}</h4>
 		</div>
 		<p class="grow font-serif max-w-[20rem]">{blok.description}</p>
 		{#if blok.cta}
 			<StoryblokComponent blok="{blok.cta[0]}" />
 		{/if}
 	</div>
 	<div class="relative flex items-center">
-		<img src="{blok.img.filename}" alt="{blok.img.alt}" class="block h-fit max-h-[100%] min-w-[5rem] mx-auto" />
+		<img src="{blok.img.filename}" alt="{blok.img.alt}" class="block h-fit max-h-[100%] min-w-[5rem] mx-auto mr-8" />
+	</div>
+	<div class="absolute right-8 top-8">
+		<Tag color="{blok.tag_color.color}">
+			Micro SaaS
+		</Tag>
 	</div>
 </section>
 

diff --git a/supabase/.gitignore b/supabase/.gitignore
diff --git a/supabase/config.toml b/supabase/config.toml
diff --git a/workers/ps-signatures/wrangler.toml b/workers/ps-signatures/wrangler.toml
@@ -3,6 +3,9 @@ main = "src/index.ts"
 compatibility_date = "2023-10-29"
 node_compat = true
 
+[placement]
+mode = "smart"
+
 [dev]
 host = "valentinrogg.de"