Gatsby: [1.0] Lista de deseos de complementos (y sitios de ejemplo)

Creado en 17 jun. 2017  ·  97Comentarios  ·  Fuente: gatsbyjs/gatsby

Hay muchos complementos que serían bastante fáciles de escribir y sería genial ingresar. Muchos simplemente estarían básicamente envolviendo un complemento de paquete web (por ejemplo, agregando soporte para un preprocesador de CSS) o una biblioteca NPM (por ejemplo, para el complemento de transformador) . Cuando crea un nuevo complemento, también debe crear un sitio de ejemplo complementario como una forma de demostrar cómo funciona el complemento y como una prueba de integración para el complemento.

Agregar complementos y sitios de ejemplo es fácil. Simplemente revise el repositorio de Gatsby y ejecute npm install en la raíz del repositorio. Luego ejecute npm run plop y elija crear un complemento o un sitio de ejemplo y luego siga las instrucciones para realizar la configuración inicial. Algunos de los complementos de la lista de deseos ya tienen códigos auxiliares en el repositorio.

Si desea intentar construir uno de estos, ¡simplemente deje un comentario para reclamarlo y comience a codificar! Además, esta lista no está completa. ¡No dudes en sugerir ideas y aceptarlas también!

Lista de deseos de complementos

CSS

  • [x] Menos
  • [x] Lápiz
  • [x] Afrodita (rastreada en https://github.com/gatsbyjs/gatsby/issues/8709)
  • [x] CXS (seguimiento en https://github.com/gatsbyjs/gatsby/issues/8710)
  • [x] Glamoroso
  • [x] JSS
  • [x] styled-jsx ( @timsuchanek trabajando en esto)

Complementos de transformadores

  • [x] CSV
  • [x] docx
  • [x] pdf (seguimiento en https://github.com/gatsbyjs/gatsby/issues/8711)
  • [x] xml
  • [x] asciidoc (registrado en https://github.com/gatsbyjs/gatsby/issues/8712)
  • [x] toml ( @ Vagr9K trabajando en esto)
  • [x] URL remotas (por ejemplo, una imagen de referencia se descargaría y luego se pondría a disposición como una imagen local).

Complementos de origen

Documentos sobre la escritura de complementos de fuentes https://www.gatsbyjs.org/docs/create-source-plugin/

  • [x] Trello
  • [x] Wordpress.com
  • [x] Drupal (ya está el inicio de uno en el repositorio, pero hay una serie de adiciones que sería genial hacer)
  • [x] Prismic
  • [x] DatoCMS
  • [x] Github
  • [x] Bases de datos SQL (rastreadas en https://github.com/gatsbyjs/gatsby/issues/8714)
  • [x] MongoDB
  • [x] DynamoDB
  • [x] Depósito de S3: consulta gatsby-source-s3
  • [x] Twitter
  • [x] Facebook
  • [] https://www.accedo.tv/appgrid/
  • [x] https://github.com/marak/Faker . ¡Sería genial, por ejemplo, sitios!

Sitios de ejemplo

Más allá de los sitios de ejemplo que muestran cómo usar los complementos anteriores, sería genial tener sitios de ejemplo que demuestren posibles formas de construir:

  • [x] Sitios en varios idiomas
  • [x] Buscar
  • [x] Paginación
  • [x] Casco de reacción
  • [x] Comentario (rebaja)
good first issue help wanted

Comentario más útil

Hola, sería genial tener un complemento para Directus, ya que es una alternativa de código abierto a Contentful :)

Todos 97 comentarios

  • Tweets y Gists en Markdown (ver jekyll-twitter-plugin )
  • figura / figcaption automágico para imágenes Markdown que necesitan un título y / o referencia a la fuente / licencia
  • KaTeX , MathJax (en Markdown) - también mientras buscaba en Google tropecé con jekyll-scholar , que "formatea sus bibliografías y listas de lectura para la web y le da a sus publicaciones de blog superpoderes de citación", ... así que supongo que BibTeX;)
  • generador de favicon: no es muy necesario (como ya existe http://realfavicongenerator.net/ y también puedo ver muchas razones para generar cada uno de ellos manualmente) pero es bastante fácil de implementar (aparte del icono SVG que macOS Safari quiere para sus "pestañas fijadas")
  • Regate
  • Flickr
  • 500px

Estas son excelentes fuentes de conjuntos de datos independientes + API públicas

Flickr sería útil: si bien el sitio en sí está languideciendo, su API pública robut lo convierte en una fuente útil para almacenar fotos y colocarlas en publicaciones y páginas de blogs.

Trabajaré en toml-transformer .

Trabajando en styled-jsx y un sincronizador de algolia

@ Vagr9K @timsuchanek ¡increíble! Te agregó a la lista

¿Alguien trabajando en DatoCMS? Me encantaría que eso sucediera.

¿Alguien ya está trabajando en una integración de Medium? Sería genial buscar las últimas publicaciones de un blog determinado.

@mfeltscher, ¡ me leíste la mente! Tengo la misma necesidad y comencé a buscar cómo podríamos escribir uno. Dado que la API de Medium es limitada en este sentido (afaik, no puede obtener las publicaciones más recientes de un blog), tendríamos que raspar o usar el feed rss de un blog. Comencé a escribir la fuente rss de propósito general aquí: https://github.com/jondubin/gatsby-source-rss ¡ Contribuciones / pensamientos bienvenidos!

@jondubin hey, ¿estaría interesado en agregar el complemento de origen al repositorio de Gatsby? Esto es un poco un experimento, pero creo que tener la mayoría de los complementos de la comunidad en el mismo repositorio ayudará a mantener la calidad del código del complemento mucho más alta, ya que habrá muchos más ojos en el código aquí y podemos seguir invirtiendo en cada vez mejor. probar la infraestructura para garantizar que todo funcione bien.

Pensamientos

@KyleAMathews ¡ no digas más! Migraré tan pronto como tenga la oportunidad.

Hola, comencé a jugar con Gatsby este fin de semana. ¡Se ve bien! Quiero construir un sitio web personal y usar glamour para los estilos. A mi modo de ver esto, no necesita su propio complemento. Debido a que usa glamour en segundo plano, funciona cuando usas el complemento glamour. ¿Me estoy perdiendo de algo?

@felixjung no sé! ¿Quiere intentar informar? No he usado Glamorous ni he investigado su método SSR, así que no sé si el complemento de glamour existente funcionará o no

Funciona 😆 Mirando sus documentos, no pude encontrar nada sobre SSR. Kent C. Dodds acaba de escribir que funciona porque el glamour y la reacción lo apoyan. Así que lo intenté y funciona cuando habilitas el complemento glamour. 🎉

Oh, bueno, perfecto entonces :-) quieres agregar una mención de eso luego al léame del complemento glamour y podemos marcar eso entonces 👍

Claro, puedo hacerlo.

@jondubin +1 con respecto a las limitaciones de la API media. También probé la forma RSS, solo para descubrir que el feed también contiene los comentarios del usuario , que puede evitar , pero ... 🙄

Creo que voy a trabajar en un complemento de emoción.

Hola, sería genial tener un complemento para Directus, ya que es una alternativa de código abierto a Contentful :)

@fk @jondubin Mientras investigaba este problema, encontré otra solución para buscar publicaciones de Medium como se describe en esta publicación de blog : https://medium.com/@{username}/latest?format=json .

👋 Puedo trabajar en el complemento gatsby-transformer-xml

aquí está el PR de gatsby-transformer-xml

El complemento fuente de

@fk @erutan wrt Flickr / 500px, Unsplash también sería genial.

Creo que # 1496 resolvió "CSV" en "Complementos de transformadores".

También recomendaría agregar XLSX a esa lista.

Comencé a trabajar en un complemento de fuente prismic.io aquí: https://github.com/angeloashmore/gatsby-source-prismic

Es muy básico: extrae todos los documentos y hace que todos los datos estén disponibles en los nodos de PrismicDocument.

Las mejoras necesarias incluirían la vinculación de documentos según sea necesario (idiomas alternativos, campos de vínculos relacionales,…).

Hola

Hemos escrito un complemento de fuente media que extrae JSON desde el punto final mencionado por @mfeltscher. Abrí una solicitud de extracción aquí: # 1907

Con suerte, también es útil para otra persona.

@deniaz ¡ Gracias! Me olvidé por completo de seguir el comentario de @mfeltscher 😕, y ahora estoy un poco desconcertado de por qué nunca probé ese punto final. Parece que abandoné obedientemente las cosas cuando leí " La página JSON no está diseñada para usarse como una API de lectura " ... 🤓 😅

Oye,
Escribí un complemento fuente para Github API v4 , o lo instalé usando npm install gatsby-source-github-api

No dudes en decirme qué necesito cambiar o qué funciones te gustaría que se implementaran.

-
editar: También terminé un sitio web simple que muestra la utilidad de este complemento: puedes encontrarlo aquí

¡LaTeX y especialmente MathJax serían geniales!

@thomaskuntzz ¡ ya está! https://using-remark.gatsbyjs.org/katex/

¡Increíble! ¡Parece un gran ajuste para lo que necesito!

Me pregunto por qué se eligió KaTeX sobre MathJax ... ¿Alguna idea?

No estoy seguro, consulte el PR original para conocer el razonamiento. También agrega otro complemento para MathJax. Más complementos, mejor :-)

Oye, he creado una solución rápida para paginar una lista de publicaciones y noté que no hay ejemplos de paginación.

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

Si eso se ajusta a los requisitos, ¿puedo escribir una publicación rápida que lo explique?

@pixelstew se ve genial! ¿Quieres extraer esa biblioteca que la gente también pueda usar? Algo como createPagninatedPages({ edges, pageLength=10, templatePath, createPage }) o algo así.

¡Eso resuelve un problema muy común!

También me encantaría una publicación de blog sobre el uso de la solución.

@KyleAMathews - considérelo hecho

¡Hola amigos!

¿Puedo trabajar con el ejemplo del sitio en varios idiomas?

¿Es mi complemento gatsby-plugin-18n una buena solución? ¿Qué mejoras necesita?

Me encantaría ayudar y recibir comentarios sobre la forma correcta de hacer las cosas.

¡Gracias!

@KyleAMathews

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

Acabo de notar algunos errores horribles en el archivo Léame. Avísame si la API es lo suficientemente sencilla.

Hola @pixelstew

¿Podría agregar el enlace de github a su package.json?
En la página de npm tuve que ir a su perfil de npm, luego al perfil de github, luego a los repositorios para encontrar el código fuente.

Voy a probar tu paquete con gatsby-plugin-i18n
Espero que funcione = D

@angeloocana - sí np

@pixelstew se ve genial! Muy sencillo de usar. Lo único que veo que falta es una forma de cambiar la ruta predeterminada de las páginas. Por ejemplo, para i18n o para subsecciones del sitio, por ejemplo, / blog / 1, / blog / 2, etc. También probablemente sea una forma de decir barras al final o no.

Hola, @KyleAMathews Escribí un complemento de origen para Trello que funciona en base a la identificación del equipo. que es mejor que ingresar boardId uno por uno.

También estoy construyendo 2 sitios web de código abierto con él. y una publicación de blog / tutorial sobre todos los procesos.
salud
🍻

@Necmttn ¡woah! ¡Siempre he querido un complemento de fuente de Trello! ¡No puedo esperar para leer sobre esto! ¿Puedes saltar del tablero a las listas y a las cartas? Por ejemplo, ¿consultar un tablero y luego tomar toda la información de la tarjeta de una de sus listas?

¡Sí, definitivamente! :) eso sería algo como,

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

así que hay una relación entre node s base en parent valor.
card.parent valor = list.id
list.parent valor = board.id
entonces básicamente ... puedes segmentar las tarjetas relativamente list , cuando 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>
      )
    })

hoy intentaré agregar un transformador por card.desc que es un análisis sin formato de rebajas con gatsby-transformer-remark.

y agregar la relación children sería un buen PR. si alguien tiene un tiempo lo agradecería.

bien, también agregué relación infantil y comentario transformador. la nueva versión funciona como un encanto. aquí está la consulta de ejemplo.

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

Acabo de tener la idea de un complemento fuente basado en

@KyleAMathews : voy a actualizar la biblioteca para que pueda usarse para paginar una publicación.

¿Puede usted o alguien más describir la forma en que se podría estructurar la publicación paginada?
En rebaja para, por ejemplo, ¿sería un index.md y luego algunos archivos md posteriores para las otras 'páginas'?

¿O usando cualquier otra fuente de datos?

Supongo que necesito saber cómo se vería la respuesta de la API si quiero que esto sea algo automatizado.

@pixelstew debería funcionar con cualquier fuente de datos. Creo que solo necesita una opción para agregar un "prefijo" a las páginas que está creando, por ejemplo, "publicaciones" o "imágenes" o lo que sea.

@KyleAMathews - Sí, supongo que sí, probablemente lo estaba complicando

Si dejo la entrada como cualquier matriz definida por el usuario, la solución es simple.

Estoy bastante interesado en construir un sitio de ejemplo de búsqueda o paginación, ya que actualmente estoy trabajando en estas funciones para mi propio sitio.

Si no hay nadie trabajando en estos ya, por supuesto.

@Tallestthomas ¡Eso sería genial! @pixelstew, ¿tú o alguien más ha creado un sitio de ejemplo para gatsby-paginate? Sería bueno tener uno alojado aquí, ya que es un caso de uso común.

En la búsqueda: @bvaughn ha jugado bastante con las ideas de búsqueda. Brian, ¿pusiste algo de tu código de muestra en alguna parte?

Publiqué un trabajo en progreso pirateado aquí, pero no está listo para ser compartido ni nada. Trabajando aquí y allá, cuando encuentro tiempo.

¿Alguien ha trabajado con Zendesk o Greenhouse?

Hola a todos,

Creé una biblioteca auxiliar para los escritores de complementos fuente. Debería ayudar a reducir parte del texto estándar necesario para los complementos de origen.

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

Comencé a usarlo para un complemento de origen de Shopify que estoy escribiendo y encontré valor en él, así que pensé que lo compartiría. Hágame saber lo que piensa si lo prueba. Gracias :)

@KyleAMathews He usado el complemento en mi propio blog que estoy feliz de clonar y alojar aquí.

@angeloashmore esto es fantástico !!! ¿Podría vincularlo desde la página de documentos del complemento de origen? https://www.gatsbyjs.org/docs/create-source-plugin/

@pixelstew gatsby-

@pixelstew ¿ alguna razón por la que la licencia es GPL en el complemento gatsby-paginate?

Me encantaría ver un complemento fuente para Craft CMS. Craft tiene un complemento nativo que crea una API JSON. https://github.com/craftcms/element-api/tree/v1 .

Para Craft 3 también hay un complemento de servidor GraphQL. https://github.com/markhuot/craftql

Esta biblioteca de NPM es bastante dulce. Analiza una página y crea los archivos de fuentes necesarios solo para los caracteres reales utilizados en esa página para una velocidad de carga óptima https://www.npmjs.com/package/subfont

¡Sería genial tener un complemento que hiciera eso para todas las páginas designadas en un sitio!

@KyleAMathews Me beneficiaría de una integración LaunchDarkly . Idealmente, sería compatible con los indicadores de funciones SSR y de tiempo de ejecución.

@ mickeyreiss-visor ¡sería genial!

¿Hay algún complemento Dribbble ?

@smakosh No que yo sepa (busqué en npm y GitHub) ... ¡¿quieres crear uno ?!

¡Lo probaré!

su API es tan mala lol, en lugar de decirme qué parámetro falta, su respuesta es como

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

Okey, logré obtener una respuesta, ¡trabajaré en el complemento esta noche!

@smakosh agradable! ¿Quieres agregarlo a la lista de complementos de la comunidad? https://www.gatsbyjs.org/docs/plugins/#community -plugins

Hola, ¿algún plan para agregar soporte para asciidoc? :)

@vojtechruz ¡Nadie ha escrito uno todavía! ¡Siéntete libre de asumirlo y contribuir a la comunidad!

Claro, estaré feliz de :)

¿Alguien está trabajando en un complemento de subfuente? Me encantaría verlo en acción.

@alexparish ¡Sería genial verlo!

@alexparish ¡ sería genial! ¡Estaba pensando en uno para eso la otra noche! Mi pensamiento fue que, por defecto, las personas deberían tener que especificar qué páginas quieren, ya que supongo que el proceso es bastante caro. Sería genial conectarse a Google Analytics y aplicar automáticamente la herramienta a las 10 principales páginas de destino.

@KyleAMathews Me temo que sé muy poco sobre el proceso de subfuentes, pero quedé impresionado con las credenciales de perf. Si habías planeado probar este complemento, no dejes que te detenga, tengo muy poco tiempo disponible, por lo que sería lento ir de mi lado.

Ok, no estoy seguro de cuándo tendré tiempo también, pero sí, tiene mucho potencial para mejorar el rendimiento en sitios con fuentes personalizadas.

TBH, un complemento para subfuente es probablemente un poco exagerado, a menos que tenga algo de magia, como la idea de ejecutarse solo en las 10 páginas principales de análisis (que es una idea _ asombrosa_). Para agregar una subfuente a un proyecto, puede agregarla al final de su paso de compilación

gatsby build && subfont public -i

Otro par de ideas:

Idea de complemento:
Analice un archivo de boceto para generar automáticamente la documentación del componente o la documentación del sistema de diseño según la descripción del componente dentro del archivo de boceto.

Como funciona:
Para analizar y leer el archivo de boceto, necesitamos una capa clara y una estructura de mesa de trabajo con algunas propiedades específicas. Por grupo de componentes que desee documentar, debe haber una mesa de trabajo separada con una capa de descripción o un símbolo de información. Esta capa debe tener un nombre especial. Podemos leer el contenido de esa capa y construir una página con descuento con ese contenido.

Algunas herramientas que podemos utilizar:
https://github.com/xaviervia/sketch2json
http://oscarotero.design/node-sketch/
https://gist.github.com/JoelBesada/fc20060741342e8a5f15208401e4308d

Una idea de complemento de cloudinary:
mas info

Trabajaré en pdf-transformer.

Trabajaré en el complemento fuente dynamodb.

@KyleAMathews Voy a dividir esto en algunos números para que sea un poco más accesible. ¡Cerraré esto una vez que estén creados!

el resumen del problema tiene

Drupal (ya está el inicio de uno en el repositorio, pero hay una serie de adiciones que sería genial hacer)

¿Hay alguna lista de las adiciones que estás buscando?

¿La lista de deseos de origen sigue siendo válida en lo que podemos agregar?

@KyleAMathews Tengo una pequeña utilidad de nodo que uso para fixer-io y en realidad me encantaría agregar esto como un complemento que puedo usar en gatsby, así que básicamente estaría haciendo un complemento gatsby-fixer-io . ¿Está bien enviar un PR para esto ya que lo tengo planeado en este momento?

@kenigbolo intentamos agregar solo complementos realmente centrales a este repositorio. ¡Nos encantaría que publiques tu complemento en npm tú mismo para que pueda aparecer en la biblioteca de complementos! https://www.gatsbyjs.org/docs/submit-to-plugin-library/

@aroduribe no realmente. Se han hecho muchas de estas cosas. Si hay uno que parece interesante, verifique dos veces con la biblioteca de complementos para ver si se ha hecho o no. https://www.gatsbyjs.org/plugins/

También puede consultar https://github.com/gatsbyjs/gatsby/labels/status%3A%20help%20wanted para trabajar para ayudar.

También se pueden encontrar otras formas de contribuir en https://www.gatsbyjs.org/docs/how-to-contribute/

Desde su adquisición por Smugmug en abril, Flickr parece estar pasando por un pequeño renacimiento. Como usuario de Flickr desde hace mucho tiempo, estoy realmente tentado de intentar escribir un complemento fuente ...

Flickr sería útil: si bien el sitio en sí está languideciendo, su API pública robut lo convierte en una fuente útil para almacenar fotos y colocarlas en publicaciones y páginas de blogs.

Es curioso si alguien está investigando un complemento fuente de Notion ...

@dustinhorton Lo estaba viendo ayer. pero no tienen una API pública, por lo que deben usar tableros públicos, etc.

hay un SDK de API no oficial escrito en GO.
https://github.com/kjk/notionapi

avíseme si está dispuesto a escribir uno. Yo también podría contribuir.

He escrito gatsby-source-trello por las mismas razones.

@Necmttn Sí, me topé con eso después de buscar un complemento fuente de Gatsby. El público satisfaría bien mis necesidades, pero solo tengo un pequeño caso de uso, por lo que temo que no puedo permitirme dedicar el tiempo que tomaría. Echaré un vistazo a su complemento de Trello para comenzar a tener una idea de lo que podría implicar: gracias o vinculación.

La revisión de los documentos y complementos actuales parece que se ha cubierto todo en esto. Al cerrar esto, cualquier nueva solicitud de complemento de origen puede tener un problema abierto. (Para su información: este es el problema abierto más antiguo, así que ¡hurra equipo por hacer todo esto!)

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

theduke picture theduke  ·  3Comentarios

timbrandin picture timbrandin  ·  3Comentarios

kalinchernev picture kalinchernev  ·  3Comentarios

benstr picture benstr  ·  3Comentarios

dustinhorton picture dustinhorton  ·  3Comentarios