[UXIT-2349] FFDW Add Author Bio

apps/ffdweb-site/src/app/digest/[slug]/components/AuthorsBio.tsx

@@ -0,0 +1,15 @@
+import { formatAuthors } from '@filecoin-foundation/utils/formatAuthors'
+import type { AuthorExtended } from '@filecoin-foundation/utils/types/authorTypes'
+
+type AuthorBioProps = {
+  authors: Array<AuthorExtended>
+}
+
+export function AuthorsBio({ authors }: AuthorBioProps) {
+  return (
+    <div className="flex flex-col gap-2 sm:w-2/3">
+      <h2 className="text-base font-bold">{formatAuthors({ authors })}</h2>
+      <p className="prose">{authors.map((author) => author.bio).join(' ')}</p>
+    </div>
+  )
+}

apps/ffdweb-site/src/app/digest/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { DigestArticleHeader } from '@filecoin-foundation/ui/DigestArticleHeader
 import { PageLayout } from '@filecoin-foundation/ui/PageLayout'
 import { ShareArticle } from '@filecoin-foundation/ui/ShareArticle'
 import { StructuredDataScript } from '@filecoin-foundation/ui/StructuredDataScript'
+import { formatAuthors } from '@filecoin-foundation/utils/formatAuthors'
 import { type SlugParams } from '@filecoin-foundation/utils/types/paramsTypes'
 
 import { PATHS } from '@/constants/paths'
@@ -19,6 +20,7 @@ import {
   getDigestArticlesData,
 } from '../utils/getDigestArticleData'
 
+import { AuthorsBio } from './components/AuthorsBio'
 import { generateStructuredData } from './utils/generateStructuredData'
 
 type DigestArticleProps = {
@@ -30,6 +32,7 @@ export default async function DigestArticle(props: DigestArticleProps) {
   const data = await getDigestArticleData(slug)
 
   const { title, issueNumber, articleNumber, image, authors, content } = data
+  const hasAuthorBio = authors.some((author) => author.bio)
 
   return (
     <PageLayout>
@@ -46,6 +49,7 @@ export default async function DigestArticle(props: DigestArticleProps) {
           }}
         />
         {content && <MarkdownContent>{content}</MarkdownContent>}
+        {hasAuthorBio && <AuthorsBio authors={authors} />}
         <ShareArticle
           articleTitle={title}
           path={`${PATHS.DIGEST.path}/${slug}`}

apps/ffdweb-site/src/content/digest/creating-human-records-that-stand-the-test-of-time.md

@@ -13,12 +13,13 @@ authors:
     company: Starling Lab
     image:
       src: /assets/headshots/Adam_Rose.webp
+    bio: Adam Rose is the chief operating officer at Starling Lab, and serves as press rights chair for the Los Angeles Press Club.
   - first-name: Basile
     last-name: Simon
     company: Starling Lab, Airwars
     image:
       src: /assets/headshots/Basile_Simon.webp
-    # bio: "Adam Rose is the chief operating officer at Starling Lab, and serves as press rights chair for the Los Angeles Press Club. Basile Simon leads the Lab’s research in law and criminal accountability, and is co-founder and advisor to Airwars. Both have spent most of their careers in journalism."
+    bio: Basile Simon leads the Lab’s research in law and criminal accountability, and is co-founder and advisor to Airwars. Both have spent most of their careers in journalism.
 seo:
   description: "From ancient clay tablets to modern blockchains, discover how new technologies are preserving crucial digital evidence of war crimes, human rights violations, and historical events for future generations."
 ---

apps/ffdweb-site/src/content/digest/decentralization-and-data-flows.md

@@ -13,7 +13,7 @@ authors:
     company: Data Transfer Initiative
     image:
       src: /assets/headshots/Chris_Riley.webp
-    # bio: Chris Riley is the executive director of the nonprofit Data Transfer Initiative and a distinguished research fellow at the Annenberg Public Policy Center at the University of Pennsylvania; he holds a Ph.D. in computer science from Johns Hopkins University and a J.D. from Yale Law School.
+    bio: Chris Riley is the executive director of the nonprofit Data Transfer Initiative and a distinguished research fellow at the Annenberg Public Policy Center at the University of Pennsylvania; he holds a Ph.D. in computer science from Johns Hopkins University and a J.D. from Yale Law School.
 seo:
   description: Explore how data portability and unrestricted data flows enable true decentralization. Learn why reciprocal data transfer policies and user control are essential for decentralized systems.
 ---

apps/ffdweb-site/src/content/digest/decentralization-in-all-the-things.md

@@ -13,7 +13,7 @@ authors:
     company: Techdirt, Copia Institute
     image:
       src: /assets/headshots/Mike_Masnick.webp
-    # bio: Mike Masnick is the founder & editor of the popular Techdirt blog as well as the founder of the Silicon Valley think tank, the Copia Institute.  In both roles, he explores the intersection of technology,innovation, policy, law, civil liberties, and economics.
+    bio: Mike Masnick is the founder & editor of the popular Techdirt blog as well as the founder of the Silicon Valley think tank, the Copia Institute.  In both roles, he explores the intersection of technology,innovation, policy, law, civil liberties, and economics.
 seo:
   description: Discover how blending centralized infrastructure with decentralized innovation can transform technology, healthcare, and education, creating more efficient and adaptable systems.
 ---

apps/ffdweb-site/src/content/digest/editors-letter.md

@@ -13,7 +13,7 @@ authors:
     company: Techdirt, Copia Institute
     image:
       src: /assets/headshots/Mike_Masnick.webp
-    # bio: Mike Masnick is the founder & editor of the popular Techdirt blog as well as the founder of the Silicon Valley think tank, the Copia Institute. In both roles, he explores the intersection of technology, innovation, policy, law, civil liberties, and economics.
+    bio: Mike Masnick is the founder & editor of the popular Techdirt blog as well as the founder of the Silicon Valley think tank, the Copia Institute. In both roles, he explores the intersection of technology, innovation, policy, law, civil liberties, and economics.
 seo:
   description: "Mike Masnick introduces a magazine exploring decentralization's impact on cognitive liberty, privacy, blockchain, and the web's future through expert perspectives."
 ---

apps/ffdweb-site/src/content/digest/free-softwares-paradox-losing-while-winning-and-the-need-for-decentralization.md

@@ -14,7 +14,7 @@ authors:
     company: Fight for the Future, Quiet
     image:
       src: /assets/headshots/Holmes_Wilson.webp
-    # bio: Holmes Wilson is a co-founder of Fight for the Future and Quiet, a decentralized alternative to Slack and Discord built on Tor and IPFS.
+    bio: Holmes Wilson is a co-founder of Fight for the Future and Quiet, a decentralized alternative to Slack and Discord built on Tor and IPFS.
 seo:
   description: While free software has become ubiquitous, its goal of user control remains elusive due to cloud service dependencies. The solution lies in decentralization - making operational power as accessible as the code itself.
 ---

apps/ffdweb-site/src/content/digest/navigating-crypto-policy-around-the-globe.md

@@ -13,7 +13,7 @@ authors:
     company: Blockchain Association
     image:
       src: /assets/headshots/Kristin_Smith.webp
-  # bio: "Kristin is CEO of Blockchain Association, the Washington, D.C.-based trade association representing more than 100 of the industry’s leading companies."
+    bio: "Kristin is CEO of Blockchain Association, the Washington, D.C.-based trade association representing more than 100 of the industry’s leading companies."
 seo:
   description: "Explore how different regions approach crypto regulation: from US enforcement actions to EU's MiCA legislation and China's CBDC. Learn how global policies shape the future of decentralized technology."
 ---

apps/ffdweb-site/src/content/digest/recognizing-code-as-speech-is-vital.md

@@ -13,7 +13,7 @@ authors:
     company: "Filecoin Foundation"
     image:
       src: /assets/headshots/Kurt_Opsahl.webp
-    # bio: Kurt Opsahl works to help build the legal and policy space in which the decentralized web can thrive.
+    bio: Kurt Opsahl works to help build the legal and policy space in which the decentralized web can thrive.
 seo:
   description: Explore why protecting code as a form of free speech is essential for software development, open-source projects, and the future of the decentralized web. Learn about landmark legal cases and global implications.
 ---

apps/ffdweb-site/src/content/digest/reviving-internet-decentralization-without-relying-on-the-b-word.md

@@ -13,7 +13,7 @@ authors:
     company: Digital Medusa
     image:
       src: /assets/headshots/Farzaneh_Badiei.webp
-    # bio: Farzaneh Badiei is a recovering academic and founded Digital Medusa to petrify the enemies of a global, interoperable Internet.
+    bio: Farzaneh Badiei is a recovering academic and founded Digital Medusa to petrify the enemies of a global, interoperable Internet.
 seo:
   description: Internet decentralization needs smart governance, not complex tech. Learn how practical steps and collective action can restore a more distributed digital infrastructure.
 ---

apps/ffdweb-site/src/content/digest/terminal-values-cognitive-liberty.md

@@ -13,7 +13,7 @@ authors:
     company: Filecoin Foundation for the Decentralized Web
     image:
       src: /assets/headshots/Danny_OBrien.webp
-    # bio: "Danny O'Brien is Senior Fellow and DWeb Strategy at Filecoin and tech journalist, developer and defender of online free speech, privacy and an open internet for more than 20 years, including over a decade's activism at the Electronic Frontier Foundation."
+    bio: "Danny O'Brien is Senior Fellow and DWeb Strategy at Filecoin and tech journalist, developer and defender of online free speech, privacy and an open internet for more than 20 years, including over a decade's activism at the Electronic Frontier Foundation."
 seo:
   description: Explore how personal technology and digital rights protect our fundamental freedom to think, learn, and grow independently in an increasingly centralized digital world.
 ---

apps/ffdweb-site/src/content/digest/the-debate-over-dweb-vs-web3-the-decentralized-elephant-in-the-room.md

@@ -13,7 +13,7 @@ authors:
     company: DWeb Projects, COMPOST magazine, Hypha Worker Co-op
     image:
       src: /assets/headshots/Mai_Ishikawa_Sutton.webp
-    # bio: "Mai Ishikawa Sutton is a senior organizer with DWeb projects, co-founder of Distributed.Press and COMPOST magazine, and contributor to Hypha Worker Co-op."
+    bio: Mai Ishikawa Sutton is a senior organizer with DWeb projects, co-founder of Distributed.Press and COMPOST magazine, and contributor to Hypha Worker Co-op.
 seo:
   description: "Comparing DWeb and Web3's approaches to decentralization, focusing on the key question: who designs, controls, and benefits from these technologies?"
 ---

apps/ffdweb-site/src/content/digest/twiddler-configurability-for-me-but-not-for-thee.md

@@ -13,7 +13,7 @@ authors:
     company: craphound.com
     image:
       src: /assets/headshots/Cory_Doctorow.webp
-    # bio: Cory Doctorow (craphound.com) is a science fiction author, activist and journalist. He is the author of many books, most recently RED TEAM BLUES, a science fiction crime thriller.
+    bio: Cory Doctorow (craphound.com) is a science fiction author, activist and journalist. He is the author of many books, most recently RED TEAM BLUES, a science fiction crime thriller.
 seo:
   description: "Digital platforms control users by constantly adjusting their systems while denying users the same power, leading to declining user experience and increased profits."
 ---

apps/ffdweb-site/src/content/digest/why-we-need-to-fight-for-our-privacy.md

@@ -13,7 +13,7 @@ authors:
     company: NBTV.media
     image:
       src: /assets/headshots/Naomi_Brockwell.webp
-    # bio: Naomi Brockwell is a tech journalist, creator of NBTV.media, and author of "Beginner's Introduction to Privacy"
+    bio: Naomi Brockwell is a tech journalist, creator of NBTV.media, and author of "Beginner's Introduction to Privacy"
 
 seo:
   description: "Privacy is essential for freedom and democracy. Learn how surveillance threatens our future and why privacy matters - even if you think you have 'nothing to hide.'"

packages/ui/src/Avatar.tsx

@@ -1,15 +1,12 @@
 import Image from 'next/image'
 
+import { type Author } from '@filecoin-foundation/utils/types/authorTypes'
 import { clsx } from 'clsx'
 
 const IMAGE_SIZE = 32
 const sharedAvatarStyle = 'rounded-full ring avatar-ring'
 
-export type AvatarProps = {
-  firstName: string
-  lastName: string
-  image?: { src: string }
-}
+export type AvatarProps = Author
 
 export function Avatar({ firstName, lastName, image }: AvatarProps) {
   if (image) {

packages/ui/src/AvatarGroup.tsx

@@ -1,11 +1,10 @@
-import { Avatar, type AvatarProps } from './Avatar'
+import { Avatar } from './Avatar'
 
-type AuthorWithCompany = AvatarProps & {
-  company: string
-}
+import { formatAuthors } from '@filecoin-foundation/utils/formatAuthors'
+import { type AuthorExtended } from '@filecoin-foundation/utils/types/authorTypes'
 
 export type AvatarGroupProps = {
-  authors: Array<AuthorWithCompany>
+  authors: Array<AuthorExtended>
 }
 
 export function AvatarGroup({ authors }: AvatarGroupProps) {
@@ -21,26 +20,9 @@ export function AvatarGroup({ authors }: AvatarGroupProps) {
           />
         ))}
       </div>
-      <span className="avatar-full-name text-sm">{formatAuthors(authors)}</span>
+      <span className="avatar-full-name text-sm">
+        {formatAuthors({ authors, showCompany: true })}
+      </span>
     </div>
   )
 }
-
-function formatAuthors(authors: Array<AuthorWithCompany>) {
-  return authors
-    .map((author, index) => {
-      const isLastAuthor = index === authors.length - 1
-      const isSecondToLastAuthor = index === authors.length - 2
-
-      let separator = ''
-      if (isSecondToLastAuthor && authors.length > 1) {
-        separator = ' & '
-      } else if (!isLastAuthor) {
-        separator = ', '
-      }
-
-      return `${author.firstName.trim()} ${author.lastName.trim()} (${author.company.trim()})${separator}`
-    })
-    .join('')
-    .trim()
-}

packages/utils/package.json

@@ -13,6 +13,7 @@
     "./dateUtils": "./src/dateUtils.ts",
     "./fileUtils": "./src/fileUtils.ts",
     "./findOrThrow": "./src/findOrThrow.ts",
+    "./formatAuthors": "./src/formatAuthors.ts",
     "./generateBlogPostStructuredData": "./src/generateBlogPostStructuredData.ts",
     "./generateSitemap": "./src/generateSitemap.ts",
     "./getAllMarkdownData": "./src/getAllMarkdownData.ts",

packages/utils/src/formatAuthors.ts

@@ -0,0 +1,31 @@
+import { type AuthorExtended } from '@filecoin-foundation/utils/types/authorTypes'
+
+type FormatAuthorsProps = {
+  authors: Array<AuthorExtended>
+  showCompany?: boolean
+}
+
+export function formatAuthors({
+  authors,
+  showCompany = false,
+}: FormatAuthorsProps) {
+  return authors
+    .map((author, index) => {
+      const isLastAuthor = index === authors.length - 1
+      const isSecondToLastAuthor = index === authors.length - 2
+
+      let separator = ''
+      if (isSecondToLastAuthor && authors.length > 1) {
+        separator = ' & '
+      } else if (!isLastAuthor) {
+        separator = ', '
+      }
+
+      const name = `${author.firstName.trim()} ${author.lastName.trim()}`
+      return showCompany
+        ? `${name} (${author.company.trim()})${separator}`
+        : `${name}${separator}`
+    })
+    .join('')
+    .trim()
+}

packages/utils/src/schemas/DigestArticleFrontmatterSchema.ts

@@ -12,6 +12,7 @@ export const DigestArticleFrontmatterSchema = DynamicBaseDataSchema.extend({
       'last-name': z.string(),
       image: ImagePropsSchema.optional(),
       company: z.string(),
+      bio: z.string().optional(),
     }),
   ),
   content: z.string(),

packages/utils/src/types/authorTypes.ts

@@ -0,0 +1,10 @@
+export type Author = {
+  firstName: string
+  lastName: string
+  image?: { src: string }
+}
+
+export type AuthorExtended = Author & {
+  company: string
+  bio?: string
+}