Display most recent posts on landing page

package.json

@@ -39,6 +39,7 @@
     "@types/mapbox__mapbox-gl-geocoder": "^4.7.2",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
+    "dotenv": "^16.0.1",
     "eslint": "^8.14.0",
     "eslint-plugin-svelte3": "^3.4.0",
     "js-yaml": "^4.1.0",

src/fetch.ts

@@ -199,8 +199,8 @@ const postQuery = (slug: string) => `{
   }
 }`
 
-const postsQuery = `{
-  posts: postCollection(order: date_DESC) {
+const postsQuery = (query = ``) => `{
+  posts: postCollection(order: date_DESC, ${query}) {
     ${postFragment}
   }
 }`
@@ -225,8 +225,8 @@ export async function fetchPost(slug: string): Promise<Post> {
   return post
 }
 
-export async function fetchPosts(): Promise<Post[]> {
-  const data = await contentfulFetch(postsQuery)
+export async function fetchPosts(query = ``): Promise<Post[]> {
+  const data = await contentfulFetch(postsQuery(query))
   const posts = data?.posts?.items
   return await Promise.all(posts.map(processPost))
 }

src/routes/index.svelte

@@ -4,12 +4,14 @@
   import UserGraduate from '~icons/fa-solid/user-graduate'
   import Place from '~icons/ic/place'
   import ChapterMap from '../components/ChapterMap.svelte'
-  import { fetchChapters, fetchPage } from '../fetch'
-  import type { Chapter, Page } from '../types'
+  import PostPreview from '../components/PostPreview.svelte'
+  import { fetchChapters, fetchPage, fetchPosts } from '../fetch'
+  import type { Chapter, Page, Post } from '../types'
 
   export const load: Load = async () => {
     const page = await fetchPage(`/`)
     const chapters = await fetchChapters()
+    const posts = await fetchPosts(`limit = 5`)
 
     // const { students, pupils } = await airtableFetch(
     //   `{
@@ -22,13 +24,14 @@
     //   }`,
     //   { cache: `force-cache` }
     // )
-    return { props: { page, chapters } }
+    return { props: { page, chapters, posts } }
   }
 </script>
 
 <script lang="ts">
   export let chapters: Chapter[]
   export let page: Page
+  export let posts: Post[]
 
   const style = `vertical-align: text-top; margin-right: 5pt;`
 </script>
@@ -78,6 +81,12 @@
   </a>
 </h2>
 
+<div style="display: flex;">
+  {#each posts as post}
+    <PostPreview {post} />
+  {/each}
+</div>
+
 <article>
   {@html page.body}
 </article>

svelte.config.js

@@ -1,9 +1,21 @@
 import rollupYaml from '@rollup/plugin-yaml'
 import adapter from '@sveltejs/adapter-static'
+import 'dotenv/config'
 import path from 'path'
 import preprocess from 'svelte-preprocess'
 import Icons from 'unplugin-icons/vite'
 
+const space_id = process.env.VITE_CONTENTFUL_SPACE_ID
+const access_token = process.env.VITE_CONTENTFUL_ACCESS_TOKEN
+
+const contentful_gql = `https://graphql.contentful.com/content/v1/spaces`
+
+// eslint-disable-next-line no-console
+console.log(
+  `GraphiQL explorer:`,
+  `${contentful_gql}${space_id}/explore?access_token=${access_token}`
+)
+
 /** @type {import('@sveltejs/kit').Config} */
 export default {
   preprocess: preprocess(),