11ty Markdown -- group pets by color
Tags: webdev, eleventy, jamstack, database
Published: 2021-09-08 21:31:06

---
title: "11ty Markdown -- group pets by color"
description:  "More Eleventy kittens & puppies!"
published: true
date: 2021-02-08 18:00:00 UTC
tags: webdev,eleventy,jamstack,database
canonical_url: https://katiekodes.com/11ty-markdown-data-queries/
---

Back in November, I [addressed](https://katiekodes.com/drupal-11ty) a [StackOverflow question about how dynamic "list" generation worked in 11ty](https://stackoverflow.com/questions/64667959/how-to-create-dynamic-lists-in-11ty-static-site-generator) compared to [Drupal views](https://www.drupal.org/docs/7/modules/views/what-are-views).  I [explained the mental adjustments you'd have to go through when switching from a web site management system with a **relational** _(SQL)_ data model vs. an **object** data model](https://katiekodes.com/drupal-11ty).<br/><br/>However, not really understanding Eleventy's handling of Markdown, I did so with all of the data inside a single `.js` file within the `_data` folder.  It turns out [Alec wanted to know more about crunching data from Markdown files](https://stackoverflow.com/questions/64667959/how-to-create-dynamic-lists-in-11ty-static-site-generator#comment114432197_64684504) in 11ty.  Now that I understand 11ty's processing of `.md` files a bit better myself _(and the ways you [combine `.md` files with `.11ty.js` / `11ty.json` files inside a folder](https://11ty.rocks/posts/going-beyond-static-with-eleventy/) to avoid repeating yourself within Markdown front matter)_, I decided to take another stab at making a web site that **groups** "kittens & puppies" **by color** -- this time with Markdown instead of JSON data.  _([Code](https://github.com/kkgthb/web-site-11ty-05-markdown-pets); [live site](https://11ty-markdown-kittens-puppies.netlify.app/))_<br/><br/>I'm pretty pleased with the results as an example of the way 11ty helps you store your data exactly how you want it, while also generating URLs according to your dreams.

## Data

If you haven't seen the 5 kittens & puppies we're working with, you might want to take a moment to [review our 2 cats & 3 dogs](https://katiekodes.com/drupal-11ty) from my previous post.  

Here's the TL;DR:


### Kittens

<div class="handwritten-font" markdown="block">

<ol>
	<li><i>(kitten #1)</i>
	<ul>
		<li><b>name</b>:  Oreo</li>
		<li><b>colors</b>:
		<ul>
			<li>black</li>
			<li>white</li>
		</ul>
		</li>
		<li><b>slug</b>:  oreo</li>
	</ul>
	</li>
	<li><i>(kitten #2)</i>
	<ul>
		<li><b>name</b>:  Hershey</li>
		<li><b>colors</b>:
		<ul>
			<li>brown</li>
		</ul>
		</li>
		<li><b>slug</b>:  hershey</li>
	</ul>
	</li>
</ol>

</div>

### Puppies

<div class="handwritten-font" markdown="block">

<ol>
	<li><i>(puppy #1)</i>
	<ul>
		<li><b>name</b>:  Fido</li>
		<li><b>colors</b>:
		<ul>
			<li>white</li>
			<li>red</li>
		</ul>
		</li>
		<li><b>slug</b>:  fido</li>
	</ul>
	</li>
	<li><i>(puppy #2)</i>
	<ul>
		<li><b>name</b>:  Rover</li>
		<li><b>colors</b>:
		<ul>
			<li>tan</li>
		</ul>
		</li>
		<li><b>slug</b>:  rover</li>
	</ul>
	</li>
	<li><i>(puppy #3)</i>
	<ul>
		<li><b>name</b>:  Snickers</li>
		<li><b>colors</b>:
		<ul>
			<li>black</li>
			<li>white</li>
		</ul>
		</li>
		<li><b>slug</b>:  snickers</li>
	</ul>
	</li>
</ol>

</div>

If you'd like, [see how I divided them up into actual Markdown files](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src/markdown/pets).

## Keyword naming choices

If you're wondering my code uses a million different synonyms for the same concept like `cat`, `kitten`, `meower`, etc. -- see my article [How to break (and rebuild) the Jamstack](https://katiekodes.com/break-rebuild-jamstack/).  When I'm trying to demonstrate how a complex piece of technology like 11ty works, I try to reduce the number of _coincidental_ repetitions of a word.  That way, if I reuse a word, you can see that it's because I had to refer to it by a name I previously gave it.  In production, you'd probably just say `cats` over and over _(indeed, I didn't bother to get as creative with synonyms for `pets` in places where I could've changed my naming standard)_, but I wanted to make sure I touched on the full power of "arbitrariliy renaming things" in Eleventy.

## File structure

11ty would be more than happy to turn [just about every file stored anywhere within `/src/` _(except `/src/_includes`)_ into a web page](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src).

I've organized "`.md` files that _**are**_ data" beneath [`/src/markdown/`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src/markdown) and "non-`.md` files that _**use**_ data" beneath [`/src/computed_pseudo_pages/`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src/computed_pseudo_pages).

## Markdown

[`/src/markdown/pets/`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src/markdown/pets) has a file [`pets.11tydata.js`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/pets.11tydata.js) _(called `pets` after the name of its folder to invoke Eleventy magic-filenaming tricks)_ whose sole job is to ensure that `cats` Markdown files end up having `kitties` in the URL instead of `cats`, and that the `dogs` folder ends up as `puppies` in its URL, by setting a `permalink` for all pages rendered from files stored anywhere within `/src/markdown/pets`.

[`/src/markdown/pets/cats/`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src/markdown/pets/cats) then has a file [`cats.11tydata.js`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/cats/cats.11tydata.json) that indicates every `.md` file in this folder should be treated as if it had 4 additional Front Matter fields:

1. An 11ty **layout** template of `layouts/default`
2. Two **tags** of `kittehs` & `pets` _(**pets** being the most important tag, as it's going to make it easy for us to find all cats & dogs later)_
3. A **type** of, just for fun, `PURR MACHINE`
4. A **urlpart** of `kitties` _(as expected by [`pets.11tydata.js`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/pets.11tydata.js))_

Then I did a similar exercise with [`/src/markdown/pets/dogs/dogs.11tydata.json`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/dogs/dogs.11tydata.json).

[`/src/markdown/pets/cats/`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src/markdown/pets/cats) has 2 `.md` files in it, each of which has a `name` front matter property and a `colors` front matter property:

1. [`hershey.md`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/cats/hershey.md)
2. [`oreo.md`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/cats/oreo.md)

[`/src/markdown/pets/dogs/`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src/markdown/pets/dogs) has 3 `.md` files in it, each of which also has a `name` front matter property and a `colors` front matter property:

1. [`fido.md`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/dogs/fido.md)
2. [`rover.md`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/dogs/rover.md)
3. [`snickers.md`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/markdown/pets/dogs/snickers.md)

Obviously, at this point, there isn't a lot of reason to store `cats` & `dogs` separately, but at some point, they might branch apart -- for example, `dogs` might need a `tricks` property.

## Pseudo-pages

Over in [`/src/computed_pseudo_pages/`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/tree/main/src/computed_pseudo_pages), there are 3 files:

1. [`singleton_home.liquid`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/computed_pseudo_pages/singleton_home.liquid), which creates our [site's home page](https://11ty-markdown-kittens-puppies.netlify.app/) and demonstrates how to use an Eleventy [include](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/_includes/components/simple_pets_list.liquid), which in turn demonstrates the 11ty magic of simply being able to loop over `collections.pets`, thanks to us having tagged all the dogs & cats with `pets`.
2. [`loop_pet_gallery_paginated.liquid`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/computed_pseudo_pages/loop_pet_gallery_paginated.liquid), which demonstrates making an archival "gallery" of all pets, displayed up to 3 at a time, using 11ty's **pagination** feature.
3. [`loop_pets_by_color.11ty.js`](https://github.com/kkgthb/web-site-11ty-05-markdown-pets/blob/main/src/computed_pseudo_pages/loop_pets_by_color.11ty.js), which demonstrates grouping the pets by color and generating a URL full of brown pets, a URL full of black pets, a URL full of white pets, etc.  I switched to JavaScript-based templating from Liquid-based templating because I needed to preprocess `collections.pets` into a different data structure before paginating it, and that was the best I could come up with.

## Codebase and site

Be sure to [check out the GitHub repository](https://github.com/kkgthb/web-site-11ty-05-markdown-pets) and its [accompanying live web site](https://11ty-markdown-kittens-puppies.netlify.app/).

I hope this has helped you see some of the crazy things you can do with Eleventy to store your data exactly how you want it while generating URLs exactly how you want them!