Code Monkey home page Code Monkey logo

github-buttons's Introduction

github-buttons

build npm

Usage

Use as a Snippet

Get started quickly with github:button configurator.

Use as a Component

Use as a Module

import { render } from 'github-buttons'

// export function render(options: object, callback: (el: HTMLElement) => void): void;
render(options, function (el) {
  document.body.appendChild(el) 
})

// export function render(anchor: HTMLAnchorElement, callback: (el: HTMLElement) => void): void;
render(anchor, function (el) {
  anchor.parentNode.replaceChild(el, anchor)
})

Options

  • For snippet usage, an option is an attribute on <a> element.
  • For component usage, an option is a prop on component.
  • For module usage, an option is a property on options object.
href
  • Type: string
  • Default: '#'

Assign href attribute (GitHub link) for button.

title
  • Type: string
  • Default: undefined

Assign title attribute for button.

data-icon
  • Type: string
  • Default: 'octicon-mark-github'

Set icon on button. A subset of Octicons is bundled.

data-color-scheme
  • Type: string
  • Default: undefined

Define a mapping of system color scheme to widget color scheme in css-like syntax.

This is an opt-in feature since version >=2.3.0. It means if data-color-scheme is undefined, it would still behave like version <2.3.0, where light color scheme is used under all conditions.

Once data-color-scheme is set to a string, it will inherit the default mapping: no-preference: light; light: light; dark: dark;.

  • no-preference: light; means when system has no preference on color scheme, light color scheme will be used.
  • light: light; means when system prefers light color scheme, light color scheme will be used.
  • dark: dark; means when system prefers dark color scheme, dark color scheme will be used.

User declarations would override the default. For example:

  • To enable color scheme using default, set data-color-scheme="".
  • To use dark color scheme when system has no preference, set data-color-scheme="no-preference: dark;".
  • To force light color scheme everywhere, set data-color-scheme="dark: light;".
  • To force dark color scheme everywhere, set data-color-scheme="no-preference: dark; light: dark;".

A single word can be used to force the color scheme everywhere since version >=2.11.0. For example:

  • To force light color scheme everywhere, set data-color-scheme="light".
  • To force dark color scheme everywhere, set data-color-scheme="dark".
data-size
  • Type: string
  • Default: undefined

Set button size. Possible values are undefined and 'large'.

data-show-count
  • Type: boolean
  • Default: false

Show a dynamic count based on button type (detected from href):

  • https://github.com/:user (follow)
  • https://github.com/:user/:repo (star)
  • https://github.com/:user/:repo/subscription (watch)
  • https://github.com/:user/:repo/fork (fork)
  • https://github.com/:user/:repo/issues (issues)
  • https://github.com/:user/:repo/issues/new (issues)

Tailing slash, query string, and hash in the href won't affect type detection:

  • https://github.com/:user/ (follow)
  • https://github.com/:user?tab=repositories (follow)
  • https://github.com/:user/:repo#readme (star)
  • https://github.com/:user/:repo/#readme (star)
data-text
  • Type: string
  • Default: undefined

Set button text. When button is generated from <a> element and data-text is undefined, the button text will be anchor's textContent.

aria-label
  • Type: string
  • Default: undefined

Set aira-label for button.


See also


License

See LICENSE.

github-buttons's People

Contributors

dependabot[bot] avatar ntkme avatar xhmikosr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

github-buttons's Issues

add title attribute to link

Currently links generated by https://buttons.github.io/ have an aria-label but lack a title attribute. I suggest adding a title and giving it the same content as aria-label. This will allow a tooltip to display on mouseover in browsers like Chrome.

The main advantage of doing this is to let users determine where the button will take them before they click it. Yes, they could look in the lower left corner of the browser as they hover over it, but displaying a URL in the corner only occurs when you hover over links, and most users probably won't look down there because this project has gone through some great effort to make the button look like a button.

Reload loop hang issue in Pale Moon

Hi there,

I'm running into an issue with an apparent reload loop when using the github buttons in the Pale Moon browser. There's some trouble pinpointing exactly what is causing this but any page with the github buttons on it is currently hanging the browser with rapid memory inflation (due to style sets being added) until an OOM crash occurs.

Could you provide some insight into what might be the cause, and potentially provide a workaround in your buttons so this doesn't happen on live sites until this can be fixed on the browser side?

font size

Can I change the font size of the button?
I think the large button is not big enough.

Allow usage with AMD/CommonJS

Making the following necessary:

<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>

means to also disallow usage with e.g. RequireJS. RequireJS will not create the id, but the same script tag. And this will cause nothing to happen.

Count does not work in IE

I opened index.html of the repository locally in IE 9 and it does not display the count.

Here is the screenshot.

count_in_ie

URL query keys in the src attribute breaks buttons

It seems if a url query is added, code appears instead of buttons.

<script async defer id="github-bjs" src="https://localhost/github-buttons/buttons.js?foo=bar"></script>

I was using a CMS that inserts the <script> tag with a specified url and it automatically adds a custom query key and value.

Icons are not working

Hi,

I tried your buttons but it does not seem that icons are reflected. This is the screenshot of the index.html of your example,

github buttons

Active XSS filters don't like the buttons.

There's a problem with the way the buttons are implemented in that active XSS filters (that compare requests and results) will trip over the buttons -- specifically because the iframe contents include a base tag which has a URL exactly equal to the URL passed (URLEncoded) in the iframe's src.

From a filter's perspective this would be a reflected XSS attack by having a base statement injected (a common redirection tactic). You may be able to easily work around this by:

  • using absolute paths and dropping the base tag, or
  • changing the way the iframe content is constructed so it no longer includes the base URL in the src of it

does this support REST api?

as the title
sorry i'm trying to use this api for markdown like:
![github-star-btn](https://buttons.github.io/<user-name>/<repo>#star)
but it doesn't work ๐Ÿ˜ข
could i use https://buttons.github.io/<user-name>/<repo>#star
or some other API can support that?

delay while loading on chrome android

Hi,
I'm facing an issue that makes button style loaded after site loaded. I think this is the result of external js. I looked for,and tried to make it internal js but it did not worked. What can I do?

Adding buttons dynamically?

Hi there,

Thanks for this great project!

Is there any way to add Github buttons dynamically? Any API method I can call or something?

Icons not loaded in Firefox locally

Hi,

I just cloned the repository to a local server and opened index.html in Firefox (v62.0.2 on Windows 7). The icons don't seem to load.

image

This is the console error.

image

TypeError: o.parentNode is null[Learn More] app.min.js:1:10433
C/</<
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:10433
i
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:7350
b/<
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:8751
n
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:6370
w/<
http://localhost/test_javascript/github-buttons/assets/js/app.min.js:1:6515

Although Google Chrome (v69.0.3497.100) displays icons fine but it also has console errors.

Uncaught TypeError: Cannot read property 'replaceChild' of null
    at app.min.js:1
    at i (app.min.js:1)
    at app.min.js:1
    at n (app.min.js:1)
    at XMLHttpRequest.<anonymous> (app.min.js:1)

Styling

I have a dark website. Is there any way to style the buttons?

I am using the react version of your buttons.

Tried with styled components = no luck, styledButton and add a className='style'
On initial page load it used my styling then the buttons loaded from github and back to white.

They are really cool like they are.
I am using them and withUtterances for GitHub Issues as comments

Which files can be removed?

It seems to work even if the svg folder consuming about 90kb in /components/octicons is removed. Also leaving only 'octicon.css' and octicon.svg in /components/octicons/octicons works.

Are there other files that can be removed? Are .coffee and .less files critical?

Project Versioning

It is recommended to mark your project with version numbers. It will not only help you manage your project but also others who troubleshoot your code and track issues. It is a good practice to follow to leave the version number in your code too.

In case you are not aware of, Git has a useful feature for it called tags, You should tag your repository when you believe it is stable. More reference(https://help.github.com/articles/creating-releases/).

IE 9 10 11 Edge caching issue

IE 9+ has a bad over optimization on caching 304 Not Modified. The problem is that IE caches the page / url with the cache key related to url but without the hash as part of URL. In general if a iframe is fully static (no client side javascript), this over optimization would be fine. However, with dynamic iframe, this becomes a very bad behavior, because of cache collision.

Following is an example:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>bug.html</title>
</head>
<body>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var iframe = document.createElement('iframe')
      iframe.src = 'iframe.html#' + new Date().getTime()
      document.body.appendChild(iframe)
    })
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>iframe.html</title>
</head>
<body>
  <script>
    document.body.appendChild(document.createTextNode(document.location.hash))
  </script>
</body>
</html>
  • bug.html dynamically creates a iframe to load iframe.html#${timestamp}.
  • iframe.html uses javascript to read the #${timestamp} of its url and show the timestamp on the page.

On Chrome, Firefox, Safari, when repeatedly open the bug.html, the timestamp in iframe changes on every load, as the iframe is re-rendered on every load. However, IE would always display the same timestamp as the first load unless we do a hard refresh without cache.

Using conditional requests (If-None-Match) to prevent exceeding API rate limit

Hi!

When using a Github button with a counter on a regularly visited page such as an admin panel, the user will potentially exceed it's Github API rate limit causing the button to stop working after some time. On pages with many buttons the rate limit can be used up quickly.

/**/_({
  "meta": {
    "Content-Type": "application/javascript; charset=utf-8",
    "X-RateLimit-Limit": "60",
    "X-RateLimit-Remaining": "0",
    "X-RateLimit-Reset": "1511616179",
    "X-GitHub-Media-Type": "github.v3; format=json",
    "status": 403
  },
  "data": {
    "message": "API rate limit exceeded for 123.456.789.123. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)",
    "documentation_url": "https://developer.github.com/v3/#rate-limiting"
  }
})

Github advises to use condition requests as a solution to prevent exceeding the API rate limit (and to save tons of useless traffic on Github's servers).

Most responses return an ETag header. Many responses also return a Last-Modified header. You can use the values of these headers to make subsequent requests to those resources using the If-None-Match and If-Modified-Since headers, respectively. If the resource has not changed, the server will return a 304 Not Modified.

https://developer.github.com/v3/#conditional-requests

It would be nice if the counter could be improved to make use of condition requests to save a lot of all API traffic from github-buttons.

Not for npm registry

Hi @Ostera,

I noted that you have published my project to npm registry. I don't know what's your intention of doing it, but I would like to friendly remind you that this project is not for npm:

  1. This project do use npm, but it is only for installing build dependencies.
  2. Octicons is included in this project as a git submodule, which is a more friendly way to keep the code base clean, deal with licensing, and use GitHub Pages. npm won't install git submodules.
  3. Due to a technical limitation (#20), every single hosted copy of this project needs to change a hard-coded URL accordingly, while a real npm package should work out of box.

I will appreciate if you can unpublish this project from npm registry to avoid any further confusion.


P.S. I won't question your motives, as I don't see any violation of the license.

Respect title attribute

This is not #32.

If I call the button like so:

<a title="Witty hint title here!" class="github-button" ...

It should respect the title attribute, and give the iFrame's body the same title.

Add class to iFrames

Would be nice if we could target the resulting frames for layout. Maybe include a data-class attribute?

Clicking on the Star button does not star it

Hi,

I thought the repository gets starred when a visitor logging in to GitHub clicks on the star button. However, it does not seem to do so. It just opens the repository page and the count does not increase.

Is it supposed to be so?

Shadow DOM update breaks vertical alignment in Chrome/Safari

The "Shadow DOM" commit (c3091f0) has broken vertical alignment in Chrome (Mac/Win) and Safari (Mac). Here's a quick CodePen to demonstrate the issue:

Earlier versions of github-buttons did not present this issue. To be more specific, a star button with count used to line up vertically with a "License: MIT" icon on a few of my documentation sites, but now they do not:

It appears as though Chrome/Safari are applying a user-agent style to shadow dom nodes, causing the misalignment. End users cannot adjust these values, but perhaps an adjustment can be made in the github-buttons CSS or JS.

Need an instruction on self-host implementation

I'd like to implement those GitHub icons on my web site without linking to external resource files. I mean instead of

<script async defer src="https://buttons.github.io/buttons.js"></script>

, I'd like to have

<script async defer src="https://{my-site}/buttons.js"></script>

It seems I've succeeded doing it. But since there is no instruction for it, I'm not sure if I'm missing something or not. What I did was below.

  1. Copied these files into the my site asset directory.
- asset/github-buttons/buttons.html
- asset/github-buttons/buttons.js
- asset/github-buttons/assets/css/buttons.css
- asset/github-buttons/assets/css/main.css
- asset/github-buttons/assets/js/app.min.js
- asset/vue/vue.min.js
  1. In HTML, added these in the <head> tag.
<link rel="stylesheet" href="asset/github-buttons/assets/css/main.css">
<script src="asset/vue/vue.min.js"></script><!-- for github-buttons -->

and this at the bottom.

<script async defer src="asset/github-buttons/assets/js/app.min.js"></script>

Is this the right way of doing it? Just in case if I'm missing something.

add option to hide text while loading

For a brief second before the javascript loads the GitHub buttons are displayed as text. This is pretty disruptive for the layout if they're placed near the top of the page inside a <div> with large font: it flashes link text (default purple with an underline) before it displays the nice button.

I found that setting <a style='color: transparent;' in the HTML prevents display of this text while giving the javascript time to load. I understand if the javascript fails to load entirely it means these buttons will never be displayed, but some users might find this preferable over a "flicking" text effect during loading.

Do you think an option to enable/disable this should be added to https://buttons.github.io/ ?

Example with original code:

<a class="github-button" href="https://github.com/swharden/LJPcalc/issues" data-icon="octicon-issue-opened" data-size="large" data-show-count="true" aria-label="Issue swharden/LJPcalc on GitHub">Issue</a>
<a class="github-button" href="https://github.com/swharden/LJPcalc" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star swharden/LJPcalc on GitHub">Star</a>

Styled to not display link text:

<a style='color: transparent;' class="github-button" href="https://github.com/swharden/LJPcalc/issues" data-icon="octicon-issue-opened" data-size="large" data-show-count="true" aria-label="Issue swharden/LJPcalc on GitHub">Issue</a>
<a style='color: transparent;' class="github-button" href="https://github.com/swharden/LJPcalc" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star swharden/LJPcalc on GitHub">Star</a>

Disable Google fonts

Even if the following line is removed, it seems the script loads the Google font from the Google server.

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700">

Is it possible to disable it?

Callback

Is it possible to add a callback, or onclick attribute to the anchor. I'm trying to do a virtual page push to google analytics when somebody clicks on the github button.

Buttons are not styled when page loads

Hi there, super cool project.

I'm trying to use your buttons on my deployed documentation site: https://willcarhart.dev/docs/koi. Unfortunately, I can't get them to load properly.

I am using them in a div to center them, like so:

<div align="center">
  <a class="github-button ghbns" href="https://github.com/wcarhart/koi/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch wcarhart/koi on GitHub">Watch</a>
  <a class="github-button ghbns" href="https://github.com/wcarhart/koi" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star wcarhart/koi on GitHub">Star</a>
  <a class="github-button ghbns" href="https://github.com/wcarhart/koi/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork wcarhart/koi on GitHub">Fork</a>
  <a class="github-button ghbns" href="https://github.com/wcarhart" data-size="large" data-show-count="true" aria-label="Follow @wcarhart on GitHub">Follow @wcarhart</a>
</div>

Where the only additional styling I've applied is:

.ghbns {
	padding-left: 1rem;
	padding-right: 1rem;
}

I see in my browser that https://buttons.github.io/buttons.js is loading, but I don't see the buttons being styled properly. Network graph:
image

Web page:
image

I have tested in Chrome, Safari, and Brave, with localhost and on the live deployed site. I have also tried without the additional CSS styling, and loading the script without async and defer. Have you ever had this occur before? If so, do you have any hints?

Error: Mismatched anonymous define() module thrown by RequireJS

When i'm trying to use https://buttons.github.io/buttons.js together with https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.js i'm getting the:

Uncaught Error: Mismatched anonymous define() module: [object Object]
http://requirejs.org/docs/errors.html#mismatch
    at makeError (require.js:168)
    at intakeDefines (require.js:1254)
    at require.js:1452

AdblockPlus is blocking the star button

  • ABP version : 3.5.2
  • Button code : <a class="github-button" href="https://github.com/user/repo" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star user/repo on GitHub">Star</a>
  • Script code : <script async defer src="https://buttons.github.io/buttons.js"></script>
  • Chromium version : Version 73.0.3683.75 (Developer Build) built on Debian 9.8, running on Debian 9.6 (64-bit)

Star counts not showing

I've already set the following: data-show-count="true", yet the number of stars still doesn't show.
This project website also shows the issue: choose Star button -> tick "Show count" checkbox.

I've just noticed the issue today, it was working a few months ago... hope it's just a temporary issue.

Network traffic

When using button.js I've noticed the following requests:
network
This seems to be a huge overhead. I'm just embedding it once and using 3 buttons.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.