feat: added TOC (#198)

src/components/widget/TOC.astro

@@ -0,0 +1,48 @@
+---
+import WidgetLayout from './WidgetLayout.astro'
+import type { MarkdownHeading } from 'astro';
+
+import { i18n } from '../../i18n/translation'
+import I18nKey from '../../i18n/i18nKey'
+import ButtonLink from '../control/ButtonLink.astro'
+
+interface Props {
+  class?: string
+  style?: string
+  headings: MarkdownHeading[]
+}
+
+const { headings  } = Astro.props;
+
+const className = Astro.props.class
+const style = Astro.props.style
+
+const COLLAPSED_HEIGHT = '7.5rem'
+const COLLAPSE_THRESHOLD = 5
+
+const isCollapsed = headings.length >= COLLAPSE_THRESHOLD
+
+const getMarginStyleFromHeading = (heading: MarkdownHeading) => {
+    return `margin-left: ${(heading.depth - 1) / 2}rem`;
+}
+
+const removeTailingHash = (text: string) => {
+    let lastIndexOfHash = text.lastIndexOf('#');
+    if (lastIndexOfHash != text.length - 1) {
+        return text;
+    }
+
+    return text.substring(0, lastIndexOfHash);
+}
+
+---
+
+<WidgetLayout name={i18n(I18nKey.toc)} id="toc" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT}
+                class={className} style={style}
+                >
+    {headings.map((heading) =>
+        <div style={getMarginStyleFromHeading(heading)}>
+            <ButtonLink url={`#${heading.slug}`}>{removeTailingHash(heading.text)}</ButtonLink>
+        </div>
+    )}
+</WidgetLayout>