Adding all code components for a new 'markdown' display_template

_data/theme.yml

@@ -112,6 +112,7 @@ font-cdn: # add font stylesheet, e.g. <link href="https://fonts.googleapis.com/c
 #   icon-pdf: file-pdf
 #   icon-record: file-text
 #   icon-panorama: image-alt
+#   icon-markdown: filetype-md
 #   icon-compound-object: collection 
 #   icon-multiple: postcard
 #   icon-default: file-earmark # fall back icon

_includes/helpers/get-icon.js

@@ -27,6 +27,9 @@ function getIcon(objectTemplate,objectFormat,svgType) {
     } else if (iconTemplate.includes("panorama")) {
         iconId = "icon-panorama";
         iconTitle = "panorama file icon";
+    } else if (iconTemplate.includes("markdown")) {
+        iconId = "icon-markdown";
+        iconTitle = "markdown file icon";
     } else if (iconTemplate.includes("compound")) {
         iconId = "icon-compound-object";
         iconTitle = "compound object icon";

_includes/item/child/compound-item-modal-gallery.html

@@ -22,7 +22,7 @@
                         {% 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/lib/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 %}" />
+                            <use xlink:href="{{ '/assets/lib/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 'markdown' %}icon-markdown{% else %}icon-default{% endif %}" />
                         </svg>
                         <span class="visually-hidden">{{ child.title | escape }} - {{ child.format }}</span>
                         {% endif %}

_includes/item/child/item-thumb.html

@@ -9,7 +9,7 @@
     {% else %}
     <svg class="bi text-body" fill="currentColor" aria-hidden="true">
         {%- assign icon_template = child.display_template | default: child.format -%}
-        <use xlink:href="{{ '/assets/lib/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 %}"/>
+        <use xlink:href="{{ '/assets/lib/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{% elsif icon_template contains 'markdown' %}icon-markdown{% else %}icon-default{% endif %}"/>
     </svg>
     <span class="visually-hidden">{{ child.title | escape }} - {{ child.format }}</span>
     {% endif %}

_includes/item/item-markdown.html

@@ -0,0 +1,22 @@
+{% comment %}
+
+    Display the contents of object_location using markdownify.
+
+{% endcomment %}
+<!-- cb: _includes/item/item-markdown.html -->
+{% if page.object_location %}
+  <div class="mt-3">
+    <div class="card card-body text-start">
+    {% assign object_type = page.object_location | slice: 0,1 %}
+    {% if object_type == '/' %}
+      {% assign object_location = page.object_location | remove_first: '/' %}
+      {% assign object = site.pages | where: 'path', object_location | first %}
+      {{ object.content | markdownify }}
+    {% else %}
+      {{ page.object_location | markdownify }}
+    {% endif %}
+    </div>
+  </div>  
+  <span class="visually-hidden">{{ page.title | escape }} - {{ page.format }}</span>
+{% endif %}
+<!-- /cb: _includes/item/item-markdown.html -->

_includes/item/item-thumb.html

@@ -9,7 +9,7 @@
     {% else %}
     <svg class="bi text-body" fill="currentColor" aria-hidden="true">
         {%- assign icon_template = page.display_template | default: page.format -%}
-        <use xlink:href="{{ '/assets/lib/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 %}"/>
+        <use xlink:href="{{ '/assets/lib/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{% elsif icon_template contains 'markdown' %}icon-markdown{% else %}icon-default{% endif %}"/>
     </svg>
     <span class="visually-hidden">{{ page.title | escape }} - {{ page.format }}</span>
     {% endif %}

_layouts/item/markdown.html

@@ -0,0 +1,22 @@
+---
+# derived from item.html, for objects with `display_template` of "markdown" 
+# displays object_location content in Markdown form
+layout: item/item-page-base
+---
+
+<!-- cb: _layouts/item/markdown.html -->
+<div class="card mb-4 text-center">
+    <div class="card-body">
+
+        <p>
+            {% include item/item-markdown.html %}
+        </p>
+        <div class="mt-2">
+
+            {% include item/download-buttons.html %}
+
+        </div>
+
+    </div>
+</div>
+<!-- /cb: _layouts/item/markdown.html -->

_layouts/timeline.html

@@ -58,7 +58,7 @@ <h3>{{ year }}</h3>
                                     <div class="h5 text-dark">{{ item.title }}</div>
                                     <svg class="bi timeline-thumb text-body" fill="currentColor" aria-hidden="true">
                                         {%- assign icon_template = item.display_template | default: item.format -%}
-                                        <use xlink:href="{{ '/assets/lib/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 'panorama' %}icon-panorama{% elsif icon_template contains 'compound' %}icon-compound-object{% elsif icon_template contains 'multiple' %}icon-multiple{% else %}icon-default{% endif %}"/>
+                                        <use xlink:href="{{ '/assets/lib/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 'panorama' %}icon-panorama{% elsif icon_template contains 'markdown' %}icon-markdown{% elsif icon_template contains 'compound' %}icon-compound-object{% elsif icon_template contains 'multiple' %}icon-multiple{% else %}icon-default{% endif %}"/>
                                     </svg>
                                 </div>
                             </div>

_plugins/cb_helpers.rb

@@ -130,6 +130,9 @@ def generate(site)
       if !theme_icons['icon-record']
         theme_icons['icon-record'] = "file-text"
       end
+      if !theme_icons['icon-markdown']
+        theme_icons['icon-markdown'] = "filetype-md"
+      end
       if !theme_icons['icon-panorama']
         theme_icons['icon-panorama'] = "image-alt"
       end

docs/icons.md

@@ -68,6 +68,7 @@ icons:
   icon-pdf: file-pdf
   icon-record: file-text
   icon-panorama: image-alt
+  icon-markdown: filetype-md
   icon-compound-object: collection 
   icon-multiple: postcard
   icon-default: file-earmark # fall back icon

docs/item_pages.md

@@ -18,7 +18,7 @@ Look for comments in each layout's front matter for information.
 Each display_template layout is typically constructed of modular item page components (found in "_includes/item/") and arranged using Bootstrap.
 This simplifies customization and creation of different item pages depending on collection needs.
 
-Default supported options include: `image`,`pdf`, `video`, `audio`, `panorama`, `record`, `item`, `multiple`, and `compound_object`. 
+Default supported options include: `image`,`pdf`, `video`, `audio`, `panorama`, `record`, `item`, `markdown`, `multiple`, and `compound_object`. 
 
 - `image`: Displays image_small if available, with fall back to object_location. Adds gallery view to open images full screen using object_location, with fall back to image_small.
 - `pdf`: Displays image_small if available, with fall back to image_thumb, or a pdf icon.
@@ -27,6 +27,7 @@ Default supported options include: `image`,`pdf`, `video`, `audio`, `panorama`,
 - `panorama`: a 360 degree image. Item pages will use the Javascript based panorama viewer, [Panellum](https://pannellum.org/) to display the image in a 360 degree view.
 - `record`: metadata only record.
 - `item`: generic fallback item page, displays image or icon depending on "image_thumb"
+- `markdown`: Uses "markdownify" template function to display the contents of a valid [Markdown](https://en.wikipedia.org/wiki/Markdown) document  
 - `compound_object`: a record for a object that includes multiple file instances that are described/managed separately in the metadata. Compound objects use their own set of conventions, see "docs/compound_objects.md" for details.
 - `multiple`: a record for a object that includes multiple images (such as a postcard) that are listed separately in the metadata. Multiples use their own set of conventions, see "docs/compound_objects.md" for details.
 

docs/metadata.md

@@ -36,5 +36,5 @@ Do not include the `baseurl` value that you set in "_config.yml", since this wil
 
 ## Display Template
 
-- `display_template`: a template type used in logic to set up different Item page features. If blank the object will default to a generic item page. Default supported options: `image`,`pdf`, `video`, `audio`, `panorama`, `record`, `item`, `multiple`, and `compound_object`. See docs/item-pages.md for details.
+- `display_template`: a template type used in logic to set up different Item page features. If blank the object will default to a generic item page. Default supported options: `image`,`pdf`, `video`, `audio`, `panorama`, `record`, `item`, `markdown`, `multiple`, and `compound_object`. See docs/item-pages.md for details.
 - `parentid`: used to designate child items in the "multiple" and "compound_object" templates, a unique string matching the objectid of the parent item. See docs/compound_objects.md for details.