commit

src/lib/components/custom/post-preview.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { formatDate } from '$lib/utils';
 	import * as config from '$lib/config';
 	import type { Post } from '$lib/types';
@@ -7,10 +8,9 @@
 	export let post: Post;
 </script>
 
-<!-- <li class="post"> -->
 <section>
 	{#if post.cover}
-		<a href={post.slug} class="cover">
+		<a href="{base}/{post.slug}" class="cover">
 			{#if dev}
 				{#await import(/* @vite-ignore */ `/src/posts/${post.slug}${post.cover}`) then { default: src }}
 					<img {src} alt={post.title} loading="lazy" />
@@ -29,15 +29,14 @@
 			<span class="kicker">{post.kicker}</span>
 		{/if}
 		<h3 class="title">
-			<a href={post.slug}>{post.title}</a>
+			<a href="{base}/{post.slug}">{post.title}</a>
 		</h3>
 		<p class="date">{formatDate(post.date)}</p>
 		<p class="description">{post.description}</p>
 		<div class="tags">
 			{#each post.categories as tag}
-				<span class="tag">#{tag}</span>
+				<a href="{base}/category/{tag}" class="tag">#{tag}</a>
 			{/each}
 		</div>
 	</div>
-	<!-- </li> -->
 </section>

src/lib/config.ts

@@ -3,7 +3,7 @@ import { dev } from '$app/environment';
 export const title = 'Strani Anelli';
 export const description = 'SvelteKit blog for poets';
 export const url = dev
-	? 'http://localhost:5173/'
+	? 'http://localhost:5173'
 	: 'https://el3um4s.github.io/memento-sveltekit-and-github-pages';
 export const repository = 'https://github.com/el3um4s/memento-sveltekit-and-github-pages';
 export const pagination = 6;

src/posts/epicureismo-e-stoicismo/post.md

@@ -12,7 +12,7 @@ kicker: Filosofia
 
 L'Epicureismo e lo Stoicismo, due scuole di pensiero dell'antica Grecia e Roma, offrono lezioni di vita ancora rilevanti nel mondo moderno. In questo post, esploriamo come questi insegnamenti antichi possono essere applicati oggi.
 
-![](./epicureismo.png)
+![epicureismo](./epicureismo.png)
 
 L'Epicureismo, fondato da Epicuro, insegna che la chiave della felicità sta nel piacere, inteso come assenza di dolore e disturbo mentale. Questa filosofia suggerisce che dovremmo cercare piaceri moderati e sostenibili, valorizzando l'amicizia e la riflessione personale.
 

src/posts/libri/post.md

@@ -1,6 +1,6 @@
 ---
-title: 'Libri'
-description: 'Libri da leggere'
+title: Libri
+description: Libri da leggere
 date: '2024-09-01'
 categories:
   - Filosofia della Mente
@@ -12,9 +12,3 @@ cover: libri.png
 Ciao ciao ciao
 
 ### Ciao Libro
-
-jasòd cpoWEàFWESPODCXM,N LK JPODW
-sdKCVçlzk **bàpAKFCDV**°çckv
-SDAJ VZòljòlsJDAVçl
-
-osdc aopc iapoi _cad_

src/posts/ricette-della-nonna/post.md

@@ -10,4 +10,4 @@ published: true
 
 Oggi condivido una ricetta speciale: la pasta fatta in casa come la faceva la mia nonna. Un piatto ricco di amore e tradizione.
 
-![Image](./image.jpg)
+![ricette](./image.jpg)

src/routes/[slug]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { formatDate } from '$lib/utils';
 	import * as config from '$lib/config';
 	import { dev } from '$app/environment';
@@ -14,7 +15,6 @@
 		<meta
 			property="og:image"
 			content="{config.repository}/raw/main/src/posts/{data.url}/{data.meta.cover}"
-			data-rh="true"
 		/>
 	{/if}
 	<meta name="author" content="Samuele C. De Tomasi" data-rh="true" />
@@ -39,8 +39,8 @@
 
 		<!-- Tags -->
 		<div class="tags">
-			{#each data.meta.categories as category}
-				<span class="tag">&num;{category}</span>
+			{#each data.meta.categories as tag}
+				<a href="{base}/category/{tag}" class="tag">#{tag}</a>
 			{/each}
 		</div>
 	</hgroup>

src/routes/category/[category]/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import * as config from '$lib/config';
+
+	import PostPreview from '$lib/components/custom/post-preview.svelte';
+	import type { Post } from '$lib/types';
+
+	// export let data;
+	let { data } = $props();
+
+	let totalPosts: Post[] = data.posts;
+	// let currentPage = $derived(parseInt(data.page ?? '0'));
+	let currentPage = $state(0);
+	let totalPages = Math.ceil(totalPosts.length / config.pagination);
+	let start = $derived(currentPage * config.pagination);
+	let end = $derived(
+		currentPage === totalPages - 1 ? totalPosts.length - 1 : start + config.pagination - 1
+	);
+
+	let posts = $derived(totalPosts.slice(start, end + 1));
+
+	let nextPage = $derived(currentPage === totalPages - 1 ? -1 : currentPage + 1);
+	let previousPage = $derived(currentPage === 0 ? -1 : currentPage - 1);
+</script>
+
+<svelte:head>
+	<title>{config.title}</title>
+</svelte:head>
+
+<h1 class="capitalize">Category: {data.category}</h1>
+
+{#if totalPosts.length > 0}
+	<!-- Posts -->
+	<section class="list-posts">
+		<ul class="list">
+			{#each posts as post (post.slug)}
+				<li class="post" transition:slide>
+					<PostPreview {post}></PostPreview>
+				</li>
+			{/each}
+		</ul>
+	</section>
+
+	<!-- Pagination -->
+	<section class=" flex justify-between items-center px-4 py-3">
+		<div class="hidden sm:block">
+			Showing <span class="font-semibold">{start + 1}</span> to
+			<span class="font-semibold">{end + 1}</span> results
+		</div>
+		<div class="flex gap-2">
+			{#if previousPage >= 0}
+				<button on:click={() => currentPage--}>Previous</button>
+			{/if}
+			{#if nextPage >= 0}
+				<button on:click={() => currentPage++}>Next</button>
+			{/if}
+		</div>
+	</section>
+{/if}

src/routes/category/[category]/+page.ts

@@ -0,0 +1,18 @@
+// import { error } from '@sveltejs/kit';
+
+export async function load({ fetch, params }) {
+	const { category } = params;
+
+	const response = await fetch('../../api/posts');
+	const allPosts = await response.json();
+
+	const posts = allPosts.filter((post: { categories: string[] }) => {
+		const listCategories = post.categories.map((p) => p.toLowerCase());
+		return listCategories.includes(category.toLowerCase());
+	});
+
+	return {
+		category,
+		posts
+	};
+}

src/routes/header.svelte

@@ -11,7 +11,7 @@
 <header>
 	<nav>
 		<!-- Title -->
-		<a href="{base}/" class="title">
+		<a href={config.url} class="title">
 			<Logo />
 			<span>{config.title}</span>
 		</a>
@@ -24,23 +24,23 @@
 		<!-- Navigation -->
 		<ul>
 			<li>
-				<a href="{base}/about">
+				<a href="{config.url}/about">
 					<About />
 					<span>About</span>
 				</a>
 			</li>
 			<li>
-				<a href="{base}/contact">
+				<a href="{config.url}/contact">
 					<Contact />
 					<span>Contact</span>
 				</a>
 			</li>
-			<!-- <li>
-				<a href="{base}/rss.xml" target="_blank">
+			<li>
+				<a href="{config.url}/rss.xml" target="_blank">
 					<RSS />
 					<span>RSS</span>
 				</a>
-			</li> -->
+			</li>
 		</ul>
 	</nav>
 </header>

src/routes/rss.xml/+server.ts

@@ -3,6 +3,13 @@ export const prerender = true;
 import * as config from '$lib/config';
 import type { Post } from '$lib/types';
 
+const sanitizeRSS = (s: string): string => {
+	let newString = s.replaceAll('&', '&');
+	newString = newString.replaceAll('<', '$lt');
+	newString = newString.replaceAll('>', '&gt');
+	return newString;
+};
+
 export async function GET({ fetch }) {
 	const response = await fetch('api/posts');
 	const posts: Post[] = await response.json();
@@ -20,10 +27,10 @@ export async function GET({ fetch }) {
 					.map(
 						(post) => `
 						<item>
-							<title>${post.title}</title>
-							<description>${post.description}</description>
-							<link>${config.url}${post.slug}</link>
-							<guid isPermaLink="true">${config.url}${post.slug}</guid>
+							<title>${sanitizeRSS(post.title)}</title>
+							<description>${sanitizeRSS(post.description)}</description>
+							<link>${config.url}/${post.slug}</link>
+							<guid isPermaLink="true">${config.url}/${post.slug}</guid>
 							<pubDate>${new Date(post.date).toUTCString()}</pubDate>
 						</item>
 					`