Creating Bootstrap WebC Components in Eleventy

/ / No Comments
For some time now as I’ve explored web components, it’s occurred to me that web components could be a great way to make working with Bootstrap simpler. Not that Bootstrap is necessarily difficult, but I’ve always thought it would be cool to take something like so: <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div> And... more →
Posted in: JavaScript Tagged with: , , , ,

Using Goodreads Data in Eleventy

/ / No Comments
I’ve been a Goodreads user for a few years now, and much like how I use other ‘tracking’ services, I’m not there for other folks’ reading lists or recommendations, but instead, as a way to track what I’ve read. I especially like looking back over the past year and being reminded of the books I really enjoyed. Recently, myself and others were talking on Mastodon about how to work with this kind of data, other services, and so forth. Goodreads does not have an API unfortunately (it used to, but it shut it down) but they do let you export your data. I decided to take a look at this and see if (and how) it could be used in Eleventy. Here’s what I found. Edit... more →
Posted in: JavaScript Tagged with: , , ,

Using Goodreads Data in Eleventy – Update

/ / No Comments
Yesterday I shared a blog post where I detailed how to take your data export from Goodreads and make use of it in an Eleventy site. While describing the process, I mentioned that I wasn’t terribly confident in the approach. Things got even worse when I tried to make use of the Google Books API as well. (That’s not the fault of the API, more just an issue with how Goodreads reported book titles.) Well, today, Brian Koser reached out and pointed out a much easier way to accomplish the same thing. To be honest, I love it when I say something and folks point out a way to make it better – it’s like free content for my blog! Anyway, here’s what Brian shared. Turns out,... more →
Posted in: JavaScript Tagged with: , , , ,

Working with CloudCannon and Eleventy – My Experience

/ / No Comments
I’ve been working with the Jamstack (in its various iterations and names) for many years now. In that time, one area I had not really looked into is the use of a content management system (CMS). I recently had a chance to look into how CloudCannon adds CMS capabilities to Eleventy and I thought I’d share my experience. I went in, admittedly, a bit concerned. One of Eleventy’s greatest strengths is its flexibility. Unlike other Jamstack solutions that have a proscribed way of doing things, Eleventy is incredibly open to how it can be used to build a site. My assumption was that it would be difficult for a CMS to "grok" a particular Eleventy implementation and support... more →
Posted in: JavaScript Tagged with: , , ,

Supporting PDF Embeds in an Eleventy WebC Component

/ / No Comments
Way back in the old days, in August of 2021, I wrote up an example of adding support for Adobe’s PDF Embed API as an Eleventy plugin: "An Adobe PDF Embed Plugin for Eleventy". When I find time, I need to update that to the newest URL for the library, but more recently I was curious if I could recreate support using the WebC template language. While it was a bit difficult at times (and a big thank you goes to Zach for patiently helping me), I think it’s at a point now where it can be shared. I will warn folks that I’m still struggling a bit with the best way to work with WebC, and at least one feature I’m showing isn’t documented yet (but I’ve confirmed... more →
Posted in: JavaScript Tagged with: , , , ,

Update to My Eleventy Blog Guide

/ / No Comments
Last January, I announced the release of a guide I had written for building a simple blog in Eleventy. Now that Eleventy has hit 2.0, I took some time this morning to look at the guide and see what could be updated. The first thing I noticed was that I had a heck of a lot of typos. I fixed those. I then went through the two main versions of the blog (before and after UI was added) and updated the dependencies to the 2.0 release of Eleventy. That being said, I didn’t do anything else. This is not to say that the 2.0 release wasn’t lacking in new features, but as my guide is meant to be as simple as possible, I wasn’t on the lookout to add any new features if it didn’t make... more →
Posted in: JavaScript Tagged with: , , ,

Adding Download Support in an Eleventy Site

/ / No Comments
I was thinking recently about how I would add "Downloads" support to an Eleventy site. By that I mean, a site where you have various resources (PDFs, zip, etc) and want to provide a way to let users download them in a consistent manner, as well as how basic tracking could be done as well. I came up with a few ideas I’d like to share, but as always, please let me know what you’ve done and what you would suggest. Method 1 – Meta Refresh For my first attempt, I imagined a site where I’ve got some files up in S3 (like I do for my images here) and I’d like to take a directory and set them up as resources. So for example, imagine a _data file named downloads.json: {... more →
Posted in: JavaScript Tagged with: , , , ,

A Bare-Bones Eleventy Template for Glitch

/ / No Comments
A few weeks ago I blogged about a simple Alpine.js template for Glitch projects. I’m still new to Glitch and wanted to give it a whirl with an Eleventy demo I wanted to share. Glitch has an Eleventy template, but it’s a bit verbose. It sets up a basic blog with sample posts and such, and that’s great to learn, but if you already know Eleventy, you may prefer to start off a bit simpler. With that in mind, I created this repository: https://github.com/cfjedimaster/glitch-eleventy It defines an .eleventy.js file that specifies an input and output directory. It sets up a very basic HTML layout and an empty index page that uses it. I also used Liquid for my demo whereas the Glitch-provided... more →
Posted in: JavaScript Tagged with: , , ,
1 2 3