Try to show article preview in icon

Author: Grufoony

_includes/citation.html

@@ -8,22 +8,44 @@
   {% assign citation = include %}
 {% endif %}
 
+{% assign citation_pdf = citation.pdf | default: nil %}
+{% if citation_pdf == nil and citation.buttons.size > 0 %}
+  {% for button in citation.buttons %}
+    {% assign button_link = button.link | default: "" | downcase %}
+    {% assign button_text = button.text | default: "" | downcase %}
+    {% assign button_icon = button.icon | default: "" | downcase %}
+    {% assign is_pdf_link = button_link contains ".pdf" %}
+    {% assign is_pdf_text = button_text contains "pdf" %}
+    {% assign is_pdf_icon = button_icon contains "pdf" %}
+    {% if is_pdf_link or is_pdf_text or is_pdf_icon %}
+      {% assign citation_pdf = button.link %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
 <div class="citation-container">
   <div class="citation">
     {% if include.style == "rich" %}
       <a
-        {% if citation.link %}
+        {% if citation_pdf %}
+          href="{{ citation_pdf | relative_url | uri_escape }}"
+        {% elsif citation.link %}
           href="{{ citation.link | relative_url | uri_escape }}"
         {% endif %}
         class="citation-image"
         aria-label="{{ citation.title | default: "citation link" | regex_strip }}"
       >
-        <img
-          src="{{ citation.image | relative_url | uri_escape }}"
-          alt="{{ citation.title | default: "citation image" | regex_strip }}"
-          loading="lazy"
-          {% include fallback.html %}
-        >
+        {% if citation_pdf %}
+          {% include pdf-preview.html pdf=citation_pdf image=citation.image title=citation.title %}
+        {% else %}
+          <img
+            src="{{ citation.image | relative_url | uri_escape }}"
+            alt="{{ citation.title | default: "citation image" | regex_strip }}"
+            loading="lazy"
+            {% include fallback.html %}
+          >
+        {% endif %}
       </a>
     {% endif %}
 

_includes/pdf-preview.html

@@ -0,0 +1,14 @@
+{% if include.pdf %}
+  <object
+    data="{{ include.pdf | relative_url | uri_escape }}#page=1&view=FitH"
+    type="application/pdf"
+    aria-label="{{ include.title | default: 'PDF preview' | regex_strip }}"
+  >
+    <img
+      src="{{ include.image | relative_url | uri_escape }}"
+      alt="{{ include.title | default: 'preview image' | regex_strip }}"
+      loading="lazy"
+      {% include fallback.html %}
+    >
+  </object>
+{% endif %}

_includes/poster-list.html

@@ -2,6 +2,9 @@
 {% for poster in posters %}
 <div class="citation-container">
   <div class="citation">
+    <a href="{{ poster.pdf | relative_url }}" target="_blank" class="citation-image" aria-label="{{ poster.title | default: 'poster link' | regex_strip }}">
+      {% include pdf-preview.html pdf=poster.pdf image=poster.image title=poster.title %}
+    </a>
     <div class="citation-text">
       {% include icon.html icon="fa-solid fa-chalkboard" %}
       <a href="{{ poster.pdf | relative_url }}" target="_blank" class="citation-title">{{ poster.title }}</a>

_styles/citation.scss

@@ -32,6 +32,15 @@ $wrap: 800px;
   object-fit: contain;
 }
 
+.citation-image object {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  pointer-events: none;
+}
+
 .citation-text {
   position: relative;
   display: inline-flex;