Make latest posts show first, fix special chars in URL and add new article

app.js

@@ -53,9 +53,12 @@ function loadMarkdownWithLead(file) {
     return { contentHtml, lead };
 }
 
-// Function to convert a title (with spaces) into a URL-friendly slug (with dashes)
+// Function to convert a title (with spaces and special characters) into a URL-friendly slug (with dashes)
 function titleToSlug(title) {
-    return title.replace(/\s+/g, '-').toLowerCase(); // Always lowercase the slug
+    return title
+        .toLowerCase()            // Convert to lowercase
+        .replace(/[^a-z0-9\s-]/g, '') // Remove all non-alphanumeric characters except spaces and dashes
+        .replace(/\s+/g, '-');    // Replace spaces with dashes
 }
 
 // Function to convert a slug (with dashes) back into a readable title (with spaces)
@@ -208,7 +211,6 @@ app.get('/blog/:slug', (req, res) => {
     }
 });
 
-
 // Sitemap Route
 app.get('/sitemap.xml', (req, res) => {
     const hostname = req.headers.host || 'http://localhost'; // Ensure this is your site URL in production

views/index.ejs

@@ -42,7 +42,7 @@
         <div class="container">
             <h2>Recent Posts</h2>
             <ul class="list-group list-group-flush">
-                <% blogPosts.forEach(post => { %>
+                <% blogPosts.sort((a, b) => new Date(b.date) - new Date(a.date)).forEach(post => { %>
                     <li class="list-group-item d-flex justify-content-between align-items-center py-4">
                         <div>
                             <h5 class="mb-1"><a href="/blog/<%= post.slug %>"> <%= post.title %> </a></h5>