Directories

Even for a small class or small project, you need to have some kind of directory or table of contents for your content. Xanthan comes with a few ways to do this, and of course more can be added.

Table of Contents

One familiar approach is to create a table of contents for your site pages, like you’d find in a book. Let’s say you have a collection of pages, like student essays, that you want to create a table of contents for. We can do this automatically, as long as each page has a little metadata at the top of the file in the YML header.

---
title: My Essay Title
author: Fred Gibbs
summary: This is a short but provocative summary of my essay
---

We can use this data to automatically generate links to the essays. Below, we create a list of from data on pages in Xanthan’s essays folder.

• First, we define a variable called pages (it could be anything) that gathers all the metadata from the files in the essays folder.
• Then we send that data to our include file, which has the HTML code to generate the a list themselves. The code below produces the Toc rows just below it.

{% assign pages = site.pages | where_exp: "page", "page.path contains 'essays/'" %}

{% include toc.html rows = pages %}

Stacked cards

A little fancier than a ToC-style list, we can a generate of a stack of horizontal “cards” in the same way. In terms of gathering data to display, this works exactly like above. But it calls a different include file, which presents a stack of wide and short cards in a vertical display.

{% assign essays = site.pages | where_exp: "page", "page.path contains 'essays/'" %}

{% include card-grid.html cards = essays %}

Forest

This essays demonstrates all the different components you might use on your page. Of course you don't need to use them all, but it's a good starting point if you feel comfortable with code snippets and deleting what you don't need.

Seedling

Perfect for beginners getting comfortable with Markdown and digital essays. Basically section headings, a few images, and some pull quotes. Nothing fancy, but enough to make a visually compelling essay.

Sapling

Our Sapling essay has a little more functionality built into it than our Seed essay, including the simplest the scrolly box.

Grid cards

You can see more cards at a glance if you use a grid layout with slightly smaller cards.

{% assign essays = site.pages | where_exp: "page", "page.path contains 'essays/'" %}

{% include card-grid.html cards = essays %}

Forest

This essays demonstrates all the different components you might use on your page. Of course you don't need to use them all, but it's a good starting point if you feel comfortable with code snippets and deleting what you don't need.

Seedling

Perfect for beginners getting comfortable with Markdown and digital essays. Basically section headings, a few images, and some pull quotes. Nothing fancy, but enough to make a visually compelling essay.

Sapling

Our Sapling essay has a little more functionality built into it than our Seed essay, including the simplest the scrolly box.

Left Navbar

Another way of getting to pages on your site can be through a nav bar that always stays on the left side of the page. Check out the left navbar demo page.

Custom displays

We can list your pages just about however you’d like. Let’s say your students made poscasts, assigned them one or more tags, and and you wanted a way to list them. We can make something like a podcast listing.

Styling your directory

All the HTML code that makes the cards follows the standard Bootstrap card model, which makes it easy to adjust the layout following Bootstrap documentation and examples.