datalog-theme 0.6.0

data/_includes/components/api-function.html

@@ -0,0 +1,94 @@
+{%- comment -%}
+API Function Documentation Component
+Documents a function/method in ReadTheDocs style
+
+Parameters:
+  - name: Function name
+  - signature: Function signature
+  - description: Function description
+  - parameters: Array of parameter objects {name, type, description, default}
+  - returns: Return value description
+  - return_type: Return type
+  - examples: Code examples
+  - see_also: Related functions
+{%- endcomment -%}
+
+<div class="api-function" id="{{ include.name | slugify }}">
+  <div class="api-function__header">
+    <h3 class="api-function__name">
+      <code>{{ include.name }}</code>
+    </h3>
+    {% if include.signature %}
+      <pre class="api-function__signature"><code>{{ include.signature }}</code></pre>
+    {% endif %}
+  </div>
+
+  {% if include.description %}
+    <div class="api-function__description">
+      {{ include.description | markdownify }}
+    </div>
+  {% endif %}
+
+  {% if include.parameters %}
+    <div class="api-function__section">
+      <h4 class="api-function__section-title">Parameters</h4>
+      <dl class="api-function__params">
+        {% for param in include.parameters %}
+          <div class="api-function__param">
+            <dt class="api-function__param-name">
+              <code>{{ param.name }}</code>
+              {% if param.type %}
+                <span class="api-function__param-type">{{ param.type }}</span>
+              {% endif %}
+              {% if param.default %}
+                <span class="api-function__param-default">= {{ param.default }}</span>
+              {% endif %}
+              {% if param.optional %}
+                <span class="api-function__param-badge">optional</span>
+              {% endif %}
+            </dt>
+            <dd class="api-function__param-desc">
+              {{ param.description | markdownify }}
+            </dd>
+          </div>
+        {% endfor %}
+      </dl>
+    </div>
+  {% endif %}
+
+  {% if include.returns or include.return_type %}
+    <div class="api-function__section">
+      <h4 class="api-function__section-title">Returns</h4>
+      <div class="api-function__returns">
+        {% if include.return_type %}
+          <span class="api-function__return-type">{{ include.return_type }}</span>
+        {% endif %}
+        {% if include.returns %}
+          <p>{{ include.returns | markdownify }}</p>
+        {% endif %}
+      </div>
+    </div>
+  {% endif %}
+
+  {% if include.examples %}
+    <div class="api-function__section">
+      <h4 class="api-function__section-title">Examples</h4>
+      <div class="api-function__examples">
+        {{ include.examples | markdownify }}
+      </div>
+    </div>
+  {% endif %}
+
+  {% if include.see_also %}
+    <div class="api-function__section">
+      <h4 class="api-function__section-title">See Also</h4>
+      <ul class="api-function__see-also">
+        {% for item in include.see_also %}
+          <li>
+            <a href="#{{ item | slugify }}"><code>{{ item }}</code></a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
+</div>

data/_includes/components/author-bio.html

@@ -0,0 +1,166 @@
+{%- comment -%}
+Author bio card with social links and credentials
+Parameters:
+  - author: Author name (default: page.author or site.author.name)
+  - show_avatar: Show author avatar (default: true)
+  - show_social: Show social links (default: true)
+  - compact: Compact layout (default: false)
+{%- endcomment -%}
+
+{%- assign author_name = include.author | default: page.author | default: site.author.name -%}
+{%- assign show_avatar = include.show_avatar | default: true -%}
+{%- assign show_social = include.show_social | default: true -%}
+{%- assign compact = include.compact | default: false -%}
+
+{%- comment -%} Get author details from site.data.authors or site.author {%- endcomment -%}
+{%- if site.data.authors and site.data.authors[author_name] -%}
+  {%- assign author_data = site.data.authors[author_name] -%}
+{%- else -%}
+  {%- assign author_data = site.author -%}
+{%- endif -%}
+
+<aside class="author-bio{% if compact %} author-bio--compact{% endif %}" itemscope itemtype="https://schema.org/Person">
+  <div class="author-bio__inner">
+    {%- if show_avatar -%}
+      <div class="author-bio__avatar">
+        {%- if author_data.avatar or author_data.image -%}
+          <img src="{{ author_data.avatar | default: author_data.image | relative_url }}"
+               alt="{{ author_name }}"
+               itemprop="image"
+               class="author-bio__avatar-img"
+               loading="lazy"
+               width="80"
+               height="80">
+        {%- else -%}
+          {%- comment -%} Fallback avatar with initials {%- endcomment -%}
+          {%- assign initials = author_name | split: ' ' | map: 'first' | slice: 0, 2 | join: '' | upcase -%}
+          <div class="author-bio__avatar-placeholder" aria-label="{{ author_name }}">
+            <span>{{ initials }}</span>
+          </div>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+
+    <div class="author-bio__content">
+      <h3 class="author-bio__name" itemprop="name">{{ author_name }}</h3>
+
+      {%- if author_data.affiliation -%}
+        <p class="author-bio__affiliation" itemprop="affiliation">
+          {{ author_data.affiliation }}
+        </p>
+      {%- endif -%}
+
+      {%- if author_data.biography or author_data.bio -%}
+        <p class="author-bio__description" itemprop="description">
+          {{ author_data.biography | default: author_data.bio }}
+        </p>
+      {%- endif -%}
+
+      {%- if author_data.research_areas and author_data.research_areas.size > 0 -%}
+        <div class="author-bio__research">
+          <strong class="author-bio__research-label">Research interests:</strong>
+          <span class="author-bio__research-list">{{ author_data.research_areas | join: ', ' }}</span>
+        </div>
+      {%- endif -%}
+
+      {%- if show_social -%}
+        <ul class="author-bio__social">
+          {%- if author_data.email -%}
+            <li>
+              <a href="mailto:{{ author_data.email }}"
+                 class="author-bio__social-link author-bio__social-link--email"
+                 itemprop="email"
+                 aria-label="Email {{ author_name }}">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                  <polyline points="22,6 12,13 2,6"></polyline>
+                </svg>
+                <span class="visually-hidden">Email</span>
+              </a>
+            </li>
+          {%- endif -%}
+
+          {%- if author_data.github -%}
+            <li>
+              <a href="https://github.com/{{ author_data.github }}"
+                 class="author-bio__social-link author-bio__social-link--github"
+                 target="_blank"
+                 rel="noopener noreferrer"
+                 itemprop="sameAs"
+                 aria-label="{{ author_name }} on GitHub">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+                <span class="visually-hidden">GitHub</span>
+              </a>
+            </li>
+          {%- endif -%}
+
+          {%- if author_data.twitter -%}
+            <li>
+              <a href="https://twitter.com/{{ author_data.twitter }}"
+                 class="author-bio__social-link author-bio__social-link--twitter"
+                 target="_blank"
+                 rel="noopener noreferrer"
+                 itemprop="sameAs"
+                 aria-label="{{ author_name }} on Twitter">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+                </svg>
+                <span class="visually-hidden">Twitter</span>
+              </a>
+            </li>
+          {%- endif -%}
+
+          {%- if author_data.linkedin -%}
+            <li>
+              <a href="https://linkedin.com/in/{{ author_data.linkedin }}"
+                 class="author-bio__social-link author-bio__social-link--linkedin"
+                 target="_blank"
+                 rel="noopener noreferrer"
+                 itemprop="sameAs"
+                 aria-label="{{ author_name }} on LinkedIn">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                </svg>
+                <span class="visually-hidden">LinkedIn</span>
+              </a>
+            </li>
+          {%- endif -%}
+
+          {%- if author_data.orcid -%}
+            <li>
+              <a href="{{ author_data.orcid }}"
+                 class="author-bio__social-link author-bio__social-link--orcid"
+                 target="_blank"
+                 rel="noopener noreferrer"
+                 itemprop="sameAs"
+                 aria-label="{{ author_name }} ORCID profile">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.369 4.378c.525 0 .947.431.947.947s-.422.947-.947.947a.95.95 0 0 1-.947-.947c0-.525.422-.947.947-.947zm-.722 3.038h1.444v10.041H6.647V7.416zm3.562 0h3.9c3.712 0 5.344 2.653 5.344 5.025 0 2.578-2.016 5.016-5.325 5.016h-3.919V7.416zm1.444 1.303v7.444h2.297c2.359 0 4.053-1.666 4.053-3.722 0-2.056-1.694-3.722-4.053-3.722h-2.297z"/>
+                </svg>
+                <span class="visually-hidden">ORCID</span>
+              </a>
+            </li>
+          {%- endif -%}
+
+          {%- if author_data.google_scholar -%}
+            <li>
+              <a href="{{ author_data.google_scholar }}"
+                 class="author-bio__social-link author-bio__social-link--scholar"
+                 target="_blank"
+                 rel="noopener noreferrer"
+                 itemprop="sameAs"
+                 aria-label="{{ author_name }} Google Scholar profile">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M12 24a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-24L0 9.5l4.838 3.94A8 8 0 0 1 12 9a8 8 0 0 1 7.162 4.44L24 9.5z"/>
+                </svg>
+                <span class="visually-hidden">Google Scholar</span>
+              </a>
+            </li>
+          {%- endif -%}
+        </ul>
+      {%- endif -%}
+    </div>
+  </div>
+</aside>

data/_includes/components/bookmark-system.html

@@ -0,0 +1,96 @@
+{%- comment -%}
+Bookmark System - Save posts for later reading
+{%- endcomment -%}
+
+<div class="bookmark-system" data-bookmark-system>
+  <button type="button"
+          class="bookmark-button"
+          data-bookmark-toggle
+          data-post-id="{{ page.id | slugify }}"
+          data-post-title="{{ page.title }}"
+          data-post-url="{{ page.url | relative_url }}"
+          aria-label="Bookmark this post">
+    <svg class="bookmark-button__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+    </svg>
+    <span class="bookmark-button__text" data-bookmark-text>Save for later</span>
+  </button>
+
+  <div class="bookmark-panel" data-bookmark-panel hidden>
+    <h3>Your Bookmarks</h3>
+    <div class="bookmark-list" data-bookmark-list></div>
+    <button type="button" data-clear-bookmarks>Clear all</button>
+  </div>
+</div>
+
+<script>
+(function() {
+  'use strict';
+  const STORAGE_KEY = 'bookmarks';
+
+  class BookmarkSystem {
+    constructor() {
+      this.bookmarks = this.loadBookmarks();
+      this.init();
+    }
+
+    init() {
+      const toggleBtn = document.querySelector('[data-bookmark-toggle]');
+      if (!toggleBtn) return;
+
+      const postId = toggleBtn.dataset.postId;
+      this.updateButtonState(toggleBtn, postId);
+
+      toggleBtn.addEventListener('click', () => {
+        const {postId, postTitle, postUrl} = toggleBtn.dataset;
+        this.toggleBookmark({id: postId, title: postTitle, url: postUrl});
+      });
+    }
+
+    toggleBookmark(post) {
+      const index = this.bookmarks.findIndex(b => b.id === post.id);
+      if (index > -1) {
+        this.bookmarks.splice(index, 1);
+      } else {
+        this.bookmarks.push({...post, date: new Date().toISOString()});
+      }
+      this.saveBookmarks();
+      this.updateButtonState(document.querySelector('[data-bookmark-toggle]'), post.id);
+    }
+
+    updateButtonState(btn, postId) {
+      const isBookmarked = this.bookmarks.some(b => b.id === postId);
+      const text = btn.querySelector('[data-bookmark-text]');
+      const icon = btn.querySelector('.bookmark-button__icon');
+
+      if (isBookmarked) {
+        btn.classList.add('bookmark-button--active');
+        if (text) text.textContent = 'Saved';
+        if (icon) icon.style.fill = 'currentColor';
+      } else {
+        btn.classList.remove('bookmark-button--active');
+        if (text) text.textContent = 'Save for later';
+        if (icon) icon.style.fill = 'none';
+      }
+    }
+
+    loadBookmarks() {
+      try {
+        return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+      } catch (e) {
+        return [];
+      }
+    }
+
+    saveBookmarks() {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(this.bookmarks));
+      } catch (e) {
+        console.error('Failed to save bookmarks:', e);
+      }
+    }
+  }
+
+  new BookmarkSystem();
+})();
+</script>

data/_includes/components/breadcrumbs.html

@@ -0,0 +1,89 @@
+{%- comment -%}
+Breadcrumb navigation for better orientation
+Automatically generates breadcrumbs based on page location and categories
+Parameters:
+  - show_current: Show current page in breadcrumbs (default: true)
+  - separator: Custom separator (default: / )
+{%- endcomment -%}
+
+{%- assign show_current = include.show_current | default: true -%}
+{%- assign separator = include.separator | default: " / " -%}
+
+<nav class="breadcrumbs" aria-label="Breadcrumb">
+  <ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
+    {%- comment -%} Home link {%- endcomment -%}
+    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+      <a href="{{ '/' | relative_url }}" class="breadcrumbs__link" itemprop="item">
+        <span itemprop="name">Home</span>
+      </a>
+      <meta itemprop="position" content="1" />
+      <span class="breadcrumbs__separator" aria-hidden="true">{{ separator }}</span>
+    </li>
+
+    {%- comment -%} Collection/Section {%- endcomment -%}
+    {%- if page.collection -%}
+      {%- assign position = 2 -%}
+      {%- case page.collection -%}
+        {%- when 'posts' -%}
+          <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+            <a href="{{ '/blog' | relative_url }}" class="breadcrumbs__link" itemprop="item">
+              <span itemprop="name">Blog</span>
+            </a>
+            <meta itemprop="position" content="{{ position }}" />
+            <span class="breadcrumbs__separator" aria-hidden="true">{{ separator }}</span>
+          </li>
+        {%- when 'portfolio' -%}
+          <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+            <a href="{{ '/portfolio' | relative_url }}" class="breadcrumbs__link" itemprop="item">
+              <span itemprop="name">Portfolio</span>
+            </a>
+            <meta itemprop="position" content="{{ position }}" />
+            <span class="breadcrumbs__separator" aria-hidden="true">{{ separator }}</span>
+          </li>
+        {%- when 'datasets' -%}
+          <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+            <a href="{{ '/datasets' | relative_url }}" class="breadcrumbs__link" itemprop="item">
+              <span itemprop="name">Datasets</span>
+            </a>
+            <meta itemprop="position" content="{{ position }}" />
+            <span class="breadcrumbs__separator" aria-hidden="true">{{ separator }}</span>
+          </li>
+        {%- when 'notebooks' -%}
+          <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+            <a href="{{ '/notebooks' | relative_url }}" class="breadcrumbs__link" itemprop="item">
+              <span itemprop="name">Notebooks</span>
+            </a>
+            <meta itemprop="position" content="{{ position }}" />
+            <span class="breadcrumbs__separator" aria-hidden="true">{{ separator }}</span>
+          </li>
+      {%- endcase -%}
+      {%- assign position = position | plus: 1 -%}
+    {%- endif -%}
+
+    {%- comment -%} Category (if exists) {%- endcomment -%}
+    {%- if page.categories and page.categories.size > 0 -%}
+      {%- assign main_category = page.categories | first -%}
+      {%- assign category_slug = main_category | slugify -%}
+      {%- unless position -%}{%- assign position = 2 -%}{%- endunless -%}
+      <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
+        <a href="{{ site.category_archive.path | default: '/categories/' | append: '#' | append: category_slug | relative_url }}" class="breadcrumbs__link" itemprop="item">
+          <span itemprop="name">{{ main_category }}</span>
+        </a>
+        <meta itemprop="position" content="{{ position }}" />
+        <span class="breadcrumbs__separator" aria-hidden="true">{{ separator }}</span>
+      </li>
+      {%- assign position = position | plus: 1 -%}
+    {%- endif -%}
+
+    {%- comment -%} Current page {%- endcomment -%}
+    {%- if show_current -%}
+      {%- unless position -%}{%- assign position = 2 -%}{%- endunless -%}
+      <li class="breadcrumbs__item breadcrumbs__item--current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
+        <span class="breadcrumbs__current" itemprop="item">
+          <span itemprop="name">{{ page.title | truncate: 50 }}</span>
+        </span>
+        <meta itemprop="position" content="{{ position }}" />
+      </li>
+    {%- endif -%}
+  </ol>
+</nav>

data/_includes/components/citation-tools.html

@@ -0,0 +1,94 @@
+{% assign citation_title = include.title | default: page.title | default: site.title %}
+{% assign citation_url = include.url | default: page.url | default: '/' | absolute_url %}
+{% assign citation_date = include.date | default: page.date %}
+{% assign citation_year = citation_date | date: '%Y' %}
+{% assign authors_source = include.authors | default: page.authors | default: page.author | default: site.author.name %}
+{% assign authors_array = authors_source | arrayify %}
+{% assign publisher = include.publisher | default: site.author.affiliation | default: site.title %}
+{% assign doi = include.doi | default: page.doi %}
+{% assign citation_type = include.citation_type | default: include.type | default: 'article' %}
+{% assign citation_key = include.citation_key | default: page.citation_key | default: page.slug | default: citation_title | slugify %}
+{% capture author_line %}
+  {% for author in authors_array %}
+    {% if author.name %}
+      {{ author.name | strip }}{% unless forloop.last %} and {% endunless %}
+    {% else %}
+      {{ author | strip }}{% unless forloop.last %} and {% endunless %}
+    {% endif %}
+  {% endfor %}
+{% endcapture %}
+{% capture ris_authors %}
+  {% for author in authors_array %}
+    {% assign author_name = author.name | default: author %}
+AU  - {{ author_name | strip }}
+  {% endfor %}
+{% endcapture %}
+{% capture bibtex_entry %}@{{ citation_type }}{ {{ citation_key }},
+  title = { {{ citation_title | strip }} },
+  author = { {{ author_line | strip }} },
+  {% if citation_year %}year = { {{ citation_year }} },{% endif %}
+  {% if publisher %}publisher = { {{ publisher | strip }} },{% endif %}
+  {% if doi %}doi = { {{ doi }} },{% endif %}
+  url = { {{ citation_url }} }
+}
+{% endcapture %}
+{% capture ris_entry %}TY  - {{ citation_type | upcase }}
+TI  - {{ citation_title | strip }}
+{% if citation_year %}PY  - {{ citation_year }}
+{% endif %}{{ ris_authors | strip }}
+{% if publisher %}PB  - {{ publisher | strip }}
+{% endif %}
+{% if doi %}DO  - {{ doi }}
+{% endif %}UR  - {{ citation_url }}
+ER  -
+{% endcapture %}
+{% capture endnote_entry %}%0 {{ citation_type | capitalize }}
+%T {{ citation_title | strip }}
+{{ ris_authors | strip | replace: 'AU', '%A' }}
+{% if citation_year %}%D {{ citation_year }}
+{% endif %}
+{% if publisher %}%I {{ publisher | strip }}
+{% endif %}
+{% if doi %}%R {{ doi }}
+{% endif %}
+%U {{ citation_url }}
+{% endcapture %}
+{% capture authors_plain %}
+  {% for author in authors_array %}
+    {% assign author_name = author.name | default: author %}
+    {{ author_name | strip }}{% unless forloop.last %}, {% endunless %}
+  {% endfor %}
+{% endcapture %}
+{% capture citation_text %}
+  {{ authors_plain | strip }}{% if citation_year %} ({{ citation_year }}){% endif %}. {{ citation_title | strip }}. {{ publisher | strip }}. {{ citation_url }}.
+{% endcapture %}
+<section class="citation-tools" aria-labelledby="citation-tools-heading-{{ citation_key }}">
+  <div class="citation-tools__header">
+    <h2 id="citation-tools-heading-{{ citation_key }}">{% t 'citation_tools.heading' %}</h2>
+    <p class="citation-tools__summary">{% t 'citation_tools.summary' %}</p>
+    <p class="citation-tools__citation">{{ citation_text | strip }}</p>
+  </div>
+  <div class="citation-tools__exports">
+    <article class="citation-tools__format" data-citation-format="bibtex">
+      <header>
+        <h3>{% t 'citation_tools.formats.bibtex' %}</h3>
+        <button type="button" class="btn btn--ghost" data-copy-citation data-target="bibtex-{{ citation_key }}">{% t 'citation_tools.copy' %}</button>
+      </header>
+      <textarea id="bibtex-{{ citation_key }}" readonly aria-label="{% t 'citation_tools.aria.bibtex' %}">{{ bibtex_entry | strip }}</textarea>
+    </article>
+    <article class="citation-tools__format" data-citation-format="ris">
+      <header>
+        <h3>{% t 'citation_tools.formats.ris' %}</h3>
+        <button type="button" class="btn btn--ghost" data-copy-citation data-target="ris-{{ citation_key }}">{% t 'citation_tools.copy' %}</button>
+      </header>
+      <textarea id="ris-{{ citation_key }}" readonly aria-label="{% t 'citation_tools.aria.ris' %}">{{ ris_entry | strip }}</textarea>
+    </article>
+    <article class="citation-tools__format" data-citation-format="endnote">
+      <header>
+        <h3>{% t 'citation_tools.formats.endnote' %}</h3>
+        <button type="button" class="btn btn--ghost" data-copy-citation data-target="endnote-{{ citation_key }}">{% t 'citation_tools.copy' %}</button>
+      </header>
+      <textarea id="endnote-{{ citation_key }}" readonly aria-label="{% t 'citation_tools.aria.endnote' %}">{{ endnote_entry | strip }}</textarea>
+    </article>
+  </div>
+</section>