An 11ty blog for my NFL Fantasy league
I love fantasy football. This is my third season playing NFL fantasy, having been watching the NFL regularly since 2015 (‘All Or Nothing: Arizona Cardinals’ is to blame).
Some might not want to admit this but fantasy football is LARPing. You are role-playing as a Head Coach/General Manager. It’s dress up. And the way I engage with that is to make websites and write articles 😎
Check out The Pigskin Chronicle:
What’s 11ty
11ty (“eleventy”) is a static site generator. It reads in markdown and/or one or more HTML templates, and outputs a compiled HTML site.
You can use a templating language like Nunjucks or Liquid within your markdown or HTML to create dynamic data-driven features, like I’ve done for the team profiles.(Actually, it supports loads of templating languages including Pug, Handlebars, and even plain JavaScript functions!)
11ty is JavaScript based, and in its config file, you can add functions to extend it with whatever extra features and rendering magic you want. Plus, there are loads of add-ons.
I like simplicity, so The Pigskin Chronicle has only one template, and cuts corners wherever possible 😊
On Glitch
I hosted the site on Glitch because:
- It makes it open source
- It makes it openly editable
- Anyone can view the code, and if someone from our league turns out to be a designer or a writer, I can grant them edit access
- You don’t need to set up any development tools on your machine; you can jump in and start editing
- I can edit the site on my phone, which is handy for the occasional quick data update.
🎏 View the source of TPC on Glitch
Team Profiles Data
This year we’re a new league, and not everybody knows each other. As a huge ENFP, I wanted to help everyone get to know each other.
I sent out a Google Form to all of the contestants, and connected it to a Google Sheet. A sheet connected to a form gets this special purple forms icon:
And the received data looks like this:
The data needed tidying up, so I made a second sheet, Managers, with nicer column headings and flash-filled it with the content from the Input sheet, then manually overwrote some cells to change, for example, “4” to “4th season”.
Now I needed this as JSON. After looking briefly in the extensions store, I decided to roll my own poor man’s JSON serializer using a formula.
The JSON template lives on the third sheet, JSON, and just has this content in cell A1:
{"TeamName":"{TEAMNAME}", "RealName":"{REALNAME}", "Connection": "{CONNECTION}", "Supports":"{SUPPORTS}", "FanFor":"{FANFOR}", "FanSeason":"{FANSEASON}", "Fact":"{FACT}", "Other":"{OTHER}"},
…then I added a “JSON” column on the Managers sheet with this formula:
=SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(JSON!$A$1, "{REALNAME}", A2), "{TEAMNAME}", B2), "{CONNECTION}", C2), "{SUPPORTS}", D2), "{FANFOR}", E2), "{FANSEASON}", F2), "{FACT}", G2), "{OTHER}", H2)
A little long-winded but not that hard really. It replaces each brace-enclosed term from the static JSON template with the value of the corresponding cell.
Now I can copy the JSON column and paste it into a file in the site. 11ty lets us put data almost anywhere, but by default, anything in a JS file in the /_data directory is global, so I just created an array in there and dumped my content.
11ty hot tips
Mark all your posts as post by default
A lot of the blog tutorials tell you to put frontmatter on each post to tell it that it’s a post. Case in point: the official blog example. Seems like a waste of time to me…?
Perhaps one of the more complex aspects of 11ty is the “data cascade”, which is a system where one piece of data can take precedence over another. For example, a tag on a specific post beats the tag set by default in the directory, beats a tag set globally in /_data (if there was one).
Using directory data files, like /posts/posts.json you can set defaults for everything in the folder. I did this to tag everything in /posts with the post tag, and with the default layout (come to think of it, I should move the default template to global level…)
Do an excerpt
Excerpts are kind of tricky in Nunjucks but dead simple in Liquid. It turned out my Markdown templates are using Liquid by default. An item’s content is stored in templateContent, so rendering an excerpt with Liquid goes like this:
{{ post.templateContent | strip_html | truncate:100 }}
Write simply
I’ll admit that the pages which render lists and loops get a little complex as they mix Markdown, Liquid, and HTML (for styling) - though I could (and should) have extracted my “card” component into its own reusable macro; something which 11ty totally supports.
On the flip side, writing blog posts is extravagantly simple. If you’ve worked with Markdown you’ll know that most of the time, it’s just a plain text file:
---
title: Draft Report 2022
date: 2022-09-01
---
The draft room was thick with the aroma of pizza and the tension of coiled banter, ready to be sprung upon unsuspecting peers.
As such, the barrier for entry for someone to add an article later is pretty low 👍
Styling
Briefly:- I used Tachyons for styling, as is my habit, with some nice defaults like wrapping everything in measure-wide. HTML is responsive by default and I just add some common sense styles to not break that. Being a single-column layout makes it pretty easy. Do a traditional View Source (Ctrl+U) on https://pigskin.glitch.me/ to see what I mean.
I acquired the AllPro font a few years ago to make my first Angular test project, an NFL schedule generator of sorts and rolled it out again here for headlines to make it look football-y.
Finishing up
This has been my hobby project for the last couple of weeks. ‘Perfect’ is the enemy of ‘done’, so for now it is pretty spartan. This is a blog I look forward to expanding, certainly over this coming football season, and perhaps into future years?? (Already dreaming up the JSON scheme for marking teams ‘defunct’, adding colour-coding, shortcodes, hmmm…)
Peace 🏈