Refactor plugin card into its own include

Kong · Dec 19, 2024 · bf6e2e3 · bf6e2e3
1 parent 6593f5e
commit bf6e2e3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/app/_includes/card.html b/app/_includes/card.html
@@ -3,25 +3,17 @@
 <img src="{{ include.icon }}" class="w-8 h-8"/>
 {% endif %}
 
-<div class="flex flex-col gap-3 flex-grow">
-    <h4>{{ include.title | liquify }}</h4>
+<h4>{{ include.title | liquify }}</h4>
 
-    <p class="text-sm line-clamp-3">
-        {{ include.description | liquify | markdownify | markdown }}
-    </p>
+<div class="flex flex-col flex-grow text-sm gap-3">
+    {{ include.description | liquify | markdownify }}
 </div>
 
 {% if include.cta_text %}
 <div class="flex text-sm text-brand">
 {{ include.cta_text | liquify }}
 </div>
 {% endif %}
-
-{% if include.badges %}
-<div class="flex flex-wrap gap-2">
-    {{include.badges}}
-</div>
-{% endif %}
 {% endcapture %}
 
 <div class="flex rounded-md border border-primary/5 bg-secondary shadow-primary h-full hover:border hover:border-brand-saturated/40 hover:shadow-hover-card {{ include.css_class}}">

diff --git a/app/_includes/cards/plugin.html b/app/_includes/cards/plugin.html
@@ -1,9 +1,23 @@
 {% assign plugin = include.plugin %}
 
-{% capture badges %}
-{%- if plugin.tier -%}
-{%- include tier.html products=plugin.products tier=plugin.tier url=false-%}
-{%- endif -%}
-{% endcapture %}
+<div class="flex rounded-md border border-primary/5 bg-secondary shadow-primary h-full hover:border hover:border-brand-saturated/40 hover:shadow-hover-card min-h-[260px]">
+    <a href="{{plugin.url}}" class="flex flex-col gap-5 hover:no-underline text-secondary w-full p-6">
+        <img src="{{ plugin.icon }}" class="w-8 h-8"/>
 
-{% include card.html icon=plugin.icon title=plugin.name description=plugin.description cta_url=plugin.url badges=badges css_class="min-h-[260px]" %}
+        <div class="flex flex-col gap-3 flex-grow">
+            <h4>{{ plugin.name | liquify }}</h4>
+
+            <p class="text-sm line-clamp-3">
+                {{ plugin.description | liquify | markdownify | markdown }}
+            </p>
+        </div>
+
+        {% if plugin.tier %}
+            <div class="flex flex-wrap gap-2">
+                {%- if plugin.tier -%}
+                {%- include tier.html products=plugin.products tier=plugin.tier url=false-%}
+                {%- endif -%}
+            </div>
+        {% endif %}
+    </a>
+</div>