Git Browser

Git Browser is a different way of viewing GitHub repositories in your browser. Have you ever wanted to look at a specific file on Github? Have you ever wanted to browse a few different files across multiple folders? Probably not but I have! No more cloning a repo then opening it up in your editor of choice just to browse a couple of files.

Features

Similar to GitHub, this project supports not only viewing code, but rendering files. Want to see what an mp3 sounds like without downloading it from GitHub? You got it! Want to preview a font without leaving your browser? Sure!

Here's a list of all file types that support live previews:

• Various forms of images (png, jpg, apng, svg, ico, etc...)
• GIFs (It's pronounced GIF by the way)
• Video (mp4 / webm)
• Audio (mp3, wav, ogg, and aac)
• Fonts (only ttf, otf, woff, and woff2)
• Documents (doc / docx)
• PowerPoints (ppt / pptx)
• Spreadsheets (xls / xlsx)
• CSV / TSV
  • Thanks to papaparse 🎉
• Markdown (as well as mdx, kinda...)
  • Thanks to markdown-it 🎉
• PDFs
  • Thanks to pdfjs 🎉
• AsciiDoc
  • Thanks to Asciidoctor 🎉
• Zip
  • Thanks to zip.js 🎉
• Jupyter Notebook
  • Thanks to notebookjs 🎉
• PSD (Photoshop)
  • Thanks to psd.js 🎉
• GLTF/GLB Models (Experimental)
  • Thanks to model-viewer 🎉
• WebAssembly (wasm can be viewed as text)
  • Thanks to wabt.js 🎉

How do I build this?

Besides yarn, there aren't that many prerequisites. You can still build and run this project without a .env file, however, before you get started, you may want to generate a personal access token. This is because the GitHub API limits non-authenticated users to only 60 requests per hour, but authenticated users get 5000 requests per hour. When you generate the token, you don't have to select any of the options for this project to work. This project also uses Firebase to handle authentication. Don't worry though, you don't need to include any Firebase keys in the env file for this project to work.

Building

1. Clone this repo with git clone https://github.com/ctcuff/git-browser.git
2. In the root directory, create a file called .env that looks like this:

OAUTH_TOKEN=GITHUB_TOKEN_HERE
# (Optional) Firebase config below
API_KEY=
AUTH_DOMAIN=
PROJECT_ID=
STORAGE_BUCKET=
MESSAGING_SENDER_ID=
APP_ID=

3. Install dependencies by running yarn in the root directory
4. Run yarn dev and visit localhost:9000 in your browser

Running Tests

Run yarn test or yarn test --coverage. If you'd like to run tests without output from the logger, add the --silent flag.

Live examples

Wanna preview an animated GLTF model without downloading it? Sure! View model

Wanna see what a font looks like without leaving your browser? Gotcha covered! View font

Wanna see what a video looks like? Well you're in luck! View video

Wanna see what the code for this website looks like on this website? Inception! View code