deployable build for frontend (#18)

* rebase and fix dist folder

* add fading transitions and initial blog

* remove lock file

Author: iulusoy

src/app/frontend/package.json

@@ -7,7 +7,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"start": "node build",
+		"start": "node dist",
 		"test": "playwright test",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -49,8 +49,11 @@
 		"flowbite-svelte": "^0.47.4",
 		"flowbite-svelte-icons": "^2.0.2",
 		"globrex": "^0.1.2",
+		"mdsvex": "^0.12.3",
 		"node": "^22.13.0",
 		"pnpm": "^9.15.3",
+		"rehype-slug": "^6.0.0",
+		"remark-toc": "^9.0.0",
 		"svelte-awesome-icons": "^2.0.1"
 	},
 	"packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"

src/app/frontend/pnpm-lock.yaml

@@ -1,5 +1,18 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+
+
+export {};
+interface Post {
+	title: string
+	slug: string
+	description: string
+	image?: string
+	date: string
+	categories: string[]
+	published: boolean
+}
+
 declare global {
 	namespace App {
 		// interface Error {}
@@ -8,5 +21,3 @@ declare global {
 		// interface Platform {}
 	}
 }
-
-export {};

src/app/frontend/src/app.d.ts

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { formatDate } from "$lib/utils.js";
+    import { title, description, url } from "$lib/config";
+    export let post;
+    </script>
+    
+    <svelte:head>
+        <title>{title}</title>
+    
+        <meta name="description" content={description} />
+    
+        <meta property="og:type" content="article" />
+        <meta property="og:url" content={`${url}/blog`} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:site_name" content={title} />
+        <meta property="og:image" content="/blog-banner.webp" />
+      
+        <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+        <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+    </svelte:head>
+    
+    {#key post.slug}
+        <a class="card card-hover overflow-hidden w-full max-w-4xl mt-4 mx-4" href={`/blog/${post.slug}`}>
+            <header class="mb-4">
+                {#if post.image}
+                    <img src={post.image} alt="blog banner" />
+                {/if}
+            </header>
+    
+            <div class="p-4 space-y-4">
+                <h3 class="h3" data-toc-ignore>{post.title}</h3>
+                <article>
+                    <p>
+                        {post.description}
+                    </p>
+                </article>
+            </div>
+            <hr class="opacity-50" />
+            <footer class="p-4 flex justify-start items-center space-x-4">
+                <div class="flex-auto flex justify-between items-center">
+                    <h6 class="font-bold" data-toc-ignore>Mailcom project</h6>
+                    <small>On {formatDate(post.date)}</small>
+                </div>
+            </footer>
+        </a>
+    {/key}

src/app/frontend/src/lib/components/BlogCard.svelte

@@ -0,0 +1,4 @@
+import { dev } from "$app/environment"
+export const title = "Mailcom"
+export const description = "Donate your old mail to charity."
+export const url = dev ? "http://localhost:5173" : "https://mailcom.edu"

src/app/frontend/src/lib/config.ts

@@ -0,0 +1,8 @@
+type DateStyle = Intl.DateTimeFormatOptions["dateStyle"]
+
+export function formatDate(date: string, dateStyle: DateStyle = "medium", locales = "en") {
+	// Safari is mad about dashes in the date
+	const dateToFormat = new Date(date.replaceAll("-", "/"))
+	const dateFormatter = new Intl.DateTimeFormat(locales, { dateStyle })
+	return dateFormatter.format(dateToFormat)
+}

src/app/frontend/src/lib/utils.ts

@@ -0,0 +1,19 @@
+---
+title: "Mailcom is kicking off!"
+description: "This is the kick-off post to start this blog."
+date: "2025-01-23"
+image: /images/logo.png
+categories:
+  - blog
+published: true
+---
+
+## Contents
+
+## Introduction
+
+This is Mailcom's first blog post!
+
+## What is new
+
+You may now reach Mailcom's website via the www.

src/app/frontend/src/posts/sample_post.md

@@ -1 +1,9 @@
-export const prerender = true;
+export const prerender = true;
+
+export const load = ({ url }) => {
+	const { pathname } = url;
+
+	return {
+		pathname
+	};
+};

src/app/frontend/src/routes/+layout.js

@@ -4,11 +4,14 @@
 
   import { goto } from '$app/navigation';
   import './global.css';
+	import { fade } from 'svelte/transition';
   function gotoDonate() {
     goto('/donation');
   }
+  export let data: { pathname: string };
 </script>
 
+
 <Navbar fluid>
   <NavBrand href="/">
     <img
@@ -32,7 +35,11 @@
 </Navbar>
 
 <main class='p-8 h-auto'>
-  <slot />
+  {#key data.pathname}
+	<div in:fade={{ duration: 300, delay: 400 }} out:fade={{ duration: 300 }}>
+		<slot />
+	</div>
+{/key}
 </main>
 
 <Footer footerType="logo" class='p-8'>
@@ -43,6 +50,7 @@
       alt="Romanisches Seminar Logo"
       name="Romanisches Seminar"
     />
+
     <FooterLinkGroup ulClass="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
       <FooterLink href="/">About</FooterLink>
       <FooterLink href="/">Privacy Policy</FooterLink>

src/app/frontend/src/routes/+layout.svelte

@@ -1,21 +1,22 @@
 <script>
-  import { Button, Modal, Card } from 'flowbite-svelte'
-  let defaultModal = false;
-  import { Img } from 'flowbite-svelte';
-  import { ArrowRightOutline } from 'flowbite-svelte-icons';
   import './global.css';
   import { goto } from '$app/navigation';
 
   function gotoDonate() {
     goto('/donation');
   }
-</script>
 
-<main class='p-8 h-auto'>
+</script>
 
-  <h1 class="mb-4 text-4xl font-extrabold center leading-none tracking-tight text-gray-100 md:text-5xl lg:text-6xl dark:text-white">Projekt MailCom</h1>
+<h1 class="mb-4 text-4xl font-extrabold center leading-none tracking-tight text-gray-100 md:text-5xl lg:text-6xl dark:text-white">Projekt MailCom</h1>
 
+<main class='p-8 h-auto'>
+  
+    <article class="section" id="tutorial"><h2>Tutorial</h2></article>
+    <article class="section" id="b"><h2>Information</h2></article>
+    <article class="section" id="c"><h2>FAQ</h2></article>
+    <article class="section" id="d"><h2>Blog</h2></article>
+  
 </main>
 
 
-

src/app/frontend/src/routes/+page.svelte

@@ -0,0 +1,33 @@
+import { json } from "@sveltejs/kit"
+
+async function getPosts() {
+	let posts: Post[] = []
+
+	const paths = import.meta.glob("/src/posts/*.md", { eager: true })
+
+	for (const path in paths) {
+		const file = paths[path]
+		const slug = path.split("/").at(-1)?.replace(".md", "")
+
+		if (file && typeof file === "object" && "metadata" in file && slug) {
+			const metadata = file.metadata as Omit<Post, "slug">
+			const post = { ...metadata, slug } satisfies Post
+			if (post.published) {
+				posts.push(post)
+			}
+		}
+	}
+
+	posts = posts.sort(
+		(first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
+	)
+
+	return posts
+}
+
+export async function GET() {
+	const posts = await getPosts()
+	return json(posts)
+}
+
+export const prerender = true

src/app/frontend/src/routes/api/posts/+server.ts

@@ -0,0 +1,7 @@
+import type { ServerLoadEvent } from "@sveltejs/kit"
+
+export async function load({ fetch }: ServerLoadEvent) {
+	const response = await fetch("/api/posts")
+	const posts: Post[] = await response.json()
+	return { posts }
+}

src/app/frontend/src/routes/blog/+page.server.ts

@@ -1,5 +1,18 @@
-<main class='p-8 h-auto'>
+<script lang="ts">import BlogCard from "$lib/components/BlogCard.svelte";
+  export let data;
+  </script>
+  
 
-  <h1 class="mb-4 text-4xl font-extrabold center leading-none tracking-tight text-gray-100 md:text-5xl lg:text-6xl dark:text-white">Blog</h1>
+  <main class='p-8 h-auto'>
 
-</main>
+    <h1 class="mb-4 text-4xl font-extrabold center leading-none tracking-tight text-gray-100 md:text-5xl lg:text-6xl dark:text-white">Blog</h1>
+  
+  </main>
+
+  <section class="mb-16">
+    <ul class="flex flex-col items-center">
+      {#each data.posts as post}
+        <BlogCard {post} />
+      {/each}
+    </ul>
+  </section>

src/app/frontend/src/routes/blog/+page.svelte

@@ -137,5 +137,5 @@ inactiveClass="text-gray-100 dark:text-gray-400 hover:bg-red-400 dark:hover:bg-g
   </span>
     <p class="mb-2 text-gray-100 dark:text-gray-400"> ...
     </p>
-</AccordionItem>
+</AccordionItem> 
 </Accordion>

src/app/frontend/src/routes/faq/+page.svelte

@@ -1,5 +1,16 @@
 body {
     background-image: url("/images/Alle_Hintergrundbilder.svg");
-    background-size: contain;
+    background-size: 80%;
+    background-repeat: repeat;
     background-color: #590d08;
    }
+html {
+    overflow-y:scroll;
+    scroll-behavior: smooth;
+  }
+
+@media screen and (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+}

src/app/frontend/src/routes/global.css

@@ -1,14 +1,26 @@
 import preprocess from "svelte-preprocess";
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { mdsvex } from "mdsvex"
+import remarkToc from "remark-toc"
+import rehypeSlug from "rehype-slug"
+
+/** @type {import('mdsvex').MdsvexOptions} */
+const mdsvexOptions = {
+	extensions: [".md"],
+	remarkPlugins: [[remarkToc, { tight: true }]],
+	rehypePlugins: [rehypeSlug],
+}
 
 export default {
-  preprocess: [vitePreprocess({ script: true })],
+	extensions: [".svelte", ".md"],
+	preprocess: [vitePreprocess({ script: true }), mdsvex(mdsvexOptions)],
   kit: {
     adapter: adapter({
 			out: 'dist',
 			precompress: true,
 			envPrefix: ''
 		})
 	}
-};
+};
+