added more pages

package.json

@@ -12,7 +12,7 @@
  },
  "devDependencies": {
  "@sveltejs/adapter-auto": "^2.1.0",
- "@sveltejs/kit": "^1.20.2",
+ "@sveltejs/kit": "^1.20.4",
  "@typescript-eslint/eslint-plugin": "^5.59.11",
  "@typescript-eslint/parser": "^5.59.11",
  "autoprefixer": "^10.4.14",

src/lib/server/data/queries.ts

@@ -281,6 +281,36 @@ export const UPDATE_CART_BUYER = gql`
  }
 `
 
+export const POLICIES_QUERY = gql`
+ fragment PolicyIndex on ShopPolicy {
+ id
+ title
+ handle
+ }
+
+ query PoliciesIndex {
+ shop {
+ privacyPolicy {
+ ...PolicyIndex
+ }
+ shippingPolicy {
+ ...PolicyIndex
+ }
+ termsOfService {
+ ...PolicyIndex
+ }
+ refundPolicy {
+ ...PolicyIndex
+ }
+ subscriptionPolicy {
+ id
+ title
+ handle
+ }
+ }
+ }
+`
+
 export const POLICY_CONTENT_QUERY = gql`
  fragment Policy on ShopPolicy {
  body
@@ -350,3 +380,91 @@ 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
+ }
+`
+
+export const PAGE_QUERY = gql`
+ query PageDetails($language: LanguageCode, $handle: String!)
+ @inContext(language: $language) {
+ page(handle: $handle) {
+ id
+ title
+ body
+ seo {
+ description
+ title
+ }
+ }
+ }
+`

src/lib/types/index.ts

@@ -16,3 +16,7 @@ export enum CartAction {
  UPDATE_DISCOUNT = 'UPDATE_DISCOUNT',
  UPDATE_BUYER_IDENTITY = 'UPDATE_BUYER_IDENTITY',
 }
+
+export type NonNullableFields<T> = {
+ [P in keyof T]: NonNullable<T[P]>;
+}

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>