Gatsby: [1.0] Plugins wishlist (and example sites)

• Tweets and Gists in Markdown (see jekyll-twitter-plugin)
• automagical figure/figcaption for Markdown images that need a caption and/or reference to source/license
• KaTeX, MathJax (in Markdown) – also while googling around stumbled upon jekyll-scholar, which "formats your bibliographies and reading lists for the web and gives your blog posts citation super-powers", …so I guess BibTeX ;)
• favicon generator – not super necessary (as there already is http://realfavicongenerator.net/ and I also can see a lot of reasons for generating each of those manually) but quite easy to implement (apart from that SVG icon that macOS Safari wants for its "pinned tabs")
• Dribbble
• Flickr
• 500px

These are great sources of standalone data sets + public APIs

• https://github.com/caesar0301/awesome-public-datasets
• https://github.com/toddmotto/public-apis

Flickr would be useful - while the site itself is languishing, it's robut public API makes it a useful source to store photos to pull into blog posts and pages.

I'll work on toml-transformer.

Working on styled-jsx and an algolia syncer

@Vagr9K @timsuchanek awesome! Added you to the list

Anyone working on DatoCMS? Would love to see that happen.

Is there anyone already working on a Medium integration? Would be cool to fetch the latest posts of a given blog.

@mfeltscher you read my mind! I have the same need, and started looking into how we could write one. Since the Medium API is limited in this regard (afaik you can't get the most recent posts from a blog), we'd either have to scrape or use a blog's rss feed. I started writing the general purpose rss source here: https://github.com/jondubin/gatsby-source-rss Contributions/thoughts welcome!

@jondubin hey would you be interested in adding the source plugin to the Gatsby repo? This is a bit of an experiment but I think that having most community plugins in the same repo will help keep the quality of plugin code much higher as there'll be a lot more eyeballs on code here plus we can keep investing in better and better testing infrastructure to ensure everything works well.

Thoughts?

@KyleAMathews say no more! I'll migrate as soon as I get the chance.

Hey there, I started playing with Gatsby this weekend. Looks cool! I want to build a personal website and use glamorous for styles. The way I see this, it does not need its own plugin. Because it uses glamor in the background, it jut works when you use the glamor plugin. Am I missing something?

@felixjung dunno! Want to try and report back? I haven't used Glamorous or researched its SSR method so don't know if the existing glamor plugin will just work or not

It does work 😆 Looking at its docs, I couldn't find anything about SSR stuff. Kent C. Dodds just wrote it works because glamor and react support it. So I tried and it works when you enable the glamor plugin. 🎉

Oh well perfect then :-) you want to add mention of it then to the glamor plugin readme and we can check that one off then 👍

Sure, can do.

@jondubin +1 regarding the limitations of the Medium API. I also tried the RSS way, only to find out the feed also contains the user's comments, which you can work around, but … 🙄

I think I'm going to work on a emotion plugin

Hi, it would be great to have a plugin for Directus since it's an open source alternative to Contentful :)

@fk @jondubin While looking into this issue I found another solution to fetch posts from Medium as described in this blog post: https://medium.com/@{username}/latest?format=json.

👋 I can work on the gatsby-transformer-xml plugin

here's the PR for gatsby-transformer-xml

@KyleAMathews Wordpress.com source plugin is done.

@fk @erutan wrt Flickr/500px, Unsplash would also be great.

I believe #1496 solved "CSV" under "Transformer plugins".

I'd also recommend adding XLSX to that list.

I've started work on a prismic.io source plugin here: https://github.com/angeloashmore/gatsby-source-prismic

It's very basic: pulls in all documents and makes all data available on PrismicDocument nodes.

Improvements needed would include linking documents as needed (alternative languages, relational link fields, …).

Hey there

We've written a Medium source plugin which pulls in JSON from the endpoint mentioned by @mfeltscher. I've opened a Pull Request here: #1907

Hopefully it's useful for someone else, too.

@deniaz Thank you! I totally forgot about following up the comment by @mfeltscher 😕, and now I'm a bit baffled at why I never tried that endpoint myself. Seems like I obediently abandoned things when reading "The JSON page is not intended to be used as a read API." …🤓 😅

Hey,
I've written a source plugin for Github API v4, or install it using npm install gatsby-source-github-api

Feel free to tell me what I need to change or what features you'd like to see implemented.

--
edit: I also finished a simple website that showcases the usefulness of this plugin: You can find it here

LaTeX and especially MathJax would be great!

@thomaskuntzz it's up now! https://using-remark.gatsbyjs.org/katex/

Awesome! Looks like a great fit for what I need!

Just wondering why KaTeX was chosen over MathJax... Any idea?

Not sure, check on the original PR for the reasoning. You also add another plugin for MathJax. More plugins the merrier :-)

Hey I have put together a quick solution for paginating a list of posts and noticed that there are no pagination examples around.

https://github.com/pixelstew/pixelstew-gatsby/blob/master/gatsby-node.js

If that fits the bill I can write a quick post explaining it?

@pixelstew looks great! You want to extract that a library that people can use too? Something like createPagninatedPages({ edges, pageLength=10, templatePath, createPage }) or something like that.

That solve a really common problem!

Would love a blog post on using the solution too.

@KyleAMathews - consider it done

Hi folks!

Can I work with the multi language site example?

Is my plugin gatsby-plugin-18n a good solution? What improvements does it needs?

I'd love to help and get feed back about the right way of doing things.

Thanks!

@KyleAMathews

https://www.npmjs.com/package/gatsby-paginate

Just noticed some horrible errors in the readme. Let me know if the API is straight forward enough.

Hi @pixelstew

Could you add the github link to your package.json?
In the npm page I had to go to your npm profile, then to github profile, then to repositories in order to find the source code.

I going to test your package with gatsby-plugin-i18n
I hope it works =D

@angeloocana - yep np

@pixelstew looks great! Super straightforward to use. The only thing I can see missing is a way to change the default path for the pages. E.g. for i18n or for sub-sections of the site e.g. /blog/1, /blog/2 etc. Also probably a way to say trailing slashes or not.

Hi, @KyleAMathews I wrote a Source plugin for Trello it works base on team id. which is better than entering boardId's one by one.

I'm also building 2 openSource websites with it. and a blog post/tutorial about all process.
cheers
🍻

@Necmttn woah! I've wanted a Trello source plugin forever! Can't wait to read about it! Can you jump from board to lists to cards? E.g. query for a board and then grab all the card information from one of its lists?

yeah definitely! :) that would be something like,

query getBoardById($id: String!) {
  allTrelloBoard (
    filter: {
      id: {eq: $id}
    }
  ){
    edges {
      node {
        id
        name 
        lists {
          id
          name
        }
        cards {
          id
          parent
          name
          desc
        }
      }
    }
  }
}

so theres relationship between nodes base on parent value.
card.parent value = list.id
list.parent value = board.id
then basically.. you can segment cards relatively list, when you list.map;

    const cards = data.cards.filter(card => {
      return card.parent === list.Id
    }).map(card => {
      return (
        <div key={card.id}>
          <h2>{card.name}</h2>
          <p>{card.desc}</p>
        </div>
      )
    })

today i will try to add transformer for card.desc which is raw markdown parse with gatsby-transformer-remark.

and adding children relationship would be nice PR. if someone has a time I would appreciate that.

alright, I also added children relationship & transformer-remark. new version works like a charm. here's the example query.

query getWeeklyById($id: String!) {
  allTrelloBoard (
    filter: {
      id: {eq: $id}
    }
  ){
    edges {
      node {
        id
        name lists {
          id
          name
          cards {
            id
            name
            childMarkdownRemark {
              id
              html
            }
          }
        }
      }
    }
  }
}

Just had the idea for a faker.js based source plugin — would be amazing for creating example sites!

@KyleAMathews - I am going to update the lib so that it can be used for paginating a post.

Can you or anyone else describe the way the paginated post might be structured?
In markdown for eg - would it be an index.md and then some subsequent md files for the other 'pages'?

Or using any other data source?

I guess I need to know how the API response might look if I want this to be an automated thing.

@pixelstew it should work with any data source. It just needs an option I think to add a "prefix" to the pages it's creating e.g. "posts" or "images" or whatever.

@KyleAMathews - Yeah I guess so - I was probably overcomplicating it. I was thinking of passing an array of all posts, detecting whether there were any 'multi page' posts in the array, then conditionally rendering those with a prefixed url as you say.

If I leave the input as any user defined array then the solution is simple.

I'm pretty interested in building a search example site or pagination, since I'm currently working on these features for my own site.

If there's no one working on these already, of course.

@Tallestthomas that'd be great! @pixelstew have you or anyone else built an example site for gatsby-paginate yet? It'd be good to have one hosted here since that's a common use case.

On search — @bvaughn has played with search ideas quite a bit. Brian — did you push any of your sample code anywhere?

I pushed some hacked up work-in-progress here but it's not at all ready to be shared or anything. Just working on it here and there, when I find time.

Anyone happen to do any work with Zendesk or Greenhouse?

Hey everyone,

I created a helper library for source plugin writers. It should help reduce some of the boilerplate needed for source plugins.

gatsby-node-helpers: https://github.com/angeloashmore/gatsby-node-helpers

I've started using it for a Shopify source plugin I'm writing and found value in it, so I figured I would share it. Please let me know what you think if you try it out. Thanks :)

@KyleAMathews I have used the plugin on my own blog which i'm happy to clone and host here.

@angeloashmore this is fantastic!!! Could you link to it from the source plugin docs page? https://www.gatsbyjs.org/docs/create-source-plugin/

@pixelstew gatsby-paginate?

@pixelstew any reason the license is GPL on the gatsby-paginate plugin?

Would love to see a source plugin for Craft CMS. Craft has a native plugin that create a JSON API. https://github.com/craftcms/element-api/tree/v1.

For craft 3 there is also a GraphQL server plugin. https://github.com/markhuot/craftql

This NPM library is pretty sweet. It analyzes a page and creates the necessary font files for just the actual characters used on that page for optimal loading speed https://www.npmjs.com/package/subfont

Would be neat to have a plugin which did that for all or designated pages on a site!

@KyleAMathews I'd benefit from a LaunchDarkly integration. Ideally, it would support both SSR and runtime feature flags.

@mickeyreiss-visor that would be cool!

is there any Dribbble plugin?

@smakosh Not that I'm aware of (searched npm and GitHub)…want to create one?!

I'll give it a try!

their API is so bad lol, instead of telling me what parameter is missing, their response be like

{
    "error": "invalid_request",
    "error_description": "The request is missing a required parameter, includes an unsupported parameter value, or is otherwise malformed."
}

Okey I managed to get a response, will work on the plugin tonight!

Done: https://www.npmjs.com/package/gatsby-source-dribbble

@smakosh nice! Want to add it to list of community plugins? https://www.gatsbyjs.org/docs/plugins/#community-plugins

Just opened a PR https://github.com/gatsbyjs/gatsby/pull/4086

Starter kit: https://github.com/smakosh/gatsby-source-dribbble-example

Hi, any plans to add support for asciidoc? :)

@vojtechruz I don't anyone has written one yet! Feel free to take it on and contribute it back to the community!

Sure, I'll be happy to :)

Anyone working on a subfont plugin? Would love to see it in action.

@alexparish That'd be great to see!

@alexparish that'd be awesome! Was just thinking about one for that the other night! My thought was by default people should have to specify which pages they want as I'm assuming the process is pretty expensive? It'd be cool to hook up to google analytics and automatically apply tool to top 10 landing pages.

@KyleAMathews I’m afraid I know very little about the subfont process but was impressed with the perf credentials. If you had planned to have a go at this plugin please don’t let me stop you - I have very little time available so it would be slow going from my side.

Ok, not sure when I'll have time too but yeah, it has a lot of potential to improve performance on sites with custom fonts.

TBH a plugin for subfont is probably a little overkill, unless it had some magic like the idea of only running on the top 10 pages from analytics (which is an _awesome_ idea). To add subfont to a project you can just tack it onto the end of your buildstep

gatsby build && subfont public -i

Another couple of ideas:

• Google lighthouse integration - this would have to run against built sites, not development sites

• First Input Delay plugin - check out the article describing FID

Plugin idea:
Parse a sketch file to auto generate component documentation or design system documentation based on component description inside the sketch file.

How does it work:
To parse and read the sketch file we need a clear layer and artboard structure with some specific properties. Per component group you want to document, there needs to be a separate artboard with an description layer or an information symbol. This layer needs to have a special name. We can read the content from that layer and build a page in markdown with that content.

Some tools we can use:
https://github.com/xaviervia/sketch2json
http://oscarotero.design/node-sketch/
https://gist.github.com/JoelBesada/fc20060741342e8a5f15208401e4308d

A cloudinary plugin idea:
more info

I'll work on pdf-transformer.

I'll work on the dynamodb source plugin.

@KyleAMathews I'm gonna break this apart into a few issues so it's a little more approachable. I'll close this out once they're created!

issue summary has

Drupal (there's the start of one already in the repo but there's a number of additions that'd be great to make)

Is there a list somewhere of the additions you're chasing?

Is the source wishlist still valid on what we can add?

@KyleAMathews I have a small node utility I use for fixer-io and I'd actually love to add this as a plugin I can use in gatsby so basically I'd be making a gatsby-fixer-io plugin. Is it okay to submit a PR for this already as I have this mapped out at the moment

@kenigbolo we try to only add really core plugins to this repo. We'd love for you to publish your plugin to npm yourself so it can show up in the plugin library! https://www.gatsbyjs.org/docs/submit-to-plugin-library/

@aroduribe not really. Many of these things have been done. If there's one that looks interesting, double check against the plugin library to see if it's been done or not. https://www.gatsbyjs.org/plugins/

You can also check https://github.com/gatsbyjs/gatsby/labels/status%3A%20help%20wanted for work to help out.

Other ways to contribute also can be found at https://www.gatsbyjs.org/docs/how-to-contribute/

Since it's acquisition by Smugmug in April, Flickr seems to be going through a small renaissance. As a long time user of the Flickr, I'm really tempted to have a go at writing a source plugin...

Flickr would be useful - while the site itself is languishing, it's robut public API makes it a useful source to store photos to pull into blog posts and pages.

Curious if anyone has looking into a Notion source plugin…

@dustinhorton I was looking at it yesterday. but they don't have a public API so need to use public boards etc.

there's an unofficial API SDK written in GO.
https://github.com/kjk/notionapi

let me know if you are willing to write one. I might contribute as well.

I have written gatsby-source-trello for the same reasons.

@Necmttn Yeah I'd stumbled on that after searching for a Gatsby source plugin. Public would suite my needs fine, but I've only got one small use case so afraid I can't afford to commit the time it'd take. I will take a look over your Trello plugin to start to get an idea of what it might entail—thanks or linking.

I built this fam: https://github.com/wmlutz/gatsby-source-dynamodb

Reviewing current docs and plugins seems like everything in this has been covered. Closing this, any new source plugin requests can have an issue opened. (FYI: this is the oldest open issue, so yay team for getting all these done.)