refact(layouts): reusable page header partial

aurelia · Dec 16, 2024 · a999395 · a999395
1 parent 0c3741b
commit a999395
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 100 deletions.
diff --git a/themes/aurelia-theme/layouts/_default/single.html b/themes/aurelia-theme/layouts/_default/single.html
@@ -1,21 +1,6 @@
 {{ define "main" }}
-<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 pointer-events-none">
-    <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
-    <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
-  </div>
 
-  <!-- Header Content -->
-  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-    <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-      {{ .Title }}
-    </h1>
-    {{ with .Description }}
-    <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
-    {{ end }}
-  </div>
-</section>
+{{ partial "page-header" . }}
 
 <section class="py-4 bg-white relative">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

diff --git a/themes/aurelia-theme/layouts/contact/single.html b/themes/aurelia-theme/layouts/contact/single.html
@@ -1,21 +1,6 @@
 {{ define "main" }}
-<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 pointer-events-none">
-      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
-      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
-    </div>
-
-    <!-- Header Content -->
-    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-        {{ .Title }}
-      </h1>
-      {{ with .Description }}
-      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
-      {{ end }}
-    </div>
-</section>
+
+{{ partial "page-header" . }}
 
 <!-- Contact Content -->
 <section class="py-4 bg-white">

diff --git a/themes/aurelia-theme/layouts/examples/single.html b/themes/aurelia-theme/layouts/examples/single.html
@@ -1,21 +1,6 @@
 {{ define "main" }}
-<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 pointer-events-none">
-      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
-      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
-    </div>
-
-    <!-- Header Content -->
-    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-        {{ .Title }}
-      </h1>
-      {{ with .Description }}
-      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
-      {{ end }}
-    </div>
-  </section>
+
+{{ partial "page-header" . }}
 
 <!-- Repository Link -->
 <section class="py-4 bg-white">

diff --git a/themes/aurelia-theme/layouts/faq/single.html b/themes/aurelia-theme/layouts/faq/single.html
@@ -1,21 +1,6 @@
 {{ define "main" }}
-<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 pointer-events-none">
-      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
-      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
-    </div>
-
-    <!-- Header Content -->
-    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-        {{ .Title }}
-      </h1>
-      {{ with .Description }}
-      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
-      {{ end }}
-    </div>
-  </section>
+
+{{ partial "page-header" . }}
 
 <section class="py-4 bg-white relative">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

diff --git a/themes/aurelia-theme/layouts/learn/single.html b/themes/aurelia-theme/layouts/learn/single.html
@@ -1,21 +1,6 @@
 {{ define "main" }}
-<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 pointer-events-none">
-    <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
-    <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
-  </div>
 
-  <!-- Header Content -->
-  <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-    <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-      {{ .Title }}
-    </h1>
-    {{ with .Description }}
-    <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
-    {{ end }}
-  </div>
-</section>
+{{ partial "page-header" . }}
 
 <!-- Learn Content -->
 <article class="py-4 bg-white">

diff --git a/themes/aurelia-theme/layouts/partials/page-header.html b/themes/aurelia-theme/layouts/partials/page-header.html
@@ -0,0 +1,17 @@
+<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 pointer-events-none">
+      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
+      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
+    </div>
+
+    <!-- Header Content -->
+    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
+        {{ .Title }}
+      </h1>
+      {{ with .Description }}
+      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
+      {{ end }}
+    </div>
+</section> 
diff --git a/themes/aurelia-theme/layouts/roadmap/single.html b/themes/aurelia-theme/layouts/roadmap/single.html
@@ -1,21 +1,6 @@
 {{ define "main" }}
-<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 pointer-events-none">
-      <div class="absolute top-0 -right-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia/10 to-aurelia-light/10 rounded-full blur-2xl"></div>
-      <div class="absolute bottom-0 -left-1/4 w-[400px] h-[400px] bg-gradient-to-r from-aurelia-light/5 to-purple-500/5 rounded-full blur-2xl"></div>
-    </div>
-
-    <!-- Header Content -->
-    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
-        {{ .Title }}
-      </h1>
-      {{ with .Description }}
-      <p class="text-base md:text-lg text-gray-600">{{ . }}</p>
-      {{ end }}
-    </div>
-  </section>
+
+{{ partial "page-header" . }}
 
 <!-- Roadmap Content -->
 <section class="py-4 bg-white">