git-timelapse

    2.1.0 • Public • Published

    git-timelapse npm

    What's git-timelapse?

    git-timelapse is an npm package that constructs timelapses of how pages in your project have evolved over time.

    The following gif illustrates a very simple example and is looping although this is not the default for the package.

    Currently git-timelapse only works for basic web pages or simple react apps. I intend to expand it further to offer some sort of support for more complex applications but there's some issues I'd need to address such as changes to the projects back-end or database schema.

    Usage

    # install git-timelapse 
    npm i git-timelapse
     
    # run it 
    npx git-timelapse -g ./full/path/to/git/repo -p ./full/path/to/page

    Options

    • -g /path/to/git/repo - Full Path to folder for the git repo.
    • -p /path/to/page - Full Path To The Page Or URL i.e https://localhost:3000

    Further Configuration

    You can achieve further configuration by creating a timelapseConfig.js file with the following structure

    module.exports = {
      #The delay between the slides in the generated gif in ms 
      delay: 500,
     
      #Only include every 3rd commit in the timelapse 
      skip: 3,
     
      #Do not include screenshots that are both sucessive and similiar in the final timelapse 
      ditchSimiliar: true,
     
      #The name of the output file (It will still end with .git) 
      outputFilename: "test",
     
      #The full hash of the earliest commit you want to include 
      start: "0a79a4440e29aaa84e5cf7075a6eb1025b615261",
     
      #The full hash of the latest commit you want to include 
      end: "fde000b6da818b47a6d2a8ccff0478a52a6492ab",
     
      #The width of the viewport when the screenshot is taken and width of the gif 
      width: 1280,
     
      #The height of the viewport when the screenshot is taken and height of the gif 
      height: 800
     
    };
     

    Projects with a build process

    This is an example of how you would use this package with something like create-react-app

    # install git-timelapse 
    npm i git-timelapse
     
    # use npm start or whatever command you use to have your application listen to changes in your code 
    npm start
     
    # In a sepearte terminal run git-timelapse (url example for create-react-app: http://localhost:3000) 
    npx git-timelapse -g ./full/path/to/git/repo -p url/to/page

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      Install

      npm i git-timelapse

      DownloadsWeekly Downloads

      1

      Version

      2.1.0

      License

      ISC

      Unpacked Size

      794 kB

      Total Files

      6

      Last publish

      Collaborators

      • fraserhamilton