templates: fixes formatting issue with authors and footer not being a…

…t the bottom in the website template (#9969)

Fixes:
- formatting of authors when multiple, or missing or don't have names
- footer not sticking to the bottom of the page

templates/website/src/Footer/Component.tsx

@@ -14,7 +14,7 @@ export async function Footer() {
   const navItems = footerData?.navItems || []
 
   return (
-    <footer className="border-t border-border bg-black dark:bg-card text-white">
+    <footer className="mt-auto border-t border-border bg-black dark:bg-card text-white">
       <div className="container py-8 gap-8 flex flex-col md:flex-row md:justify-between">
         <Link className="flex items-center" href="/">
           <Logo />

templates/website/src/app/(frontend)/globals.css

@@ -89,7 +89,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground min-h-[100vh] flex flex-col;
   }
 }
 

templates/website/src/heros/PostHero/index.tsx

@@ -4,12 +4,16 @@ import React from 'react'
 import type { Post } from '@/payload-types'
 
 import { Media } from '@/components/Media'
+import { formatAuthors } from '@/utilities/formatAuthors'
 
 export const PostHero: React.FC<{
   post: Post
 }> = ({ post }) => {
   const { categories, meta: { image: metaImage } = {}, populatedAuthors, publishedAt, title } = post
 
+  const hasAuthors =
+    populatedAuthors && populatedAuthors.length > 0 && formatAuthors(populatedAuthors) !== ''
+
   return (
     <div className="relative -mt-[10.4rem] flex items-end">
       <div className="container z-10 relative lg:grid lg:grid-cols-[1fr_48rem_1fr] text-white pb-8">
@@ -39,34 +43,15 @@ export const PostHero: React.FC<{
           </div>
 
           <div className="flex flex-col md:flex-row gap-4 md:gap-16">
-            <div className="flex flex-col gap-4">
-              {populatedAuthors && (
+            {hasAuthors && (
+              <div className="flex flex-col gap-4">
                 <div className="flex flex-col gap-1">
                   <p className="text-sm">Author</p>
-                  {populatedAuthors.map((author, index) => {
-                    const { name } = author
-
-                    const isLast = index === populatedAuthors.length - 1
-                    const secondToLast = index === populatedAuthors.length - 2
 
-                    return (
-                      <React.Fragment key={index}>
-                        {name}
-                        {secondToLast && populatedAuthors.length > 2 && (
-                          <React.Fragment>, </React.Fragment>
-                        )}
-                        {secondToLast && populatedAuthors.length === 2 && (
-                          <React.Fragment> </React.Fragment>
-                        )}
-                        {!isLast && populatedAuthors.length > 1 && (
-                          <React.Fragment>and </React.Fragment>
-                        )}
-                      </React.Fragment>
-                    )
-                  })}
+                  <p>{formatAuthors(populatedAuthors)}</p>
                 </div>
-              )}
-            </div>
+              </div>
+            )}
             {publishedAt && (
               <div className="flex flex-col gap-1">
                 <p className="text-sm">Date Published</p>

templates/website/src/utilities/formatAuthors.ts

@@ -0,0 +1,28 @@
+import { Post } from '@/payload-types'
+
+/**
+ * Formats an array of populatedAuthors from Posts into a prettified string.
+ * @param authors - The populatedAuthors array from a Post.
+ * @returns A prettified string of authors.
+ * @example
+ *
+ * [Author1, Author2] becomes 'Author1 and Author2'
+ * [Author1, Author2, Author3] becomes 'Author1, Author2, and Author3'
+ *
+ */
+export const formatAuthors = (
+  authors: NonNullable<NonNullable<Post['populatedAuthors']>[number]>[],
+) => {
+  // Ensure we don't have any authors without a name
+  const filteredAuthors = authors.filter((author) => Boolean(author.name))
+
+  if (filteredAuthors.length === 0) return ''
+  if (filteredAuthors.length === 1) return filteredAuthors[0].name
+  if (filteredAuthors.length === 2)
+    return `${filteredAuthors[0].name} and ${filteredAuthors[1].name}`
+
+  return `${filteredAuthors
+    .slice(0, -1)
+    .map((author) => author?.name)
+    .join(', ')} and ${filteredAuthors[authors.length - 1].name}`
+}

templates/with-vercel-website/src/Footer/Component.tsx

@@ -14,7 +14,7 @@ export async function Footer() {
   const navItems = footerData?.navItems || []
 
   return (
-    <footer className="border-t border-border bg-black dark:bg-card text-white">
+    <footer className="mt-auto border-t border-border bg-black dark:bg-card text-white">
       <div className="container py-8 gap-8 flex flex-col md:flex-row md:justify-between">
         <Link className="flex items-center" href="/">
           <Logo />

templates/with-vercel-website/src/app/(frontend)/globals.css

@@ -89,7 +89,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground min-h-[100vh] flex flex-col;
   }
 }
 

templates/with-vercel-website/src/heros/PostHero/index.tsx

@@ -4,12 +4,16 @@ import React from 'react'
 import type { Post } from '@/payload-types'
 
 import { Media } from '@/components/Media'
+import { formatAuthors } from '@/utilities/formatAuthors'
 
 export const PostHero: React.FC<{
   post: Post
 }> = ({ post }) => {
   const { categories, meta: { image: metaImage } = {}, populatedAuthors, publishedAt, title } = post
 
+  const hasAuthors =
+    populatedAuthors && populatedAuthors.length > 0 && formatAuthors(populatedAuthors) !== ''
+
   return (
     <div className="relative -mt-[10.4rem] flex items-end">
       <div className="container z-10 relative lg:grid lg:grid-cols-[1fr_48rem_1fr] text-white pb-8">
@@ -43,27 +47,8 @@ export const PostHero: React.FC<{
               {populatedAuthors && (
                 <div className="flex flex-col gap-1">
                   <p className="text-sm">Author</p>
-                  {populatedAuthors.map((author, index) => {
-                    const { name } = author
-
-                    const isLast = index === populatedAuthors.length - 1
-                    const secondToLast = index === populatedAuthors.length - 2
 
-                    return (
-                      <React.Fragment key={index}>
-                        {name}
-                        {secondToLast && populatedAuthors.length > 2 && (
-                          <React.Fragment>, </React.Fragment>
-                        )}
-                        {secondToLast && populatedAuthors.length === 2 && (
-                          <React.Fragment> </React.Fragment>
-                        )}
-                        {!isLast && populatedAuthors.length > 1 && (
-                          <React.Fragment>and </React.Fragment>
-                        )}
-                      </React.Fragment>
-                    )
-                  })}
+                  <p>{formatAuthors(populatedAuthors)}</p>
                 </div>
               )}
             </div>

templates/with-vercel-website/src/utilities/formatAuthors.ts

@@ -0,0 +1,28 @@
+import { Post } from '@/payload-types'
+
+/**
+ * Formats an array of populatedAuthors from Posts into a prettified string.
+ * @param authors - The populatedAuthors array from a Post.
+ * @returns A prettified string of authors.
+ * @example
+ *
+ * [Author1, Author2] becomes 'Author1 and Author2'
+ * [Author1, Author2, Author3] becomes 'Author1, Author2, and Author3'
+ *
+ */
+export const formatAuthors = (
+  authors: NonNullable<NonNullable<Post['populatedAuthors']>[number]>[],
+) => {
+  // Ensure we don't have any authors without a name
+  const filteredAuthors = authors.filter((author) => Boolean(author.name))
+
+  if (filteredAuthors.length === 0) return ''
+  if (filteredAuthors.length === 1) return filteredAuthors[0].name
+  if (filteredAuthors.length === 2)
+    return `${filteredAuthors[0].name} and ${filteredAuthors[1].name}`
+
+  return `${filteredAuthors
+    .slice(0, -1)
+    .map((author) => author?.name)
+    .join(', ')} and ${filteredAuthors[authors.length - 1].name}`
+}