Add: 記事ページにバナー画像をヒーロー表示 (DocItem swizzle)

src/theme/DocItem/Layout/index.tsx

@@ -0,0 +1,35 @@
+import React, {type ReactNode} from 'react';
+import Layout from '@theme-original/DocItem/Layout';
+import type LayoutType from '@theme/DocItem/Layout';
+import type {WrapperProps} from '@docusaurus/types';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+
+type Props = WrapperProps<typeof LayoutType>;
+
+export default function LayoutWrapper(props: Props): ReactNode {
+  const {frontMatter} = useDoc();
+  const image = (frontMatter as any).image as string | undefined;
+
+  return (
+    <>
+      {image && (
+        <div style={{
+          marginBottom: '1.5rem',
+          borderRadius: '12px',
+          overflow: 'hidden',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        }}>
+          <img
+            src={image}
+            alt=""
+            style={{
+              width: '100%',
+              display: 'block',
+            }}
+          />
+        </div>
+      )}
+      <Layout {...props} />
+    </>
+  );
+}