Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customizer/Make your own corner #5

Open
TheJaredWilcurt opened this issue Nov 10, 2015 · 17 comments
Open

Customizer/Make your own corner #5

TheJaredWilcurt opened this issue Nov 10, 2015 · 17 comments

Comments

@TheJaredWilcurt
Copy link

@TheJaredWilcurt TheJaredWilcurt commented Nov 10, 2015

This is a rough sketch, but functional:

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
Copy link
Owner

@tholman tholman commented Nov 11, 2015

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
Copy link
Contributor

@elrumordelaluz elrumordelaluz commented Nov 11, 2015

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

@TheJaredWilcurt
Copy link
Author

@TheJaredWilcurt TheJaredWilcurt commented Nov 11, 2015

@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
Copy link
Owner

@tholman tholman commented Nov 11, 2015

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
Copy link
Contributor

@elrumordelaluz elrumordelaluz commented Nov 11, 2015

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
Copy link

@lipis lipis commented Nov 12, 2015

💯 For the customizer :) Good stuff

@tholman tholman changed the title Dynamic values Editor/Make your own corner Nov 14, 2015
@tholman tholman changed the title Editor/Make your own corner Customizer/Make your own corner Nov 14, 2015
@Rplus
Copy link

@Rplus Rplus commented Nov 22, 2015

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

@lipis
Copy link

@lipis lipis commented Nov 22, 2015

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

@Rplus
Copy link

@Rplus Rplus commented Nov 22, 2015

@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
Copy link

@lipis lipis commented Nov 22, 2015

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

@Rplus
Copy link

@Rplus Rplus commented Nov 22, 2015

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

Hope this helps!

@lipis
Copy link

@lipis lipis commented Nov 22, 2015

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

@IonicaBizau
Copy link
Contributor

@IonicaBizau IonicaBizau commented Feb 28, 2016

👍

@digitalheir
Copy link

@digitalheir digitalheir commented Aug 15, 2017

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

@TheJaredWilcurt
Copy link
Author

@TheJaredWilcurt TheJaredWilcurt commented Aug 27, 2017

@NNTin
Copy link

@NNTin NNTin commented Nov 26, 2017

@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
Copy link

@dreamyguy dreamyguy commented Jun 19, 2019

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants
You can’t perform that action at this time.