Merge pull request #4 from CollectionBuilder/mamgrinnell-pr

Mamgrinnell pr

README.md

@@ -35,7 +35,17 @@ However, here is a super quick overview of the process:
 - Edit your project's "_config.yml" with your collection information (see [site configuration docs](https://collectionbuilder.github.io/cb-docs/docs/config/)). Additional customization is done via a theme file, configuration files, CSS tweaks, and more--however, once your "_config.yml" is edited your site is ready to be previewed. 
 - Generate your site using Jekyll! (see docs for how to [use Jekyll locally](https://collectionbuilder.github.io/cb-docs/docs/repository/generate/) and [deploy on the web](https://collectionbuilder.github.io/cb-docs/docs/deploy/))
 
-Please feel free to ask questions in the main [CollectionBuilder discussion forum](https://github.com/CollectionBuilder/collectionbuilder.github.io/discussions).       
+Please feel free to ask questions in the main [CollectionBuilder discussion forum](https://github.com/CollectionBuilder/collectionbuilder.github.io/discussions).      
+
+## Important TIMESTAMP Note!
+
+If you put `timestamp` in your transcript .CSV files (we highly recommended that you do) please make sure they use full `[hh:mm:ss]` notation!  You may omit the `hh:` portion for timestamps of less than an hour, but make sure you always specify a full `mm:ss` notation.  For example, 9-minutes 7-seconds should never be specified as `[9:7]` or even `[9:07]`, the proper form is `[00:09:07]` but `[09:07]` will also work.  
+
+## Important DATE Note!
+
+Handling dates in metadata can be tricky and remember that information you enter in your metadata .CSV file comes into the framework as `text`, not as any other data type (so there are no `date` type variables).  This makes custom formatting of things like dates especially tricky.  Consequently, you won't find a lot of `date` formatting in CB, for the most part it will display exactly what you entered.  
+
+This can also present difficulties if you want to sort on something like a `date` field.  So it's recommended that you **always enter dates in the form `yyyy` (only the year), or `yyyy-mm` (year and month), or `yyyy-mm-dd` (a complete discrete date)**.  Doing so will ensure that your dates make sense when displayed AND they will sort properly too.  
 
 ----------
 

_config.yml

@@ -24,11 +24,14 @@ tagline: Prototype for working with Oral History as Data items in CollectionBuil
 # description appears in meta tags and other locations
 # this description might appear in search result lists, keep around 160 characters max
 description: "CB-OHD is a mix of CollectionBuilder-CSV and Oral History as Data (OHD)."
+# if you want a different description to appear in the footer only, define it here, or leave blank to use description
+footer_description: "cb-oralhistory rocks!" 
 # keywords, a short list of subjects describing the collection, separated by semicolon, to appear in rich markup
 keywords: oral histories;digital collections
 # creator of the digital collection, to appear in meta tags; we typically use our GitHub usernames but feel free to just use your name
 author: dcnb
 
+
 ##########
 # COLLECTION SETTINGS
 #
@@ -81,3 +84,15 @@ exclude: [docs/, Rakefile, README.md, LICENSE, CITATION.cff, CODE_OF_CONDUCT.md,
 # compress CSS output
 sass:
   style: compressed
+
+###########
+# Additional parameters
+#
+# timezone: added per suggestion found in https://talk.jekyllrb.com/t/timezone-global-configuration-problem/7985
+timezone: America/Chicago
+
+### Note Jekyll documentation suggests...
+# JEKYLL_ENV=production  # ...must be set in order to make a production build. 
+# but we've built in a command to build for production. It's:  rake deploy
+# if you enter  rake deploy    in the command line, the site will build with production variables
+# documented here: https://collectionbuilder.github.io/cb-docs/docs/deploy/build/#build-with-rake-deploy

_includes/feature/pdf.html

@@ -21,6 +21,8 @@
     Note: if you have issues make sure the item is a PDF file!
 
 {%- endcomment -%}
+
+<!-- cb: _includes/feature/pdf.html -->
 {% if include.objectid contains "/" %}
 {%- capture src -%}{{ include.objectid | relative_url }}{%- endcapture -%}
 {%- capture pdf_link -%}{{ src }}{%- endcapture -%}
@@ -40,4 +42,5 @@
         </div>
         {% unless include.caption == false %}<figcaption class="figure-caption"><a href="{{ pdf_link }}">{{ pdf_caption }}</a></figcaption>{% endunless %}
     </figure>
-</div>
+</div>
+<!-- /cb: _includes/feature/pdf.html -->

_includes/footer.html

@@ -1,11 +1,12 @@
+<!-- cb: _includes/footer.html -->
 <footer class="bg-dark pt-4 mt-auto container-fluid">
 
     <div class="row border-bottom border-white pb-4 mb-2">
 
         <div class="col-md-7 px-4 mt-3">
 
             <h2 class="h4"><a href="{{ '/' | relative_url }}" class="text-white">{{ site.title }}</a></h2>
-            <p class="text-white"><small>{{ site.description }}</small></p>
+            <p class="text-white"><small>{{ site.footer_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' -%}
@@ -45,7 +46,8 @@ <h2 class="h4"><a href="{{ '/' | relative_url }}" class="text-white">{{ site.tit
     </div>
 
     <div class="col-md-12 text-center pt-3 pb-1">
-        <p class="text-white">Last updated {{ site.time | date: '%Y' }}</p>
+        <p class="text-white">Last updated {{ site.time | date: '%F %l:%M %p' }}</p>
     </div>
 
-</footer>
+</footer>
+<!-- /cb: _includes/footer.html -->

_includes/index/time.html

@@ -6,6 +6,8 @@
 {%- assign raw-dates = date-items | map: 'date' | 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  -%}
+
+{% if date-range.size > 0 %}  <!-- MAM added logic to hide this if empty, Sept. 2024 -->
 <div class="card mb-3">
   <div class="card-body">
     <h2 class="card-title h5">Time Span</h2>
@@ -14,3 +16,4 @@ <h2 class="card-title h5">Time Span</h2>
     </p>
   </div>
 </div>
+{% endif %}

_includes/item/pdf-embed.html

@@ -5,8 +5,10 @@
     Size is controlled using Bootstrap Custom ratios, https://getbootstrap.com/docs/5.3/helpers/ratio/#custom-ratios
 
 {% endcomment %}
+<!-- cb: _includes/item/pdf-embed.html -->
 <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>
+<!-- /cb: _includes/item/pdf-embed.html -->

_includes/transcript/item/download-buttons.html

@@ -1,3 +1,4 @@
+<!-- cb: _includes/transcript/item/download-buttons.html -->
 <div class="btn-group meta" role="group" aria-label="Button group">
 <a data-bs-toggle="modal" data-bs-target="#metadata-modal" class="btn btn-outline-primary">View Item Information</a>
 {% 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 -%}

_includes/transcript/item/filters.html

@@ -1,45 +1,46 @@
+<!-- cb: _includes/transcript/item/filters.html -->
 <div class="row my-3 sticky-top bg-white border-bottom border-left border-right d-print-none py-3 w-md-75" id="filters-search" >
-    <div class="col {% unless site.data.filters %}d-none{% endunless %}">
-      <select id="filters" title="Filter by Topic" aria-label="Topic filtering dropdown select option" class="filters py-1 form-select border border-primary" onchange="filterLines(this.value)">
-        <option value="all" class="reset" selected="selected reset">Filter by Topic</option>
-        {% assign filters = site.data.filters %}
-        {% for filter in filters %}
-        {% assign tag = filter.tag | slugify %}
-        {%if uniqueSubjects contains tag %}<option value="{{ tag }}">{{filter.description | capitalize}}
-          ({{filter.tag}})</option>{%endif%}
-        {% endfor %}
-      </select>
-    </div>
-    <div class="col">
-      <div id="transcriptsearch" class="bg-lightr">
-        <div class="row">
-          <div class="col-md-6">
-            <div class="input-group fs-5 mt-0 mt-md-0">
-              <input type="text" class="form-control border border-primary py-1" placeholder="Search..." aria-label="Search"
-                aria-describedby="goButton" id="quicksearch">
-              <div class="input-group-append">
-                <button class=" rounded-right border border-primary btn btn-primary p-1" type="submit"
-                  title="Search" alt="Search" id="goButton"
-                  onclick="var searchval = document.getElementById('quicksearch').value; searchLines(searchval);">Go</button>
-              </div>
+  <div class="col {% unless site.data.filters %}d-none{% endunless %}">
+    <select id="filters" title="Filter by Topic" aria-label="Topic filtering dropdown select option" class="filters py-1 form-select border border-primary" onchange="filterLines(this.value)">
+      <option value="all" class="reset" selected="selected reset">Filter by Topic</option>
+      {% assign filters = site.data.filters %}
+      {% for filter in filters %}
+      {% assign tag = filter.tag | slugify %}
+      {%if uniqueSubjects contains tag %}<option value="{{ tag }}">{{filter.description | capitalize}}
+        ({{filter.tag}})</option>{%endif%}
+      {% endfor %}
+    </select>
+  </div>
+  <div class="col">
+    <div id="transcriptsearch" class="bg-lightr">
+      <div class="row">
+        <div class="col-md-6">
+          <div class="input-group fs-5 mt-0 mt-md-0">
+            <input type="text" class="form-control border border-primary py-1" placeholder="Search..." aria-label="Search"
+              aria-describedby="goButton" id="quicksearch">
+            <div class="input-group-append">
+              <button class=" rounded-right border border-primary btn btn-primary p-1" type="submit"
+                title="Search" alt="Search" id="goButton"
+                onclick="var searchval = document.getElementById('quicksearch').value; searchLines(searchval);">Go</button>
             </div>
           </div>
-          <div class="col-md-6">
-            <button class="reset btn btn-sm btn-primary input-group-text float-end float-md-none mt-2 mt-md-0" onclick="vizFilter('all');">Reset
-              Filters</button>
-          </div>
+        </div>
+        <div class="col-md-6">
+          <button class="reset btn btn-sm btn-primary input-group-text float-end float-md-none mt-2 mt-md-0" onclick="vizFilter('all');">Reset
+            Filters</button>
         </div>
       </div>
     </div>
-    <div id="filtersearch" class="col-12 d-none mt-3">
-      <h5 id="linecount" class="d-none small ms-3"><span id="numberof"></span></h5>
+  </div>
+  <div id="filtersearch" class="col-12 d-none mt-3">
+    <h5 id="linecount" class="d-none small ms-3"><span id="numberof"></span></h5>
 
-      <select class="w-100 col-md-8 mb-2 form-select p-2 border border-primary" id="searchResults" onchange="scrollToLine(this.value);">
+    <select class="w-100 col-md-8 mb-2 form-select p-2 border border-primary" id="searchResults" onchange="scrollToLine(this.value);">
 
-      </select>
-    </div>
-    <div id="filter-tab" class="d-none filter-tab col-4 col-lg-2 text-center justify-content-end bg-primary text-white small px-1 py-1">
-      <span id="hide-filters-text">Hide Filters &#9650;</span>
-      <span id="show-filters-text">Show Filters &#9660;</span>
-    </div>
-  </div>
+    </select>
+  </div>
+  <div id="filter-tab" class="d-none filter-tab col-4 col-lg-2 text-center justify-content-end bg-primary text-white small px-1 py-1">
+    <span id="hide-filters-text">Hide Filters &#9650;</span>
+    <span id="show-filters-text">Show Filters &#9660;</span>
+  </div>
+</div>

_includes/transcript/item/metadata-modal.html

@@ -1,4 +1,4 @@
-
+<!-- cb: _includes/transcript/item/metadata-modal.html -->
 <div class="modal fade" id="metadata-modal" tabindex="-1" role="dialog" aria-labelledby="metadata-modal-ModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">

_includes/transcript/item/metadata.html

@@ -5,6 +5,7 @@
 
 {%- endcomment -%}
 {%- assign fields = site.data.config-metadata | where_exp: 'item', 'item.display_name != nil' -%}
+<!-- cb: _includes/transcript/item/metadata.html -->
 <div id="item-metadata">
     <dl>
         {% for f in fields %}{% if page[f.field] %}

_includes/transcript/item/transcript-metadata.html

@@ -1,9 +1,10 @@
-<div class="my-2 row px-3 mt-4 meta">
+<!-- cb: _includes/transcript/item/transcript-metadata.html -->
+  <div class="my-2 row px-3 mt-4 meta">
     <div class="col">
       <p><span class="me-3">
         {%if page.bio and site.data.theme.transcript-fields contains 'bio'%}<b>Bio:</b>  <span class="me-3">{{page.bio}}</span> <br/>{%endif%}
         {%if page.description and site.data.theme.transcript-fields contains 'description'%}<b>Description:</b>  <span class="me-3">{{page.description}}</span>{%endif%}{%if
-        page.date and site.data.theme.transcript-fields contains 'date'%}<br><b>Date:</b> <span class="me-3">{{page.date | date: "%B %d, %Y" }}</span>{%endif%} {%if
+        page.date and site.data.theme.transcript-fields contains 'date'%}<br><b>Date:</b> <span class="me-3">{{page.date}}</span>{%endif%} {%if
           page.location and site.data.theme.transcript-fields contains 'location' %}<b>Location:</b> {{page.location }}{%endif%}
         {%if page.interviewer and site.data.theme.transcript-fields contains 'interviewer' %} <br><b>Interviewer:</b> {{page.interviewer}}{%endif%}
         {%if page.interviewer and site.data.theme.transcript-fields contains 'interviewee' %} <br><b>Interviewee:</b> {{page.interviewee}}{%endif%}
@@ -19,4 +20,5 @@
     </div>
     {% endif %}
     {% endif %}
-  </div>
+  </div>
+<!-- /cb: _includes/transcript/item/transcript-metadata.html -->

_includes/transcript/item/transcript-viz.html

@@ -1,3 +1,4 @@
+<!-- cb: _includes/transcript/item/transcript-viz.html -->
 <div class="my-2 row px-3 mt-2" id="viz">
   <h4 class="mt-2 mb-0 meta">Topics:</h4>
     <div class="vizdiv w-100">

_includes/transcript/item/transcript.html

@@ -1,5 +1,5 @@
 {% include transcript/item/filters.html %}
-
+<!-- cb: _includes/transcript/item/transcript-viz.html -->
 <div id="contents-container" class="pe-5 pb-5 mb-5 border-bottom">
   {% for item in items %}
   {% assign prev_index = forloop.index0 | times: 1 | minus: 1 %}
@@ -10,10 +10,8 @@
       {% unless item.speaker == prev_speaker %}{%if item.speaker %}<span class="fw-bold pe-3 pb-3">{{item.speaker |
         remove: ":"}}: </span>{% endif %}{% endunless %}{{item.words}}
     </p>
-    <div class="col-12 col-md-2 timestamp mb-3 small text-center">{%if item.timestamp%}{% if av %}{% capture avlink
-      %}transcript/timestamp/{{av | downcase }}.html{% endcapture %}<a
-        href="{% include {{avlink}} %}">{{item.timestamp}}</a>{% else %}{{item.timestamp}}{% endif %}{% endif %}
+    <div class="col-12 col-md-2 timestamp mb-3 small text-center">{%if item.timestamp%}{% include transcript/standardized-timestamp.html %}{% if av %}<a href="#{{total_sec}}" class="timestamp-link" data-timestamp="{{total_sec | strip}}" {% if av contains 'mp3' %}onclick="timestampMP3('{{- total_sec -}}');"{% elsif av contains 'youtube' %}onclick="seekTo({{ total_sec }});"{% elsif av contains 'soundcloud' %}onclick="seekTo({{total_sec | times: 1000}});"{% endif %}>{{timestamp}}</a>{% else %}{{item.timestamp}}{% endif %}{% endif %}
     </div>
   </div>
   {% endfor %}
-</div>
+</div>

_includes/transcript/player/vimeo.html

@@ -1,3 +1,11 @@
+<!-- note that I (dcnb) got rid of most of the vimeo options as their api / player got more locked down. 
+The below code is not used anywhere currently in OHD, but I kept it in there in case it became useful for someone.  
+Previously, this is how I built the call to a vimeo video in the page: 
+ 
+{% assign timestamp = item.timestamp | remove: '[' | remove: ']' %}https://player.vimeo.com/video/{{ vimeo_id }}#t={{timestamp | date: '%H'}}h{{timestamp | date: '%M'}}m{{timestamp | date: '%S'}}s" target="_blank
+ 
+But I deleted that timestamp include command when I got rid of the vimeo options more generally.
+-->
 <div class="ratio ratio-16x9">
     <iframe title="video embed {{ page.title | escape }}" src="https://player.vimeo.com/video/{{ vimeo_id }}" allowfullscreen></iframe>
-</div>
+</div>

_includes/transcript/standardized-timestamp.html

@@ -0,0 +1 @@
+{% assign timestamp = item.timestamp | remove: '[' | remove: ']' | strip %}{%if timestamp.size == 7 or timestamp.size == 4 or timestamp.size == 1 %}{% assign timestamp = timestamp | prepend: "0" %}{% endif %}{%if timestamp.size == 5 %}{% assign timestamp = timestamp | prepend: "00:" %}{% endif %}{%if timestamp.size == 2 %}{% assign timestamp = timestamp | prepend: "00:00" %}{% endif %}{%capture hours_to_sec %}{{timestamp | date: '%H' | times: 3600 | default: 0 }}{% endcapture %}{%capture min_to_sec %}{{timestamp | date: '%M' | times: 60 | default: 0}}{% endcapture %}{%capture total_sec %}{{timestamp | date: '%S' | plus: min_to_sec | plus: hours_to_sec}}{% endcapture %}