Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/jonnitto/alpine-typogrify
- Owner: jonnitto
- License: mit
- Created: 2021-06-28T21:13:27.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-18T13:23:42.000Z (over 2 years ago)
- Last Synced: 2024-10-12T21:21:34.294Z (about 1 month ago)
- Topics: alpine-package, alpinejs, typography
- Language: JavaScript
- Homepage:
- Size: 61.5 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
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