search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.28k stars 10.31k forks source link

[1.0] Plugins wishlist (and example sites) #1199

Closed KyleAMathews closed 5 years ago

KyleAMathews commented 7 years ago

There's a lot of plugins that would be fairly easy to write that'd be great to get in. Many would just be basically wrapping either a webpack plugin (e.g. adding support for a CSS preprocessor) or an NPM library (e.g. for transformer plugin). When you create a new plugin, you should also create a companion example site as both a way to demonstrate how the plugin works as well as an integration test for the plugin.

Adding plugins and example sites are easy. Simply checkout the Gatsby repo and run npm install at the root of repo. Then run npm run plop and choose to create either a plugin or example site and then follow the prompts to do the initial setup. Some of the plugins on the wishlist already have stubs in the repository.

If you want to try building one of these, just leave a comment to claim it and start coding! Also this list is by no means complete. Feel free to suggest ideas and take those on as well!

Plugin wishlist

CSS

Transformer plugins

Source plugins

Docs on writing source plugins https://www.gatsbyjs.org/docs/create-source-plugin/

Example sites

Beyond example sites showing off how to use the above plugins, it'd be great to have example sites demonstrating possible ways to build:

fk commented 7 years ago
KyleAMathews commented 7 years ago

These are great sources of standalone data sets + public APIs

erutan commented 7 years ago

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.

Vagr9K commented 7 years ago

I'll work on toml-transformer.

timsuchanek commented 7 years ago

Working on styled-jsx and an algolia syncer

KyleAMathews commented 7 years ago

@Vagr9K @timsuchanek awesome! Added you to the list

joshboldt commented 7 years ago

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

mfeltscher commented 7 years ago

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

jondubin commented 7 years ago

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

KyleAMathews commented 7 years ago

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

jondubin commented 7 years ago

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

felixjung commented 7 years ago

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?

KyleAMathews commented 7 years ago

@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

felixjung commented 7 years ago

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

KyleAMathews commented 7 years ago

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 👍

felixjung commented 7 years ago

Sure, can do.

fk commented 7 years ago

@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 … 🙄

rawrmonstar commented 7 years ago

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

etienne-dldc commented 7 years ago

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

mfeltscher commented 7 years ago

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

Khaledgarbaya commented 7 years ago

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

Khaledgarbaya commented 7 years ago

here's the PR for gatsby-transformer-xml

sebastienfi commented 7 years ago

@KyleAMathews Wordpress.com source plugin is done.

ryandeussing commented 7 years ago

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

erlend-sh commented 7 years ago

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

I'd also recommend adding XLSX to that list.

angeloashmore commented 7 years ago

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, …).

deniaz commented 7 years ago

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.

fk commented 7 years ago

@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." …🤓 😅

ldd commented 7 years ago

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

thomask-gh commented 7 years ago

LaTeX and especially MathJax would be great!

KyleAMathews commented 7 years ago

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

thomask-gh commented 7 years ago

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

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

KyleAMathews commented 7 years ago

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

pixelstew commented 7 years ago

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?

KyleAMathews commented 7 years ago

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

pixelstew commented 7 years ago

@KyleAMathews - consider it done

angeloocana commented 7 years ago

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!

pixelstew commented 7 years ago

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

angeloocana commented 7 years ago

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

pixelstew commented 7 years ago

@angeloocana - yep np

KyleAMathews commented 7 years ago

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

Necmttn commented 7 years ago

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 🍻

KyleAMathews commented 7 years ago

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

Necmttn commented 7 years ago

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.

Necmttn commented 7 years ago

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
            }
          }
        }
      }
    }
  }
}
KyleAMathews commented 7 years ago

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

pixelstew commented 7 years ago

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

KyleAMathews commented 7 years ago

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

pixelstew commented 7 years ago

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

Tallestthomas commented 6 years ago

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.