1 files changed, 99 insertions, 0 deletions
diff --git a/src/theme/Admonition/Layout/index.js b/src/theme/Admonition/Layout/index.js
new file mode 100644
index 00000000..7bc2802b
--- /dev/null
+++ b/src/theme/Admonition/Layout/index.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import admonitionStyles from '@docusaurus/theme-classic/lib/theme/Admonition/Layout/styles.module.css';
+import headingStyles from '@docusaurus/theme-classic/lib/theme/Heading/styles.module.css';
+
+function AdmonitionContainer({type, className, children}) {
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.common.admonition,
+        ThemeClassNames.common.admonitionType(type),
+        admonitionStyles.admonition,
+        className,
+      )}
+      >
+      {children}
+    </div>
+  );
+}
+function AdmonitionHeading({icon, id, title}) {
+  // 文字列冒頭の#の数を数える
+  const depth = title.match ? (title.match(/^#+/) || [''])[0].length : 0;
+  // #を省いたタイトルを得る
+  const trimmedTitle = depth > 0 ? title.replace(/^#+/, '').trim() : title;
+  // スクロール位置調整のcss
+  const classNames = clsx("anchor", "title", headingStyles.anchorWithStickyNavbar);
+  // depthに応じて見出しタグをレンダー
+  return (
+    <div className={admonitionStyles.admonitionHeading}>
+      <span className={admonitionStyles.admonitionIcon}>{icon}</span>
+      {(() => {
+        if (depth == 3) {
+          return(
+            <h3
+              id={id}
+              className={classNames}
+            >
+              {trimmedTitle}
+            </h3>
+          )
+        } else if (depth == 4) {
+          return(
+            <h4
+              id={id}
+              className={classNames}
+            >
+              {trimmedTitle}
+            </h4>
+          )
+        } else if (depth == 5) {
+          return(
+            <h5
+              id={id}
+              className={classNames}
+            >
+              {trimmedTitle}
+            </h5>
+          )
+        } else if (depth == 6) {
+          return(
+            <h6
+              id={id}
+              className={classNames}
+            >
+              {trimmedTitle}
+            </h6>
+          )
+        } else {
+          return(
+            <>
+              {trimmedTitle}
+            </>
+          )
+        }
+      })()}
+    </div>
+  );
+}
+function AdmonitionContent({children}) {
+  return children ? (
+    <div className={admonitionStyles.admonitionContent}>{children}</div>
+  ) : null;
+}
+export default function AdmonitionLayout(props) {
+  const {type, icon, title, children, className, id} = props;
+  return (
+    <AdmonitionContainer type={type} className={className}>
+      <AdmonitionHeading title={title} icon={icon} id={id} />
+      <AdmonitionContent>{children}</AdmonitionContent>
+    </AdmonitionContainer>
+  );
+}