#48 : Add customized h1, h2

src/docs/Layouts/Main.svelte

@@ -3,11 +3,15 @@
   import Th from './custom/Th.svelte';
   import Tr from './custom/Tr.svelte';
   import Td from './custom/Td.svelte';
+  import H1 from './custom/H1.svelte';
+  import H2 from './custom/H2.svelte';
   export {
     Table as table,
     Th as th,
     Tr as tr,
-    Td as td
+    Td as td,
+    H1 as h1,
+    H2 as h2,
   };
 </script>
 

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>

src/docs/utils/string.js

@@ -0,0 +1,19 @@
+export const parseProps = (propsStr) => {
+  const props = propsStr?.split(';').filter(Boolean) || []
+  return props.reduce((acc, cur) => {
+    const prop = cur.split(':')
+    return {
+      ...acc,
+      [prop[0]]: prop[1]
+    }
+  }, {})
+}
+
+export const parseTitleStr = (titleStr) => {
+  const parts = titleStr.split('!')
+
+  return {
+    title: parts[0],
+    props: parseProps(parts[1])
+  }
+}