Skip to content

Try to show article preview in icon #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Grufoony merged 4 commits into from
Mar 20, 2026
Merged

Try to show article preview in icon #47

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a97f94
Try to show article preview in icon
Grufoony Mar 20, 2026
f2e22e2
Copilot suggestions
Grufoony Mar 20, 2026
91c93bb
Copilot suggestions
Grufoony Mar 20, 2026
3e6a9dd
Fix 1
Grufoony Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 29 additions & 7 deletions _includes/citation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}"
Comment thread
Grufoony marked this conversation as resolved.
>
<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 %}

Expand Down
14 changes: 14 additions & 0 deletions _includes/pdf-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
>
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

include.image is used unconditionally for the fallback <img>; when it’s not provided (e.g., posters currently have no image field), this generates an empty src, which can trigger unwanted requests and broken thumbnails. Consider only rendering the <img> when include.image is present, or default the src to a stable placeholder (e.g., the existing fallback asset).

Suggested change
<img
src="{{ include.image | relative_url | uri_escape }}"
alt="{{ include.title | default: 'preview image' | regex_strip }}"
loading="lazy"
{% include fallback.html %}
>
{% if include.image %}
<img
src="{{ include.image | relative_url | uri_escape }}"
alt="{{ include.title | default: 'preview image' | regex_strip }}"
loading="lazy"
{% include fallback.html %}
>
{% endif %}

Copilot uses AI. Check for mistakes.
</object>
{% endif %}
3 changes: 3 additions & 0 deletions _includes/poster-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

poster.image is passed to pdf-preview.html, but _data/posters.yaml entries don’t define an image field, so the rendered <img src=""> will be empty (often causing a broken thumbnail and/or an extra request for the current page). Either add image: fields to the poster data, or make pdf-preview.html handle a missing image by using a known placeholder instead of emitting an empty src.

Suggested change
{% include pdf-preview.html pdf=poster.pdf image=poster.image title=poster.title %}
{% assign poster_image = poster.image | default: '/assets/img/poster-placeholder.png' %}
{% include pdf-preview.html pdf=poster.pdf image=poster_image title=poster.title %}

Copilot uses AI. Check for mistakes.
</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>
Comment thread
Grufoony marked this conversation as resolved.
Comment thread
Grufoony marked this conversation as resolved.
Expand Down
9 changes: 9 additions & 0 deletions _styles/citation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading