1800nasi/bqkc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Nasir Anthony Montalvo
2025-11-13 14:48:58 -06:00
committed by GitHub
commit 526096840e
2349 changed files with 19464 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
_includes/item/child/audio-player.html Normal file
View File

@@ -0,0 +1,10 @@
{% comment %}
Adds html audio element with source listed in object_location of a child item.
Provides a fallback to download the file.
{%- endcomment -%}
<audio controls class="w-100">
<source src="{{ child.object_location | relative_url }}">
Your browser does not support the audio element. Please <a href="{{ child.object_location | relative_url }}">download the audio file</a>.
</audio>

14
_includes/item/child/citation-box.html Normal file
View File

@@ -0,0 +1,14 @@
{% comment %}
Adds a basic citation box for child item with reference link to the child modal.
{%- endcomment -%}
<div class="card mb-2">
<div class="card-header">Attribution</div>
<div class="card-body">
<dl>
<dt>Citation:</dt>
<dd>"{{ child.title | default: page.title }}", {{ site.title }}, {% if site.organization-name %}{{ site.organization-name }}, {% endif %}<a href="{{ page.url | absolute_url }}#{{ child.objectid }}">{{ page.url | absolute_url }}#{{ child.objectid }}</a></dd>
</dl>
</div>
</div>

47
_includes/item/child/compound-item-download-buttons.html Normal file
View File

@@ -0,0 +1,47 @@
{% comment %}
Adds button links for compound object parent item page.
If item has date to Timeline, if item has lat/long to Map, if item has child objects with object_location it adds Download options for each.
Styled as a Bootstrap btn-group.
{%- endcomment -%}
<div class="btn-group my-3" role="group" aria-label="Item options">
{% if page.object_transcript %}<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTranscript" aria-expanded="false" aria-controls="collapseTranscript">View Transcript</button>{% endif %}
{% if page.date %}{%- capture year -%}{% if page.date contains "-" %}{{ page.date | split: "-" | first }}{% elsif page.date contains "/" %}{{ page.date | split: "/" | last }}{% else %}{{ page.date }}{% endif %}{%- endcapture -%}
<a href="{{ year | strip | prepend: '/timeline.html#y' | relative_url }}" class="btn btn-outline-primary">View on Timeline</a>{% endif %}
{% if page.latitude and page.longitude %}
<a href="{{ '/map.html?location=' | append: page.latitude | append: ',' | append: page.longitude | append: '&marker=' | append: page.objectid | relative_url }}" class="btn btn-outline-primary">View on Map</a>{% endif %}
<div class="btn-group" role="group">
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Download
</button>
<ul class="dropdown-menu">
{% if page.object_location %}<li><a target="_blank" rel="noopener" href="{{ page.object_location | relative_url }}" class="dropdown-item">{{ page.title }} ({{ page.format | split: '/' | last | upcase }})</a></li>{% endif %}
{% for child in children %}
{% unless child.object_location == nil %}
<li>
<a target="_blank" rel="noopener" href="{{ child.object_location | relative_url }}" class="dropdown-item">
{% if page.title != child.title and child.title != nil %}{{ child.title | truncatewords: 3 }}{% else %}Item {{ forloop.index }}{% endif %}
{% if child.format %}({{ child.format | split: '/' | last | upcase }}){% endif %}
</a>
</li>
{% endunless %}
{% endfor %}
</ul>
</div>
</div>
{% if page.object_transcript %}
<div class="collapse mt-3" id="collapseTranscript">
<div class="card card-body text-start">
{% assign transcript_type = page.object_transcript | slice: 0,1 %}
{% if transcript_type == '/' %}
{% assign transcript_location = page.object_transcript | remove_first: '/' %}
{% assign transcript = site.pages | where: 'path', transcript_location | first %}
{{ transcript.content | markdownify }}
{% else %}
{{ page.object_transcript | markdownify }}
{% endif %}
</div>
</div>
{% endif %}

165
_includes/item/child/compound-item-modal-gallery.html Normal file
View File

@@ -0,0 +1,165 @@
{% comment %}
Creates a gallery of thumbnails images or icons for each child item in a compound object. The thumb defaults to image_thumb or image_small, otherwise an icon is added based on the display_template or format of the child item.
Each child item is given a popup modal with full display and metadata information. The display is chosen based on the display_template of the child item.
This include requires the Liquid object "child" to be present! The item display requires the compound object item includes in "item/child/".
{% endcomment %}
<div class="row row-cols-2 row-cols-lg-4 g-2">
{% for child in children %}
<div class="col">
<div class="card h-100">
<div class="my-auto">
<div class="card-body text-center" id="{{ child.objectid }}Card">
{% if child.title %}<div class="small text-dark mb-2">{{ child.title | truncatewords: 4 }}</div>{% endif %}
<div class="mb-2">
{% if child.image_thumb or child.image_small %}
<img class="img-thumbnail compound-thumb" src="{{ child.image_thumb | default: child.image_small | relative_url }}" alt="{{ child.image_alt_text | default: child.description | default: child.title | escape }}">
{% else %}
<svg class="bi text-body compound-thumb" fill="currentColor" aria-hidden="true">
{%- assign icon_template = child.display_template | default: item.format -%}
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#{% if icon_template contains 'image' %}icon-image{% elsif icon_template contains 'pdf' %}icon-pdf{% elsif icon_template contains 'audio' %}icon-audio{% elsif icon_template contains 'video' %}icon-video{% else %}icon-default{% endif %}" />
</svg>
<span class="visually-hidden">{{ child.title | escape }} - {{ child.format }}</span>
{% endif %}
</div>
<!-- child object modal button -->
<a id="item-{{ forloop.index }}"
role="button"
data-bs-toggle="modal"
href="#{{ child.objectid }}"
onclick="window.location.hash='{{ child.objectid }}'"
class="btn btn-sm btn-outline-secondary small stretched-link">
{{ child.display_template | upcase | default: "Item" }} <svg class="bi icon-sprite" fill="currentColor" aria-hidden="true"><use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#icon-{{ child.display_template | default: 'file'}}"/></svg>
</a>
<!-- child object modal -->
<div class="modal fade" id="{{ child.objectid }}" tabindex="-1" role="dialog" aria-labelledby="{{ child.objectid }}ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xxl">
<div class="modal-content text-start">
<div class="modal-header ">
<div class="modal-title w-100" id="{{ child.objectid }}ModalLabel">
<div class="row">
{% capture stopMedia %}{% if child.display_template == 'video' %}{% if child.object_location contains 'vimeo' %}vimeo{% elsif child.object_location contains 'youtu' %}youtube{% else %}video{% endif %}{% elsif child.display_template == 'audio' %}audio{% else %}{% endif %}{% endcapture %}
<div class="col-12 text-end">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
onclick="{% if stopMedia != '' %}stopMedia('{{ child.objectid }}','{{ stopMedia }}');{% endif %}history.pushState('', '', window.location.pathname)"></button>
</div>
{% capture next_index %}{% if forloop.index == forloop.length %}0{% else %}{{ forloop.index0 | plus: 1 }}{% endif %}{% endcapture %}
{% assign next_index = next_index | times: 1 %}
{% capture prev_index %}{% if forloop.index0 == 0 %}{{ forloop.length | minus: 1 }}{% else %}{{ forloop.index0 | minus: 1 }}{% endif %}{% endcapture %}
{% assign prev_index = prev_index | times: 1 %}
{% capture next_item_id %}{{ children[next_index].objectid }}{% endcapture %}
{% capture prev_item_id %}{{ children[prev_index].objectid }}{% endcapture %}
<div class="col-1 col-md-2">
<button data-bs-target="#{{ prev_item_id }}" data-bs-toggle="modal" onclick="{% if stopMedia != '' %}stopMedia('{{ child.objectid }}','{{ stopMedia }}');{% endif %}window.location.hash='{{ prev_item_id }}'" class="btn btn-outline-dark btn-sm prev-child-button" >
<svg class="bi icon-sprite" role="img" aria-label="Previous Item">
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#arrow-left"/>
</svg>
<span class="d-none d-md-inline">Previous Item</span>
</button>
</div>
<div class="col-9 col-md-8 text-center">
<h3 class="h5">{{ page.title }}
<span class="d-none d-md-inline">-</span><span class="d-md-none"><br></span>
Item {{ forloop.index }} of {{ children | size }}
</h3>
</div>
<div class="col-1 col-md-2 text-end">
<button data-bs-target="#{{ next_item_id }}" data-bs-toggle="modal" onclick="{% if stopMedia != '' %}stopMedia('{{ child.objectid }}','{{ stopMedia }}');{% endif %}window.location.hash='{{ next_item_id }}'" class="ms-md-5 btn btn-outline-dark btn-sm next-child-button">
<span class="d-none d-md-inline">Next Item</span>
<svg class="bi icon-sprite" role="img" aria-label="Next Item">
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#arrow-right"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8">
<div class="card mb-4 text-center">
<div class="m-2">
{% if child.display_template == 'image' %}
{% include item/child/image-gallery.html %}
{% elsif child.display_template == 'video' %}
{% if child.object_location contains 'vimeo' or child.object_location contains 'youtu' %}
{% include item/child/video-embed.html %}
{% else %}
{% include item/child/video-player.html %}
{% endif %}
{% elsif child.display_template == 'audio' %}
<div class="my-auto">
{% include item/child/audio-player.html %}
</div>
{% elsif child.display_template == 'panorama' %}
{% include item/child/panorama.html %}
{% else %}
{% include item/child/item-thumb.html %}
{% endif %}
</div>
<div class="my-2">
{% include item/child/download-buttons.html %}
</div>
</div>
</div>
<div class="col-md-4">
{% include item/child/metadata.html %}
</div>
</div>
<div class="row justify-content-center mt-4">
<div class="col-md-5 py-4">
{% include item/child/citation-box.html %}
</div>
{% if child.rights or child.rightsstatement %}
<div class="col-md-5 py-4">
{% include item/child/rights-box.html %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<!-- end child modal -->
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<script>
function stopMedia(objectid, type) {
// stop media based on type
if (type == "audio") {
const mediaElement = document.querySelector(`#${ objectid } audio`);
mediaElement.pause();
//mediaElement.currentTime = 0;
}
if (type == "video") {
const mediaElement = document.querySelector(`#${ objectid } video`);
mediaElement.pause();
//mediaElement.currentTime = 0;
}
if (type == "youtube") {
const mediaElement = document.querySelector(`#${ objectid } iframe`);
const message = JSON.stringify({ event: 'command', func: 'pauseVideo', args: '' });
mediaElement.contentWindow.postMessage(message, '*');
}
if (type == "vimeo") {
const mediaElement = document.querySelector(`#${ objectid } iframe`);
mediaElement.contentWindow.postMessage('{"method":"pause"}', '*');
}
}
</script>

34
_includes/item/child/download-buttons.html Normal file
View File

@@ -0,0 +1,34 @@
{% comment %}
Adds child modal button links, styled as a Bootstrap btn-group.
Features:
- View Transcript -- if the item has the field "object_transcript", this button is added along with a Bootstrap collapse containing the transcript content. If the value of "object_transcript" starts with objects/ it will look for the matching transcript file in the objects fold, otherwise it will use the value directly. Both will be rendered in Markdown.
- View on Timeline -- if the item has a "date" value, links to Timeline page.
- View on Map -- if item has "latitude" and "longitude" value, links to location on map.
- Download -- if the item has "object_location" value, adds a download button along with the item format, or if the value is a YouTube or Vimeo link adds a "View on" link.
{%- endcomment -%}
<div class="btn-group my-2" role="group" aria-label="Item options">
{% if child.object_transcript %}<button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTranscript{{ child.objectid }}" aria-expanded="false" aria-controls="collapseTranscript{{ child.objectid }}">View Transcript</button>{% endif %}
{% if child.date %}{%- capture year -%}{% if child.date contains "-" %}{{ child.date | split: "-" | first }}{% elsif child.date contains "/" %}{{ child.date | split: "/" | last }}{% else %}{{ child.date }}{% endif %}{%- endcapture -%}
<a href="{{ year | strip | prepend: '/timeline.html#y' | relative_url }}" class="btn btn-outline-primary">View on Timeline</a>{% endif %}
{% if child.latitude and child.longitude %}
<a href="{{ '/map.html?location=' | append: page.latitude | append: ',' | append: page.longitude | append: '&marker=' | append: page.objectid | relative_url }}" class="btn btn-outline-primary">View on Map</a>{% endif %}
{% if child.object_location %}<a target="_blank" rel="noopener" href="{{ child.object_location | relative_url }}" class="btn btn-outline-primary">
{% if child.display_template == 'video' and child.object_location contains 'vimeo' %}View on Vimeo{% elsif child.display_template == 'video' and child.object_location contains 'youtu' %}View on YouTube{% elsif child.display_template == 'record'%}Link to Object{% else %}Download {{ child.format | split: '/' | last | default: page.display_template | upcase }}{% endif %}
</a>{% endif %}
</div>
{% if child.object_transcript %}
<div class="collapse mt-3" id="collapseTranscript{{ child.objectid }}">
<div class="card card-body text-start">
{% assign transcript_type = child.object_transcript | slice: 0,1 %}
{% if transcript_type == '/' %}
{% assign transcript_location = child.object_transcript | remove_first: '/' %}
{% assign transcript = site.pages | where: 'path', transcript_location | first %}
{{ transcript.content | markdownify }}
{% else %}
{{ child.object_transcript | markdownify }}
{% endif %}
</div>
</div>
{% endif %}

27
_includes/item/child/ia-embed.html Normal file
View File

@@ -0,0 +1,27 @@
{% comment %}
Internet Archive item embed.
Loads a book/pdf, video, or audio item from Internet Archive via their standard iframe embed.
The item's "objects_location" must be the full public URL to the object on IA. The item url looks something like:
book, https://archive.org/details/uidaho_gem_1903
video, https://archive.org/details/fluxusfireplace
audio, https://archive.org/details/aladore_1704_librivox
The embed works for books/pdfs, video, and audio--however, you will want to tweak the aspect ratio for different item types!
Options:
- "ratio" = use Bootstrap embed ratio options "21x9", "16x9", "4x3", or "1x1" to customize the responsive aspect ratio if not using height. 4x3 is default. (optional)
- "height" = set embed object height in px (rather than responsive size), width will be 100%, e.g. "800px" (optional)
- "style" = apply an arbitrary style to the div containing the embed. This is useful if you are trying to add a min height or custom aspect ratio. (optional)
- min height is useful for book items on mobile, e.g. "min-height: 500px;"
- custom aspect ratio may be useful for book items, e.g. "--bs-aspect-ratio: %115;"
- both e.g. "min-height: 500px;--bs-aspect-ratio: calc(3 / 4 * 100%);"
{% endcomment %}
{% assign archive_id = child.object_location | split: '/' | last %}
<div class="{% unless include.height %}ratio ratio-{{ include.ratio | default: '4x3' }}{% endunless %}"{% if include.style %} style="{{ include.style }}"{% endif %}>
<iframe title="item embed for {{ child.title | escape }}" src="https://archive.org/embed/{{ archive_id }}" {% if include.height %}class="w-100" height="{{ include.height }}"{% endif %} frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>
</div>`

10
_includes/item/child/image-gallery.html Normal file
View File

@@ -0,0 +1,10 @@
{% comment %}
Adds child image in a Spotlight gallery markup.
Ensure dependencies are added by including `gallery: true` in the layout front matter calling this include.
{%- endcomment -%}
<a id="{{ child.objectid }}" class="spotlight gallery-img" {% if child.object_location %}data-download="true"{% endif %} title="{{ child.title | escape }}" href="{{ child.object_location | default: child.image_small | relative_url }}">
<img src="{{ child.image_small | relative_url }}" alt="{{ child.image_alt_text | default: child.description | default: child.title | escape }}" class="img-fluid">
<div><small class="text-dark">Click to view full screen</small></div>
</a>

17
_includes/item/child/item-thumb.html Normal file
View File

@@ -0,0 +1,17 @@
{% comment %}
Add a thumbnail image or icon based on format for a child item, with a object_location link (if available).
{% endcomment %}
{% if child.object_location %}<a href="{{ child.object_location | relative_url }}" target="_blank" rel="noopener">{% endif %}
{% if child.image_thumb or child.image_small %}
<img class="img-thumbnail" src="{{ child.image_small | default: child.image_thumb | relative_url }}" alt="{{ child.image_alt_text | default: child.description | default: child.title | escape }}">
{% else %}
<svg class="bi text-body" fill="currentColor" aria-hidden="true">
{%- assign icon_template = child.display_template | default: child.format -%}
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#{% if icon_template contains 'image' %}icon-image{% elsif icon_template contains 'pdf' %}icon-pdf{% elsif icon_template contains 'audio' %}icon-audio{% elsif icon_template contains 'video' %}icon-video{% elsif icon_template contains 'record' %}icon-record{% else %}icon-default{% endif %}"/>
</svg>
<span class="visually-hidden">{{ child.title | escape }} - {{ child.format }}</span>
{% endif %}
{% if child.object_location %}</a>{% endif %}

25
_includes/item/child/metadata.html Normal file
View File

@@ -0,0 +1,25 @@
{% comment %}
Adds child metadata to child modal in a description list element.
Fields are configured via _data/config-metadata.csv
{%- endcomment -%}
{%- assign fields = site.data.config-metadata | where_exp: 'item', 'item.display_name != nil' -%}
<div id="item-metadata">
<dl>
{% for f in fields %}{% if child[f.field] %}
<dt class="field">{{ f.display_name }}:</dt>
<dd class="field-value">
{% if f.browse_link == "true" %}
{% assign topics = child[f.field] | split: ";" %}
{% for t in topics %}
<a class="me-3" href="{{ t | strip | url_param_escape | prepend: '/browse.html#' | relative_url }}">{{ t | strip }}</a>
{% endfor %}
{% elsif f.external_link == "true" %}
<a href="{{ child[f.field] }}">{{ child[f.field] }}</a>
{% else %}
{{ child[f.field] | replace: '""','"' }}{% endif %}
</dd>
{% endif %}{% endfor %}
</dl>
</div>

27
_includes/item/child/panorama.html Normal file
View File

@@ -0,0 +1,27 @@
{% comment %}
Adds a panorama image viewer using Pannellum for child modals.
Default is set for equirectangular projection types.
https://pannellum.org/documentation/reference/
{%- endcomment -%}
<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/pannellum/pannellum.css">
<div id="panorama" class="ratio ratio-4x3 my-4"></div>
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/pannellum/pannellum.js"></script>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "{{ child.object_location | relative_url }}",
"autoLoad": false,
/*
* Uncomment the next line to print the coordinates of mouse clicks
* to the browser's developer console, which makes it much easier
* to figure out where to place hot spots. Always remove it when
* finished, though.
*/
"hotSpotDebug": false,
"hotSpots": [
]
});
</script>

17
_includes/item/child/rights-box.html Normal file
View File

@@ -0,0 +1,17 @@
{% comment %}
Adds a box to highlight rights information if child item has a "rights" or "rightsstatement" field.
{%- endcomment -%}
<div class="card mb-2">
<div class="card-header">Rights</div>
<div class="card-body">
<dl>
{% if child.rights %}<dt>Rights:</dt>
<dd>{{ child.rights }}</dd>{% endif %}
{% if child.rightsstatement %}<dt>Standardized Rights:</dt>
<dd><a href="{{ child.rightsstatement }}">{{ child.rightsstatement }}</a>
</dd>{% endif %}
</dl>
</div>
</div>

18
_includes/item/child/video-embed.html Normal file
View File

@@ -0,0 +1,18 @@
{% comment %}
Adds an iframe video embed from a YouTube or Vimeo link given in child item's object_location.
{%- endcomment -%}
{% if child.object_location contains 'vimeo' %}
{% assign vimeo_id = child.object_location | split: '/' | last %}
<div class="ratio ratio-16x9">
<iframe title="video embed {{ child.title | escape }}" src="https://player.vimeo.com/video/{{ vimeo_id }}" allowfullscreen></iframe>
</div>
{%- elsif child.object_location contains 'youtu' -%}
{% assign youtube_id = child.object_location | split: '/' | last %}
{% if youtube_id contains 'v=' %}{% assign youtube_id = youtube_id | split: 'v=' | last | split: '&' | first %}
{% elsif youtube_id contains '?' %}{% assign youtube_id = youtube_id | split: '?' | first %}{% endif %}
<div class="ratio ratio-16x9">
<iframe title="video embed {{ child.title | escape }}" src="https://www.youtube-nocookie.com/embed/{{ youtube_id }}?enablejsapi=1&rel=0&modestbranding=1" allowfullscreen></iframe>
</div>
{% endif %}

12
_includes/item/child/video-player.html Normal file
View File

@@ -0,0 +1,12 @@
{% comment %}
Adds html video element with source given in child's object_location.
Sizing is controlled using Bootstrap "ratio" styles.
{%- endcomment -%}
<div class="ratio ratio-16x9">
<video {% if child.image_small %}poster="{{ child.image_small | relative_url }}" {% endif %}preload="metadata" controls>
<source src="{{ child.object_location | relative_url }}">
Your browser does not support the video tag.
</video>
</div>