cistercian-numerals
Advanced tools
Comparing version 1.0.0-beta.0 to 1.0.0
{ | ||
"name": "cistercian-numerals", | ||
"version": "1.0.0-beta.0", | ||
"version": "1.0.0", | ||
"description": "A collection of web components to display cistercian numerals", | ||
@@ -5,0 +5,0 @@ "main": "dist/cistercian-numerals.js", |
# Cicstercian numerals components | ||
A collection of web components to display cistercian numerals. | ||
A collection of web components to display [cistercian numerals](https://en.wikipedia.org/wiki/Cistercian_numerals). | ||
## `<cistercian-number>` | ||
## Usage (or install) | ||
You can directly load these components in your web page using a smart CDN like [jspm](https://jspm.org/), [unpkg](https://unpkg.com/) or [Skypack](https://www.skypack.dev/). | ||
⚠️ WARNING: Remember that you need to trust this project *AND* those smart CDNs before loading some third party code like that. | ||
### Load from jspm | ||
To load the components from jspm, add this to your `<head>`: | ||
```html | ||
<script type="module" src="https://unpkg.com/cistercian-numerals"></script> | ||
``` | ||
### Load from unpkg | ||
To load the components from unpkg, add this to your `<head>`: | ||
```html | ||
<script type="module" src="https://cdn.skypack.dev/cistercian-numerals"></script> | ||
``` | ||
### Load from skypack | ||
To load the components from skypack, add this to your `<head>`: | ||
```html | ||
<script type="module" src="https://jspm.dev/cistercian-numerals"></script> | ||
``` | ||
### Install from npm | ||
You can also install the components in your project with npm: | ||
```bash | ||
npm install cistercian-numerals | ||
``` | ||
Then, you will need to import the file in your source: | ||
```js | ||
import 'cistercian-numerals' | ||
``` | ||
You will need some kind of bundler or equivalent tool to resolve the bare identifier `cistercian-numerals` to a local file. | ||
## Components | ||
### `<cistercian-number>` | ||
This component displays one number with cistercian numerals. | ||
Use the `value` attribute to specify the number you want to display: | ||
```html | ||
<cistercian-number value="1972"> | ||
<cistercian-number value="1972"></cistercian-number> | ||
``` | ||
@@ -17,3 +67,3 @@ | ||
```html | ||
Some text <cistercian-number value="1972" inline> around the number. | ||
Some text <cistercian-number value="1972" inline></cistercian-number> around the number. | ||
``` | ||
@@ -53,4 +103,6 @@ | ||
## `<cistercian-clock>` | ||
### `<cistercian-clock>` | ||
This component displays a live clock using cistercian numerals. | ||
If you just want to display the current time (hours, minutes, seconds): | ||
@@ -73,1 +125,19 @@ | ||
``` | ||
## About this project | ||
Back in January 2021, I saw a tweet talking about [cistercian numerals](https://en.wikipedia.org/wiki/Cistercian_numerals). | ||
I was very intrigued. | ||
A week later, I saw someone who made a React component for it: https://twitter.com/aqandrew/status/1349762018639638528 | ||
I thought it would be a fun side projet to create a web component for this and then reuse the single number component to create a clock. | ||
I took this opportunity to try Twitch and wrote the code for the first version live with some help from the chat. | ||
At the end of the stream, the component was mostly working but no animation and the design was a bit clunky. | ||
I improved it over the next few weeks. | ||
Since then, I saw a few fun projects with cistercian numerals: | ||
* Clairvo, a proof-of-concept font that uses OpenType Layout to implement cistercian numerals: https://github.com/TiroTypeworks/Clairvo | ||
* Cistercian SVG by Adrian Roselli: https://adrianroselli.com/2021/02/cistercian-svg.html | ||
* React based experiment by Maciej Ziarkowski: https://mz8i.com/cistercian |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
67440
1
141