Skip to content

Commit 1357b8e

Browse files
marcreichelmarcreichel
committed
✨ Finalize Alpine TimeAgo
1 parent 0849086 commit 1357b8e

File tree

13 files changed

+1887
-9
lines changed

13 files changed

+1887
-9
lines changed

‎.github/FUNDING.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
github: [marcreichel]

‎.github/workflows/publish.yml

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
name: Publish
2+
3+
on:
4+
release:
5+
types: [published]
6+
7+
jobs:
8+
update-dist:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v2
12+
- uses: actions/setup-node@v1
13+
with:
14+
node-version: ^16.0.0
15+
- run: npm ci
16+
- run: npm run build
17+
- uses: stefanzweifel/git-auto-commit-action@v4
18+
with:
19+
commit_message: 📦 Update compiled files
20+
file_pattern: dist/**/*
21+
publish-npm:
22+
runs-on: ubuntu-latest
23+
steps:
24+
- uses: actions/checkout@v2
25+
- uses: actions/setup-node@v1
26+
with:
27+
node-version: ^16.0.0
28+
registry-url: https://registry.npmjs.org/
29+
- name: Check package version
30+
uses: technote-space/package-version-check-action@v1
31+
with:
32+
COMMIT_DISABLED: 1
33+
- run: npm ci
34+
- run: npm run build
35+
- run: npm publish --access public
36+
env:
37+
NODE_AUTH_TOKEN: ${{ secrets.npm_token }}
38+
publish-github:
39+
runs-on: ubuntu-latest
40+
steps:
41+
- uses: actions/checkout@v2
42+
- uses: actions/setup-node@v1
43+
with:
44+
node-version: ^16.0.0
45+
- name: Check package version
46+
uses: technote-space/package-version-check-action@v1
47+
with:
48+
COMMIT_DISABLED: 1
49+
- run: npm ci
50+
- run: npm run build
51+
- uses: actions/setup-node@v2
52+
with:
53+
node-version: ^16.0.0
54+
registry-url: https://npm.pkg.github.com/
55+
- run: npm publish
56+
env:
57+
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
/node_modules
22
/.idea
3-
marcreichel-alpine-timeago-*.tgz
3+
*.tgz
44
package-lock.json

‎.npmignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
builds
3+
.github
4+
.idea
5+
rollup.config.js
6+
*.tgz

‎README.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<h1 align="center">⏱ Alpine TimeAgo ⏱</h1>
2+
3+
<p align="center">
4+
An <a href="https://alpinejs.dev">Alpine.js</a> plugin to return the distance between a given date and now in words.
5+
</p>
6+
7+
<p align="center">
8+
<a href="https://www.npmjs.com/package/@marcreichel/alpine-timeago">
9+
<img src="https://img.shields.io/github/v/tag/marcreichel/alpine-timeago?label=version" alt="version">
10+
</a>
11+
<a href="https://www.npmjs.com/package/@marcreichel/alpine-autosize">
12+
<img src="https://img.badgesize.io/marcreichel/alpine-timeago/main/dist/alpine-timeago.js.svg?compression=gzip&color=green" alt="Build size">
13+
</a>
14+
<a href="https://www.jsdelivr.com/package/npm/@marcreichel/alpine-timeago">
15+
<img src="https://data.jsdelivr.com/v1/package/npm/@marcreichel/alpine-timeago/badge?style=rounded" alt="JSDelivr">
16+
</a>
17+
<a href="https://www.npmjs.com/package/@marcreichel/alpine-timeago">
18+
<img alt="GitHub" src="https://img.shields.io/github/license/marcreichel/alpine-timeago">
19+
</a>
20+
<a href="https://gitmoji.dev/">
21+
<img src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg" alt="Gitmoji">
22+
</a>
23+
</p>
24+
25+
## 🚀 Installation
26+
27+
### CDN
28+
29+
Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
30+
31+
```html
32+
<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-timeago@latest/dist/alpine-timeago.min.js" defer></script>
33+
```
34+
35+
### NPM
36+
37+
```shell
38+
npm install @marcreichel/alpine-timeago
39+
```
40+
41+
Add the `x-timeago` directive to your project by importing the package **before** Alpine.js.
42+
43+
```js
44+
import Alpine from 'alpinejs';
45+
import TimeAgo from '@marcreichel/alpine-timeago';
46+
47+
Alpine.plugin(TimeAgo);
48+
49+
window.Alpine = Alpine;
50+
window.Alpine.start();
51+
```
52+
53+
## 🪄 Usage
54+
55+
To convert a Date to the human-readable distance from now, add the `x-data` and `x-timeago` directives to an element and
56+
pass the date (as a `Date` or a string in ISO format) to the `x-timeago` directive. The directive will update the output
57+
every 30 seconds.
58+
59+
```html
60+
<span x-data="{ date: new Date() }" x-timeago="date"></span>
61+
```
62+
63+
Under the hood the directive is using [`formatDistanceToNow`](https://date-fns.org/v2.28.0/docs/formatDistanceToNow)
64+
from `date-fns`.
65+
66+
### Hooks
67+
68+
If you are using the `npm` installation method for this package or the ESM distribution, you can use the
69+
`TimeAgo.configure()` method to provide a different locale from `date-fns`.
70+
71+
```javascript
72+
import TimeAgo from '@marcreichel/alpine-timeago';
73+
import { de } from 'date-fns/locale';
74+
75+
Alpine.plugin(TimeAgo.configure({
76+
locale: de,
77+
}));
78+
```
79+
80+
## 📄 License
81+
82+
Copyright (c) 2022 Marc Reichel and contributors.
83+
84+
Licensed under the MIT license, see [LICENSE](LICENSE) for details.

‎builds/cdn.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import TimeAgo from '../src/index.js';
2+
3+
document.addEventListener('alpine:init', () => {
4+
TimeAgo(window.Alpine);
5+
});

0 commit comments

Comments
 (0)