💄✨ Add Co-Author field to Blog Posts

content/blog/TinaCMS-sponsoring-the-Copenhagen-Developers-Festival.mdx

@@ -3,13 +3,16 @@ title: TinaCMS sponsoring the Copenhagen Developers Festival
 date: '2024-08-13T14:00:00.000Z'
 last_edited: '2024-08-13T14:00:00.000Z'
 author: Landon Maxwell
+coAuthors:
+  - Brady Stroud
+  - Josh Berman
 prev: content/blog/TinaCMS-Version-21.mdx
 ---
 
-Hold on to your smørrebrød 🍞 the TinaCMS team is headed to Denmark! 
-We’re thrilled to sponsor the Copenhagen Developers Festival from August 26-30, 2024! 
+Hold on to your smørrebrød 🍞 the TinaCMS team is headed to Denmark!
+We’re thrilled to sponsor the Copenhagen Developers Festival from August 26-30, 2024!
 
-Get ready for 5 days packed with cutting-edge tech, featuring over 110 speakers and 12 workshops. 
+Get ready for 5 days packed with cutting-edge tech, featuring over 110 speakers and 12 workshops.
 
 Come visit our booth for 🦙 Tina swag and goodies, learn from industry experts, and enjoy some live music while you're at it! 🎶
 

pages/blog/[slug].tsx

@@ -82,7 +82,10 @@ function BlogTemplate({ file, siteConfig, ...props }) {
               <MetaWrap>
                 <MetaBit>{formatDate(frontmatter.date)}</MetaBit>
                 <MetaBit>
-                  <span>By</span> <strong>{frontmatter.author}</strong>
+                  <span>By</span> <strong>{frontmatter.author},</strong>
+                </MetaBit>
+                <MetaBit>
+                <span>{data.post.coAuthors.join(', ')}</span>
                 </MetaBit>
               </MetaWrap>
             </BlogMeta>

pages/blog/page/[page_index].tsx

@@ -1,22 +1,22 @@
-import React from 'react'
-import styled from 'styled-components'
-import { NextSeo } from 'next-seo'
-import { GetStaticProps, GetStaticPaths } from 'next'
-import { orderPosts, formatExcerpt, formatDate } from '../../../utils'
-import path from 'path'
+import React from 'react';
+import styled from 'styled-components';
+import { NextSeo } from 'next-seo';
+import { GetStaticProps, GetStaticPaths } from 'next';
+import { orderPosts, formatExcerpt, formatDate } from '../../../utils';
+import path from 'path';
 
 import {
   Layout,
   Wrapper,
   Hero,
   MarkdownContent,
   RichTextWrapper,
-} from 'components/layout'
-import { DynamicLink, BlogPagination } from 'components/ui'
-import { getMarkdownPreviewProps } from 'utils/getMarkdownPreviewProps'
+} from 'components/layout';
+import { DynamicLink, BlogPagination } from 'components/ui';
+import { getMarkdownPreviewProps } from 'utils/getMarkdownPreviewProps';
 const Index = (props) => {
-  const { currentPage, numPages } = props
-
+  const { currentPage, numPages } = props;
+  
   return (
     <Layout>
       <NextSeo
@@ -40,7 +40,11 @@ const Index = (props) => {
                 <RichTextWrapper>
                   <BlogMeta>
                     <MetaBit>
-                      <span>By</span> <strong>{post.data.author}</strong>
+                      <span>By</span> <strong>{post.data.author} </strong>
+                      {post.data.coAuthors &&
+                        Array.isArray(post.data.coAuthors) && (
+                          <span>, {post.data.coAuthors.join(', ')}</span>
+                        )}{' '}
                     </MetaBit>
                     <MetaBit>{formatDate(post.data.date)}</MetaBit>
                   </BlogMeta>
@@ -54,72 +58,72 @@ const Index = (props) => {
         </div>
       </div>
     </Layout>
-  )
-}
+  );
+};
 
 /*
  ** DATA FETCHING ---------------------------------
  */
 
-const POSTS_PER_PAGE = 8
+const POSTS_PER_PAGE = 8;
 
 export const getStaticPaths: GetStaticPaths = async function () {
-  const fg = require('fast-glob')
-  const contentDir = './content/blog/'
-  const posts = await fg(`${contentDir}**/*.mdx`)
+  const fg = require('fast-glob');
+  const contentDir = './content/blog/';
+  const posts = await fg(`${contentDir}**/*.mdx`);
 
-  const numPages = Math.ceil(posts.length / POSTS_PER_PAGE)
+  const numPages = Math.ceil(posts.length / POSTS_PER_PAGE);
 
-  var pages = []
+  var pages = [];
   for (var i = 1; i <= numPages; i++) {
     pages.push({
       params: { page_index: i.toString() },
-    })
+    });
   }
 
-  return { paths: pages, fallback: false }
-}
+  return { paths: pages, fallback: false };
+};
 
 export const getStaticProps: GetStaticProps = async function ({
   preview,
   previewData,
   ...ctx
 }) {
   // @ts-ignore page_index should always be a single string
-  const page = parseInt((ctx.params && ctx.params.page_index) || '1')
+  const page = parseInt((ctx.params && ctx.params.page_index) || '1');
 
   try {
-    const files = await getLocalFiles('content/blog')
+    const files = await getLocalFiles('content/blog');
 
     const posts = await Promise.all(
       // TODO - potentially making a lot of requests here
       files.map(async (file) => {
         const post = (await getMarkdownPreviewProps(file, preview, previewData))
-          .props.file
+          .props.file;
 
         // create slug from filename
         const slug = file
           .replace(/^.*[\\\/]/, '')
           .split('.')
           .slice(0, -1)
-          .join('.')
+          .join('.');
 
-        const excerpt = await formatExcerpt(post.data.markdownBody)
+        const excerpt = await formatExcerpt(post.data.markdownBody);
 
         return {
           data: { ...post.data.frontmatter, slug },
           content: excerpt,
-        }
+        };
       })
-    )
+    );
 
     // for pagination and ordering
-    const numPages = Math.ceil(posts.length / POSTS_PER_PAGE)
-    const pageIndex = page - 1
+    const numPages = Math.ceil(posts.length / POSTS_PER_PAGE);
+    const pageIndex = page - 1;
     const orderedPosts = orderPosts(posts).slice(
       pageIndex * POSTS_PER_PAGE,
       (pageIndex + 1) * POSTS_PER_PAGE
-    )
+    );
 
     return {
       props: {
@@ -128,26 +132,26 @@ export const getStaticProps: GetStaticProps = async function ({
         currentPage: page,
         preview: !!preview,
       },
-    }
+    };
   } catch (e) {
     return {
       props: {
         error: { ...e }, //workaround since we cant return error as JSON
       },
-    }
+    };
   }
-}
+};
 
-export default Index
+export default Index;
 
 const getLocalFiles = async (filePath: string) => {
   // grab all md files
-  const fg = require('fast-glob')
-  const glob = path.resolve(filePath, '*')
-  const files = await fg(glob)
+  const fg = require('fast-glob');
+  const glob = path.resolve(filePath, '*');
+  const files = await fg(glob);
 
-  return files
-}
+  return files;
+};
 
 /**
  *  STYLES -----------------------------------------------------
@@ -165,7 +169,7 @@ export const MetaBit = styled.p`
     opacity: 0.7;
     margin-right: 0.25rem;
   }
-`
+`;
 
 export const BlogMeta = styled.div`
   width: 100%;
@@ -179,4 +183,4 @@ export const BlogMeta = styled.div`
   @media (min-width: 550px) {
     flex-direction: row;
   }
-`
+`;

tina/collectionsSchema/blogs.tsx

@@ -43,6 +43,12 @@ export const blogsCollection = {
       name: 'author',
       label: 'Author',
     },
+    {
+      type: 'string',
+      name: 'coAuthors',
+      label: 'Co-Authors',
+      list: true,
+    },
     {
       type: 'reference',
       name: 'prev',

tina/queries/post.gql

@@ -13,6 +13,7 @@ query getExpandedPostDocument($relativePath: String!) {
     date
     last_edited
     author
+    coAuthors
     prev {
       ... on Post {
         id