#48 : Update custom h elements

src/docs/Layouts/Main.svelte

@@ -3,8 +3,7 @@
   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 { H1, H2 } from './custom/H';
-  import H2 from './custom/H2.svelte';
   export {
     Table as table,
     Th as th,

src/docs/Layouts/custom/H/H.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte'
-  import { parseTitleStr } from '../../utils/string'
+  import { parseTitleStr } from '../../../utils/string'
 
   export let titleComponent
   let titleEl
@@ -14,17 +14,22 @@
   })
 </script>
 
-<svelte:component this={titleComponent} id={anchorId} class="title">
+<div>
-  <a class="anchor" href={`#${anchorId}`}>
+  <svelte:component this={titleComponent} id={anchorId} class="title">
-    {title}
+    <a class="anchor" href={`#${anchorId}`}>
-    {#if !title}
+      {title}
-      <span bind:this={titleEl}><slot /></span>
+      {#if !title}
-    {/if}
+        <span bind:this={titleEl}><slot /></span>
-  </a>
+      {/if}
-</svelte:component>
+    </a>
+  </svelte:component>
+</div>
 
 <style>
-  :global(.title):hover .anchor::before {
+  :global(.title) {
+    display: inline-block;
+  }
+  :global(.title:hover .anchor::before) {
     visibility: visible;
   }
   .anchor {

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

@@ -0,0 +1,14 @@
+<script>
+  import H from '../H.svelte'
+  import H1 from './H1Dom.svelte'
+</script>
+
+<H titleComponent={H1}>
+  <slot />
+</H>
+
+<style>
+  :global(h1.title .anchor::before) {
+    top: 15px;
+  }
+</style>

src/docs/Layouts/custom/H/H1/H1Dom.svelte

@@ -0,0 +1,3 @@
+<h1 {...$$props}>
+  <slot />
+</h1>

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

@@ -0,0 +1,14 @@
+<script>
+  import H from '../H.svelte'
+  import H2 from './H2Dom.svelte'
+</script>
+
+<H titleComponent={H2}>
+  <slot />
+</H>
+
+<style>
+  :global(h2.title .anchor::before) {
+    top: 8px;
+  }
+</style>

src/docs/Layouts/custom/H/H2/H2Dom.svelte

@@ -0,0 +1,3 @@
+<h2 {...$$props}>
+  <slot />
+</h2>

src/docs/Layouts/custom/H/index.js

@@ -0,0 +1,7 @@
+import H1 from './H1/H1.svelte'
+import H2 from './H2/H2.svelte'
+
+export {
+  H1,
+  H2
+}

src/docs/Layouts/custom/H1.svelte

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

src/docs/Layouts/custom/H2.svelte

@@ -1,8 +0,0 @@
-<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

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

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

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