progress

src/lib/api/index.ts

@@ -4,8 +4,13 @@ export const API = axios.create({
   baseURL: import.meta.env.VITE_API_URL as string,
 })
 
-export function gql(s: TemplateStringsArray) {
-  return s.join('')
+export function gql(strings: TemplateStringsArray, ...args: string[]) {
+  let joined = ''
+  for (const part of strings) {
+    const arg = args.shift() ?? ''
+    joined += part + arg
+  }
+  return joined
 }
 
 export async function Call<T>(query: string, variables: Record<string, any> = {}): Promise<T> {
@@ -17,6 +22,9 @@ export async function Call<T>(query: string, variables: Record<string, any> = {}
       variables,
     },
   })
+  if (data.errors?.length > 0) {
+    throw new Error(data.errors[0].message)
+  }
   return data.data as T
 }
 
@@ -28,6 +36,14 @@ export type Page = {
   status: string
 }
 
+export const BaseAttributes = gql`
+    id
+    slug
+    status
+    title
+    content
+`
+
 export interface Work extends Page {
   work: {
     date: string
@@ -37,6 +53,20 @@ export interface Work extends Page {
   }
 }
 
+export const WorkFragment = gql`
+  fragment WorkFragment on Work {
+      ${BaseAttributes}
+    work {
+      date
+      image {
+        ...MediaItemFragment
+      }
+      link
+      role
+    }
+  }
+`
+
 export interface Project extends Page {
   project: {
     date: string
@@ -45,8 +75,27 @@ export interface Project extends Page {
   }
 }
 
+export const ProjectFragment = gql`
+  fragment ProjectFragment on Project {
+    ${BaseAttributes}
+    project {
+      date
+      link
+      description
+    }
+  }
+`
+
 export type MediaItem = {
   srcSet: string
   altText: string
   sourceUrl: string
 }
+
+export const MediaItemFragment = gql`
+  fragment MediaItemFragment on MediaItem {
+    srcSet
+    altText
+    sourceUrl
+  }
+`

src/lib/components/Work.svelte

@@ -8,12 +8,14 @@
 </script>
 
 <section>
-  <a href={work.work.link} target="_blank" rel="noopener">
+  <a href="/works/{work.slug}">
     <div class="horizontal">
       <div class="title regular">{work.title}</div>
       <div>
-        <Icon icon="link-outline" />
-        <span>{work.work.link.replace(/https?:\/\//, '')}</span>
+        <a href={work.work.link} target="_blank" rel="noopener">
+          <Icon icon="link-outline" />
+          <span>{work.work.link.replace(/https?:\/\//, '')}</span>
+        </a>
       </div>
     </div>
 

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>