fix(docs): add guides resource

apps/docs/content/guides/sumo-test/index.svx

@@ -0,0 +1,127 @@
+---
+layout: false
+title: Sumo Test
+author: YOUR_NAME
+slug: sumo-test
+headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor eget elit vel semper. Cras.
+keywords: ['keyword_1', 'keyword_2']
+created_at: 01-Oct-2023
+updated_at: 01-Oct-2023
+cover: dummy.jpeg
+draft: false
+---
+
+<script lang="ts">
+  import { YouTube } from '@sveltinio/media-content';
+
+  const youtubeSampleVideoSettings: IYouTubeSettings = {
+    autoplay: false,
+    ccLangPref: 'it',
+    color: 'white',
+    controls: true
+  }
+</script>
+
+## Headings
+
+The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+
+## Paragraph
+
+Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
+
+Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
+
+## Blockquotes
+
+The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
+
+### w/o attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Note** that you can use *Markdown syntax* within a blockquote.
+
+### w/ attribution
+
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
+
+## Media
+
+Embed media content with [@sveltinio/media-content](https://github.com/sveltinio/components-library/tree/main/packages/media-content)
+
+<YouTube
+    id="pJcbZr5VlV4"
+    title="Svelte Summit Fall 2022 - Day 1"
+    settings={youtubeSampleVideoSettings}
+/>
+
+## Tables
+
+Normal markdown stuff works too:
+
+| First Header   |    Second Header   |
+| -------------- | :----------------: |
+| Content Cell 1 |  `Content` Cell 1  |
+| Content Cell 2 | **Content** Cell 2 |
+
+## Lists
+
+### Unordered
+
+- Ac tristique libero volutpat at
+- Facilisis in pretium nisl aliquet
+- Nulla volutpat aliquam velit
+- Very easy!
+
+### Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+### Nested
+
+* Fruit
+  * Apple
+  * Orange
+  * Banana
+* Dairy
+  * Milk
+  * Cheese
+
+## Other Elements
+
+abbr, sub, sup, kbd, mark
+
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+## Emoij
+
+:dog: :+1:
+
+## Code Blocks
+
+### with backticks
+
+```go
+# main.go
+
+package main
+
+import "fmt"
+
+func main() {
+    fmt.Println("hello world")
+}
+```

apps/docs/src/lib/guides/loadGuides.ts

@@ -0,0 +1,64 @@
+import type { Sveltin } from '$sveltin';
+
+export async function list() {
+	const contentFiles = import.meta.glob('/content/guides/**/*.{svelte.md,md,svx}');
+	const contentFilesArray = Object.entries(contentFiles);
+	const contents = await Promise.all(
+		contentFilesArray.map(async ([path, resolver]) => {
+			const data = await resolver();
+			const result: Sveltin.DynamicObject = {
+				meta: data['metadata'],
+				path: path
+			};
+			return result;
+		})
+	);
+	const publishedByDate = contents
+		.filter((elem) => !elem.meta['draft'])
+		.sort((a, b) => (a.meta['created_at'] < b.meta['created_at'] ? 1 : -1));
+
+	return publishedByDate;
+};
+
+
+export async function getSingle(slug: string) {
+	const resourceName = 'guides';
+	const publishedByDate = await list();
+
+	const selected = publishedByDate.filter((item) => {
+		return item.meta['slug'] == slug;
+	});
+
+	if (selected.length != 0) {
+		const selectedItemIndex = publishedByDate.findIndex((elem) => slug === elem.meta['slug']);
+		const selectedItem = publishedByDate[selectedItemIndex];
+		const current: Sveltin.ResourceContent = {
+			resource: resourceName,
+			metadata: selectedItem.meta as Sveltin.YAMLFrontmatter
+		};
+		const previous: Sveltin.ResourceContent = {
+			resource: resourceName,
+			metadata: <Sveltin.YAMLFrontmatter>{
+				title: publishedByDate[selectedItemIndex + 1]?.meta['title'],
+				slug: publishedByDate[selectedItemIndex + 1]?.meta['slug']
+			}
+		};
+		const next: Sveltin.ResourceContent = {
+			resource: resourceName,
+			metadata: <Sveltin.YAMLFrontmatter>{
+				title: publishedByDate[selectedItemIndex - 1]?.meta['title'],
+				slug: publishedByDate[selectedItemIndex - 1]?.meta['slug']
+			}
+		};
+
+		return {
+			status: 200,
+			current,
+			previous,
+			next
+		};
+	}
+	return {
+		status: 404
+	};
+};

apps/docs/src/routes/api/v1/guides/+server.ts

@@ -0,0 +1,18 @@
+import type { RequestHandler } from './$types';
+import { error } from '@sveltejs/kit';
+import { list } from '$lib/guides/loadGuides';
+
+export const prerender = false;
+
+export const GET = (async () => {
+	const data = await list();
+	const body = data.map((item) => ({
+		...item
+	}));
+
+	if (body) {
+		return new Response(JSON.stringify(body));
+	}
+
+	throw error(404, 'Nothing here yet');
+}) satisfies RequestHandler;

apps/docs/src/routes/api/v1/guides/[slug=string]/+server.ts

@@ -0,0 +1,20 @@
+import type { RequestHandler } from './$types';
+import { error } from '@sveltejs/kit';
+import { getSingle } from '$lib/guides/loadGuides';
+
+export const prerender = false;
+
+export const GET = (async ({ url }) => {
+	const { pathname } = url;
+	const slug = pathname.substring(pathname.lastIndexOf('/') + 1);
+
+	if (slug) {
+		const data = await getSingle(slug);
+
+		if (data) {
+			return new Response(JSON.stringify(data));
+		}
+	}
+
+	throw error(404, 'Guides not found');
+}) satisfies RequestHandler;

apps/docs/src/routes/guides/+page.server.ts

@@ -0,0 +1,28 @@
+import type { PageServerLoad } from './$types';
+import type { Sveltin } from '$sveltin';
+import { error } from '@sveltejs/kit';
+import { list } from '$lib/guides/loadGuides';
+
+export const load = (async () => {
+	const resourceName = 'guides';
+	const data = await list();
+	const items: Array<Sveltin.ResourceContent> = [];
+
+	data.forEach((elem) => {
+		const item: Sveltin.ResourceContent = {
+			resource: resourceName,
+			metadata: <Sveltin.YAMLFrontmatter>elem.meta,
+			html: ''
+		};
+		items.push(item);
+	});
+
+	if (resourceName && items) {
+		return {
+			resourceName,
+			items
+		};
+	}
+
+	throw error(404, 'Not found');
+}) satisfies PageServerLoad;

apps/docs/src/routes/guides/+page.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import type { SEOWebPage } from '@sveltinio/seo/types';
+	import { assets, base } from '$app/paths';
+	import { page } from '$app/stores';
+	import { website } from '$config/website.js';
+	import { Breadcrumbs, Card, CardAction, CardImage } from '@sveltinio/widgets';
+	import { OpenGraphType, TwitterCardType } from '@sveltinio/seo/types';
+	import { PageMetaTags, JsonLdWebPage, JsonLdBreadcrumbs } from '@sveltinio/seo';
+	import { canonicalPageUrl, toTitle, getFavicon } from '$lib/utils/strings.js';
+
+	export let data: PageData;
+
+	const pageDescription = `Here you can find the list of all available guides.`;
+	// page keywords as comma separeted values
+	const pageKeywords: Array<string> = [];
+
+	$: ({ resourceName, items } = data);
+	$: pathname = $page.url.pathname.replace(/^(.)|(.)$/g, '');
+	$: guidesIndexPage = <SEOWebPage>{
+		url: canonicalPageUrl($page.url.pathname, website.baseURL),
+		title: toTitle(resourceName),
+		description: pageDescription,
+		keywords: pageKeywords || website.keywords,
+		image: getFavicon(website),
+		opengraph: {
+			type: OpenGraphType.Article
+		},
+		twitter: {
+			type: TwitterCardType.Summary
+		}
+	};
+</script>
+
+<PageMetaTags data={ guidesIndexPage } />
+<JsonLdWebPage data={ guidesIndexPage } />
+<JsonLdBreadcrumbs url={$page.url.href} />
+
+<section class="page-wrapper">
+	<Breadcrumbs url={$page.url.href} />
+	<div class="page-wrapper__content">
+		{#if items.length != 0}
+			<h1>{toTitle(resourceName)}</h1>
+			<div class="cards">
+				{#each items as item}
+					<Card
+					title={item.metadata.title}
+					content={item.metadata.headline}
+					href="{base}/{item.resource}/{item.metadata.slug}"
+					>
+						<CardImage
+							slot="cardImage"
+							alt={item.metadata.title}
+							src="{assets}/resources/{item.resource}/{item.metadata.slug}/{item.metadata.cover}"
+						/>
+						<CardAction slot="cardAction" href="{base}/{item.resource}/{item.metadata.slug}" />
+					</Card>
+				{/each}
+			</div>
+		{:else}
+		<h2 class="message message--warning">
+			Nothing to show here! Create some content first and reload the page:
+			<span><pre><code class="text-default">sveltin new content {pathname}/getting-started</code></pre></span>
+		</h2>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.cards {
+		padding: 4px;
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: center;
+		align-content: center;
+		column-gap: 2rem;
+		row-gap: 2rem;
+	}
+
+	@media screen and (min-width: 1024px) {
+		.cards {
+			flex-direction: row;
+			justify-content: flex-start;
+		}
+	}
+</style>