From ca3a9f79e0029a58f3ade41d77bbf3f9fab1ba6a Mon Sep 17 00:00:00 2001
From: Harsh Mangalam <57381638+harshmangalam@users.noreply.github.com>
Date: Sat, 9 Nov 2024 05:50:45 +0530
Subject: [PATCH] fix slug and removed click to edit btn (#234)

Fixes #211
---
 .../editors/CompositeMarkdownEditor.svelte          |  6 ------
 src/routes/(app)/[username]/[slug]/+page.svelte     |  9 +--------
 src/routes/(app)/[username]/new/+page.svelte        | 13 +++++--------
 3 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/editors/CompositeMarkdownEditor.svelte b/src/lib/components/editors/CompositeMarkdownEditor.svelte
index 227d03a9..8e5106c9 100644
--- a/src/lib/components/editors/CompositeMarkdownEditor.svelte
+++ b/src/lib/components/editors/CompositeMarkdownEditor.svelte
@@ -56,12 +56,6 @@
 		<button class="variant-filled badge" onclick={() => (markdownMode = !markdownMode)}
 			>{markdownMode ? 'Switch to Rich Text' : 'Switch to Markdown'}</button
 		>
-
-		{#if !markdownMode}
-			<button class="variant-filled badge" onclick={() => richEditorEl.focus()}
-				>Click to Edit!</button
-			>
-		{/if}
 	</div>
 	{#if !markdownMode}
 		<RichMarkdownEditor bind:this={richEditorEl} bind:content={contentProxy.value} />
diff --git a/src/routes/(app)/[username]/[slug]/+page.svelte b/src/routes/(app)/[username]/[slug]/+page.svelte
index 77bb3703..d4e0f8eb 100644
--- a/src/routes/(app)/[username]/[slug]/+page.svelte
+++ b/src/routes/(app)/[username]/[slug]/+page.svelte
@@ -79,10 +79,6 @@
 			{#if !editingState.editing}
 				{data.page.display_name}
 			{:else}
-				<button
-					class="variant-filled badge absolute right-[-4em] top-[-2em] z-10"
-					onclick={() => displayNameEditorEl.focus()}>Click to Edit!</button
-				>
 				<InlineTextEditor
 					bind:this={displayNameEditorEl}
 					bind:content={editingState.page.display_name as string}
@@ -109,14 +105,11 @@
 				<span class="basis-40">Page Slug</span>
 				<div class="flex flex-grow flex-col">
 					<input
-						class="input basis-auto"
+						class="input border-none bg-transparent"
 						placeholder="slug"
 						disabled={!data.profileMatchesUserSession}
 						bind:value={editingState.page.slug}
 					/>
-					<div class="ml-2 mt-1 text-sm">
-						<pre class="inline">&nbsp;{slugifiedSlug}</pre>
-					</div>
 				</div>
 			</label>
 			<div class="flex justify-end text-sm">
diff --git a/src/routes/(app)/[username]/new/+page.svelte b/src/routes/(app)/[username]/new/+page.svelte
index 49214d54..02cb80a3 100644
--- a/src/routes/(app)/[username]/new/+page.svelte
+++ b/src/routes/(app)/[username]/new/+page.svelte
@@ -47,6 +47,10 @@
 	function handleSubmit(e: SubmitEvent) {
 		page.slug = slugifiedSlug;
 	}
+
+	$effect(() => {
+		page.slug = slugify(page.display_name || 'untitled', { strict: true, lower: true });
+	});
 </script>
 
 <svelte:head>
@@ -57,10 +61,6 @@
 	<div class="card m-4 mt-8 flex w-full max-w-[700px] flex-col gap-4 p-8 text-xl">
 		<h1 class="relative my-3 text-center text-4xl">
 			<div>
-				<button
-					class="variant-filled badge absolute right-[-4em] top-[-1em] z-10"
-					onclick={() => displayNameEditorEl.focus()}>Click to Edit!</button
-				>
 				<InlineTextEditor bind:this={displayNameEditorEl} bind:content={page.display_name} />
 			</div>
 		</h1>
@@ -68,10 +68,7 @@
 		<label class="flex flex-row items-center gap-2">
 			<span class="basis-40">Page Slug</span>
 			<div class="flex flex-grow flex-col">
-				<input class="input" placeholder="slug" bind:value={page.slug} />
-				<div class="ml-2 mt-1 text-sm">
-					<pre class="inline">&nbsp;{slugifiedSlug}</pre>
-				</div>
+				<input class="border-none bg-transparent" placeholder="slug" bind:value={page.slug} />
 			</div>
 		</label>
 		<div class="flex justify-end text-sm">