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

reconnect

Browse Source
This commit is contained in:
Nasir Anthony Montalvo
2026-01-26 02:25:43 -06:00
parent 6609527c97
commit 0a854da998
135 changed files with 8792 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
.github/_includes/advanced-search-modal.html vendored Normal file
View File

@@ -0,0 +1,62 @@
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#advancedSearchModal">
Advanced<span class="d-none d-md-inline"> Filter</span>
</button>
<div class="modal fade" id="advancedSearchModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title h4" id="advancedSearchModalLabel">Advanced Filter</h1>
<p class="small text-muted">Use these filters to refine your search results. You can combine multiple fields to get more specific results.</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="advancedSearchForm">
<div id="searchRows">
<!-- Initial search rows will be inserted here -->
</div>
<div class="mt-3">
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="addSearchRow()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
</svg>
Add Another Field
</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="submitAdvancedSearch()">Search</button>
</div>
</div>
</div>
</div>
<!-- Template for search row -->
<template id="searchRowTemplate">
<div class="search-row mb-4">
<div class="row align-items-center">
<div class="col-4 col-md-2">
<select class="form-select form-select-sm boolean-operator">
<option value="AND">AND</option>
<option value="OR">OR</option>
<option value="NOT">NOT</option>
</select>
</div>
<div class="col-5 col-md-3">
<select class="form-select form-select-sm field-select">
<option value="all">All Fields</option>
<option value="title">Title</option>
{% for f in site.data.config-browse %}{% assign cap-field = f.field | capitalize %}
<option value="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</option>
{% endfor %}
<div class="col-10 col-md-6">
<input type="text" class="form-control form-control-sm search-input" placeholder="Enter search term">
</div>
<div class="col-2 col-md-1">
<button type="button" class="btn btn-outline-danger btn-sm remove-row" aria-label="Remove condition">×</button>
</div>
</div>
</div>
</template>

83
.github/_includes/cb/about_the_about.md vendored Normal file
View File

@@ -0,0 +1,83 @@
{% comment %}
Find some sample images or use defaults for About demos
{% endcomment %}
{% assign imagesample = site.data[site.metadata] | where_exp: 'item','item.format contains "image"' | first %}
{% capture imagesampleid %}{{ imagesample.objectid | default: "https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg" }}{% endcapture %}
{% assign pdfsample = site.data[site.metadata] | where_exp: 'item','item.format contains "pdf"' | first %}
{% capture pdfsampleid %}{{ pdfsample.objectid | default: "https://www.lib.uidaho.edu/collectionbuilder/demo-objects/uiext21768.pdf" }}{% endcapture %}
{% assign videosample = site.data[site.metadata] | where_exp: 'item','item.format contains "video"' | first %}
{% capture videosampleid %}{{ videosample.objectid | default: "https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" }}{% endcapture %}
{% assign audiosample = site.data[site.metadata] | where_exp: 'item','item.format contains "audio"' | first %}
{% capture audiosampleid %}{{ audiosample.objectid | default: "https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" }}{% endcapture %}
## About the About Page
We want to make engaging interpretive pages easier to create, so CollectionBuilder gives you tools to write *with* your collection content!
The template comes with a customizable "About" page layout designed for long form content with rich media embeds.
Content is written in [Markdown](https://guides.github.com/features/mastering-markdown/) and enhanced using "includes" that pull in collection content, external media, and [Bootstrap](https://getbootstrap.com/) features like cards and modals.
We hope this makes it easier for site builders to develop the collection AND add interesting and engaging contextual information.
Each "include" file has several options, which are documented in the files themselves--copy the examples to see how it works with your content!
In the demo below, we've given display widths of 25% and 50% to save space, but you can feature the entire image or document.
You can also see a page featuring [a bonanza of feature includes options](https://collectionbuilder.github.io/collectionbuilder-gh/feature_options.html) on our CollectionBuilder-GH demo site.
{% include feature/button.html text="Feature *Includes* Bonanza page" link="https://collectionbuilder.github.io/collectionbuilder-gh/feature_options.html" color="primary" size="lg" centered=true %}
### Include Collection Items
The template provides includes to pull your collection objects and metadata into your interpretive page, allowing you to write with your materials directly embedded in the content.
#### Include an Image
- Image --> `{% raw %}{% include feature/image.html objectid="demo_001" width="75" %}{% endraw %}`
{% include feature/image.html objectid=imagesampleid width="75" %}
#### Include a PDF
- PDF -- > `{% raw %}{% include feature/pdf.html objectid="demo_002" width="50" %}{% endraw %}`
{% include feature/pdf.html objectid=pdfsampleid width="50" %}
#### Include a Video
- Video: `{% raw %}{% include feature/video.html objectid="demo_004" %}{% endraw %}`
{% include feature/video.html objectid=videosampleid width="75" %}
#### Include an Audio File
- Audio: `{% raw %}{% include feature/audio.html objectid="demo_003" %}{% endraw %}`
{% include feature/audio.html objectid=audiosampleid %}
### Include Bootstrap Features
The template also provides includes to make it easier to add [Bootstrap](https://getbootstrap.com/) components to your Markdown writing.
These features allow you to better organize and highlight your content.
#### Include a Card
- Card -- > `{% raw %}{% include feature/card.html header="This is a Card" text="The card features an image from the collection as a cap" objectid="demo004" width="25" centered=true %}{% endraw %}`
{% include feature/card.html header="This is a Card" text="The card features an image from the collection as a cap" objectid=imagesampleid width="50" centered=true %}
#### Include a Button
- Buttons -- > `{% raw %}{% include feature/button.html text="Button Link to Somewhere" link="https://collectionbuilder.github.io/" color="success" %}{% endraw %}`
{% include feature/button.html text="Button Link to Somewhere" link="https://collectionbuilder.github.io/" color="success" centered=true %}
#### Include an Alert
- Alerts -- > `{% raw %}{% include feature/alert.html text="this is an *alert* that 'warns' a user" color="warning" align="center" %}{% endraw %}`
{% include feature/alert.html text="This is an *alert* that 'warns' a user with centrally aligned text." color="warning" align="center" %}
#### Include a Modal
- Modals -- > `{% raw %}{% include feature/modal.html button="This is a modal using a 'primary' colored button to invite clicking" title="when clicked:" text="A Modal will pop out a box with some more information" color="primary" %}{% endraw %}`
{% include feature/modal.html button="This is a modal using a 'primary' colored button to invite clicking" title="When clicked:" text="A Modal will pop out a box with some more information" color="primary" %}

17
.github/_includes/cb/credits.html vendored Normal file
View File

@@ -0,0 +1,17 @@
<div class="container-fluid mt-4 mb-n3 bg-light p-4 " id="technical">
<div class="container mt-4 border rounded p-4 bg-white">
<h3>CollectionBuilder</h3>
<div class="row my-2 justify-content-center">
<div class="col-md-8 p-4">
<p>This digital collection is built with <a href="https://collectionbuilder.github.io/">CollectionBuilder</a>, an open source framework for creating digital collection and exhibit websites that is developed by faculty librarians at the University of Idaho Library following the <a href="https://lib-static.github.io">Lib-Static</a> methodology.</p>
<p>Using the <a href="https://github.com/CollectionBuilder/collectionbuilder-csv">CollectionBuilder-CSV</a> template and the static website generator <a href="https://jekyllrb.com/">Jekyll</a>, this project creates an engaging interface to explore driven by metadata.</p>
</div>
<div class="col-md-4 text-center">
<a href="https://collectionbuilder.github.io/" title="CollectionBuilder">
<img src="{{ '/assets/img/collectionbuilder-logo.png' | relative_url }}" class="img-fluid" alt="CollectionBuilder" >
</a>
</div>
</div>
</div>
</div>

230
.github/_includes/cb/feature_options.md vendored Normal file
View File

@@ -0,0 +1,230 @@
## Feature *Includes* Bonanza page
Check all the includes. Steal Code!
----------
### Image Options
#### Image from Collection (auto caption)
{% include feature/image.html objectid="demo_001" width="75" %}
Example Code --> `{% raw %}{% include feature/image.html objectid="demo_001" width="75" %}{% endraw %}`
#### Image from Collection (with a caption)
{% include feature/image.html objectid="demo_001" width="75" caption="an image" %}
Example Code --> `{% raw %}{% include feature/image.html objectid="demo_001" width="75" caption="an image" %}{% endraw %}`
#### Multiple Images from the Collection (auto caption)
{% include feature/image.html objectid="demo_001;demo_004;demo_002" %}
Example Code --> `{% raw %}{% include feature/image.html objectid="demo_001;demo_004;demo_002" %}{% endraw %}`
#### Multiple Images from the Collection (with captions)
{% include feature/image.html objectid="demo_001;demo_004;demo_002" width="75" caption="demo1;nother" %}
Example Code --> `{% raw %}{% include feature/image.html objectid="demo_001;demo_004;demo_002" width="75" caption="demo1;nother" %}{% endraw %}`
#### External Image (without a caption)
{% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg" width="75" alt="Frank B. Robinson at the Organ" %}
Example Code --> `{% raw %}{% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg" width="75" alt="Frank B. Robinson at the Organ" %}{% endraw %}`
#### External Image (with a caption)
{% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg" width="75" alt="Frank B. Robinson at the Organ" caption="This guy is good!"%}
Example Code --> `{% raw %}{% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg" width="75" alt="Frank B. Robinson at the Organ" caption="This guy is good!"%}{% endraw %}`
#### Multiple External Images (with captions and a link)
{% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg;https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_psychiana_photographs_010.jpg" caption="this guy!;(was nothing without these women!)" link="https://www.lib.uidaho.edu/digital/psychiana/items/psychiana519.html;https://www.lib.uidaho.edu/digital/psychiana/items/psychiana547.html" alt="Frank B. Robinson at the Organ;Women staff members of Psychiana lined up outside the Psychiana headquarters" %}
Example Code --> `{% raw %}{% include feature/image.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_photographs_01.jpg;https://www.lib.uidaho.edu/collectionbuilder/demo-objects/mg101_b6_psychiana_photographs_010.jpg" caption="this guy!;(was nothing without these women!)" link="https://www.lib.uidaho.edu/digital/psychiana/items/psychiana519.html;https://www.lib.uidaho.edu/digital/psychiana/items/psychiana547.html" alt="Frank B. Robinson at the Organ;Women staff members of Psychiana lined up outside the Psychiana headquarters" %}{% endraw %}`
----------
### PDF Options
#### PDF from Collection (auto caption)
{% include feature/pdf.html objectid="demo_002" width="50" %}
Example Code --> `{% raw %}{% include feature/pdf.html objectid="demo_002" width="50" %}{% endraw %}`
#### PDF from the Collection (with a caption)
{% include feature/pdf.html objectid="demo_002" width="50" caption="a pdf from the collection" %}
Example Code --> `{% raw %}{% include feature/pdf.html objectid="demo_002" width="50" caption="a pdf from the collection" %}{% endraw %}`
#### External PDF (without a caption)
{% include feature/pdf.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/uiext21768.pdf" width="50" %}
Example Code --> `{% raw %}{% include feature/pdf.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/uiext21768.pdf" width="50" %}{% endraw %}`
#### External PDF (with a caption)
{% include feature/pdf.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/uiext21768.pdf" width="50" caption="Safe Chainsawing is Important!" %}
Example Code --> `{% raw %}{% include feature/pdf.html objectid="https://www.lib.uidaho.edu/collectionbuilder/demo-objects/uiext21768.pdf" width="50" caption="Safe Chainsawing is Important!" %}{% endraw %}`
----------
### Video Options
#### Video from Collection (auto caption)
{% include feature/video.html objectid="demo_004" width="75" %}
Example Code --> `{% raw %}{% include feature/video.html objectid="demo_004" width="75" %}{% endraw %}`
#### Video from the Collection (with a caption)
{% include feature/video.html objectid="demo_005" width="50" caption="a video from the collection" %}
Example Code --> `{% raw %}{% include feature/video.html objectid="demo_004" width="50" caption="a video from the collection" %}{% endraw %}`
#### External Video File (without a caption)
{% include feature/video.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" width="50"%}
Example Code --> `{% raw %}{% include feature/video.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" width="50"%}{% endraw %}`
#### External Video File (with a caption)
{% include feature/video.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" caption="Bears are Important!" width="50" %}
Example Code --> `{% raw %}{% include feature/video.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" caption="Bears are Important!" width="50" %}{% endraw %}`
#### External Vimeo Video
{% include feature/video.html objectid="https://vimeo.com/464555587" width="50" caption="vimeo caption" %}
Example Code --> `{% raw %}{% include feature/video.html objectid="https://vimeo.com/464555587" width="50" caption="vimeo caption" %}{% endraw %}`
#### External Youtube Video
{% include feature/video.html objectid="https://www.youtube.com/watch?v=dbKNr3wuiuQ" width="50" caption="youtube caption" %}
Example Code --> `{% raw %}{% include feature/video.html objectid="https://www.youtube.com/watch?v=dbKNr3wuiuQ" width="50" caption="youtube caption" %}{% endraw %}`
#### Video Modal from Collection
{% include feature/video-modal.html objectid="demo_004" %}
Example Code --> `{% raw %}{% include feature/video-modal.html objectid="demo_004" %}{% endraw %}`
#### Video Modal External Item
{% include feature/video-modal.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" caption="Bears are Important!" transcript="Example transcript text, this should be better!" %}
Example Code --> `{% raw %}{% include feature/video-modal.html objectid="https://cdil.lib.uidaho.edu/storying-extinction/objects/trailcams/videos/ballcreek-cedarrub-birdonpath.mp4" caption="Bears are Important!" transcript="Example transcript text, this should be better!" %}{% endraw %}`
----------
### Audio Options
#### Audio from Collection (auto caption)
{% include feature/audio.html objectid="demo_003" width="50" %}
Example Code --> `{% raw %}{% include feature/audio.html objectid="demo_003" width="50" %}{% endraw %}`
#### Audio from the Collection (with a caption)
{% include feature/audio.html objectid="demo_003" width="50" caption="a mp3 from the collection" %}
Example Code --> `{% raw %}{% include feature/audio.html objectid="demo_003" width="50" caption="a mp3 from the collection" %}{% endraw %}`
#### External Audio (without a caption)
{% include feature/audio.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" %}
Example Code --> `{% raw %}{% include feature/audio.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" %}{% endraw %}`
#### External Audio (with a caption)
{% include feature/audio.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" width="50" caption="Clouds are Important!" %}
Example Code --> `{% raw %}{% include feature/audio.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" width="50" caption="Clouds are Important!" %}{% endraw %}`
#### Audio Modal from Collection
{% include feature/audio-modal.html objectid="demo_003" %}
Example Code --> `{% raw %}{% include feature/audio-modal.html objectid="demo_003" %}{% endraw %}`
#### Audio Modal External Item
{% include feature/audio-modal.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" title="Clouds" caption="A reading." transcript="Example transcript text, this should be better!" %}
Example Code --> `{% raw %}{% include feature/audio-modal.html objectid="https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3" title="Clouds" caption="A reading." transcript="Example transcript text, this should be better!" %}{% endraw %}`
----------
### Other Features
#### Cloud Include
{% include feature/cloud.html fields="subject" min="1" background="dark" button="outline-warning" %}
Example Code --> `{% raw %}{% include feature/cloud.html fields="subject" min="1" background="dark" button="outline-warning" %}{% endraw %}`
#### TimelineJS
{% include feature/timelinejs.html %}
Example Code --> `{% raw %}{% include feature/timelinejs.html %}{% endraw %}`
----------
### [Bootstrap](https://getbootstrap.com/) Features
#### Include a Card
- Card -- > `{% raw %}{% include feature/card.html header="This is a Card" text="The card features an image from the collection as a cap" objectid="demo004" width="25" centered=true %}{% endraw %}`
{% include feature/card.html header="This is a Card" text="The card features an image from the collection as a cap" objectid="demo_001" width="25" centered=true %}
#### Include a Button
- Buttons -- > `{% raw %}{% include feature/button.html text="Button Link to Somewhere" link="https://collectionbuilder.github.io/" color="success" %}{% endraw %}`
{% include feature/button.html text="Button Link to Somewhere" link="https://collectionbuilder.github.io/" color="success" centered=true %}
#### Include an Alert
- Alerts -- > `{% raw %}{% include feature/alert.html text="this is an *alert* that 'warns' a user" color="warning" align="center" %}{% endraw %}`
{% include feature/alert.html text="This is an *alert* that 'warns' a user with centrally aligned text." color="warning" align="center" %}
#### Include a Modal
- Modals -- > `{% raw %}{% include feature/modal.html button="This is a modal using a 'primary' colored button to invite clicking" title="when clicked:" text="A Modal will pop out a box with some more information" color="primary" %}{% endraw %}`
{% include feature/modal.html button="This is a modal using a 'primary' colored button to invite clicking" title="When clicked:" text="A Modal will pop out a box with some more information" color="primary" %}

186
.github/_includes/cb/jekyll-toc.html vendored Normal file
View File

@@ -0,0 +1,186 @@
{% capture tocWorkspace %}
{% comment %}
Copyright (c) 2017 Vladimir "allejo" Jimenez
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
{% endcomment %}
{% comment %}
Version 1.2.0
https://github.com/allejo/jekyll-toc
"...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
Usage:
{% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
Parameters:
* html (string) - the HTML of compiled markdown generated by kramdown in Jekyll
Optional Parameters:
* sanitize (bool) : false - when set to true, the headers will be stripped of any HTML in the TOC
* class (string) : '' - a CSS class assigned to the TOC
* id (string) : '' - an ID to assigned to the TOC
* h_min (int) : 1 - the minimum TOC header level to use; any header lower than this value will be ignored
* h_max (int) : 6 - the maximum TOC header level to use; any header greater than this value will be ignored
* ordered (bool) : false - when set to true, an ordered list will be outputted instead of an unordered list
* item_class (string) : '' - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level
* submenu_class (string) : '' - add custom class(es) for each child group of headings; has support for '%level%' placeholder which is the current "submenu" heading level
* base_url (string) : '' - add a base url to the TOC links for when your TOC is on another page than the actual content
* anchor_class (string) : '' - add custom class(es) for each anchor element
* skip_no_ids (bool) : false - skip headers that do not have an `id` attribute
Output:
An ordered or unordered list representing the table of contents of a markdown block. This snippet will only
generate the table of contents and will NOT output the markdown given to it
Modified:
Functionality was modified for CollectionBuilder's context to allow site's creator to trigger a link to the technical credits in the side nav. Additions include lines 165-167 in this file, and the addition of an optional "credits" parameter in the include. credits=true will add "Technical" to the side nav with a link to the #technical anchor. credits=false or not including credits will remove "Technical" from the side nav.
{% endcomment %}
{% capture newline %}
{% endcapture %}
{% assign newline = newline | rstrip %} <!-- Remove the extra spacing but preserve the newline -->
{% capture deprecation_warnings %}{% endcapture %}
{% if include.baseurl %}
{% capture deprecation_warnings %}{{ deprecation_warnings }}<!-- jekyll-toc :: "baseurl" has been deprecated, use "base_url" instead -->{{ newline }}{% endcapture %}
{% endif %}
{% if include.skipNoIDs %}
{% capture deprecation_warnings %}{{ deprecation_warnings }}<!-- jekyll-toc :: "skipNoIDs" has been deprecated, use "skip_no_ids" instead -->{{ newline }}{% endcapture %}
{% endif %}
{% capture jekyll_toc %}{% endcapture %}
{% assign orderedList = include.ordered | default: false %}
{% assign baseURL = include.base_url | default: include.baseurl | default: '' %}
{% assign skipNoIDs = include.skip_no_ids | default: include.skipNoIDs | default: false %}
{% assign minHeader = include.h_min | default: 1 %}
{% assign maxHeader = include.h_max | default: 6 %}
{% assign nodes = include.html | strip | split: '<h' %}
{% assign firstHeader = true %}
{% assign currLevel = 0 %}
{% assign lastLevel = 0 %}
{% capture listModifier %}{% if orderedList %}ol{% else %}ul{% endif %}{% endcapture %}
{% for node in nodes %}
{% if node == "" %}
{% continue %}
{% endif %}
{% assign currLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
{% if currLevel < minHeader or currLevel > maxHeader %}
{% continue %}
{% endif %}
{% assign _workspace = node | split: '</h' %}
{% assign _idWorkspace = _workspace[0] | split: 'id="' %}
{% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
{% assign htmlID = _idWorkspace[0] %}
{% assign _classWorkspace = _workspace[0] | split: 'class="' %}
{% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
{% assign htmlClass = _classWorkspace[0] %}
{% if htmlClass contains "no_toc" %}
{% continue %}
{% endif %}
{% if firstHeader %}
{% assign minHeader = currLevel %}
{% endif %}
{% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
{% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
{% if include.item_class and include.item_class != blank %}
{% capture listItemClass %} class="{{ include.item_class | replace: '%level%', currLevel | split: '.' | join: ' ' }}"{% endcapture %}
{% endif %}
{% if include.submenu_class and include.submenu_class != blank %}
{% assign subMenuLevel = currLevel | minus: 1 %}
{% capture subMenuClass %} class="{{ include.submenu_class | replace: '%level%', subMenuLevel | split: '.' | join: ' ' }}"{% endcapture %}
{% endif %}
{% capture anchorBody %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
{% if htmlID %}
{% capture anchorAttributes %} href="{% if baseURL %}{{ baseURL }}{% endif %}#{{ htmlID }}"{% endcapture %}
{% if include.anchor_class %}
{% capture anchorAttributes %}{{ anchorAttributes }} class="{{ include.anchor_class | split: '.' | join: ' ' }}"{% endcapture %}
{% endif %}
{% capture listItem %}<a{{ anchorAttributes }}>{{ anchorBody }}</a>{% endcapture %}
{% elsif skipNoIDs == true %}
{% continue %}
{% else %}
{% capture listItem %}{{ anchorBody }}{% endcapture %}
{% endif %}
{% if currLevel > lastLevel %}
{% capture jekyll_toc %}{{ jekyll_toc }}<{{ listModifier }}{{ subMenuClass }}>{% endcapture %}
{% elsif currLevel < lastLevel %}
{% assign repeatCount = lastLevel | minus: currLevel %}
{% for i in (1..repeatCount) %}
{% capture jekyll_toc %}{{ jekyll_toc }}</li></{{ listModifier }}>{% endcapture %}
{% endfor %}
{% capture jekyll_toc %}{{ jekyll_toc }}</li>{% endcapture %}
{% else %}
{% capture jekyll_toc %}{{ jekyll_toc }}</li>{% endcapture %}
{% endif %}
{% capture jekyll_toc %}{{ jekyll_toc }}<li{{ listItemClass }}>{{ listItem }}{% endcapture %}
{% assign lastLevel = currLevel %}
{% assign firstHeader = false %}
{% endfor %}
{% assign repeatCount = minHeader | minus: 1 %}
{% assign repeatCount = lastLevel | minus: repeatCount %}
{% for i in (1..repeatCount) %}
{% if i == repeatCount and include.credits == true %}
{% capture jekyll_toc %}{{ jekyll_toc }}<li><a href="#technical">Technical</a>{% endcapture %}
{% endif %}
{% capture jekyll_toc %}{{ jekyll_toc }}</li></{{ listModifier }}>{% endcapture %}
{% endfor %}
{% if jekyll_toc != '' %}
{% assign rootAttributes = '' %}
{% if include.class and include.class != blank %}
{% capture rootAttributes %} class="{{ include.class | split: '.' | join: ' ' }}"{% endcapture %}
{% endif %}
{% if include.id and include.id != blank %}
{% capture rootAttributes %}{{ rootAttributes }} id="{{ include.id }}"{% endcapture %}
{% endif %}
{% if rootAttributes %}
{% assign nodes = jekyll_toc | split: '>' %}
{% capture jekyll_toc %}<{{ listModifier }}{{ rootAttributes }}>{{ nodes | shift | join: '>' }}>{% endcapture %}
{% endif %}
{% endif %}
{% endcapture %}{% assign tocWorkspace = '' %}{{ deprecation_warnings }}{{ jekyll_toc -}}

70
.github/_includes/collection-banner.html vendored Normal file
View File

@@ -0,0 +1,70 @@
{% if page.layout == "home-infographic" and site.data.theme.featured-image %}
<style>
#home-banner {
background-image: url('{{ site.data.featured_item.src | relative_url }}');
background-size: cover;
background-repeat: no-repeat;
background-position: {{ site.data.theme.home-banner-image-position | default: 'center' }};
}
#home-title-box {
padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
}
@media screen and (max-width: 576px) {
#home-title-box {
padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
}
}
</style>
<div id="home-banner" class="container-fluid mb-0 p-0">
<a class="portfolio-site-link"
href="https://1800nasi.net/category/bqkc/"
title="Main domain to view exhibitions, programs and media features of {B/qKC}">
VIEW THE ARCHIVE IN PRACTICE →
</a>
<div id="home-title-box" class="position-relative">
<div class="p-2 text-white bg-dark bg-opacity-75 d-inline-block">
{% if site.organization-logo-nav %}
<a class="d-none d-md-block" href="{{ site.organization-link }}">
<img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home">
</a>
{% endif %}
<h1 class="display-4 m-0">{{ site.title }}</h1>
{% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
</div>
</div>
{% unless site.data.theme.featured-image contains '/' %}
<div class="featured-image-label">
<a href="{{ site.data.featured_item.link | relative_url }}"
title="{{ site.data.featured_item.alt | escape }}">
Featured Image
</a>
</div>
{% endunless %}
</div>
{%- else -%}
<div class="container">
<div class="container position-relative">
<a class="portfolio-site-link"
href="https://1800nasi.net/category/bqkc/"
title="Main domain to view exhibitions, programs and media features of {B/qKC}">
ARCHIVE IN PRACTICE →
</a>
<div class="row align-items-center">
<div id="title" class="{% if site.organization-logo-banner %}col-md-9{% else %}col-12{% endif %}">
<h1 class="mt-2"><a class="text-dark" href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
{% if site.tagline %}<p>{{ site.tagline }}</p>{% endif %}
</div>
{% if site.organization-logo-banner %}
<div class="col-md-3 d-none d-lg-block text-end">
<a class="btn btn-outline-light" href="{{ site.organization-link }}">
<img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home">
</a>
</div>
{% endif %}
</div>
</div>
{%- endif -%}

52
.github/_includes/collection-nav.html vendored Normal file
View File

@@ -0,0 +1,52 @@
<nav class="navbar navbar-expand-lg {{ site.data.theme.navbar-color | default: 'navbar-dark' }} {{ site.data.theme.navbar-background | default: 'bg-dark' }}">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#page-nav" aria-controls="page-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
{% if site.organization-logo-nav %}<span class="d-lg-none text-end">
<a href="{{ site.organization-link }}">
<img class="img-fluid" id="mobile-nav-image" src="{{ site.organization-logo-nav | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home" >
</a>
</span>{% endif %}
<div class="collapse navbar-collapse" id="page-nav">
<ul class="navbar-nav me-auto">
{%- assign navItems = site.data.config-nav | where_exp: 'item', 'item.display_name and item.dropdown_parent == nil' -%}
{% for nav in navItems %}
{% if nav.stub %}
<li class="nav-item">
<a class="nav-link{% if page.url == nav.stub %} active{% endif %}{% if nav.display_name == 'DONATE' %} donate-link{% endif %}"
href="{{ nav.stub | relative_url }}">
{{ nav.display_name }}
</a>
</li>
{%- else -%}
<li class="nav-item dropdown">
{% assign navChildren = site.data.config-nav | where_exp: 'item', 'item.dropdown_parent == nav.display_name' %}
{%- assign childStubs = navChildren | map: 'stub' -%}
<a class="nav-link dropdown-toggle{% if childStubs contains page.url %} active{% endif %}" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{{ nav.display_name }}</a>
<div class="dropdown-menu">
{% for c in navChildren %}
{% if c.stub %}
<a class="dropdown-item {% if page.url == c.stub %}active{% endif %}"
href="{{ c.stub | relative_url }}">
{{ c.display_name }}
</a>
{% else %}
<div class="dropdown-header nav-section-label">
{{ c.display_name }}
</div>
{% endif %}
{% endfor %}
</div>
</li>
{% endif %}
{%- endfor -%}
</ul>
{% include nav-search-lunr.html %}
</div>
</div>
</nav>

213
.github/_includes/data-download-modal.html vendored Normal file
View File

@@ -0,0 +1,213 @@
{% comment %}
This include creates a modal pop up with data export options.
The logic of which formats appear is based on config-nav stubs:
if subject.html, map/, location.html, or timeline.html are present,
corresponding data formats will be available for download.
{%- endcomment -%}
{%- assign stubs = site.data.config-nav | map: 'stub' | join: ';' -%}
<button type="button" class="btn btn-primary btn-lg float-md-end" data-bs-toggle="modal" data-bs-target="#dataModal">Download Data</button>
<!-- Modal -->
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="no toc">Download this collection's data in a variety of reusable formats. Beware of this archive's copyright information!</p>
{% if site.data.theme.metadata-export-fields %}
<div class="card my-3">
<div class="card-body">
<h2 class="card-title h4 no toc">Complete Metadata</h2>
<p class="card-text">All metadata fields for all collection items, available as a CSV spreadsheet (usable in Excel, Google Sheets, and similar programs) or JSON file (often used with web applications).</p>
<a href="{{ '/assets/data/metadata.csv' | relative_url }}" class="btn btn-outline-dark" download>Metadata CSV</a>
<a href="{{ '/assets/data/metadata.json' | relative_url }}" class="btn btn-outline-dark" target="_blank">Metadata JSON</a>
</div>
</div>
{%- endif -%}
{% if site.data.theme.metadata-facets-fields %}
<div class="card my-3">
<div class="card-body">
<h2 class="card-title h4 no toc">Metadata Facets</h2>
<p class="card-text no toc">List of unique values and their count for specific metadata fields, useful for understanding content of the fields.</p>
<a href="{{ '/assets/data/facets.json' | relative_url }}" class="btn btn-outline-dark" target="_blank">Facets JSON</a>
</div>
</div>
{%- endif -%}
{% if stubs contains "subject" %}
<div class="card my-3">
<div class="card-body">
<h2 class="card-title h4 no toc">Subject Metadata</h2>
<p class="card-text no toc">Unique values and counts of subject metadata, useful for further analyzing the content of this collection.</p>
<a href="{{ '/assets/data/subjects.csv' | relative_url }}" class="btn btn-outline-dark" download>Subjects CSV</a>
<a href="{{ '/assets/data/subjects.json' | relative_url }}" class="btn btn-outline-dark" target="_blank">Subjects JSON</a>
</div>
</div>
{% endif %}
{% if stubs contains "location" %}
<div class="card my-3">
<div class="card-body">
<h2 class="card-title h4 no toc">Locations</h2>
<p class="card-text no toc">Unique values and counts of location metadata, useful for further visualization and analysis of this collection's place names.</p>
<a href="{{ '/assets/data/locations.csv' | relative_url }}" class="btn btn-outline-dark" download>Locations CSV</a>
<a href="{{ '/assets/data/locations.json' | relative_url }}" class="btn btn-outline-dark" target="_blank">Locations JSON</a>
</div>
</div>
{%- endif -%}
{% if stubs contains "map" %}
<div class="card my-3">
<div class="card-body">
<h2 class="card-title h4 no toc">GeoJSON</h2>
<p class="card-text no toc">Metadata for all collection items that have geographic coordinates in <a href="https://en.wikipedia.org/wiki/GeoJSON">GeoJSON</a> format, useful for further exploration and analysis of this collection through a geographical lense.</p>
<a href="{{ '/assets/data/geodata.json' | relative_url }}" class="btn btn-outline-dark" target="_blank">Geodata JSON</a>
</div>
</div>
{%- endif -%}
{% if stubs contains "timeline" %}
<div class="card my-3">
<div class="card-body">
<h2 class="card-title h4 no toc">Timeline</h2>
<p class="card-text no toc">A time-focused JSON data export designed for use with <a href="https://timeline.knightlab.com/">TimelineJS</a>.</p>
<a href="{{ '/assets/data/timelinejs.json' | relative_url }}" class="btn btn-outline-dark" target="_blank">TimelineJS JSON</a>
</div>
</div>
{%- endif -%}
<div class="card my-3">
<div class="card-body">
<h2 class="card-title h4 no toc">Website Source Code</h2>
<p class="card-text no toc">GitHub repository containing source code for this project built with <a href="https://github.com/CollectionBuilder/collectionbuilder-csv">CollectionBuilder-CSV</a>.</p>
<a href="{{ site.source-code | default: 'https://github.com/CollectionBuilder/collectionbuilder-csv' }}" class="btn btn-outline-dark">Source Code</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="application/ld+json">
{
"@context":"https://schema.org/",
"@type":"Dataset",
"name":"{{ site.title | escape }} Data",
"description":"Metadata and data derived from {{ site.title | escape }}. {{ site.description | escape }}",
{% if site.keywords %}"keywords": {% assign keywords = site.keywords | split: ';' %} {{ keywords | jsonify }},{% endif %}
"url":"{{ page.url | absolute_url }}",
"license" : "https://creativecommons.org/publicdomain/zero/1.0/",
"creator": [
{
"@type": "Organization",
"sameAs": "{{ site.organization-link }}",
"name": "{{ site.organization-name | escape }}"
}
],
"hasPart" : [
{% if site.data.theme.metadata-facets-fields %}
{
"@type": "Dataset",
"name": "{{ site.title | escape }} Metadata Facets",
"description": "Unique values and counts of metadata facet fields.",
"license" : "https://creativecommons.org/publicdomain/zero/1.0/",
"distribution":[
{
"@type":"DataDownload",
"encodingFormat":"JSON",
"contentUrl":"{{ '/assets/data/facets.json' | absolute_url }}"
}
]
},
{%- endif -%}
{% if stubs contains "subject" %}
{
"@type": "Dataset",
"name": "{{ site.title | escape }} metadata subject counts",
"description": "Unique values and counts of metadata subject fields.",
"license" : "https://creativecommons.org/publicdomain/zero/1.0/",
"distribution":[
{
"@type":"DataDownload",
"encodingFormat":"CSV",
"contentUrl":"{{ '/assets/data/subjects.csv' | absolute_url }}"
},
{
"@type":"DataDownload",
"encodingFormat":"JSON",
"contentUrl":"{{ '/assets/data/subjects.json' | absolute_url }}"
}
]
},
{%- endif -%}
{% if stubs contains "location" %}
{
"@type": "Dataset",
"name": "{{ site.title | escape }} metadata location counts",
"description": "Unique values and counts of metadata location fields.",
"license" : "https://creativecommons.org/publicdomain/zero/1.0/",
"distribution":[
{
"@type":"DataDownload",
"encodingFormat":"CSV",
"contentUrl":"{{ '/assets/data/locations.csv' | absolute_url }}"
},
{
"@type":"DataDownload",
"encodingFormat":"JSON",
"contentUrl":"{{ '/assets/data/locations.json' | absolute_url }}"
}
]
},
{%- endif -%}
{% if stubs contains "map" %}
{
"@type": "Dataset",
"name": "{{ site.title | escape }} geographic metadata",
"description": "Geojson data containing all objects with lat-longs and associated descriptive metadata.",
"license" : "https://creativecommons.org/publicdomain/zero/1.0/",
"distribution":[
{
"@type":"DataDownload",
"encodingFormat":"JSON",
"contentUrl":"{{ '/assets/data/geodata.json' | absolute_url }}"
}
]
},
{%- endif -%}
{% if stubs contains "timeline" %}
{
"@type": "Dataset",
"name": "{{ site.title | escape }} timeline metadata",
"description": "Time-based metadata formatted for TimelineJS or other applications.",
"license" : "https://creativecommons.org/publicdomain/zero/1.0/",
"distribution":[
{
"@type":"DataDownload",
"encodingFormat":"JSON",
"contentUrl":"{{ '/assets/data/timelinejs.json' | absolute_url }}"
}
]
},
{%- endif -%}
{
"@type": "Dataset",
"name": "{{ site.title | escape }} full metadata",
"description": "Complete metadata export for {{ site.title | escape }} objects.",
"license" : "https://creativecommons.org/publicdomain/zero/1.0/",
"distribution":[
{
"@type":"DataDownload",
"encodingFormat":"CSV",
"contentUrl":"{{ '/assets/data/metadata.csv' | absolute_url }}"
},
{
"@type":"DataDownload",
"encodingFormat":"JSON",
"contentUrl":"{{ '/assets/data/metadata.json' | absolute_url }}"
}
]
}
]
}
</script>

14
.github/_includes/data-table.html vendored Normal file
View File

@@ -0,0 +1,14 @@
{% assign fields = site.data.config-table | map: 'display_name' %}
<div class="table-responsive-md">
<table id="item-table" class="table table-striped">
<thead>
<tr>
{% for f in fields %}
<th scope="col">{{ f }}</th>
{% endfor %}
<th>Link</th>
</tr>
</thead>
</table>
</div>

55
.github/_includes/feature/accordion.html vendored Normal file
View File

@@ -0,0 +1,55 @@
{% comment %}
Bootstrap accordion feature, https://getbootstrap.com/docs/5.1/components/accordion/
e.g. --> {% include feature/accordion.html title1="Example section" text1=example1 title2="Section two" text2=example2 title3="Section three" text3=example3 %}
Options:
- "title1", "title2", "title3" = title for each section of accordion (max three)
- "text1", "text2", "text3" = text for each section of accordion (max three). You will probably want to capture the text using a Liquid capture, then use the variable to provide text to this include.
- "open" = optional, by default is "false". Add "true" to have the first section of the accordion open.
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h3")
{%- endcomment -%}
<div class="accordion mb-3 narrow-content" id="accordionInclude">
<div class="accordion-item">
<{{ include.heading_level | default: 'h3' | strip }} class="accordion-header" id="headingOne">
<button class="accordion-button{% unless include.open %} collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="{% if include.open == true %}true{% else %}false{% endif %}" aria-controls="collapseOne">
{{ include.title1 }}
</button>
</{{ include.heading_level | default: 'h3' | strip }}>
<div id="collapseOne" class="accordion-collapse collapse{% if include.open == true %} show{% endif %}" aria-labelledby="headingOne" data-bs-parent="#accordionInclude">
<div class="accordion-body">
{{ include.text1 | markdownify }}
</div>
</div>
</div>
{% if include.title2 %}
<div class="accordion-item">
<{{ include.heading_level | default: 'h3' | strip }} class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
{{ include.title2 }}
</button>
</{{ include.heading_level | default: 'h3' | strip }}>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionInclude">
<div class="accordion-body">
{{ include.text2 | markdownify }}
</div>
</div>
</div>
{% endif %}
{% if include.title3 %}
<div class="accordion-item">
<{{ include.heading_level | default: 'h3' | strip }} class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
{{ include.title3 }}
</button>
</{{ include.heading_level | default: 'h3' | strip }}>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionInclude">
<div class="accordion-body">
{{ include.text3 | markdownify }}
</div>
</div>
</div>
{% endif %}
</div>

17
.github/_includes/feature/alert.html vendored Normal file
View File

@@ -0,0 +1,17 @@
{% comment %}
Bootstrap Alert, https://getbootstrap.com/docs/5.1/components/alerts/
E.G. --> {% include feature/alert.html text="example text" color="warning" align="center" %}
Options:
- "text" = text for alert, can use Markdown.
- "color" = a Bootstrap color (primary, secondary, success, danger, warning, info, light, dark)
- "align" = text alignment (center, right, left)
{%- endcomment -%}
<div class="narrow-content">
<div class="alert alert-{{ include.color | default: 'primary' }} feature-alert {% if include.align %}text-{{ include.align | default: 'center' }}{% endif %}" role="alert">
{{ include.text | markdownify }}
</div>
</div>

97
.github/_includes/feature/audio-modal.html vendored Normal file
View File

@@ -0,0 +1,97 @@
{% comment %}
Audio modal feature from an item's objectid or external link.
This include adds a card featuring the thumb image, title, and description of an audio item--when clicked it opens a modal containing the audio embed. The modal displays audio information, transcript, link to item. This is especially useful feature if you would like multiple videos on one page.
E.G. --> {% include feature/audio-modal.html objectid="demo_003" %}
It requires an "objectid" with the include, which is used to find the audio details. Alternatively, a URL to an external audio file can be used in "objectid".
Options:
- "objectid" = several options below (required)
- an objectid of an audio item in this collection, e.g. "demo_003"
- an external link to an MP3 file hosted elsewhere, e.g. "https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3"
- a relative link to an MP3 file somewhere else in this repository, e.g. "/assets/{{ includeid }}.mp3"
- "title" = by default automatically adds the title from item metadata, which will be used for the modal btn and modal title. Manually set by using the title option. (optional)
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
- "caption" = by default the figure include automatically uses the description of the item from your metadata. The caption option allows you to manually add a different caption, or give the value false for none. (optional)
- "image" = by default if using an objectid, if the item has a image_small value, the image will be used on the card. The image option allows you to manually add a image for non-collection videos. Give "false" to not display an image (optional)
- "transcript" = by default if using an objectid, if the item has a object_transcript value, the view transcript button will automatically be added. The transcript option allows you to manually add a different transcript or provide one for non-collection videos. (optional)
Note: if you have issues make sure the item is a audio item.
Audio file may not play correctly from dev server on Chrome browser! It will work in production.
{% endcomment %}
{% if include.objectid contains "/" %}
{%- capture src -%}{{ include.objectid | relative_url }}{%- endcapture -%}
{%- capture audio_link -%}{{ src }}{%- endcapture -%}
{%- capture audio_caption -%}{{ include.caption }}{%- endcapture -%}
{%- capture audio_title -%}{{ include.title }}{%- endcapture -%}
{% capture audio_transcript %}{{ include.transcript }}{% endcapture %}
{% capture audio_poster %}{% if include.image == false %}{% else %}{{ include.image | relative_url | default: '' }}{% endif %}{% endcapture %}
{% else %}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{%- capture audio_link -%}{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}{%- endcapture -%}
{%- capture src -%}{{ item.object_location | relative_url }}{% endcapture %}
{%- capture audio_caption -%}{% if include.caption %}{{ include.caption }}{% else %}{{ item.description }}{% endif %}{%- endcapture -%}
{%- capture audio_title -%}{% if include.title %}{{ include.title }}{% else %}{{ item.title }}{% endif %}{%- endcapture -%}
{% capture audio_transcript %}{{ include.transcript | default: item.object_transcript }}{% endcapture %}
{% capture audio_poster %}{% if include.image == false %}{% else %}{{ include.image | default: item.image_small | relative_url | default: '' }}{% endif %}{% endcapture %}
{% endif %}
{% capture includeid %}{% if include.objectid.size > 10 %}{{ include.objectid | slice: -10, 10 | slugify }}{% else %}{{ include.objectid | slugify }}{% endif %}{% endcapture %}
<div class="card my-3 narrow-content">
{% if audio_poster != "" %}<img src="{{ audio_poster | relative_url }}" class="card-img-top" alt="{{ audio_title | escape }}">{% endif %}
<div class="card-body text-center">
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h2">{{ audio_title }}</{{ include.heading_level | default: 'h2' | strip }}>
<p class="card-text">{{ audio_caption }}</p>
<button class="btn btn-sm btn-primary stretched-link" type="button" data-bs-toggle="modal" data-bs-target="#{{ includeid }}Modal">
Listen to Audio
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi icon-sprite" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/>
</svg>
</button>
</div>
</div>
<div class="modal fade" id="{{ includeid }}Modal" tabindex="-1" aria-labelledby="{{ includeid }}ModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="{{ includeid }}ModalLabel">{{ audio_title }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="document.querySelector('#{{ includeid }}ModalAudio').pause();"></button>
</div>
<div class="modal-body">
<p class="text-center my-3">
<audio controls class="w-100" preload="metadata" id="{{ includeid }}ModalAudio">
<source src="{{ src }}" >
Your browser does not support the audio element, please <a href="{{ audio_link }}">download the file to listen</a>.
</audio>
{% if audio_poster != "" %}<img src="{{ audio_poster | relative_url }}" class="img-fluid" alt="{{ audio_title | escape }}">{% endif %}
{% unless include.caption == false %}<p class="figure-caption">
{{ audio_caption }}
</p>{% endunless %}
</p>
</div>
<div class="modal-footer">
{% if audio_transcript != '' %}
<div class="collapse mt-3 w-100" id="collapseTranscript{{ includeid }}">
<div class="card card-body text-start">
{% assign transcript_type = audio_transcript | slice: 0,1 %}
{% if transcript_type == '/' %}
{% assign transcript_location = audio_transcript | remove_first: '/' %}
{% assign transcript = site.pages | where: 'path', transcript_location | first %}
{{ transcript.content | markdownify }}
{% else %}
{{ audio_transcript | markdownify }}
{% endif %}
</div>
</div>
<button class="btn btn-outline-primary m-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTranscript{{ includeid }}" aria-expanded="false" aria-controls="collapseTranscript{{ includeid }}">View Transcript</button>
{% endif %}
{% unless include.objectid contains '/' %}
<a href="{{ audio_link }}" class="btn btn-outline-dark m-2">Visit Item Page</a>{% endunless %}
<button type="button" class="btn btn-dark" data-bs-dismiss="modal" onclick="document.querySelector('#{{ includeid }}ModalAudio').pause();">Close</button>
</div>
</div>
</div>
</div>

37
.github/_includes/feature/audio.html vendored Normal file
View File

@@ -0,0 +1,37 @@
{% comment %}
Audio embed from an item's objectid or external link.
This include adds a audio embed to the page using the html "audio" element.
E.G. --> {% include feature/audio.html objectid="demo_003" %}
It requires an "objectid" with the include, which is used to find the audio details. Alternatively, a URL to an external audio file can be used in "objectid".
Options:
- "objectid" = several options below (required)
- an objectid of an audio item in this collection, e.g. "demo_003"
- an external link to an MP3 file hosted elsewhere, e.g. "https://www.lib.uidaho.edu/digital/mp3s/Clouds.mp3"
- a relative link to an MP3 file somewhere else in this repository, e.g. "/assets/example.mp3"
- "caption" = by default the figure include automatically adds the title of the item from your metadata. The caption option allows you to manually add a different caption, or give the value false for none. (optional)
Note: if you have issues make sure the item is a audio item.
Audio file may not play correctly from dev server on Chrome browser! It will work in production.
{%- endcomment -%}
{% if include.objectid contains "/" %}
{%- capture src -%}{{ include.objectid | relative_url }}{%- endcapture -%}
{%- capture audio_link -%}{{ src }}{%- endcapture -%}
{%- capture audio_caption -%}{{ include.caption }}{%- endcapture -%}
{% else %}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{%- capture audio_link -%}{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}{%- endcapture -%}
{%- capture src -%}{{ item.object_location | relative_url }}{% endcapture %}
{%- capture audio_caption -%}{% if include.caption %}{{ include.caption }}{% else %}{{ item.title }}{% endif %}{%- endcapture -%}
{% endif %}
<p class="text-center my-3">
<audio controls class="w-100">
<source src="{{ src }}" >
Your browser does not support the audio element.
</audio>
{% unless include.caption == false %}<small class="figure-caption"><a href="{{ audio_link }}">{{ audio_caption }}</a></small>{% endunless %}
</p>

23
.github/_includes/feature/blockquote.html vendored Normal file
View File

@@ -0,0 +1,23 @@
{% comment %}
Block quote
E.G. --> {% include feature/blockquote.html text="Knowledge comes, but wisdom lingers" speaker="Alfred Lord Tennyson" source="Locksley Hall" %}
Options:
- "text" = quote text, can use Markdown (required, hint: use a capture statement to add more complex text!)
- "speaker" = name of the person who said the quote (optional)
- "source" = title of the quote's source (optional)
- "link" = link to source, will be added to speaker/source (note: will not be added unless you have a speaker or source value!)
{%- endcomment -%}
<figure class="my-3 narrow-content">
<blockquote class="blockquote fs-3">
{{ include.text | markdownify }}
</blockquote>
{% if include.speaker or include.source %}
<figcaption class="blockquote-footer text-end fs-4">{% if include.link %}<a href="{{ include.link | relative_url }}">{% endif %}
{% if include.speaker %}{{ include.speaker }}{% if include.source %}, {% endif %}{% endif %}
{% if include.source %}<cite title="Source Title">{{ include.source }}</cite>{% endif %}
{% if include.link %}</a>{% endif %}</figcaption>{% endif %}
</figure>

19
.github/_includes/feature/button.html vendored Normal file
View File

@@ -0,0 +1,19 @@
{% comment %}
Bootstrap button link, https://getbootstrap.com/docs/5.1/components/buttons/
E.G. --> {% include feature/button.html text="Example Button Link" link="https://example.com" color="success" %}
Options:
- "text" = main button text
- "link" = button link
- "color" = a bootstrap color (primary, secondary, success, danger, warning, info, light, dark)
- "size" = optional btn size, choose from "lg", "sm" (defaults to normal size)
- "width" = will use Bootstrap sizing to set the % size, choose from "25", "50", "75", or "100"
- "centered" = give "true" to add the button to a div and center on page
- "float" = will use Bootstrap float utility to add float, choose from "start" (left) or "end" (right) (not recommended)
{%- endcomment -%}
{% if include.centered %}<p class="text-center mb-3">{%- endif -%}
<a class="btn{% if include.size %} btn-{{ include.size }}{% endif %} btn-{{ include.color | default: 'secondary' }}{% if include.float %} float-{{ include.float }}{% endif %}{% if include.width %} w-{{ include.width }}{% endif %}" href="{{ include.link }}">{{ include.text }}</a>
{% if include.centered %}</p>{%- endif -%}

36
.github/_includes/feature/card.html vendored Normal file
View File

@@ -0,0 +1,36 @@
{% comment %}
Bootstrap Card, https://getbootstrap.com/docs/5.1/components/card/
E.G. --> {% include feature/card.html text="Some text" header="Example item" objectid="demo_004" %}
Options:
- "text" = main card text, can use markdown formatting (tip: use a Liquid capture to add more complex content)
- "header" = card header text (in bar above card content)
- "title" = card title text inside card content area
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
- "objectid" = the given object or link to external image will create a card cap image
- "alt" = if adding an external image using objectid option, provide alt text for image
- "width" = will use responsive sizing to set the % size on desktop (will be 100% on mobile), choose from "25", "50", "75", or "100"
- "centered" = give "true" to add mx-auto class on the card to center it (don't use with float!)
- "float" = will use responsive float utility to add float on desktop (will not float on mobile), choose from "start" (left) or "end" (right)
{%- endcomment -%}
{%- if include.objectid contains '/' -%}
{%- capture src -%}{{ include.objectid | relative_url }}{% endcapture %}
{%- capture alt -%}{{ include.alt | default: include.title }}{% endcapture %}
{%- elsif include.objectid -%}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{%- capture src -%}{{ item.image_small | default: item.object_location | relative_url }}{% endcapture %}
{%- capture alt -%}{{ item.image_alt_text | default: item.description | default: item.title }}{% endcapture %}
{%- endif -%}
<div class="narrow-content">
<div class="card mb-3{% if include.float %} feature-float-{{ include.float }}{% endif %}{% if include.width %} feature-w-{{ include.width }}{% endif %}{% if include.centered %} mx-auto{% endif %}">
{% if src %}<img class="card-img-top" src="{{ src }}" alt="{{ alt | escape }}">{%- endif -%}
{% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header">{{ include.header }}</{{ include.heading_level | default: 'h2' | strip }}>{%- endif -%}
<div class="card-body">
{% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title">{{ include.title }}</{{ include.heading_level | default: 'h2' | strip }}>{%- endif -%}
<div class="card-text">{{ include.text | markdownify }}</div>
</div>
</div>
</div>

19
.github/_includes/feature/cloud.html vendored Normal file
View File

@@ -0,0 +1,19 @@
{% comment %}
Term cloud.
This include adds a word cloud feature based on one more metadata fields. Cloud will work best with multi-value (separated by semicolon ; ) controlled vocab type fields, such as "subject".
E.G. --> {% include feature/cloud.html fields="subject;creator" min=2 %}
Options:
- "fields" = one or more metadata fields to include in the cloud. (required)
- "min" = minimum number of times a term must appear in metadata to be displayed. Too many terms will increase load time and size of element. (optional, default 1)
- "stopwords" = words to remove from cloud terms (optional)
- "shuffle" = if "true" terms will be shuffled in random order (optional, default is alphabetical)
- "background" = change the background to a different a bootstrap color (primary, secondary, success, danger, warning, info, light, dark)
- "button" = change the button to a different a bootstrap button option (primary, secondary, success, danger, warning, info, light, dark, outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light, outline-dark)
{%- endcomment -%}
{% assign cloud_id = "cloud-div-" | append: include.fields | slugify %}
<div id="{{ cloud_id }}" class="text-center my-4 bg-{{ include.background | default: 'light' }} border rounded p-2"></div>
{% include js/cloud-js.html id=cloud_id fields=include.fields min=include.min stopwords=include.stopwords shuffle=include.shuffle button=include.button %}

22
.github/_includes/feature/collapse.html vendored Normal file
View File

@@ -0,0 +1,22 @@
{% comment %}
Bootstrap collapse feature, https://getbootstrap.com/docs/5.3/components/collapse/
e.g. --> {% include feature/collapse.html button="Learn More" color="success" text="Such an interesting story!" %}
Options:
- "button" = text of the button that triggers the collapse to open (required)
- "text" = text inside the collapse, Markdown is supported (required, hint: use a capture statement to add more complex text!)
- "color" = color for the trigger button (optional, default: primary)
{%- endcomment -%}
<p>
<button class="btn btn-{{ include.color | default: 'primary' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ include.button | slugify }}" aria-expanded="false" aria-controls="collapse{{ include.button | slugify }}">
{{ include.button }}
</button>
</p>
<div class="collapse narrow-content mb-3" id="collapse{{ include.button | slugify }}">
<div class="card card-body">
{{ include.text | markdownify }}
</div>
</div>

73
.github/_includes/feature/gallery.html vendored Normal file
View File

@@ -0,0 +1,73 @@
{% comment %}
Gallery, grid of images to be used as it's own page or within an about page.
E.G. --> (3 examples below)
{% include feature/gallery.html image-heading="demo_008" heading="Items after 1900" captions=false filter="item.date > '1900'" %}
{% include feature/gallery.html heading="All the Videos" child-objects=true gallery-type="video" %}
{% include feature/gallery.html image-heading="demo_018" heading="Items that have the subject postcard and are in Spokane" context="This uses a complex liquid filter to specify specif items." filter="item.subject contains 'postcard' and item.location contains 'Spokane'" %}
*Note that filters are CASE-SENSITIVE so if you're constructing one, either using the filter itself or the filter-field and filter-value you will need to match the case of the string search. this is unlike our browse page.*
Options:
- "filter" = logic statement (in the templating language liquid -- non liquid option indented below) that filters out most of the collection to display only select items. The first part of the statement must start with an "item." and then the category you'd like filtered, followed by an operator (https://shopify.github.io/liquid/basics/operators/) and the string or value you'd like to filter by e.g. "item.date contains '2019'".
If needed you can use the below options to construct a filter statement
- "filter-field" = the metadata field by which you'd like to filter items in your collection. i.e. title, subject, date, etc.
- "filter-value" = logic statement (in liquid) that filters out most of the collection to display only select items.
- "heading" = the heading text above the gallery (optional)
- "image-heading" = one objectid for a photo object in this collection, a relative path to an image in this project, or a full url to any image. This will include a feature/jumbotron.html includes at the top of the gallery
- "context" = a paragraph explanation of the gallery contents (optional)
- "caption" = If you don't want captions for your items, add --> captions=false with no quotations. Captions are on by default
- "item-size" = tiny, small, medium, large; default is medium, which is 3 items per row on a laptop screen size.
- "gallery-type" = this will determine how the items appear, so choosing 'video' will cause the gallery to display all items as embedded videos options: image, video, pdf, audio. Default is "image" (optional)
- container-styles = adds css classes to allow you to style the container in which the gallery appears, e.g. "w-75 mx-auto"
- item-styles = adds css classes to allow you to style the container in which the individual items appears, e.g. "card py-3"
- "image-size" - will adjust the size of the images used in the gallery, options: original, small, thumb. Default is "small" (optional)
- "child-objects" = include child items in count or only parents, true or false (optional, default false)
- "limit" will limit the number of items featured to the number included, default 50 (optional)
{%- endcomment -%}
{% if include.child-objects == true %}
{%- assign gallery-items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
{% else %}
{%- assign gallery-items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
{% endif %}
{% if include.gallery-type %}
{%- assign gallery-items = gallery-items | where_exp: "item","item.display_template == include.gallery-type" -%}
{% else %}
{%- assign gallery-items = gallery-items | where_exp: "item","item.image_small != nil or item.image_thumb != nil" -%}
{% endif %}
{%- if include.filter-field and include.filter-value -%}
{%- assign gallery-items = gallery-items | where_exp: 'item','item[include.filter-field] contains include.filter-value' -%}
{%- elsif include.filter -%}
{%- assign gallery-items = gallery-items | where_exp: 'item',include.filter -%}
{% endif %}
{% assign gallery-limit = include.limit | default: 50 %}
{% capture captions %}{{ include.captions | default: "true" }}{% endcapture %}
{% if include.image-heading and include.heading%}
{% include feature/jumbotron.html objectid=include.image-heading heading=include.heading text=false padding="5rem" %}
{% elsif include.image-heading %}
{% include feature/jumbotron.html objectid=include.image-heading %}
{% elsif include.heading %}
<h2>{{ include.heading }}</h2>{% endif %}
<div class="row my-3 py-3 {{ include.container-styles }}">
{% if include.context %}<p> {{include.context}} </p>{% endif %}
{% for item in gallery-items limit:gallery-limit %}
<div class="{% if include.item-size == 'tiny' %}col-lg-2 col-sm-4 col-xs-6{% elsif include.item-size == 'small' %}col-lg-3 col-sm-6{% elsif include.item-size == 'large' %}col-xl-4 col-lg-6{% else %}col-lg-4 col-sm-6{% endif %} {{ include.item-styles }}">
{% if include.gallery-type == "video" %}
{% include feature/video.html objectid=item.objectid caption=include.captions %}
{% elsif include.gallery-type == "pdf" %}
{% include feature/pdf.html objectid=item.objectid caption=include.captions %}
{% elsif include.gallery-type == "audio" %}
{% include feature/audio.html objectid=item.objectid caption=include.captions %}
{% else %}
{% include feature/image.html objectid=item.objectid caption=include.captions %}{% endif %}
</div>
{% endfor %}
</div>

15
.github/_includes/feature/icon.html vendored Normal file
View File

@@ -0,0 +1,15 @@
{%- comment -%}
Bootstrap Icons, https://icons.getbootstrap.com/
This include adds a bootstrap icon using the SVG Sprite approach. This works similar to Icon Fonts. The svg will inherit font size and color from the parent, so can be used with other text.
E.G. --> {% include feature/icon.html icon="file-play" label="Audio file" %}
Options:
- "icon" = a Bootstrap Icon name, e.g. "file-image", "file-play"
- "label" = a label for accessibility (optional)
- "class" = extra classes to add directly to the svg element (optional)
{%- endcomment -%}
<svg class="bi icon-sprite {% if include.class %}{{ include.class }}{% endif %}" {% if include.label %}role="img" aria-label="{{ include.label | escape }}"{% else %}aria-hidden="true"{% endif %}><use xlink:href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/icons/bootstrap-icons.svg#{{ include.icon }}" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/icons/bootstrap-icons.svg#{{ include.icon }}"></use></svg>

62
.github/_includes/feature/image.html vendored Normal file
View File

@@ -0,0 +1,62 @@
{% comment %}
Image embed from an item's objectid or external link.
This include adds a figure to the page styled using bootstrap, https://getbootstrap.com/docs/5.1/content/figures/
It requires an "objectid" with the include, which is used to find the object title and image (for collection items). If multiple collection objectids are included (separated by ; ), they will be added to a "col-md" in a row which will automatically divided equally.
Alternatively, a URL to an external image can be used in "objectid".
E.G. --> {% include feature/image.html objectid="demo_001" %}
Options:
- "objectid" = several options below (required)
1. one or more objectids from this collection, separated by semicolon, e.g. "demo_001" or "demo_001;demo_005"
2. a full URL to an external image file, e.g. "https://www.lib.uidaho.edu/digital/images/fluffyclouds.jpg"
3. a relative link to an image file stored in this repository (that is not included in the collection), i.e. "/assets/img/evan.jpg"
IMPORTANT NOTE: Options 2 and 3 require you to add an "alt" option (or "alt" options for multiple images) in order to allow for the accessibility enabled by the "alt" tag
- "alt" = alternative text describing the image. This is a required accessibility feature IF you are using an external URL or a relative link (options 2 and 3 above)--it will be automatically filled if providing an objectid. For multiple alts, split using a semi-colon. If you do not fill this in but fill in the "caption" option, the "caption" will be included as the images alt value. (optional)
- "caption" = for option 1 above, the figure include automatically adds the title of the item from your metadata. The caption option allows you to manually add a different caption for that option, or give the value false ('caption=false' - no quotes around false) for none. For options 2 and 3, captions will only be added if the caption variable is set. For multiple images of any option, you can also use multiple captions, by splitting them with a semi-colons (optional)
- "link" = for option 1 above, the figure include automatically links to the item from your metadata. The link option allows you to manually add a different link for that image. For options 2 and 3, link will only be added if the link variable is set; otherwise, the link will be set to the external or relative image file. For multiple images of any option, you can also use multiple links, by splitting them with a semi-colons (optional)
- "width" = will use responsive sizing to set the % size on desktop (will be 100% on mobile), choose from "25", "50", "75", or "100" (optional)
{%- endcomment -%}
{%- assign figures = include.objectid | split: ";" %}
{%- assign figcount = figures | size -%}
{%- assign captions = include.caption | split: ";" %}
{%- assign alts = include.alt | split: ";" -%}
{%- assign links = include.link | split: ";" -%}
<div class="row feature-include">
{% for i in figures %}
{% if i contains "/" %}
{%- capture image_src -%}{{ i | relative_url }}{%- endcapture -%}
{%- capture image_caption -%}{{ captions[forloop.index0] }}{%- endcapture -%}
{%- capture image_alt -%}{{ alts[forloop.index0] }}{%- endcapture -%}
{%- capture image_link -%}{{ links[forloop.index0] | default: image_src }}{%- endcapture -%}
{% else %}
{%- assign figure = site.data[site.metadata] | where: "objectid", i | first -%}
{%- capture image_link -%}{{ '/items/' | relative_url }}{% if figure.parentid %}{{ figure.parentid }}.html#{{ figure.objectid }}{% else %}{{ figure.objectid }}.html{% endif %}{% endcapture %}
{%- capture image_caption -%}{{ captions[forloop.index0] | default: figure.title }}{%- endcapture -%}
{%- capture image_alt -%}{{ alts[forloop.index0] | default: figure.image_alt_text | default: figure.description | default: figure.title }}{%- endcapture -%}
{%- capture image_src -%}{{ figure.image_small | default: figure.object_location | relative_url }}{% endcapture %}
{% endif %}
<div class="col-md {% if figcount == 1 %}{% elsif forloop.first %}text-md-end{% elsif forloop.last %}text-md-start{% else %}text-center{% endif %}">
<figure class="figure {% if include.width %}feature-w-{{ include.width }}{% endif %}">
<a href="{{ image_link | default: image_src }}">
<img class="figure-img img-fluid rounded lazyload w-100" alt="{{ image_alt | default: image_caption | escape }}" title="click to see item" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E" data-src="{{ image_src }}" >
</a>
{% unless include.caption == false %}
<figcaption class="figure-caption text-center text-muted" style="font-size: 0.85rem; width: 100%; margin-top: 0.5rem;">
<a href="{{ image_link }}"><strong>{{ figure.objectid }}</strong></a>
| {{ figure.description }}
{% if figure.date_created or figure.collection %}
{% endif %}
</figcaption>
{% endunless %}
</figure>
</div>{% endfor %}
</div>

63
.github/_includes/feature/jumbotron.html vendored Normal file
View File

@@ -0,0 +1,63 @@
{% comment %}
Bootstrap Jumbotron, https://getbootstrap.com/docs/5.1/examples/jumbotron/
This include adds a Jumbotron feature from an objectid.
E.G. --> {% include feature/jumbotron.html objectid="demo_001" %}
Options:
- "objectid" = one objectid for a photo object in this collection, a relative path to an image in this project, or a full url to any image. If left blank, by default this the image will be the featured-image set in theme.yml.
- "position" = set background-position, "center", "top", "bottom"
- "heading" = major heading to display. By default this will be the site title. Give the value false for no heading.
- "text" = paragraph text below heading. By default this will be the site tagline. Give the value false for no text.
- "padding" = additional padding added to the feature to increase size. Give value in em or px, e.g. "5em".
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
Note: if using a YouTube item and an error image appears, the video may not have a "maxresdefault" image available. Replace "maxresdefault.jpg" in the code below with "hqdefault.jpg"
{%- endcomment -%}
{% assign jumbo_div_id = "j-" | append: include.objectid | slugify | truncate: 12, "" %}
{% assign jumboId = include.objectid | default: site.data.featured_item.src %}
{% if jumboId contains '/' %}
{% assign jumboSrc = jumboId | relative_url %}
{% else %}
{% assign jumboItem = site.data[site.metadata] | where: "objectid", jumboId | first %}
{% capture jumboSrc %}{{ jumboItem.object_location | default: jumboItem.image_small | relative_url }}{% endcapture %}
{%- endif -%}
<style>
.jumbotron {
padding: 4rem 2rem;
margin-bottom: 2rem;
background-color: #e9ecef;
border-radius: 0.3rem;
}
#{{ jumbo_div_id }} {
background-image: url({{ jumboSrc }});
background-size: cover;
background-repeat: no-repeat;
background-position: {{ include.position | default: 'center' }};
}
{% if include.padding %}
.jumbo-title-box {
padding-top: {{ include.padding }};
padding-bottom: {{ include.padding }};
}
{%- endif -%}
@media screen and (max-width: 576px) {
.jumbo-title-box {
max-height: 500px;
}
.jumbo-tagline { font-size:.85em; }
}
</style>
<div class="jumbotron feature px-0 border" id="{{ jumbo_div_id }}">
<div class="jumbo-title-box">
{% unless include.heading == false and include.text == false %}
<div class="p-2 text-center text-white bg-dark bg-opacity-75">
{% unless include.heading == false %}<{{ include.heading_level | default: 'h2' | strip }} class="display-4">{{ include.heading | default: site.title }}</{{ include.heading_level | default: 'h2' | strip }}>{% endunless %}
{% unless include.text == false %}<p class="jumbo-tagline">{{ include.text | default: site.tagline }}</p>{% endunless %}
</div>
{% endunless %}
</div>
</div>

67
.github/_includes/feature/mini-map.html vendored Normal file
View File

@@ -0,0 +1,67 @@
{% comment %}
Mini Leaflet Map item feature.
This include adds a small leaflet map.
E.G> --> {% include feature/mini-map/ latitude="46.725562" longitude="-117.009633" %}
Options:
- "objectid" = feature a specific item from your metadata that has lat long. Using this option will set the map center and add a single marker to the map.
- "latitude" = center of map, required if not using objectid
- "longitude" = center of map, required if not using objectid
- "height" = height of the mini map in px (default 400px)
- "map-zoom" = provide a zoom level, default 10
- "map-link" = true/false, add a button link to the collection's default full map page (default false)
- "basemap" = set basemap option, Esri_WorldStreetMap, Esri_NatGeoWorldMap, Esri_WorldImagery. default Esri_WorldImagery.
{% endcomment %}
{% capture map_id %}mini-map_{{ include.latitude | slugify }}{% endcapture %}
{% assign map-item = site.data[site.metadata] | where: "objectid", include.objectid | first %}
<style>
#{{ map_id }} { height: {{ include.height | default: '400px' }}; z-index: 98; }
</style>
<div id="{{ map_id }}"></div>
{% if include.map-link == true %}
<a href="{{ '/map/' | relative_url }}?location={{ map-item.latitude | default: include.latitude }},{{ map-item.longitude | default: include.longitude }}{%if include.objectid %}&marker={{ include.objectid }}{% endif %}" class="btn btn-outline-primary my-3">View on Full Map</a>{% endif %}
<!-- load leaflet dependencies -->
<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.css">
<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.fullscreen.css">
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.js"></script>
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/Leaflet.fullscreen.min.js"></script>
<script>
// initial start point
var mapCenter = [{{ map-item.latitude | default: include.latitude }}, {{ map-item.longitude | default: include.longitude }}];
var mapZoom = {{ include.map-zoom | default: 10 }};
/* init map, set center and zoom */
var map = L.map('{{ map_id }}').setView(mapCenter, mapZoom);
/* add map layer options */
var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
});
var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
});
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
/* add base map switcher */
var baseMaps = {
"Esri World StreetMap": Esri_WorldStreetMap,
"Esri National Geo": Esri_NatGeoWorldMap,
"Esri Imagery": Esri_WorldImagery
};
L.control.layers(baseMaps).addTo(map);
/* load base map */
{{ include.basemap | default: 'Esri_WorldImagery' }}.addTo(map);
/* add fullscreen control */
map.addControl(new L.Control.Fullscreen());
{% if include.objectid %}
/* add marker */
L.marker(mapCenter).addTo(map)
.bindPopup('{{ map-item.title | escape }}');{% endif %}
</script>

31
.github/_includes/feature/modal.html vendored Normal file
View File

@@ -0,0 +1,31 @@
{% comment %}
Bootstrap Modal, https://getbootstrap.com/docs/5.1/components/modal/
E.G. --> {% include feature/modal.html button="More Info" color="info" title="Information" text="Example text" %}
Options:
- "button" = text of button to trigger modal
- "color" = color of modal button (primary, secondary, success, danger, warning, info, light, dark)
- "title" = header text for modal pop up
- "text" = body text for modal pop up, can use markdown formatting (tip: use a Liquid capture to add more complex content)
{%- endcomment -%}
<!-- Button trigger modal -->
<p class="text-center mb-3">
<button type="button" class="btn btn-{{ include.color | default: 'primary' }}" data-bs-toggle="modal" data-bs-target="#{{ include.button | slugify }}Modal">{{ include.button }}</button>
</p>
<!-- Modal -->
<div class="modal fade" id="{{ include.button | slugify }}Modal" tabindex="-1" role="dialog" aria-labelledby="{{ include.button | slugify }}ModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="{{ include.button | slugify }}ModalLabel">{{ include.title }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" >
{{ include.text | markdownify }}
</div>
</div>
</div>
</div>

17
.github/_includes/feature/nav-menu.html vendored Normal file
View File

@@ -0,0 +1,17 @@
{% comment %}
About Page Nav Menu include,
add a basic nav at top of About page.
E.G. --> {% include feature/nav-menu.html sections="Background;Timeline;More Information" %}
Options:
- "sections" = headers to be added to the nav separated by semicolon (;), exactly copy text from any header written in markdown on the page (i.e. ## Example header)
Note: styling in _sass/_pages.scss adds 100px margin to top of h2 on the about page to accommodate the sticky-top option of this element. If you add headers other than h2 to this nav, they will likely overlap under the element when jumping to the section. Similarly, if more than a handful of sections or long section titles are added, the box will overlap the headers when jumping. Modify the spacing in the scss, or remove the "sticky-top" class to fix.
{%- endcomment -%}
{% assign sections = include.sections | split: ';'%}
<p class="h6 shadow-sm p-3 about-nav sticky-top bg-white">
Contents: {% for section in sections %}<a class="mx-2" href="#{{ section | slugify }}">{{ section }}</a> {% unless forloop.last %}| {% endunless %}{% endfor %}{% if page.credits == true %}| <a class="mx-2" href="#technical">Tech</a>{% endif %}
</p>

43
.github/_includes/feature/pdf.html vendored Normal file
View File

@@ -0,0 +1,43 @@
{% comment %}
Item PDF embed from objectid or external link.
This include adds a PDF embed to the page using html5 "object" element.
E.G. --> {% include feature/pdf.html objectid="demo_002" %}
It requires an "objectid" with the include, which is used to find the object details. Alternatively, a URL to an external pdf can be used in "objectid".
By default no height is necessary as it uses 1x1 Bootstrap ratio style, https://getbootstrap.com/docs/5.1/helpers/ratio/
Options:
- "objectid" = several options below (required)
1. an objectid of a PDF item in this collection, e.g. "demo_004"
2. an external link to a PDF file hosted elsewhere, e.g. "https://www.lib.uidaho.edu/digital/pdfs/cloudtypes.pdf"
3. a relative link to a PDF file somewhere else in this repository, e.g. "/assets/pdfs/sometrees.pdf"
- "caption" = by default the figure include automatically adds the title of the item from your metadata. The caption option allows you to manually add a different caption, or give the value false for none. (optional)
- "width" = will use responsive sizing to set the % size on desktop (will be 100% on mobile), choose from "25", "50", "75", or "100" (optional)
- "height" = set embed object height in px (rather than responsive size), e.g. "800px" (optional)
- "ratio" = use Bootstrap embed ratio options "21x9", "16x9", "4x3", or "1x1" to customize the responsive aspect ratio if not using height. 1x1 is default. (optional)
Note: if you have issues make sure the item is a PDF file!
{%- endcomment -%}
{% if include.objectid contains "/" %}
{%- capture src -%}{{ include.objectid | relative_url }}{%- endcapture -%}
{%- capture pdf_link -%}{{ src }}{%- endcapture -%}
{%- capture pdf_caption -%}{{ include.caption }}{%- endcapture -%}
{% else %}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{%- capture src -%}{{ item.object_location | relative_url }}{% endcapture %}
{%- capture pdf_link -%}{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}{%- endcapture -%}
{%- capture pdf_caption -%}{% if include.caption %}{{ include.caption }}{% else %}{{ item.title }}{% endif %}{%- endcapture -%}
{% endif %}
<div class="feature-include">
<figure class="figure border rounded p-1 feature-w-{{ include.width | default: '100' }}">
<div class="{% unless include.height %}ratio ratio-{{ include.ratio | default: '1x1' }}{% endunless %}">
<object aria-label="pdf embed of {{ pdf_caption | escape }}" {% if include.height %}width="100%" height="{{ include.height }}"{% endif %} data="{{ src }}">
<p>The PDF is not rendering in your browser. Please <a href="{{ src }}">download the PDF</a> to view.</p>
</object>
</div>
{% unless include.caption == false %}<figcaption class="figure-caption text-center"><a href="{{ pdf_link }}">{{ pdf_caption }}</a></figcaption>{% endunless %}
</figure>
</div>

31
.github/_includes/feature/timelinejs.html vendored Normal file
View File

@@ -0,0 +1,31 @@
{% comment %}
Embed a TimelineJS feature, https://timeline.knightlab.com/
E.G. --> {% include feature/timelinejs.html %}
Embeds a TimelineJS built from a JSON file appropriate for any CollectionBuilder page (such as Home or About page).
CB templates automatically generate a timelinejs json file in "assets/data/timelinejs.json" including all items in metadata with a value in "date" field.
By default, this include uses this json file.
Options:
- "json" = (optional) path or link to timelinejs json file.
{% endcomment %}
{%- assign json = include.json | default: '/assets/data/timelinejs.json' | relative_url -%}
<!-- timelinejs, https://timeline.knightlab.com/ -->
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<div id="timeline-embed" style="width: 100%; height: 800px" class="mb-4"></div>
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<script type="text/javascript">
// The TL.Timeline constructor takes at least two arguments:
// the id of the Timeline container (no '#'), and
// the URL to your JSON data file or Google spreadsheet.
// the id must refer to an element "above" this code,
// and the element must have CSS styling to give it width and height
// optionally, a third argument with configuration options can be passed.
// See below for more about options.
timeline = new TL.Timeline('timeline-embed', '{{ json }}');
</script>

128
.github/_includes/feature/video-modal.html vendored Normal file
View File

@@ -0,0 +1,128 @@
{% comment %}
Video modal feature from an item's objectid or external link.
This include adds a card featuring the thumb image, title, and description of a video--when clicked it opens a modal containing the video embed. The modal displays video information, transcript, link to item. This is especially useful feature if you would like multiple videos on one page.
E.G. --> {% include feature/video-modal.html objectid="demo_004" %}
It requires an "objectid" with the include, which is used to find the video details. Alternatively, a URL to an external video can be used in "objectid".
YouTube and Vimeo items will use iframe embeds, video files use html video element.
Options:
- "objectid" = several options below (required)
1. an objectid of a video item in this collection, e.g. "demo_003"
2. a full URL to a video hosted on YouTube, e.g. https://youtu.be/dbKNr3wuiuQ
3. a full URL to a video hosted on Vimeo, e.g. https://vimeo.com/464555587
4. a full URL to an external video file (supported by browsers, generally mp4), e.g. "https://www.lib.uidaho.edu/digital/videos/fluffyclouds.mp4"
5. a relative link to a video file stored in this repository (that is not included in the collection), i.e. "/assets/videos/cloudyskies.mp4"
- "title" = by default automatically adds the title from item metadata, which will be used for the card and modal title. Manually set by using the title option. (optional)
- "heading_level" = customize the level of the card heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
- "caption" = by default the include automatically adds the description of the item from your metadata. The caption option allows you to manually add a different caption, or give the value false for none. (optional)
- "transcript" = by default if using an objectid, if the item has a object_transcript value, the view transcript button will automatically be added. The transcript option allows you to manually add a different transcript or provide one for non-collection videos. (optional)
- "image" = by default if using an objectid, if the item has a image_small value, the image will be used on the card and as the poster for video file embeds (not youtube). The image option allows you to manually add a image for non-collection videos. Give "false" to have no image displayed on the card (optional)
- "ratio" = use Bootstrap embed ratio options "21x9", "16x9", "4x3", or "1x1" to customize the responsive aspect ratio. 16by9 is default. (optional)
Note: if you have issues make sure the item is a video item and a web friendly format
{% endcomment %}
{%- if include.objectid contains '/' -%}
{%- capture video_title -%}{{ include.title }}{%- endcapture -%}
{% capture video_caption %}{{ include.caption }}{% endcapture %}
{% capture video_poster %}{{ include.image }}{% endcapture %}
{% capture video_transcript %}{{ include.transcript }}{% endcapture %}
{% capture raw_src %}{{ include.objectid }}{% endcapture %}
{%- capture video_link -%}{{ raw_src | relative_url }}{%- endcapture -%}
{%- else -%}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{%- capture video_title -%}{% if include.title %}{{ include.title }}{% else %}{{ item.title }}{% endif %}{%- endcapture -%}
{% capture video_caption %}{% if include.caption %}{{ include.caption }}{% else %}{{ item.description }}{% endif %}{% endcapture %}
{% capture video_poster %}{{ include.image | default: item.image_small | default: '' }}{% endcapture %}
{% capture video_transcript %}{{ include.transcript | default: item.object_transcript }}{% endcapture %}
{% capture raw_src %}{{ item.object_location }}{% endcapture %}
{%- capture video_link -%}{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}{%- endcapture -%}
{%- endif -%}
{%- if raw_src contains 'vimeo' -%}
{% assign vimeo_id = raw_src | split: '/' | last %}
{% capture video_src %}https://player.vimeo.com/video/{{ vimeo_id }}{% endcapture %}
{% assign video_type = 'vimeo' %}
{%- elsif raw_src contains 'youtu' -%}
{% assign youtube_id = raw_src | 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 %}
{% capture video_src %}https://www.youtube-nocookie.com/embed/{{ youtube_id }}?enablejsapi=1&rel=0&modestbranding=1{% endcapture %}
{% assign video_type = 'youtube' %}
{%- else -%}
{% assign video_src = raw_src | relative_url %}
{% assign video_type = 'video' %}
{%- endif -%}
{% capture includeid %}{% if include.objectid.size > 10 %}{{ include.objectid | slice: -10, 10 | slugify | replace: "-","_" }}{% else %}{{ include.objectid | slugify | replace: "-","_" }}{% endif %}{% endcapture %}
{% capture stop_media %}{% endcapture %}
<script>
function stopMedia{{ includeid }}() {
{% if video_type == 'youtube' %}const message = JSON.stringify({ event: 'command', func: 'pauseVideo', args: '' }); document.querySelector('#{{ includeid }}ModalVideo iframe').contentWindow.postMessage(message, '*');{% elsif video_type == 'vimeo' %}document.querySelector('#{{ includeid }}ModalVideo iframe').contentWindow.postMessage('{"method":"pause"}', '*');{% else %}document.querySelector('#{{ includeid }}ModalVideo video').pause();{% endif %}
}
</script>
<div class="card my-3 narrow-content">
{% if include.image != false and video_poster != '' %}<img src="{{ video_poster | relative_url }}" class="card-img-top" alt="{{ video_title | escape }}">{% endif %}
<div class="card-body text-center">
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h2">{{ video_title }}</{{ include.heading_level | default: 'h2' | strip }}>
<p class="card-text">{{ video_caption }}</p>
<button class="btn btn-sm btn-primary stretched-link" type="button" data-bs-toggle="modal" data-bs-target="#{{ includeid }}Modal">
View Video
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi icon-sprite" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/>
</svg>
</button>
</div>
</div>
<div class="modal fade" id="{{ includeid }}Modal" tabindex="-1" aria-labelledby="{{ includeid }}ModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="{{ includeid }}ModalLabel">{{ video_title }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="stopMedia{{ includeid }}()"></button>
</div>
<div class="modal-body">
<figure class="">
<div class="ratio ratio-{{ include.ratio | default: '16x9' }}" id="{{ includeid }}ModalVideo">
{%- if video_src contains "vimeo" or video_src contains "youtu" -%}
<iframe title="video embed {{ video_title | escape }}" src="{{ video_src }}" allowfullscreen></iframe>
{% else %}
<video {% if video_poster %}poster="{{ video_poster | relative_url }}"{% endif %} preload="metadata" controls>
<source src="{{ video_src }}">
Your browser does not support the video tag, please <a href="{{ video_link }}">download the file to watch</a>.
</video>
{%- endif -%}
</div>
{% unless include.caption == false %}
<figcaption class="figure-caption text-center">
{{ video_caption }}
</figcaption>
{% endunless %}
</figure>
</div>
<div class="modal-footer">
{% if video_transcript != '' %}
<div class="collapse mt-3 w-100" id="collapseTranscript{{ includeid }}">
<div class="card card-body text-start">
{% assign transcript_type = video_transcript | slice: 0,1 %}
{% if transcript_type == '/' %}
{% assign transcript_location = video_transcript | remove_first: '/' %}
{% assign transcript = site.pages | where: 'path', transcript_location | first %}
{{ transcript.content | markdownify }}
{% else %}
{{ video_transcript | markdownify }}
{% endif %}
</div>
</div>
<button class="btn btn-outline-primary m-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTranscript{{ includeid }}" aria-expanded="false" aria-controls="collapseTranscript{{ includeid }}">View Transcript</button>
{% endif %}
{% unless include.objectid contains '/' %}
<a href="{{ video_link }}" class="btn btn-outline-dark m-2">Visit Item Page</a>{% endunless %}
<button type="button" class="btn btn-dark" data-bs-dismiss="modal" onclick="stopMedia{{ includeid }}()">Close</button>
</div>
</div>
</div>
</div>

84
.github/_includes/feature/video.html vendored Normal file
View File

@@ -0,0 +1,84 @@
{% comment %}
Video embed from an item's objectid or external link.
This include adds a video embed to the page using Bootstrap ratio styles, https://getbootstrap.com/docs/5.1/helpers/ratio/
E.G. --> {% include feature/video.html objectid="demo_003" %}
It requires an "objectid" with the include, which is used to find the video details. Alternatively, a URL to an external video can be used in "objectid".
YouTube and Vimeo items will use iframe embeds, video files use html video element.
Options:
- "objectid" = several options below (required)
1. an objectid of a video item in this collection, e.g. "demo_003"
2. a full URL to a video hosted on YouTube, e.g. https://youtu.be/dbKNr3wuiuQ
3. a full URL to a video hosted on Vimeo, e.g. https://vimeo.com/464555587
4. a full URL to an external video file (supported by browsers, generally mp4), e.g. "https://www.lib.uidaho.edu/digital/videos/fluffyclouds.mp4"
5. a relative link to a video file stored in this repository (that is not included in the collection), i.e. "/assets/videos/cloudyskies.mp4"
- "caption" = by default the include automatically adds the title of the item from your metadata. The caption option allows you to manually add a different caption, or give the value false for none. (optional)
- "transcript" = by default if using an objectid, if the item has a object_transcript value, the view transcript button will automatically be added. The transcript option allows you to manually add a different transcript or provide one for non-collection videos. (optional)
- "cover" = by default if using an objectid, if the item has a image_small value, the image will be used as the cover for video file embeds (not youtube). The cover option allows you to manually add a cover image for non-collection videos. (optional)
- "width" = will use responsive sizing to set the % size on desktop (will be 100% on mobile), choose from "25", "50", "75", or "100" (optional)
- "ratio" = use Bootstrap embed ratio options "21x9", "16x9", "4x3", or "1x1" to customize the responsive aspect ratio. 16by9 is default. (optional)
Note: if you have issues make sure the item is a video item and a web friendly format
{%- endcomment -%}
{%- if include.objectid contains '/' -%}
{% capture video_caption %}{{ include.caption }}{% endcapture %}
{% capture video_poster %}{{ include.cover }}{% endcapture %}
{% capture video_transcript %}{{ include.transcript }}{% endcapture %}
{% capture raw_src %}{{ include.objectid }}{% endcapture %}
{%- else -%}
{%- assign item = site.data[site.metadata] | where: "objectid", include.objectid | first -%}
{% capture video_caption %}{% if include.caption %}{{ include.caption }}{% else %}<a href="{{ '/items/' | relative_url }}{% if item.parentid %}{{ item.parentid }}.html#{{ item.objectid }}{% else %}{{ item.objectid }}.html{% endif %}">{{ item.title }}</a>{% endif %}{% endcapture %}
{% capture video_poster %}{{ include.cover | default: item.image_small | default: '' }}{% endcapture %}
{% capture video_transcript %}{{ include.transcript | default: item.object_transcript }}{% endcapture %}
{% capture raw_src %}{{ item.object_location }}{% endcapture %}
{%- endif -%}
{%- if raw_src contains 'vimeo' -%}
{% assign vimeo_id = raw_src | split: '/' | last %}
{% capture video_src %}https://player.vimeo.com/video/{{ vimeo_id }}{% endcapture %}
{%- elsif raw_src contains 'youtu' -%}
{% assign youtube_id = raw_src | 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 %}
{% capture video_src %}https://www.youtube-nocookie.com/embed/{{ youtube_id }}?rel=0&modestbranding=1{% endcapture %}
{%- else -%}
{% assign video_src = raw_src | relative_url %}
{%- endif -%}
{% capture includeid %}{% if include.objectid.size > 8 %}{{ include.objectid | slice: -8, 8 | slugify }}{% else %}{{ include.objectid | slugify }}{% endif %}{% endcapture %}
<div class="feature-include my-4">
<figure class="{% if include.width %} feature-w-{{ include.width }}{% endif %}">
<div class="ratio ratio-{{ include.ratio | default: '16x9' }}">
{%- if video_src contains "vimeo" or video_src contains "youtu" -%}
<iframe title="video embed {{ video_caption | escape }}" src="{{ video_src }}" allowfullscreen></iframe>
{% else %}
<video {% if video_poster %}poster="{{ video_poster | relative_url }}"{% endif %} preload="metadata" controls>
<source src="{{ video_src }}">
Your browser does not support the video tag.
</video>
{%- endif -%}
</div>
{% unless include.caption == false %}
<figcaption class="figure-caption text-center">
{{ video_caption }}
{% if video_transcript != '' %}<br>
<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTranscript{{ includeid }}" aria-expanded="false" aria-controls="collapseTranscript{{ includeid }}">View Transcript</button>
<div class="collapse mt-3" id="collapseTranscript{{ includeid }}">
<div class="card card-body text-start">
{% assign transcript_type = video_transcript | slice: 0,1 %}
{% if transcript_type == '/' %}
{% assign transcript_location = video_transcript | remove_first: '/' %}
{% assign transcript = site.pages | where: 'path', transcript_location | first %}
{{ transcript.content | markdownify }}
{% else %}
{{ video_transcript | markdownify }}
{% endif %}
</div>
</div>
{% endif %}
</figcaption>
{% endunless %}
</figure>
</div>

12
.github/_includes/foot.html vendored Normal file
View File

@@ -0,0 +1,12 @@
<!-- Bootstrap bundle JS -->
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/bootstrap.bundle.min.js"></script>
<!-- load other js -->
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/lazysizes.min.js" async></script>
{% if layout.gallery == true or page.gallery == true %}<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/spotlight.bundle.js" defer></script>{% endif %}
{% if page.custom-foot or layout.custom-foot %}
{%- assign page_feet = page.custom-foot | split: ";" -%}
{%- assign layout_feet = layout.custom-foot | split: ";" -%}
{%- assign feet = page_feet | concat: layout_feet -%}
{% for f in feet %}{% include {{ f }} %}
{% endfor %}
{%- endif -%}

47
.github/_includes/footer.html vendored Normal file
View File

@@ -0,0 +1,47 @@
<div class="row border-bottom border-white pb-4 mb-2 footer-top">
<!-- LEFT: Title / description / nav -->
<div class="col-md-7 px-4 mt-3 footer-text">
<h2 class="h4">
<a href="{{ '/' | relative_url }}" class="text-white">{{ site.title }}</a>
</h2>
<p class="text-white">
<small>{{ site.description }}</small>
</p>
<nav>
<ul id="footer-nav" class="nav nav-pills">
{%- assign navItems = site.data.config-nav | where_exp: 'item', 'item.dropdown_parent == nil' -%}
{% for nav in navItems %}
<li class="nav-item">
{% if nav.stub %}
<a class="nav-link text-light{% if page.url == nav.stub %} active{% endif %}"
href="{{ nav.stub | relative_url }}">{{ nav.display_name }}</a>
{%- else -%}
{% assign childStub = site.data.config-nav | where_exp: 'item', 'item.dropdown_parent == nav.display_name and item.stub' | first %}
<a class="nav-link text-light{% if page.url == childStub.stub %} active{% endif %}"
href="{{ childStub.stub | relative_url }}">{{ nav.display_name }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
<!-- RIGHT: Spinning logo -->
<div class="col-md-5 mt-3 d-flex justify-content-center justify-content-md-end align-items-center">
<div class="footer-logo-spinner">
<video autoplay loop muted playsinline>
<source src="{{ '/assets/video/bqkc-logo.mp4' | relative_url }}" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="col-md-12 text-center pt-3 pb-1">
<p class="text-white">Last updated {{ site.time | date: "%Y-%m-%d" }} | Built with <a href="/data/">CollectionBuilder</a></p>
</div>
</footer>

5
.github/_includes/head/analytics.html vendored Normal file
View File

@@ -0,0 +1,5 @@
{% comment %}
Paste analytics code snippet here as provided by your platform (for example from Google Analytics or Matomo).
To avoid collecting stats from your development server, this code will be added to the head of every page ONLY during production build!
{% endcomment %}
<!-- Analytics -->

38
.github/_includes/head/head.html vendored Normal file
View File

@@ -0,0 +1,38 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ page.title | escape }} | {{ site.title | escape }}</title>
<link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}">
<!--
_____ ____ __ _ ___ _ __ __
/ ___/__ / / /__ ____/ /_(_)__ ___ / _ )__ __(_) /__/ /__ ____
/ /__/ _ \/ / / -_) __/ __/ / _ \/ _ \/ _ / // / / / _ / -_) __/
\___/\___/_/_/\__/\__/\__/_/\___/_//_/____/\_,_/_/_/\_,_/\__/_/
built with CollectionBuilder-CSV
https://github.com/CollectionBuilder/collectionbuilder-csv
-->
<meta name="generator" content="collectionbuilder-csv" />
<meta http-equiv="Content-Language" content="en-us" >
<!-- load style sheets -->
{% if site.data.theme.font-cdn %}{{ site.data.theme.font-cdn }}{%- endif -%}
<link rel="stylesheet" href="{% if site.data.theme.bootswatch %}https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/{{ site.data.theme.bootswatch }}/bootstrap.min.css{% else %}{{ site.lib-assets | default: '/assets/lib' | relative_url }}/bootstrap.min.css{% endif %}" type="text/css">
{% if page.layout == 'data' %}<link rel="stylesheet" type="text/css" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/datatables/datatables.min.css">{%- endif -%}
{% if page.layout == 'map' %}<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.css">
<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.fullscreen.css">
{% if site.data.theme.map-search == true %}<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.fusesearch.css">{%- endif -%}
{% if site.data.theme.map-cluster == true %}<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/MarkerCluster.css">
<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/MarkerCluster.Default.css">{% endif %}{%- endif -%}
<!-- load custom css last to allow overrides -->
<link rel="stylesheet" href="{{ '/assets/css/cb.css' | relative_url }}" type="text/css">
{% comment %}
Meta tags and analytics are added during production build ONLY
{%- endcomment -%}
{% if jekyll.environment == "production" %}
{% if layout.item-meta %}{% include head/item-meta.html %}{% else %}{% include head/page-meta.html %}{% endif %}
{% include head/analytics.html %}
{%- endif -%}
{% if site.noindex == true or page.noindex == true or layout.noindex == true %}<meta name="robots" content="noindex" />{% endif %}
<!-- Last build date: {{ site.time | date: "%Y-%m-%d" }} -->

34
.github/_includes/head/item-meta.html vendored Normal file
View File

@@ -0,0 +1,34 @@
{% if page.subject %}<meta name="keywords" content="{{ page.subject | escape }}" >{% endif %}
{% if page.description %}<meta name="description" content="Item from {{ site.title | escape }}: {{ page.description | truncatewords: 25 | escape }}">{% endif %}
<!-- DC meta -->
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
{%- assign dc-fields = site.data.config-metadata | where_exp: 'item', 'item.dc_map != nil' -%}
{% for f in dc-fields %}{% if page[f.field] %}<meta name="{{ f.dc_map | xml_escape }}" content="{{ page[f.field] | truncatewords: 25 | xml_escape }}" xml:lang="en" />
{% endif %}{% endfor %}
{% if site.organization-name %}<meta name="DCTERMS.publisher" content="{{ site.organization-name | escape }}" xml:lang="en" />{% endif %}
<!-- Open Graph meta -->
<meta property="og:title" content="{{ page.title | escape }}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Item from {{ site.title | escape }}. {{ page.description | truncatewords: 30 | escape }}" />
{% if page.image_small or page.image_thumb %}
<meta property="og:image" content="{{ page.image_small | default: page.image_thumb | relative_url }}" />
<meta property="og:image:alt" content="{{ page.title | escape }}" />{% endif %}
<meta property="og:site_name" content="{{ site.title | escape }}" />
<meta property="og:url" content="{{ page.url | absolute_url }}" />
<meta property="og:locale" content="en_US" />
<!-- schema.org JSON-LD -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "CreativeWork",
{%- assign sc-fields = site.data.config-metadata | where_exp: 'item', 'item.schema_map != nil' -%}
{% for f in sc-fields %}{% if page[f.field] %}
"{{ f.schema_map }}": {{ page[f.field] | jsonify }},{% endif %}{% endfor %}
"isPartOf": {{ site.title | jsonify }},
{% if page.image_small %}"image": "{{ page.image_small | relative_url }}",{% endif %}
{% if page.image_thumb %}"thumbnailUrl": "{{ page.image_thumb | relative_url }}",{% endif %}
"url": {{ page.url | absolute_url | jsonify }}
}
</script>
<!-- breadcrumbs schema -->
<script type="application/ld+json">{"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "item": { "@id": "{{ "/" | absolute_url }}", "name": {{ site.title | jsonify }} } },{ "@type": "ListItem", "position": 2, "item": { "@id": "{{ '/browse/' | absolute_url }}", "name": "Browse Collection" } },{ "@type": "ListItem", "position": 3, "item": { "@id": "{{ page.url | absolute_url }}", "name": {{ page.title | jsonify }} } }] }</script>

24
.github/_includes/head/page-meta.html vendored Normal file
View File

@@ -0,0 +1,24 @@
<meta name="description" content="{{ site.description | escape }}">
{% if site.author or site.organization-name %}<meta name="author" content="{% if site.author %}{{ site.author | escape }}; {% endif %}{{ site.organization-name | escape }}" >{% endif %}
{% if site.keywords %}<meta name="keywords" content="{{ site.keywords | escape }}">{% endif %}
<!-- DC meta -->
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
<meta name="DCTERMS.title" content="{{ page.title | escape }}, {{ site.title | escape }}" xml:lang="en" />
{% if site.author or site.organization-name %}<meta name="DCTERMS.creator" content="{{ site.author | default: site.organization-name | escape }}" xml:lang="en" />{% endif %}
{% if site.organization-name %}<meta name="DCTERMS.publisher" content="{{ site.organization-name | escape }}" xml:lang="en" />{% endif %}
<meta name="DCTERMS.date" content="{{ site.time | date: '%Y' }}" xml:lang="en" />
<meta name="DCTERMS.description" content="{{ site.description | escape }}" xml:lang="en" />
<!-- Open Graph meta -->
<meta property="og:title" content="{% if page.title %}{{ page.title | escape }}, {% endif %}{{ site.title | escape }}" />
<meta property="og:description" content="{{ site.description | escape }}" />
<meta property="og:site_name" content="{{ site.title | escape }}" />
<meta property="og:type" content="website" />
<meta property="og:image" content="{{ site.data.featured_item.src | relative_url }}" />
<meta property="og:image:alt" content="{{ site.data.featured_item.alt | escape }}" />
<meta property="og:url" content="{{ page.url | absolute_url }}" />
<meta property="og:locale" content="en_US" />
<!-- schema.org JSON-LD -->
<script type="application/ld+json">{"@context":"http://schema.org","@type":"WebPage","headline":"{% if page.title %}{{ page.title | escape }}, {% endif %}{{ site.title | escape }}","publisher": { "@context": "https://schema.org", "@type": "Organization", "name": "{{ site.organization-name }}", "url": "{{ site.organization-link }}", "logo": "{{ site.organization-logo-banner }}" },"description":{{ site.description | jsonify }},"image":"{{ site.data.featured_item.src | relative_url }}","url":"{{ page.url | absolute_url }}"}</script>
<!-- breadcrumbs schema -->
<script type="application/ld+json">{"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "item": { "@id": "{{ "/" | absolute_url }}", "name": {{ site.title | jsonify }} } },{ "@type": "ListItem", "position": 2, "item": { "@id": "{{ page.url | absolute_url }}", "name": {{ page.title | jsonify }} } }] }</script>

18
.github/_includes/helpers/get-icon-svg.html vendored Normal file
View File

@@ -0,0 +1,18 @@
{% comment %}
Liquid utility to get a theme icon based on display_template or format.
returns an svg sprite (in html)
E.G. --> {% include helpers/get-icon-svg.html template="pdf" type="hidden" %}
Options:
- "template" - the display_template to represent (usually provided from an item metadata "display_template" or "format")
- "type" - choose from "thumb" (svg like an image), "hidden" (svg aria-hidden), or "sprite" (svg sprite) (optional, default "sprite")
{%- endcomment -%}
{%- capture iconId -%}{% if include.template contains 'image' %}icon-image{% elsif include.template contains 'pdf' %}icon-pdf{% elsif include.template contains 'video' %}icon-video{% elsif include.template contains 'audio' %}icon-audio{% elsif include.template contains 'panorama' %}icon-panorama{% elsif include.template contains 'compound' %}icon-compound-object{% elsif include.template contains 'multiple' %}icon-multiple{% elsif include.template contains 'record' %}icon-record{% else %}icon-default{% endif %}{%- endcapture -%}
{% if include.type == "thumb" %}
<svg class="bi text-body img-fluid" fill="currentColor" role="img"><title>{{ include.template }} file icon</title><use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#{{ iconId }}"/></svg>
{%- else -%}
<svg class="bi icon-sprite"{% if include.type == 'hidden' %} aria-hidden="true"{% endif %}><use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#{{ iconId }}"/></svg>{% endif %}

53
.github/_includes/helpers/get-icon.js vendored Normal file
View File

@@ -0,0 +1,53 @@
/*
get a theme icon based on display_template or format
return svg sprite
*/
function getIcon(objectTemplate,objectFormat,svgType) {
var iconTemplate, iconId, iconTitle;
if (objectTemplate && objectTemplate != "") {
iconTemplate = objectTemplate;
} else if (objectFormat && objectFormat != "") {
iconTemplate = objectFormat;
} else {
iconTemplate = ""
}
// choose icon
if (iconTemplate.includes("image")) {
iconId = "icon-image";
iconTitle = "image file icon";
} else if (iconTemplate.includes("pdf")) {
iconId = "icon-pdf";
iconTitle = "pdf file icon";
} else if (iconTemplate.includes("video")) {
iconId = "icon-video";
iconTitle = "video file icon";
} else if (iconTemplate.includes("audio")) {
iconId = "icon-audio";
iconTitle = "audio file icon";
} else if (iconTemplate.includes("panorama")) {
iconId = "icon-panorama";
iconTitle = "panorama file icon";
} else if (iconTemplate.includes("compound")) {
iconId = "icon-compound-object";
iconTitle = "compound object icon";
} else if (iconTemplate.includes("multiple")) {
iconId = "icon-multiple";
iconTitle = "multiple object icon";
} else if (iconTemplate.includes("record")) {
iconId = "icon-record";
iconTitle = "record object icon";
} else {
iconId = "icon-default";
iconTitle = "file icon";
}
if (svgType == "thumb") {
// svg sprite as thumb
return '<svg class="bi text-body img-fluid" fill="currentColor" role="img"><title>' + iconTitle + '</title><use xlink:href="{{ "/assets/css/cb-icons.svg" | relative_url }}#' + iconId + '"/></svg>';
} else if (svgType == "hidden") {
// svg as sprite with aria-hidden
return '<svg class="bi icon-sprite" aria-hidden="true"><use xlink:href="{{ "/assets/css/cb-icons.svg" | relative_url }}#' + iconId + '"/></svg>';
} else {
// svg as sprite
return '<svg class="bi icon-sprite" aria-label="' + iconTitle + '"><use xlink:href="{{ "/assets/css/cb-icons.svg" | relative_url }}#' + iconId + '"/></svg>';
}
}

107
.github/_includes/index/carousel.html vendored Normal file
View File

@@ -0,0 +1,107 @@
{% comment %}
Image item carousel.
This include adds a Bootstrap Carousel component populated with randomly selected image items, designed with index page in mind.
https://getbootstrap.com/docs/5.1/components/carousel/
E.G. --> {% include index/carousel.html title="Sample Items" height=450 %}
Options:
- "height" = the height of the carousel in px, just give the number (optional, default 300)
- "carousel-type" = the selection of items featured in the carousel, choose from thumb (all items with image_thumb) or small (all items with image_small). (optional, default thumb)
- "child-objects" = include child items in count or only parents, true or false (optional, default false)
- "title" = card title text inside card content area (optional)
- "header" = card header text in bar above card content (optional)
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
- "max" = maximum images selected for slide show (optional, default 9. Do not make too big!)
- "btn-color" = a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "primary")
- "btn-text" = the label used in the link btn to view the carousel item (optional, default "View Item")
- "filter-field" and "filter-value" = use these options together to filter which set of items will appear in the carousel based on a particular metadata field and value in that field. filter-field must match a column in your metadata. any item with a value in the filter-field that "contains" the filter-value will be included, it does not need to be an exact match. (optional)
{%- endcomment -%}
{%- assign carousel-max = include.max | default: 9 -%}
{%- assign btn-color = include.btn-color | default: "primary" -%}
{%- assign btn-text = include.btn-text | default: "View Item" -%}
{% if include.child-objects == true %}
{%- assign carousel-items = site.data[site.metadata] | where_exp: 'item','item.objectid' | where_exp: "item","item.image_small != nil or item.image_thumb != nil"-%}
{% else %}
{%- assign carousel-items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' | where_exp: "item","item.image_small != nil or item.image_thumb != nil" -%}
{% endif %}
{%- if include.filter-field and include.filter-value -%}
{% assign carousel-items = carousel-items | where_exp: 'item','item[include.filter-field] contains include.filter-value' %}
{%- endif -%}
{%- comment -%}
Set up carousel div
{%- endcomment -%}
<style>
#imageCarousel .carousel-item { height: {{ include.height | remove: 'px' | strip | default: '300' }}px; }
</style>
<div class="card mb-3">
{% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header h5">{{ include.header }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
<div class="card-body">
{% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">{{ include.title }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
<div id="imageCarousel" class="carousel slide bg-dark rounded mb-3" data-bs-ride="carousel">
<div id="carouselIndicators" class="carousel-indicators">
</div>
<div id="carouselInner" class="carousel-inner">
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
{%- comment -%}
add slides using JS to allow for randomizing slide show
{%- endcomment -%}
<script>
/* add item data */
// title,objectid,image_thumb/small
var carouselItems = [ {% for c in carousel-items %}[ {{ c.title | escape | jsonify }}, "{{ c.objectid }}", {% if c.image_small %}{{ c.image_small | relative_url | jsonify }}{% else %}{{ c.image_thumb | relative_url | jsonify }}{% endif %}, "{{ c.parentid }}", {{ c.image_alt_text | default: c.title | escape | jsonify }} ]{% unless forloop.last %}, {% endunless %}{% endfor %}];
/* shuffle items */
carouselItems.sort(function() { return 0.5 - Math.random() });
/* add items to carousel */
var carousel = document.getElementById("carouselInner");
var carouselIndicators = document.getElementById("carouselIndicators");
var slides = "";
var indicators = "";
var i, itemImg, itemLink;
for (let i=0; i < {{ carousel-items | size | at_most: carousel-max }}; i++) {
// calculate item image location
itemImg = carouselItems[i][2];
// calculate item link
if (carouselItems[i][3]){
itemLink = '{{ '/items/' | relative_url }}' + carouselItems[i][3] + '.html#' + carouselItems[i][1];}
else {
itemLink = '{{ '/items/' | relative_url }}' + carouselItems[i][1] + '.html';
}
// create indicator
indicator = `<button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="${i.toString()}" ${ i == 0 ? 'class="active" aria-current="true" ' : '' }aria-label="Slide ${i.toString()}"></button>`;
// create slide
slide = `<div class="carousel-item py-2${ i == 0 ? ' active' : '' }">
<img class="d-block h-100 mx-auto lazyload" alt="${carouselItems[i][4]}" data-src="${itemImg}">
<div class="carousel-caption">
<h3 class="carousel-item-title text-white py-2 h6">${carouselItems[i][0]}</h3>
<a href="${itemLink}" class="btn btn-sm btn-{{ btn-color }}">{{ btn-text }}</a>
</div></div>`;
slides += slide;
indicators += indicator;
}
// add indicators to page
carouselIndicators.innerHTML = indicators;
// add slides to the page
carousel.innerHTML = slides;
</script>

46
.github/_includes/index/content.html vendored Normal file
View File

@@ -0,0 +1,46 @@
{% comment %}
Collection content summary.
Counts item types based on "display_template" providing link to Browse page.
E.G. --> {% include index/content.html %}
E.G. --> {% include index/content.html object_field="format" others=true total=true %}
Options:
- "btn-color" - a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "outline-secondary")
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
- "object_field" = optionally change the field used to count items. Typically this is either "display_template" (default) or "format". The field should be available on the Browse page to filter! The icons assume you use something like "display_template" or "format" to select the correct icon.
- "child-objects" = include child items in count or only parents, true or false (optional, default false)
- "others" = display a count for items with no "display_template", true or false (optional, default false)
- "total" = display a count for total items, true or false (optional, default false)
{%- endcomment -%}
{%- assign object_field = include.object_field | default: 'display_template' -%}
{% if include.child-objects == true %}
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
{% else %}
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
{% endif %}
{%- assign templates = items | map: object_field -%}
{%- assign types = templates | uniq | compact | sort -%}
<div class="card mb-3" >
<div class="card-body">
<p class="card-text">
{% for t in types %}
{%- assign count = templates | where_exp: 'item', 'item contains t' | size -%}
{% if count > 0 %}
{{ count }}
<a class="text-dark" href="{{ '/browse/' | relative_url }}#display_template:{{ t }}">{{ t | upcase | replace: "_", " " }}
{% include helpers/get-icon-svg.html type="hidden" template=t %}</a><br>
{%- endif -%}
{%- endfor -%}
{% if include.others == true %}{% assign others = templates | where_exp: 'item', 'item == nil or item == ""' | size %}{% if others > 0 %}
{{ others }} OTHER {% include helpers/get-icon-svg.html type="hidden" %}<br>{% endif %}{% endif %}
{% if include.total == true %}
{{ templates | size }} TOTAL ITEMS<br>{% endif %}
<a class="btn btn-sm btn-{{ include.btn-color | default: 'outline-secondary' }} mt-2" href="{{ '/browse/' | relative_url }}">View archive</a>
</p>
</div>
</div>

45
.github/_includes/index/data-download.html vendored Normal file
View File

@@ -0,0 +1,45 @@
{% comment %}
Collection data downloads.
Based on the stubs present in the config-nav, displays relevant download btn links for metadata derivatives in a variety of formats. This highlights the ability to explore and reuse collection data.
E.G. --> {% include index/data-download.html %}
Options:
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
{%- endcomment -%}
{%- assign stubs = site.data.config-nav | map: 'stub' | join: ';' -%}
{% if include.no_toc %}
<div class="card mb-3 no_toc">
{% else %}
<div class="card mb-3">
{% endif %}
<div class="card-body">
<p><small>Download this collection's metadata in a variety of reusable formats. Psst: <a href="/copyright/" target="_blank">check out this archive's copyright information before downloading!</a></small></p>
<p class="card-text text-center">
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/metadata.csv' | relative_url }}" download>Metadata CSV</a>
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/metadata.json' | relative_url }}" target="_blank">Metadata JSON</a>
{% if stubs contains "subject" %}
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/subjects.csv' | relative_url }}" download>Subjects CSV</a>
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/subjects.json' | relative_url }}" target="_blank">Subjects JSON</a>
{% endif %}
{% if stubs contains "map" %}
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/geodata.json' | relative_url }}" target="_blank">Geodata JSON</a>
{% endif %}
{% if stubs contains "location" %}
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/locations.csv' | relative_url }}" download>Locations CSV</a>
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/locations.json' | relative_url }}" target="_blank">Locations JSON</a>
{% endif %}
{% if stubs contains "timeline" %}
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/timelinejs.json' | relative_url }}" target="_blank">Timeline JSON</a>
{% endif %}
{% if site.data.theme.metadata-facets-fields %}
<a class="btn btn-sm btn-secondary m-1" href="{{ '/assets/data/facets.json' | relative_url }}" target="_blank">Facets JSON</a>
{% endif %}
<a class="btn btn-sm btn-secondary m-1" href="{{ site.source-code }}" rel="noopener">Source Code</a>
</p>
</div>
</div>
</div>

21
.github/_includes/index/description.html vendored Normal file
View File

@@ -0,0 +1,21 @@
{% comment %}
Collection Description card.
Pulls description from _config.yml. Provides btn link to About page if present in the config-nav.
E.G. --> {% include index/description.html %}
Options:
- "btn-color" - a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "primary")
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
{%- endcomment -%}
<div class="card mb-3">
<div class="card-body">
<{{ include.heading_level | default: 'h3' | strip }} class="card-title h5"></{{ include.heading_level | default: 'h3' | strip }}>
<p class="card-text">{{ site.description }}</p>
{%- assign about = site.data.config-nav | where: "stub","/about/" | size -%}{% if about > 0 %}
<a class="btn btn-{{ include.btn-color | default: 'primary' }}" href="{{ '/about/' | relative_url }}" >Learn More &raquo;</a>{% endif %}
</div>
</div>

53
.github/_includes/index/featured-terms.html vendored Normal file
View File

@@ -0,0 +1,53 @@
{% comment %}
Featured Terms button-links.
This include creates a card with btn links to the Browse page from a set of automatically generated or manually selected terms. Either use the "field" option to auto generate *or* the "featured" option to manually create list of terms.
E.G. --> {% include index/featured-terms.html field="subject" title="Top Subjects" btn-color="outline-info" max=8 %}
E.G. --> {% include index/featured-terms.html featured="Example term; Another; One more" title="Topic Areas" btn-color="success" %}
Options:
- "field" - a field from your metadata that will be used to auto generate top terms (required to auto generate)
- "featured" - a manually created list of featured terms, separated by ; semicolon (required if not auto generating from a field)
- "title" - card title text inside card content area (optional)
- "header" = card header text in bar above card content (optional)
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
- "max" - max number of terms to display if auto generating (optional, default 5)
- "btn-color" - a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "primary")
Requires CB's "array_count_uniq.rb" plugin!
{%- endcomment -%}
{% if include.featured %}
{% assign topTerms = include.featured | split: ";" %}
{%- else -%}
{% comment %}
Use termsField and termsMax to customize feature
{% endcomment %}
{% assign termsField = include.field | default: "subject" %}
{% assign termsMax = include.max | default: 5 %}
{% if site.data.theme.browse-child-objects == true %}
{%- assign terms = site.data[site.metadata] | where_exp: 'item','item.objectid' | map: termsField | join: ";" -%}
{% else %}
{%- assign terms = site.data[site.metadata] | where_exp: 'item','item.parentid == nil' | map: termsField | join: ";" -%}
{%- endif -%}
{%- assign uniqTerms = terms | downcase | split: ";" | array_count_uniq -%}
{% capture topTerms %}
{% for i in uniqTerms limit: termsMax %}{{ i[0] }};{% endfor %}{% endcapture %}
{% assign topTerms = topTerms | split: ";" %}
{%- endif -%}
<div class="card mb-3">
{% if include.header %}<{{ include.heading_level | default: 'h2' | strip }} class="card-header h5">{{ include.header }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
<div class="card-body">
{% if include.title %}<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">{{ include.title }}</{{ include.heading_level | default: 'h2' | strip }}>{% endif %}
<p class="card-text">
{% for s in topTerms %}
<a class="btn btn-sm btn-{{ include.btn-color | default: 'primary' }} m-1" href="{{ s | strip | url_param_escape | prepend: ':' | prepend: termsField | prepend: '/browse/#' | relative_url }}">{{ s | strip }}</a>{% endfor %}
</p>
</div>
</div>

31
.github/_includes/index/time.html vendored Normal file
View File

@@ -0,0 +1,31 @@
{% comment %}
Collection time span.
Extracts all content of "date" field, displays the smallest and largest.
You may encounter issues if you do not have a correctly ISO formatted "date" field.
E.G. --> {% include index/time.html %}
Options:
- "date_field" - optionally change the field used for date range. Only ISO or year-only dates are supported. (optional, default "date")
- "btn-color" - a bootstrap color class to theme the buttons. Can be any bootstrap template color (e.g. info, success) or outline (e.g. outline-info, outline-success), including colors created in config-theme-colors. (optional, default "outline-secondary")
- "heading_level" = customize the level of the heading if necessary for accessibility, choose "h1", "h2", "h3", etc (optional, default "h2")
{%- endcomment -%}
{% assign date_field = include.date_field | default: 'date' %}
{% if site.data.theme.timeline-child-objects == true %}
{%- assign date-items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
{% else %}
{%- assign date-items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
{% endif %}
{%- assign raw-dates = date-items | map: date_field | compact | uniq -%}
{%- capture clean-years -%}{% for date in raw-dates %}{% if date contains "-" %}{{ date | strip | split: "-" | first }}{% elsif date contains "/" %}{{ date | strip | split: "/" | last }}{% else %}{{ date | strip }}{% endif %}{% unless forloop.last %};{% endunless %}{%- endfor -%}{%- endcapture -%}
{%- assign date-range = clean-years | remove: " " | split: ";" | uniq | sort -%}
<div class="card mb-3">
<div class="card-body">
<{{ include.heading_level | default: 'h2' | strip }} class="card-title h5">Time Span</{{ include.heading_level | default: 'h2' | strip }}>
<p class="card-text h5">{{ date-range | first }} to {{ date-range | last }}
<br><a href="{{ '/timeline.html' | relative_url }}" class="btn btn-sm btn-{{ include.btn-color | default: 'outline-secondary' }} mt-2">View Timeline</a></p>
</div>
</div>

48
.github/_includes/item/3d-model-viewer.html vendored Normal file
View File

@@ -0,0 +1,48 @@
{% comment %}
Embed an interactive viewer to display 3d model files in glTF/GLB format (.glb or .gltf).
Uses the model-viewer component, https://modelviewer.dev/
This assumes that the item's object_location is a .glb or .gltf file.
If an image_small is set in the metadata, that image is used as a "poster" and model is not loaded until user clicks.
{% endcomment %}
<!-- import model-viewer component from CDN -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
{% if page.image_small %}
<style>
/* add styles for poster image and load button */
#poster-image {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("{{ page.image_small | relative_url }}");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
#load-model-btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
</style>{% endif %}
<!-- add 3d viewer to page -->
<div class="ratio ratio-4x3">
<model-viewer id="item-model-viewer" alt="{{ page.image_alt_text | default: page.description | default: page.title | escape }}" src="{{ page.object_location | relative_url }}" shadow-intensity="1" camera-controls touch-action="pan-y" {% if page.image_small %}reveal="manual"{% endif %}>
{% if page.image_small %}
<div id="poster-image" slot="poster"></div>
<button id="load-model-btn" class="btn btn-lg btn-primary" slot="poster">Load 3D Model</button>
{% endif %}
</model-viewer>
</div>
{% if page.image_small %}
<script>
/* load model on user click */
var itemModelViewer = document.querySelector('#item-model-viewer');
itemModelViewer.addEventListener('click', () => itemModelViewer.dismissPoster());
</script>
{% endif %}

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

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

11
.github/_includes/item/breadcrumbs.html vendored Normal file
View File

@@ -0,0 +1,11 @@
{% comment %}
Adds Bootstrap styled breadcrumbs to page.
By default the crumbs are: Home (index.html) / Items (browse/) / current page title (from the metadata, truncated to 10 words max).
{%- endcomment -%}
<ol class="breadcrumb">
<li class="breadcrumb-item"><a class="text-dark" href="{{ '/' | relative_url }}">Home</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="{{ '/browse/' | relative_url }}">Items</a></li>
<li class="breadcrumb-item active text-dark" aria-current="page">{{ page.title | truncatewords: 10 }}</li>
</ol>

100
.github/_includes/item/browse-buttons.html vendored Normal file
View File

@@ -0,0 +1,100 @@
{% comment %}
Adds previous and next button arrows to provide navigation between items.
Requires cb_page_gen plugin.
The item order follows the order in the metadata CSV, so pre-sort the CSV to the desired order.
{%- endcomment -%}
<div class="text-center">
<a class="btn btn-secondary" href="{{ page.previous_item | relative_url }}" id="prev-page-button">&laquo; Previous</a>
<a class="btn btn-secondary" href="{{ '/browse/' | relative_url }}">Back to The Archive</a>
<a class="btn btn-secondary" href="{{ page.next_item | relative_url }}" id="next-page-button">Next &raquo;</a>
</div>
<div id="item-nav">
<div class="d-none d-md-block">
<a class="previous btn btn-lg btn-secondary" href="{{ page.previous_item | relative_url }}">&laquo;</a>
<a class="next btn btn-lg btn-secondary" href="{{ page.next_item | relative_url }}">&raquo;</a>
</div>
</div>
<script>
function leftArrowPressed() {
location.href = document.getElementById("prev-page-button").href;
};
function rightArrowPressed() {
location.href = document.getElementById("next-page-button").href;
};
function leftModalArrowPressed() {
// Get the modal element.
var modalshow = document.querySelector(".modal.show");
// If the modal exists, get the prev button element.
if (modalshow) {
const prevButton = modalshow.querySelector(".prev-child-button");
// If the prev button exists, click it.
if (prevButton) {
prevButton.click();
}
}
};
function rightModalArrowPressed() {
// Get the modal element.
var modalshow = document.querySelector(".modal.show");
// If the modal exists, get the prev button element.
if (modalshow) {
const nextButton = modalshow.querySelector(".next-child-button");
// If the prev button exists, click it.
if (nextButton) {
nextButton.click();
}
}
};
function isModalShown() {
// Get the modal element.
const modal = document.querySelector(".modal.show");
// Check if the modal has the "show" class.
return modal && modal.classList.contains("show");
};
function isSpotlightModalShown() {
// Get the modal element.
const spotlight = document.getElementById("spotlight");
// Check if the modal has the "show" class.
return spotlight && spotlight.classList.contains("show");
};
document.onkeydown = function (evt) {
if (isSpotlightModalShown()) {
} else if (isModalShown()) {
// The modal is shown.
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftModalArrowPressed();
break;
case 39:
rightModalArrowPressed();
break;
}
}
else {
// The modal is not shown.
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
}
}
};
</script>

10
.github/_includes/item/child/audio-player.html vendored 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>

47
.github/_includes/item/child/citation-box.html vendored Normal file
View File

@@ -0,0 +1,47 @@
{% comment %}
Adds a basic citation box for child item with reference link to the child modal.
{%- endcomment -%}
<div class="card">
<div class="card-header">Attribution</div>
<div class="card-body">
<dl>
<dt>Citation:</dt>
<dd id="citation-text">
{% if page.collection %}
"{{ page.title }}," *{{ page.collection }}*,
{% else %}
"{{ page.title }},"
{% endif %}
{% if page.date_created %}
{{ page.date_created }}.
{% endif %}
<a href="{{ page.url | absolute_url }}">{{ page.url | absolute_url }}</a>
</dd>
</dl>
<button id="copy-button" class="btn btn-primary">Copy Citation</button>
</div>
</div>
<script>
// Get the citation text and the button
const citationText = document.getElementById("citation-text").innerText;
const copyButton = document.getElementById("copy-button");
// When the button is clicked, copy the citation to the clipboard
copyButton.addEventListener("click", function () {
const textArea = document.createElement("textarea");
textArea.value = citationText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
// Optionally, provide feedback to the user
copyButton.innerText = "Copied!";
setTimeout(() => {
copyButton.innerText = "Copy Citation";
}, 2000);
});
</script>

47
.github/_includes/item/child/compound-item-download-buttons.html vendored 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/?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 %}

166
.github/_includes/item/child/compound-item-modal-gallery.html vendored Normal file
View File

@@ -0,0 +1,166 @@
{% 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 }}Label"aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<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
.github/_includes/item/child/download-buttons.html vendored 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/?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
.github/_includes/item/child/ia-embed.html vendored 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
.github/_includes/item/child/image-gallery.html vendored 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
.github/_includes/item/child/item-thumb.html vendored 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
.github/_includes/item/child/metadata.html vendored 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/#' | 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
.github/_includes/item/child/panorama.html vendored 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
.github/_includes/item/child/rights-box.html vendored 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
.github/_includes/item/child/video-embed.html vendored 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
.github/_includes/item/child/video-player.html vendored 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>

47
.github/_includes/item/citation-box.html vendored Normal file
View File

@@ -0,0 +1,47 @@
{% comment %}
Adds a basic citation box for the item with reference link to the item page.
{%- endcomment -%}
<div class="card">
<div class="card-header">Attribution</div>
<div class="card-body">
<dl>
<dt>Citation:</dt>
<dd id="citation-text">
{% if page.collection %}
"{{ page.title }}," <i>{{ page.collection }}</i>, {{site.title}}.
{% else %}
"{{ page.title }},"
{% endif %}
{% if page.date_created %}
{{ page.date_created }}.
{% endif %}
<a href="{{ page.url | absolute_url }}">{{ page.url | absolute_url }}</a>
</dd>
</dl>
<button id="copy-button" class="btn btn-primary">Copy Citation</button>
</div>
</div>
<script>
// Get the citation text and the button
const citationText = document.getElementById("citation-text").innerText;
const copyButton = document.getElementById("copy-button");
// When the button is clicked, copy the citation to the clipboard
copyButton.addEventListener("click", function () {
const textArea = document.createElement("textarea");
textArea.value = citationText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
// Optionally, provide feedback to the user
copyButton.innerText = "Copied!";
setTimeout(() => {
copyButton.innerText = "Copy Citation";
}, 2000);
});
</script>

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

@@ -0,0 +1,34 @@
{% comment %}
Adds Item page 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" 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/?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 page.object_location %}<a target="_blank" rel="noopener" href="{{ page.object_location | relative_url }}" class="btn btn-outline-primary">
{% if page.display_template == 'video' and page.object_location contains 'vimeo' %}View on Vimeo{% elsif page.display_template == 'video' and page.object_location contains 'youtu' %}View on YouTube{% elsif page.display_template == 'record'%}Link to Object{% else %}Download {{ page.format | split: '/' | last | default: page.display_template | upcase }}{% endif %}
</a>{% endif %}
</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 %}

27
.github/_includes/item/ia-embed.html vendored 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 = page.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 {{ page.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>`

20
.github/_includes/item/iiif-manifest-universal-viewer.html vendored Normal file
View File

@@ -0,0 +1,20 @@
{% comment %}
Embed Universal Viewer to load item from an IIIF manifest file, https://github.com/UniversalViewer/universalviewer
This include assumes that Item's object_location field is a relative link or direct url to a IIIF manifest json file. e.g. https://wellcomelibrary.org/iiif/b18035723/manifest
If you are using an external manifest url, you may encounter CORS policy error if the server hosting the manifest is not set up correctly--one workaround is to download the json file, add to your "objects" folder, and use a relative link, e.g. "objects/book-manifest1.json". You do not need the images, just the manifest file!
{% endcomment %}
<!-- add IIIF Universal Viewer assets from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/universalviewer@4.0.0/dist/uv.css"/>
<script src="https://cdn.jsdelivr.net/npm/universalviewer@4.0.0/dist/umd/UV.js"></script>
<!-- add div for viewer -->
<div class="uv" id="uv" style="width: 100%; height: 668px;"></div>
<script>
// initialize Universal Viewer
var uvOptions = {
manifest: {{ page.object_location | relative_url | jsonify }}
// add options here!
};
var iiif_viewer = UV.init("uv", uvOptions);
</script>

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

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

16
.github/_includes/item/item-thumb.html vendored Normal file
View File

@@ -0,0 +1,16 @@
{% comment %}
Add a thumbnail image or icon based on format for an item, with a object_location link (if available).
{% endcomment %}
{% if page.object_location %}<a href="{{ page.object_location | relative_url }}" target="_blank" rel="noopener">{% endif %}
{% if page.image_thumb or page.image_small %}
<img class="img-thumbnail" src="{{ page.image_small | default: page.image_thumb | relative_url }}" alt="{{ page.image_alt_text | default: page.description | default: page.title | escape }}">
{% else %}
<svg class="bi text-body" fill="currentColor" aria-hidden="true">
{%- assign icon_template = page.display_template | default: page.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">{{ page.title | escape }} - {{ page.format }}</span>
{% endif %}
{% if page.object_location %}</a>{% endif %}

25
.github/_includes/item/metadata.html vendored Normal file
View File

@@ -0,0 +1,25 @@
{% comment %}
Adds metadata to item pages 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 page[f.field] %}
<dt class="field">{{ f.display_name }}:</dt>
<dd class="field-value">
{% if f.browse_link == "true" %}
{% assign topics = page[f.field] | split: ";" %}
{% for t in topics %}
<a class="me-3" href="{{ t | strip | url_param_escape | prepend: ':' | prepend: f.field | prepend: '/browse/#' | relative_url }}">{{ t | strip }}</a>
{% endfor %}
{% elsif f.external_link == "true" %}
<a href="{{ page[f.field] }}">{{ page[f.field] }}</a>
{% else %}
{{ page[f.field] | replace: '""','"' }}{% endif %}
</dd>
{% endif %}{% endfor %}
</dl>
</div>

59
.github/_includes/item/mini-map.html vendored Normal file
View File

@@ -0,0 +1,59 @@
{% comment %}
Adds a Leaflet map featuring a single marker based on the item's lat long.
Options:
- "map-marker" = true/false, add a marker using the item's lat long and title (default true)
- "map-height" = height of the mini map in px (default 400px)
- "map-zoom" = provide a zoom level, default 10
- "map-link" = true/false, add a button link to the collection's default full map page (default false)
{% endcomment %}
<style>
#mini-map { height: {{ include.map-height | default: '400px' }}; z-index: 98; }
</style>
<div id="mini-map"></div>
{% if include.map-link == true %}
<a href="{{ '/map/?location=' | append: page.latitude | append: ',' | append: page.longitude | append: '&marker=' | append: page.objectid | relative_url }}" class="btn btn-outline-primary my-3">View on Full Map</a>{% endif %}
<!-- load leaflet dependencies -->
<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.css">
<link rel="stylesheet" href="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.fullscreen.css">
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.js"></script>
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/Leaflet.fullscreen.min.js"></script>
<script>
// initial start point
var mapCenter = [{{ page.latitude }}, {{ page.longitude }}];
var mapZoom = {{ include.map-zoom | default: 10 }};
/* init map, set center and zoom */
var map = L.map('mini-map').setView(mapCenter, mapZoom);
/* add map layer options */
var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
});
var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
});
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
/* add base map switcher */
var baseMaps = {
"Esri World StreetMap": Esri_WorldStreetMap,
"Esri National Geo": Esri_NatGeoWorldMap,
"Esri Imagery": Esri_WorldImagery
};
L.control.layers(baseMaps).addTo(map);
/* load base map */
Esri_WorldImagery.addTo(map);
/* add fullscreen control */
map.addControl(new L.Control.Fullscreen());
{% unless include.map-marker == false %}
/* add marker */
L.marker(mapCenter).addTo(map)
.bindPopup('{{ page.title | escape }}');{% endunless %}
</script>

27
.github/_includes/item/panorama.html vendored Normal file
View File

@@ -0,0 +1,27 @@
{% comment %}
Adds a panorama image viewer using Pannellum.
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": "{{ page.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>

12
.github/_includes/item/pdf-embed.html vendored Normal file
View File

@@ -0,0 +1,12 @@
{% comment %}
Embed PDF so that it directly loads on the item page.
Please note that embedding large PDFs will slow your user's accessing the page.
Size is controlled using Bootstrap Custom ratios, https://getbootstrap.com/docs/5.3/helpers/ratio/#custom-ratios
{% endcomment %}
<div class="ratio" style="--bs-aspect-ratio: 115%;">
<object title="PDF file of {{ page.title }}" data="{{ page.object_location | relative_url }}" type="application/pdf" width="100%" >
<p>The PDF is not rendering in your browser, please use the button below to download the PDF.</p>
</object>
</div>

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

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

19
.github/_includes/item/video-embed.html vendored Normal file
View File

@@ -0,0 +1,19 @@
{% comment %}
Adds an iframe video embed from a YouTube or Vimeo link given in object_location.
Sizing is controlled using Bootstrap "ratio" sizing.
{%- endcomment -%}
{% if page.object_location contains 'vimeo' %}
{% assign vimeo_id = page.object_location | split: '/' | last %}
<div class="ratio ratio-16x9">
<iframe title="video embed {{ page.title | escape }}" src="https://player.vimeo.com/video/{{ vimeo_id }}" allowfullscreen></iframe>
</div>
{%- elsif page.object_location contains 'youtu' -%}
{% assign youtube_id = page.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 {{ page.title | escape }}" src="https://www.youtube-nocookie.com/embed/{{ youtube_id }}?rel=0&modestbranding=1" allowfullscreen></iframe>
</div>
{% endif %}

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

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

1057
.github/_includes/js/browse-js.html vendored Normal file
View File

File diff suppressed because it is too large Load Diff

257
.github/_includes/js/browse-simple-js.html vendored Normal file
View File

@@ -0,0 +1,257 @@
<script>
/* add items */
var items = [
{% for item in items %}
{ {% for f in fields %}{% if item[f.field] %}{{ f.field | escape | jsonify }}:{{ item[f.field] | strip | jsonify }}, {%- endif -%}{%- endfor -%}
{% if item.image_thumb %}"img": {{ item.image_thumb | relative_url | jsonify }}, {%- endif -%}
{% if item.display_template %}"display_template": {{ item.display_template | jsonify }}, {%- endif -%}
{% if item.format %}"format": {{ item.format | jsonify }}, {%- endif -%}
{% if item.image_alt_text %}"alt": {{ item.image_alt_text | escape | jsonify }}, {%- endif -%}
"title":{{ item.title | strip | escape | jsonify }},
{% if item.parentid %}"parent": {{ item.parentid | jsonify }}, {%- endif -%}
"id":{{ item.objectid | jsonify }} }{% unless forloop.last %},{% endunless %}{%- endfor -%}
];
{% include helpers/get-icon.js %}
/* function to create cards for each item */
function makeCard(obj) {
// placeholder image for lazyload
var placeholder = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E";
// find item link
var itemHref = `{{ '/items/' | relative_url }}${ obj.parent ? obj.parent + ".html#" + obj.id : obj.id + ".html"}`;
// find image
var imgSrc, thumbIcon;
// if there is a thumb in the csv display it
if(obj.img) {
imgSrc = obj.img;
// else add an icon based on display_template or format
} else {
thumbIcon = getIcon(obj.template,obj.format,"thumb");
}
var imgAlt = obj.alt ? obj.alt : obj.title;
// start card
var card = '<div class="item col-lg-4 col-md-6 mb-2"><div class="card">';
// top image for items with image
if(imgSrc) {
card += '<a href="' + itemHref + '"> <img class="card-img-top lazyload" src="' + placeholder + '" data-src="' + imgSrc + '" alt="' + imgAlt + '"></a>';
}
// title
card += '<div class="card-body text-center"> <h3 class="card-title h4"><a href="' + itemHref + '" class="text-dark">' + obj.title + '</a></h3>';
// icon thumb for item without image
if(thumbIcon){
card += '<p><a href="' + itemHref + '">' + thumbIcon + '</a></p>';
}
// other fields
card += '<p class="card-text">';
{% for f in fields %}{% unless f.hidden == 'true' %}
if(obj[{{ f.field | jsonify }}]){
{% if f.display_name %}card += '<strong>{{ f.display_name }}:</strong> ';{% endif %}
{% if f.btn == 'true' %}
var btns = obj[{{ f.field | jsonify }}].split(";");
for (var i = 0, len = btns.length; i < len; i++) {
if(btns[i] != "") {
card += '<a class="btn btn-sm btn-secondary m-1 text-wrap" href="{{ page.url | relative_url }}#' + encodeURIComponent(btns[i].trim()) + '">' + btns[i].trim() + '</a>';
}
}
{% else %}
card += obj[{{ f.field | jsonify }}];
{% endif %}
{% unless forloop.last %}card += '<br>';{% endunless %}
}
{% endunless %}{% endfor %}
card += '</p>';
// media type
if(obj.template && obj.template != "") {
mediaIcon = getIcon(obj.template,obj.format,"hidden");
card += '<p class="card-text"><small><a class="btn btn-sm btn-outline-secondary" href="{{ page.url | relative_url }}#' + encodeURIComponent(obj.template) + '">' +
obj.template.toUpperCase().replace("_"," ") + ' ' + mediaIcon + '</a></small></p>';
}
// view button
card += '<hr><a href="' + itemHref + '" class="btn btn-sm btn-light" title="link to ' + obj.title + '">View Full Record</a>';
// close divs
card += '</div></div></div>';
// send back big string
return card;
}
/* filter items function */
function filterItems(arr,q,field) {
// show loading icon
loadingIcon.classList.remove("d-none");
// dont filter if no q
if (q=="") {
var filteredItems = arr;
} else {
q = q.trim().toUpperCase();
// js indexOf filter
var filteredItems = [];
for (var i = 0, len = arr.length; i < len; i++) {
var val = "";
// if field is specified, only search that field
if (field && field !== "all" && arr[i][field]) {
val = arr[i][field] + " ";
} else {
// search all fields
for (var k in arr[i]) {
if (k != "img") { val += arr[i][k] + " "; }
}
}
if(val.toUpperCase().indexOf(q) != -1){
filteredItems.push(arr[i]);
}
}
}
// add number
document.querySelector("#numberOf").innerHTML = filteredItems.length + " of {{ items | size }} items";
// add stuff, make cards first in giant var, then add all at once to speed things up
var cards = "";
for (var i = 0, len = filteredItems.length; i < len; i++) {
cards += makeCard(filteredItems[i]);
}
browseItemsDiv.innerHTML = cards;
// finish
if (q != "") {
filterTextBox.focus();
}
loadingIcon.classList.add("d-none");
};
/* Fisher-Yates shuffle https://bost.ocks.org/mike/shuffle/ */
function shuffle(array) {
var m = array.length, t, i;
while (m) {
i = Math.floor(Math.random() * m--);
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
/* init browse page */
/* set default sort or randomize items once at page load */
{% if site.data.theme.default-sort-field %}
var defaultSort = "{{ site.data.theme.default-sort-field }}".toLowerCase();
// Apply default sort
sorting(items, defaultSort);
// Update UI to show default sort is active
var defaultSortButton = document.querySelector('[data-filter="' + defaultSort + '"]');
if (defaultSortButton) {
defaultSortButton.classList.add("active");
var sortFilter = document.querySelector("#sortFilter");
if (sortFilter) {
sortFilter.innerHTML = defaultSortButton.textContent;
}
}
{% else %}
/* randomize items once at page load */
shuffle(items);
{% endif %}
/* set some elements */
var loadingIcon = document.querySelector("#loadingIcon");
var filterTextBox = document.querySelector('#filterTextBox');
var filterButton = document.querySelector("#filterButton");
var browseItemsDiv = document.querySelector("#browseItems");
/* filter if hash in initial URL */
var query = "";
var searchField = "all";
if(window.location.hash) {
var hashValue = decodeURIComponent(location.hash.substr(1));
if (hashValue != 'maincontent') {
// check if hash contains field:query format
if (hashValue.includes(":")) {
var parts = hashValue.split(":");
searchField = parts[0];
query = parts.slice(1).join(":"); // rejoin in case value contains colons
} else {
query = hashValue;
}
} else {
query = "";
}
filterTextBox.value = query;
filterItems(items,query,searchField);
} else {
query = "";
filterItems(items,query,searchField);
}
/* filter form */
function submitFilter() {
query = filterTextBox.value;
window.location.hash = encodeURIComponent(query);
}
/* reset filters */
function resetFilter() {
query = "";
filterTextBox.value = query;
window.location.hash = encodeURIComponent(query);
}
/* filter if hash changes */
window.addEventListener("hashchange", function() {
// read hash
var hashValue = decodeURIComponent(location.hash.substr(1));
if (hashValue != 'maincontent') {
// check if hash contains field:query format
if (hashValue.includes(":")) {
var parts = hashValue.split(":");
searchField = parts[0];
query = parts.slice(1).join(":"); // rejoin in case value contains colons
} else {
searchField = "all";
query = hashValue;
}
filterTextBox.value = query;
// filter
filterItems(items,query,searchField);
}
});
/* item array sorting function */
function sorting(json_object, key_to_sort_by) {
function sortByKey(a, b) {
var x = a[key_to_sort_by];
var y = b[key_to_sort_by];
if (typeof x === 'string' ) { x = x.toUpperCase(); }
if (typeof y === 'string' ) { y = y.toUpperCase(); }
return ((x==null) ? 1: (y==null) ? -1: (x < y) ? -1 : ((x > y) ? 1 : 0));
}
json_object.sort(sortByKey);
};
/* add sort function on click of sort options */
var sortFilter = document.querySelector("#sortFilter");
var sortOptions = document.querySelectorAll(".browse-sort-item");
sortOptions.forEach((button) => {
button.addEventListener("click", (event) => {
// get the sort field
var field = button.dataset.filter;
var display_name = button.textContent;
// get current filter
var query = filterTextBox.value;
// switch active sort option
sortOptions.forEach((option) => { option.classList.remove("active"); } );
button.classList.add("active");
sortFilter.innerHTML = display_name;
// send to sort and filter
if (field != 'random') {
sorting(items, field);
filterItems(items, query);
}
else {
shuffle(items);
filterItems(items, query);
}
});
});
</script>

69
.github/_includes/js/cloud-js.html vendored Normal file
View File

@@ -0,0 +1,69 @@
{%- comment -%}
Generates a subject cloud using js to process the terms for display on "cloud" layout.
Requires CB's array_count_uniq.rb plugin!
{%- endcomment -%}
{% if site.data.theme.browse-child-objects == true %}
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
{% else %}
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
{% endif %}
{%- assign termsMin = include.min | plus: 0 | default: 1 -%}
{%- assign cloud_id = include.id | default: "cloud" -%}
{%- assign cloud-fields = include.fields | split: ";" -%}
{%- comment -%} capture terms from all cloud fields {%- endcomment -%}
{%- assign terms = "" -%}
{%- for c in cloud-fields -%}
{% assign new = items | map: c | compact | join: ";" | split: ";" %}
{% capture field_terms %}{% for n in new %}{{n}}~{{c}};{% endfor %}{% endcapture %}
{% assign terms = terms | append: ";" | append: field_terms %}
{%- endfor -%}
{%- comment -%} find unique terms and counts {%- endcomment -%}
{%- assign uniqTerms = terms | downcase | split: ";" | array_count_uniq | sort | where_exp: 't','t[1] >= termsMin' -%}
<script>
(function(){
/* subject terms + count */
var terms = [
{% for t in uniqTerms %}{% assign term_field = t[0] | split: "~" %}[{{ term_field[0] | jsonify }}, {{ t[1] | jsonify }},{{term_field[1] | jsonify}}]{% unless forloop.last %}, {% endunless %}{% endfor %}
];
{% if include.stopwords %}/* apply stopwords */
var stopWords = {{ include.stopwords | downcase | split: ';' | jsonify }};
terms = terms.filter(function(a) { return stopWords.indexOf(a[0]) < 0;});{% endif %}
/* calculate max size */
var counts = terms.map(function(obj){ return obj[1]; });
var countMax = counts.reduce(function(a, b) { return Math.max(a, b); });
var cloud = document.getElementById("{{ cloud_id }}");
{% if include.shuffle == true %}
/* Fisher-Yates shuffle https://bost.ocks.org/mike/shuffle/ */
function shuffle(array) {
var m = array.length, t, i;
while (m) {
i = Math.floor(Math.random() * m--);
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
{% endif %}
function mapSize(x) { return Math.round(x * 9 / countMax + 1); }
/* create cloud */
function makeGrid(array) {
var i, size;
var items = "";
{% if include.shuffle == true %}shuffle(array);{% endif %}
for (let i = 0; i < array.length; i++) {
size = mapSize(array[i][1]);
items += '<a class="btn btn-{{ include.button | default: "outline-primary" }} m-2 tagcloud' + size + '" href="{{ "/browse/" | relative_url }}#' + array[i][2] + ':' + encodeURIComponent(array[i][0]) + '" >' + array[i][0] + '</a>';
}
cloud.innerHTML = items;
}
makeGrid(terms);
})();
</script>

75
.github/_includes/js/lunr-js.html vendored Normal file
View File

@@ -0,0 +1,75 @@
{%- assign fields = site.data.config-search -%}
{%- assign index_fields = fields | where: 'index','true' -%}
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/lunr.min.js"></script>
<script src="{{ '/assets/js/lunr-store.js' | relative_url }}"></script>
<script>
/* initialize lunr */
var idx = lunr(function () {
/* add index fields from config */
this.ref('id')
{% for f in index_fields %}
this.field({{ f.field | jsonify }})
{% endfor %}
//this.pipeline.remove(lunr.trimmer)
for (var item in store) {
this.add({
{% for f in index_fields %}
{{ f.field | jsonify }}: store[item][{{ f.field | jsonify }}],
{% endfor %}
id: item
})
}
});
/* search function */
function lunr_search () {
var resultdiv = document.querySelector('#lunrResults');
var query = document.querySelector('#lunrSearchBox').value;//.toLowerCase();
/* basic search that supports operators */
var result = idx.search(query);
/* more fuzzy search, but doesn't support operators:
var result =
idx.query(function (q) {
query.split(lunr.tokenizer.separator).forEach(function (term) {
q.term(term, { boost: 100 })
if(query.lastIndexOf(" ") != query.length-1){
q.term(term, { usePipeline: false, wildcard: lunr.Query.wildcard.TRAILING, boost: 10 })
}
if (term != ""){
q.term(term, { usePipeline: false, editDistance: 1, boost: 1 })
}
})
});*/
resultdiv.innerHTML = "";
var newresults = '<tr><td><h4 class="mt-3">' + result.length + ' Result(s) found</h4></td></tr>';
for (var item in result) {
var ref = result[item].ref;
var searchitem =
'<tr>'+
'<td>' +
{% assign display = fields | where: 'display','true' %}
{% for d in display %}
{% if forloop.first %}
'<p class="h4"><a href="{{ "/items/" | relative_url }}' + store[ref].id + '">' + store[ref][{{ fields[0].field | jsonify }}] + '</a></p>' +
'<p class="ms-3">';
{% else %}
if(store[ref][{{ d.field | jsonify }}]) {
searchitem += store[ref][{{ d.field | jsonify }}] + '<br> '; }
{% endif %}{% endfor %}
searchitem += '</p></td>' +
'</tr>';
newresults += searchitem;
}
resultdiv.innerHTML = newresults;
}
/* init search box and get query string */
if (window.location.search) {
var queryString = decodeURIComponent(window.location.search.substring(1).split("=")[1]);
document.querySelector('#lunrSearchBox').value = queryString;
lunr_search();
}
</script>

205
.github/_includes/js/map-js.html vendored Normal file
View File

@@ -0,0 +1,205 @@
{% if site.data.theme.map-child-objects == true %}
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid' -%}
{% else %}
{%- assign items = site.data[site.metadata] | where_exp: 'item','item.objectid and item.parentid == nil' -%}
{% endif %}
{%- assign items = items | where_exp: 'item','item.latitude != nil and item.longitude != nil' -%}
{%- assign fields = site.data.config-map -%}
<!-- load leaflet dependencies -->
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.js"></script>
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/Leaflet.fullscreen.min.js"></script>
{% if site.data.theme.map-search == true %}<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/fuse.min.js"></script>
<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.fusesearch.js"></script>{% endif %}
{% if site.data.theme.map-cluster == true %}<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.markercluster.js"></script>{% endif %}
{% if site.data.theme.map-search == true and site.data.theme.map-cluster == true %}<script src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/leaflet/leaflet.markercluster.freezable.js"></script>{% endif %}
<script>
(function(){
/* add collection map data */
var geodata = { "type": "FeatureCollection", "features": [
{% for item in items %}
{ "type":"Feature", "geometry":{ "type":"Point", "coordinates":[{{ item.longitude | strip }},{{ item.latitude | strip }}] }, "properties":
{
{% for f in fields %}{% if item[f.field] %}{{ f.field | escape | jsonify }}:{{ item[f.field] | strip | escape | jsonify }}, {%- endif -%}{%- endfor -%}
{% if item.image_thumb %}"img": {{ item.image_thumb | relative_url | jsonify }},{% endif %}
{% if item.display_template %}"template": {{ item.display_template | escape | jsonify }}, {%- endif -%}
{% if item.format %}"format": {{ item.format | escape | jsonify }}, {%- endif -%}
{% if item.image_alt_text %}"alt": {{ item.image_alt_text | escape | jsonify }}, {%- endif -%}
{% if item.parentid %}"parent": {{ item.parentid | jsonify }}, {%- endif -%}
"title": {{ item.title | escape | jsonify }},
"id": {{ item.objectid | jsonify }}
} }{% unless forloop.last %}, {% endunless %}{% endfor %}
]};
/* check for url parameters and setup initial view options */
let url = new URL(window.location);
const locationSearchParams = url.searchParams.get('location');
var mapCenter = locationSearchParams ? locationSearchParams.split(',') : [{{ site.data.theme.latitude | default: 46.727485 }}, {{ site.data.theme.longitude | default: -117.014185 }}];
var mapZoom = locationSearchParams ? 16 : {{ site.data.theme.zoom-level | default: 5 }};
var markerFilter = url.searchParams.get('marker') ? url.searchParams.get('marker') : "";
/* init map */
var map = L.map('mapContainer');
/* add map layer options */
var Esri_WorldStreetMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
});
var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
});
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var OpenStreetMap_Mapnik = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
/* add base map switcher */
var baseMaps = {
"Esri World StreetMap": Esri_WorldStreetMap,
"Esri National Geo": Esri_NatGeoWorldMap,
"Esri Imagery": Esri_WorldImagery,
"Open Street Map": OpenStreetMap_Mapnik
};
L.control.layers(baseMaps).addTo(map);
/* load base map */
{{ site.data.theme.map-base | default: 'Esri_WorldStreetMap' }}.addTo(map);
{% if site.data.theme.map-search == true %}
/* add search, https://github.com/naomap/leaflet-fusesearch */
var options = {
title: 'Search Map Items',
placeholder: 'Search map items...',
threshold: {{ site.data.theme.map-search-fuzziness | default: 0.35 }},
showResultFct: function(feature, container) {
var result = `<strong>${feature.properties.title}</strong><br>`;
{% for f in fields %}
if(feature.properties[{{ f.field | jsonify }}]) { result += feature.properties[{{ f.field | jsonify }}] + `<br>`; }
{% endfor %}
container.innerHTML = result;
}
};
var searchCtrl = L.control.fuseSearch(options);
searchCtrl.addTo(map);
searchCtrl.indexFeatures(geodata.features, {{ fields | where: 'search','true' | map: 'field' | unshift: 'title' | jsonify }});{% endif %}
/* add fullscreen control */
map.addControl(new L.Control.Fullscreen());
{% if site.data.theme.map-cluster == true %}
/* create cluster group */
var markers = L.markerClusterGroup({
maxClusterRadius: {{ site.data.theme.map-cluster-radius | default: 15 }},
singleMarkerMode: true,
iconCreateFunction: function(cluster) {
/* custom icon function, tweak default to add more alt text */
var childCount = cluster.getChildCount();
var csize;
if (childCount < 10) {
csize = 'small';
} else if (childCount < 100) {
csize = 'medium';
} else {
csize = 'large';
}
var c = ' marker-cluster-' + csize;
return new L.DivIcon({ html: '<div><span class="visually-hidden">' + csize +' cluster of </span><span>' + childCount + '</span><span class="visually-hidden"> items</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
}
{% if site.data.theme.map-search == true %}, removeOutsideVisibleBounds: false{% endif %}
});{% endif %}
/* get icons function */
{% include helpers/get-icon.js %}
/* object popup function */
function objectPopups(feature, layer) {
{% if site.data.theme.map-search == true %}/* bind feature for search */
feature.layer = layer;{% endif %}
// find item link
var itemHref = `{{ '/items/' | relative_url }}${ feature.properties.parent ? feature.properties.parent + ".html#" + feature.properties.id : feature.properties.id + ".html"}`;
// find image
var imgAlt = feature.properties.alt ? feature.properties.alt : feature.properties.title;
var thumbImg;
if (feature.properties.img) {
thumbImg = '<img class="map-thumb" src="' + feature.properties.img + '" alt="' + imgAlt + '">';
} else {
thumbImg = getIcon(feature.properties.template,feature.properties.format,"thumb")
}
// set up popup content
var popupTemplate = '<h2 class="h4"><a class="text-dark" href="' + itemHref + '">' +
feature.properties.title + '</a></h2><div class="text-center"><a href="' + itemHref +
'" >' + thumbImg + '</a></div><p>';
{% for f in fields %}{% if f.display_name %}
if (feature.properties[{{ f.field | escape | jsonify }}]) {
popupTemplate += '<strong>{{ f.display_name }}:</strong> ' + feature.properties[{{ f.field | escape | jsonify }}] + '<br>';
}
{% endif %}{% endfor %}
popupTemplate += '</p><div class="text-center"><a class="btn btn-light" href="' + itemHref + '" >View Item</a></div>';
layer.bindPopup(popupTemplate);
}
function objectMarkers(feature,latlng) {
var marker = L.marker(latlng, {alt: feature.properties.title});
{% if site.data.theme.map-cluster == true %}markers.addLayer(marker);{% endif %}
return marker;
}
/* add objects from geoJson features */
var mapFeatures = L.geoJson(geodata, {
onEachFeature: objectPopups,
pointToLayer: objectMarkers
}){% if site.data.theme.map-cluster != true %}.addTo(map);{% else %};
map.addLayer(markers);{% endif %}
{% if site.data.theme.auto-center-map == true %}
/* if no location was specified in the URL query parameters, auto center the map */
if (locationSearchParams === null) {
const featureBounds = mapFeatures.getBounds()
if (featureBounds?.isValid()) {
map.fitBounds(featureBounds);
}
} else {
/* set map view based on URL parameters */
map.setView(mapCenter, mapZoom);
}
{% else %}
/* set map view based on configuration or URL parameters */
map.setView(mapCenter, mapZoom);
{% endif %}
{% if site.data.theme.map-cluster == true and site.data.theme.map-search == true %}
/* uncluster when search is clicked */
document.querySelector('a.button').addEventListener("click", function() {
markers.disableClustering();
});
/* recluster when search is closed */
document.querySelector('a.close').addEventListener("click", function() {
markers.enableClustering();
document.querySelector('input.search-input').value = "";
});{% endif %}
/* show popup if id in URL query */
if (markerFilter != "") {
{% if site.data.theme.map-cluster == true %}
markers.eachLayer(layer => {
if (layer.feature.properties.id === markerFilter) {
/* uncluster clusters, then show */
if (markers.getVisibleParent(layer)["_childCount"]) {
markers.getVisibleParent(layer).spiderfy();
}
layer.openPopup();
}
});
{% else %}
mapFeatures.eachLayer(layer => {
if (layer.feature.properties.id === markerFilter) {
layer.openPopup();
}
});
{% endif %}
}
})();
</script>

11
.github/_includes/js/modal-hash-js.html vendored Normal file
View File

@@ -0,0 +1,11 @@
<script>
window.addEventListener('load', function () {
if (window.location.hash) {
/* if url has a hash, open the related item modal */
var hashModal = decodeURIComponent(location.hash.substr(1));
if (document.querySelector('#' + hashModal + 'Card a')) {
document.querySelector('#' + hashModal + 'Card a').click();
}
}
});
</script>

32
.github/_includes/js/table-js.html vendored Normal file
View File

@@ -0,0 +1,32 @@
{% assign fcount = site.data.config-table | size %}
<!-- load DataTables with jquery bundled -->
<script type="text/javascript" language="javascript" src="{{ site.lib-assets | default: '/assets/lib' | relative_url }}/datatables/datatables.min.js"></script>
<script>
/* use jquery to initialize DataTables and load collection data */
$(document).ready( function () {
$('#item-table').DataTable( {
// use DataTables ajax load
ajax: { url: '{{ "/assets/js/metadata.min.json" | relative_url }}', dataSrc: 'objects' },
// defer render to speed up large sets
"deferRender": true,
// enable pagination
"paging": true,
"lengthMenu": [[ 25, 50, 100, -1], [ 25, 50, 100, "All"]],
// add download features
dom: 'B<"row mt-2"<"col-md-6"l><"col-md-6"f>>t<"row"<"col-md-6"i><"col-md-6"p>>',
buttons: [ 'excelHtml5', 'csvHtml5' ],
// get the data from json
columns: [ {% for i in (0..fcount) %}{ data: '{{ i }}' }{% unless forloop.last %},{% endunless %}{% endfor %} ],
columnDefs: [
// turn relative link into absolute
{ "render": function ( data ) { return '{{ "/" | relative_url }}' + data; },"targets": {{ fcount }} },
// combine link with first column
{ "render": function ( data, type, row ) { return '<a href="' + row['{{ fcount }}'] +'">'+ data +'</a>'; },"targets": 0 },
// hide the link column
{ "visible": false, "targets": [ {{ fcount }} ] }
],
// sort based on the second column
order: [[ 1, "asc" ]]
});
});
</script>

21
.github/_includes/js/timeline-js.html vendored Normal file
View File

@@ -0,0 +1,21 @@
<script>
(function(){
// init bootstrap tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
// highlight active year row
function highlightYear() {
var hashfilter = "tr#" + decodeURIComponent(location.hash.substr(1));
document.querySelectorAll("table#timeline tr").forEach(row => { row.classList.remove('table-info'); });
if (document.querySelector(hashfilter)) { document.querySelector(hashfilter).classList.add("table-info"); }
}
// if in initial hash
if (window.location.hash) { highlightYear(); }
// on hash change
window.addEventListener("hashchange", highlightYear);
})();
</script>

15
.github/_includes/nav-search-lunr.html vendored Normal file
View File

@@ -0,0 +1,15 @@
<script>
function site_search() {
var query = document.getElementById("site-search").value;
window.open("{{ '/search/index.html' | relative_url }}?q=" + encodeURIComponent(query), "_self" );
}
</script>
<form class="form-inline my-2 my-lg-0" role="search" id="search" onsubmit="site_search(); return false;">
<div class="input-group">
<input id="site-search" class="form-control " type="text" placeholder="Search" aria-label="Search box">
<button class="btn btn-light" type="submit">
<span id="search-icon"><svg viewBox="0 0 1024 974" height="16px" width="20px"><path d="M960 832L710.875 582.875C746.438 524.812 768 457.156 768 384 768 171.96900000000005 596 0 384 0 171.969 0 0 171.96900000000005 0 384c0 212 171.969 384 384 384 73.156 0 140.812-21.562 198.875-57L832 960c17.5 17.5 46.5 17.375 64 0l64-64C977.5 878.5 977.5 849.5 960 832zM384 640c-141.375 0-256-114.625-256-256s114.625-256 256-256 256 114.625 256 256S525.375 640 384 640z"/></svg></span>
<span class="visually-hidden">Search</span>
</button>
</div>
</form>

35
.github/_includes/scroll-to-top.html vendored Normal file
View File

@@ -0,0 +1,35 @@
<script>
// When the user scrolls down from the top of the document, show the button
window.onscroll = function () {
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
document.getElementById("scroll-to-top").style.display = "block";
} else {
document.getElementById("scroll-to-top").style.display = "none";
}
}
</script>
<a href="javascript:void(0)" id="scroll-to-top" class="btn btn-link" title="Back to Top">
<span class="visually-hidden">Back to top</span>
<svg class="bi icon-sprite" role="img" aria-label="Up Arrow">
<use xlink:href="{{ '/assets/css/cb-icons.svg' | relative_url }}#icon-back-to-top"/>
</svg>
</a>
<script>
const scrollBtn = document.getElementById("scroll-to-top");
window.addEventListener("scroll", function () {
if (window.scrollY > 500) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
});
scrollBtn.addEventListener("click", function () {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth"
});
});
</script>