Skip to content

whatthefoo/fork-me-on-github

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ae36897 · Jun 19, 2019

History

10 Commits
Jun 16, 2019
Jun 16, 2019
Jun 19, 2019
Jun 16, 2019
Jun 16, 2019
Jun 16, 2019
Jun 16, 2019
Jun 16, 2019
Jun 16, 2019
Jun 19, 2019
Jun 19, 2019
Jun 17, 2019

Repository files navigation

Fork me on GitHub

Fork me on GitHub

🐙 A fresher 'Fork me on GitHub' callout, now on React.

MIT Licence

Use fork-me-on-github to promote your project on GitHub:

<ForkMeOnGithub repo="https://github.com/whatthefoo/fork-me-on-github"/>

...outputs a black SVG 'Fork me on GitHub' corner that's animated on hover. The default is black background with a white Octocat.

Customization

Instead of maintaining a list of possible combinations on this README, I created a living GitHub page, tha serves both as a way of showcase the variations and facilitate their use.

https://whatthefoo.github.io/fork-me-on-github/

On this page you can:

  • Choose your 'Fork me on GitHub' from a set of pre-defined ones
  • Copy the resulting component to the clipboard
  • See a demonstration of what can be customized

Properties

repo:

String, Required.

<ForkMeOnGithub repo="https://github.com/whatthefoo/fork-me-on-github"/>

colorOctocat:

String, Optional (defaults to white)

If the assigned color doesn't pass color validation (courtesy of validate-color), it will fallback to white. Check your console for messages if you don't see your change applied.

<ForkMeOnGithub
  repo="https://github.com/whatthefoo/fork-me-on-github"
  colorOctocat="#bada55"
/>

colorBackground:

If the assigned color doesn't pass color validation (courtesy of validate-color), it will fallback to black. Check your console for messages if you don't see your change applied.

String, Optional (defaults to black)

<ForkMeOnGithub
  repo="https://github.com/whatthefoo/fork-me-on-github"
  colorBackground="#bada55"
/>

isDocumentation:

Boolean, Optional (defaults to false)

If passed, it won't apply the absolute positioning, overriding the prop side.

<ForkMeOnGithub
  repo="https://github.com/whatthefoo/fork-me-on-github"
  isDocumentation
/>

side:

String, Optional (defaults to right, only accepts right or left)

If isDocumentation is passed, side will have no effect as the component won't be absolutely positioned.

<ForkMeOnGithub
  repo="https://github.com/whatthefoo/fork-me-on-github"
  side="left"
/>

text:

String, Optional (defaults to Fork me on GitHub)

This property is solely meant to improve accessibility.

<ForkMeOnGithub
  repo="https://github.com/whatthefoo/fork-me-on-github"
  text="View source on GitHub"
/>

Using fork-me-on-github through npm

fork-me-on-github is also available as a package on npm and can be installed as a depedency with:

npm i fork-me-on-github --save

As with any node module, first you'll have to import it with require:

var ForkMeOnGithub = require('fork-me-on-github');

...but in a modern React implementation you'll be using import:

import ForkMeOnGithub from 'fork-me-on-github';

Development

Getting started

Clone this repo locally. You'll need to have NodeJS installed. Install all dependencies by running:

npm i

Run it locally

To start the app locally, run:

npm run start

This command fires up the application on port 9990, making it visible on http://localhost:9990. Because this app is based on create-react-app, the port number should be configured on the .env file.

Building the frontend for Production

When you're ready to build for production, run:

 npm run build

This command compiles all production-optimised resources to a folder called build. It's meant to be run remotely, at the environment host, at build time.

License

MIT

About

fork-me-on-github was put together by Wallace Sidhrée 👨‍💻🇳🇴. It is heavily based on github-corners, an amazing work done by Tim Holman.