Time Machine-like UI for your git pages.
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
dist Update to user better git and screnshots Aug 14, 2017
docs-assets Add thumbnail Jul 20, 2017
docs Initial commit May 1, 2017
pageData Update to user better git and screnshots Aug 14, 2017
src Update to user better git and screnshots Aug 14, 2017
.babelrc
.gitignore Add dist code May 1, 2017
.jpg Update to user better git and screnshots Aug 14, 2017
README.md Update to user better git and screnshots Aug 14, 2017
cli.js Update to user better git and screnshots Aug 14, 2017
config.js Update to user better git and screnshots Aug 14, 2017
index.html Add Google Analytics May 1, 2017
package-lock.json
package.json Update to user better git and screnshots Aug 14, 2017
webpack.config.js

README.md

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!