Gatsby: [1.0]插件的愿望清单(和示例网站)

创建于 2017-06-17  ·  97评论  ·  资料来源: gatsbyjs/gatsby

有很多易于编写且易于使用的插件。很多插件基本上只是包装webpack插件(例如,添加对CSS预处理器的支持)或NPM库(例如,用于变压器插件)。 。 创建新插件时,还应该创建一个伴随示例站点,作为演示插件工作方式以及插件集成测试的一种方法。

添加插件和示例站点很容易。 只需签出Gatsby回购协议并在回购协议的根目录下运行npm install 。 然后运行npm run plop并选择创建一个插件或示例站点,然后按照提示进行初始设置。 愿望清单上的某些插件在存储库中已经有存根。

如果您想尝试构建其中之一,只需发表评论以声明它并开始编码即可! 此外,此列表绝不是完整的。 随时提出建议并接受!

插件愿望清单

的CSS

  • [x]少
  • [x]手写笔
  • [x]阿芙罗狄蒂(追踪于https://github.com/gatsbyjs/gatsby/issues/8709)
  • [x] CXS(在https://github.com/gatsbyjs/gatsby/issues/8710中跟踪)
  • [x]迷人
  • [x] JSS
  • [x] styled-jsx( @timsuchanek正在研究)

变形金刚插件

  • [x] CSV
  • [x] docx
  • [x] pdf(在https://github.com/gatsbyjs/gatsby/issues/8711中跟踪)
  • [x] XML
  • [x] asciidoc(在https://github.com/gatsbyjs/gatsby/issues/8712中跟踪)
  • [x] toml( @ Vagr9K正在研究)
  • [x]远程URL(例如,将下载参考图像,然后将其作为本地图像使用)。

源插件

编写源插件的文档https://www.gatsbyjs.org/docs/create-source-plugin/

  • [x]特洛洛
  • [x] Wordpress.com
  • [x] Drupal(回购中已经有一个开始,但是有很多补充很不错)
  • [x]棱镜
  • [x] DatoCMS
  • [x] Github
  • [x] SQL数据库(在https://github.com/gatsbyjs/gatsby/issues/8714中跟踪)
  • [x] MongoDB
  • [x] DynamoDB
  • [x] S3存储桶:请参阅gatsby-source-s3
  • [x] Twitter
  • [x] Facebook
  • [] https://www.accedo.tv/appgrid/
  • [x] https://github.com/marak/Faker.js/ —为节点传递一个“模式”,例如标题,日期,作者/头像/降价实体,并生成一堆Post节点。 例如网站会很棒!

范例网站

除了展示如何使用上述插件的示例站点外,还有一些示例站点演示可能的构建方法也很不错:

  • [x]多国语言网站
  • [x]搜索
  • [x]分页
  • [x]反应头盔
  • [x]备注(降价)
good first issue help wanted

最有用的评论

嗨,有一个Directus插件会很棒,因为它是

所有97条评论

  • Markdown中的推文和要点(请参阅jekyll -twitter-plugin
  • 需要标题和/或参考来源/许可的Markdown图片的自动魔术图形/插图
  • KaTeXMathJax (在Markdown中)–还在谷歌搜索中偶然发现jekyll-scholar ,它“格式化您的书目和网络阅读列表,并为您的博客文章提供引文超能力”,…所以我想是BibTeX;)
  • favicon生成器–并非超级必要(因为已经有http://realfavicongenerator.net/,我也可以看到很多手动生成每个图标的原因),但易于实现(除了macOS Safari想要的SVG图标之外)为其“固定标签”)
  • 运球
  • Flickr
  • 500像素

Flickr很有用-当网站本身陷入困境时,它的公开API使之成为存储照片以放入博客文章和页面的有用资源。

我将在toml-transformer

styled-jsx和algolia同步器上工作

@ Vagr9K @timsuchanek太棒了! 将您添加到列表中

有人在DatoCMS上工作吗? 希望看到发生这种情况。

是否已经有人在进行Medium集成? 获取给定博客的最新帖子会很酷。

@mfeltscher你读懂我的想法! 我也有同样的需求,并开始研究如何编写一个。 由于中型API在这方面受到限制(因此,您无法从博客获取最新帖子),因此,我们将不得不抓取或使用博客的rss feed。 我开始在此处编写通用的rss源: https :

@jondubin嘿,您是否有兴趣将源代码插件添加到Gatsby存储库中? 这是一个实验,但我认为在同一存储库中拥有大多数社区插件将有助于保持插件代码的质量更高,因为这里将有更多的代码关注点,此外我们可以继续投资越来越多测试基础架构以确保一切正常。

有什么想法吗?

@KyleAMathews再也不说了! 只要有机会,我就会迁移。

嘿,这个周末我开始和盖茨比一起玩。 看起来不错! 我想建立一个个人网站并使用迷人的样式。 从我的角度来看,它不需要自己的插件。 由于它在后台使用魅力,因此当您使用魅力插件时,它可以正常工作。 我想念什么吗?

@felixjung dunno! 想尝试并举报吗? 我没有用过Glamorous或没有研究过它的SSR方法,所以不知道现有的charm插件是否可以正常工作

它确实起作用😆查看其文档,我找不到有关SSR的任何信息。 肯特·C·多德斯(Kent C. Dodds)刚写了它,是因为魅力和反应支持了它。 所以我尝试了一下,当您启用了魅力插件时,它可以工作。 🎉

哦,太完美了:-)您想在“魅力插件自述文件”中添加提及,然后我们可以检查一下,然后👍

当然可以。

@jondubin +1关于中型API的限制。 我还尝试了RSS方式,只是发现提要中还包含用户的注释,您可以解决该问题,但是……

我想我将在情感插件上工作

嗨,有一个Directus插件会很棒,因为它是

@fk @jondubin在研究此问题时,我发现了另一个解决方案,可以按照本博客文章中所述从Medium获取帖子: https://medium.com/@{username}/latest?format=json

👋我可以使用gatsby-transformer-xml插件

这是gatsby-transformer-xmlPR

@KyleAMathews Wordpress.com源插件已完成。

@fk @erutan wrt Flickr / 500px, Unsplash也很棒。

我相信#1496解决了“ Transformer插件”下的“ CSV”问题。

我还建议将XLSX添加到该列表。

我已经在这里开始了对Arizona.io源插件的工作: https :

这非常基础:提取所有文档并使所有数据在PrismicDocument节点上可用。

需要进行的改进将包括根据需要链接文档(其他语言,关系链接字段等)。

我们已经编写了一个中型源插件,该插件从@mfeltscher提到的端点中提取JSON。 我在这里打开了请求请求:#1907

希望它对其他人也有用。

@deniaz谢谢! 我完全忘了跟进@ mfeltscher😕的评论,现在我对为什么我自己从未尝试过该端点感到困惑。 似乎当我阅读“ JSON页面不旨在用作阅读API时,我听话的东西”。🤓

嘿,
我已经为Github API v4编写了一个源插件,或者使用npm install gatsby-source-github-api安装它

随时告诉我我需要更改什么或希望实现哪些功能。

-
编辑:我还完成了一个简单的网站,展示了此插件的实用性:您可以在这里找到它

LaTeX尤其是MathJax会很棒!

@thomaskuntzz现在起来了! https://using-remark.gatsbyjs.org/katex/

太棒了! 看起来很适合我的需求!

只是想知道为什么选择KaTeX而不是MathJax ...知道吗?

不确定,请检查原始PR以获取推理。 您还为MathJax添加了另一个插件。 更多插件的优点:-)

嘿,我整理了一个用于对帖子列表进行分页的快速解决方案,并注意到周围没有分页示例。

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

如果这符合要求,我可以写一篇简短的文章来解释它吗?

@pixelstew看起来很棒! 您想提取一个人们也可以使用的图书馆吗? 像createPagninatedPages({ edges, pageLength=10, templatePath, createPage })东西。

那解决了一个非常普遍的问题!

也会喜欢有关使用该解决方案的博客文章。

@KyleAMathews-考虑完成

嗨伙计!

我可以使用多语言站点示例吗?

我的插件gatsby-plugin-18n是一个好的解决方案吗? 需要什么改进?

我很乐意提供帮助并反馈正确的做事方式。

谢谢!

@KyleAMathews

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

只是注意到自述文件中存在一些可怕的错误。 让我知道API是否足够简单。

@pixelstew

您可以将github链接添加到package.json吗?
在npm页面中,我必须转到您的npm配置文件,然后转到github配置文件,然后再到存储库以查找源代码。

我将使用gatsby-plugin-i18n测试您的包裹
我希望它可以工作= D

@angeloocana-是的

@pixelstew看起来很棒! 超级简单易用。 我唯一看不到的是一种更改页面默认路径的方法。 例如,对于i18n或网站的子部分,例如/ blog / 1,/ blog / 2等。这也可能是一种表示斜杠与否的方法。

嗨, @KyleAMathews为Trello编写了一个boardId更好。

我也正在用它建立2个开源网站。 以及有关所有过程的博客文章/教程。
干杯
🍻

@Necmttn哇! 我一直想要一个Trello源代码插件! 等不及要阅读它了! 您可以从董事会跳到列表再到卡吗? 例如,查询一块牌子,然后从其列表之一中获取所有卡信息?

是的,绝对! :)就像这样,

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

因此在node的基础上存在parent值的关系。
card.parent值= list.id
list.parent值= board.id
然后基本上..您可以在list.map时将卡相对list进行细分;

    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>
      )
    })

今天我将尝试为card.desc添加变压器,这是与gatsby-transformer-remark.原始降价解析

并添加children关系会很好。 如果有人有时间,我将不胜感激。

好吧,我还添加了儿童关系和变压器注释。 新版本就像一个魅力。 这是示例查询。

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

只是有了一个基于faker.js的源插件的想法-对于创建示例网站来说真是太神奇了!

@KyleAMathews-我将更新lib,以便可以将其用于分页。

您或其他任何人都可以描述分页帖子的结构方式吗?
在降价中,例如-是index.md ,然后是其他“页面”的一些后续md文件吗?

还是使用其他任何数据源?

我想如果我希望这是自动化的事情,我需要知道API响应的外观。

@pixelstew它应与任何数据源一起使用。 它只需要一个选项,我想在其创建的页面上添加“前缀”,例如“帖子”或“图像”或其他内容。

@KyleAMathews-是的,我猜是-我可能过于复杂了。 我当时正在考虑传递所有帖子的数组,检测数组中是否有“多页”帖子,然后按您所说的有条件地渲染带有前缀url的帖子。

如果我将输入保留为任何用户定义的数组,则解决方案很简单。

我对建立搜索示例网站或分页非常感兴趣,因为我目前正在为自己的网站开发这些功能。

当然,如果还没有人在研究这些。

@Tallestthomas太好了! @pixelstew您或其他任何人都为gatsby-paginate建立了示例网站吗? 最好在这里托管一个,因为这是一个常见的用例。

在搜索中- @bvaughn在搜索创意方面颇有

我在这里推送了一些被黑的正在进行中的工作,但它们根本不准备共享。 只要有时间,就在这里和那里进行工作。

有人碰巧与Zendesk或Greenhouse做任何工作吗?

嘿大家,

我为源插件编写者创建了一个帮助器库。 它应该有助于减少源插件所需的一些样板。

gatsby-node-helpershttps :

我已经开始将它用于我正在编写的Shopify源插件,并在其中找到了价值,所以我想我会分享它。 如果您尝试一下,请告诉我您的想法。 谢谢 :)

@KyleAMathews我已经在自己的博客上使用了该插件,我很乐意在此处克隆和托管该插件。

@angeloashmore,这太棒了!!! 您可以从源插件文档页面链接到它吗? https://www.gatsbyjs.org/docs/create-source-plugin/

@pixelstew gatsby-paginate?

@pixelstew有什么理由使gatsby-paginate插件上的许可证是GPL?

希望看到Craft CMS的源插件。 Craft具有可创建JSON API的本地插件。 https://github.com/craftcms/element-api/tree/v1

对于手工艺品3,还有一个GraphQL服务器插件。 https://github.com/markhuot/craftql

这个NPM库非常不错。 它分析页面并为该页面上使用的实际字符创建必要的字体文件,以实现最佳加载速度https://www.npmjs.com/package/subfont

拥有一个可以对网站上所有页面或指定页面执行此操作的插件会很整洁!

@KyleAMathews我将从LaunchDarkly集成中受益。 理想情况下,它将同时支持SSR和运行时功能标志。

@ mickeyreiss-visor太酷了!

有任何Dribbble插件吗?

@smakosh不是我知道的(在npm和GitHub上搜索)…想要创建一个吗?

我试试看!

他们的API太糟糕了,大声笑,与其告诉我缺少什么参数,他们的反应就像

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

我设法得到回应的Okey,今晚将在该插件上运行!

完成: https

@smakosh不错! 是否要将其添加到社区插件列表? https://www.gatsbyjs.org/docs/plugins/#community -plugins

入门套件: https :

嗨,有计划增加对asciidoc的支持吗? :)

@vojtechruz我还没有人写过! 随时接受它,并将其贡献给社区!

当然,我会很高兴:)

有人在开发子字体插件吗? 希望看到它在行动。

@alexparish真是太好了!

@alexparish太棒了! 那天晚上只是在考虑一个! 我的想法是,默认情况下,人们应该指定他们想要的页面,因为我假设此过程非常昂贵? 连接到Google Analytics(分析)并自动将工具应用于前10个着陆页会很酷。

@KyleAMathews恐怕我

好的,不确定何时有空,但是,在使用自定义字体的网站上提高性能有很大的潜力。

TBH子字体插件可能有点矫kill过正,除非它具有某种魔力,例如仅在分析数据的前10页上运行的想法(这是_awesome_想法)。 要将子字体添加到项目中,只需将其添加到构建步骤的末尾即可

gatsby build && subfont public -i

另一个想法:

插件思路:
解析草图文件以根据草图文件中的组件描述自动生成组件文档或设计系统文档。

它是如何工作的:
要解析和读取草图文件,我们需要具有某些特定属性的透明图层和画板结构。 对于要记录的每个组件组,都需要一个单独的画板,其中包含描述层或信息符号。 该层需要有一个特殊的名称。 我们可以从该层读取内容,并使用该内容在markdown中构建页面。

我们可以使用的一些工具:
https://github.com/xaviervia/sketch2json
http://oscarotero.design/node-sketch/
https://gist.github.com/JoelBesada/fc20060741342e8a5f15208401e4308d

一个cloudinary插件的想法:
更多信息

我将研究pdf-transformer。

我将研究dynamodb源插件。

@KyleAMathews

问题摘要有

Drupal(回购中已经有一个开始,但是会有很多补充很不错)

您正在追寻的其他地方是否有清单?

来源心愿单在我们可以添加的内容上仍然有效吗?

@KyleAMathews我有一个用于gatsby-fixer-io插件。 现在可以为此提交PR了吗,因为我现在已经制定了PR

@kenigbolo,我们尝试仅将真正的核心插件添加https://www.gatsbyjs.org/docs/submit-to-plugin-library/

@aroduribe不是真的。 其中许多事情已经完成。 如果有一个有趣的外观,请再次检查插件库,以查看是否已完成。 https://www.gatsbyjs.org/plugins/

您也可以检查https://github.com/gatsbyjs/gatsby/labels/status%3A%20help%20wanted以寻求帮助。

也可以在https://www.gatsbyjs.org/docs/how-to-contribute/中找到其他贡献方式

自从四月份Smugmug收购它以来,Flickr似乎正在经历小小的复兴。 作为Flickr的长期用户,我真的很想去编写源代码插件...

Flickr很有用-当网站本身陷入困境时,它的公开API使之成为存储照片以放入博客文章和页面的有用资源。

好奇是否有人在研究Notion源插件…

@dustinhorton我昨天在看。 但它们没有公共API,因此需要使用公共板等。

有一个用GO编写的非官方API SDK。
https://github.com/kjk/notionapi

让我知道你是否愿意写一个。 我也可以做出贡献。

出于相同的原因,我写了gatsby-source-trello

@Necmttn是的,我在搜索Gatsby源插件后偶然发现了这一点。 Public可以满足我的需求,但是我只有一个小用例,因此担心我付不起时间。 我将看一下您的Trello插件,以开始了解它可能需要做什么-谢谢或链接。

我建立了这个家族: https :

查看当前文档和插件似乎已经涵盖了其中的所有内容。 到此结束,任何新的源插件请求都可能会出现问题。 (仅供参考:这是历史最悠久的公开期刊,所以是由团队来完成所有这些工作的。)

此页面是否有帮助?
0 / 5 - 0 等级