Docs

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

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 Route, routes } from "./components/Router.svelte";
+  import App from "./pages/App";
+  import Docs from "./pages/Docs";
+
+  routes.set([
+    { 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>
+<Router />

src/components/Link.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { navigate } from "./Router.svelte";
+
+    export let link: string;
+    export let isNavigation = false
+</script>
+
+{#if isNavigation}
+    <a href="{link}" on:click={navigate}><slot/></a>
+{:else}
+    <a href="{link}"><slot/></a>
+{/if}
+
+
+<style>
+    a {
+        font-family: monospace;
+    }
+</style>

src/components/Router.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" context="module">
+    import { onMount, type ComponentType } from "svelte";
+    import { get, writable } from "svelte/store";
+
+    import urlStore from "./url-store";
+
+    export interface Route {
+        location: string
+        component: ComponentType
+    }
+
+    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 === 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 => pathWithBase(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">
+    onMount(() => {
+        currentRoute.set(getRoute($urlStore.href, $routes));
+    });
+
+    $: currentRoute.set(getRoute($urlStore.href, $routes))
+</script>
+
+{#if $currentRoute}
+    <svelte:component this={$currentRoute.component}/>
+{/if}
+

src/components/url-store.ts

@@ -0,0 +1,31 @@
+// Original source: github.com/bluwy/svelte-url/blob/master/src/url.js
+
+import { derived, writable } from "svelte/store";
+
+export function createUrlStore() {
+	const href = writable(window.location.href);
+
+	const originalPushState = history.pushState;
+	const originalReplaceState = history.replaceState;
+
+	const updateHref = () => href.set(window.location.href);
+
+	history.pushState = function (data, unused, url) {
+		originalPushState.apply(this, [data, unused, url]);
+		updateHref();
+	};
+
+	history.replaceState = function (data, unused, url) {
+		originalReplaceState.apply(this, [data, unused, url]);
+		updateHref();
+	};
+
+	window.addEventListener("popstate", updateHref);
+	window.addEventListener("hashchange", updateHref);
+
+	return {
+		subscribe: derived(href, ($href) => new URL($href)).subscribe,
+	};
+}
+
+export default createUrlStore();

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>

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>

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>
+

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>

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>

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>

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>

src/pages/App/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 be updated 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" isNavigation>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 auto 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>

src/ManipulationsPanel.svelte → 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>

src/pages/App/index.ts

@@ -0,0 +1,3 @@
+import App from "./App.svelte";
+
+export default App;