GithubHelp home page GithubHelp logo

wernerjoss / grav-plugin-downcounter Goto Github PK

View Code? Open in Web Editor NEW
1.0 0.0 1.0 58 KB

creates a nice circular down counter

License: MIT License

CSS 2.13% JavaScript 88.59% PHP 8.90% Twig 0.37%
circular countdown-timer grav jquery

grav-plugin-downcounter's Introduction

Down Counter Plugin

The Down Counter Plugin is an extension for Grav CMS. It creates a nice circular down counter on any Page by using a Shortcode.

Demo

https://hoernerfranzracing.de/werner/en/demo/downcounter

Installation

Installing the Down Counter plugin can be done in one of three ways: The GPM (Grav Package Manager) installation method lets you quickly install the plugin with a simple terminal command, the manual method lets you do so via a zip file, and the admin method lets you do so via the Admin Plugin.

GPM Installation (Preferred, but currently NOT available !)

To install the plugin via the GPM, through your system's terminal (also called the command line), navigate to the root of your Grav-installation, and enter:

bin/gpm install downcounter

This will install the Down Counter plugin into your /user/plugins-directory within Grav. Its files can be found under /your/site/grav/user/plugins/downcounter.

Manual Installation

To install the plugin manually, download the zip-version of this repository and unzip it under /your/site/grav/user/plugins. Then rename the folder to downcounter. You can find these files on GitHub or via GetGrav.org.

You should now have all the plugin files under

/your/site/grav/user/plugins/downcounter

NOTE: This plugin is a modular component for Grav which may require other plugins to operate, please see its blueprints.yaml-file on GitHub.

Admin Plugin

If you use the Admin Plugin, you can install the plugin directly by browsing the Plugins-menu and clicking on the Add button (currently NOT available, see GPM Installation above).

Configuration

Before configuring this plugin, you should copy the user/plugins/downcounter/downcounter.yaml to user/config/plugins/downcounter.yaml and only edit that copy.

Here is the default configuration and an explanation of available options:

enabled: true

Note that if you use the Admin Plugin, a file with your configuration named downcounter.yaml will be saved in the user/config/plugins/-folder once the configuration is saved in the Admin.

Usage

You can add a nice Down Counter to any Page in your Grav Site by just adding a shortcode somewhere in your Page's .md File, e.g. [downcounter due_date="2023-08-30 12:00:00"][/downcounter] where the due_date is the date/time until the Countdown proceeds (when due_date is reached, the Counter stops).
It will look like this: counter.png
Note that ATM, the Format of the due_date Parameter must be 'YYYY-MM-DD hh:mm:ss' - maybe there will be other formatting Options (depending on Language Setting) in the future.

Credits

This Plugin uses TimeCircles for Display/Animation of the Counter.

To Do

  • Localisation

grav-plugin-downcounter's People

Contributors

wernerjoss avatar

Stargazers

pmoreno.rodriguez avatar

grav-plugin-downcounter's Issues

In the same day not work

Hi @wernerjoss

I've been testing your new plugin, and I've found an weird issue. If I choose a future hour in the same day the plugin not work fine.
For example, if I set [downcounter due_date="2023-08-10 23:00:00"][/downcounter], it shows zeros in all clocks.

The caches have been cleaned before.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.