Gatsby: [1.0] Liste de souhaits des plugins (et exemples de sites)

• Tweets et Gists dans Markdown (voir jekyll-twitter-plugin )
• figure / légende automatique pour les images Markdown nécessitant une légende et / ou une référence à la source / licence
• KaTeX , MathJax (dans Markdown) - également en cherchant sur Google, jekyll-scholar , qui "met en forme vos bibliographies et listes de lecture pour le Web et donne à vos articles de blog des citations de super-pouvoirs", ... donc je suppose que BibTeX;)
• générateur de favicon - pas super nécessaire (car il y a déjà http://realfavicongenerator.net/ et je peux également voir beaucoup de raisons pour générer chacun d'eux manuellement) mais assez facile à implémenter (à part cette icône SVG que macOS Safari veut pour ses "onglets épinglés")
• Dribble
• Flickr
• 500px

Ce sont d'excellentes sources d'ensembles de données autonomes + API publiques

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

Flickr serait utile - alors que le site lui-même languit, son API publique robut en fait une source utile pour stocker des photos à insérer dans des articles et des pages de blog.

Je vais travailler sur toml-transformer .

Travailler sur styled-jsx et un syncer algolia

@ Vagr9K @timsuchanek génial! Vous a ajouté à la liste

Quelqu'un travaille sur DatoCMS? J'adorerais voir cela se produire.

Y a-t-il quelqu'un qui travaille déjà sur une intégration Medium? Ce serait cool de récupérer les derniers articles d'un blog donné.

@mfeltscher vous lisez dans mes pensées! J'ai le même besoin et j'ai commencé à chercher comment nous pourrions en écrire un. Étant donné que l'API Medium est limitée à cet égard (vous ne pouvez pas obtenir les articles les plus récents d'un blog), nous devrons soit gratter, soit utiliser le flux rss d'un blog. J'ai commencé à écrire la source rss à usage général ici: https://github.com/jondubin/gatsby-source-rss Contributions / pensées bienvenus!

@jondubin hey seriez-vous intéressé par l'ajout du plugin source au repo Gatsby? C'est un peu une expérience, mais je pense qu'avoir la plupart des plugins communautaires dans le même repo aidera à maintenir la qualité du code des plugins beaucoup plus élevée car il y aura beaucoup plus de globes oculaires sur le code ici et nous pouvons continuer à investir dans de mieux en mieux tester l'infrastructure pour s'assurer que tout fonctionne bien.

Pensées?

@KyleAMathews n'en dis pas plus! Je migrerai dès que j'en aurai l'occasion.

Salut, j'ai commencé à jouer avec Gatsby ce week-end. Ça a l'air cool! Je veux créer un site Web personnel et utiliser des styles glamour. À mon avis, il n'a pas besoin de son propre plugin. Parce qu'il utilise le glamour en arrière-plan, cela fonctionne lorsque vous utilisez le plugin glamour. Est-ce que je manque quelque chose?

@felixjung sais pas! Voulez-vous essayer de faire un rapport? Je n'ai pas utilisé Glamorous ou recherché sa méthode SSR, donc je ne sais pas si le plugin glamour existant fonctionnera ou non

Cela fonctionne 😆 En regardant sa documentation, je n'ai rien trouvé à propos de SSR. Kent C. Dodds vient d'écrire cela fonctionne parce que le glamour et la réaction le soutiennent. J'ai donc essayé et cela fonctionne lorsque vous activez le plugin glamour. 🎉

Oh bien parfait alors :-) vous voulez en ajouter une mention dans le readme du plugin glamour et nous pouvons vérifier celui-là alors 👍

Bien sûr, je peux le faire.

@jondubin +1 concernant les limitations de l'API Medium. J'ai également essayé la méthode RSS, pour découvrir que le flux contient également les commentaires de l' contourner , mais… 🙄

Je pense que je vais travailler sur un plugin d' émotion

Salut, ce serait génial d'avoir un plugin pour Directus car c'est une alternative open source à Contentful :)

@fk @jondubin En examinant ce problème, j'ai trouvé une autre solution pour récupérer les articles de Medium comme décrit dans ce billet de blog : https://medium.com/@{username}/latest?format=json .

👋 Je peux travailler sur le plugin gatsby-transformer-xml

voici le PR pour gatsby-transformer-xml

Le plugin source

@fk @erutan par rapport à Flickr / 500px, Unsplash serait également génial.

Je crois que # 1496 a résolu "CSV" sous "Transformer plugins".

Je recommanderais également d'ajouter XLSX à cette liste.

J'ai commencé à travailler sur un plugin source prismic.io ici: https://github.com/angeloashmore/gatsby-source-prismic

C'est très basique: extrait tous les documents et rend toutes les données disponibles sur les nœuds PrismicDocument.

Les améliorations nécessaires comprendraient la liaison des documents selon les besoins (langues alternatives, champs de liens relationnels,…).

héy

Nous avons écrit un plugin source Medium qui extrait JSON du point de terminaison mentionné par @mfeltscher. J'ai ouvert une Pull Request ici: # 1907

Espérons que cela soit également utile pour quelqu'un d'autre.

@deniaz Merci! J'ai totalement oublié de suivre le commentaire de @mfeltscher 😕, et maintenant je suis un peu déconcerté par la raison pour laquelle je n'ai jamais essayé ce point de terminaison moi-même. On dirait que j'ai docilement abandonné des choses en lisant " La page JSON n'est pas destinée à être utilisée comme une API de lecture. "… 🤓 😅

Hey,
J'ai écrit un plugin source pour l' API Github v4 , ou je l'ai installé en utilisant npm install gatsby-source-github-api

N'hésitez pas à me dire ce que je dois changer ou quelles fonctionnalités vous souhaiteriez voir implémentées.

-
edit: j'ai aussi terminé un simple site web qui met en valeur l'utilité de ce plugin: vous pouvez le trouver ici

LaTeX et surtout MathJax serait génial!

@thomaskuntzz c'est maintenant! https://using-remark.gatsbyjs.org/katex/

Impressionnant! Cela me convient parfaitement!

Je me demande juste pourquoi KaTeX a été choisi plutôt que MathJax ... Une idée?

Pas sûr, vérifiez sur le PR original pour le raisonnement. Vous ajoutez également un autre plugin pour MathJax. Plus de plugins le plus fous :-)

Hé, j'ai mis en place une solution rapide pour paginer une liste de messages et j'ai remarqué qu'il n'y a pas d'exemples de pagination autour.

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

Si cela correspond à la facture, je peux écrire un message rapide pour l'expliquer?

@pixelstew est superbe! Vous voulez en extraire une bibliothèque que les gens peuvent également utiliser? Quelque chose comme createPagninatedPages({ edges, pageLength=10, templatePath, createPage }) ou quelque chose comme ça.

Cela résout un problème très courant!

J'adorerais également un article de blog sur l'utilisation de la solution.

@KyleAMathews - considérez-le comme fait

Salut les gens!

Puis-je travailler avec l'exemple de site multilingue?

Mon plugin gatsby-plugin-18n est-il une bonne solution? De quelles améliorations a-t-il besoin?

J'adorerais aider et recevoir des commentaires sur la bonne façon de faire les choses.

Merci!

@KyleAMathews

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

Je viens de remarquer des erreurs horribles dans le fichier readme. Faites-moi savoir si l'API est assez simple.

Salut @pixelstew

Pourriez-vous ajouter le lien github à votre package.json?
Dans la page npm, je devais accéder à votre profil npm, puis au profil github, puis aux référentiels afin de trouver le code source.

Je vais tester votre package avec gatsby-plugin-i18n
J'espère que ça marche = D

@angeloocana -

@pixelstew est superbe! Utilisation très simple. La seule chose qui me manque, c'est un moyen de changer le chemin par défaut des pages. Par exemple pour i18n ou pour des sous-sections du site, par exemple / blog / 1, / blog / 2 etc. Probablement aussi une façon de dire des barres obliques ou non.

Salut, @KyleAMathews J'ai écrit un plugin Source pour Trello qui fonctionne sur la base de l'identifiant d'équipe. ce qui est mieux que de saisir les boardId un par un.

Je construis également 2 sites Web openSource avec. et un article de blog / tutoriel sur tous les processus.
à votre santé
🍻

@Necmttn woah! J'ai toujours voulu un plugin source Trello! J'ai hâte d'en savoir plus! Pouvez-vous passer du tableau aux listes en passant par les cartes? Par exemple, recherchez un tableau, puis récupérez toutes les informations de la carte dans l'une de ses listes?

Ouais absolument! :) ce serait quelque chose comme,

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

il y a donc une relation entre node s base sur la parent .
card.parent valeur = list.id
list.parent valeur = board.id
alors en gros .. vous pouvez segmenter les cartes relativement list , quand vous 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>
      )
    })

aujourd'hui, je vais essayer d'ajouter un transformateur pour card.desc qui est une analyse brute de démarque avec gatsby-transformer-remark.

et ajouter children relation

d'accord, j'ai également ajouté la relation avec les enfants et la remarque du transformateur. la nouvelle version fonctionne comme un charme. voici l'exemple de requête.

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

J'ai juste eu l'idée d'un plugin source basé sur faker.js - ce serait incroyable pour créer des exemples de sites!

@KyleAMathews - Je vais mettre à jour la bibliothèque afin qu'elle puisse être utilisée pour paginer un article.

Pouvez-vous ou quelqu'un d'autre décrire la façon dont l'article paginé pourrait être structuré?
Dans le démarquage pour par exemple - serait-ce un index.md et ensuite quelques fichiers md suivants pour les autres 'pages'?

Ou en utilisant une autre source de données?

Je suppose que j'ai besoin de savoir à quoi pourrait ressembler la réponse de l'API si je veux que ce soit une chose automatisée.

@pixelstew il devrait fonctionner avec n'importe quelle source de données. Il a juste besoin d'une option, je pense, pour ajouter un "préfixe" aux pages qu'il crée, par exemple "messages" ou "images" ou autre.

@KyleAMathews - Ouais je suppose que oui - je compliquais probablement trop. Je pensais passer un tableau de tous les messages, détecter s'il y avait des messages `` multi-pages '' dans le tableau, puis rendre conditionnellement ceux avec une URL préfixée comme vous le dites.

Si je laisse l'entrée comme n'importe quel tableau défini par l'utilisateur, la solution est simple.

Je suis assez intéressé par la création d'un site d'exemple de recherche ou d'une pagination, car je travaille actuellement sur ces fonctionnalités pour mon propre site.

S'il n'y a déjà personne qui travaille dessus, bien sûr.

@Tallestthomas ce serait génial! @pixelstew est-ce que vous ou quelqu'un d'autre avez déjà construit un site d'exemple pour gatsby-paginate? Ce serait bien d'en avoir un hébergé ici car c'est un cas d'utilisation courant.

Sur la recherche - @bvaughn a

J'ai poussé des travaux en cours piratés ici mais ce n'est pas du tout prêt à être partagé ou quoi que ce soit. J'y travaille juste ici et là, quand j'en trouve le temps.

Quelqu'un travaille-t-il avec Zendesk ou Greenhouse?

Salut tout le monde,

J'ai créé une bibliothèque d'aide pour les auteurs de plugins source. Cela devrait aider à réduire une partie du passe-partout nécessaire pour les plugins source.

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

J'ai commencé à l'utiliser pour un plugin source Shopify que j'écris et j'y ai trouvé de la valeur, alors j'ai pensé que je le partagerais. S'il vous plaît laissez-moi savoir ce que vous pensez si vous l'essayez. Merci :)

@KyleAMathews J'ai utilisé le plugin sur mon propre blog que je suis heureux de cloner et d'héberger ici.

@angeloashmore c'est fantastique !!! Pourriez-vous créer un lien vers celui-ci depuis la page de documentation du plugin source? https://www.gatsbyjs.org/docs/create-source-plugin/

@pixelstew gatsby-paginate?

@pixelstew une raison pour laquelle la licence est GPL sur le plugin gatsby-paginate?

J'adorerais voir un plugin source pour Craft CMS. Craft a un plugin natif qui crée une API JSON. https://github.com/craftcms/element-api/tree/v1 .

Pour craft 3, il existe également un plugin de serveur GraphQL. https://github.com/markhuot/craftql

Cette bibliothèque NPM est plutôt sympa. Il analyse une page et crée les fichiers de polices nécessaires uniquement pour les caractères réels utilisés sur cette page pour une vitesse de chargement optimale https://www.npmjs.com/package/subfont

Ce serait bien d'avoir un plugin qui le ferait pour toutes les pages ou pour les pages désignées d'un site!

@KyleAMathews Je bénéficierais d'une intégration LaunchDarkly . Idéalement, il prendrait en charge les indicateurs de fonctionnalité SSR et d'exécution.

@ mickeyreiss-visor ce serait cool!

existe-t-il un plugin Dribbble ?

@smakosh Pas que je sache (recherché npm et GitHub)… vous voulez en créer un?!

Je vais essayer!

leur API est si mauvaise lol, au lieu de me dire quel paramètre manque, leur réponse est comme

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

Okey j'ai réussi à obtenir une réponse, travaillera sur le plugin ce soir!

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

@smakosh sympa! Vous voulez l'ajouter à la liste des plugins de la communauté? https://www.gatsbyjs.org/docs/plugins/#community -plugins

Je viens d'ouvrir un PR https://github.com/gatsbyjs/gatsby/pull/4086

Kit de démarrage: https://github.com/smakosh/gatsby-source-dribbble-example

Salut, des plans pour ajouter la prise en charge d'asciidoc? :)

@vojtechruz Je n'ai encore écrit personne! N'hésitez pas à le reprendre et à le redonner à la communauté!

Bien sûr, je serai heureux de :)

Quelqu'un travaille sur un plugin de sous-police? J'adorerais le voir en action.

@alexparish Ce serait génial à voir!

@alexparish ce serait génial! Je pensais juste à un pour ça l'autre soir! Ma pensée était par défaut que les gens devraient spécifier quelles pages ils veulent car je suppose que le processus est assez cher? Ce serait cool de se connecter à Google Analytics et d'appliquer automatiquement l'outil aux 10 principales pages de destination.

@KyleAMathews J'ai bien peur de connaître très peu le processus de sous-police, mais j'ai été impressionné par les informations d'identification de perf. Si vous aviez prévu d'essayer ce plugin, ne me laissez pas vous arrêter - je dispose de très peu de temps, donc ce serait lent de mon côté.

Ok, je ne sais pas quand j'aurai le temps aussi mais oui, cela a beaucoup de potentiel pour améliorer les performances sur les sites avec des polices personnalisées.

TBH un plugin pour subfont est probablement un peu exagéré, à moins qu'il n'ait un peu de magie comme l'idée de ne fonctionner que sur les 10 premières pages de l'analyse (ce qui est une idée géniale). Pour ajouter une sous-police à un projet, vous pouvez simplement l'ajouter à la fin de votre étape de construction

gatsby build && subfont public -i

Un autre couple d'idées:

• Intégration de Google Lighthouse - cela devrait fonctionner sur des sites construits, pas sur des sites de développement

• Plugin First Input Delay - consultez l' article décrivant le FID

Idée de plugin:
Analysez un fichier d' esquisse pour générer automatiquement la documentation des composants ou la documentation du système de conception en fonction de la description des composants dans le fichier d'esquisse.

Comment ça marche:
Pour analyser et lire le fichier d'esquisse, nous avons besoin d'une structure de calque et de plan de travail claire avec des propriétés spécifiques. Pour chaque groupe de composants que vous souhaitez documenter, il doit y avoir un plan de travail séparé avec une couche de description ou un symbole d'information. Cette couche doit avoir un nom spécial. Nous pouvons lire le contenu de cette couche et créer une page en démarque avec ce contenu.

Quelques outils que nous pouvons utiliser:
https://github.com/xaviervia/sketch2json
http://oscarotero.design/node-sketch/
https://gist.github.com/JoelBesada/fc20060741342e8a5f15208401e4308d

Une idée de plugin cloudinary:
plus d' info

Je vais travailler sur pdf-transformer.

Je vais travailler sur le plugin source dynamodb.

@KyleAMathews Je vais diviser cela en quelques problèmes, donc c'est un peu plus accessible. Je clôturerai ceci une fois qu'ils seront créés!

le résumé du problème a

Drupal (il y en a déjà un dans le repo mais il y a un certain nombre d'ajouts qui seraient super à faire)

Y a-t-il une liste quelque part des ajouts que vous recherchez?

La wishlist source est-elle toujours valable sur ce que nous pouvons ajouter?

@KyleAMathews J'ai un petit utilitaire de nœuds que j'utilise pour fixer-io et j'aimerais vraiment l'ajouter en tant que plugin que je peux utiliser dans gatsby, donc en gros, je créerais un plugin gatsby-fixer-io . Est-il acceptable de soumettre déjà un PR pour cela car je l'ai tracé pour le moment

@kenigbolo, nous essayons de n'ajouter que des plugins vraiment essentiels à ce dépôt. Nous aimerions que vous publiiez vous-même votre plugin sur npm afin qu'il puisse apparaître dans la bibliothèque de plugins! https://www.gatsbyjs.org/docs/submit-to-plugin-library/

@aroduribe pas vraiment. Beaucoup de ces choses ont été faites. S'il y en a un qui semble intéressant, vérifiez à nouveau avec la bibliothèque de plugins pour voir si cela a été fait ou non. https://www.gatsbyjs.org/plugins/

Vous pouvez également consulter https://github.com/gatsbyjs/gatsby/labels/status%3A%20help%20wanted pour travailler pour vous aider.

D'autres moyens de contribuer peuvent également être trouvés sur https://www.gatsbyjs.org/docs/how-to-contribute/

Depuis son acquisition par Smugmug en avril, Flickr semble traverser une petite renaissance. En tant qu'utilisateur de longue date de Flickr, je suis vraiment tenté d'écrire un plugin source ...

Flickr serait utile - alors que le site lui-même languit, son API publique robut en fait une source utile pour stocker des photos à insérer dans des articles et des pages de blog.

Curieux de savoir si quelqu'un a cherché dans un plugin source Notion …

@dustinhorton Je le regardais hier. mais ils n'ont pas d'API publique, ils doivent donc utiliser des tableaux publics, etc.

il existe un SDK API non officiel écrit en GO.
https://github.com/kjk/notionapi

faites-moi savoir si vous êtes prêt à en écrire un. Je pourrais aussi contribuer.

J'ai écrit gatsby-source-trello pour les mêmes raisons.

@Necmttn Ouais, je suis tombé dessus après avoir recherché un plugin source Gatsby. Le public répondrait parfaitement à mes besoins, mais je n'ai qu'un seul petit cas d'utilisation si peur que je ne peux pas me permettre de consacrer le temps qu'il faudrait. Je vais jeter un œil sur votre plugin Trello pour commencer à avoir une idée de ce que cela pourrait impliquer - merci ou lien.

J'ai construit cette fam: https://github.com/wmlutz/gatsby-source-dynamodb

L'examen de la documentation et des plugins actuels semble que tout a été couvert. En fermant cela, toute nouvelle demande de plugin source peut avoir un problème ouvert. (Pour info: c'est le plus ancien problème en suspens, donc équipe pour avoir tout fait.)