Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brob/eleventy-plugin-blog-tools
A collection of shortcodes, filters and tags that make blogging on 11ty more fun
https://github.com/brob/eleventy-plugin-blog-tools
11ty 11ty-plugin filters jamstack shortcodes
Last synced: 2 months ago
JSON representation
A collection of shortcodes, filters and tags that make blogging on 11ty more fun
- Host: GitHub
- URL: https://github.com/brob/eleventy-plugin-blog-tools
- Owner: brob
- Created: 2019-08-30T16:13:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-09T19:24:12.000Z (11 months ago)
- Last Synced: 2024-10-31T11:51:32.279Z (2 months ago)
- Topics: 11ty, 11ty-plugin, filters, jamstack, shortcodes
- Language: JavaScript
- Homepage:
- Size: 227 KB
- Stars: 52
- Watchers: 3
- Forks: 4
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-starred - brob/eleventy-plugin-blog-tools - A collection of shortcodes, filters and tags that make blogging on 11ty more fun (others)
README
# Blog Tools for 11ty
This plugin is a series of shortcodes and filters that aim to help you write and organize your blog
## Install instructions
Available on [npm](https://www.npmjs.com/package/eleventy-plugin-blog-tools).
```
npm install eleventy-plugin-blog-tools --save
```
Open up your Eleventy config file (probably `.eleventy.js`) and add the plugin:
```
const blogTools = require("eleventy-plugin-blog-tools");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(blogTools);
};
```
## Usage
There are multiple shortcodes and filters in this plugin. Each has its own usage.
### Excerpt
This custom tag creates an excerpt from a page with front matter and/or standard markdown.
Main Usage:
```html
{% excerpt post %}
```
Where `post` is an instance of a markdown file being pulled in via an 11ty template engine.
The Excerpt is built from one of three options:
1. Excerpt first looks for a singular `` tag in the markdown.
1. Then, Excerpt looks for a pair of HTML comments in your markdown specifying a start and end point for the excerpt. `` and `` (capitalization not important)
2. If no start and end specified, the Excerpt tag will then look for the `excerpt` property in your MD file's frontmatter.
3. If no `excerpt` is found in frontmatter, the tag will pull the first paragraph of the post.
### YouTube
The YouTube shortcode takes a YouTube video ID and creates the markup for a fluidly-responsive YouTube embed.
```
{% youtube "idstring" %}
```
### Vimeo
The Vimeo shortcode takes a Vimeo video ID and creates the markup for a fluidly-responsive Vimeo embed.
```
{% vimeo "idstring" %}
```
### CodePen
The CodePen shortcode takes multiple values to customize your embed.
```
{% codepen "URL", "codepen tabs string", "unitlessHeight", "theme ID" %}
{% codepen "https://codepen.io/url/path" %}
{% codepen "http://codepen.io/brob/pen/vGRBeQ/", "css,result", "900", "26704" %}
```
The various options have a required order (hopefully that will change in the future):
* `url`: The full URL to your pen
* `tabs`: String of the tabs of your codepen to display (default: `"html,result"`)
* `height`: A unitless value of the height in pixels (default: `"300"`)
* `theme`: If you have a saved theme in your Pens, you can use them with the id of the theme (default: `""`);
The first argument is the only required argument and it's the Pen's full URL. In Nunjucks, they need to be comma separated, in Liquid commas are optional.
## Related Filter
The related filter will pull items from a list based on parameters passed to the function.
### Usage
The basic usage is to filter a collection based on an array of items and a threshold.
Syntax: `{{ collections.posts | related(, , , )}}`
The threshold integer is meant to force a number of array items in common. Defaults to 1.
```
{% for post in collections.posts | related("sortField", sortField, 1) %}
{{ post.data.title }}
{% endfor %}
```