feat: ✨ add journal and articles pages

src/lib/server/data/queries.ts

@@ -350,3 +350,77 @@ export const SITEMAP_QUERY = gql`
  }
  }
 `
+
+export const ARTICLE_QUERY = gql`
+ query ArticleDetails(
+ $language: LanguageCode
+ $blogHandle: String!
+ $articleHandle: String!
+ ) @inContext(language: $language) {
+ blog(handle: $blogHandle) {
+ articleByHandle(handle: $articleHandle) {
+ title
+ contentHtml
+ publishedAt
+ author: authorV2 {
+ name
+ }
+ image {
+ id
+ altText
+ url
+ width
+ height
+ }
+ seo {
+ description
+ title
+ }
+ }
+ }
+ }
+`
+
+export const BLOGS_QUERY = gql`
+ query Blog(
+ $language: LanguageCode
+ $blogHandle: String!
+ $pageBy: Int!
+ $cursor: String
+ ) @inContext(language: $language) {
+ blog(handle: $blogHandle) {
+ title
+ seo {
+ title
+ description
+ }
+ handle
+ articles(first: $pageBy, after: $cursor) {
+ edges {
+ node {
+ ...Article
+ }
+ }
+ }
+ }
+ }
+
+ fragment Article on Article {
+ author: authorV2 {
+ name
+ }
+ contentHtml
+ handle
+ id
+ image {
+ id
+ altText
+ url
+ width
+ height
+ }
+ publishedAt
+ title
+ }
+`
+

src/routes/[[locale]]/journal/+page.server.ts

@@ -0,0 +1,51 @@
+import type { PageServerLoad } from './$types'
+import type { Blog } from '$lib/types'
+import { BLOGS_QUERY } from '$lib/server/data'
+import { error } from '@sveltejs/kit'
+
+export const load: PageServerLoad = async ({ locals }) => {
+ const { storefront, locale } = locals
+ const { language, country } = locale
+
+ const BLOG_HANDLE = 'journal'
+ const PAGINATION_SIZE = 10
+
+ const { data } = await storefront.query<{blog: Blog}>({
+ query: BLOGS_QUERY,
+ variables: {
+ blogHandle: BLOG_HANDLE,
+ pageBy: PAGINATION_SIZE,
+ language,
+ },
+ })
+
+ const blog = data?.blog
+
+ if (!blog)
+ throw error(404, 'Blog not found')
+
+ const articles = blog.articles.edges.map((a) => {
+ const { node: article } = a
+ const { publishedAt } = article
+
+ return {
+ ...article,
+ publishedAt: new Intl.DateTimeFormat(`${language}-${country}`, {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ }).format(new Date(publishedAt!)),
+ }
+ })
+
+ return {
+ seo: {
+ title: blog?.seo?.title || blog?.title,
+ description: blog?.seo?.description,
+ },
+ blog: {
+ ...blog,
+ articles,
+ },
+ }
+}

src/routes/[[locale]]/journal/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { PageServerData } from './$types'
+import LocaleLink from '$lib/components/LocaleLink.svelte'
+
+export let data: PageServerData
+const { blog } = data
+</script>
+
+<h1>{blog.title}</h1>
+
+<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+ {#each blog.articles as article}
+ <LocaleLink href="/{blog.handle}/{article.handle}">
+ <img
+ src={article.image?.url}
+ alt={article.image?.altText}
+ width={article.image?.width}
+ height={article.image?.height}
+ />
+ <h2>{article.title}</h2>
+ <p>{article.publishedAt}</p>
+ </LocaleLink>
+ {/each}
+</div>

src/routes/[[locale]]/journal/[handle]/+page.server.ts

@@ -0,0 +1,42 @@
+import type { PageServerLoad } from './$types'
+import { ARTICLE_QUERY } from '$lib/server/data'
+import { error } from '@sveltejs/kit'
+
+export const load: PageServerLoad = async ({ locals, params }) => {
+ const { storefront, locale } = locals
+ const { language, country } = locale
+
+ const blogHandle = 'journal'
+ const { handle: articleHandle } = params
+
+ const { data } = await storefront.query({
+ query: ARTICLE_QUERY,
+ variables: {
+ blogHandle,
+ articleHandle,
+ language,
+ },
+ })
+
+ if (!data?.blog?.articleByHandle)
+ throw error(404, 'Article not found')
+
+ const article = data.blog.articleByHandle
+
+ const formattedDate = new Intl.DateTimeFormat(`${language}-${country}`, {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ }).format(new Date(article?.publishedAt))
+
+ return {
+ seo: {
+ title: article?.seo?.title || article?.title,
+ description: article?.seo?.description,
+ },
+ article: {
+ ...article,
+ formattedDate,
+ }
+ }
+}

src/routes/[[locale]]/journal/[handle]/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { PageServerData } from './$types'
+
+export let data: PageServerData
+const { article } = data
+</script>
+
+<h1>{article.title}</h1>
+<p>{article.formattedDate} • {article.author.name}</p>
+
+<img
+ src={article.image.url}
+ alt={article.image.alt}
+ width={article.image.width}
+ height={article.image.height}
+/>
+
+<div>
+ {@html article.contentHtml}
+</div>