fix: remove dash for URLs with apostrophe slugs

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v0.12.1 (2022-09-17)
+
+- Slug URL fields no longer replace apostrophes with dashes but instead just remove them for better slugs with apostrophes
+
 ## v0.12.0 (2022-07-19)
 
 - Dynamically generate an articles reading time instead of expecing authors to come up with this and store it in the database. (This will require a database migration to remove the `reading_time` column from the `posts` table)

src/resources/js/app.js

@@ -20,3 +20,6 @@ window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
 window.hljs = require("highlight.js");
 window.slugify = require("@sindresorhus/slugify");
 window.pineapple = require("pineapple-library/pineapple/dist/js/pineapple");
+
+// Custom app Javascript
+window.app = require("./glass");

src/resources/js/glass.js

@@ -0,0 +1,9 @@
+// Custom app Javascript
+
+// slugifyField slugs the title field to create a url slug
+// `slugify` imported via "@sindresorhus/slugify"
+export function slugifyField(textfield, slugField) {
+    let textFieldValue = document.getElementById(textfield).value;
+    let slug = slugify(textFieldValue, { customReplacements: [["'", ""]] });
+    document.getElementById(slugField).value = slug;
+}

src/resources/views/create-post.blade.php

@@ -8,7 +8,7 @@
 
             <label for="title">Title</label>
             <input type="text" class="form-control" name="title" id="title" value="{{ old('title') }}"
-                oninput="slugifyField('title', 'slug')">
+                oninput="app.slugifyField('title', 'slug')">
 
             <label for="slug">Slug (URL) - Must be a single string (eg: "my-new-post" OR "mynewpost")</label>
             <input type='text' class='form-control' name='slug' id="slug" value="{{ old('slug') }}">
@@ -43,16 +43,5 @@
             </p>
 
             <input type="submit" class="btn btn-primary" value="Create Post">
-
     </div>
-
-    <script>
-        // slugifyField slugs the title field to create a url slug
-        // slugify imported in "resources/js/app.js"
-        function slugifyField(textfield, slugField) {
-            let textFieldValue = document.getElementById(textfield).value
-            let slug = slugify(textFieldValue)
-            document.getElementById(slugField).value = slug
-        }
-    </script>
 @endsection

src/resources/views/edit-post.blade.php

@@ -12,12 +12,11 @@ class="fas fa-chevron-left"></i> Back to Post</a>
             <input name="id" value="{{ $post->id }}" hidden>
 
             <label for="title">Title</label>
-            <input type="text" class="form-control" name="title" id="title"
-                value="{{ old('title', $post->title) }}" oninput="slugifyField('title', 'slug')">
+            <input type="text" class="form-control" name="title" id="title" value="{{ old('title', $post->title) }}"
+                oninput="app.slugifyField('title', 'slug')">
 
             <label for="slug">Slug (URL) - Must be a single string (eg: "my-new-post" OR "mynewpost")</label>
-            <input type='text' class='form-control' name='slug' id="slug"
-                value="{{ old('slug', $post->slug) }}">
+            <input type='text' class='form-control' name='slug' id="slug" value="{{ old('slug', $post->slug) }}">
 
             <label for="published">Post Status</label>
             <select class="form-select" name="published">
@@ -58,14 +57,4 @@ class="fas fa-chevron-left"></i> Back to Post</a>
             <br />
             <input type="submit" class="btn btn-primary" value="Update Post">
     </div>
-
-    <script>
-        // slugifyField slugs the title field to create a url slug
-        // slugify imported in "resources/js/app.js"
-        function slugifyField(textfield, slugField) {
-            let textFieldValue = document.getElementById(textfield).value
-            let slug = slugify(textFieldValue)
-            document.getElementById(slugField).value = slug
-        }
-    </script>
 @endsection