Merge branch 'main' into cms/posts/accessibility-post

omawhite · Nov 26, 2023 · 3beca47 · 3beca47
2 parents 5b85b0e + f79b852
commit 3beca47
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 152 deletions.
diff --git a/posts/automating-my-crate-digging-with-youtube-dl.md b/posts/automating-my-crate-digging-with-youtube-dl.md
@@ -1,7 +1,7 @@
 ---
 title: Automating My Crate Digging with youtube-dl
-date: '2023-11-20'
-lastUpdated: ''
+date: 2023-11-20
+lastUpdated:
 description: How I automated my sampling workflow with a custom YouTube downloader script
 ---
 

diff --git a/posts/how-i-ended-up-a-software-engineer.md b/posts/how-i-ended-up-a-software-engineer.md
@@ -1,6 +1,6 @@
 ---
 title: How I Ended Up A Software Engineer
-date: '2018-02-11'
+date: 2018-02-11
 description: A story about my journey to becoming a software engineer.
 featuredimage: /img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg
 tags:

diff --git a/posts/so-tomorrow-i-start-at-unicycle.md b/posts/so-tomorrow-i-start-at-unicycle.md
@@ -1,6 +1,6 @@
 ---
 title: So tomorrow I start at Unicycle
-date: '2021-10-24'
+date: 2021-10-24
 lastUpdated: ''
 description: A story about leaving Target and starting at Unicycle
 ---

diff --git a/src/CMSConfig.ts b/src/CMSConfig.ts
@@ -22,17 +22,11 @@ const CMSConfig: Config = {
           label: 'Publish date',
           name: 'date',
           widget: 'datetime',
-          format: 'yyyy-MM-dd',
-          date_format: 'yyyy-MM-dd',
-          time_format: false,
         },
         {
           label: 'Last updated',
           name: 'lastUpdated',
           widget: 'datetime',
-          format: 'yyyy-MM-dd',
-          date_format: 'yyyy-MM-dd',
-          time_format: false,
           default: '',
           required: false,
         },

diff --git a/src/components/BlogPostList.stories.tsx b/src/components/BlogPostList.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import BlogPostsList from './BlogPostList';
 import { Meta } from '@storybook/react';
+import { postDataList } from './__tests__/postsData.fixture';
 
 interface Post {
   id: string;
@@ -16,68 +17,7 @@ export default {
   component: BlogPostsList,
   title: 'Components/BlogPostsList',
   args: {
-    postsData: [
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-    ] as Post[],
+    postsData: postDataList,
   },
 } as Meta<typeof BlogPostsList>;
 

diff --git a/src/components/BlogPostSnippet.stories.tsx b/src/components/BlogPostSnippet.stories.tsx
@@ -2,20 +2,19 @@ import React from 'react';
 import BlogPostSnippet from './BlogPostSnippet';
 import utilStyles from '@/styles/utils.module.css';
 import { Meta } from '@storybook/react';
+import { postData } from './__tests__/postsData.fixture';
 
 export default {
   component: BlogPostSnippet,
   title: 'Components/BlogPostSnippet',
   args: {
-    content:
-      'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete...',
-
-    date: '2018-02-11',
-    description: 'A story about my journey to becoming a software engineer.',
-    featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-    id: 'how-i-ended-up-a-software-engineer',
-    tags: ['My edits'],
-    title: 'How I Ended Up A Software Engineer',
+    content: postData.content,
+    date: postData.date,
+    description: postData.description,
+    featuredimage: postData.featuredimage,
+    id: postData.id,
+    tags: postData.tags,
+    title: postData.title,
   },
 } as Meta<typeof BlogPostSnippet>;
 

diff --git a/src/components/Date.tsx b/src/components/Date.tsx
@@ -1,11 +1,11 @@
-import { parseISO, format } from 'date-fns';
+import { format, parseJSON } from 'date-fns';
 
 interface DateProps {
   dateString: string;
 }
 
 export default function DateComponent({ dateString }: DateProps) {
-  const date = parseISO(dateString);
-
-  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
+  const date = parseJSON(dateString);
+  const formattedDateString = format(date, 'LLLL d, yyyy');
+  return <time dateTime={dateString}>{formattedDateString}</time>;
 }
diff --git a/src/components/RecentPosts.stories.tsx b/src/components/RecentPosts.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import RecentPosts from './RecentPosts';
 import { Meta } from '@storybook/react';
+import { postDataList } from './__tests__/postsData.fixture';
 
 //TODO need a unified type for this across components and utilities
 interface Post {
@@ -17,68 +18,7 @@ export default {
   component: RecentPosts,
   title: 'Components/RecentPosts',
   args: {
-    postsData: [
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-      {
-        content:
-          'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
-
-        date: '2018-02-11',
-        description:
-          'A story about my journey to becoming a software engineer.',
-        featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
-        id: 'how-i-ended-up-a-software-engineer',
-        tags: ['My edits'],
-        title: 'How I Ended Up A Software Engineer',
-      },
-    ] as Post[],
+    postsData: postDataList,
   },
 } as Meta<typeof RecentPosts>;
 

diff --git a/src/components/__tests__/postsData.fixture.ts b/src/components/__tests__/postsData.fixture.ts
@@ -0,0 +1,69 @@
+export const postData = {
+  content:
+    'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete...',
+
+  date: '"2023-11-20T00:00:00.000Z"',
+  description: 'A story about my journey to becoming a software engineer.',
+  featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
+  id: 'how-i-ended-up-a-software-engineer',
+  tags: ['My edits'],
+  title: 'How I Ended Up A Software Engineer',
+};
+
+export const postDataList = [
+  {
+    content:
+      'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
+
+    date: '"2023-11-20T00:00:00.000Z"',
+    description: 'A story about my journey to becoming a software engineer.',
+    featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
+    id: 'how-i-ended-up-a-software-engineer',
+    tags: ['My edits'],
+    title: 'How I Ended Up A Software Engineer',
+  },
+  {
+    content:
+      'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
+
+    date: '"2023-11-20T00:00:00.000Z"',
+    description: 'A story about my journey to becoming a software engineer.',
+    featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
+    id: 'how-i-ended-up-a-software-engineer2',
+    tags: ['My edits'],
+    title: 'How I Ended Up A Software Engineer',
+  },
+  {
+    content:
+      'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
+
+    date: '"2023-11-20T00:00:00.000Z"',
+    description: 'A story about my journey to becoming a software engineer.',
+    featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
+    id: 'how-i-ended-up-a-software-engineer3',
+    tags: ['My edits'],
+    title: 'How I Ended Up A Software Engineer',
+  },
+  {
+    content:
+      'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
+
+    date: '"2023-11-20T00:00:00.000Z"',
+    description: 'A story about my journey to becoming a software engineer.',
+    featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
+    id: 'how-i-ended-up-a-software-engineer4',
+    tags: ['My edits'],
+    title: 'How I Ended Up A Software Engineer',
+  },
+  {
+    content:
+      'The other day I was cleaning out my inbox when I came across a message from [Code Academy](https://www.codecademy.com/). I quickly delete…',
+
+    date: '"2023-11-20T00:00:00.000Z"',
+    description: 'A story about my journey to becoming a software engineer.',
+    featuredimage: '/img/5ff6e03f-0ffe-4606-855e-5dfee4556f44.jpeg',
+    id: 'how-i-ended-up-a-software-engineer5',
+    tags: ['My edits'],
+    title: 'How I Ended Up A Software Engineer',
+  },
+];
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
@@ -20,9 +20,9 @@ export function getSortedPostsData() {
     const matterResult = matter(fileContents);
     //TODO: find a better way to type all your collections
     const matterData = matterResult.data as {
-      date: string;
+      date: Date;
       title: string;
-      lastUpdated?: string;
+      lastUpdated?: Date;
       //TODO: change this once I actually adds tags in the cms
       tags?: string[];
     };
@@ -31,8 +31,8 @@ export function getSortedPostsData() {
     return {
       id,
       content: matterResult.content,
-      date: matterData.date,
-      lastUpdated: matterData.lastUpdated ?? '',
+      date: JSON.stringify(matterData.date),
+      lastUpdated: JSON.stringify(matterData.lastUpdated) ?? '',
       title: matterData.title,
       //TODO: change this once I actually adds tags in the cms
       tags: matterData.tags ?? [],
@@ -63,13 +63,24 @@ export async function getPostData(id: string) {
 
   // Use gray-matter to parse the post metadata section
   const matterResult = matter(fileContents);
+  //TODO: find a better way to type all your collections
+  const matterData = matterResult.data as {
+    date: Date;
+    title: string;
+    lastUpdated?: Date;
+    //TODO: change this once I actually adds tags in the cms
+    tags?: string[];
+  };
 
   // Use remark to convert markdown into HTML string
   const contentHtml = await markdownContentToHTML(matterResult.content);
 
   return {
     id,
+    title: matterData.title,
+    tags: matterData.tags ?? [],
+    date: JSON.stringify(matterData.date),
+    lastUpdated: JSON.stringify(matterData.lastUpdated) ?? '',
     contentHtml,
-    ...(matterResult.data as { date: string }),
   };
 }