Gatsby: [1.0] Lista de desejos de plug-ins (e sites de exemplo)

Criado em 17 jun. 2017  ·  97Comentários  ·  Fonte: gatsbyjs/gatsby

Há muitos plug-ins que seriam bastante fáceis de escrever e que seriam ótimos para entrar. Muitos estariam basicamente envolvendo um plug-in webpack (por exemplo, adicionando suporte para um pré-processador CSS) ou uma biblioteca NPM (por exemplo, para um plug-in de transformador) . Ao criar um novo plug-in, você também deve criar um site de exemplo complementar como uma forma de demonstrar como o plug-in funciona e também como um teste de integração para o plug-in.

Adicionar plug-ins e sites de exemplo é fácil. Basta verificar o repositório Gatsby e executar npm install na raiz do repo. Em seguida, execute npm run plop e escolha criar um plug-in ou um site de exemplo e siga as instruções para fazer a configuração inicial. Alguns dos plug-ins na lista de desejos já têm stubs no repositório.

Se você quiser tentar construir um desses, deixe um comentário para reivindicá-lo e comece a codificar! Além disso, esta lista não está completa. Sinta-se à vontade para sugerir ideias e aceitá-las também!

Lista de desejos do plugin

CSS

  • [x] menos
  • [x] Stylus
  • [x] Afrodite (rastreado em https://github.com/gatsbyjs/gatsby/issues/8709)
  • [x] CXS (monitorado em https://github.com/gatsbyjs/gatsby/issues/8710)
  • [x] Glamoroso
  • [x] JSS
  • [x] styled-jsx ( @timsuchanek trabalhando nisso)

Plugins de transformador

  • [x] CSV
  • [x] docx
  • [x] pdf (rastreado em https://github.com/gatsbyjs/gatsby/issues/8711)
  • [x] xml
  • [x] asciidoc (rastreado em https://github.com/gatsbyjs/gatsby/issues/8712)
  • [x] toml ( @ Vagr9K trabalhando nisso)
  • [x] URLs remotos (por exemplo, uma imagem referenciada seria baixada e então disponibilizada como uma imagem local).

Plugins fonte

Documentos sobre como escrever plug-ins de origem https://www.gatsbyjs.org/docs/create-source-plugin/

  • [x] Trello
  • [x] Wordpress.com
  • [x] Drupal (há o início de um já no repo, mas há uma série de adições que seria ótimo fazer)
  • [x] Prismic
  • [x] DatoCMS
  • [x] Github
  • [x] Bancos de dados SQL (rastreados em https://github.com/gatsbyjs/gatsby/issues/8714)
  • [x] MongoDB
  • [x] DynamoDB
  • [x] Balde S3: Veja gatsby-source-s3
  • [x] Twitter
  • [x] Facebook
  • [] https://www.accedo.tv/appgrid/
  • [x] https://github.com/marak/Faker.js/ - passe um "esquema" para o nó, por exemplo, título, data, autor com avatar / corpo de marcação e gere vários nós de Postagem. Seria ótimo para sites de exemplo!

Sites de exemplo

Além de sites de exemplo que mostram como usar os plug-ins acima, seria ótimo ter sites de exemplo que demonstrassem maneiras possíveis de construir:

  • [x] Sites multilíngues
  • [x] Pesquisa
  • [x] Paginação
  • [x] Capacete React
  • [x] Observação (redução)
good first issue help wanted

Comentários muito úteis

Olá, seria ótimo ter um plugin para Directus, já que é uma alternativa de código aberto para Contentful :)

Todos 97 comentários

  • Tweets e Gists no Markdown (veja jekyll-twitter-plugin )
  • figura / figcaption automagical para imagens Markdown que precisam de uma legenda e / ou referência à fonte / licença
  • KaTeX , MathJax (em Markdown) - também ao pesquisar no Google, tropeçou em jekyll-scholar , que "formata suas bibliografias e listas de leitura para a web e dá superpoderes de citação às suas postagens de blog", ... então eu acho BibTeX;)
  • gerador de favicon - não super necessário (como já existe http://realfavicongenerator.net/ e também posso ver muitos motivos para gerar cada um manualmente), mas muito fácil de implementar (além do ícone SVG que o macOS Safari quer por suas "guias fixadas")
  • Dribbble
  • Flickr
  • 500px

Essas são ótimas fontes de conjuntos de dados independentes + APIs públicas

O Flickr seria útil - enquanto o próprio site está definhando, sua API pública roubada o torna uma fonte útil para armazenar fotos para colocar em postagens e páginas de blog.

Vou trabalhar em toml-transformer .

Trabalhando em styled-jsx e uma sincronia de algolia

@ Vagr9K @timsuchanek incrível! Adicionou você à lista

Alguém está trabalhando no DatoCMS? Adoraria ver isso acontecer.

Alguém já está trabalhando em uma integração do Medium? Seria legal buscar as últimas postagens de um determinado blog.

@mfeltscher, você leu minha mente! Tenho a mesma necessidade, e comecei a pesquisar como poderíamos escrever um. Como a API do Medium é limitada nesse aspecto (afaik você não pode obter as postagens mais recentes de um blog), teríamos que raspar ou usar o feed rss de um blog. Comecei a escrever a fonte rss de propósito geral aqui: https://github.com/jondubin/gatsby-source-rss Contribuições / pensamentos bem-vindos!

@jondubin ei, você estaria interessado em adicionar o plugin de origem ao

Pensamentos?

@KyleAMathews não diga mais nada! Vou migrar assim que tiver a chance.

Olá, comecei a jogar com o Gatsby neste fim de semana. Parece legal! Quero construir um site pessoal e usar estilos glamourosos. A meu ver, ele não precisa de seu próprio plugin. Por usar glamour no fundo, só funciona quando você usa o plugin glamour. Estou esquecendo de algo?

@felixjung dunno! Quer tentar relatar de volta? Eu não usei o Glamorous ou pesquisei seu método SSR, então não sei se o plugin de glamour existente vai funcionar ou não

Funciona 😆 Olhando seus documentos, não consegui encontrar nada sobre SSR. Kent C. Dodds apenas escreveu que funciona porque o glamour e a reação o apóiam. Então, eu tentei e funciona quando você ativa o plugin glamour. 🎉

Bem, perfeito então :-) você deseja adicionar uma menção a ele no leia-me do plugin glamour e podemos verificar esse então 👍

Claro, posso fazer.

@jondubin +1 em relação às limitações da API Medium. Eu também tentei o modo RSS, apenas para descobrir que o feed também contém os comentários do usuário , que você pode contornar , mas… 🙄

Acho que vou trabalhar em um plugin de emoção

Olá, seria ótimo ter um plugin para Directus, já que é uma alternativa de código aberto para Contentful :)

@fk @jondubin Ao examinar esse problema, encontrei outra solução para buscar postagens do Medium, conforme descrito nesta postagem do blog : https://medium.com/@{username}/latest?format=json .

👋 Posso trabalhar no plugin gatsby-transformer-xml

aqui está o PR de gatsby-transformer-xml

O plugin de origem do

@fk @erutan wrt Flickr / 500px, Unsplash também seria ótimo.

Acredito que # 1496 resolveu "CSV" em "Plug-ins do Transformer".

Eu também recomendo adicionar XLSX a essa lista.

Comecei a trabalhar em um plugin de origem prismic.io aqui: https://github.com/angeloashmore/gatsby-source-prismic

É muito básico: puxa todos os documentos e disponibiliza todos os dados nos nós PrismicDocument.

As melhorias necessárias incluiriam a vinculação de documentos conforme necessário (idiomas alternativos, campos de vínculo relacional, ...).

Olá

Escrevemos um plugin de origem Médio que puxa JSON do endpoint mencionado por @mfeltscher. Abri um Pull Request aqui: # 1907

Espero que seja útil para outra pessoa também.

@deniaz Obrigado! Eu esqueci totalmente de seguir o comentário de @mfeltscher 😕, e agora estou um pouco perplexo com o motivo de nunca ter tentado esse endpoint. Parece que abandonei obedientemente as coisas ao ler " A página JSON não se destina a ser usada como uma API de leitura. "… 🤓 😅

Ei,
Eu escrevi um plugin de origem para Github API v4 , ou instalei usando npm install gatsby-source-github-api

Sinta-se à vontade para me dizer o que preciso mudar ou quais recursos você gostaria de ver implementados.

-
editar: Eu também terminei um site simples que mostra a utilidade deste plugin: Você pode encontrá-lo aqui

LaTeX e especialmente MathJax seriam ótimos!

@thomaskuntzz já está no ar! https://using-remark.gatsbyjs.org/katex/

Impressionante! Parece um ótimo ajuste para o que eu preciso!

Gostaria de saber por que KaTeX foi escolhido em vez de MathJax ... Alguma idéia?

Não tenho certeza, verifique o raciocínio no PR original. Você também adiciona outro plugin para MathJax. Mais plug-ins, melhor :-)

Ei, eu montei uma solução rápida para paginar uma lista de postagens e percebi que não há exemplos de paginação por aí.

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

Se isso se encaixa, posso escrever um post rápido explicando isso?

@pixelstew parece ótimo! Você quer extrair dessa biblioteca que as pessoas também possam usar? Algo como createPagninatedPages({ edges, pageLength=10, templatePath, createPage }) ou algo parecido.

Isso resolve um problema muito comum!

Adoraria uma postagem no blog sobre como usar a solução também.

@KyleAMathews - considere feito

Oi pessoal!

Posso trabalhar com o exemplo de site multilíngue?

Meu plugin gatsby-plugin-18n é uma boa solução? Que melhorias ele precisa?

Adoraria ajudar e receber feedback sobre a maneira certa de fazer as coisas.

Obrigado!

@KyleAMathews

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

Acabei de notar alguns erros horríveis no readme. Deixe-me saber se a API é simples o suficiente.

Olá @pixelstew

Você poderia adicionar o link do github ao seu package.json?
Na página npm, tive que ir ao seu perfil npm, depois ao perfil github e, em seguida, aos repositórios para encontrar o código-fonte.

Vou testar seu pacote com gatsby-plugin-i18n
Espero que funcione = D

@angeloocana - yep np

@pixelstew parece ótimo! Super simples de usar. A única coisa que vejo que falta é uma maneira de alterar o caminho padrão para as páginas. Por exemplo, para i18n ou para subseções do site, por exemplo, / blog / 1, / blog / 2 etc. Também provavelmente uma forma de dizer barras finais ou não.

Olá, @KyleAMathews , escrevi um plugin de código - boardId um por um.

Também estou construindo 2 sites de código aberto com ele. e uma postagem de blog / tutorial sobre todo o processo.
Felicidades
🍻

@Necmttn woah! Sempre quis um plugin fonte do Trello! Mal posso esperar para ler sobre isso! Você pode pular do tabuleiro para listas e cartas? Por exemplo, consultar uma placa e depois obter todas as informações da placa de uma de suas listas?

sim, definitivamente! :) isso seria algo como,

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

então existe uma relação entre node s com base no parent de
card.parent value = list.id
list.parent value = board.id
então basicamente .. você pode segmentar cartões relativamente list , quando 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>
      )
    })

hoje tentarei adicionar o transformador para card.desc que é a análise bruta do markdown com gatsby-transformer-remark.

e adicionar children relacionamento seria um bom PR. se alguém tiver um tempo eu agradeceria.

tudo bem, eu também adicionei relacionamento infantil e observação do transformador. nova versão funciona perfeitamente. aqui está o exemplo de consulta.

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

Acabei de ter a ideia de um plugin de origem baseado em faker.js - seria incrível para criar sites de exemplo!

@KyleAMathews - Vou atualizar a lib para que possa ser usada para paginar uma postagem.

Você ou qualquer outra pessoa pode descrever a forma como a postagem paginada pode ser estruturada?
No markdown, por exemplo - seria um index.md e alguns arquivos MD subsequentes para as outras 'páginas'?

Ou usando qualquer outra fonte de dados?

Acho que preciso saber como a resposta da API ficaria se eu quiser que seja uma coisa automatizada.

@pixelstew deve funcionar com qualquer fonte de dados. Só precisa de uma opção, eu acho, para adicionar um "prefixo" às páginas que está criando, por exemplo, "posts" ou "imagens" ou qualquer outra coisa.

@KyleAMathews - Sim, acho que sim - provavelmente estava complicando

Se eu deixar a entrada como qualquer array definido pelo usuário, a solução é simples.

Estou muito interessado em construir um site de exemplo de pesquisa ou paginação, já que atualmente estou trabalhando nesses recursos para meu próprio site.

Se não houver ninguém trabalhando nisso, é claro.

@Tallestthomas isso seria ótimo! @pixelstew Você ou outra pessoa já construiu um site de exemplo para o gatsby-paginate? Seria bom ter um hospedado aqui, pois é um caso de uso comum.

Na pesquisa - @bvaughn brincou bastante com as ideias de pesquisa. Brian - você empurrou algum código de amostra para algum lugar?

Eu empurrei alguns trabalhos em andamento hackeados aqui, mas não está pronto para ser compartilhado nem nada. Só estou trabalhando nisso aqui e ali, quando encontrar tempo.

Por acaso, alguém fez algum trabalho com o Zendesk ou o Greenhouse?

Olá a todos,

Eu criei uma biblioteca auxiliar para escritores de plugins de origem. Deve ajudar a reduzir alguns dos clichês necessários para os plug-ins de origem.

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

Comecei a usá-lo para um plug-in de origem do Shopify que estou escrevendo e descobri valor nele, então decidi compartilhá-lo. Por favor, deixe-me saber o que você pensa se você experimentar. Obrigado :)

@KyleAMathews Eu usei o plugin em meu próprio blog que estou feliz em clonar e hospedar aqui.

@angeloashmore isso é fantástico !!! Você poderia criar um link para ele na página de documentos do plugin de origem? https://www.gatsbyjs.org/docs/create-source-plugin/

@pixelstew gatsby-paginate?

@pixelstew alguma razão pela qual a licença é GPL no plugin gatsby-paginate?

Adoraria ver um plugin fonte para Craft CMS. Craft possui um plugin nativo que cria uma API JSON. https://github.com/craftcms/element-api/tree/v1 .

Para o ofício 3, há também um plugin de servidor GraphQL. https://github.com/markhuot/craftql

Esta biblioteca NPM é muito legal. Ele analisa uma página e cria os arquivos de fonte necessários apenas para os caracteres reais usados ​​nessa página para velocidade de carregamento ideal https://www.npmjs.com/package/subfont

Seria ótimo ter um plugin que fizesse isso para todas as páginas ou para páginas designadas de um site!

@KyleAMathews Eu me beneficiaria de uma integração do LaunchDarkly . Idealmente, ele suportaria sinalizadores de recursos SSR e runtime.

@ mickeyreiss-visor isso seria legal!

existe algum plugin Dribbble ?

@smakosh Não que eu saiba (pesquisou npm e GitHub) ... deseja criar um ?!

Vou dar uma chance!

sua API é tão ruim lol, em vez de me dizer qual parâmetro está faltando, sua resposta será como

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

Ok, consegui obter uma resposta, irei trabalhar no plugin esta noite!

@smakosh nice! Quer adicioná-lo à lista de plug-ins da comunidade? https://www.gatsbyjs.org/docs/plugins/#community -plugins

Olá, algum plano de adicionar suporte para asciidoc? :)

@vojtechruz Não, ninguém escreveu ainda! Sinta-se à vontade para assumir e contribuir com a comunidade!

Claro, ficarei feliz em :)

Alguém está trabalhando em um plugin de subfonte? Adoraria vê-lo em ação.

@alexparish Seria ótimo ver!

@alexparish isso seria incrível! Estava pensando em um para aquela outra noite! Meu pensamento era que, por padrão, as pessoas deveriam especificar quais páginas desejam, já que estou assumindo que o processo é muito caro. Seria legal conectar-se ao Google Analytics e aplicar automaticamente a ferramenta às 10 principais páginas de destino.

@KyleAMathews Acho que sei muito pouco sobre o processo de subfonte, mas fiquei impressionado com as credenciais de desempenho. Se você planejou experimentar este plugin, por favor, não me deixe impedi-lo - eu tenho muito pouco tempo disponível, então seria um processo lento de minha parte.

Ok, não tenho certeza quando terei tempo também, mas sim, tem muito potencial para melhorar o desempenho em sites com fontes personalizadas.

TBH, um plugin para subfonte é provavelmente um pouco exagerado, a menos que tenha alguma mágica, como a ideia de rodar apenas nas 10 páginas principais do analytics (que é uma ideia _awesome_). Para adicionar uma subfonte a um projeto, você pode apenas colocá-la no final de sua etapa de construção

gatsby build && subfont public -i

Outras idéias:

Idéia de plug-in:
Analise um arquivo de esboço para gerar automaticamente a documentação do componente ou a documentação do sistema de projeto com base na descrição do componente dentro do arquivo de esboço.

Como funciona:
Para analisar e ler o arquivo de esboço, precisamos de uma camada clara e uma estrutura de prancheta com algumas propriedades específicas. Por grupo de componentes que você deseja documentar, deve haver uma prancheta separada com uma camada de descrição ou um símbolo de informação. Esta camada precisa ter um nome especial. Podemos ler o conteúdo dessa camada e construir uma página em markdown com esse conteúdo.

Algumas ferramentas que podemos usar:
https://github.com/xaviervia/sketch2json
http://oscarotero.design/node-sketch/
https://gist.github.com/JoelBesada/fc20060741342e8a5f15208401e4308d

Uma ideia de plugin cloudinary:
mais informação

Vou trabalhar no transformador de pdf.

Vou trabalhar no plugin de origem do dynamodb.

@KyleAMathews Vou dividir isso em algumas questões para que seja um pouco mais acessível. Vou fechar isso assim que forem criados!

o resumo do problema tem

Drupal (há o início de um já no repo, mas há uma série de adições que seria ótimo fazer)

Existe uma lista em algum lugar das adições que você está perseguindo?

A lista de desejos da fonte ainda é válida no que podemos adicionar?

@KyleAMathews Eu tenho um pequeno utilitário de nó que uso para fixer-io e na verdade adoraria adicioná-lo como um plug-in que posso usar no gatsby, então basicamente faria um plug-in gatsby-fixer-io . Posso enviar um PR para isso já que eu mapeei isso no momento

@kenigbolo , tentamos apenas adicionar plugins realmente essenciais a este repositório. Adoraríamos que você publicasse seu plug-in no npm para que ele pudesse ser exibido na biblioteca de plug-ins! https://www.gatsbyjs.org/docs/submit-to-plugin-library/

@aroduribe não realmente. Muitas dessas coisas foram feitas. Se houver algum que pareça interessante, verifique novamente na biblioteca de plugins para ver se foi feito ou não. https://www.gatsbyjs.org/plugins/

Você também pode verificar https://github.com/gatsbyjs/gatsby/labels/status%3A%20help%20wanted para obter ajuda.

Outras maneiras de contribuir também podem ser encontradas em https://www.gatsbyjs.org/docs/how-to-contribute/

Desde sua aquisição pela Smugmug em abril, o Flickr parece estar passando por um pequeno renascimento. Como usuário de longa data do Flickr, estou realmente tentado a escrever um plugin de origem ...

O Flickr seria útil - enquanto o próprio site está definhando, sua API pública roubada o torna uma fonte útil para armazenar fotos para colocar em postagens e páginas de blog.

Curioso se alguém está procurando um plugin fonte do Notion ...

@dustinhorton Eu estava olhando para ele ontem. mas eles não têm uma API pública, então precisam usar placas públicas etc.

há um API SDK não oficial escrito em GO.
https://github.com/kjk/notionapi

deixe-me saber se você está disposto a escrever um. Eu posso contribuir também.

Escrevi gatsby-source-trello pelos mesmos motivos.

@Necmttn Sim,

Revendo os documentos e plug-ins atuais parece que tudo foi abordado. Fechando isso, qualquer novo pedido de plugin de origem pode ter um problema aberto. (Para sua informação: este é o problema em aberto mais antigo, então boa equipe por fazer tudo isso.)

Esta página foi útil?
0 / 5 - 0 avaliações