Projects popups

package.json

@@ -43,7 +43,8 @@
     "@inlang/paraglide-sveltekit": "0.10.2",
     "bits-ui": "^0.21.10",
     "clsx": "^2.1.1",
-    "lucide-svelte": "^0.395.0",
+    "lucide-svelte": "^0.396.0",
+    "mdsvex": "^0.11.2",
     "mode-watcher": "^0.3.0",
     "tailwind-merge": "^2.3.0",
     "tailwind-variants": "^0.2.1"

src/lib/components/LanguageSwitcher.svelte

@@ -18,7 +18,6 @@
 		// Only remove the language tag if it is present
 		let currentPathNoLang = currentPath.replace(/\/(en|dk)/, '');
 		let newRouteWithLang = i18n.resolveRoute(currentPathNoLang, tag);
-		console.log(newRouteWithLang);
 		if (newRouteWithLang !== window.location.pathname) {
 			goto(newRouteWithLang);
 		}

src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import * as Dialog from "./index.js";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200,
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>

src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
+	{...$$restProps}
+/>

src/lib/components/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>

src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>

src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};

src/lib/projects/nbskak_dk.md

@@ -0,0 +1,10 @@
+---
+title: Nørrebro Skakklub
+image: https://nbskak.dk/card.webp
+tags: react
+people: jonathan, elliott, johannes
+short_description: hejhejhej
+---
+
+# Nørrebro skakklub
+længere description arh

src/lib/projects/nbskak_en.md

@@ -0,0 +1,10 @@
+---
+title: Nørrebro chessclub
+image: https://nbskak.dk/card.webp
+tags: react
+people: jonathan, elliott, johannes
+short_description: heyheyhey
+---
+
+# Nørrebro skakklub
+lAUHDUAIDH

src/routes/projects/+layout.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
+  import { page } from "$app/stores";
+  import { i18n } from '$lib/i18n.js'
+  import { goto } from '$app/navigation'
+
+  let open = $page.route.id !== '/projects';
+  page.subscribe((value) => {
+    open = value.route.id !== '/projects';
+  });
+
+  function onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      goto(i18n.resolveRoute('/projects'));
+    }
+  }
+</script>
+
+<div class="container mx-auto p-4">
+	<h1 class="text-3xl font-bold mb-4">Our projects:</h1>
+
+	<h1 class="mb-2 font-bold text-4xl">Nørrebro Skakklubs website</h1>
+	<div class="container items-center flex px-auto justify-center pt-12">
+		<a href="/projects/nbskak">
+			<img src="/NBSkak.webp" alt="NBskak" width="750" height="750" style="border-radius: 50px;" />
+		</a>
+	</div>
+	<ul class="list-disc ml-6">
+		<li class="mb-2">Chessbot which competed in the Sebastian Lague coding challenge</li>
+		<li class="mb-2">Viranoid 2023 winning gamejam game</li>
+		<li class="mb-2">GravityDrop</li>
+	</ul>
+</div>
+
+<Dialog.Root bind:open onOpenChange={onOpenChange}>
+  <Dialog.Content class="sm:max-w-[425px]">
+    <slot />
+  </Dialog.Content>
+</Dialog.Root>

src/routes/projects/+page.svelte

@@ -1,26 +0,0 @@
-<div class="container mx-auto p-4">
-
-    <h1 class="text-3xl font-bold mb-4">Our projects:</h1>
-
-
-      <h1 class="mb-2 font-bold text-4xl">Nørrebro Skakklubs website</h1>
-      <div class="container items-center flex px-auto justify-center pt-12">
-        <a href="https://nbskak.dk/">
-        <img
-          src="/NBSkak.webp"
-          alt="NBskak"
-          width="750"
-          height="750"
-          style="border-radius: 50px;"
-        />
-        </a>
-    </div>
-    <ul class="list-disc ml-6">
-      <li class="mb-2">Chessbot which competed in the Sebastian Lague coding challenge</li>
-      <li class="mb-2">Viranoid 2023 winning gamejam game</li>
-      <li class="mb-2">GravityDrop  </li>
-    </ul>
-
-  </div>
-
-

src/routes/projects/[project]/+page.svelte

@@ -0,0 +1,9 @@
+<script>
+    export let data;
+    console.log('props:', data);
+</script>
+
+<main>
+    <h1>{data.title}</h1>
+    <svelte:component this={data.content} />
+</main>

src/routes/projects/[project]/+page.ts

@@ -0,0 +1,23 @@
+import { error } from '@sveltejs/kit';
+import { languageTag } from '$lib/paraglide/runtime.js';
+
+export async function load({ params, depends }) {
+    const project = params.project;
+    depends("paraglide:lang");
+
+    try {
+        const lang = languageTag();
+        const data = (await import(/* @vite-ignore */'../../../lib/projects/' + project + "_" + lang + '.md'));
+        const metadata = data.metadata;
+
+        return {
+            content: data.default,
+            title: metadata.title
+        }
+    } catch (e) {
+        console.error(e);
+        return error(404, 'Not found');
+    }
+}
+
+export const prerender = true;

svelte.config.js

@@ -1,11 +1,18 @@
 import adapter from '@sveltejs/adapter-cloudflare';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { mdsvex } from 'mdsvex';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess(),
+		mdsvex({
+			extensions: ['.md'],
+		}),
+	],
+	extensions: ['.svelte', '.svx', '.md'],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
@@ -23,6 +30,7 @@ const config = {
 		},
 		prerender: {
 			origin: 'https://novusgroup.dk',
+			entries: ['*'],
 		}
 	}
 };