Merge pull request #51 from MTES-MCT/feat/blog

feat: blog index page

client/eslint.config.js

@@ -12,7 +12,8 @@ export default tseslint.config(
   ...svelte.configs['flat/prettier'],
   {
     rules: {
-      'svelte/valid-compile': ['error', { ignoreWarnings: true }],
+      'svelte/valid-compile': 'warn',
+      'svelte/no-at-html-tags': 'warn',
     },
     languageOptions: {
       globals: {

client/src/lib/components/blogPost/blogPost.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Props } from './definition';
+
+  const { title, description, firstPublishedAt, slug }: Props = $props();
+
+  const publishedAt = new Intl.DateTimeFormat('fr-FR', {
+    dateStyle: 'long',
+    timeStyle: 'short',
+  }).format(new Date(firstPublishedAt));
+</script>
+
+<div class="fr-card fr-enlarge-link">
+  <div class="fr-card__body">
+    <div class="fr-card__content">
+      <h3 class="fr-card__title">
+        <a href={`/blog/${slug}`}>{title}</a>
+      </h3>
+      <p class="fr-card__desc">{description}</p>
+      <div class="fr-card__end">
+        <p class="fr-card__detail fr-icon-warning-fill">
+          Publié le {publishedAt}
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

client/src/lib/components/blogPost/definition.ts

@@ -0,0 +1,3 @@
+import type { BlogPost } from '$lib/utils/definitions';
+
+export type Props = BlogPost;

client/src/lib/utils/definitions.ts

@@ -113,3 +113,40 @@ export type BackgroundClasss =
   | 'fr-background-action-low--brown-caramel'
   | 'fr-background-action-low--brown-opera'
   | 'fr-background-action-low--beige-gris-galet';
+
+export type WagtailApiItemsResponse = {
+  meta: {
+    total_count: number;
+  };
+  items: WagtailApiItemResponse[];
+};
+
+export type WagtailApiItemResponse = {
+  id: number;
+  meta: {
+    type: string;
+    slug: string;
+    first_published_at: string;
+    search_description: string;
+  };
+  title: string;
+  body?: [
+    {
+      type: string;
+      value: string;
+    },
+  ];
+};
+
+export type BlogPost = {
+  title: string;
+  description: string;
+  firstPublishedAt: string;
+  slug: string;
+  body?: [
+    {
+      type: string;
+      value: string;
+    },
+  ];
+};

client/src/routes/blog/+page.server.ts

@@ -0,0 +1,22 @@
+import type { PageServerLoad } from './$types';
+import { BORIS_CMS_URL } from '$env/static/private';
+import type { BlogPost, WagtailApiItemsResponse } from '$lib/utils/definitions';
+import type { Data } from './definitions';
+
+export const load: PageServerLoad = async ({ fetch }): Promise<Data> => {
+  const response = await fetch(
+    `${BORIS_CMS_URL}/api/v2/pages?type=blog.BlogEntryPage&fields=*,-body&order=-first_published_at`,
+  );
+  const data: WagtailApiItemsResponse = await response.json();
+
+  const blogPosts: BlogPost[] = data.items.map((item) => ({
+    title: item.title,
+    description: item.meta.search_description,
+    firstPublishedAt: item.meta.first_published_at,
+    slug: item.meta.slug,
+  }));
+
+  return {
+    blogPosts,
+  };
+};

client/src/routes/blog/+page.svelte

@@ -1 +1,23 @@
-<h1>Blog</h1>
+<script lang="ts">
+  import type { Props } from './definitions';
+  import Section from '$lib/components/section/section.svelte';
+  import BlogPost from '$lib/components/blogPost/blogPost.svelte';
+
+  const { data }: Props = $props();
+</script>
+
+<Section
+  title="Blog"
+  titleElement="h1">
+  <div class="fr-grid-row fr-grid-row--gutters">
+    {#each data.blogPosts as { title, description, firstPublishedAt, slug }}
+      <div class="fr-col-12 fr-col-md-6">
+        <BlogPost
+          {title}
+          {description}
+          {slug}
+          {firstPublishedAt} />
+      </div>
+    {/each}
+  </div>
+</Section>

client/src/routes/blog/[slug]/+page.server.ts

@@ -0,0 +1,33 @@
+import type { PageServerLoad } from './$types';
+import { BORIS_CMS_URL } from '$env/static/private';
+import type { Data } from './definitions';
+import type {
+  BlogPost,
+  WagtailApiItemResponse,
+  WagtailApiItemsResponse,
+} from '$lib/utils/definitions';
+
+export const load: PageServerLoad = async ({
+  params,
+  fetch,
+}): Promise<Data> => {
+  const { slug } = params;
+  const response = await fetch(`${BORIS_CMS_URL}/api/v2/pages?slug=${slug}`);
+  const data: WagtailApiItemsResponse = await response.json();
+  const { id } = data.items[0];
+
+  const blogPostResponse = await fetch(`${BORIS_CMS_URL}/api/v2/pages/${id}`);
+  const blogPostData: WagtailApiItemResponse = await blogPostResponse.json();
+
+  const blogPost: BlogPost = {
+    title: blogPostData.title,
+    description: blogPostData.meta.search_description,
+    firstPublishedAt: blogPostData.meta.first_published_at,
+    slug,
+    body: blogPostData.body,
+  };
+
+  return {
+    blogPost,
+  };
+};

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

@@ -1,7 +1,17 @@
 <script lang="ts">
+  import Section from '$components/section/section.svelte';
   import type { Props } from './definitions';
 
   const { data }: Props = $props();
+  const { blogPost } = data;
 </script>
 
-<h1>{data.slug}</h1>
+<Section
+  title={blogPost.title}
+  titleElement="h1">
+  {#if blogPost.body}
+    {#each blogPost.body as element}
+      {@html element.value}
+    {/each}
+  {/if}
+</Section>

client/src/routes/blog/[slug]/definitions.ts

@@ -1,5 +1,7 @@
+import type { BlogPost } from '$lib/utils/definitions';
+
 export type Data = {
-  slug: string;
+  blogPost: BlogPost;
 };
 
 export type Props = {

client/src/routes/blog/definitions.ts

@@ -0,0 +1,9 @@
+import type { BlogPost } from '$lib/utils/definitions';
+
+export type Data = {
+  blogPosts: BlogPost[];
+};
+
+export type Props = {
+  data: Data;
+};

client/src/routes/simuler-mon-eligibilite/+page.server.ts

@@ -2,10 +2,8 @@ import type { PageServerLoad } from './$types';
 import type { Data } from './definitions';
 import { LANDBOT_CONFIG_URL } from '$env/static/private';
 
-export const load: PageServerLoad = () => {
-  const data: Data = {
+export const load: PageServerLoad = (): Data => {
+  return {
     landbotConfigUrl: LANDBOT_CONFIG_URL,
   };
-
-  return data;
 };