The source code for my personal blog - marclittlemore.com
The site is built using 11ty. I ❤️ this static site generator and have moved most of my sites to using it.
I originally styled the site using Tachyons but moved over to Tailwind CSS. It's made it simple for someone with less CSS experience to responsively style the whole site. I use it on most projects now.
The site is deployed using Netlify. I moved over from running my own VPS to using Netlify for most of my sites. This allows a simple Git-based workflow for previewing and deploying my site changes easily.
There is very little client-side JavaScript but what is there uses Parcel to bundle the code into a single module.
I added custom shortcodes to the setup to add helpers for posts and pages. Here is a list of them and what they do.
Create a callout in a post. Pass the type as the first parameter. By default this is an info block. The types of callout are:
info(default) - An information blockwarning- A warning blocktip- A tip block
The content of the callout can be markdown.
{% callout "info" %}
If you want to learn more about building great chatbots then I've got a mailing list which will provide you with great information each week about the lastest trends, tutorials and quick tips to build better chatbots? Sounds like something you're interested in? Great!
{% endcallout %}
Create a title for a codeblock. Pass a title as the first parameter and an optional heading. This defaults to Filename.
{% codetitle "posts/example-markdown.md" "SomeHeading" %}
Add a Gravatar avatar image inside a post. Pass the following parameters:
email- An email addresssize(default: 80) - The size of the Gravatar in pixelsdefaultImage(default:mp) - The Gravatar default image if no valid Gravatar is found for the email address
{% gravatar "unknown@email.com" 150 "robohash" %}
Add a resized image to a post within an <img> tag. Pass the following parameters:
src- The source of the image. This can be local, which is assumed to be in the/src/directory, or a URL to an image.alt- Alt text for the image. This is mandatory!className- This is an additional classes to add to the image. By default it adds a Tailwind CSS medium shadow.
{% image "/images/me/marc-littlemore.jpg" "Marc Littlemore" "w-full sm:w-1/2 my-4 sm:my-0 shadow-lg sm:shadow-none rounded-md sm:rounded-none" %}
Adds a blockquote surrounded by quotes. The text is parsed as markdown. Pass false as the first parameter to remove the quoatations.
{% quote false %}
## Example title
Some text goes here.
{% endquote %}
Here are the filters added to the codebase.
Pass a collection to determine the last updated date in from all of the items in it. It returns a RFC822 formatted date.
{{ collections.post | collectionLastUpdatedDate }} // E.g. 'Mon, 13 Sep 2013 14:27:00 +0200'
Finds a post in a collection by its path. It will throw an error if no post is found.
{% assign cardPost = collections.all | getPostByPath: path %}
Finds all of the keys for a specified object.
{% assign socialMediaKeys = socialMedia | keys %}
Renders the passed Markdown as HTML.
{{article.data.description | markdownify}}
Returns HTML using Font Awesome stars. Pass in the number of starts to render as the value.
{{book.rating | starRating}}
Returns a RFC822 formatted date.
<pubDate>{{ post.date | rfc822Date }}</pubDate> // E.g. 'Mon, 13 Sep 2013 14:27:00 +0200'
Renders a date as an ISO 8601 date.
<lastmod>{{ post.date | toISOString }}</lastmod>
Renders characters as HTML entities - see lodash.escape. Used for RSS feeds.
<description><![CDATA[{{ post.templateContent | xmlEscape }}]]></description>
Returns an array of Webmentions for the specified absolute URL.
{% assign webMentionsForPage = webmentions | webmentionsForUrl: absoluteUrl %}
Returns a sorted object of Webmentions for the specified absolute URL. The keys are the different types of mentions.
{% assign webMentionsForPage = webmentions | webmentionsForUrl: absoluteUrl %}