checklist-tools-website

🍿 Checklist Tools Website

A user-friendly and fluid interface for using checklists.

All the power of checklists, without the overhead:

User-friendly and fluid interface
Fast build with Preact and Milligram
Generate PDF report
Offline checklists storage with LocalStorage
Auto-save your progress 🚀
💥 Instant no-config app bundling

Based on checklists:

Use the online version: alexisdanizan.github.io

Installation

Install with npm

npm i checklist-tools-website

Install with Yarn

yarn add checklist-tools-website

Install manually

git clone https://github.com/AlexisDanizan/Checklist-Tools-Website.git
yarn install
# or 
npm install

How to use ?

Build with Gulp

gulp build

Built files are available in dist folder.

Customize

Build and serve files with Gulp

gulp build
gulp webserver

The version is available at http://localhost:8080

Add a new Checklist

Use the auto-converter

To convert a checklist to markdown format you can use the bin/mdChecklistToJson.js script. To do this, add your checklist in sample.md and run the command npm mdtojson.
The result of the conversion is in bin/sample.json. Modify your checklist until you get the result.

Add manually

Create a new json files in src/checklist. Sample template:

{
  "name": "Front-dev",
  "group_categories": [
    {
      "title_group": "Head",
      "categories": [
        {
          "title": "Meta tags",
          "tasks": [
            {
              "title": "Doctype",
              "links": [
                {"path":"https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding",
                  "text":"Determining the character encoding - HTML5 W3C",
                  "type": "link"}
              ],
              "explications":"The Doctype is HTML5 and is at the top of all your HTML pages.",
              "code":"<!doctype html> <!-- HTML5 -->",
              "priority": "high"
            }
          ]
        }
      ]
    }
  ]
}

To make the checklist available in app you need to modify src/stores/checklistStore.js and add import example from '../checklist/example.json';.

Next add it in INITIAL_DATA:

const INITIAL_DATA = {
  checklists: [
    example
  ],
  ...
};

Troubleshooting

The new checklist does not appear in select:

Empty the localstorage before add a new checklist.

Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The Checklist Tools Website repository consists of two branches:

1. `master`

This branch consists of the current stable branchof Checklist Tools Website.

2. `develop`

This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new checklist.

Support

If you have any question or suggestion, don't hesitate to use Twitter:

Twitter

Author

Alexis Danizan

Contributors

This project exists thanks to all the people who contribute.

License

Designed and created with ♥ by Danizan Alexis. Licensed under the Apache 2.0 License.

checklist-tools-website