feat(showcase): add showcase categories and layouts

- Introduced new markdown files for "Plugins" and "Validation" categories.
- Updated `hugo.toml` to include showcase category permalinks.
- Created layouts for showcasing items, including list and single item views.
- Implemented navigation for categories within the showcase section.

content/showcase_categories/plugins/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Plugins"
+description: "Discover plugins that extend Aurelia's functionality"
+--- 

content/showcase_categories/validation/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Validation"
+description: "Validation tools and plugins for Aurelia"
+--- 

hugo.toml

@@ -7,6 +7,10 @@ theme = "aurelia-theme"
   authors = "authors"
   tags = "tags"
   categories = "categories"
+  showcase_categories = "showcase_categories"
+
+[permalinks]
+  showcase_categories = "/showcase/category/:slug"
 
 [params]
   pathPrefix = ""

themes/aurelia-theme/layouts/showcase/list.html

@@ -0,0 +1,110 @@
+{{ define "main" }}
+<!-- Showcase Header Section -->
+<section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
+  <!-- Decorative Background -->
+  <div class="absolute inset-0 overflow-hidden">
+    <div class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl"></div>
+    <div class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl"></div>
+  </div>
+
+  <!-- Header Content -->
+  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+      Showcase
+    </h1>
+    <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+      Discover plugins, components and tools built for Aurelia
+    </p>
+  </div>
+</section>
+
+<!-- Categories Navigation -->
+<div class="border-b border-gray-200 bg-white sticky top-16 z-20">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <nav class="flex space-x-8 overflow-x-auto py-4" aria-label="Categories">
+      <a href="/showcase" class="{{ if eq .RelPermalink "/showcase/" }}text-aurelia border-aurelia{{ else }}text-gray-500 hover:text-aurelia border-transparent{{ end }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
+        All
+      </a>
+      {{ range $name, $taxonomy := .Site.Taxonomies.showcase_categories }}
+      <a href="{{ "/showcase/category/" | relLangURL }}{{ $name | urlize }}" 
+         class="text-gray-500 hover:text-aurelia border-transparent whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
+        {{ humanize $name }}
+      </a>
+      {{ end }}
+    </nav>
+  </div>
+</div>
+
+<!-- Showcase Grid -->
+<section class="py-12 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    {{ $paginator := .Paginate (where .Site.RegularPages "Type" "showcase") }}
+    {{ if $paginator.Pages }}
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {{ range $paginator.Pages }}
+          <article class="relative p-6 rounded-2xl bg-gradient-to-b from-gray-50 to-white border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
+            <a href="{{ .RelPermalink }}" class="block">
+              <!-- Card Decoration -->
+              <div class="absolute inset-0 overflow-hidden rounded-2xl">
+                <div class="absolute top-0 right-0 w-[200px] h-[200px] bg-gradient-to-br from-aurelia/5 to-aurelia-light/5 rounded-full blur-2xl transform -translate-y-1/2 translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              </div>
+
+              <div class="relative">
+                {{ with .Params.showcase_categories }}
+                <div class="flex flex-wrap gap-2 mb-4">
+                  {{ range . }}
+                  <span class="inline-block px-3 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium">
+                    {{ . }}
+                  </span>
+                  {{ end }}
+                </div>
+                {{ end }}
+
+                <h2 class="text-2xl font-bold text-gray-900 group-hover:text-aurelia transition-colors">
+                  {{ .Title }}
+                </h2>
+
+                {{ with .Description }}
+                <p class="mt-2 text-gray-600">{{ . }}</p>
+                {{ end }}
+              </div>
+            </a>
+          </article>
+        {{ end }}
+      </div>
+
+      <!-- Pagination -->
+      {{ if gt $paginator.TotalPages 1 }}
+      <div class="mt-12 flex justify-center">
+        <nav class="inline-flex rounded-md shadow-sm isolate" aria-label="Pagination">
+          {{ if $paginator.HasPrev }}
+          <a href="{{ $paginator.Prev.URL }}" class="relative inline-flex items-center rounded-l-md px-3 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
+            <i class="fas fa-chevron-left"></i>
+          </a>
+          {{ end }}
+
+          {{ range $paginator.Pagers }}
+          <a href="{{ .URL }}" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold {{ if eq . $paginator }}text-white bg-aurelia hover:bg-aurelia-light{{ else }}text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50{{ end }} focus:z-20 focus:outline-offset-0">
+            {{ .PageNumber }}
+          </a>
+          {{ end }}
+
+          {{ if $paginator.HasNext }}
+          <a href="{{ $paginator.Next.URL }}" class="relative inline-flex items-center rounded-r-md px-3 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
+            <i class="fas fa-chevron-right"></i>
+          </a>
+          {{ end }}
+        </nav>
+      </div>
+      {{ end }}
+    {{ else }}
+      <div class="text-center py-12">
+        <div class="text-gray-400 mb-4">
+          <i class="fas fa-box-open text-4xl"></i>
+        </div>
+        <p class="text-gray-600">No showcase items found.</p>
+      </div>
+    {{ end }}
+  </div>
+</section>
+{{ end }} 

themes/aurelia-theme/layouts/showcase/single.html

@@ -0,0 +1,118 @@
+{{ define "main" }}
+<!-- Showcase Header -->
+<section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
+  <!-- Decorative Background -->
+  <div class="absolute inset-0 overflow-hidden">
+    <div class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl"></div>
+    <div class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl"></div>
+  </div>
+
+  <!-- Header Content -->
+  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <a href="/showcase" class="inline-flex items-center text-sm text-gray-600 hover:text-aurelia mb-8 group">
+      <svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+      </svg>
+      Back to Showcase
+    </a>
+
+    {{ with .Params.showcase_categories }}
+    <div class="flex gap-2 mb-6">
+      {{ range . }}
+      <a href="{{ "/showcase/category/" | relLangURL }}{{ . | urlize }}"
+         class="inline-block px-3 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium hover:bg-aurelia/20 transition-colors">
+        {{ . }}
+      </a>
+      {{ end }}
+    </div>
+    {{ end }}
+
+    <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+      {{ .Title }}
+    </h1>
+
+    {{ with .Description }}
+    <p class="text-xl text-gray-600 max-w-2xl">{{ . }}</p>
+    {{ end }}
+
+    <div class="mt-8 flex flex-wrap gap-4">
+      {{ with .Params.github }}
+      <a href="https://github.com/{{ . }}" 
+         class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-gray-900 text-white hover:bg-gray-800 transition-colors"
+         target="_blank">
+        <i class="fab fa-github text-lg"></i>
+        View on GitHub
+      </a>
+      {{ end }}
+
+      {{ with .Params.demo }}
+      <a href="{{ . }}" 
+         class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-aurelia text-white hover:bg-aurelia-light transition-colors"
+         target="_blank">
+        <i class="fas fa-external-link-alt"></i>
+        Live Demo
+      </a>
+      {{ end }}
+
+      {{ with .Params.npm }}
+      <a href="https://www.npmjs.com/package/{{ . }}" 
+         class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors"
+         target="_blank">
+        <i class="fab fa-npm text-lg"></i>
+        View on npm
+      </a>
+      {{ end }}
+    </div>
+  </div>
+</section>
+
+<!-- Content -->
+<article class="py-12 bg-white">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    {{ with .Params.featured_image }}
+    <div class="mb-12 rounded-2xl overflow-hidden shadow-xl">
+      <img src="{{ . }}" alt="" class="w-full h-auto">
+    </div>
+    {{ end }}
+
+    <div class="prose prose-lg max-w-none">
+      {{ .Content }}
+    </div>
+  </div>
+</article>
+
+<!-- Related Items -->
+{{ $related := where (where .Site.RegularPages "Type" "showcase") "Permalink" "!=" .Permalink | first 3 }}
+{{ with $related }}
+<section class="py-16 bg-gray-50">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h2 class="text-3xl font-bold mb-8 text-center">More from Showcase</h2>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {{ range . }}
+      <article class="relative p-6 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
+        <div class="relative">
+          {{ with .Params.showcase_categories }}
+          <div class="flex flex-wrap gap-2 mb-4">
+            {{ range . }}
+            <span class="inline-block px-3 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium">
+              {{ . }}
+            </span>
+            {{ end }}
+          </div>
+          {{ end }}
+
+          <h3 class="text-xl font-bold text-gray-900 group-hover:text-aurelia transition-colors">
+            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+          </h3>
+
+          {{ with .Description }}
+          <p class="mt-2 text-gray-600">{{ . }}</p>
+          {{ end }}
+        </div>
+      </article>
+      {{ end }}
+    </div>
+  </div>
+</section>
+{{ end }}
+{{ end }} 

themes/aurelia-theme/layouts/showcase_categories/term.html

@@ -0,0 +1,110 @@
+{{ define "main" }}
+<!-- Showcase Header Section -->
+<section class="relative pt-safe pb-8 bg-gradient-to-b from-white to-gray-50">
+  <!-- Decorative Background -->
+  <div class="absolute inset-0 overflow-hidden">
+    <div class="absolute top-1/4 -right-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-3xl"></div>
+    <div class="absolute -bottom-1/4 -left-1/4 w-[500px] h-[500px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-3xl"></div>
+  </div>
+
+  <!-- Header Content -->
+  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+      {{ .Title | humanize }}
+    </h1>
+    <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+      Showcase items in {{ .Title | humanize }}
+    </p>
+  </div>
+</section>
+
+<!-- Categories Navigation -->
+<div class="border-b border-gray-200 bg-white sticky top-16 z-20">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <nav class="flex space-x-8 overflow-x-auto py-4" aria-label="Categories">
+      <a href="/showcase" class="text-gray-500 hover:text-aurelia border-transparent whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
+        All
+      </a>
+      {{ range $name, $taxonomy := .Site.Taxonomies.showcase_categories }}
+      <a href="{{ "/showcase/category/" | relLangURL }}{{ $name | urlize }}" 
+         class="{{ if eq (lower $.Title) (lower $name) }}text-aurelia border-aurelia{{ else }}text-gray-500 hover:text-aurelia border-transparent{{ end }} whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
+        {{ humanize $name }}
+      </a>
+      {{ end }}
+    </nav>
+  </div>
+</div>
+
+<!-- Showcase Grid -->
+<section class="py-12 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    {{ $paginator := .Paginate .Pages }}
+    {{ if $paginator.Pages }}
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {{ range $paginator.Pages }}
+          <article class="relative p-6 rounded-2xl bg-gradient-to-b from-gray-50 to-white border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
+            <a href="{{ .RelPermalink }}" class="block">
+              <!-- Card Decoration -->
+              <div class="absolute inset-0 overflow-hidden rounded-2xl">
+                <div class="absolute top-0 right-0 w-[200px] h-[200px] bg-gradient-to-br from-aurelia/5 to-aurelia-light/5 rounded-full blur-2xl transform -translate-y-1/2 translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+              </div>
+
+              <div class="relative">
+                {{ with .Params.showcase_categories }}
+                <div class="flex flex-wrap gap-2 mb-4">
+                  {{ range . }}
+                  <span class="inline-block px-3 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium">
+                    {{ . }}
+                  </span>
+                  {{ end }}
+                </div>
+                {{ end }}
+
+                <h2 class="text-2xl font-bold text-gray-900 group-hover:text-aurelia transition-colors">
+                  {{ .Title }}
+                </h2>
+
+                {{ with .Description }}
+                <p class="mt-2 text-gray-600">{{ . }}</p>
+                {{ end }}
+              </div>
+            </a>
+          </article>
+        {{ end }}
+      </div>
+
+      <!-- Pagination -->
+      {{ if gt $paginator.TotalPages 1 }}
+      <div class="mt-12 flex justify-center">
+        <nav class="inline-flex rounded-md shadow-sm isolate" aria-label="Pagination">
+          {{ if $paginator.HasPrev }}
+          <a href="{{ $paginator.Prev.URL }}" class="relative inline-flex items-center rounded-l-md px-3 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
+            <i class="fas fa-chevron-left"></i>
+          </a>
+          {{ end }}
+
+          {{ range $paginator.Pagers }}
+          <a href="{{ .URL }}" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold {{ if eq . $paginator }}text-white bg-aurelia hover:bg-aurelia-light{{ else }}text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50{{ end }} focus:z-20 focus:outline-offset-0">
+            {{ .PageNumber }}
+          </a>
+          {{ end }}
+
+          {{ if $paginator.HasNext }}
+          <a href="{{ $paginator.Next.URL }}" class="relative inline-flex items-center rounded-r-md px-3 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
+            <i class="fas fa-chevron-right"></i>
+          </a>
+          {{ end }}
+        </nav>
+      </div>
+      {{ end }}
+    {{ else }}
+      <div class="text-center py-12">
+        <div class="text-gray-400 mb-4">
+          <i class="fas fa-box-open text-4xl"></i>
+        </div>
+        <p class="text-gray-600">No showcase items found in this category.</p>
+      </div>
+    {{ end }}
+  </div>
+</section>
+{{ end }}