fix: use original anchor tags from the spec (#287)

* fix: use original anchor tags from the spec * Remove ToC as it is handled on the spec repo * Revert back fixes of the spec
asyncapi · Jun 24, 2021 · faf0f7f · faf0f7f
1 parent 1bb7581
commit faf0f7f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 53 deletions.
diff --git a/components/TOC.js b/components/TOC.js
@@ -7,10 +7,11 @@ export default function TOC({
   cssBreakingPoint = 'xl',
   toc,
   contentSelector,
+  depth = 2,
 }) {
   if (!toc || !toc.length) return null
   const minLevel = toc.reduce((mLevel, item) => (!mLevel || item.lvl < mLevel) ? item.lvl : mLevel, 0)
-  const tocItems = toc.filter(item => item.lvl <= minLevel + 2).map(item => ({ ...item, content: item.content.replace(/[\s]?\{\#[\w\d\-_]+\}$/, '').replace(/(<([^>]+)>)/gi, '') }))
+  const tocItems = toc.filter(item => item.lvl <= minLevel + depth).map(item => ({ ...item, content: item.content.replace(/[\s]?\{\#[\w\d\-_]+\}$/, '').replace(/(<([^>]+)>)/gi, '') }))
 
   const [open, setOpen] = useState(false)
 

diff --git a/components/layout/DocsLayout.js b/components/layout/DocsLayout.js
@@ -94,7 +94,7 @@ export default function DocsLayout({ post, navItems = {}, children }) {
               </p>
             </div>
             <div className={`xl:flex ${post.toc && post.toc.length ? 'xl:flex-row-reverse' : ''}`}>
-              <TOC toc={post.toc} className="bg-blue-100 mt-4 p-4 sticky top-0 overflow-y-auto max-h-screen xl:bg-transparent xl:mt-0 xl:pt-0 xl:pb-8 xl:top-4 xl:max-h-(screen-16) xl:w-72" />
+              <TOC toc={post.toc} depth={3} className="bg-blue-100 mt-4 p-4 sticky top-0 overflow-y-auto max-h-screen xl:bg-transparent xl:mt-0 xl:pt-0 xl:pb-8 xl:top-4 xl:max-h-(screen-16) xl:w-72" />
               <div className="mt-8 px-4 sm:px-6 xl:px-8 xl:flex-1 xl:max-w-184">
                 <article className="mb-32">
                   <Head