Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/marcreichel/alpine-timeago

Simple Alpine.js plugin to display the human-readable distance between a date and now.

https://github.com/marcreichel/alpine-timeago

Science Score: 13.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ○
    .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (10.5%) to scientific vocabulary

Keywords

alpine-js alpinejs date datetime difference hacktoberfest human-readable-timespans plugin
Last synced: 5 months ago · JSON representation

Repository

Simple Alpine.js plugin to display the human-readable distance between a date and now.

Basic Info
  • Host: GitHub
  • Owner: marcreichel
  • License: mit
  • Language: JavaScript
  • Default Branch: main
  • Homepage:
  • Size: 159 KB
Statistics
  • Stars: 80
  • Watchers: 1
  • Forks: 2
  • Open Issues: 1
  • Releases: 13
Topics
alpine-js alpinejs date datetime difference hacktoberfest human-readable-timespans plugin
Created almost 4 years ago · Last pushed over 1 year ago
Metadata Files
Readme License

README.md

⏱ Alpine TimeAgo ⏱

An Alpine.js plugin to return the distance between a given date and now in words (like "3 months ago", "about 2 hours ago" or "in about 5 hours").

version Build size downloads JSDelivr GitHub Gitmoji

🚀 Installation

CDN

Include the following <script> tag in the <head> of your document, just before Alpine.

html <script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-timeago@latest/dist/alpine-timeago.min.js" defer></script>

NPM

shell npm install @marcreichel/alpine-timeago

Add the x-timeago directive to your project by importing the package before starting Alpine.

```js import Alpine from 'alpinejs'; import TimeAgo from '@marcreichel/alpine-timeago';

Alpine.plugin(TimeAgo);

Alpine.start(); ```

🪄 Usage

Directive

To convert a Date to the human-readable distance from now, add the x-data and x-timeago directives to an element and pass the date (as a Date or a string in ISO format) to the x-timeago directive. The directive will update the output every 30 seconds.

html <span x-data="{ date: new Date() }" x-timeago="date"></span>

Under the hood the directive is using formatDistanceToNow from date-fns.

No suffix

If you do not want the "[diff] ago" suffix or "in [diff]" prefix, you can use the x-timeago.pure modifier.

html <span x-data="{ date: new Date() }" x-timeago.pure="date"></span>

Include seconds

Distances less than a minute are more detailed.

html <span x-data="{ date: new Date() }" x-timeago.seconds="date"></span>

Strict

If you do not want the "about [diff]" or "less than [diff]" prefixes, you can use the x-timeago.strict modifier.

html <span x-data="{ date: new Date() }" x-timeago.strict="date"></span>

Strict options

The strict mode comes with its own set of modifiers for controlling the output.

Force unit

Use the x-timeago.strict.unit.[unit] modifier with one of the following units to force the unit in the output.

  • second (e.g. x-timeago.strict.unit.second)
  • minute (e.g. x-timeago.strict.unit.minute)
  • hour (e.g. x-timeago.strict.unit.hour)
  • day (e.g. x-timeago.strict.unit.day)
  • month (e.g. x-timeago.strict.unit.month)
  • year (e.g. x-timeago.strict.unit.year)
Adjust rounding method

By default, the values are rounded using the Math.round algorithm. If you would like to adjust this, use the x-timeago.rounding.[method] modifier with one of the following methods:

  • floor (e.g. x-timeago.strict.rounding.floor)
  • ceil (e.g. x-timeago.strict.rounding.ceil)
  • floor (e.g. x-timeago.strict.rounding.round)

Magic function

As of version 1.3.0 of this package a $timeago magic function is included which will return the human-readable distance from now.

html <span x-data="{ date: new Date() }" x-text="$timeago(date)"></span>

Note: Using the magic function the distance does not get updated automatically. You have to update it yourself if you want to.

No suffix

If you do not want the "[diff] ago" suffix or "in [diff]" prefix, you can provide true as the second parameter to the function.

html <span x-data="{ date: new Date() }" x-text="$timeago(date, true)"></span>

Include seconds

If you want distances less than a minute to be more detailed, you can provide true as the third parameter to the function.

html <span x-data="{ date: new Date() }" x-text="$timeago(date, null, true)"></span>

Strict

If you do not want the "about [diff]" or "less than [diff]" prefixes, you can use the fourth parameter to provide the " strict" options.

Default

html <span x-data="{ date: new Date() }" x-text="$timeago(date, null, null, { strict: true })"></span>

Unit

html <span x-data="{ date: new Date() }" x-text="$timeago(date, null, null, { strict: true, unit: 'second' })"></span>

Rounding method

html <span x-data="{ date: new Date() }" x-text="$timeago(date, null, null, { strict: true, roundingMethod: 'floor' })"></span>

Other locales

If you are using the npm installation method for this package or the ESM distribution, you can use the TimeAgo.configure() method to provide a different locale from date-fns.

```javascript import TimeAgo from '@marcreichel/alpine-timeago'; import {de} from 'date-fns/locale';

Alpine.plugin(TimeAgo.configure({ locale: de, })); ```

📄 License

Copyright (c) 2022 Marc Reichel and contributors.

Licensed under the MIT license, see LICENSE for details.

Owner

  • Name: Marc Reichel
  • Login: marcreichel
  • Kind: user
  • Location: Haan, Germany
  • Company: @artemeon

Hi! 👋🏼 My name is Marc. I love to code and make the web look beautiful wherever I can.

GitHub Events

Total
  • Watch event: 8
Last Year
  • Watch event: 8

Committers

Last synced: almost 3 years ago

All Time
  • Total Commits: 31
  • Total Committers: 2
  • Avg Commits per committer: 15.5
  • Development Distribution Score (DDS): 0.097
Top Committers
Name Email Commits
Marc Reichel m****l@a****e 28
Marc Reichel m****l@m****e 3
Committer Domains (Top 20 + Academic)
marcreichel.de: 1 artemeon.de: 1

Issues and Pull Requests

Last synced: 6 months ago

All Time
  • Total issues: 5
  • Total pull requests: 6
  • Average time to close issues: 2 days
  • Average time to close pull requests: 1 minute
  • Total issue authors: 5
  • Total pull request authors: 1
  • Average comments per issue: 1.4
  • Average comments per pull request: 0.0
  • Merged pull requests: 6
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 0
  • Pull requests: 0
  • Average time to close issues: N/A
  • Average time to close pull requests: N/A
  • Issue authors: 0
  • Pull request authors: 0
  • Average comments per issue: 0
  • Average comments per pull request: 0
  • Merged pull requests: 0
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
  • marcreichel (1)
  • hankhank10 (1)
  • Sans84 (1)
  • hendrikschneider (1)
  • jaimeiniesta (1)
Pull Request Authors
  • marcreichel (6)
Top Labels
Issue Labels
enhancement (1)
Pull Request Labels
enhancement (1)

Dependencies

package.json npm
  • @babel/core ^7.17.8 development
  • @babel/preset-env ^7.16.11 development
  • rollup ^2.67.2 development
  • rollup-plugin-babel ^4.4.0 development
  • rollup-plugin-filesize ^9.1.2 development
  • rollup-plugin-node-resolve ^5.2.0 development
  • rollup-plugin-terser ^7.0.2 development
  • date-fns ^2.14.0
.github/workflows/publish.yml actions
  • actions/checkout v2 composite
  • actions/setup-node v1 composite
  • actions/setup-node v2 composite
  • stefanzweifel/git-auto-commit-action v4 composite
  • technote-space/package-version-check-action v1 composite