From 7369022aa5f5479f956bc7a6fe0b6f842d3041f4 Mon Sep 17 00:00:00 2001 From: benpaquier Date: Tue, 12 Nov 2024 18:01:51 +0100 Subject: [PATCH 1/4] feat: blog index page --- .../lib/components/blogPost/blogPost.svelte | 23 +++++++++++ .../src/lib/components/blogPost/definition.ts | 3 ++ client/src/lib/utils/dates.ts | 26 +++++++++++++ client/src/lib/utils/definitions.ts | 38 +++++++++++++++++++ client/src/routes/blog/+page.server.ts | 20 ++++++++++ client/src/routes/blog/+page.svelte | 26 ++++++++++++- client/src/routes/blog/definitions.ts | 7 ++++ 7 files changed, 142 insertions(+), 1 deletion(-) create mode 100644 client/src/lib/components/blogPost/blogPost.svelte create mode 100644 client/src/lib/components/blogPost/definition.ts create mode 100644 client/src/lib/utils/dates.ts create mode 100644 client/src/routes/blog/+page.server.ts create mode 100644 client/src/routes/blog/definitions.ts diff --git a/client/src/lib/components/blogPost/blogPost.svelte b/client/src/lib/components/blogPost/blogPost.svelte new file mode 100644 index 0000000..9e0fdc0 --- /dev/null +++ b/client/src/lib/components/blogPost/blogPost.svelte @@ -0,0 +1,23 @@ + + +
+
+
+

+ {title} +

+

{description}

+
+

+ Publié le {day} à {time} +

+
+
+
+
diff --git a/client/src/lib/components/blogPost/definition.ts b/client/src/lib/components/blogPost/definition.ts new file mode 100644 index 0000000..fad5dcd --- /dev/null +++ b/client/src/lib/components/blogPost/definition.ts @@ -0,0 +1,3 @@ +import type { BlogPost } from '$lib/utils/definitions'; + +export type Props = BlogPost; diff --git a/client/src/lib/utils/dates.ts b/client/src/lib/utils/dates.ts new file mode 100644 index 0000000..319ddb6 --- /dev/null +++ b/client/src/lib/utils/dates.ts @@ -0,0 +1,26 @@ +import type { DetailedDate } from './definitions'; + +// TODO: write specs +export const getDetailedDate = (date: string): DetailedDate => { + const currentDate = new Date(date); + const day = currentDate.toLocaleString('fr', { + day: '2-digit', + month: 'long', + year: 'numeric', + }); + + let hours = currentDate.toLocaleString('fr-FR', { + hour: 'numeric', + }); + + hours = hours.replace(' ', ''); + + const minutes = currentDate.toLocaleString('fr-FR', { + minute: 'numeric', + }); + + return { + day, + time: `${hours}${minutes}`, + }; +}; diff --git a/client/src/lib/utils/definitions.ts b/client/src/lib/utils/definitions.ts index 48991cb..4cd5e54 100644 --- a/client/src/lib/utils/definitions.ts +++ b/client/src/lib/utils/definitions.ts @@ -113,3 +113,41 @@ 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; + detail_url: 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?: string; +}; + +export type DetailedDate = { + day: string; + time: string; +}; diff --git a/client/src/routes/blog/+page.server.ts b/client/src/routes/blog/+page.server.ts new file mode 100644 index 0000000..81cecd2 --- /dev/null +++ b/client/src/routes/blog/+page.server.ts @@ -0,0 +1,20 @@ +import { BORIS_CMS_URL } from '$env/static/private'; +import type { BlogPost, WagtailApiItemsResponse } from '$lib/utils/definitions'; + +export const load = async () => { + 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, + }; +}; diff --git a/client/src/routes/blog/+page.svelte b/client/src/routes/blog/+page.svelte index fcc0bb9..1e03cfc 100644 --- a/client/src/routes/blog/+page.svelte +++ b/client/src/routes/blog/+page.svelte @@ -1 +1,25 @@ -

Blog

+ + +
+
+ {#each data.blogPosts as { title, description, firstPublishedAt, slug }} +
+ +
+ {/each} +
+
diff --git a/client/src/routes/blog/definitions.ts b/client/src/routes/blog/definitions.ts new file mode 100644 index 0000000..30d5ccc --- /dev/null +++ b/client/src/routes/blog/definitions.ts @@ -0,0 +1,7 @@ +import type { BlogPost } from '$lib/utils/definitions'; + +export type Props = { + data: { + blogPosts: BlogPost[]; + }; +}; From 96b72b90a72409a977424a9e62bcd12ada970eef Mon Sep 17 00:00:00 2001 From: benpaquier Date: Wed, 13 Nov 2024 17:09:04 +0100 Subject: [PATCH 2/4] refacto: cleanup date formating --- .../lib/components/blogPost/blogPost.svelte | 9 ++++--- client/src/lib/utils/dates.ts | 26 ------------------- 2 files changed, 6 insertions(+), 29 deletions(-) delete mode 100644 client/src/lib/utils/dates.ts diff --git a/client/src/lib/components/blogPost/blogPost.svelte b/client/src/lib/components/blogPost/blogPost.svelte index 9e0fdc0..bfca295 100644 --- a/client/src/lib/components/blogPost/blogPost.svelte +++ b/client/src/lib/components/blogPost/blogPost.svelte @@ -1,9 +1,12 @@
@@ -15,7 +18,7 @@

{description}

- Publié le {day} à {time} + Publié le {publishedAt}

diff --git a/client/src/lib/utils/dates.ts b/client/src/lib/utils/dates.ts deleted file mode 100644 index 319ddb6..0000000 --- a/client/src/lib/utils/dates.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { DetailedDate } from './definitions'; - -// TODO: write specs -export const getDetailedDate = (date: string): DetailedDate => { - const currentDate = new Date(date); - const day = currentDate.toLocaleString('fr', { - day: '2-digit', - month: 'long', - year: 'numeric', - }); - - let hours = currentDate.toLocaleString('fr-FR', { - hour: 'numeric', - }); - - hours = hours.replace(' ', ''); - - const minutes = currentDate.toLocaleString('fr-FR', { - minute: 'numeric', - }); - - return { - day, - time: `${hours}${minutes}`, - }; -}; From 7d57825cc1f07b89843e6c31b5317eed829db80b Mon Sep 17 00:00:00 2001 From: benpaquier Date: Wed, 13 Nov 2024 17:44:29 +0100 Subject: [PATCH 3/4] feat: blog post single page --- client/eslint.config.js | 3 +- client/src/lib/utils/definitions.ts | 7 +++- client/src/routes/blog/+page.server.ts | 4 ++- client/src/routes/blog/+page.svelte | 2 -- client/src/routes/blog/[slug]/+page.server.ts | 36 +++++++++++++++++++ client/src/routes/blog/[slug]/+page.svelte | 12 ++++++- client/src/routes/blog/[slug]/+page.ts | 14 -------- client/src/routes/blog/[slug]/definitions.ts | 4 ++- client/src/routes/blog/definitions.ts | 8 +++-- .../simuler-mon-eligibilite/+page.server.ts | 6 ++-- 10 files changed, 68 insertions(+), 28 deletions(-) create mode 100644 client/src/routes/blog/[slug]/+page.server.ts delete mode 100644 client/src/routes/blog/[slug]/+page.ts diff --git a/client/eslint.config.js b/client/eslint.config.js index f9b64cb..da0a406 100644 --- a/client/eslint.config.js +++ b/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: { diff --git a/client/src/lib/utils/definitions.ts b/client/src/lib/utils/definitions.ts index 4cd5e54..28e0234 100644 --- a/client/src/lib/utils/definitions.ts +++ b/client/src/lib/utils/definitions.ts @@ -144,7 +144,12 @@ export type BlogPost = { description: string; firstPublishedAt: string; slug: string; - body?: string; + body?: [ + { + type: string; + value: string; + }, + ]; }; export type DetailedDate = { diff --git a/client/src/routes/blog/+page.server.ts b/client/src/routes/blog/+page.server.ts index 81cecd2..419ab86 100644 --- a/client/src/routes/blog/+page.server.ts +++ b/client/src/routes/blog/+page.server.ts @@ -1,7 +1,9 @@ +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 = async () => { +export const load: PageServerLoad = async ({ fetch }): Promise => { const response = await fetch( `${BORIS_CMS_URL}/api/v2/pages?type=blog.BlogEntryPage&fields=*,-body&order=-first_published_at`, ); diff --git a/client/src/routes/blog/+page.svelte b/client/src/routes/blog/+page.svelte index 1e03cfc..389dced 100644 --- a/client/src/routes/blog/+page.svelte +++ b/client/src/routes/blog/+page.svelte @@ -4,8 +4,6 @@ import BlogPost from '$lib/components/blogPost/blogPost.svelte'; const { data }: Props = $props(); - - console.log(data.blogPosts);
=> { + 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 { title, body } = blogPostData; + const { first_published_at, search_description } = blogPostData.meta; + + const blogPost: BlogPost = { + title, + description: search_description, + firstPublishedAt: first_published_at, + slug, + body, + }; + + return { + blogPost, + }; +}; diff --git a/client/src/routes/blog/[slug]/+page.svelte b/client/src/routes/blog/[slug]/+page.svelte index 1dfd925..9274496 100644 --- a/client/src/routes/blog/[slug]/+page.svelte +++ b/client/src/routes/blog/[slug]/+page.svelte @@ -1,7 +1,17 @@ -

{data.slug}

+
+ {#if blogPost.body} + {#each blogPost.body as element} + {@html element.value} + {/each} + {/if} +
diff --git a/client/src/routes/blog/[slug]/+page.ts b/client/src/routes/blog/[slug]/+page.ts deleted file mode 100644 index 7f185ff..0000000 --- a/client/src/routes/blog/[slug]/+page.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { PageLoad } from './$types'; -import type { Data } from './definitions'; - -export const load: PageLoad = ({ params }) => { - const data: Data = { - slug: params.slug, - }; - - return data; -}; - -export async function entries() { - return [{ slug: "Le BRS, kesako ? (exemple d'article)" }]; -} diff --git a/client/src/routes/blog/[slug]/definitions.ts b/client/src/routes/blog/[slug]/definitions.ts index e52bddb..b86833c 100644 --- a/client/src/routes/blog/[slug]/definitions.ts +++ b/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 = { diff --git a/client/src/routes/blog/definitions.ts b/client/src/routes/blog/definitions.ts index 30d5ccc..ba274e3 100644 --- a/client/src/routes/blog/definitions.ts +++ b/client/src/routes/blog/definitions.ts @@ -1,7 +1,9 @@ import type { BlogPost } from '$lib/utils/definitions'; +export type Data = { + blogPosts: BlogPost[]; +}; + export type Props = { - data: { - blogPosts: BlogPost[]; - }; + data: Data; }; diff --git a/client/src/routes/simuler-mon-eligibilite/+page.server.ts b/client/src/routes/simuler-mon-eligibilite/+page.server.ts index b922109..292bca7 100644 --- a/client/src/routes/simuler-mon-eligibilite/+page.server.ts +++ b/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; }; From 442474c097f73ba09f99551a0f820703c09ac3ac Mon Sep 17 00:00:00 2001 From: benpaquier Date: Wed, 13 Nov 2024 17:51:30 +0100 Subject: [PATCH 4/4] refacto: cleanup code --- client/src/lib/utils/definitions.ts | 6 ------ client/src/routes/blog/[slug]/+page.server.ts | 11 ++++------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/client/src/lib/utils/definitions.ts b/client/src/lib/utils/definitions.ts index 28e0234..1a751ba 100644 --- a/client/src/lib/utils/definitions.ts +++ b/client/src/lib/utils/definitions.ts @@ -125,7 +125,6 @@ export type WagtailApiItemResponse = { id: number; meta: { type: string; - detail_url: string; slug: string; first_published_at: string; search_description: string; @@ -151,8 +150,3 @@ export type BlogPost = { }, ]; }; - -export type DetailedDate = { - day: string; - time: string; -}; diff --git a/client/src/routes/blog/[slug]/+page.server.ts b/client/src/routes/blog/[slug]/+page.server.ts index 2143257..88558a4 100644 --- a/client/src/routes/blog/[slug]/+page.server.ts +++ b/client/src/routes/blog/[slug]/+page.server.ts @@ -19,15 +19,12 @@ export const load: PageServerLoad = async ({ const blogPostResponse = await fetch(`${BORIS_CMS_URL}/api/v2/pages/${id}`); const blogPostData: WagtailApiItemResponse = await blogPostResponse.json(); - const { title, body } = blogPostData; - const { first_published_at, search_description } = blogPostData.meta; - const blogPost: BlogPost = { - title, - description: search_description, - firstPublishedAt: first_published_at, + title: blogPostData.title, + description: blogPostData.meta.search_description, + firstPublishedAt: blogPostData.meta.first_published_at, slug, - body, + body: blogPostData.body, }; return {