Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jonnitto/alpine-typogrify

Typography utils for AlpineJS
https://github.com/jonnitto/alpine-typogrify

alpine-package alpinejs typography

Last synced: 7 days ago
JSON representation

Typography utils for AlpineJS

Awesome Lists containing this project

README

        

[![npm version]][npm] [![GitHub stars]][stargazers] [![GitHub watchers]][subscription] [![GitHub license]][license] [![GitHub issues]][issues] [![GitHub forks]][network] [![Sponsor @Jonnitto on GitHub]][sponsor]

# alpine-typogrify

**alpine-typogrify** provides a set of functions for [Alpine.js] which automatically apply various transformations to plain text to yield
typographically-improved HTML.

This package is inspired by [typogr.js].

## Installation

Run `npm install alpine-typogrify` or `yarn add alpine-typogrify` in your console.

## 101

```html


"Lorem ipsum" & dolor SIT amet



his viris "similique" appellantur cu, P.R.I. at erat mandamus adversarium.
1st, 2nd, 3rd, 4th, "Alii eripuit utroque sit in, quem 'disputando' vel ex."
Mea erant 'indoctum' ex IDS312, ad errem explicari...



```

results to

```html




Lorem ipsum” & dolor
SIT amet



his viris “similique” appellantur cu,
P.R.I. at erat mandamus adversarium.
1st, 2nd,
3rd, 4th,
“Alii eripuit utroque sit in, quem ‘disputando’ vel ex.” Mea erant ‘indoctum’ ex
IDS312, ad errem explicari…



```

[Take a look at the example file]

# Directives

Every directive is split into two parts: The directive for [Alpine.js] and the function that manipulate the input. If a wrapping `` is added to some text, a class with the schema `typogrify typogrify--FUNCTION_NAME` will be added. You can change this class if you pass a value to the directive, e.g. `

`, or if you build your javascript on your own, you can also import the function and overwrite the default class name:

```js
import Alpine from 'alpinejs';
import directive, { amp } from 'alpine-typografiy/dist/amp/module.mjs';

amp.className = 'text-red-500';
Alpine.plugin(directive);
Alpine.start();
```

or you can add multiple directives at once:

```js
import Alpine from 'alpinejs';
import {
amp,
caps,
ord,
quotes,
smartypants,
typogrify,
widont,
functions,
} from 'alpine-typogrify';

functions.amp.className = 'text-red-500';

Alpine.plugin(amp);
Alpine.plugin(caps);
Alpine.plugin(ord);
Alpine.plugin(quotes);
Alpine.plugin(smartypants);
Alpine.plugin(typogrify);
Alpine.plugin(widont);

Alpine.start();
```

## x-amp

Wraps ampersands in HTML with `` so they can be styled with CSS. Ampersands are also normalized to `&`. Requires ampersands to have whitespace or an ` ` on both sides. Will not change any ampersand which has already been wrapped in this fashion.

## x-caps

Wraps multiple capital letters in `` so they can be styled.

## x-ord

Wraps number suffix's in `` so they can be styled.

## x-quotes

Wraps initial quotes in `` for double quotes or `` for single quotes. Works inside these block elements:

- `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
- `p`
- `li`
- `dt`
- `dd`

It also accounts for potential opening inline elements: `a`, `em`,
`strong`, `span`, `b`, `i`.

## x-smartypants

- Straight quotes ( " and ' '") into “curly” quote HTML entities (‘ | ’ | “ | ”)
- Backticks-style quotes (``like this''') into “curly” quote HTML entities (‘ | ’ | “ | ”)
- Dashes (“--” and “---”) into n-dash and m-dash entities (– | —)
- Three consecutive dots (“...”) into an ellipsis entity (…)

## x-widont

Based on Shaun Inman's PHP utility of the same name, it replaces the
space between the last two words in a string with ` ` to avoid
a final line of text with only one word.

Works inside these block elements:

- `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
- `p`
- `li`
- `dt`
- `dd`

It also accounts for potential closing inline elements: `a`, `em`,
`strong`, `span`, `b`, `i`.

## x-typogrify

Applies all of the following filters, in order:

- amp
- widont
- smartypants
- caps
- quotes
- ord

[npm version]: https://img.shields.io/npm/v/alpine-typogrify
[npm]: https://www.npmjs.com/package/alpine-typogrify
[github issues]: https://img.shields.io/github/issues/Jonnitto/alpine-typogrify
[issues]: https://github.com/Jonnitto/alpine-typogrify/issues
[github forks]: https://img.shields.io/github/forks/Jonnitto/alpine-typogrify
[network]: https://github.com/Jonnitto/alpine-typogrify/network
[github stars]: https://img.shields.io/github/stars/Jonnitto/alpine-typogrify
[stargazers]: https://github.com/Jonnitto/alpine-typogrify/stargazers
[github license]: https://img.shields.io/github/license/Jonnitto/alpine-typogrify
[license]: LICENSE
[sponsor @jonnitto on github]: https://img.shields.io/badge/sponsor-Support%20this%20package-informational
[sponsor]: https://github.com/sponsors/jonnitto
[github watchers]: https://img.shields.io/github/watchers/Jonnitto/alpine-typogrify.svg
[subscription]: https://github.com/Jonnitto/alpine-typogrify/subscription
[alpine.js]: https://alpinejs.dev
[typogr.js]: https://github.com/ekalinin/typogr.js/
[take a look at the example file]: example.html