tholman / github-corners Goto Github PK

It would be cool to link to or list the sites that use this, either in a document or at the bottom of the README. Get some community action going and show people that others use it too.

If so, you can add my site.

Nice job, btw.

It would be nice to input the owner and repo names and generate the code including them.

Currently we have to paste the svg and replace manually the link.

This is a rough sketch, but functional:

• https://jsfiddle.net/4r70jax0/4/

You could implement some dynamic stuff so that the user could select the options to generate the code.

You could still have all the color combos present as like clickable buttons for presets that would auto-set the code to match them.

Hi,

I think that the "ribbon should be on top of everything, but it's looks like its not.

Here is my code :

<div class="github-corner"><a href="https://github.com" title="Fork me on GitHub"><svg viewbox="0 0 100 100" fill="currentColor"><title>Fork me on GitHub</title><path d="M0 0v100h100V0H0zm60 70.2h.2c1 2.7.3 4.7 0 5.2 1.4 1.4 2 3 2 5.2 0 7.4-4.4 9-8.7 9.5.7.7 1.3 2 1.3 3.7V99c0 .5 1.4 1 1.4 1H44s1.2-.5 1.2-1v-3.8c-3.5 1.4-5.2-.8-5.2-.8-1.5-2-3-2-3-2-2-.5-.2-1-.2-1 2-.7 3.5.8 3.5.8 2 1.7 4 1 5 .3.2-1.2.7-2 1.2-2.4-4.3-.4-8.8-2-8.8-9.4 0-2 .7-4 2-5.2-.2-.5-1-2.5.2-5 0 0 1.5-.6 5.2 1.8 1.5-.4 3.2-.6 4.8-.6 1.6 0 3.3.2 4.8.7 2.8-2 4.4-2 5-2z"></path></svg></a></div><style> .github-corner{position:absolute;right:0;top:0;width:120px;height:120px;overflow:hidden;}.github-corner a{position:absolute;right:0;top:0;left:0;bottom:0;transform:translate(50%, -50%) rotate(45deg);color:#fd6c6c;}</style>

And the website is here : http://ppo.felixinx.me/

Thanks

This will make it easier for users who would like to use these with React apps.

It's possible for users to translate manually using https://magic.reactjs.net/htmltojsx.htm.

I like old things and I think the old github ribbons look good, plus, they are seven years old! Soon they will be 14 years old, or more. For example, look at this page: http://django-pagetree.readthedocs.org/ The ribbon fits well with the serif font.

Internet Explorer makes SVGs inside focusable content also focusable themselves – meaning IE users will have to hit tab twice to get past the corner, and it’s unclear where the focus is during this time. The solution is to simply add focusable="false" to the svg element:

<svg
      width="80"
      height="80"
      viewBox="0 0 250 250"
      style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
      aria-hidden="true"
      focusable="false"
    >

Here is a screen recording showing the issue for reference – you can see I have to press Tab three times to move from one textarea to the next, instead of the expected two.

Because the background is a gradient it will not look that nice with a single color :)

http://lipis.github.io/bootstrap-social/

Right now, screen-readers would present the corner as something like this:

Source

Drawing from that source, this would probably work best:

<svg role="presentation">
  <a xlink:href="YOUR-URL-HERE" aria-labelledby="gh-corner-title">
    <title id="gh-corner-title">Fork me on GitHub</title>

    <path role="presentation" d="..."/>
    <path class="octo-arm" role="presentation" d="..."/>
    <path class="octo-body" role="presentation" d="..."/>
  </a>
</svg>

This also has a tooltip for mouse users and people long-pressing on mobile.

I'm not sure about it, if only because moving the link into the SVG itself might be too drastic a change for your purposes. But I think making it more "self-contained" would be fine. (Which could also mean an inline <style scoped> for the hover animation, but that's another issue entirely.)

Hi,

Thanks for this, really excited to incorporate it! I'm just starting with R and this is a nice addition to my markdown.

However, I keep getting an error. I have a header.html saved in the folder of my .rmd file, which I try to link to my rmd file.
My code in the header file is below:

---
title: "Header"
author: "Gabriella"
date: "03/08/2020"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)

# Add a github link in the corner of your document {#github-link}

  <a href="https://github.com/GabriellaS-K" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

Error:
Error: unexpected '<' in " <"

My code in the rmd file:

(/Users/filepath/Header.Rmd)

Error: Error: unexpected '/' in "(/"

Thanks for any help!!

currently it's a little tricky to modify the svg due to it being somewhat long and full of inline style, wonder what we could do to make it easier to customize,

if the style on the svg was pulled out into the style tags and then broke it into 2 lines it would make it much easier to edit

<a href="https://your.link" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<style>.github-corner svg{fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

does that sound like something that would make sense ?

I think it would be nice if GitHub corners opened their links in a new tab by default. I tried implementing this with #50.

I want to use one of your github corners in a web server whose code will be publicly available...do you have any ideas about how can I meet the condition required by the MIT license of this repo?

BTW, great job!

I wonder whether it'd be possible to get this in the bottom right or bottom left corner while still looking good.

I'll be honest, I don't know a lot about SVG compatibility, so this might be a known thing, but the animation is not working in Safari for me, but works fine in Chrome. I'm on Safari 8.0.6.

You can build get the code here... or edit the svg's however you like!

Did you mean to write "or" between "build" and "get"?

Using Safari 8.0.6