Docusaurus

Get started with integrating Mosaic into your Docusaurus project.

Step 1

For Blog Posts:

---
title: My Blog Post
description: Description of my blog post
# Static image approach:
image: /img/blog/my-post-og.png
# Or dynamic slug-based approach:
slug: /blog/my-post
---

// src/theme/BlogPostPage.js
import React from 'react';
import BlogPostPage from '@theme-original/BlogPostPage';
import Head from '@docusaurus/Head';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';

export default function BlogPostPageWrapper(props) {
  const {siteConfig} = useDocusaurusContext();
  const {
    metadata: {frontMatter, slug, title, description},
  } = props.content;

  // Generate OG image URL based on slug
  const ogImage = frontMatter.image
    ? useBaseUrl(frontMatter.image, {absolute: true})
    : `https://mosaicimg.com/use?url=yourwebsite.com/${slug.replace(/^/blog/, '')}`;

  return (
    <>
      <Head>
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content={ogImage} />
        <meta name="twitter:image" content={ogImage} />
      </Head>
      <BlogPostPage {...props} />
    </>
  );
}

Step 2

For Documentation Pages:

// src/theme/DocItem.js
import React from 'react';
import DocItem from '@theme-original/DocItem';
import Head from '@docusaurus/Head';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';

export default function DocItemWrapper(props) {
  const {siteConfig} = useDocusaurusContext();
  const {
    metadata: {frontMatter, id, title, description},
  } = props.content;

  // Generate OG image URL based on doc ID
  const ogImage = frontMatter.image
    ? useBaseUrl(frontMatter.image, {absolute: true})
    : `https://mosaicimg.com/use?url=yourwebsite.com/${id}`;

  return (
    <>
      <Head>
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content={ogImage} />
        <meta name="twitter:image" content={ogImage} />
      </Head>
      <DocItem {...props} />
    </>
  );
}

Step 3

For custom pages, create a component like this:

// src/pages/custom-page.js
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

export default function CustomPage() {
  const {siteConfig} = useDocusaurusContext();
  const pageTitle = 'Custom Page Title';
  
  return (
    <Layout title={pageTitle}>
      <Head>
        <meta property="og:title" content={pageTitle} />
        <meta property="og:description" content="Custom page description" />
        <meta 
          property="og:image" 
          content="https://mosaicimg.com/use?url=yourwebsite.com/your_slug" 
        />
      </Head>
      {/* Your page content */}
    </Layout>
  );
}

Step 4

Remember to replace the placeholder value (like 'yourwebsite.com') with your actual website URL.