Wishlist

[jletey]

Hey ... I'm making this issue for two reasons:

1. 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.
2. I'm sure people (will) have ideas for new pinned-gist projects, so can be a place where they post their ideas!

[JasonEtco]

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 [email protected]:

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!

[jletey]

@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.

[JasonEtco]

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 🤔

[jletey]

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.

[jletey]

@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.

[matchai]

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

[jletey]

@matchai All great ideas ... I'll have a think and get back to you

[jletey]

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

[jletey]

You can check out my code here: blog-box

[jletey]

@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

[matchai]

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.

[jletey]

@matchai This is a great idea, what do you suggest using for making the image? Also, how did you make the image above?

[matchai]

@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

[jletey]

@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

[jletey]

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?

[matchai]

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.

[jletey]

I'll check it out ... thanks

[wztlink1013]

Hello author, can this project be used with GitHub Actions?

[matchai]

Yep! These projects are generally made with GitHub Actions for the automation side of things.