Merge pull request #22 from ratisbona-coding/feature/prismic-integration

feat: added prismic

customtypes/event/index.json

@@ -0,0 +1,59 @@
+{
+	"id": "event",
+	"label": "Event",
+	"format": "custom",
+	"repeatable": true,
+	"status": true,
+	"json": {
+		"Main": {
+			"uid": {
+				"config": {
+					"label": "UID"
+				},
+				"type": "UID"
+			},
+			"title": {
+				"type": "StructuredText",
+				"config": {
+					"label": "Title",
+					"placeholder": "",
+					"allowTargetBlank": true,
+					"single": "heading5"
+				}
+			},
+			"date": {
+				"type": "Timestamp",
+				"config": {
+					"label": "Date",
+					"placeholder": ""
+				}
+			},
+			"description": {
+				"type": "StructuredText",
+				"config": {
+					"label": "Description",
+					"placeholder": "",
+					"allowTargetBlank": true,
+					"single": "paragraph"
+				}
+			},
+			"link": {
+				"type": "Link",
+				"config": {
+					"label": "Link",
+					"placeholder": "",
+					"allowTargetBlank": false,
+					"select": null
+				}
+			},
+			"image": {
+				"type": "Link",
+				"config": {
+					"label": "Image",
+					"placeholder": "",
+					"select": "media"
+				}
+			}
+		}
+	}
+}

package.json

@@ -9,10 +9,12 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --plugin-search-dir . --write .",
+		"slicemachine": "start-slicemachine"
 	},
 	"devDependencies": {
 		"@popperjs/core": "^2.11.6",
+		"@slicemachine/adapter-sveltekit": "^0.3.18",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/adapter-cloudflare": "^1.0.0-next.40",
 		"@sveltejs/adapter-static": "^1.0.0-next.48",
@@ -28,16 +30,19 @@
 		"postcss": "^8.4.19",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
+		"slice-machine-ui": "^1.15.0",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-preprocess": "^4.10.7",
 		"tailwindcss": "^3.2.3",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",
-		"vite": "^3.1.0"
+		"vite": "^4.4.10"
 	},
 	"type": "module",
 	"dependencies": {
+		"@prismicio/client": "^7.2.0",
+		"@prismicio/svelte": "^1.0.1",
 		"@sveltejs/svelte-scroller": "^2.0.7"
 	}
 }

slicemachine.config.json

@@ -0,0 +1,6 @@
+{
+	"repositoryName": "ratisbona-coding",
+	"adapter": "@slicemachine/adapter-sveltekit",
+	"libraries": ["./src/lib/slices"],
+	"localSliceSimulatorURL": "http://localhost:5173/slice-simulator"
+}

src/lib/prismicio.ts

@@ -0,0 +1,21 @@
+import * as prismic from '@prismicio/client';
+import config from '../../slicemachine.config.json';
+
+/**
+ * The project's Prismic repository name.
+ */
+export const repositoryName = config.repositoryName;
+
+/**
+ * Creates a Prismic client for the project's repository. The client is used to
+ * query content from the Prismic API.
+ *
+ * @param config - Configuration for the Prismic client.
+ */
+export const createClient = (config: prismic.ClientConfig = {}) => {
+	const client = prismic.createClient(repositoryName, {
+		...config
+	});
+
+	return client;
+};

src/lib/slices/index.ts

@@ -0,0 +1,3 @@
+// Code generated by Slice Machine. DO NOT EDIT.
+
+export const components = {};

src/prismicio-types.d.ts

@@ -0,0 +1,95 @@
+// Code generated by Slice Machine. DO NOT EDIT.
+
+import type * as prismic from '@prismicio/client';
+
+type Simplify<T> = { [KeyType in keyof T]: T[KeyType] };
+
+/**
+ * Content for Event documents
+ */
+interface EventDocumentData {
+	/**
+	 * Title field in *Event*
+	 *
+	 * - **Field Type**: Title
+	 * - **Placeholder**: *None*
+	 * - **API ID Path**: event.title
+	 * - **Tab**: Main
+	 * - **Documentation**: https://prismic.io/docs/field#rich-text-title
+	 */
+	title: prismic.TitleField;
+
+	/**
+	 * Date field in *Event*
+	 *
+	 * - **Field Type**: Timestamp
+	 * - **Placeholder**: *None*
+	 * - **API ID Path**: event.date
+	 * - **Tab**: Main
+	 * - **Documentation**: https://prismic.io/docs/field#timestamp
+	 */
+	date: prismic.TimestampField;
+
+	/**
+	 * Description field in *Event*
+	 *
+	 * - **Field Type**: Rich Text
+	 * - **Placeholder**: *None*
+	 * - **API ID Path**: event.description
+	 * - **Tab**: Main
+	 * - **Documentation**: https://prismic.io/docs/field#rich-text-title
+	 */
+	description: prismic.RichTextField;
+
+	/**
+	 * Link field in *Event*
+	 *
+	 * - **Field Type**: Link
+	 * - **Placeholder**: *None*
+	 * - **API ID Path**: event.link
+	 * - **Tab**: Main
+	 * - **Documentation**: https://prismic.io/docs/field#link-content-relationship
+	 */
+	link: prismic.LinkField;
+
+	/**
+	 * Image field in *Event*
+	 *
+	 * - **Field Type**: Link to Media
+	 * - **Placeholder**: *None*
+	 * - **API ID Path**: event.image
+	 * - **Tab**: Main
+	 * - **Documentation**: https://prismic.io/docs/field#link-content-relationship
+	 */
+	image: prismic.LinkToMediaField;
+}
+
+/**
+ * Event document from Prismic
+ *
+ * - **API ID**: `event`
+ * - **Repeatable**: `true`
+ * - **Documentation**: https://prismic.io/docs/custom-types
+ *
+ * @typeParam Lang - Language API ID of the document.
+ */
+export type EventDocument<Lang extends string = string> = prismic.PrismicDocumentWithUID<
+	Simplify<EventDocumentData>,
+	'event',
+	Lang
+>;
+
+export type AllDocumentTypes = EventDocument;
+
+declare module '@prismicio/client' {
+	interface CreateClient {
+		(
+			repositoryNameOrEndpoint: string,
+			options?: prismic.ClientConfig
+		): prismic.Client<AllDocumentTypes>;
+	}
+
+	namespace Content {
+		export type { EventDocument, EventDocumentData, AllDocumentTypes };
+	}
+}

src/routes/+page.svelte

@@ -17,10 +17,10 @@
 <div class="container mx-auto">
 	<Hero />
 	<About />
+	<Termine />
 	<Ziele />
 	<Projekte />
 	<Mitglied />
-	<Termine />
 	<KontaktOldSchool />
 </div>
 <Footer />

src/routes/landing/Termine.svelte

@@ -1,33 +1,76 @@
 <script lang="ts">
-	import BaseComponent from '../components/BaseComponent.svelte';
-	import termine from '$lib/termine.json';
+	import BaseComponent from "../components/BaseComponent.svelte";
+	import { createClient } from "$lib/prismicio";
+	import { asDate } from "@prismicio/client";
+	import { PrismicRichText, PrismicLink } from "@prismicio/svelte";
+
+	const prismicClient = createClient();
+
+	async function getEvents() {
+		const events = await prismicClient.getAllByType("event", {
+			orderings: {
+				field: "my.event.date",
+				direction: "asc"
+			}
+		});
+		return events;
+	}
+
+	let eventsPromise = getEvents();
+
+	// ugly but required
+	var days = ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."];
+	var months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
+
+	function transformMinutes(minutes: number) {
+		if (minutes === 0) return "00";
+		else return minutes;
+	}
+
+	function getFormattedTime(date: Date) {
+		return `${days[date.getDay()]} ${date.getHours()}:${transformMinutes(date.getMinutes())}`;
+	}
 </script>
 
-<BaseComponent headline={'Termine'} id={'termine'}
+<BaseComponent headline={"Termine"} id={"termine"}
 	><div
 		class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-10 mt-4 w-full mb-20"
 	>
-		{#each termine as card}
-			<div class="flex justify-center w-full">
-				<div
-					class="flex flex-col md:flex-row rounded-lg bg-white drop-shadow-xl hover:drop-shadow-2xl hover:cursor-pointer"
-				>
-					<div class="mt-8 md:ml-8 md:mt-8 md:mb-8 text-center md:w-40">
-						<h1 class="text-lime-500 text-5xl md:text-4xl">{card.date.day}</h1>
-						<p class="text-black text-sm overflow-auto">{card.date.month}</p>
-						<p class="text-black text-sm">{card.date.time}</p>
-					</div>
-					<div class="p-8 pb-0 lg:p-0 md:ml-8 ma-4 flex flex-col justify-start">
-						<h5 class=" text-gray-900 text-xl font-medium mb-2 ">{card.title}</h5>
-						<p class="text-gray-700 text-base mb-8 md:mr-8">
-							{card.description}
-						</p>
-						{#if card.link}
-							<a class="text-lime-500 text-base mb-8 md:mr-8" href="{card.link}">Anmeldung & Details</a>
-						{/if}
+		{#await eventsPromise}
+			<p class="text-center">Termine werden geladen...</p>
+		{:then events}
+			{#each events as card}
+				<div class="flex justify-center w-full">
+					<div
+						class="flex flex-col md:flex-row rounded-lg bg-white drop-shadow-xl hover:drop-shadow-2xl hover:cursor-pointer min-w-[90vw]"
+					>
+						<div class="mt-8 md:ml-8 md:mt-8 md:mb-8 text-center md:w-40">
+							<h1 class="text-lime-500 text-5xl md:text-4xl">
+								{asDate(card.data.date)?.getDate()}
+							</h1>
+							<p class="text-black text-sm overflow-auto">
+								{months[asDate(card.data.date)?.getMonth() ?? 0]} {asDate(card.data.date)?.getFullYear()}
+							</p>
+							<p class="text-black text-sm">
+								{getFormattedTime(asDate(card.data.date) ?? new Date())}
+							</p>
+						</div>
+						<div class="p-8 pb-0 md:ml-8 ma-4 flex flex-col justify-start">
+							<h5 class=" text-gray-900 text-xl font-medium mb-2">{card.data.title[0]?.text}</h5>
+							<p class="text-gray-700 text-base mb-8 md:mr-8">
+								<PrismicRichText field={card.data.description} />
+							</p>
+							{#if card.data.link.url}
+								<PrismicLink field={card.data.link} class="text-lime-500 text-base mb-8 md:mr-8">
+									Anmeldung & Details
+								</PrismicLink>
+							{/if}
+						</div>
 					</div>
 				</div>
-			</div>
-		{/each}
+			{/each}
+		{:catch error}
+			<p class="text-red-500 text-center">Termine konnten nicht geladen werden!</p>
+		{/await}
 	</div></BaseComponent
 >

src/routes/slice-simulator/+page.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { SliceSimulator } from '@slicemachine/adapter-sveltekit/simulator';
+	import { SliceZone } from '@prismicio/svelte';
+	import { components } from '$lib/slices';
+</script>
+
+<SliceSimulator let:slices>
+	<SliceZone {slices} {components} />
+</SliceSimulator>

vite.config.ts

@@ -2,7 +2,12 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 
 const config: UserConfig = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server: {
+		fs: {
+			allow: ["slicemachine.config.json"]
+		}
+	}
 };
 
 export default config;