feat: implement contributor and author components

Author: LeadcodeDev

.env.example

@@ -4,3 +4,6 @@
 PUBLIC_WEBSITE_URL=http://localhost:4323
 PUBLIC_DOCS_URL=http://localhost:4321
 PUBLIC_BLOG_URL=http://localhost:4322
+
+# Optional: GitHub token for higher API rate limits (contributors fetch)
+# GITHUB_TOKEN=ghp_xxxxxxxxxxxx

.github/workflows/deploy.yml

@@ -61,6 +61,7 @@ jobs:
           PUBLIC_DOCS_URL: ${{ vars.PUBLIC_DOCS_URL }}
           PUBLIC_BLOG_URL: ${{ vars.PUBLIC_BLOG_URL }}
           PUBLIC_WEBSITE_URL: ${{ vars.PUBLIC_WEBSITE_URL }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - uses: actions/upload-artifact@v4
         with:
           name: docs-dist
@@ -83,6 +84,7 @@ jobs:
           PUBLIC_BLOG_URL: ${{ vars.PUBLIC_BLOG_URL }}
           PUBLIC_DOCS_URL: ${{ vars.PUBLIC_DOCS_URL }}
           PUBLIC_WEBSITE_URL: ${{ vars.PUBLIC_WEBSITE_URL }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - uses: actions/upload-artifact@v4
         with:
           name: blog-dist

apps/blog/astro.config.ts

@@ -9,6 +9,7 @@ import { remarkAutoImport } from '@explainer/mdx/remark-auto-import'
 import { remarkDirectiveHandler } from '@explainer/mdx/remark-directive-handler'
 import { remarkCodeBlocks } from '@explainer/mdx/remark-code-blocks'
 import { thumbnailIntegration } from '@explainer/thumbnail/integration'
+import { remarkDocsLinks } from './src/plugins/remark-docs-links'
 
 function loadRootEnv() {
   try {
@@ -31,7 +32,13 @@ export default defineConfig({
   integrations: [
     react(),
     mdx({
-      remarkPlugins: [remarkAutoImport, remarkCodeBlocks, remarkDirective, remarkDirectiveHandler],
+      remarkPlugins: [
+        remarkAutoImport,
+        remarkCodeBlocks,
+        remarkDirective,
+        [remarkDocsLinks, { docsUrl: process.env.PUBLIC_DOCS_URL || env.PUBLIC_DOCS_URL }],
+        remarkDirectiveHandler,
+      ],
     }),
     thumbnailIntegration({
       appName: 'Blog',

apps/blog/src/components/AuthorCard.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@explainer/ui'
+
+export interface AuthorCardProps {
+  author: {
+    name: string
+    title: string
+    avatar: string
+    href?: string
+  }
+  label?: string
+  className?: string
+}
+
+export function AuthorCard({ author, label = 'Written by', className }: AuthorCardProps) {
+  const content = (
+    <div className="flex items-center gap-3">
+      <img
+        src={author.avatar}
+        alt={author.name}
+        className="h-10 w-10 rounded-full ring-1 ring-border shrink-0"
+        loading="lazy"
+      />
+      <div className="min-w-0">
+        <p className="text-sm font-medium truncate">{author.name}</p>
+        <p className="text-xs text-muted-foreground truncate">{author.title}</p>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className={cn('border-t border-dashed border-border pt-4 mt-4', className)}>
+      <p className="text-sm font-medium mb-3">{label}</p>
+      {author.href ? (
+        <a
+          href={author.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block rounded-md p-2 -mx-2 transition-colors hover:bg-accent/50"
+        >
+          {content}
+        </a>
+      ) : (
+        <div className="p-2 -mx-2">{content}</div>
+      )}
+    </div>
+  )
+}

apps/blog/src/components/TableOfContents.tsx

@@ -1,19 +1,28 @@
 import * as React from 'react'
 import { cn, SponsorCards, defaultSponsors } from '@explainer/ui'
 import { useTranslations } from '../i18n/utils'
+import { AuthorCard } from './AuthorCard'
 
 export interface TocHeading {
   depth: number
   slug: string
   text: string
 }
 
+interface Author {
+  name: string
+  title: string
+  avatar: string
+  href?: string
+}
+
 interface TableOfContentsProps {
   headings: TocHeading[]
   locale?: string
+  author?: Author
 }
 
-export function TableOfContents({ headings, locale = 'en' }: TableOfContentsProps) {
+export function TableOfContents({ headings, locale = 'en', author }: TableOfContentsProps) {
   const t = useTranslations(locale)
   const filtered = headings.filter((h) => h.depth >= 2 && h.depth <= 3)
   const [activeId, setActiveId] = React.useState<string>(filtered[0]?.slug ?? '')
@@ -64,6 +73,7 @@ export function TableOfContents({ headings, locale = 'en' }: TableOfContentsProp
           </li>
         ))}
       </ul>
+      {author && <AuthorCard author={author} label={t('author.label')} />}
       <SponsorCards sponsors={defaultSponsors} title={t('sponsors.title')} />
     </nav>
   )

apps/blog/src/i18n/ui.ts

@@ -36,6 +36,9 @@ export const ui = {
     // Sponsors
     'sponsors.title': 'Sponsors',
 
+    // Author
+    'author.label': 'Written by',
+
     // Share buttons
     'share.linkedin': 'Share on LinkedIn',
     'share.twitter': 'Share on Twitter',
@@ -77,6 +80,9 @@ export const ui = {
     // Sponsors
     'sponsors.title': 'Sponsors',
 
+    // Author
+    'author.label': 'Écrit par',
+
     // Share buttons
     'share.linkedin': 'Partager sur LinkedIn',
     'share.twitter': 'Partager sur Twitter',

apps/blog/src/layouts/post.astro

@@ -21,12 +21,13 @@ interface Props {
   readingTime: number
   headings: Heading[]
   url: string
+  author?: { name: string; title: string; avatar: string; href?: string }
   locale?: string
   locales?: string[]
   localeSwitchUrls?: Record<string, string>
 }
 
-const { title, description, date, tags, cover, thumbnail, readingTime, headings, url, locale = 'en', locales, localeSwitchUrls } = Astro.props
+const { title, description, date, tags, cover, thumbnail, readingTime, headings, url, author, locale = 'en', locales, localeSwitchUrls } = Astro.props
 const t = useTranslations(locale)
 ---
 
@@ -82,7 +83,7 @@ const t = useTranslations(locale)
 
     <!-- Right column: Table of Contents (sticky) -->
     <aside class="hidden xl:block w-56 shrink-0">
-      <TableOfContents headings={headings} locale={locale} client:load />
+      <TableOfContents headings={headings} locale={locale} author={author} client:load />
     </aside>
   </div>
 </Base>

apps/blog/src/pages/[locale]/[slug].astro

@@ -2,6 +2,7 @@
 import { getCollection, render } from 'astro:content'
 import PostLayout from '../../layouts/post.astro'
 import { getPublishedPosts, getPostSlug, getPostLocale, getPostHref, getLocales, getReadingTime, buildLocaleSwitchUrls } from '../../lib/posts'
+import { getAuthor } from '../../lib/authors'
 import Pre from '@explainer/mdx/overrides/pre.astro'
 import Blockquote from '@explainer/mdx/overrides/blockquote.astro'
 import MathBlock from '@explainer/mdx/components/math.astro'
@@ -26,6 +27,7 @@ const { Content, headings } = await render(post)
 const readingTime = getReadingTime(post.body ?? '')
 const articleUrl = new URL(getPostHref(post), Astro.site ?? Astro.url.origin).href
 const localeSwitchUrls = buildLocaleSwitchUrls(allPosts, post, locales)
+const author = post.data.author ? getAuthor(post.data.author) : undefined
 ---
 
 <PostLayout
@@ -38,6 +40,7 @@ const localeSwitchUrls = buildLocaleSwitchUrls(allPosts, post, locales)
   readingTime={readingTime}
   headings={headings}
   url={articleUrl}
+  author={author}
   locale={locale}
   locales={locales}
   localeSwitchUrls={localeSwitchUrls}

apps/blog/src/plugins/remark-docs-links.ts

@@ -0,0 +1,40 @@
+import type { Root } from 'mdast'
+
+const docsPathPattern = /^\/(en|fr)\/explainer\//
+
+function visitNodes(node: any, visitor: (n: any) => void) {
+  visitor(node)
+  if (node.children) {
+    for (const child of node.children) {
+      visitNodes(child, visitor)
+    }
+  }
+}
+
+/**
+ * Remark plugin that rewrites internal docs links to point to the docs app URL.
+ * Links matching `/(en|fr)/explainer/...` are prefixed with the docs base URL.
+ */
+export function remarkDocsLinks(options?: { docsUrl?: string }) {
+  const docsUrl = (options?.docsUrl ?? '').replace(/\/$/, '')
+
+  return (tree: Root) => {
+    if (!docsUrl) return
+
+    visitNodes(tree, (node: any) => {
+      // Rewrite markdown links: [text](/en/explainer/...)
+      if (node.type === 'link' && typeof node.url === 'string' && docsPathPattern.test(node.url)) {
+        node.url = docsUrl + node.url
+      }
+
+      // Rewrite directive href attributes: :::card{href="/en/explainer/..."}
+      if (
+        (node.type === 'containerDirective' || node.type === 'leafDirective') &&
+        node.attributes?.href &&
+        docsPathPattern.test(node.attributes.href)
+      ) {
+        node.attributes.href = docsUrl + node.attributes.href
+      }
+    })
+  }
+}

apps/docs/src/components/toc.tsx

@@ -1,4 +1,4 @@
-import { cn, defaultSponsors, SponsorCards } from '@explainer/ui'
+import { cn, defaultSponsors, SponsorCards, ContributorCards, type Contributor } from '@explainer/ui'
 import * as React from 'react'
 
 export interface TocHeading {
@@ -9,9 +9,10 @@ export interface TocHeading {
 
 interface TocProps {
   headings: TocHeading[]
+  contributors?: Contributor[]
 }
 
-export function TableOfContents({ headings }: TocProps) {
+export function TableOfContents({ headings, contributors = [] }: TocProps) {
   const filtered = headings.filter((h) => h.depth >= 2 && h.depth <= 3)
   const [activeId, setActiveId] = React.useState<string>('')
 
@@ -73,6 +74,7 @@ export function TableOfContents({ headings }: TocProps) {
         ))}
       </ul>
       <SponsorCards sponsors={defaultSponsors} />
+      <ContributorCards contributors={contributors} />
     </nav>
   )
 }