My Third Blog Post

2023-10-17

Welcome to my MDX page!

This is some bold and italics text.

This is a list in markdown:

  • One
  • Two
  • Three

Here is some code:

'use client';
import React from 'react';
// import '../../app/globals.css';
import '../../app/prism.css';
import postsMetadata from '../../app/posts-metadata/data.json';
import { useRouter } from 'next/router';
import Head from 'next/head';

function MDXDefaultLayout({ children }) {
  const router = useRouter();
  console.log(`postsMetadata=${postsMetadata}`);
  console.log(`Current URL: ${router.asPath}`);
  console.log(`Current URL Suffix: ${router.asPath.split('/')[2]}`); // Log only the URL suffix after '?'
  const urlSuffix = router.asPath.split('/')[2];
  const post = postsMetadata.find((post) => post.slug === urlSuffix);
  console.log(`postsMetadata=${JSON.stringify(postsMetadata)}`);
  const ogImageUrl = `https://000-public-jshapiro.s3.amazonaws.com/jamesshapiro.com/posts/og-images/${post.slug}.png`;

  return (
    <>
      {post && (
        <Head>
          <title>{`${post.title} · James's Blog`}</title>
          <meta name='date' content={post.date} />
          <meta property='og:image' content={ogImageUrl} />
          <meta property='og:description' content={post.title} />
        </Head>
      )}
      <h1>{post.title}</h1>
      <h2>{post.date}</h2>
      <div style={{ color: 'red' }}>{children}</div>
    </>
  );
}

export default MDXDefaultLayout;

Checkout my React component:

0