Skip to content

Commit a1c06bd

Browse files
authoredFeb 20, 2025··
deployable build for frontend (#18)
* rebase and fix dist folder * add fading transitions and initial blog * remove lock file
1 parent 0ff4db0 commit a1c06bd

16 files changed

+205
-3522
lines changed
 

‎src/app/frontend/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"dev": "vite dev",
88
"build": "vite build",
99
"preview": "vite preview",
10-
"start": "node build",
10+
"start": "node dist",
1111
"test": "playwright test",
1212
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
1313
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -49,8 +49,11 @@
4949
"flowbite-svelte": "^0.47.4",
5050
"flowbite-svelte-icons": "^2.0.2",
5151
"globrex": "^0.1.2",
52+
"mdsvex": "^0.12.3",
5253
"node": "^22.13.0",
5354
"pnpm": "^9.15.3",
55+
"rehype-slug": "^6.0.0",
56+
"remark-toc": "^9.0.0",
5457
"svelte-awesome-icons": "^2.0.1"
5558
},
5659
"packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"

‎src/app/frontend/pnpm-lock.yaml

-3,502
This file was deleted.

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

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
// See https://kit.svelte.dev/docs/types#app
22
// for information about these interfaces
3+
4+
5+
export {};
6+
interface Post {
7+
title: string
8+
slug: string
9+
description: string
10+
image?: string
11+
date: string
12+
categories: string[]
13+
published: boolean
14+
}
15+
316
declare global {
417
namespace App {
518
// interface Error {}
@@ -8,5 +21,3 @@ declare global {
821
// interface Platform {}
922
}
1023
}
11-
12-
export {};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script lang="ts">
2+
import { formatDate } from "$lib/utils.js";
3+
import { title, description, url } from "$lib/config";
4+
export let post;
5+
</script>
6+
7+
<svelte:head>
8+
<title>{title}</title>
9+
10+
<meta name="description" content={description} />
11+
12+
<meta property="og:type" content="article" />
13+
<meta property="og:url" content={`${url}/blog`} />
14+
<meta property="og:title" content={title} />
15+
<meta property="og:description" content={description} />
16+
<meta property="og:site_name" content={title} />
17+
<meta property="og:image" content="/blog-banner.webp" />
18+
19+
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
20+
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
21+
</svelte:head>
22+
23+
{#key post.slug}
24+
<a class="card card-hover overflow-hidden w-full max-w-4xl mt-4 mx-4" href={`/blog/${post.slug}`}>
25+
<header class="mb-4">
26+
{#if post.image}
27+
<img src={post.image} alt="blog banner" />
28+
{/if}
29+
</header>
30+
31+
<div class="p-4 space-y-4">
32+
<h3 class="h3" data-toc-ignore>{post.title}</h3>
33+
<article>
34+
<p>
35+
{post.description}
36+
</p>
37+
</article>
38+
</div>
39+
<hr class="opacity-50" />
40+
<footer class="p-4 flex justify-start items-center space-x-4">
41+
<div class="flex-auto flex justify-between items-center">
42+
<h6 class="font-bold" data-toc-ignore>Mailcom project</h6>
43+
<small>On {formatDate(post.date)}</small>
44+
</div>
45+
</footer>
46+
</a>
47+
{/key}

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

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

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
type DateStyle = Intl.DateTimeFormatOptions["dateStyle"]
2+
3+
export function formatDate(date: string, dateStyle: DateStyle = "medium", locales = "en") {
4+
// Safari is mad about dashes in the date
5+
const dateToFormat = new Date(date.replaceAll("-", "/"))
6+
const dateFormatter = new Intl.DateTimeFormat(locales, { dateStyle })
7+
return dateFormatter.format(dateToFormat)
8+
}
+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: "Mailcom is kicking off!"
3+
description: "This is the kick-off post to start this blog."
4+
date: "2025-01-23"
5+
image: /images/logo.png
6+
categories:
7+
- blog
8+
published: true
9+
---
10+
11+
## Contents
12+
13+
## Introduction
14+
15+
This is Mailcom's first blog post!
16+
17+
## What is new
18+
19+
You may now reach Mailcom's website via the www.
+9-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
export const prerender = true;
1+
export const prerender = true;
2+
3+
export const load = ({ url }) => {
4+
const { pathname } = url;
5+
6+
return {
7+
pathname
8+
};
9+
};

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

+9-1
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@
44
55
import { goto } from '$app/navigation';
66
import './global.css';
7+
import { fade } from 'svelte/transition';
78
function gotoDonate() {
89
goto('/donation');
910
}
11+
export let data: { pathname: string };
1012
</script>
1113

14+
1215
<Navbar fluid>
1316
<NavBrand href="/">
1417
<img
@@ -32,7 +35,11 @@
3235
</Navbar>
3336

3437
<main class='p-8 h-auto'>
35-
<slot />
38+
{#key data.pathname}
39+
<div in:fade={{ duration: 300, delay: 400 }} out:fade={{ duration: 300 }}>
40+
<slot />
41+
</div>
42+
{/key}
3643
</main>
3744

3845
<Footer footerType="logo" class='p-8'>
@@ -43,6 +50,7 @@
4350
alt="Romanisches Seminar Logo"
4451
name="Romanisches Seminar"
4552
/>
53+
4654
<FooterLinkGroup ulClass="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
4755
<FooterLink href="/">About</FooterLink>
4856
<FooterLink href="/">Privacy Policy</FooterLink>

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

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
<script>
2-
import { Button, Modal, Card } from 'flowbite-svelte'
3-
let defaultModal = false;
4-
import { Img } from 'flowbite-svelte';
5-
import { ArrowRightOutline } from 'flowbite-svelte-icons';
62
import './global.css';
73
import { goto } from '$app/navigation';
84
95
function gotoDonate() {
106
goto('/donation');
117
}
12-
</script>
138
14-
<main class='p-8 h-auto'>
9+
</script>
1510

16-
<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>
11+
<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>
1712

13+
<main class='p-8 h-auto'>
14+
15+
<article class="section" id="tutorial"><h2>Tutorial</h2></article>
16+
<article class="section" id="b"><h2>Information</h2></article>
17+
<article class="section" id="c"><h2>FAQ</h2></article>
18+
<article class="section" id="d"><h2>Blog</h2></article>
19+
1820
</main>
1921

2022

21-
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { json } from "@sveltejs/kit"
2+
3+
async function getPosts() {
4+
let posts: Post[] = []
5+
6+
const paths = import.meta.glob("/src/posts/*.md", { eager: true })
7+
8+
for (const path in paths) {
9+
const file = paths[path]
10+
const slug = path.split("/").at(-1)?.replace(".md", "")
11+
12+
if (file && typeof file === "object" && "metadata" in file && slug) {
13+
const metadata = file.metadata as Omit<Post, "slug">
14+
const post = { ...metadata, slug } satisfies Post
15+
if (post.published) {
16+
posts.push(post)
17+
}
18+
}
19+
}
20+
21+
posts = posts.sort(
22+
(first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
23+
)
24+
25+
return posts
26+
}
27+
28+
export async function GET() {
29+
const posts = await getPosts()
30+
return json(posts)
31+
}
32+
33+
export const prerender = true
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { ServerLoadEvent } from "@sveltejs/kit"
2+
3+
export async function load({ fetch }: ServerLoadEvent) {
4+
const response = await fetch("/api/posts")
5+
const posts: Post[] = await response.json()
6+
return { posts }
7+
}
+16-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
1-
<main class='p-8 h-auto'>
1+
<script lang="ts">import BlogCard from "$lib/components/BlogCard.svelte";
2+
export let data;
3+
</script>
4+
25

3-
<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>
6+
<main class='p-8 h-auto'>
47

5-
</main>
8+
<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>
9+
10+
</main>
11+
12+
<section class="mb-16">
13+
<ul class="flex flex-col items-center">
14+
{#each data.posts as post}
15+
<BlogCard {post} />
16+
{/each}
17+
</ul>
18+
</section>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -137,5 +137,5 @@ inactiveClass="text-gray-100 dark:text-gray-400 hover:bg-red-400 dark:hover:bg-g
137137
</span>
138138
<p class="mb-2 text-gray-100 dark:text-gray-400"> ...
139139
</p>
140-
</AccordionItem>
140+
</AccordionItem>
141141
</Accordion>
+12-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
body {
22
background-image: url("/images/Alle_Hintergrundbilder.svg");
3-
background-size: contain;
3+
background-size: 80%;
4+
background-repeat: repeat;
45
background-color: #590d08;
56
}
7+
html {
8+
overflow-y:scroll;
9+
scroll-behavior: smooth;
10+
}
11+
12+
@media screen and (prefers-reduced-motion: reduce) {
13+
html {
14+
scroll-behavior: auto;
15+
}
16+
}

‎src/app/frontend/svelte.config.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
import preprocess from "svelte-preprocess";
22
import adapter from '@sveltejs/adapter-node';
33
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
4+
import { mdsvex } from "mdsvex"
5+
import remarkToc from "remark-toc"
6+
import rehypeSlug from "rehype-slug"
7+
8+
/** @type {import('mdsvex').MdsvexOptions} */
9+
const mdsvexOptions = {
10+
extensions: [".md"],
11+
remarkPlugins: [[remarkToc, { tight: true }]],
12+
rehypePlugins: [rehypeSlug],
13+
}
414

515
export default {
6-
preprocess: [vitePreprocess({ script: true })],
16+
extensions: [".svelte", ".md"],
17+
preprocess: [vitePreprocess({ script: true }), mdsvex(mdsvexOptions)],
718
kit: {
819
adapter: adapter({
920
out: 'dist',
1021
precompress: true,
1122
envPrefix: ''
1223
})
1324
}
14-
};
25+
};
26+

0 commit comments

Comments
 (0)
Please sign in to comment.