#48 : Add customized h1, h2

src/docs/Layouts/custom/H.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { onMount } from 'svelte'
+  import { parseTitleStr } from '../../utils/string'
+
+  export let titleComponent
+  let titleEl
+  let anchorId
+  let title
+
+  onMount(() => {
+    const parsed = parseTitleStr(titleEl.textContent)
+    title = parsed.title
+    anchorId = parsed.props.anchorId
+  })
+</script>
+
+<svelte:component this={titleComponent} id={anchorId} class="title">
+  <a class="anchor" href={`#${anchorId}`}>
+    {title}
+    {#if !title}
+      <span bind:this={titleEl}><slot /></span>
+    {/if}
+  </a>
+</svelte:component>
+
+<style>
+  :global(.title):hover .anchor::before {
+    visibility: visible;
+  }
+  .anchor {
+    position: relative;
+    margin-left: 10px;
+    text-decoration: none;
+    color: #000000;
+  }
+  .anchor::before {
+    visibility: hidden;
+    font-size: 14px;
+    content: "\1F517";
+    position: absolute;
+    left: -20px;
+  }
+</style>

src/docs/Layouts/custom/H1.svelte

@@ -0,0 +1,8 @@
+<script>
+  import H from './H.svelte'
+  import H1 from './dom/H1.svelte'
+</script>
+
+<H titleComponent={H1}>
+  <slot />
+</H>

src/docs/Layouts/custom/H2.svelte

@@ -0,0 +1,8 @@
+<script>
+  import H from './H.svelte'
+  import H2 from './dom/H2.svelte'
+</script>
+
+<H titleComponent={H2}>
+  <slot />
+</H>

src/docs/Layouts/custom/dom/H1.svelte

@@ -0,0 +1,9 @@
+<h1 {...$$props}>
+  <slot />
+</h1>
+
+<style>
+  :global(h1 .anchor::before) {
+    top: 15px;
+  }
+</style>

src/docs/Layouts/custom/dom/H2.svelte

@@ -0,0 +1,9 @@
+<h2 {...$$props}>
+  <slot />
+</h2>
+
+<style>
+  :global(h2 .anchor::before) {
+    top: 8px;
+  }
+</style>