11ty-age-gate

A very basic age gate for your 11ty blog.

Demo

How It Works

Simply add ageGate: true to your page's frontmatter.

Like so:

---
ageGate: true
---

Now when people load the page they will be warned of adult content. If they say 'Yes' we set a flag so they aren't asked again for a while. If they say no they are bounced to the front page or a url of your choice.

Of Note

• This age gate cannot work without JavaScript
  • I mean, it could I just think it would be less accessible and more hacky. I'd love to see your preferred implementation.
• Screen reader and read later support is important
  • JavaScript helps prevents the page from being read by screen readers, but it does not hender read later apps.
• You can change any part of this to work for your needs.
  • My goal was to make this as basic as possible. I don't think age gating content needs to be privacy invasive.

Setting This Up In Your Project

There's more than one way to make an 11ty project, this one assumes you use Nunjucks.

• Place _includes/age-gate.njk in your includes folder
• In your page layout place {%- if ageGate %}{% include 'age-gate.njk' %}{% endif %} somewhere near the end.
• Put ageGatedContent: ${CSS-SELECTOR} where ${CSS-SELECTOR} is the selector of your page so we can set aria-hidden on it when the content is inaccessible. Mine is the html element <main> so I use ageGatedContent: main If you don't set this it will default to main.
• By default we use sessionStorage, it's like localStorage but it clears when the window or tab is closed. Makes it easy to test with. If you want it to be localStorage, add the frontmatter ageGateStorage: localStorage. This will remember that they said yes to seeing the content and not ask them again.
• By default when someone says No to the age gate, it goes to the root of your website. You may want to point it elsewhere. You can change this with the frontmatter ageGateSafeUrl: https://melaniekat.com
• On the pages you want to age gate just add the frontmatter ageGate: true

This repo provides an example implementation. You can change the CSS in the age-gate.njk file.