From d787d86d3f86ec4e4b6279714a79358a252c9373 Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Sat, 4 Apr 2026 03:49:42 +0600 Subject: [PATCH 1/9] feat: add citation popup for blog posts (fixes #3322) --- templates/post.html | 98 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) diff --git a/templates/post.html b/templates/post.html index 267c4335b..0cb00e223 100644 --- a/templates/post.html +++ b/templates/post.html @@ -9,6 +9,20 @@ {{ throw(message="Please put author under the taxonomies area.") }} {%- endif -%} + +
{{ page.content | safe | markdown | safe }} From 9d480c28afd2c6f9640723404fb1e8e2535c0239 Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Fri, 10 Apr 2026 03:50:53 +0600 Subject: [PATCH 2/9] Refactored citation model and improved SCSS structure. Cleaned up citation macro structure in Zola templates keeping a standardized fallback logic for authors and dates. Refactored SCSS for better maintainability. Also, added and fixed tab switching logic for different formats. Lastly, no major changes were made regarding output formatting and instead matched zola formatting. Signed-off-by: Syed Ishmum Ahnaf syedishmum15@gmail.com --- sass/_citation.scss | 196 +++++++++++++++++++++++++++++++++ sass/style.scss | 1 + templates/macros/citation.html | 171 ++++++++++++++++++++++++++++ templates/post.html | 100 +---------------- 4 files changed, 371 insertions(+), 97 deletions(-) create mode 100644 sass/_citation.scss create mode 100644 templates/macros/citation.html diff --git a/sass/_citation.scss b/sass/_citation.scss new file mode 100644 index 000000000..792b80a4b --- /dev/null +++ b/sass/_citation.scss @@ -0,0 +1,196 @@ +.cite-checkbox, +.cite-format-radio { + display: none; +} + +.citation { + display: inline-block; + margin-top: 0.5rem; +} + +.cite-btn { + display: inline-block; + padding: 0.2rem 0.7rem; + font-size: 0.82rem; + border: 1px solid var(--color-link); + border-radius: 4px; + color: var(--color-link); + cursor: pointer; + + &:hover { + background-color: var(--color-link); + color: #fff; + } +} + +// overlay + +.cite-overlay { + display: none; + position: fixed; + inset: 0; + z-index: 400; + background: rgba(0, 0, 0, 0.5); + cursor: default; +} + +// modal + +.cite-modal { + display: none; + position: fixed; + inset: 0; + z-index: 800; + pointer-events: none; + align-items: center; + justify-content: center; +} + +.cite-modal__box { + position: relative; + background: #fff; + border: 1px solid var(--borders-color); + border-radius: 8px; + padding: 1.5rem; + max-width: 560px; + width: 90%; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); + pointer-events: auto; + + h3 { + margin-top: 0; + } +} + +.cite-modal__close { + position: absolute; + top: 0.75rem; + right: 1rem; + font-size: 1.25rem; + color: var(--color-text-light); + cursor: pointer; + line-height: 1; + + &:hover { + color: var(--color-text); + } +} + +.cite-checkbox:checked { + ~ .cite-overlay { + display: block; + } + + ~ .cite-modal { + display: flex; + } +} + +// tabs + +.cite-formats { + margin-top: 1rem; +} + +.cite-format-tab { + display: inline-block; + padding: 0.25rem 0.6rem; + margin-right: 0.25rem; + margin-bottom: 0.5rem; + font-size: 0.78rem; + font-weight: 600; + border: 1px solid var(--borders-color); + border-radius: 4px; + cursor: pointer; + color: var(--color-text-light); + + &:hover { + border-color: var(--color-link); + color: var(--color-link); + } +} + +.cite-panel { + display: none; +} + +[id$="-apa"]:checked { + ~ [for$="-apa"].cite-format-tab { + border-color: var(--color-link); + color: var(--color-link); + background-color: rgba(0, 152, 212, 0.08); + } + + ~ .cite-formats .cite-panel--apa, + ~ .cite-panel--apa { + display: block; + } +} + +[id$="-mla"]:checked { + ~ [for$="-mla"].cite-format-tab { + border-color: var(--color-link); + color: var(--color-link); + background-color: rgba(0, 152, 212, 0.08); + } + + ~ .cite-formats .cite-panel--mla, + ~ .cite-panel--mla { + display: block; + } +} + +[id$="-chicago"]:checked { + ~ [for$="-chicago"].cite-format-tab { + border-color: var(--color-link); + color: var(--color-link); + background-color: rgba(0, 152, 212, 0.08); + } + + ~ .cite-formats .cite-panel--chicago, + ~ .cite-panel--chicago { + display: block; + } +} + +[id$="-harvard"]:checked { + ~ [for$="-harvard"].cite-format-tab { + border-color: var(--color-link); + color: var(--color-link); + background-color: rgba(0, 152, 212, 0.08); + } + + ~ .cite-formats .cite-panel--harvard, + ~ .cite-panel--harvard { + display: block; + } +} + +[id$="-bibtex"]:checked { + ~ [for$="-bibtex"].cite-format-tab { + border-color: var(--color-link); + color: var(--color-link); + background-color: rgba(0, 152, 212, 0.08); + } + + ~ .cite-formats .cite-panel--bibtex, + ~ .cite-panel--bibtex { + display: block; + } +} + +// text + +.cite-text { + font-family: monospace; + font-size: 0.82rem; + line-height: 1.5; + padding: 0.5rem; + margin: 0; + border: 1px solid var(--borders-color); + border-radius: 4px; + background: #f9f9f9; + white-space: pre-wrap; + word-break: break-all; + color: var(--color-text); +} diff --git a/sass/style.scss b/sass/style.scss index 220c74687..e7345c5b2 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -27,3 +27,4 @@ @import '_working-groups'; @import '_governing-board'; @import '_branding'; +@import '_citation'; // added diff --git a/templates/macros/citation.html b/templates/macros/citation.html new file mode 100644 index 000000000..1347e2d57 --- /dev/null +++ b/templates/macros/citation.html @@ -0,0 +1,171 @@ +{# citation popup — {% import "macros/citation.html" as citation %} #} + +{% macro render(page) %} + +{# unique id #} +{% set cb_id = "cite-toggle-" ~ page.slug %} + +
+ + + + + + + + + +
+ +{% endmacro render %} + + +{# apa #} +{% macro cite_apa(page) %} +{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} + {%- set authors = page.taxonomies.author | join(sep=", ") -%} +{%- else -%} + {%- set authors = "Matrix.org" -%} +{%- endif -%} +{%- if page.date -%} + {%- set year = page.date | date(format="%Y") -%} +{%- else -%} + {%- set year = "n.d." -%} +{%- endif -%} +{{ authors }}. ({{ year }}). {{ page.title }}. Matrix.org. {{ page.permalink }} +{%- endmacro cite_apa %} + + +{# mla #} +{% macro cite_mla(page) %} +{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} + {%- set authors = page.taxonomies.author | join(sep=", ") -%} +{%- else -%} + {%- set authors = "Matrix.org" -%} +{%- endif -%} +{%- if page.date -%} + {%- set date_fmt = page.date | date(format="%d %b. %Y") -%} +{%- else -%} + {%- set date_fmt = "n.d." -%} +{%- endif -%} +{{ authors }}. "{{ page.title }}." Matrix.org, {{ date_fmt }}, {{ page.permalink }}. +{%- endmacro cite_mla %} + + +{# chicago #} +{% macro cite_chicago(page) %} +{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} + {%- set authors = page.taxonomies.author | join(sep=", ") -%} +{%- else -%} + {%- set authors = "Matrix.org" -%} +{%- endif -%} +{%- if page.date -%} + {%- set date_fmt = page.date | date(format="%B %d, %Y") -%} +{%- else -%} + {%- set date_fmt = "n.d." -%} +{%- endif -%} +{{ authors }}. "{{ page.title }}." Matrix.org. {{ date_fmt }}. {{ page.permalink }}. +{%- endmacro cite_chicago %} + + +{# harvard #} +{% macro cite_harvard(page) %} +{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} + {%- set authors = page.taxonomies.author | join(sep=", ") -%} +{%- else -%} + {%- set authors = "Matrix.org" -%} +{%- endif -%} +{%- if page.date -%} + {%- set year = page.date | date(format="%Y") -%} + {%- set date_fmt = page.date | date(format="%d %B %Y") -%} +{%- else -%} + {%- set year = "n.d." -%} + {%- set date_fmt = "n.d." -%} +{%- endif -%} +{{ authors }} ({{ year }}) '{{ page.title }}', Matrix.org, viewed {{ date_fmt }}, <{{ page.permalink }}>. +{%- endmacro cite_harvard %} + + +{# bibtex #} +{% macro cite_bibtex(page) %} +{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} + {%- set authors = page.taxonomies.author | join(sep=" and ") -%} +{%- else -%} + {%- set authors = "Matrix.org" -%} +{%- endif -%} +{%- if page.date -%} + {%- set year = page.date | date(format="%Y") -%} +{%- else -%} + {%- set year = "n.d." -%} +{%- endif -%} +{%- set slug = page.slug -%} +@misc{ {{ authors | lower | replace(from=" ", to="") }}{{ year }}, + author = { {{ authors }} }, + title = { {{ page.title }} }, + year = { {{ year }} }, + url = { {{ page.permalink }} }, + note = {Matrix.org} +} +{%- endmacro cite_bibtex %} diff --git a/templates/post.html b/templates/post.html index 0cb00e223..7246d7e3b 100644 --- a/templates/post.html +++ b/templates/post.html @@ -1,4 +1,5 @@ {% extends "page.html" %} +{% import "macros/citation.html" as citation %} {% block head_extra %} {# {% if page.summary %} @@ -9,20 +10,6 @@ {{ throw(message="Please put author under the taxonomies area.") }} {%- endif -%} - - {% endblock head_extra %} {% block content %} +

{{ page.title }}

@@ -82,91 +70,9 @@

{{ page.title }}

{% if page.updated %}
Last update: {{ page.updated | date(format="%Y-%m-%d %H:%M") }} {% endif %} - + {{ citation::render(page=page) }}
- - -
{{ page.content | safe | markdown | safe }} From 7569110979592a81dc9873f525131a8e3ea5df2b Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Fri, 17 Apr 2026 02:00:13 +0600 Subject: [PATCH 3/9] Apply suggestion from @awtj8o81ryywg793 Co-authored-by: Jack S. <181536874+awtj8o81ryywg793@users.noreply.github.com> Signed-off-by: Syed Ishmum Ahnaf --- sass/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/style.scss b/sass/style.scss index e7345c5b2..97e33157c 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -27,4 +27,4 @@ @import '_working-groups'; @import '_governing-board'; @import '_branding'; -@import '_citation'; // added +@import '_citation'; From 0445d05c543ed66c1b3b7a9657ead673ece059b6 Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Fri, 17 Apr 2026 02:39:34 +0600 Subject: [PATCH 4/9] cleaned up #added, removed comments for citations, added SPDX information and updated section with page.taxonomies.author only. Signed-off-by: Syed Ishmum Ahnaf syedishmum15@gmail.com --- sass/_citation.scss | 7 +++++++ templates/macros/citation.html | 20 +++++--------------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/sass/_citation.scss b/sass/_citation.scss index 792b80a4b..a97bf2c73 100644 --- a/sass/_citation.scss +++ b/sass/_citation.scss @@ -1,3 +1,10 @@ +/* + * SPDX-FileCopyrightText: 2026 The Matrix.org Foundation C.I.C. + * SPDX-FileContributor: awtj8o81ryywg793 <181536874+awtj8o81ryywg793@users.noreply.github.com> + * + * SPDX-License-Identifier: Apache-2.0 + */ + .cite-checkbox, .cite-format-radio { display: none; diff --git a/templates/macros/citation.html b/templates/macros/citation.html index 1347e2d57..7fcf3d38e 100644 --- a/templates/macros/citation.html +++ b/templates/macros/citation.html @@ -47,27 +47,22 @@

Cite this post

{% endfor %} - {# apa #} 
{{ self::cite_apa(page=page) }}
- {# mla #} 
{{ self::cite_mla(page=page) }}
- {# chicago #} 
{{ self::cite_chicago(page=page) }}
- {# harvard #} 
{{ self::cite_harvard(page=page) }}
- {# bibtex #} 
{{ self::cite_bibtex(page=page) }}
@@ -82,9 +77,8 @@

Cite this post

{% endmacro render %} -{# apa #} {% macro cite_apa(page) %} -{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} +{%- if page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} {%- set authors = page.taxonomies.author | join(sep=", ") -%} {%- else -%} {%- set authors = "Matrix.org" -%} @@ -98,9 +92,8 @@

Cite this post

{%- endmacro cite_apa %} -{# mla #} {% macro cite_mla(page) %} -{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} +{%- if page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} {%- set authors = page.taxonomies.author | join(sep=", ") -%} {%- else -%} {%- set authors = "Matrix.org" -%} @@ -114,9 +107,8 @@

Cite this post

{%- endmacro cite_mla %} -{# chicago #} {% macro cite_chicago(page) %} -{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} +{%- if page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} {%- set authors = page.taxonomies.author | join(sep=", ") -%} {%- else -%} {%- set authors = "Matrix.org" -%} @@ -130,9 +122,8 @@

Cite this post

{%- endmacro cite_chicago %} -{# harvard #} {% macro cite_harvard(page) %} -{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} +{%- if page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} {%- set authors = page.taxonomies.author | join(sep=", ") -%} {%- else -%} {%- set authors = "Matrix.org" -%} @@ -148,9 +139,8 @@

Cite this post

{%- endmacro cite_harvard %} -{# bibtex #} {% macro cite_bibtex(page) %} -{%- if page.taxonomies is defined and page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} +{%- if page.taxonomies.author is defined and page.taxonomies.author | length > 0 -%} {%- set authors = page.taxonomies.author | join(sep=" and ") -%} {%- else -%} {%- set authors = "Matrix.org" -%} From 596f0387a85fa808350566863644df8f952d79bc Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Fri, 17 Apr 2026 19:18:38 +0600 Subject: [PATCH 5/9] Updated the copyright text. Signed-off-by: Syed Ishmum Ahnaf syedishmum15@gmail.com --- sass/_citation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/_citation.scss b/sass/_citation.scss index a97bf2c73..ce7a72fcf 100644 --- a/sass/_citation.scss +++ b/sass/_citation.scss @@ -1,6 +1,6 @@ /* * SPDX-FileCopyrightText: 2026 The Matrix.org Foundation C.I.C. - * SPDX-FileContributor: awtj8o81ryywg793 <181536874+awtj8o81ryywg793@users.noreply.github.com> + * SPDX-FileContributor: Syed Ishmum Ahnaf * * SPDX-License-Identifier: Apache-2.0 */ From a5c53b0f8640d3cb991ac4771eda45cd76e9fdb0 Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Sat, 25 Apr 2026 17:24:05 +0600 Subject: [PATCH 6/9] feat(citation): added copy-to-clipboard enhancement. Signed-off-by: Syed Ishmum Ahnaf syedishmum15@gmail.com --- sass/_citation.scss | 36 +++++++++++++++++++ static/js/citation.js | 63 ++++++++++++++++++++++++++++++++++ templates/macros/citation.html | 20 +++++++++++ templates/post.html | 1 + 4 files changed, 120 insertions(+) create mode 100644 static/js/citation.js diff --git a/sass/_citation.scss b/sass/_citation.scss index ce7a72fcf..101905399 100644 --- a/sass/_citation.scss +++ b/sass/_citation.scss @@ -121,6 +121,42 @@ display: none; } +.cite-copy-controls { + display: none; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + margin-bottom: 0.5rem; +} + +.citation.cite-copy-enabled .cite-copy-controls { + display: flex; +} + +.cite-copy-btn { + appearance: none; + border: 1px solid var(--borders-color); + border-radius: 4px; + background: #fff; + color: var(--color-text); + cursor: pointer; + font: inherit; + font-size: 0.78rem; + line-height: 1.2; + padding: 0.3rem 0.7rem; + + &:hover { + border-color: var(--color-link); + color: var(--color-link); + } +} + +.cite-copy-status { + color: var(--color-text-light); + font-size: 0.78rem; + min-height: 1em; +} + [id$="-apa"]:checked { ~ [for$="-apa"].cite-format-tab { border-color: var(--color-link); diff --git a/static/js/citation.js b/static/js/citation.js new file mode 100644 index 000000000..0f7b1dfed --- /dev/null +++ b/static/js/citation.js @@ -0,0 +1,63 @@ +/* + * SPDX-FileCopyrightText: 2026 The Matrix.org Foundation C.I.C. + * SPDX-FileContributor: Syed Ishmum Ahnaf + * + * SPDX-License-Identifier: Apache-2.0 + */ + +const RESET_DELAY_MS = 2000; + +function resetCopyFeedback(button, status, timeoutId) { + button.textContent = "Copy"; + status.textContent = ""; + if (timeoutId !== undefined) { + window.clearTimeout(timeoutId); + } +} + +function scheduleReset(button, status) { + const existingTimeoutId = button.dataset.resetTimeoutId; + if (existingTimeoutId !== undefined) { + window.clearTimeout(Number(existingTimeoutId)); + } + + const timeoutId = window.setTimeout(() => { + resetCopyFeedback(button, status); + delete button.dataset.resetTimeoutId; + }, RESET_DELAY_MS); + + button.dataset.resetTimeoutId = String(timeoutId); +} + +function enableCitationCopy(citation) { + citation.classList.add("cite-copy-enabled"); + + for (const button of citation.querySelectorAll("[data-cite-copy]")) { + button.addEventListener("click", async () => { + const panel = button.closest(".cite-panel"); + const text = panel?.querySelector(".cite-text"); + const status = panel?.querySelector(".cite-copy-status"); + + if (!text || !status) { + return; + } + + try { + await navigator.clipboard.writeText(text.textContent.trim()); + button.textContent = "Copied"; + status.textContent = "Copied"; + } catch (error) { + button.textContent = "Copy"; + status.textContent = "Copy failed"; + } + + scheduleReset(button, status); + }); + } +} + +if (window.isSecureContext && navigator.clipboard?.writeText) { + for (const citation of document.querySelectorAll(".citation")) { + enableCitationCopy(citation); + } +} diff --git a/templates/macros/citation.html b/templates/macros/citation.html index 7fcf3d38e..446c73f05 100644 --- a/templates/macros/citation.html +++ b/templates/macros/citation.html @@ -48,22 +48,42 @@

Cite this post

{% endfor %}
+
+ + + 
{{ self::cite_apa(page=page) }}
+
+ + + 
{{ self::cite_mla(page=page) }}
+
+ + + 
{{ self::cite_chicago(page=page) }}
+
+ + + 
{{ self::cite_harvard(page=page) }}
+
+ + + 
{{ self::cite_bibtex(page=page) }}
diff --git a/templates/post.html b/templates/post.html index 7246d7e3b..ebf278a8d 100644 --- a/templates/post.html +++ b/templates/post.html @@ -43,6 +43,7 @@ ] } + {% endblock head_extra %} {% block content %} From 51bf89c041122cf54b71325982863429b9bda419 Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Sun, 26 Apr 2026 23:15:32 +0600 Subject: [PATCH 7/9] refactor(citation): deduplicated panels and consolidated copy controls to render .cite-panel via loops. Now, using one single copy button, which matches styling with .call-to-action, below citation text. Preserved no-JS fallback. Signed-off-by: Syed Ishmum Ahnaf syedishmum15@gmail.com --- sass/_citation.scss | 24 ++------------- static/js/citation.js | 49 ++++++++++++++++------------- templates/macros/citation.html | 56 ++++++++++++---------------------- 3 files changed, 50 insertions(+), 79 deletions(-) diff --git a/sass/_citation.scss b/sass/_citation.scss index 101905399..5004e616b 100644 --- a/sass/_citation.scss +++ b/sass/_citation.scss @@ -124,33 +124,15 @@ .cite-copy-controls { display: none; align-items: center; - justify-content: space-between; - gap: 0.75rem; - margin-bottom: 0.5rem; + gap: 0.5rem; + flex-wrap: wrap; + margin-top: 0.5rem; } .citation.cite-copy-enabled .cite-copy-controls { display: flex; } -.cite-copy-btn { - appearance: none; - border: 1px solid var(--borders-color); - border-radius: 4px; - background: #fff; - color: var(--color-text); - cursor: pointer; - font: inherit; - font-size: 0.78rem; - line-height: 1.2; - padding: 0.3rem 0.7rem; - - &:hover { - border-color: var(--color-link); - color: var(--color-link); - } -} - .cite-copy-status { color: var(--color-text-light); font-size: 0.78rem; diff --git a/static/js/citation.js b/static/js/citation.js index 0f7b1dfed..d70ab92a1 100644 --- a/static/js/citation.js +++ b/static/js/citation.js @@ -30,30 +30,35 @@ function scheduleReset(button, status) { } function enableCitationCopy(citation) { - citation.classList.add("cite-copy-enabled"); + const button = citation.querySelector("[data-cite-copy]"); + const status = citation.querySelector(".cite-copy-status"); - for (const button of citation.querySelectorAll("[data-cite-copy]")) { - button.addEventListener("click", async () => { - const panel = button.closest(".cite-panel"); - const text = panel?.querySelector(".cite-text"); - const status = panel?.querySelector(".cite-copy-status"); - - if (!text || !status) { - return; - } - - try { - await navigator.clipboard.writeText(text.textContent.trim()); - button.textContent = "Copied"; - status.textContent = "Copied"; - } catch (error) { - button.textContent = "Copy"; - status.textContent = "Copy failed"; - } - - scheduleReset(button, status); - }); + if (!button || !status) { + return; } + + citation.classList.add("cite-copy-enabled"); + + button.addEventListener("click", async () => { + const checkedRadio = citation.querySelector(".cite-format-radio:checked"); + const activeFormat = checkedRadio?.dataset.citeFormat; + const text = citation.querySelector(`[data-cite-panel="${activeFormat}"] .cite-text`); + + if (!activeFormat || !text) { + return; + } + + try { + await navigator.clipboard.writeText(text.textContent.trim()); + button.textContent = "Copied"; + status.textContent = "Copied"; + } catch (error) { + button.textContent = "Copy"; + status.textContent = "Copy failed"; + } + + scheduleReset(button, status); + }); } if (window.isSecureContext && navigator.clipboard?.writeText) { diff --git a/templates/macros/citation.html b/templates/macros/citation.html index 446c73f05..58de2c452 100644 --- a/templates/macros/citation.html +++ b/templates/macros/citation.html @@ -39,6 +39,7 @@

Cite this post

type="radio" name="{{ cb_id }}-format" class="cite-format-radio" + data-cite-format="{{ fmt }}" {% if loop.first %}checked{% endif %} aria-hidden="true" > @@ -47,44 +48,27 @@

Cite this post

{% endfor %} -
-
- - -
- 
{{ self::cite_apa(page=page) }}
-
- -
-
- - -
- 
{{ self::cite_mla(page=page) }}
-
- -
-
- - -
- 
{{ self::cite_chicago(page=page) }}
-
- -
-
- - -
- 
{{ self::cite_harvard(page=page) }}
+ {% for fmt in formats %} +
+ 
+                    {%- if fmt == "apa" -%}
+                        {{ self::cite_apa(page=page) }}
+                    {%- elif fmt == "mla" -%}
+                        {{ self::cite_mla(page=page) }}
+                    {%- elif fmt == "chicago" -%}
+                        {{ self::cite_chicago(page=page) }}
+                    {%- elif fmt == "harvard" -%}
+                        {{ self::cite_harvard(page=page) }}
+                    {%- elif fmt == "bibtex" -%}
+                        {{ self::cite_bibtex(page=page) }}
+                    {%- endif -%}
+
+ {% endfor %} -
-
- - -
- 
{{ self::cite_bibtex(page=page) }}
+
+ +
From 6d23c0fcfc0e52882d37547bf422eef40d6d5322 Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Tue, 28 Apr 2026 22:19:37 +0600 Subject: [PATCH 8/9] fix(citation): align button feedback with suggestions. Summary: kept copy status in the adjacent status element only and preserved Copy button label after clipboard action. Also, applied compact pill styling and using call-to-action styling for the copy button. Signed-off-by: Syed Ishmum Ahnaf --- sass/_citation.scss | 37 ++++++++++++++++++++++------------ static/js/citation.js | 3 --- templates/macros/citation.html | 2 +- 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/sass/_citation.scss b/sass/_citation.scss index 5004e616b..17d6532ff 100644 --- a/sass/_citation.scss +++ b/sass/_citation.scss @@ -17,19 +17,28 @@ .cite-btn { display: inline-block; - padding: 0.2rem 0.7rem; - font-size: 0.82rem; - border: 1px solid var(--color-link); - border-radius: 4px; - color: var(--color-link); + font-size: 0.78rem; + font-weight: 600; + color: var(--color-text); + background-color: #f0f0f0; + border: 1px solid #d2d2d2; + border-radius: 9999px; + padding: 0.3rem 0.9rem; + text-decoration: none; cursor: pointer; + transition: background-color 0.15s ease, border-color 0.15s ease; &:hover { - background-color: var(--color-link); - color: #fff; + background-color: #e4e4e4; + border-color: #aaa; } } +.cite-copy-btn { + font-size: 0.78rem; + cursor: pointer; +} + // overlay .cite-overlay { @@ -100,16 +109,18 @@ } .cite-format-tab { - display: inline-block; - padding: 0.25rem 0.6rem; margin-right: 0.25rem; margin-bottom: 0.5rem; + cursor: pointer; + display: inline-block; font-size: 0.78rem; font-weight: 600; - border: 1px solid var(--borders-color); - border-radius: 4px; - cursor: pointer; - color: var(--color-text-light); + background-color: #f0f0f0; + border: 1px solid #d2d2d2; + border-radius: 9999px; + padding: 0.3rem 0.9rem; + text-decoration: none; + transition: background-color 0.15s ease, border-color 0.15s ease; &:hover { border-color: var(--color-link); diff --git a/static/js/citation.js b/static/js/citation.js index d70ab92a1..8fd299827 100644 --- a/static/js/citation.js +++ b/static/js/citation.js @@ -8,7 +8,6 @@ const RESET_DELAY_MS = 2000; function resetCopyFeedback(button, status, timeoutId) { - button.textContent = "Copy"; status.textContent = ""; if (timeoutId !== undefined) { window.clearTimeout(timeoutId); @@ -50,10 +49,8 @@ function enableCitationCopy(citation) { try { await navigator.clipboard.writeText(text.textContent.trim()); - button.textContent = "Copied"; status.textContent = "Copied"; } catch (error) { - button.textContent = "Copy"; status.textContent = "Copy failed"; } diff --git a/templates/macros/citation.html b/templates/macros/citation.html index 58de2c452..0a0ea7a38 100644 --- a/templates/macros/citation.html +++ b/templates/macros/citation.html @@ -67,7 +67,7 @@

Cite this post

{% endfor %}
- +
From 1ce793d0aba6fdbaecbeeb87eb1f259ee92dffbb Mon Sep 17 00:00:00 2001 From: Syed Ishmum Ahnaf Date: Wed, 27 May 2026 16:35:29 +0600 Subject: [PATCH 9/9] refactor(citation): use popover with vertical citation list Signed-off-by: Syed Ishmum Ahnaf --- sass/_citation.scss | 175 ++++++++------------------------- static/js/citation.js | 41 ++++---- templates/macros/citation.html | 56 ++++------- 3 files changed, 79 insertions(+), 193 deletions(-) diff --git a/sass/_citation.scss b/sass/_citation.scss index 17d6532ff..b85cd0dd7 100644 --- a/sass/_citation.scss +++ b/sass/_citation.scss @@ -5,11 +5,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -.cite-checkbox, -.cite-format-radio { - display: none; -} - .citation { display: inline-block; margin-top: 0.5rem; @@ -34,44 +29,32 @@ } } -.cite-copy-btn { - font-size: 0.78rem; - cursor: pointer; -} - -// overlay - -.cite-overlay { - display: none; - position: fixed; - inset: 0; - z-index: 400; - background: rgba(0, 0, 0, 0.5); - cursor: default; -} - -// modal - .cite-modal { - display: none; - position: fixed; - inset: 0; - z-index: 800; - pointer-events: none; - align-items: center; - justify-content: center; + inset: 50% auto auto 50%; + width: min(90vw, 640px); + max-height: min(90vh, 44rem); + margin: 0; + padding: 0; + color: var(--color-text); + background: transparent; + border: 0; + overflow: visible; + transform: translate(-50%, -50%); + + &::backdrop { + background: rgba(0, 0, 0, 0.5); + } } .cite-modal__box { position: relative; + max-height: min(90vh, 44rem); + overflow-y: auto; background: #fff; border: 1px solid var(--borders-color); border-radius: 8px; padding: 1.5rem; - max-width: 560px; - width: 90%; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); - pointer-events: auto; h3 { margin-top: 0; @@ -82,54 +65,37 @@ position: absolute; top: 0.75rem; right: 1rem; - font-size: 1.25rem; + padding: 0; color: var(--color-text-light); - cursor: pointer; + background: transparent; + border: 0; + font: inherit; + font-size: 1.25rem; line-height: 1; + cursor: pointer; &:hover { color: var(--color-text); } } -.cite-checkbox:checked { - ~ .cite-overlay { - display: block; - } - - ~ .cite-modal { - display: flex; - } -} - -// tabs - .cite-formats { + display: grid; + gap: 1rem; margin-top: 1rem; } -.cite-format-tab { - margin-right: 0.25rem; - margin-bottom: 0.5rem; - cursor: pointer; - display: inline-block; - font-size: 0.78rem; - font-weight: 600; - background-color: #f0f0f0; - border: 1px solid #d2d2d2; - border-radius: 9999px; - padding: 0.3rem 0.9rem; - text-decoration: none; - transition: background-color 0.15s ease, border-color 0.15s ease; - - &:hover { - border-color: var(--color-link); - color: var(--color-link); - } +.cite-panel { + display: grid; + gap: 0.5rem; } -.cite-panel { - display: none; +.cite-panel__heading { + margin: 0; + color: var(--color-text); + font-size: 0.78rem; + font-weight: 700; + line-height: 1.3; } .cite-copy-controls { @@ -137,86 +103,23 @@ align-items: center; gap: 0.5rem; flex-wrap: wrap; - margin-top: 0.5rem; } .citation.cite-copy-enabled .cite-copy-controls { display: flex; } +.cite-copy-btn { + font-size: 0.78rem; + cursor: pointer; +} + .cite-copy-status { color: var(--color-text-light); font-size: 0.78rem; min-height: 1em; } -[id$="-apa"]:checked { - ~ [for$="-apa"].cite-format-tab { - border-color: var(--color-link); - color: var(--color-link); - background-color: rgba(0, 152, 212, 0.08); - } - - ~ .cite-formats .cite-panel--apa, - ~ .cite-panel--apa { - display: block; - } -} - -[id$="-mla"]:checked { - ~ [for$="-mla"].cite-format-tab { - border-color: var(--color-link); - color: var(--color-link); - background-color: rgba(0, 152, 212, 0.08); - } - - ~ .cite-formats .cite-panel--mla, - ~ .cite-panel--mla { - display: block; - } -} - -[id$="-chicago"]:checked { - ~ [for$="-chicago"].cite-format-tab { - border-color: var(--color-link); - color: var(--color-link); - background-color: rgba(0, 152, 212, 0.08); - } - - ~ .cite-formats .cite-panel--chicago, - ~ .cite-panel--chicago { - display: block; - } -} - -[id$="-harvard"]:checked { - ~ [for$="-harvard"].cite-format-tab { - border-color: var(--color-link); - color: var(--color-link); - background-color: rgba(0, 152, 212, 0.08); - } - - ~ .cite-formats .cite-panel--harvard, - ~ .cite-panel--harvard { - display: block; - } -} - -[id$="-bibtex"]:checked { - ~ [for$="-bibtex"].cite-format-tab { - border-color: var(--color-link); - color: var(--color-link); - background-color: rgba(0, 152, 212, 0.08); - } - - ~ .cite-formats .cite-panel--bibtex, - ~ .cite-panel--bibtex { - display: block; - } -} - -// text - .cite-text { font-family: monospace; font-size: 0.82rem; @@ -227,6 +130,6 @@ border-radius: 4px; background: #f9f9f9; white-space: pre-wrap; - word-break: break-all; + word-break: break-word; color: var(--color-text); } diff --git a/static/js/citation.js b/static/js/citation.js index 8fd299827..707fd5ce5 100644 --- a/static/js/citation.js +++ b/static/js/citation.js @@ -7,7 +7,7 @@ const RESET_DELAY_MS = 2000; -function resetCopyFeedback(button, status, timeoutId) { +function resetCopyFeedback(status, timeoutId) { status.textContent = ""; if (timeoutId !== undefined) { window.clearTimeout(timeoutId); @@ -21,7 +21,7 @@ function scheduleReset(button, status) { } const timeoutId = window.setTimeout(() => { - resetCopyFeedback(button, status); + resetCopyFeedback(status); delete button.dataset.resetTimeoutId; }, RESET_DELAY_MS); @@ -29,33 +29,34 @@ function scheduleReset(button, status) { } function enableCitationCopy(citation) { - const button = citation.querySelector("[data-cite-copy]"); - const status = citation.querySelector(".cite-copy-status"); + const buttons = citation.querySelectorAll("[data-cite-copy]"); - if (!button || !status) { + if (buttons.length === 0) { return; } citation.classList.add("cite-copy-enabled"); - button.addEventListener("click", async () => { - const checkedRadio = citation.querySelector(".cite-format-radio:checked"); - const activeFormat = checkedRadio?.dataset.citeFormat; - const text = citation.querySelector(`[data-cite-panel="${activeFormat}"] .cite-text`); + for (const button of buttons) { + button.addEventListener("click", async () => { + const panel = button.closest("[data-cite-panel]"); + const text = panel?.querySelector(".cite-text"); + const status = panel?.querySelector(".cite-copy-status"); - if (!activeFormat || !text) { - return; - } + if (!text || !status) { + return; + } - try { - await navigator.clipboard.writeText(text.textContent.trim()); - status.textContent = "Copied"; - } catch (error) { - status.textContent = "Copy failed"; - } + try { + await navigator.clipboard.writeText(text.textContent.trim()); + status.textContent = "Copied"; + } catch (error) { + status.textContent = "Copy failed"; + } - scheduleReset(button, status); - }); + scheduleReset(button, status); + }); + } } if (window.isSecureContext && navigator.clipboard?.writeText) { diff --git a/templates/macros/citation.html b/templates/macros/citation.html index 0a0ea7a38..2a0bbd990 100644 --- a/templates/macros/citation.html +++ b/templates/macros/citation.html @@ -3,53 +3,35 @@ {% macro render(page) %} {# unique id #} -{% set cb_id = "cite-toggle-" ~ page.slug %} +{% set cb_id = "cite-popover-" ~ page.slug %} +{% set formats = ["apa", "mla", "chicago", "harvard", "bibtex"] %}
- - -