Integrating 11ty With a CMS and Making It Cool to Use

Getting dynamic data down for 11ty 1.0.

Integrating 11ty With a CMS and Making It Cool to Use

Getting dynamic data down for 11ty 1.0.

11ty websites with…

What about data coming from elsewhere than our filesystem?

More precisely, from a CMS?

This talk:

How can we get data from a CMS?
What’s the 11ty 1.0 version of doing so?
How can we abstract that into a plugin?

I’m Lucie Haberer

a.k.a. lihbr

About Me

I’m from Paris

Computer Science Student
Developer Experience Engineer at Prismic
Not an ad
Vue & proud Nuxt ambassador

What’s a CMS and why one?

What’s a CMS

Content Management System
A tool dedicated to managing content

Anything is a CMS:

A notebook is a CMS
Excel is a CMS
GitHub’s a CMS
WordPress, Sanity, Prismic, Contentful, are all CMSs

What’s the difference between all of those?

The way users interact with them
How easy it is to get content from them to a website

As an…

agency

I want to…

tell my client to write their blog posts in a notebook, and then send pictures of it to a service

So that…

the content of their website gets updated

Sanity's dashboard

Prismic's dashboard

Why a CMS?

Not everyone is familiar with MarkDown, JSON, or even GitHub
"Traditional" CMSs are here to make managing content accessible to anyone
You can then use this content on your 11ty website

How to get data from a CMS inside 11ty?

Data

Data cascade

Data cascade in 11ty 0.x:

Computed Data
Front Matter Data in a Template
Front Matter Data in Layouts
Template Data Files
Directory Data Files
Global Data Files <- Savior

~~CMS Data~~

<live-coding />

So… that was 11ty 0.x?

What about 11ty 1.0?

How to get data from a CMS inside 11ty?

Data

Data cascade

Data cascade in 11ty 1.0:

Computed Data
Front Matter Data in a Template
Template Data Files
Directory Data Files
Front Matter Data in Layouts
Global Data Files <- Still here!
Custom Global Data <- New!

What are custom global data?

Custom global data:

Injects global data directly from 11ty configuration
No global data files involved
Easier to bundle logic into a plugin

<live-coding />

God, that was complicated!

…at least compared to global data files.

Our code is now ready to be shared as a plugin!

How to ship it to npm:

Update your package.json:

{
	"name": "eleventy-plugin-your-favorite-cms",
	"version": "1.0.0",
	"main": ".eleventy.js",
	"scripts": {
		/* ... */
	},
	"dependencies": {
		/* ... */
	},
	"devDependencies": {
		/* ... */
	}
}

Publish it:
```
npm publish
```

Boom!

We're done!

11ty Prismic plugin GitHub

You can make your plugin nicer with:

The debug package for logging things
Options to configure it
Shortcodes to help with templating
Type definitions with TSDoc

Integrating 11ty With a CMS Takeaways

Integrating 11ty With a CMS:

Global Data Files are great at doing so with 11ty 0.x and 1.0
Custom Global Data is a new way in 11ty 1.0 to do so
- A bit more complicated
- Eases the work of creating a plugin
Plugins can simply be an 11ty configuration file

Integrating 11ty With a CMS and Making It Cool to Use

Getting dynamic data down for 11ty 1.0.

All the Info

Everything from this talk & more:

-> lucie.red/11ties-21

My blog:

-> lucie.red

Twitter:

-> lucie.red/twitter

Thanks!

lucie.red/11ties-21 — lucie.red — lucie.red/twitter