progress

src/routes/api/[type]/[slug].json.ts

@@ -1,6 +1,16 @@
 import type { RequestHandler } from '@sveltejs/kit'
 
-import { Call, gql, MediaItem, Page, Project } from '$lib/api'
+import {
+  BaseAttributes,
+  Call,
+  gql,
+  MediaItem,
+  MediaItemFragment,
+  Page,
+  Project,
+  ProjectFragment,
+  WorkFragment,
+} from '$lib/api'
 
 export const get: RequestHandler = async (args) => {
   const { type, slug } = args.params
@@ -14,11 +24,7 @@ export const get: RequestHandler = async (args) => {
           query {
             pages {
               nodes {
-                title
-                content
-                slug
-                status
-                id
+                ${BaseAttributes}
               }
             }
           }
@@ -29,11 +35,7 @@ export const get: RequestHandler = async (args) => {
           gql`
             query ($slug: ID!) {
               page(id: $slug, idType: URI) {
-                title
-                content
-                slug
-                status
-                id
+                ${BaseAttributes}
               }
             }
           `,
@@ -44,65 +46,73 @@ export const get: RequestHandler = async (args) => {
     }
     case 'works': {
       if (all) {
-        const data = await Call<{ works: { nodes: MediaItem[] } }>(gql`
+        const query = gql`
+          ${MediaItemFragment}
+          ${WorkFragment}
           query {
             works {
               nodes {
-                id
-                title
-                content
-                slug
-                status
-                work {
-                  date
-                  image {
-                    sourceUrl
-                    srcSet
-                    altText
-                  }
-                  link
-                  role
-                }
+                ...WorkFragment
               }
             }
           }
-        `)
+        `
+        const data = await Call<{ works: { nodes: MediaItem[] } }>(query)
         return { body: data.works.nodes }
       } else {
+        const data = await Call<{ work: MediaItem }>(
+          gql`
+            ${MediaItemFragment}
+            ${WorkFragment}
+            query ($slug: ID!) {
+              work(id: $slug, idType: SLUG) {
+                ...WorkFragment
+              }
+            }
+          `,
+          { slug }
+        )
+        return { body: data.work }
       }
     }
     case 'projects': {
       if (all) {
-        const data = await Call<{ projects: { nodes: Project[] } }>(gql`
-          query {
-            projects {
-              nodes {
-                id
-                title
-                content
-                slug
-                status
-                project {
-                  date
-                  description
-                  link
+        const data = await Call<{ projects: { nodes: Project[] } }>(
+          gql`
+            ${ProjectFragment}
+            query {
+              projects {
+                nodes {
+                  ...ProjectFragment
                 }
               }
             }
-          }
-        `)
+          `
+        )
         return { body: data.projects.nodes }
+      } else {
+        const data = await Call<{ project: Project }>(
+          gql`
+            ${ProjectFragment}
+            query ($slug: ID!) {
+              project(id: $slug, idType: SLUG) {
+                ...ProjectFragment
+              }
+            }
+          `,
+          { slug }
+        )
+        return { body: data.project }
       }
     }
 
     case 'media': {
       const data = await Call<{ mediaItem: MediaItem }>(
         gql`
+          ${MediaItemFragment}
           query ($slug: ID!) {
             mediaItem(id: $slug, idType: SLUG) {
-              srcSet
-              altText
-              sourceUrl
+              ...MediaItemFragment
             }
           }
         `,

src/routes/works/[slug].svelte

@@ -0,0 +1,27 @@
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch, page }) => {
+    return {
+      props: {
+        data: await fetch(`/api/works/${page.params.slug}.json`).then((r) => r.json()),
+      },
+    }
+  }
+</script>
+
+<script lang="ts">
+  import type { Work as TWork } from '$lib/api'
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import Work from '$lib/components/Work.svelte'
+
+  export let data: TWork
+</script>
+
+<svelte:head>
+  <title>Works</title>
+</svelte:head>
+
+<SimplePage title="Works">
+  <Work work={data} />
+</SimplePage>