Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

cistercian-numerals

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cistercian-numerals - npm Package Compare versions

Comparing version 1.0.0-beta.0 to 1.0.0

2

package.json
{
"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
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc