From 1b22800ad55d81cba97b8ac2f17b870cc018c6dd Mon Sep 17 00:00:00 2001
From: Yann-Thomas LE MOIGNE <yann.tho.le.moigne@gmail.com>
Date: Thu, 22 Aug 2024 11:59:58 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20du=20style=20pour=20afficher=20les=20ca?=
 =?UTF-8?q?t=C3=A9gories=20(#1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/[slug]/+page.svelte |  78 +++++++++--------
 src/routes/posts/+page.svelte  | 147 +++++++++++++++++++--------------
 2 files changed, 128 insertions(+), 97 deletions(-)

diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index ae24ddf..579a1e6 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -1,53 +1,65 @@
 <script lang="ts">
-	import { formatDate } from '$lib/utils'
-	export let data;
+  import { formatDate } from "$lib/utils";
+  export let data;
 </script>
 
 <!-- SEO -->
 <svelte:head>
-	<title>{data.meta.title}</title>
-	<meta property="og:type" content="article" />
-	<meta property="og:title" content={data.meta.title} />
-	<meta name="description" content={data.meta.description} />
+  <title>{data.meta.title}</title>
+  <meta property="og:type" content="article" />
+  <meta property="og:title" content={data.meta.title} />
+  <meta name="description" content={data.meta.description} />
 </svelte:head>
 
 {#if data.meta.coverSrc}
-	{#if data.meta.coverAlt}
-		<img src={data.meta.coverSrc} alt={data.meta.coverAlt} loading="lazy" />
-	{:else}
-		<img src={data.meta.coverSrc} alt={data.meta.title} loading="lazy" />
-	{/if}	
+  {#if data.meta.coverAlt}
+    <img src={data.meta.coverSrc} alt={data.meta.coverAlt} loading="lazy" />
+  {:else}
+    <img src={data.meta.coverSrc} alt={data.meta.title} loading="lazy" />
+  {/if}
 {/if}
 
 <article>
   <!-- Title -->
   <div>
-      <h1>{data.meta.title}</h1>
-	  <p>{data.meta.readingTime.text}</p>
-      <p>Published at {formatDate(data.meta.date)}</p>
+    <h1>{data.meta.title}</h1>
+    <p>{data.meta.readingTime.text}</p>
+    <p>Published at {formatDate(data.meta.date)}</p>
   </div>
 
-	<div class="tags">
-		{#each data.meta.categories as category}
-			<span>{category}</span>
-		{/each}
-	</div>
+  <section class="categories">
+    {#each data.meta.categories as category}
+      <span>{category}</span>
+    {/each}
+  </section>
 
   <!-- Post -->
-	<div class="prose">
-		<svelte:component this={data.content} />
-	</div>
+  <div class="prose">
+    <svelte:component this={data.content} />
+  </div>
 </article>
 
 <style>
-	img {
-		position: sticky;
-		top: 0;
-		z-index: 10;
-	}
-
-	article {
-		background-color: white;
-		z-index: 20;
-	}
-</style>
\ No newline at end of file
+  img {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+  article {
+    background-color: white;
+    z-index: 20;
+  }
+
+  section.categories {
+    display: flex;
+    gap: 0.5rem;
+
+    & > span {
+      color: var(--color-theme-1);
+      font-size: 0.8rem;
+      font-weight: 500;
+      text-transform: capitalize;
+    }
+  }
+</style>
diff --git a/src/routes/posts/+page.svelte b/src/routes/posts/+page.svelte
index 8116ff2..60be5df 100644
--- a/src/routes/posts/+page.svelte
+++ b/src/routes/posts/+page.svelte
@@ -1,84 +1,103 @@
 <script lang="ts">
-	import { formatDate } from '$lib/utils';
-	import { base } from '$app/paths';
-	export let data;
+  import { formatDate } from "$lib/utils";
+  import { base } from "$app/paths";
+  export let data;
 </script>
 
 <svelte:head>
-	<title>Liste des postes</title>
-	<meta name="description" content="Liste des postes ordonné par date" />
+  <title>Liste des postes</title>
+  <meta name="description" content="Liste des postes ordonné par date" />
 </svelte:head>
 
 <!-- Posts -->
 <section>
-	<ul>
-		{#each data.posts as post}
-		<li class="post">
-			<a href="{base}/{post.slug}">
-				<section class="title">
-					<h2>{post.title}</h2>
-					<section class="data">
-						<span class="time">{post.readingTime.text}</span>
-						<span class="date">{formatDate(post.date)}</span>
-					</section>
-				</section>
-				<p>{post.description}</p>
-			</a>
-		</li>
-		{/each}
-	</ul>
+  <ul>
+    {#each data.posts as post}
+      <li class="post">
+        <a href="{base}/{post.slug}">
+          <section class="title">
+            <h2>{post.title}</h2>
+            <section class="data">
+              <span class="time">{post.readingTime.text}</span>
+              <span class="date">{formatDate(post.date)}</span>
+            </section>
+          </section>
+          <section class="categories">
+            {#each post.categories as category}
+              <span>
+                {category}
+              </span>
+            {/each}
+          </section>
+          <p>{post.description}</p>
+        </a>
+      </li>
+    {/each}
+  </ul>
 </section>
 
 <style>
-	a {
-		color: var(--color-text);
-		text-decoration: none;
+  a {
+    color: var(--color-text);
+    text-decoration: none;
 
-		& h2 {
-			color: var(--color-theme-1);
-		}
-	}
+    & h2 {
+      color: var(--color-theme-1);
+    }
+  }
 
-	a:hover h2 {
-		text-decoration: underline;
-	}
+  a:hover h2 {
+    text-decoration: underline;
+  }
 
-	ul {
-		padding: 0;
-	}
+  ul {
+    padding: 0;
+  }
 
-	.post {
-		margin-bottom: 1rem;
-		list-style: none;
-		padding: 1rem;
-		border: 1px solid hsl(0, 0%, 100%);
+  .post {
+    margin-bottom: 1rem;
+    list-style: none;
+    padding: 1rem;
+    border: 1px solid hsl(0, 0%, 100%);
 
-		&:hover {
-			border-color: hsl(0, 0%, 90%);
-		}
+    & section.categories {
+      display: flex;
+      gap: 0.5rem;
 
-		& .title {
-			@media screen and (width >= 768px){
-				display: flex;
-				align-items: baseline;
-				justify-content: space-between;
-			}
+      & > span {
+        color: var(--color-theme-1);
+        font-size: 0.8rem;
+        font-weight: 500;
+        text-transform: capitalize;
+      }
+    }
 
-			& .data {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-end;
+    &:hover {
+      border-color: hsl(0, 0%, 90%);
+    }
 
-				@media screen and (width < 768px){
-					flex-direction: row-reverse;
-					justify-content: space-between;
-				}
-			}
+    & .title {
+      @media screen and (width >= 768px) {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+      }
 
-			& .time {
-				font-size: 0.8rem;
-				color: #666;
-			}
-		}
-	}
-</style>
\ No newline at end of file
+      & .data {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+
+        @media screen and (width < 768px) {
+          flex-direction: row-reverse;
+          justify-content: space-between;
+        }
+      }
+
+      & .time {
+        font-size: 0.8rem;
+        color: #666;
+      }
+    }
+  }
+</style>