From f0924cde03ca04078b10965536430bdc5a0d4954 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.dev>
Date: Sat, 1 Mar 2025 22:15:39 +0000
Subject: [PATCH] Add album example
---
source/_examples/album.html.twig | 32 ++++++++++++++++++++++++++++
source/_includes/card.html.twig | 27 +++++++++++++++++++++++
source/_includes/jumbotron.html.twig | 22 +++++++++++++++++++
source/_includes/navbar.html.twig | 23 ++++++++++++++++++++
4 files changed, 104 insertions(+)
create mode 100644 source/_examples/album.html.twig
create mode 100644 source/_includes/card.html.twig
create mode 100644 source/_includes/jumbotron.html.twig
create mode 100644 source/_includes/navbar.html.twig
diff --git a/source/_examples/album.html.twig b/source/_examples/album.html.twig
new file mode 100644
index 0000000..926b5d3
--- /dev/null
+++ b/source/_examples/album.html.twig
@@ -0,0 +1,32 @@
+---
+title: Album
+---
+
+{% include 'navbar' with { title: page.title } only %}
+
+{% include 'jumbotron' with {
+ buttons: [
+ {
+ shape: 'rounded',
+ text: 'Main call to action',
+ type: 'primary',
+ },
+ {
+ shape: 'rounded',
+ text: 'Secondary action',
+ type: 'secondary',
+ },
+ ],
+ title: 'Album example',
+ text: "Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.",
+} only %}
+
+<div class="bg-gray-100">
+ <div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl">
+ <div class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8">
+ {% for i in range(1, 9) %}
+ {% include 'card' with {} only %}
+ {% endfor %}
+ </div>
+ </div>
+</div>
diff --git a/source/_includes/card.html.twig b/source/_includes/card.html.twig
new file mode 100644
index 0000000..0ede93d
--- /dev/null
+++ b/source/_includes/card.html.twig
@@ -0,0 +1,27 @@
+<div class="bg-white border rounded-md overflow-hidden border-gray-200 shadow-sm max-w-sm">
+ <img alt="" class="w-full h-auto object-cover" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_18596650c01%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_18596650c01%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.70000076293945%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
+
+ <div class="p-4 font-sans">
+ <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+
+ <footer class="mt-6 flex items-center justify-between">
+ <div>
+ <ul class="flex border border-gray-500 divide-x divide-gray-500 text-sm text-gray-500 rounded">
+ <li>
+ <a class="block px-2 py-1 transition-colors ease-in-out duration-200 hocus:bg-gray-500 hocus:text-white" href="#0">View</a>
+ </li>
+ <li>
+ <a class="block px-2 py-1 transition-colors ease-in-out duration-200 hocus:bg-gray-500 hocus:text-white" href="#0">Edit</a>
+ </li>
+ </ul>
+ </div>
+
+ <div>
+ <p class="text-sm text-gray-500">
+ <span class="sr-only">Reading time:</span>9 minutes
+ </p>
+ </div>
+ </footer>
+ </div>
+</div>
+
diff --git a/source/_includes/jumbotron.html.twig b/source/_includes/jumbotron.html.twig
new file mode 100644
index 0000000..d2921f8
--- /dev/null
+++ b/source/_includes/jumbotron.html.twig
@@ -0,0 +1,22 @@
+<div class="max-w-xl mx-auto px-4 py-24 text-center lg:max-w-2xl">
+ <h1 class="text-4xl">{{ title }}</h1>
+
+ <div class="mt-3">
+ {% if text %}
+ <p class="text-base leading-relaxed text-gray-500 sm:text-lg">{{ text }}</p>
+ {% endif %}
+
+ {% if buttons %}
+ <div class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1">
+ {% for button in buttons %}
+ {% include 'button' with {
+ shape: button.shape,
+ text: button.text,
+ type: button.type,
+ } only %}
+ {% endfor %}
+ </div>
+ {% endif %}
+ </div>
+</div>
+
diff --git a/source/_includes/navbar.html.twig b/source/_includes/navbar.html.twig
new file mode 100644
index 0000000..b05953c
--- /dev/null
+++ b/source/_includes/navbar.html.twig
@@ -0,0 +1,23 @@
+<div class="px-4 py-3.5 bg-gray-750 text-white">
+ <div class="max-w-6xl mx-auto px-6 flex items-center gap-3">
+ <svg
+ class=""
+ fill="none"
+ height="20"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ width="20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
+ ></path>
+ <circle cx="12" cy="13" r="4"></circle>
+ </svg>
+
+ <p class="font-semibold text-xl tracking-wide">{{ title }}</p>
+ </div>
+</div>