Customizer/Make your own corner

[TheJaredWilcurt]

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.

[tholman]

Awesome stuff!

Definitely something worth considering. I'd started to do this, but kind of ended up just wanting to get the basic idea out before I got more complex.

Will wait for this to chill out for a week or two first, and then dig this back up again.

Appreciate it!

[elrumordelaluz]

I came to the same idea, but preferred not to js the UI stuff, so results in this Jade mixin.

[TheJaredWilcurt]

@elrumordelaluz I hate to break it to ya buddy, but that's still JavaScript. It's just a lot more complex way of doing the same thing I am. You're just using a site that's doing all the heavy lifting, but at the end of the day, you're doing the same thing I am, you're just forcing them to type in colors rather than use a color picker.

@tholman I should have mentioned I used SVGO-GUI to reduce the size of the SVG by about 25% in my version so the user gets minimal characters in their snippet.

[tholman]

Lets not fight, both are super awesome! The SVGO thing is super neat too (wow, svg is such a mystery to me sometimes).

Again, will dig this up in a week or two... I do have some early designs when I was doing this as well. Will get there!

[elrumordelaluz]

sorry @TheJaredWilcurt, maybe I explained wrong, I do know that Jade it is javascript, just intended to say "take advantage of the awesome Codepen, to make me a "customizer" instead of a little app that update de DOM". Just for my own use I made it, used it to regenerate the markup for a commit. Only this.

It's an awesome idea to have a "customizer" in site.

[lipis]

💯 For the customizer :) Good stuff

[Rplus]

I make a prototype for this ~
http://codepen.io/Rplus/details/avxqBE/

[lipis]

@Rplus The cat is transparent.. which is nice.. but there is no animation :/

[Rplus]

@lipis, There is a demo for transparent cat with SMIL animation made by other people,
but it's markup is little long
#15 (comment)

[lipis]

TBH I don't mind skipping the animation.. It's nice, but we could skip it..

[Rplus]

I update this, and add new controller for animation and mix-blend-mode
http://codepen.io/Rplus/pen/wKZOBo

Hope this helps!

[lipis]

@Rplus 💯 I think bottom left/right is not really needed.. other than that it's pretty cool..!

[IonicaBizau]

👍

[digitalheir]

@lipis actually I came to this issue hoping for a bottom corner!

[TheJaredWilcurt]

@digitalheir
updated

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

[NNTin]

@TheJaredWilcurt
I've updated your code generation: https://jsfiddle.net/4r70jax0/34/
I added a ref attribute called myReference. And then use that to create the HTML: var octoCodeHTML = this.$refs.myReference.outerHTML. The style tag is static and doesn't need any modification. All dynamic change information to github-corner is in the HTML.
This way you can easily make changes without touching the code generation again.

I did something similar here: https://nntin.github.io/discord-logo/

[dreamyguy]

Late to the party, but I've made a React component and published it to NPM. I've also setup a GitHub page to let people customise their component, to help them get started and familiar with what it can do. There's even a pride mode! 🌈

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