https://github.com/jdsteinbach/eleventy-plugin-dropcap

Adds an Eleventy filter for adding accessible, stylable dropcap markup to the content of a page.
https://github.com/jdsteinbach/eleventy-plugin-dropcap

hacktoberfest

Last synced: 16 days ago
JSON representation

Adds an Eleventy filter for adding accessible, stylable dropcap markup to the content of a page.

• Host: GitHub
• URL: https://github.com/jdsteinbach/eleventy-plugin-dropcap
• Owner: jdsteinbach
• Created: 2019-10-25T19:47:02.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-07-30T20:31:06.000Z (3 months ago)
• Last Synced: 2024-10-04T04:21:37.768Z (about 1 month ago)
• Topics: hacktoberfest
• Language: JavaScript
• Homepage:
• Size: 43.9 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Eleventy Plugin: Drop Cap

## Purpose

Creates a `dropcap` filter for Eleventy templates.

**The filter works when the following is true:**

- First element in rendered markup is `
`

- First element begins with a word (not punctuation)

**The filter does two things:**

- Wraps the first letter of the first word in a `span` with class `first-letter` (or a class you specify)

- Wraps the entire first word (which has now been split and will be read poorly by screen readers) in a span with an `aria-label` that allows screen readers to read the first word "normally"

For more information on the pattern used here, watch Ethan Marcotte's short video, "[Creating Beautiful and Accessible Drop Caps](https://thegymnasium.com/take5/creating-beautiful-and-accessible-drop-caps)" or read the transcript included at that page.

## Installation

### Node Module

```sh

npm i --save eleventy-plugin-dropcap

```

### Eleventy Config

In `.eleventy.js`

```js

const pluginDropcap = require('eleventy-plugin-dropcap')

module.exports = eleventyConfig => {

  eleventyConfig.addPlugin(pluginDropcap)

  // Other code

}

```

## Options

You can change the classes used by passing in an options object with `dropCapClass` and `hiddenTextClass` values.

```js

eleventyConfig.addPlugin(pluginDropcap, {

  dropCapClass: 'first-letter',

  hiddenTextClass: 'sr-only'

})

```

Either class value can be a **string** or an **array of strings**.

The default values are:

| Key | Value |

|---|---|

| `dropCapClass` | `drop-cap` |

| `hiddenTextClass` | `screen-reader-only` |

### Template Usage

In Nunjucks:

```njk

{{ content | dropcap | safe }}

```

In Liquid:

```liquid

{{ content | dropcap }}

```

## Styles

You'll need to have your own CSS to style the dropcap as you like.

You'll need to have CSS to correctly style the visually hidden (screen-reader-only) text as well. I recommend this [CSS pattern for visually hidden text](https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html#hiding-content-visually):

```css

.screen-reader-only {

  clip: rect(0 0 0 0);

  clip-path: inset(50%);

  height: 1px;

  overflow: hidden;

  position: absolute;

  white-space: nowrap;

  width: 1px;

}

```