progress

src/lib/api/index.ts

@@ -36,7 +36,7 @@ export type Page = {
   status: string
 }
 
-export const BaseAttributes = gql`
+export const BaseAttributes = `
     id
     slug
     status
@@ -44,6 +44,27 @@ export const BaseAttributes = gql`
     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

src/lib/components/PostAttributes.svelte

@@ -1,11 +1,12 @@
-<script>
+<script lang="ts">
   import dj from 'dayjs'
-  import { readingTimeInMinutes } from '../lib/readingTime'
+  import type { Post } from '$lib/api'
+  import { readingTimeInMinutes } from '$lib/utils'
 
-  export let post
+  export let post: Post
   export let full = false
 
-  function format(date) {
+  function format(date: string) {
     return dj(date).format('MMM D, YYYY')
   }
 
@@ -13,6 +14,16 @@
   $: modified = format(post.modified)
 </script>
 
+<div class="attributes">
+  <div>
+    {created}
+    {#if full && created !== modified}<br /> <small>Last update: {modified}</small>{/if}
+  </div>
+  {#if post.content}
+    <div>~ {readingTimeInMinutes(post.content)} min</div>
+  {/if}
+</div>
+
 <style>
   .attributes {
     display: flex;
@@ -21,11 +32,3 @@
     margin-top: -0.125em;
   }
 </style>
-
-<div class="attributes">
-  <div>
-    {created}
-    {#if full && created !== modified}<br /> <small>Last update: {modified}</small>{/if}
-  </div>
-  <div>~ {readingTimeInMinutes(post.content)} min</div>
-</div>

src/lib/components/PostPreview.svelte

@@ -1,10 +1,22 @@
-<script>
+<script lang="ts">
+  import type { Post } from '$lib/api'
+
   import ImageFrame from '../components/ImageFrame.svelte'
   import PostAttributes from '../components/PostAttributes.svelte'
 
-  export let post
+  export let post: Post
 </script>
 
+<a href={`blog/${post.slug}`} class:without={!post.post.featured}>
+  {#if post.post.featured}
+    <ImageFrame src={post.post.featured.sourceUrl} alt={post.post.featured.altText} />
+  {/if}
+  <PostAttributes {post} />
+  <h2>
+    {@html post.title}
+  </h2>
+</a>
+
 <style>
   a {
     display: block;
@@ -41,13 +53,3 @@
     transform: translateX(-5%);
   }
 </style>
-
-<a href={`blog/${post.slug}`} class:without={!post.featured}>
-  {#if post.featured}
-    <ImageFrame src={post.featured.url} alt={post.featured.description} />
-  {/if}
-  <PostAttributes {post} />
-  <h2>
-    {@html post.title}
-  </h2>
-</a>

src/lib/utils.ts

@@ -0,0 +1,5 @@
+export function readingTimeInMinutes(text: string, options: { wpm?: number } = {}): number {
+  const cleaned = text.replace(/(<.*?>)|(\\n)|(&#\d*?;)/g, '')
+  const words = cleaned.split(' ').length
+  return Math.round(words / (options.wpm ?? 200))
+}