feat: add multiple new tools including Base64 encoder, JSON formatter, and UUID generator; update BASE_URL handling in layouts

Author: FehmiCitiloglu

src/layouts/BaseLayout.astro

@@ -11,7 +11,8 @@ export interface Props {
 
 const { title, description, jsonLd } = Astro.props;
 
-const base = import.meta.env.BASE_URL;
+const rawBase = import.meta.env.BASE_URL;
+const base = rawBase.endsWith('/') ? rawBase : `${rawBase}/`;
 
 // AdSense slot ID for the site-wide footer placement.
 // Set PUBLIC_ADSENSE_CLIENT (and replace this slot) to enable. Hidden otherwise.
@@ -30,7 +31,7 @@ const FOOTER_AD_SLOT = import.meta.env.PUBLIC_ADSENSE_FOOTER_SLOT ?? '';
             DevTools
           </a>
           <div class="flex gap-6">
-            <a href={`${base}tools`} class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
+            <a href={base} class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
               Tools
             </a>
             <a href={`${base}blog`} class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">

src/layouts/ToolLayout.astro

@@ -13,7 +13,8 @@ export interface Props {
 
 const { title, description, category, tags = [], relatedTools = [], jsonLd } = Astro.props;
 
-const base = import.meta.env.BASE_URL;
+const rawBase = import.meta.env.BASE_URL;
+const base = rawBase.endsWith('/') ? rawBase : `${rawBase}/`;
 
 const adInArticleSlot = import.meta.env.PUBLIC_ADSENSE_SLOT_TOOL_INARTICLE;
 const adFooterSlot = import.meta.env.PUBLIC_ADSENSE_SLOT_TOOL_FOOTER;
@@ -61,7 +62,7 @@ const adFooterSlot = import.meta.env.PUBLIC_ADSENSE_SLOT_TOOL_FOOTER;
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {relatedTools.map((tool) => (
             <a
-              href={`${base}tools/${tool}`}
+              href={`${base}${tool}`}
               class="block p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 transition-colors"
             >
               <span class="text-blue-600 dark:text-blue-400 font-medium">{tool}</span>

…pages/tools/base64-encoder-decoder.astro src/pages/base64-encoder-decoder.astrosrc/pages/tools/base64-encoder-decoder.astro renamed to src/pages/base64-encoder-decoder.astro src/pages/tools/base64-encoder-decoder.astro renamed to src/pages/base64-encoder-decoder.astro

@@ -4,9 +4,14 @@ import BaseLayout from '@layouts/BaseLayout.astro';
 import { generateWebsiteJsonLd } from '@lib/json-ld';
 
 const tools = await getCollection('tools');
+const sortedTools = tools.sort((a, b) => b.data.publishedAt.getTime() - a.data.publishedAt.getTime());
 const featuredTools = tools.filter(t => t.data.featured).slice(0, 6);
 
-const base = import.meta.env.BASE_URL;
+// Normalize Astro's BASE_URL (which may or may not include a trailing slash)
+// so concatenating `${base}/<slug>` always produces a valid path.
+const rawBase = import.meta.env.BASE_URL;
+const base = rawBase.endsWith('/') ? rawBase : `${rawBase}/`;
+const toolHref = (slug: string) => `${base}${slug}`;
 const siteUrl = Astro.site?.toString().replace(/\/$/, '') || 'https://devtools.example.com';
 
 const jsonLd = generateWebsiteJsonLd({
@@ -32,7 +37,7 @@ const jsonLd = generateWebsiteJsonLd({
       </p>
       <div class="flex flex-wrap gap-4 justify-center">
         <a
-          href={`${base}tools`}
+          href="#all-tools"
           class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors"
         >
           Browse All Tools
@@ -78,7 +83,7 @@ const jsonLd = generateWebsiteJsonLd({
           Featured Tools
         </h2>
         <a
-          href={`${base}tools`}
+          href="#all-tools"
           class="text-blue-600 dark:text-blue-400 hover:underline font-medium"
         >
           View All →
@@ -88,7 +93,7 @@ const jsonLd = generateWebsiteJsonLd({
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {featuredTools.map((tool) => (
           <a
-            href={`${base}tools/${tool.id}`}
+            href={toolHref(tool.id)}
             class="group block p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-lg transition-all"
           >
             <div class="flex items-start gap-4">
@@ -112,18 +117,29 @@ const jsonLd = generateWebsiteJsonLd({
       </div>
     </section>
 
-    <!-- Categories -->
-    <section class="space-y-6">
-      <h2 class="text-3xl font-bold text-gray-900 dark:text-white">
-        Tool Categories
-      </h2>
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-        {['Encoding', 'Formatting', 'Conversion', 'Generation', 'Security'].map((category) => (
+    <!-- All Tools -->
+    <section id="all-tools" class="space-y-6">
+      <h2 class="text-3xl font-bold text-gray-900 dark:text-white">All Tools</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {sortedTools.map((tool) => (
           <a
-            href={`${base}tools?category=${category.toLowerCase()}`}
-            class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 transition-colors text-center"
+            href={toolHref(tool.id)}
+            class="group block p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-lg transition-all"
           >
-            <span class="font-medium text-gray-900 dark:text-white">{category}</span>
+            <div class="flex items-start gap-4">
+              {tool.data.icon && <span class="text-3xl">{tool.data.icon}</span>}
+              <div class="flex-1 min-w-0">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                  {tool.data.title}
+                </h3>
+                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+                  {tool.data.description}
+                </p>
+                <span class="mt-3 inline-block px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded capitalize">
+                  {tool.data.category}
+                </span>
+              </div>
+            </div>
           </a>
         ))}
       </div>