import admonitionTitleToHeadingBeforeTOC from './src/remark/admonition-title-to-heading-before-toc.js';
import admonitionTitleToHeadingAfterTOC from './src/rehype/admonition-title-to-heading-after-toc.js';

export default {
    // ...
    presets: [
    [
        'classic',
        /** @type {import('@docusaurus/preset-classic').Options} */
        ({
        docs: {
            // ...
            beforeDefaultRemarkPlugins: [admonitionTitleToHeadingBeforeTOC],
            rehypePlugins: [admonitionTitleToHeadingAfterTOC],
        },
        blog: {
            // ...
            beforeDefaultRemarkPlugins: [admonitionTitleToHeadingBeforeTOC],
            rehypePlugins: [admonitionTitleToHeadingAfterTOC],
        },
        // ...
        }),
    ]],
    // ...
}

import {visit} from 'unist-util-visit';

const plugin = (options) => {
  const transformer = async (ast) => {
    let newBeginningText = "";
    const visitor = ((node, index, parent) => {
      if (node.type === 'containerDirective') {
        // :::infoなどに続くタイトル冒頭Text部（冒頭#を含む（もしくは含まない）部分）を取得（:::info ##** ）
        // （タイトル全体にはHTML等が含まれる可能性があるため冒頭Text部だけ操作する、残りはシャロ―コピー）
        const beginningText = node.children[0].children[0].value;

        // タイトル冒頭Text部に#が2つ以上連続しているとき
        if(/^##/.test(beginningText)) {
          // タイトル冒頭部から#とそれに続く空白を削除
          newBeginningText = beginningText.replace(/^#+/, '').trim();

          // タイトル部冒頭だけ更新し、残りはシャロ―コピー
          // まずタイトル部全体をシャロ―コピー
          let titleNodes = [...node.children[0].children];

          // 冒頭要素のvalueを更新（ほかはシャロ―コピー）
          const newTitleBeginningNode = {
            ...titleNodes[0],
            value: newBeginningText,
          }
         
          // タイトルノードの冒頭要素だけ更新（ほかはシャロ―コピー）
          const newTitleNodes = [ ...titleNodes ];
          newTitleNodes[0] = newTitleBeginningNode;

          // visitしているcontainerDirectiveの前にheadingノードを追加
          parent.children.splice(index, 0, {
            type: 'heading',
            depth: (beginningText.match(/^##+/) || [''])[0].length, // #の連続数がheadingの深さ
            children: newTitleNodes,
          });
          //  次に検索するのはindexを2つ分飛ばしたノード
          return index + 2;
        }
      }
    });
  
    visit(ast, 'containerDirective', visitor);
  
  };
  return transformer;
};

export default plugin;

import {visit} from 'unist-util-visit';

const plugin = (options) => {
  const transformer = async (ast) => {
    let hId = null;
    let hContent = null;
    visit(ast, 'element', (node, index, parent) => {
      if (/^h[2-6]$/.test(node.tagName) && node.properties && node.properties.id) {
        // H要素（h2~h6）を見つけた場合
        
        // IDとタイトルの冒頭Text部を取得する
        hId = node.properties.id;
        hContent = node.children ? node.children[0].value :
          node.children[0].children[0] ? node.children[0].children[0].value : '';

        // 続くAdmonitionを探す（docはH要素とadmonitionが連続しているが
        // blogではなぜか改行要素{ type:'text', value:'\n' }が間に入っているので念のため隣接3要素を探す
        for (let i = index + 1; i < index + 4 && i < parent.children.length; i++) {
          if(parent.children[i] && parent.children[i].tagName === 'admonition') {
            // admonition（div）を見つけた場合
            const admonitionNode = parent.children[i];
            
            // admonitionタイトルの冒頭Text部分を取得（properties.titleもしくはchildren[0].children[0].value）
            const admonitionNodeTitle = admonitionNode.properties.title ? admonitionNode.properties.title :
              admonitionNode.children[0] && admonitionNode.children[0].children[0] ? admonitionNode.children[0].children[0].value : '';

            if(/^##/.test(admonitionNodeTitle) && admonitionNodeTitle.replace(/^#+/, '').trim() === hContent.trim()) {
              // #で始まっていて、タイトル冒頭部が同じ場合
              // divのidをHタグのidに設定
              admonitionNode.properties.id = hId;
              // H要素を削除
              parent.children.splice(index, 1);
            }
          }
        }
      }
    });
  };
  return transformer;
};

export default plugin;

import React from 'react';
import clsx from 'clsx';
import {ThemeClassNames} from '@docusaurus/theme-common';
import styles from './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),
        styles.admonition,
        className,
      )}>
      {children}
    </div>
  );
}
function AdmonitionHeading({icon, title, id}) {
  let depth = 0;
  let trimmedTitle = title;
  // titleにHTML等が含まれている場合は文字列ではなく配列になる
  if(typeof title === "string") {
    // 文字列冒頭の#の数を数える（
    depth = title.match ? (title.toString().match(/^#+/) || [''])[0].length : 0;
    // #を省いたタイトルを得る
    trimmedTitle = depth > 0 ? title.replace(/^#+/, '').trim() : title;
  } else if (typeof title[0] === "string") {
    depth = title[0].match ? (title[0].match(/^#+/) || [''])[0].length : 0;
    trimmedTitle = depth > 0 ? [title[0].replace(/^#+/, '').trim(), ...title.slice(1)] : title;
  }

  // スクロール位置調整のcss
  const classNames = clsx("anchor", "title", headingStyles.anchorWithStickyNavbar);
  // depthに応じて見出しタグをレンダー
  return (
    <div className={styles.admonitionHeading}>
      <span className={styles.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={styles.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>
  );
}