From af00a9b0de1ad81c84305094772a0553460bf374 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Wed, 28 Feb 2024 23:58:07 +0300
Subject: [PATCH 01/14] init routing

---
 src/App.svelte               | 62 +++++----------------------------
 src/components/Link.svelte   | 11 ++++++
 src/components/Router.svelte | 15 ++++++++
 src/pages/App.svelte         | 66 ++++++++++++++++++++++++++++++++++++
 src/pages/Docs.svelte        |  1 +
 5 files changed, 102 insertions(+), 53 deletions(-)
 create mode 100644 src/components/Link.svelte
 create mode 100644 src/components/Router.svelte
 create mode 100644 src/pages/App.svelte
 create mode 100644 src/pages/Docs.svelte

diff --git a/src/App.svelte b/src/App.svelte
index bb581fa..87e395b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,56 +1,12 @@
 <script lang="ts">
-  import  { type TManipulation, applyManipulations } from "./manipulations";
-  import ManipulationsPanel from "./ManipulationsPanel.svelte";
-  
-  import TextArea from "./components/TextArea.svelte";
-  import Heading from "./components/Heading.svelte";
-
-  let source = "Try me!\nResult will update automatically"
-  let result = ""
-  let manipulations: TManipulation[] = [{
-    type: "replace",
-    from: "\\n", to: " -- ", id: "initial"
-  }]
-
-  document.addEventListener("keydown", (event) => {
-    if (event.ctrlKey && event.key === "Enter") {
-      result = applyManipulations(source, manipulations)
-    }
-  })
-
-  $: result = applyManipulations(source, manipulations)
+  import Router, { type IRouter } from "./components/Router.svelte";
+  import App from "./pages/App.svelte";
+  import Docs from "./pages/Docs.svelte"
+
+  const routes: IRouter[] = [
+    { location: "/", component: App },
+    { location: "/docs", component: Docs }
+  ]
 </script>
 
-<div class="panels">
-  <div class="panel">
-    <Heading text="Source" />
-    <TextArea id="source" bind:value={source} />
-  </div>
-
-  <div class="panel">
-    <Heading text="Manipulations" />
-    <ManipulationsPanel bind:manipulations />
-  </div>
-
-  <div class="panel">
-    <Heading text="Result" />
-    <TextArea id="result" bind:value={result} />
-  </div>
-</div>
-
-
-<style>
-  .panels {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 10px;
-
-    padding: 10px;
-  }
-
-  .panel {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-</style>
\ No newline at end of file
+<Router {routes} defaultComponent={App}/>
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
new file mode 100644
index 0000000..5fc1897
--- /dev/null
+++ b/src/components/Link.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    export let link: string;
+</script>
+
+<a href="{link}"><slot/></a>
+
+<style>
+    a {
+        font-family: monospace;
+    }
+</style>
diff --git a/src/components/Router.svelte b/src/components/Router.svelte
new file mode 100644
index 0000000..5a0f208
--- /dev/null
+++ b/src/components/Router.svelte
@@ -0,0 +1,15 @@
+<script lang="ts" context="module">
+    import type { ComponentType } from "svelte";
+
+    export interface IRouter {
+        location: string
+        component: ComponentType
+    }
+</script>
+
+<script lang="ts">
+    export let routes: IRouter[];
+    export let defaultComponent: ComponentType;
+</script>
+
+<svelte:component this={(routes.find(route => route.location === location.pathname) || {component: defaultComponent}).component}/>
diff --git a/src/pages/App.svelte b/src/pages/App.svelte
new file mode 100644
index 0000000..41d0e39
--- /dev/null
+++ b/src/pages/App.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    import  { type TManipulation, applyManipulations } from "../manipulations";
+    import ManipulationsPanel from "../ManipulationsPanel.svelte";
+
+    import TextArea from "../components/TextArea.svelte";
+    import Heading from "../components/Heading.svelte";
+    import Link from "../components/Link.svelte";
+
+    let source = "Try me!\nResult will update automatically"
+    let result = ""
+    let manipulations: TManipulation[] = [{
+        type: "replace",
+        from: "\\n", to: " -- ", id: "initial"
+    }]
+
+    document.addEventListener("keydown", (event) => {
+        if (event.ctrlKey && event.key === "Enter") {
+        result = applyManipulations(source, manipulations)
+        }
+    })
+
+    $: result = applyManipulations(source, manipulations)
+</script>
+
+<div class="panels">
+<div class="panel">
+    <Heading text="Source" />
+    <TextArea id="source" bind:value={source} />
+</div>
+
+<div class="panel">
+    <div class="header-with-link">
+        <Heading text="Manipulations" /> <Link link="/docs">Docs</Link>
+    </div>
+    <ManipulationsPanel bind:manipulations />
+</div>
+
+<div class="panel">
+    <Heading text="Result" />
+    <TextArea id="result" bind:value={result} />
+</div>
+</div>
+
+
+<style>
+    .panels {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 10px;
+
+        padding: 10px;
+    }
+
+    .panel {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .header-with-link {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: end;
+    }
+</style>
diff --git a/src/pages/Docs.svelte b/src/pages/Docs.svelte
new file mode 100644
index 0000000..8e766f2
--- /dev/null
+++ b/src/pages/Docs.svelte
@@ -0,0 +1 @@
+<h1>Docs here!</h1>

From ad5730d80e809e782acf2c2374dd44104575bc9a Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 29 Feb 2024 11:57:18 +0300
Subject: [PATCH 02/14] better routing

---
 src/App.svelte               |  8 +++----
 src/components/Link.svelte   | 10 ++++++++-
 src/components/Router.svelte | 43 +++++++++++++++++++++++++++++++-----
 src/components/url-store.ts  | 38 +++++++++++++++++++++++++++++++
 src/pages/App.svelte         |  2 +-
 5 files changed, 90 insertions(+), 11 deletions(-)
 create mode 100644 src/components/url-store.ts

diff --git a/src/App.svelte b/src/App.svelte
index 87e395b..24a4dcc 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import Router, { type IRouter } from "./components/Router.svelte";
+  import Router, { type Route, routes } from "./components/Router.svelte";
   import App from "./pages/App.svelte";
   import Docs from "./pages/Docs.svelte"
 
-  const routes: IRouter[] = [
+  routes.set([
     { location: "/", component: App },
     { location: "/docs", component: Docs }
-  ]
+  ])
 </script>
 
-<Router {routes} defaultComponent={App}/>
+<Router />
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
index 5fc1897..2966ab2 100644
--- a/src/components/Link.svelte
+++ b/src/components/Link.svelte
@@ -1,8 +1,16 @@
 <script lang="ts">
+    import { navigate } from "./Router.svelte";
+
     export let link: string;
+    export let isNavigation = false
 </script>
 
-<a href="{link}"><slot/></a>
+{#if isNavigation}
+    <a href="{link}" on:click={navigate}><slot/></a>
+{:else}
+    <a href="{link}"><slot/></a>
+{/if}
+
 
 <style>
     a {
diff --git a/src/components/Router.svelte b/src/components/Router.svelte
index 5a0f208..63f1751 100644
--- a/src/components/Router.svelte
+++ b/src/components/Router.svelte
@@ -1,15 +1,48 @@
 <script lang="ts" context="module">
-    import type { ComponentType } from "svelte";
+    import { onMount, type ComponentType } from "svelte";
+    import { get, writable } from "svelte/store";
 
-    export interface IRouter {
+    import urlStore from "./url-store";
+
+    export interface Route {
         location: string
         component: ComponentType
     }
+
+    export const routes = writable<Route[]>();
+    export const currentRoute = writable<Route>();
+
+    function currentLocation(pathname: string) {
+      if (pathname === "/") return pathname;
+      if (pathname.endsWith("/")) return pathname.slice(0, pathname.length - 1);
+      return pathname;
+    };
+
+    function getRoute(href: string, routes: Route[]): Route {
+        const url = new URL(href);
+        const route = routes.find(route => route.location === currentLocation(url.pathname)) || routes[0]
+        return route
+    }
+
+    export function navigate(event: MouseEvent) {
+        event.preventDefault();
+        const target = event.target as HTMLAnchorElement
+        window.history.pushState('', '', target["href"]);
+        const route = getRoute(target["href"], get(routes));
+        currentRoute.set(route);
+    };
 </script>
 
 <script lang="ts">
-    export let routes: IRouter[];
-    export let defaultComponent: ComponentType;
+    onMount(() => {
+        console.log(routes)
+        currentRoute.set(getRoute($urlStore.href, $routes));
+    });
+
+    $: currentRoute.set(getRoute($urlStore.href, $routes))
 </script>
 
-<svelte:component this={(routes.find(route => route.location === location.pathname) || {component: defaultComponent}).component}/>
+{#if $currentRoute}
+    <svelte:component this={$currentRoute.component}/>
+{/if}
+
diff --git a/src/components/url-store.ts b/src/components/url-store.ts
new file mode 100644
index 0000000..57cd232
--- /dev/null
+++ b/src/components/url-store.ts
@@ -0,0 +1,38 @@
+// Source: github.com/bluwy/svelte-url/blob/master/src/url.js
+
+import { derived, writable } from 'svelte/store'
+
+export function createUrlStore(ssrUrl) {
+  // Ideally a bundler constant so that it's tree-shakable
+  if (typeof window === 'undefined') {
+    const { subscribe } = writable(ssrUrl)
+    return { subscribe }
+  }
+
+  const href = writable(window.location.href)
+
+  const originalPushState = history.pushState
+  const originalReplaceState = history.replaceState
+
+  const updateHref = () => href.set(window.location.href)
+
+  history.pushState = function () {
+    originalPushState.apply(this, arguments)
+    updateHref()
+  }
+
+  history.replaceState = function () {
+    originalReplaceState.apply(this, arguments)
+    updateHref()
+  }
+
+  window.addEventListener('popstate', updateHref)
+  window.addEventListener('hashchange', updateHref)
+
+  return {
+    subscribe: derived(href, ($href) => new URL($href)).subscribe
+  }
+}
+
+// If you're using in a pure SPA, you can return a store directly and share it everywhere
+export default createUrlStore()
diff --git a/src/pages/App.svelte b/src/pages/App.svelte
index 41d0e39..222d0d1 100644
--- a/src/pages/App.svelte
+++ b/src/pages/App.svelte
@@ -30,7 +30,7 @@
 
 <div class="panel">
     <div class="header-with-link">
-        <Heading text="Manipulations" /> <Link link="/docs">Docs</Link>
+        <Heading text="Manipulations" /> <Link link="/docs" isNavigation>Docs</Link>
     </div>
     <ManipulationsPanel bind:manipulations />
 </div>

From e3733e0f69ba557709f9829b8485e044cfd05992 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 29 Feb 2024 15:37:19 +0300
Subject: [PATCH 03/14] fixes

---
 src/components/url-store.ts | 49 ++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/components/url-store.ts b/src/components/url-store.ts
index 57cd232..a4a9a41 100644
--- a/src/components/url-store.ts
+++ b/src/components/url-store.ts
@@ -1,38 +1,31 @@
-// Source: github.com/bluwy/svelte-url/blob/master/src/url.js
+// Original source: github.com/bluwy/svelte-url/blob/master/src/url.js
 
-import { derived, writable } from 'svelte/store'
+import { derived, writable } from "svelte/store";
 
-export function createUrlStore(ssrUrl) {
-  // Ideally a bundler constant so that it's tree-shakable
-  if (typeof window === 'undefined') {
-    const { subscribe } = writable(ssrUrl)
-    return { subscribe }
-  }
+export function createUrlStore() {
+	const href = writable(window.location.href);
 
-  const href = writable(window.location.href)
+	const originalPushState = history.pushState;
+	const originalReplaceState = history.replaceState;
 
-  const originalPushState = history.pushState
-  const originalReplaceState = history.replaceState
+	const updateHref = () => href.set(window.location.href);
 
-  const updateHref = () => href.set(window.location.href)
+	history.pushState = (state, unused, url) => {
+		originalPushState(state, unused, url);
+		updateHref();
+	};
 
-  history.pushState = function () {
-    originalPushState.apply(this, arguments)
-    updateHref()
-  }
+	history.replaceState = (state, unused, url) => {
+		originalReplaceState(state, unused, url);
+		updateHref();
+	};
 
-  history.replaceState = function () {
-    originalReplaceState.apply(this, arguments)
-    updateHref()
-  }
+	window.addEventListener("popstate", updateHref);
+	window.addEventListener("hashchange", updateHref);
 
-  window.addEventListener('popstate', updateHref)
-  window.addEventListener('hashchange', updateHref)
-
-  return {
-    subscribe: derived(href, ($href) => new URL($href)).subscribe
-  }
+	return {
+		subscribe: derived(href, ($href) => new URL($href)).subscribe,
+	};
 }
 
-// If you're using in a pure SPA, you can return a store directly and share it everywhere
-export default createUrlStore()
+export default createUrlStore();

From 95448ada59470b7dd14dc201c9fa36f28fe71877 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 29 Feb 2024 16:02:08 +0300
Subject: [PATCH 04/14] more fixes

---
 src/components/url-store.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/url-store.ts b/src/components/url-store.ts
index a4a9a41..269a857 100644
--- a/src/components/url-store.ts
+++ b/src/components/url-store.ts
@@ -10,13 +10,13 @@ export function createUrlStore() {
 
 	const updateHref = () => href.set(window.location.href);
 
-	history.pushState = (state, unused, url) => {
-		originalPushState(state, unused, url);
-		updateHref();
-	};
+	history.pushState = function (data, unused, url) {
+    originalPushState.apply(this, [data, unused, url]);
+    updateHref()
+  }
 
-	history.replaceState = (state, unused, url) => {
-		originalReplaceState(state, unused, url);
+	history.replaceState = function (data, unused, url)  {
+		originalReplaceState.apply(this, [data, unused, url]);
 		updateHref();
 	};
 

From 7518234a3a2a18c50f663b48fda5ed9e92e8efda Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 29 Feb 2024 17:51:06 +0300
Subject: [PATCH 05/14] first doc

---
 src/App.svelte                                |  4 +-
 src/pages/{ => App}/App.svelte                | 10 ++---
 src/{ => pages/App}/ManipulationsPanel.svelte |  4 +-
 src/pages/App/index.ts                        |  3 ++
 src/pages/Docs.svelte                         |  1 -
 src/pages/Docs/Docs.svelte                    | 44 +++++++++++++++++++
 src/pages/Docs/ManipulationBlock.svelte       | 28 ++++++++++++
 src/pages/Docs/index.ts                       |  3 ++
 8 files changed, 87 insertions(+), 10 deletions(-)
 rename src/pages/{ => App}/App.svelte (84%)
 rename src/{ => pages/App}/ManipulationsPanel.svelte (67%)
 create mode 100644 src/pages/App/index.ts
 delete mode 100644 src/pages/Docs.svelte
 create mode 100644 src/pages/Docs/Docs.svelte
 create mode 100644 src/pages/Docs/ManipulationBlock.svelte
 create mode 100644 src/pages/Docs/index.ts

diff --git a/src/App.svelte b/src/App.svelte
index 24a4dcc..8e1244f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Router, { type Route, routes } from "./components/Router.svelte";
-  import App from "./pages/App.svelte";
-  import Docs from "./pages/Docs.svelte"
+  import App from "./pages/App";
+  import Docs from "./pages/Docs";
 
   routes.set([
     { location: "/", component: App },
diff --git a/src/pages/App.svelte b/src/pages/App/App.svelte
similarity index 84%
rename from src/pages/App.svelte
rename to src/pages/App/App.svelte
index 222d0d1..4ecf71e 100644
--- a/src/pages/App.svelte
+++ b/src/pages/App/App.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import  { type TManipulation, applyManipulations } from "../manipulations";
-    import ManipulationsPanel from "../ManipulationsPanel.svelte";
+    import  { type TManipulation, applyManipulations } from "../../manipulations";
+    import ManipulationsPanel from "./ManipulationsPanel.svelte";
 
-    import TextArea from "../components/TextArea.svelte";
-    import Heading from "../components/Heading.svelte";
-    import Link from "../components/Link.svelte";
+    import TextArea from "../../components/TextArea.svelte";
+    import Heading from "../../components/Heading.svelte";
+    import Link from "../../components/Link.svelte";
 
     let source = "Try me!\nResult will update automatically"
     let result = ""
diff --git a/src/ManipulationsPanel.svelte b/src/pages/App/ManipulationsPanel.svelte
similarity index 67%
rename from src/ManipulationsPanel.svelte
rename to src/pages/App/ManipulationsPanel.svelte
index fa8ce32..74e40d4 100644
--- a/src/ManipulationsPanel.svelte
+++ b/src/pages/App/ManipulationsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { TManipulation } from "./manipulations";
-  import { ManipulationsList } from "./manipulations";
+  import type { TManipulation } from "../../manipulations";
+  import { ManipulationsList } from "../../manipulations";
 
   export let manipulations: TManipulation[] = []
 </script>
diff --git a/src/pages/App/index.ts b/src/pages/App/index.ts
new file mode 100644
index 0000000..d9774c0
--- /dev/null
+++ b/src/pages/App/index.ts
@@ -0,0 +1,3 @@
+import App from "./App.svelte";
+
+export default App;
diff --git a/src/pages/Docs.svelte b/src/pages/Docs.svelte
deleted file mode 100644
index 8e766f2..0000000
--- a/src/pages/Docs.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Docs here!</h1>
diff --git a/src/pages/Docs/Docs.svelte b/src/pages/Docs/Docs.svelte
new file mode 100644
index 0000000..d316b7b
--- /dev/null
+++ b/src/pages/Docs/Docs.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import Link from "../../components/Link.svelte";
+    import ManipulationBlock from "./ManipulationBlock.svelte";
+</script>
+
+<div class="container">
+    <div class="docs-row">
+        <h1>Docs</h1>
+        <Link link="/" isNavigation>Go to app</Link>
+    </div>
+
+    <div class="docs-row"><h2>Replace</h2></div>
+    <div class="docs-row">
+        <p>Replaces all occurencies of a string in another string</p>
+    </div>
+
+    <div class="docs-row">
+        <ManipulationBlock source="kek" manipulation={{type: "replace", from: "k", to: "l"}}/>
+    </div>
+    
+</div>
+
+<style>
+    .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 10px;
+
+        padding-top: 10px;
+    }
+
+    .docs-row {
+        display: flex;
+        flex-direction: row;
+        margin: auto;
+        align-items: end;
+        gap: 10px;
+    }
+
+    h2 {
+        margin-top: 20px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/Docs/ManipulationBlock.svelte b/src/pages/Docs/ManipulationBlock.svelte
new file mode 100644
index 0000000..387ed73
--- /dev/null
+++ b/src/pages/Docs/ManipulationBlock.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    import TextArea from "../../components/TextArea.svelte";
+    import Manipulation from "../../manipulations/components/Manipulation.svelte";
+
+    import { type TManipulation, applyManipulations } from "../../manipulations";
+
+    export let manipulation: TManipulation
+    export let source: string
+
+    let result: string
+
+    $: result = applyManipulations(source, [manipulation])
+</script>
+
+
+<div>
+    <TextArea bind:value={source} />
+    <Manipulation bind:manipulation={manipulation} />
+    <TextArea bind:value={result} />
+</div>
+
+<style>
+    div {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/Docs/index.ts b/src/pages/Docs/index.ts
new file mode 100644
index 0000000..6bf72e4
--- /dev/null
+++ b/src/pages/Docs/index.ts
@@ -0,0 +1,3 @@
+import Docs from "./Docs.svelte";
+
+export default Docs;

From 52999675077cbf3ca10d02f2b244db9dc25de451 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Thu, 29 Feb 2024 17:51:37 +0300
Subject: [PATCH 06/14] lint

---
 src/components/url-store.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/url-store.ts b/src/components/url-store.ts
index 269a857..d6e8100 100644
--- a/src/components/url-store.ts
+++ b/src/components/url-store.ts
@@ -11,11 +11,11 @@ export function createUrlStore() {
 	const updateHref = () => href.set(window.location.href);
 
 	history.pushState = function (data, unused, url) {
-    originalPushState.apply(this, [data, unused, url]);
-    updateHref()
-  }
+		originalPushState.apply(this, [data, unused, url]);
+		updateHref();
+	};
 
-	history.replaceState = function (data, unused, url)  {
+	history.replaceState = function (data, unused, url) {
 		originalReplaceState.apply(this, [data, unused, url]);
 		updateHref();
 	};

From 8aa2f8d73636aa1537879c150e6629e818fd2056 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 1 Mar 2024 10:53:05 +0300
Subject: [PATCH 07/14] more docs

---
 src/pages/Docs/Docs.svelte | 46 ++++++++++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/pages/Docs/Docs.svelte b/src/pages/Docs/Docs.svelte
index d316b7b..7908174 100644
--- a/src/pages/Docs/Docs.svelte
+++ b/src/pages/Docs/Docs.svelte
@@ -1,6 +1,36 @@
 <script lang="ts">
+    import { type TManipulation } from "../../manipulations";
     import Link from "../../components/Link.svelte";
     import ManipulationBlock from "./ManipulationBlock.svelte";
+
+    interface ManipulationDoc {
+        name: string,
+        description: string,
+        source: string,
+        manipulation: TManipulation
+    }
+    
+    const manipulationsDocs: ManipulationDoc[] = [
+        {
+            name: "Replace",
+            description: "Replaces all occurencies of a string in another string",
+            source: "I am your possible source",
+            manipulation: {type: "replace", from: "source", to: "output"}
+        }, 
+        {
+            name: "Prepend",
+            description: "Add a string before given string",
+            source: "Source",
+            manipulation: {type: "prepend", prefix: "Best "}
+        }, 
+        {
+            name: "Append",
+            description: "Add a string after given string",
+            source: "Source",
+            manipulation: {type: "append", suffix: " -> output"}
+        }
+    ]
+
 </script>
 
 <div class="container">
@@ -9,14 +39,16 @@
         <Link link="/" isNavigation>Go to app</Link>
     </div>
 
-    <div class="docs-row"><h2>Replace</h2></div>
-    <div class="docs-row">
-        <p>Replaces all occurencies of a string in another string</p>
-    </div>
+    {#each manipulationsDocs as doc}
+        <div class="docs-row"><h2>{doc.name}</h2></div>
+        <div class="docs-row">
+            <p>{doc.description}</p>
+        </div>
 
-    <div class="docs-row">
-        <ManipulationBlock source="kek" manipulation={{type: "replace", from: "k", to: "l"}}/>
-    </div>
+        <div class="docs-row">
+            <ManipulationBlock source={doc.source} manipulation={doc.manipulation}/>
+        </div>
+    {/each}
     
 </div>
 

From 2690200a4f1534ccf10492aeffad49ac864a8095 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 1 Mar 2024 10:58:46 +0300
Subject: [PATCH 08/14] update router to use BASE_URL

---
 src/components/Router.svelte | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Router.svelte b/src/components/Router.svelte
index 63f1751..4a76c81 100644
--- a/src/components/Router.svelte
+++ b/src/components/Router.svelte
@@ -12,15 +12,21 @@
     export const routes = writable<Route[]>();
     export const currentRoute = writable<Route>();
 
+    function pathWithBase(path: string): string {
+        if (import.meta.env.BASE_URL === "/") return path
+        return import.meta.env.BASE_URL + path
+    }
+
     function currentLocation(pathname: string) {
-      if (pathname === "/") return pathname;
+      if (pathname === pathWithBase("/")) return pathname;
       if (pathname.endsWith("/")) return pathname.slice(0, pathname.length - 1);
+      
       return pathname;
     };
 
     function getRoute(href: string, routes: Route[]): Route {
         const url = new URL(href);
-        const route = routes.find(route => route.location === currentLocation(url.pathname)) || routes[0]
+        const route = routes.find(route => pathWithBase(route.location) === currentLocation(url.pathname)) || routes[0]
         return route
     }
 

From 86a7588edd98cc604178e84cb1277ec73403d4df Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 1 Mar 2024 11:37:58 +0300
Subject: [PATCH 09/14] docs seem complete

---
 src/pages/Docs/Docs.svelte | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/pages/Docs/Docs.svelte b/src/pages/Docs/Docs.svelte
index 7908174..37e4514 100644
--- a/src/pages/Docs/Docs.svelte
+++ b/src/pages/Docs/Docs.svelte
@@ -13,21 +13,51 @@
     const manipulationsDocs: ManipulationDoc[] = [
         {
             name: "Replace",
-            description: "Replaces all occurencies of a string in another string",
+            description: "Replaces all occurencies of a string in input",
             source: "I am your possible source",
             manipulation: {type: "replace", from: "source", to: "output"}
         }, 
         {
             name: "Prepend",
-            description: "Add a string before given string",
+            description: "Add a string before input",
             source: "Source",
             manipulation: {type: "prepend", prefix: "Best "}
         }, 
         {
             name: "Append",
-            description: "Add a string after given string",
+            description: "Add a string after input",
             source: "Source",
             manipulation: {type: "append", suffix: " -> output"}
+        },
+        {
+            name: "Split, get from index",
+            description: "Split input by string and get substring by index",
+            source: "Zero, one, two, three",
+            manipulation: {type: "splitGetFromIndex", splitString: ",", index: 1}
+        },
+        {
+            name: "Compose",
+            description: "Compose string using input string by pattern",
+            source: "Input",
+            manipulation: {type: "compose", placeholder: "{}", pattern: "{}: {}, {}"}
+        },
+        {
+            name: "Slice",
+            description: "Get a slice from input string",
+            source: "Some good input",
+            manipulation: {type: "slice", start: 5, end: 9}
+        },
+        {
+            name: "Split-compose",
+            description: "Split input by delimeter and compose string by pattern",
+            source: "Zero, one, two, three",
+            manipulation: {type: "splitCompose", splitString: ", ", placeholder: "{d}", pattern: "Reordered {1}, {0}, {2}!"}
+        },
+        {
+            name: "Split-join",
+            description: "Split input by delimeter, apply manipulations and join",
+            source: "Zero, one, two, three",
+            manipulation: {type: "splitJoin", splitString: ", ", joinString: "\\n", innerManipulations: [{type: "prepend", prefix: "Number: "}]}
         }
     ]
 
@@ -60,6 +90,7 @@
         gap: 10px;
 
         padding-top: 10px;
+        padding-bottom: 10px;
     }
 
     .docs-row {

From ac28f81017fa7a3f74c18c2517b3986f480428a7 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 1 Mar 2024 11:44:50 +0300
Subject: [PATCH 10/14] fix keys

---
 src/pages/Docs/Docs.svelte | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/Docs/Docs.svelte b/src/pages/Docs/Docs.svelte
index 37e4514..10eb8d2 100644
--- a/src/pages/Docs/Docs.svelte
+++ b/src/pages/Docs/Docs.svelte
@@ -15,49 +15,49 @@
             name: "Replace",
             description: "Replaces all occurencies of a string in input",
             source: "I am your possible source",
-            manipulation: {type: "replace", from: "source", to: "output"}
+            manipulation: {id: "Replace", type: "replace", from: "source", to: "output"}
         }, 
         {
             name: "Prepend",
             description: "Add a string before input",
             source: "Source",
-            manipulation: {type: "prepend", prefix: "Best "}
+            manipulation: {id: "Prepend", type: "prepend", prefix: "Best "}
         }, 
         {
             name: "Append",
             description: "Add a string after input",
             source: "Source",
-            manipulation: {type: "append", suffix: " -> output"}
+            manipulation: {id: "Append", type: "append", suffix: " -> output"}
         },
         {
             name: "Split, get from index",
             description: "Split input by string and get substring by index",
             source: "Zero, one, two, three",
-            manipulation: {type: "splitGetFromIndex", splitString: ",", index: 1}
+            manipulation: {id: "splitGetFromIndex", type: "splitGetFromIndex", splitString: ",", index: 1}
         },
         {
             name: "Compose",
             description: "Compose string using input string by pattern",
             source: "Input",
-            manipulation: {type: "compose", placeholder: "{}", pattern: "{}: {}, {}"}
+            manipulation: {id: "compose", type: "compose", placeholder: "{}", pattern: "{}: {}, {}"}
         },
         {
             name: "Slice",
             description: "Get a slice from input string",
             source: "Some good input",
-            manipulation: {type: "slice", start: 5, end: 9}
+            manipulation: {id: "slice", type: "slice", start: 5, end: 9}
         },
         {
             name: "Split-compose",
             description: "Split input by delimeter and compose string by pattern",
             source: "Zero, one, two, three",
-            manipulation: {type: "splitCompose", splitString: ", ", placeholder: "{d}", pattern: "Reordered {1}, {0}, {2}!"}
+            manipulation: {id: "splitCompose", type: "splitCompose", splitString: ", ", placeholder: "{d}", pattern: "Reordered {1}, {0}, {2}!"}
         },
         {
             name: "Split-join",
             description: "Split input by delimeter, apply manipulations and join",
             source: "Zero, one, two, three",
-            manipulation: {type: "splitJoin", splitString: ", ", joinString: "\\n", innerManipulations: [{type: "prepend", prefix: "Number: "}]}
+            manipulation: {id: "splitJoin", type: "splitJoin", splitString: ", ", joinString: "\\n", innerManipulations: [{id: "splitJoinprepend", type: "prepend", prefix: "Number: "}, {id: "splitJoinappend", type: "append", suffix: "!"}]}
         }
     ]
 
@@ -69,7 +69,7 @@
         <Link link="/" isNavigation>Go to app</Link>
     </div>
 
-    {#each manipulationsDocs as doc}
+    {#each manipulationsDocs as doc (doc.name)}
         <div class="docs-row"><h2>{doc.name}</h2></div>
         <div class="docs-row">
             <p>{doc.description}</p>

From 8697e48abfe254fd7b4d528e60628ea6d5804636 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 1 Mar 2024 13:11:12 +0300
Subject: [PATCH 11/14] better styles for manipulations

---
 src/manipulations/components/Append.svelte            |  8 ++++++++
 src/manipulations/components/Compose.svelte           |  8 ++++++++
 src/manipulations/components/Prepend.svelte           |  8 ++++++++
 src/manipulations/components/Replace.svelte           |  9 +++++++++
 src/manipulations/components/Slice.svelte             |  8 ++++++++
 src/manipulations/components/SplitCompose.svelte      | 10 +++++++++-
 src/manipulations/components/SplitGetFromIndex.svelte | 10 +++++++++-
 7 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/manipulations/components/Append.svelte b/src/manipulations/components/Append.svelte
index 3777c31..26fd0d1 100644
--- a/src/manipulations/components/Append.svelte
+++ b/src/manipulations/components/Append.svelte
@@ -14,3 +14,11 @@
 <div>
   <span>Suffix </span><input bind:value={suffix} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/manipulations/components/Compose.svelte b/src/manipulations/components/Compose.svelte
index b9c9db1..5386f42 100644
--- a/src/manipulations/components/Compose.svelte
+++ b/src/manipulations/components/Compose.svelte
@@ -15,3 +15,11 @@
 <div>
   <span>Replace placeholder</span> <input bind:value={placeholder}> <span>in pattern</span> <textarea bind:value={pattern} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/Prepend.svelte b/src/manipulations/components/Prepend.svelte
index 35d97fb..6ec9683 100644
--- a/src/manipulations/components/Prepend.svelte
+++ b/src/manipulations/components/Prepend.svelte
@@ -15,3 +15,11 @@
   <span>Prefix </span><input bind:value={prefix} />
 </div>
 
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
+
diff --git a/src/manipulations/components/Replace.svelte b/src/manipulations/components/Replace.svelte
index 561e192..f832838 100644
--- a/src/manipulations/components/Replace.svelte
+++ b/src/manipulations/components/Replace.svelte
@@ -15,3 +15,12 @@
 <div>
   <span>Replace from</span> <input bind:value={from} /> <span>to</span> <input bind:value={to} />
 </div>
+
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/Slice.svelte b/src/manipulations/components/Slice.svelte
index 90debd6..ddf13fc 100644
--- a/src/manipulations/components/Slice.svelte
+++ b/src/manipulations/components/Slice.svelte
@@ -15,3 +15,11 @@
 <div>
   <span>Slice from</span> <input bind:value={start} type="number"/> <span>to</span> <input bind:value={end} type="number" /> 
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/SplitCompose.svelte b/src/manipulations/components/SplitCompose.svelte
index cbd3f51..4733317 100644
--- a/src/manipulations/components/SplitCompose.svelte
+++ b/src/manipulations/components/SplitCompose.svelte
@@ -14,5 +14,13 @@
 </script>
 
 <div>
-  <span>Split by</span> <input bind:value={splitString}/> <span> and replace placeholder</span> <input bind:value={placeholder} /> <span>in pattern</span> <textarea bind:value={pattern} />
+  <span>Split by</span> <input bind:value={splitString}/> <span>and replace placeholder</span> <input bind:value={placeholder} /> <span>in pattern</span> <textarea bind:value={pattern} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>
diff --git a/src/manipulations/components/SplitGetFromIndex.svelte b/src/manipulations/components/SplitGetFromIndex.svelte
index a768ce4..ce06772 100644
--- a/src/manipulations/components/SplitGetFromIndex.svelte
+++ b/src/manipulations/components/SplitGetFromIndex.svelte
@@ -13,5 +13,13 @@
 </script>
 
 <div>
-  <span>Split by </span><input bind:value={splitString} /><span>, get from </span><input bind:value={index} />
+  <span>Split by </span><input bind:value={splitString} /><span>get from </span><input bind:value={index} />
 </div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>

From ef38b8f51ad4e3f11b618b405de234ab18da3557 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 1 Mar 2024 13:13:28 +0300
Subject: [PATCH 12/14] try new grid temlate

---
 src/pages/App/App.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/App/App.svelte b/src/pages/App/App.svelte
index 4ecf71e..7ddd90c 100644
--- a/src/pages/App/App.svelte
+++ b/src/pages/App/App.svelte
@@ -6,7 +6,7 @@
     import Heading from "../../components/Heading.svelte";
     import Link from "../../components/Link.svelte";
 
-    let source = "Try me!\nResult will update automatically"
+    let source = "Try me!\nResult will be updated automatically"
     let result = ""
     let manipulations: TManipulation[] = [{
         type: "replace",
@@ -45,7 +45,7 @@
 <style>
     .panels {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr auto 1fr;
         gap: 10px;
 
         padding: 10px;

From 73554c672a35cfc3c955a705c2b401a4a5b566ff Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Fri, 1 Mar 2024 13:18:09 +0300
Subject: [PATCH 13/14] clean

---
 src/components/Router.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Router.svelte b/src/components/Router.svelte
index 4a76c81..d4efe91 100644
--- a/src/components/Router.svelte
+++ b/src/components/Router.svelte
@@ -41,7 +41,6 @@
 
 <script lang="ts">
     onMount(() => {
-        console.log(routes)
         currentRoute.set(getRoute($urlStore.href, $routes));
     });
 

From bfc91bf5e1dcfdb497403d928743fec2bbb89f70 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Tue, 5 Mar 2024 14:50:01 +0300
Subject: [PATCH 14/14] add docs in readme

---
 README.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/README.md b/README.md
index 413b99e..fba43b5 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,15 @@
 # String manipulator
+
+Application that applies sequence of manipulations to string
+
+Interactive doc available at https://mishankov.github.io/string-manipulator/docs
+
+Available manipulations:
+- Replace
+- Prepend
+- Append
+- Split, get from index
+- Compose
+- Slice
+- Split-compose
+- Split-join