Skip to content

AlexisDanizan/Checklist-Tools-Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A user-friendly and fluid interface for using checklists.

Checklist tools website

GitHub license Front‑End_Checklist followed GitHub issues GitHub stars Twitter

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:

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.