テスト2

段落2

テストテストテスト

import { useRouter } from 'next/router';
import { FaRegClock } from 'react-icons/fa';
import { buildClient } from 'libs/contentful';
import Date from 'libs/date';
import Image from 'next/image';
import ReactMarkdown from 'react-markdown';
import { CodeComponent } from 'react-markdown/lib/ast-to-react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/cjs/styles/hljs';

const CodeBlock: CodeComponent = ({ language, children }: any) => {
  console.log(children);
  return (<SyntaxHighlighter language={language} style={atomOneDarkReasonable}>
      {children[0].props.children}
    </SyntaxHighlighter>);
};

const client = buildClient();

export default function BlogId({ posts }: any) {
  const mdComponents = {
    pre: CodeBlock,
  };
  return (
    <article>
      <div className='relative w-full aspect-video rounded-lg'>
        <Image
          src={`https:${posts.fields.sumnail.fields.file.url}`}
          alt={posts.fields.title}
          layout="fill"
          objectFit="cover"
          className="rounded-lg"
        />
      </div>
      <h1 className="text-5xl inline-block my-2 font-bold">
        {posts.fields.title}
      </h1>
      <div className="w-full">
        <span className="px-2 py-1 my-1 inline-block text-blue-700 border border-blue-700 rounded-full">
          {posts.fields.category}
        </span>
      </div>
      <span className="text-lg text-gray-600 flex justify-left items-center">
        <FaRegClock />
        {Date(posts.sys.updatedAt)}
      </span>
      <div id="article">
        <ReactMarkdown components={mdComponents}>
          {posts.fields.contents}
        </ReactMarkdown>
      </div>
    </article>
  );
}

// 静的生成のためのパスを指定します
export const getStaticPaths = async () => {
  const { items } = await client.getEntries({
    content_type: 'article',
  });
  const paths = items.map((item: any) => {
    return {
      params: { slug: item.fields.slug },
    };
  });
  return {
    paths,
    fallback: false,
  };
};

// データをテンプレートに受け渡す部分の処理を記述します
export const getStaticProps = async ({ params }: any) => {
  const { items } = await client.getEntries({
    content_type: 'article',
    'fields.slug': params.slug,
  });
  return {
    props: {
      posts: items[0],
    },
  };
};

段落2-2

• List
  • Child
• List2
  • Child2