Gitmeme has a few different parts to it
- The browser extension, in the
- The popup part of the browser extension, in the
- The API, in the
- The public facing website in the
The browser extension is written in TypeScript, but is otherwise vanilla code, no React used. This is because it mostly involves modifying the existing website contents of Github.com.
First install the extension into Chrome by going to
Load unpacked extension button, then choosing the
The main file that is loaded is
/extension/src/contentScript.ts: this is the entry point for the
extension. To modify the CSS, change the
Because the extension is built with Typescript, you need to run a build script to
see the effects in the browser. Do this by running
yarn build in the
folder. Then, go to
chrome://extensions in your browser and click the refresh button
in the Gitmeme extension. Next, refresh the Github page you were testing on.
Browser Extension Popup
The browser extension popup is a mostly standalone React app, written in Typescript.
The source code for it is in the
/popup folder. You can edit it like any React
app, then build it with
yarn build. This builds the Typescript and copies the
result into the
/extension/popup folder. Next, go to
your browser and click the refresh button in the Gitmeme extension, the click
refresh the Github page you were testing on.
Gitmeme has an API is used to record the most popular images, and to fetch lists of them. It uses Google Firebase as a host. If you're not Shane you likely won't need to touch it.
If you want to develop on your own Firebase project, you'll need to create
a Service Account file in your Firebase project, and put it in the
site/functions/src/service_account.ts file, see the
site/functions/src/service_account_example.ts file for an example of how
to format the file.
To run the API locally for testing, do
To use the local development version of the API from the extension, uncomment the
getFakeUrl() function in the
shared/consts.ts file. Note that this code should
be commented out again before committing. You'll also need to temporarily add the line
"http://localhost:5000/*" to the
also should not be checked in
The public facing website, which you can see at https://gitme.me, is built using
Gatsby.js, a static site generator around React. The code is at
most of the content being in
It's very simple right now, just two pages,
image.tsx. To work on it,
yarn start, and it should appear in your browser. Then as you modify it,
the browser should update.
index page is obviously the landing page. We should likely have a link to
the extension for download on Chrome and Firefox, and a short video of the
extension being used.
image page is linked to from every image that we insert, and shows the
image passed through in the url, as well as some upsell that we can design
to get more virality in the app.
To run the site locally for development, do