Skip to content

javierbyte/gitpage-timemachine

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Git Page Time-Machine.

See the evolution of your website in screenshots.

Live demo

img2css

How to use.

Since I'm using https://github.com/javierbyte/node-git-history this only works on Mac and Linux.

Clone the repo, and cd into it.

  1. Config your data. Edit the config.js file.
module.exports = {
	repo: 'https://github.com/javierbyte/javierbyte.github.io',
	maxImages: 24,
	ignoreCommits: ['6da97a5eacd294c573ff830f79c5a3ecaec9c466', 'e9ccbd00a04007b313172b542d0e8e8c13cd3f8a']
};

It currently supports 3 properties:

  • repo that is your repo url,
  • maxImages that is the maximun number of screenshots that we are trying to get,
  • ignoreCommits the entire hash of commits that you want to ignore.
  1. Run and get your data. (This takes around 3 minutes for a 24 screenshot history!). Run your chrome-headless-screenshots server
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-gpu --window-size=1280x900 --force-device-scale-factor=1 --headless --remote-debugging-port=9222 --hide-scrollbars
node cli.js
  1. Run the frontend and see your history!
npm run dev
  1. Profit!

About

Visualize the evolution of your website in a 3D time-machine fashion.

Topics

Resources

Stars

Watchers

Forks