Discussion
Loading...
I would add a property in the front matter to tag the article as 18+. And in the article template (I don't know if you're using nunchucks or anything else), i would conditionally display a warning based on that property.
Maybe a dialog HTML tag that needs to be closed to continue. I am not sure you can close / open a dialog without any JS though, but it should still be very simple.
Another JS-less approach would be using the tag "18+" as a filter : in your home page, the 18+ articles would be hidden by default unless the user checks a "display 18+ articles" checkbox or something. And when accessing said article, you can have a banner on top of the article warning the user.
I hope these ideas will help you!
@WeirdWriter @11ty In any case, adding a tag in the frontmatter would the most "11ty" first step approach
@WeirdWriter is a javascript solution acceptable? could make a frontmatter flag that checks for a cookie that the person browsing has agreed that they are over 18.
if no cookie, forward to a webpage that asks, sets cookie if yes, then returns you to the age gated page, no more warning (could also use session storage and the flag would be until they close the tab/window)
@zicklepop Yeah! That's a good idea. I won't publish it anytime soon, just wanted to get some ideas beforehand, but will email you when I am ready! Also, what about https://cathode.church/@RoseThorndyke/115875704444800335
@WeirdWriter yeah that’s what i was trying to describe but without prompting people who have already said they are here for it 😊 — might play around with getting something started for this
@WeirdWriter It sounds like you might be looking for something like a “modal” or “dialog” element, that pops up with a warning than needs to be dismissed? Even though they call it “static,” 11ty (and most other static site generators) can still use JavaScript, so any JavaScript modal pop-up approach should work, and there are also JS-free ways to set them up as well. Hopefully one of these links is helpful and accessible?
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog
https://stackoverflow.com/questions/54872125/make-modal-without-javascript
@mostol Got any resources for non-JS solutions? But yes they were super helpful! I was under the impression Modals wouldn't work on Hugo, static sites in general, so this was / is super helpful!
@WeirdWriter I don’t know what the *best* approach is, but this one uses some styled checkboxes and seems promising—for your use case, you’d just want to style it with the box open instead of closed at first:
https://gist.github.com/m3h3d1ha2an/de97ce1acf3c04483d4c31f40f9686ac
You can find tons of other examples by searching something like “html modal no js”, but you might need to rope in someone with more expertise than me to know which ones are any good 😅
@WeirdWriter I'm a bit lost, why is this an 11ty specific question?
@inherentlee Because I use Eleventy, so a solution for Hugo might not work for me. My website is a static site, so I can't have any dynamic popups, etc.
@WeirdWriter ahhh, so it's a question of implementation, I was reading it more as a question if "is this an acceptable warning"
@inherentlee I edited it to hopefully make it clearer!