Time Machine-like UI for your git pages.
JavaScript Vue HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs-assets
docs
pageData
src
.babelrc
.gitignore
.jpg
README.md
cli.js
config.js
index.html
package-lock.json
package.json
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!