From aa0b1cb59cb6ce48c6d1cbc6b965fff813981116 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 14 Aug 2021 00:35:06 +0300
Subject: [PATCH] #48 : Add customized h1, h2

---
 src/docs/Layouts/Main.svelte          |  6 +++-
 src/docs/Layouts/custom/H.svelte      | 43 +++++++++++++++++++++++++++
 src/docs/Layouts/custom/H1.svelte     |  8 +++++
 src/docs/Layouts/custom/H2.svelte     |  8 +++++
 src/docs/Layouts/custom/dom/H1.svelte |  9 ++++++
 src/docs/Layouts/custom/dom/H2.svelte |  9 ++++++
 src/docs/utils/string.js              | 19 ++++++++++++
 7 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 src/docs/Layouts/custom/H.svelte
 create mode 100644 src/docs/Layouts/custom/H1.svelte
 create mode 100644 src/docs/Layouts/custom/H2.svelte
 create mode 100644 src/docs/Layouts/custom/dom/H1.svelte
 create mode 100644 src/docs/Layouts/custom/dom/H2.svelte
 create mode 100644 src/docs/utils/string.js

diff --git a/src/docs/Layouts/Main.svelte b/src/docs/Layouts/Main.svelte
index 555f3d4..926628e 100644
--- a/src/docs/Layouts/Main.svelte
+++ b/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>
 
diff --git a/src/docs/Layouts/custom/H.svelte b/src/docs/Layouts/custom/H.svelte
new file mode 100644
index 0000000..46d6274
--- /dev/null
+++ b/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>
diff --git a/src/docs/Layouts/custom/H1.svelte b/src/docs/Layouts/custom/H1.svelte
new file mode 100644
index 0000000..329c9fb
--- /dev/null
+++ b/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>
diff --git a/src/docs/Layouts/custom/H2.svelte b/src/docs/Layouts/custom/H2.svelte
new file mode 100644
index 0000000..ee3940e
--- /dev/null
+++ b/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>
diff --git a/src/docs/Layouts/custom/dom/H1.svelte b/src/docs/Layouts/custom/dom/H1.svelte
new file mode 100644
index 0000000..b444148
--- /dev/null
+++ b/src/docs/Layouts/custom/dom/H1.svelte
@@ -0,0 +1,9 @@
+<h1 {...$$props}>
+  <slot />
+</h1>
+
+<style>
+  :global(h1 .anchor::before) {
+    top: 15px;
+  }
+</style>
diff --git a/src/docs/Layouts/custom/dom/H2.svelte b/src/docs/Layouts/custom/dom/H2.svelte
new file mode 100644
index 0000000..6b10d49
--- /dev/null
+++ b/src/docs/Layouts/custom/dom/H2.svelte
@@ -0,0 +1,9 @@
+<h2 {...$$props}>
+  <slot />
+</h2>
+
+<style>
+  :global(h2 .anchor::before) {
+    top: 8px;
+  }
+</style>
diff --git a/src/docs/utils/string.js b/src/docs/utils/string.js
new file mode 100644
index 0000000..17aab07
--- /dev/null
+++ b/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])
+  }
+}