fix slug and removed click to edit btn (#234)

Fixes #211

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} />

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

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,21 +61,14 @@
 	<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>
 
 		<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">