Wishlist
jletey opened this issue · 19 comments
Hey ... I'm making this issue for two reasons:
- I'm kind-of new to Node.js/React and this whole idea is really exciting to me, so I was wondering if there was any ideas for pinned-gist projects that anyone would want me to work on.
- I'm sure people (will) have ideas for new pinned-gist projects, so can be a place where they post their ideas!
Hey @johnletey! We were chatting on Twitter about leveraging a code-to-image service like https://htmlcsstoimage.com to generate images with charts and stuff, since you can now pin an image file from a Gist!
I've included values for those images (325px wide, 100px tall) in gist-box@v0.2.0:
const { MAX_HEIGHT, MAX_WIDTH } = require('gist-box')I don't know what should be made, but a proof-of-concept just to show that something would work would be amazing!
@JasonEtco That sounds awesome ... so are you thinking of making a package that users can call to create a pinned-gist size chart?
From the given example in the tweet of how to add an image to a gist, it looks like you'd have to create a token with push access. Also, jxnblk/repng might come in handy.
I think for now just a proof of concept of it in action, so something like waka-box but through an image. Maybe a one-week contribution graph or something 🤔
Understand ... I don't have a wakatime account, so I really wouldn't be able to test any of the work I would possibly do.
@JasonEtco I don't think I could do this (because I don't plan on using wakatime any time soon) ... any other ideas?
I could technically try to create a wrapper around ChartJS for gists and then we could use that for waka-box.
I think something similar could be done with bird-box. An image with the tweet's text, which would allow for bigger, more readable tweets. It would also let us clearly denote retweets with an icon in the corner.
Some other ideas:
- birdbox for Youtube uploads, uploading the thumbnail to recent uploads. For content creators in the development space, this could be a cool way of sharing work.
- A pinned gist promoting your latest blog post via Medium integration or maybe GH Action in @JasonEtco 's case
- Some cool generative art that would update itself
A pinned gist promoting your latest blog post via Medium integration or maybe GH Action in @JasonEtco's case
@matchai @JasonEtco I think I'm going to try to do this
@matchai @JasonEtco First commit ... here's how it looks (it's still a work in progress ... still doesn't work with all RSS feeds and doesn't have tests):
I'd love for any critiques that you may have!
Thanks for the amazing post @JasonEtco
Good stuff @johnletey! Great idea to use the RSS feed. 😄
It would be pretty cool if we could make use of the ability to use images in pinned Gists to break up some of the details.
@matchai This is a great idea, what do you suggest using for making the image? Also, how did you make the image above?
@johnletey There are a few ways you could go about it.
One option would be to use a node implementation of canvas (e.g. node-canvas) to generate it.
Another option would be to create it with HTML + CSS and use either a service (e.g. HTML/CSS to Image or something like Puppeteer on a server to render and take a snapshot.
I quickly threw it together in Figma here:
https://www.figma.com/file/LQj4FFd7yX8wYociXqPPLtLO/Pinned-Gist-Mock?node-id=0%3A1
@matchai I'll look deeper into node-canvas and Puppeteer ... I'll keep you posted.
e.g. HTML/CSS to Image
Although I do love this tool, as the user will probably be using this tool more than 50 times per month, that would put a ~$29/month fee on the user.
I quickly threw it together in Figma
😍 Nice ... I'd love to start using Figma for designing prototypes
Also @matchai, how do you upload a image to a gist? I know that @JasonEtco was saying that you can add it by cloning and then pushing to the gist, but how are you supposed to do that in node?
I would take a look at https://github.com/steveukx/git-js and https://github.com/nodegit/nodegit. Alternatively, you could spawn a child process from Node to actually use the local git installation.
I'll check it out ... thanks
Hello author, can this project be used with GitHub Actions?
Yep! These projects are generally made with GitHub Actions for the automation side of things.