Create a testimonial component

themes/opdavies/components/testimonial.html.twig

@@ -0,0 +1,33 @@
+<article>
+  <div class="prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3 dark:prose-hr:border-grey-400 prose-code:before:content-[''] prose-code:after:content-['']">
+    <blockquote>
+      {{ text }}
+    </blockquote>
+
+    <div>
+      <footer class="mt-8 flex items-center space-x-4 space-x-reverse">
+        <span class="text-base">
+          {% if url %}
+            <a href="{{ url }}">{{ name }}</a>
+          {% else %}
+            {{ name }}
+          {% endif %}
+
+          {% if role %}
+            - {{ role }}
+          {% endif %}
+        </span>
+
+        {% if image %}
+          <span class="not-prose order-first flex-shrink-0">
+            {{ drupal_image(image.uri, 'thumbnail', {
+              alt: image.alt,
+              class: 'size-16 rounded-full ring-[3px] ring-blue-primary dark:ring-white',
+              loading: 'lazy',
+            }) }}
+          </span>
+        {% endif %}
+      </footer>
+    </div>
+  </div>
+</article>

themes/opdavies/opdavies.info.yml

@@ -4,3 +4,5 @@ type: theme
 base theme: false
 libraries:
   - opdavies/global-styling
+dependencies:
+  - drupal:twig_tweak

themes/opdavies/templates/node--testimonial.html.twig

@@ -60,27 +60,16 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes }}>
-  {{ title_prefix }}
 
-  {% if label and not page %}
-    <h2{{ title_attributes }}>
-      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
-    </h2>
-  {% endif %}
+{% include '@opdavies/components/testimonial.html.twig' with {
+  image: {
+    alt: content.field_image.0['#item'].alt,
+    uri: node.field_image|file_uri,
+  },
+  name: label,
+  role: content.field_role.0|render,
+  text: content.body.0|render,
+  url: content.field_url.0['#url']|render,
+} only %}
 
-  {{ title_suffix }}
-
-  {% if display_submitted %}
-    <footer>
-      {{ author_picture }}
-      <div{{ author_attributes }}>
-        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
-      </div>
-    </footer>
-  {% endif %}
-
-  <div{{ content_attributes }}>
-    {{ content }}
-  </div>
-</article>
+{{ content|without('body', 'field_image', 'field_role', 'field_url', 'field_weight') }}