CollectionBuilder-DHSI Workshop Tutorial

Day 4 - Pages, Liquid, Layouts and other means towards Customization

Exploring Jekyll further, looking at page creation, layouts, and the Liquid Templating language

Day 4: Thursday, June 10

Topics: Jekyll, Liquid, JavaScript, JSON, Markdown

Major Learning Objectives:

Conceptual

• Understand how Jekyll creates pages and site architecture using permalinks and layouts
• Understand how Jekyll uses the Liquid programming language to populate CollectionBuilder layouts
• Understand the difference between #collectionsasdata and collections in context*

Technical

• Be able to use _data/theme.yml to customize the look of your project
• Be able to recognize Liquid within a Jekyll project
• Be able to locate an Include file within the repository
• Be able to find the data assets and manipulate them
• Be able to create a new page in the project*

Day 4 Workshop Recording:

https://youtu.be/IclcqkS82fg

Day 4 Outline:

1. Follow up on About pages and interpretive assignment (Evan)
   • Does everyone understand how the includes work? Where to find them?
   • Notes about Bundler Gemfile and Gemfile.lock
2. What is a Jekyll/CollectionBuilder web page? (Olivia)
   • Create a new Cloud page
   • Frontmatter power
   • Expose your new pages in the Navigation Menu
   • add a dropdown to the config-nav.csv
   • Create a TimelineJS page
   • Where is the data? How is it being created/transformed/consumed?
3. How to build and deploy your site (Evan)
   • Jekyll build vs. jekyll serve
   • Deploying outside of GitHub Page - objects and web site
   • CollectionBuilder Types –> CSV
   • Demonstrate CSV rake generate derivatives
   • Demonstrate moving files to server
4. Explore possibilities for expanding and combining digital scholarship projects using static web style of development (Devin)
   • Tool, Template, Service, Infrastructure
   • Look at highly customized CollectionBuilder instances and related projects

Homework

Polish collections, complete some readings on static web + DH, brainstorm your potential future uses of CollectionBuilder

1. Polish and finish up work on your collections in preparation for show and tell tomorrow.
   • Follow the documentation if you’d like to implement any of the advanced changes demonstrated in today’s class:
   • Repurpose the timeline: https://collectionbuilder.github.io/cb-docs/docs/advanced/repurposetimeline/
   • Create a new TimelineJS page: https://collectionbuilder.github.io/cb-docs/docs/advanced/timelinejs/#creating-a-new-timeline-page–nav-dropdown
   • Create a new Cloud page: https://collectionbuilder.github.io/cb-docs/docs/advanced/cloudpage/
   • Add a dropdown to the Navigation Menu: https://collectionbuilder.github.io/cb-docs/docs/customization/config-nav/#dropdown_parent
2. Read the following articles in preparation for tomorrow’s class:
   • Gil, Alex. “The User, the Learner, and the Machines We Make.” Minimal Computing, May 21, 2015, https://go-dh.github.io/mincomp/thoughts/2015/05/21/user-vs-learner/
   • Wikle, Olivia, Evan Williamson, and Devin Becker. “What is Static Web and What’s it Doing in the Digital Humanities Classroom?” dh+lib, Special Issue: Literacies in a Digital Humanities Context, 2020, https://dhandlib.org/2020/06/22/what-is-static-web-and-whats-it-doing-in-the-digital-humanities-classroom/
3. Brainstorm some ways you might use CollectionBuilder in your unique context.

« Previous Step Next Step»