new graphql pipeline

src/lib/actions/cloudinary.ts

@@ -0,0 +1,8 @@
+import { initialize, image } from 'svelte-cloudinary'
+
+initialize({ cloud_name: 'cupcakearmy', secure: true })
+
+export function cdn(el: HTMLImageElement, src: string) {
+  const cleaned = src.replace('https://api.nicco.io', '/nicco')
+  return image(el, { src: cleaned, bind: { width: true }, lazy: true })
+}

src/lib/api/index.ts

@@ -1,122 +0,0 @@
-import axios from 'axios'
-
-export const API = axios.create({
-  baseURL: import.meta.env.VITE_API_URL as string,
-})
-
-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> {
-  const { data } = await API({
-    url: '/graphql',
-    method: 'post',
-    data: {
-      query,
-      variables,
-    },
-  })
-  if (data.errors?.length > 0) {
-    throw new Error(data.errors[0].message)
-  }
-  return data.data as T
-}
-
-export type Page = {
-  title: string
-  content: string | null
-  slug: string
-  id: string
-  status: string
-}
-
-export const BaseAttributes = `
-    id
-    slug
-    status
-    title
-    content
-`
-
-export interface Post extends Page {
-  date: string
-  modified: string
-  post: {
-    featured: MediaItem
-  }
-}
-
-export const PostFragment = gql`
-  fragment PostFragment on Post {
-    ${BaseAttributes}
-    date
-    modified
-    post {
-      featured {
-        ...MediaItemFragment
-      }
-    }
-  }
-`
-
-export interface Work extends Page {
-  work: {
-    date: string
-    image: MediaItem
-    link: string
-    role: string
-  }
-}
-
-export const WorkFragment = gql`
-  fragment WorkFragment on Work {
-      ${BaseAttributes}
-    work {
-      date
-      image {
-        ...MediaItemFragment
-      }
-      link
-      role
-    }
-  }
-`
-
-export interface Project extends Page {
-  project: {
-    date: string
-    link: string
-    description: string
-  }
-}
-
-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/ImageFrame.svelte

@@ -1,22 +1,12 @@
-<script lang="ts" context="module">
-  import { initialize } from 'svelte-cloudinary'
-
-  initialize({ cloud_name: 'cupcakearmy' })
-</script>
-
 <script lang="ts">
-  import { image } from 'svelte-cloudinary'
+  import { cdn } from '$lib/actions/cloudinary'
 
   export let src: string
-  // export let srcset: string
   export let alt: string
-
-  $: cleaned = src.replace('https://api.nicco.io', '/nicco')
 </script>
 
-<img use:image={{ src: cleaned, bind: { width: true }, lazy: true }} {alt} />
+<img use:cdn={src} {alt} />
 
-<!-- <img {srcset} {alt} /> -->
 <style>
   img {
     width: calc(100% - 0.25em);

src/lib/components/Nav.svelte

@@ -10,11 +10,9 @@
     { name: 'Blog', href: '/blog' },
     { name: 'Contact', href: '/contact' },
   ]
-
-  let nav: HTMLDivElement
 </script>
 
-<nav bind:this={nav}>
+<nav>
   <a href="/">
     <h1 class:active={$page.path === '/'}>NB</h1>
   </a>

src/lib/components/PostAttributes.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import dj from 'dayjs'
-  import type { Post } from '$lib/api'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
   import { readingTimeInMinutes } from '$lib/utils'
+  import dj from 'dayjs'
 
-  export let post: Post
+  export let post: GQLBasePostFragment
   export let full = false
 
   function format(date: string) {

src/lib/components/PostPreview.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { Post } from '$lib/api'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
 
   import ImageFrame from '../components/ImageFrame.svelte'
   import PostAttributes from '../components/PostAttributes.svelte'
 
-  export let post: Post
+  export let post: GQLBasePostFragment
 </script>
 
 <a href={`blog/${post.slug}`} class:without={!post.post.featured}>

src/lib/components/Progress.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { spring } from 'svelte/motion'
-
   import { scroll } from '$lib/stores'
 
-  let el
+  let el: SVGElement
+
   const springed = spring(
     { scroll: 0 },
     {
@@ -12,7 +12,7 @@
     }
   )
 
-  function updateState(value) {
+  function updateState(value: number) {
     const max = 359.99999
     const R = 50
     let alpha = (360 / 1) * value

src/lib/components/Project.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import type { GQLBaseProjectFragment } from '$lib/gql/gen'
   import dayjs from 'dayjs'
-
   import Icon from './Icon.svelte'
 
-  export let project: import('$lib/api').Project
+  export let project: GQLBaseProjectFragment
 </script>
 
 <section>

src/lib/components/Work.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { Work } from '$lib/api'
-  import dayjs from 'dayjs'
-  import ImageFrame from '$lib/components/ImageFrame.svelte'
   import Icon from '$lib/components/Icon.svelte'
+  import ImageFrame from '$lib/components/ImageFrame.svelte'
+  import type { GQLBaseWorkFragment } from '$lib/gql/gen'
+  import dayjs from 'dayjs'
 
-  export let work: Work
+  export let work: GQLBaseWorkFragment
 </script>
 
 <section>
@@ -19,8 +19,6 @@
       </div>
     </div>
 
-    <!-- <ImageFrame src={work.work.image.sizes.medium_large} alt={work.image.description} /> -->
-    <!-- <ImageFrame srcset={work.work.image.srcSet} alt={work.work.image.altText} /> -->
     <ImageFrame src={work.work.image.sourceUrl} alt={work.work.image.altText} />
   </a>
   <div class="horizontal regular">

src/lib/gql/index.ts

@@ -0,0 +1,5 @@
+import { GraphQLClient } from 'graphql-request'
+import { getSdk } from './gen'
+
+const client = new GraphQLClient('https://api.nicco.io/graphql')
+export const SDK = getSdk(client)

src/lib/gql/root.graphql

@@ -0,0 +1,127 @@
+fragment BaseMediaItem on MediaItem {
+  srcSet
+  altText
+  sourceUrl
+}
+
+query MediaItemsMany {
+  mediaItems(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseMediaItem
+    }
+  }
+}
+
+query MediaItemsOne($slug: ID!) {
+  mediaItem(id: $slug, idType: URI) {
+    ...BaseMediaItem
+  }
+}
+
+fragment BasePage on Page {
+  id
+  slug
+  title
+  content
+  status
+}
+
+query PagesMany {
+  pages(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BasePage
+    }
+  }
+}
+
+query PagesOne($slug: ID!) {
+  page(id: $slug, idType: URI) {
+    ...BasePage
+  }
+}
+
+fragment BaseWork on Work {
+  id
+  slug
+  title
+  content
+  status
+  work {
+    date
+    image {
+      ...BaseMediaItem
+    }
+    link
+    role
+  }
+}
+
+query WorksMany {
+  works(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseWork
+    }
+  }
+}
+
+query WorksOne($slug: ID!) {
+  work(id: $slug, idType: URI) {
+    ...BaseWork
+  }
+}
+
+fragment BaseProject on Project {
+  id
+  slug
+  title
+  content
+  status
+  project {
+    date
+    link
+    description
+  }
+}
+
+query ProjectsMany {
+  projects(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseProject
+    }
+  }
+}
+
+query ProjectsOne($slug: ID!) {
+  project(id: $slug, idType: URI) {
+    ...BaseProject
+  }
+}
+
+fragment BasePost on Post {
+  id
+  slug
+  title
+  content
+  status
+  date
+  modified
+  post {
+    featured {
+      ...BaseMediaItem
+    }
+  }
+}
+
+query PostsMany {
+  posts(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BasePost
+    }
+  }
+}
+
+query PostsOne($slug: ID!) {
+  post(id: $slug, idType: URI) {
+    ...BasePost
+  }
+}