https://github.com/marcl/marclittlemore.com
My website
https://github.com/marcl/marclittlemore.com
Last synced: 5 months ago
JSON representation
My website
- Host: GitHub
- URL: https://github.com/marcl/marclittlemore.com
- Owner: MarcL
- Created: 2019-02-04T23:04:53.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-05T12:19:36.000Z (about 1 year ago)
- Last Synced: 2024-12-06T20:16:48.808Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://marclittlemore.com
- Size: 148 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Marc Littlemore blog
[](https://app.netlify.com/sites/marcl/deploys)
The source code for my personal blog - [marclittlemore.com](https://marclittlemore.com)
## Technologies used
The site is built using [11ty](https://www.11ty.dev/). 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](https://tailwindcss.com/). 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](https://netlify.com/). I moved over from running my own [VPS](https://en.wikipedia.org/wiki/Virtual_private_server) 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](https://parceljs.org/) to bundle the code into a single module.
## Shortcodes
I added custom shortcodes to the setup to add helpers for posts and pages. Here is a list of them and what they do.
### callout
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 block
* `warning` - A warning block
* `tip` - 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 %}
```
### codetitle
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" %}
```
### gravatar
Add a [Gravatar](https://gravatar.com) avatar image inside a post. Pass the following parameters:
* `email` - An email address
* `size` (default: 80) - The size of the Gravatar in pixels
* `defaultImage` (default: `mp`) - The [Gravatar default image](https://en.gravatar.com/site/implement/images/#default-image) if no valid Gravatar is found for the email address
```
{% gravatar "unknown@email.com" 150 "robohash" %}
```
### quote
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 %}
```
## Filters
Here are the filters added to the codebase.
### collectionLastUpdatedDate
Pass a collection to determine the last updated date in from all of the items in it. It returns a [RFC822 formatted date](https://github.com/tjconcept/js-rfc822-date).
```
{{ collections.post | collectionLastUpdatedDate }} // E.g. 'Mon, 13 Sep 2013 14:27:00 +0200'
```
### getPostByPath
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 %}
```
### keys
Finds all of the keys for a specified object.
```
{% assign socialMediaKeys = socialMedia | keys %}
```
### markdownify
Renders the passed Markdown as HTML.
```
{{article.data.description | markdownify}}
```
### starRating
Returns HTML using [Font Awesome stars](https://fontawesome.com/v5/icons/star?s=solid). Pass in the number of starts to render as the value.
```
{{book.rating | starRating}}
```
### rfc822Date
Returns a [RFC822 formatted date](https://github.com/tjconcept/js-rfc822-date).
```
{{ post.date | rfc822Date }} // E.g. 'Mon, 13 Sep 2013 14:27:00 +0200'
```
### toISOString
Renders a date as an [ISO 8601 date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
```
{{ post.date | toISOString }}
```
### xmlEscape
Renders characters as HTML entities - see [lodash.escape](https://lodash.com/docs/#escape). Used for RSS feeds.
```
```
### webmentionsForUrl
Returns an array of Webmentions for the specified absolute URL.
```
{% assign webMentionsForPage = webmentions | webmentionsForUrl: absoluteUrl %}
```
### webmentionsSortedForUrl
Returns a sorted object of Webmentions for the specified absolute URL. The keys are the different types of mentions.
```
{% assign webMentionsForPage = webmentions | webmentionsForUrl: absoluteUrl %}
```