feat: add authors to the blog section

TanStack · Sep 17, 2024 · 0f101d7 · 0f101d7
1 parent d7e991b
commit 0f101d7
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 30 deletions.
diff --git a/app/blog/ag-grid-partnership.md b/app/blog/ag-grid-partnership.md
@@ -1,6 +1,9 @@
 ---
 title: TanStack Table + Ag-Grid Partnership
 published: 6/17/2022
+authors:
+  - Tanner Linsley
+  - Niall Crosby
 ---
 
 We're excited to announce that [AG Grid](https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable) is now the official **TanStack Table** open-source partner! Together we will strive to achieve the following goals:

diff --git a/app/blog/announcing-tanstack-query-v4.md b/app/blog/announcing-tanstack-query-v4.md
@@ -1,6 +1,8 @@
 ---
 title: Announcing TanStack Query v4
 published: 7/14/2022
+authors:
+  - Dominik Dorfmeister
 ---
 
 We're excited to announce the next version of [TanStack Query](/query/v4), previously known as `react-query` 🎉.

diff --git a/app/blog/announcing-tanstack-query-v5.md b/app/blog/announcing-tanstack-query-v5.md
@@ -1,6 +1,8 @@
 ---
 title: Announcing TanStack Query v5
 published: 10/17/2023
+authors:
+  - Dominik Dorfmeister
 ---
 
 About one year ago, we announced the [TanStack Query v5 roadmap](https://github.com/TanStack/query/discussions/4252), and the whole team has been working hard on that version ever since. So we're super happy to announce that today is the day: After 91 alpha releases, 35 betas and 16 release candidates, TanStack Query [v5.0.0](https://github.com/TanStack/query/releases/tag/v5.0.0) is finally here! 🎉

diff --git a/app/blog/tanstack-router-typescript-performance.md b/app/blog/tanstack-router-typescript-performance.md
@@ -1,6 +1,8 @@
 ---
 title: A milestone for TypeScript Performance in TanStack Router
 published: 09/17/2024
+authors:
+  - Christopher Horobin
 ---
 
 TanStack Router pushes the boundaries on type-safe routing.

diff --git a/app/routes/blog.$.tsx b/app/routes/blog.$.tsx
@@ -5,10 +5,11 @@ import { seo } from '~/utils/seo'
 import { Doc } from '~/components/Doc'
 import { PostNotFound } from './blog'
 import { createServerFn } from '@tanstack/start'
+import { formatAuthors } from '~/utils/blog'
 
 const fetchBlogPost = createServerFn(
   'GET',
-  async ({ docsPath }: { docsPath: string }, req) => {
+  async ({ docsPath }: { docsPath: string }) => {
     'use server'
 
     if (!docsPath) {
@@ -31,29 +32,42 @@ const fetchBlogPost = createServerFn(
       description,
       published: frontMatter.data.published,
       content: frontMatter.content,
+      authors: (frontMatter.data.authors ?? []) as Array<string>,
       filePath,
     }
   }
 )
 
 export const Route = createFileRoute('/blog/$')({
   loader: ({ params }) => fetchBlogPost({ docsPath: params._splat }),
-  meta: ({ loaderData }) =>
-    seo({
+  meta: ({ loaderData }) => [
+    ...seo({
       title: `${loaderData?.title ?? 'Docs'} | TanStack Blog`,
       description: loaderData?.description,
     }),
+    {
+      name: 'author',
+      content: `${
+        loaderData.authors.length > 1 ? 'co-authored by ' : ''
+      }${formatAuthors(loaderData.authors)}`,
+    },
+  ],
   notFoundComponent: () => <PostNotFound />,
   component: BlogPost,
 })
 
 export default function BlogPost() {
-  const { title, content, filePath } = Route.useLoaderData()
+  const { title, content, filePath, authors, published } = Route.useLoaderData()
+
+  const blogContent = `_by ${formatAuthors(authors)} on ${new Date(
+    published
+  ).toLocaleDateString()}_
+${content}`
 
   return (
     <Doc
       title={title}
-      content={content}
+      content={blogContent}
       repo={'tanstack/tanstack.com'}
       branch={'main'}
       filePath={filePath}

diff --git a/app/routes/blog.index.tsx b/app/routes/blog.index.tsx
@@ -1,6 +1,6 @@
 import { Link, createFileRoute, notFound } from '@tanstack/react-router'
 
-import { getPostList } from '~/utils/blog'
+import { formatAuthors, getPostList } from '~/utils/blog'
 import { DocTitle } from '~/components/DocTitle'
 import { Markdown } from '~/components/Markdown'
 import { format } from 'date-fns'
@@ -36,6 +36,7 @@ const fetchFrontMatters = createServerFn('GET', async () => {
           title: frontMatter.data.title,
           published: frontMatter.data.published,
           excerpt: frontMatter.excerpt,
+          authors: frontMatter.data.authors as Array<string> | undefined,
         },
       ] as const
     })
@@ -83,39 +84,50 @@ function BlogIndex() {
           <div className="h-4" />
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          {frontMatters.map(([id, { title, published, excerpt }]) => {
-            return (
-              <Link
-                key={id}
-                to={`${id}`}
-                className={`flex flex-col gap-4 justify-between
+          {frontMatters.map(
+            ([id, { title, published, excerpt, authors = [] }]) => {
+              return (
+                <Link
+                  key={id}
+                  to={`${id}`}
+                  className={`flex flex-col gap-4 justify-between
                   border-2 border-transparent rounded-lg p-4 md:p-8
                   transition-all bg-white dark:bg-gray-800
                   shadow-xl dark:shadow-lg dark:shadow-blue-500/30
                   hover:border-blue-500
               `}
-              >
-                <div>
-                  <div className={`text-lg font-extrabold`}>{title}</div>
-                  {published ? (
+                >
+                  <div>
+                    <div className={`text-lg font-extrabold`}>{title}</div>
                     <div className={`italic font-light mt-2`}>
-                      {format(new Date(published), 'MMM dd, yyyy')}
+                      <p>
+                        by {formatAuthors(authors)}
+                        {published ? (
+                          <time
+                            dateTime={published}
+                            title={format(new Date(published), 'MMM dd, yyyy')}
+                          >
+                            {' '}
+                            on {format(new Date(published), 'MMM dd, yyyy')}
+                          </time>
+                        ) : null}
+                      </p>
+                    </div>
+                    <div
+                      className={`text-sm mt-2 text-black dark:text-white leading-7`}
+                    >
+                      <Markdown code={excerpt || ''} />
                     </div>
-                  ) : null}
-                  <div
-                    className={`text-sm mt-2 text-black dark:text-white leading-7`}
-                  >
-                    <Markdown code={excerpt || ''} />
                   </div>
-                </div>
-                <div>
-                  <div className="text-blue-500 uppercase font-black text-sm">
-                    Read More
+                  <div>
+                    <div className="text-blue-500 uppercase font-black text-sm">
+                      Read More
+                    </div>
                   </div>
-                </div>
-              </Link>
-            )
-          })}
+                </Link>
+              )
+            }
+          )}
         </div>
         <div className="h-24" />
       </div>

diff --git a/app/utils/blog.ts b/app/utils/blog.ts
@@ -14,3 +14,19 @@ export function getPostList() {
     },
   ]
 }
+
+export function formatAuthors(authors: Array<string>) {
+  if (!authors.length) {
+    return 'TanStack'
+  }
+
+  if (authors.length === 1) {
+    return authors[0]
+  }
+
+  if (authors.length === 2) {
+    return authors.join(' and ')
+  }
+
+  return authors.slice(0, -1).join(', ') + ', and ' + authors.slice(-1)
+}