Gatsby Step 2.1 - Plugins

Nello step 2 abbiamo fatto una breve panoramica sui plugins di Gatsby, adesso faremo una lista più esaustiva.

Plugins Principali

• gatsby-source-filesystem - trasforma il filesystem in un database GraphQL
• gatsby-image - ottimizza le immagini
• gatsby-plugin-mdx - per scrivere JSX in MarkDown
• gatsby-plugin-sitemap - crea la sitemap
• gatsby-plugin-react-helmet - gestisce i Meta per il SEO
• gatsby-plugin-offline - rende navigabile il sito anche offline

gatsby-source-filesystem

gatsby-source-filesystem è un plugin fondamentale in Gatsby, trasforma il filesystem in un database GraphQL.

Crea nodi File che altri plugins possono trasformare.

Ad esempio i plugins gatsby-transformer-json e gatsby-plugin-mdx trasformano rispettivamente i file .json e quelli .md ed .mdx in nodi JSON e nodi MDX che è possibile interrogare come se fossero in un database e creare con essi le pagine del sito.

gatsby-image

gatsby-image è un componente react per immagini ottimizzate, usa gatsby-plugin-sharp per creare i vari formati di immagine richiesti tramite la libreria Sharp.

Inoltre gatsby-transformer-sharp rende disponibili queste elaborazioni come se fossero una richiesta al database GraphQL.

gatsby-plugin-mdx

gatsby-plugin-mdx consente di scrivere JSX all'interno di files MarkDown.

gatsby-plugin-mdx-embed consente di incorporare facilmente filmati YouTube, post di Twitter, TikTok, tavole di Airtable e tanto altro.

Ci sono tanti altri plugins disponibili per il mondo MDX e MarkDown, tutti quelli di Remark e Rehype sono infatti disponibili.

gatsby-plugin-sitemap

gatsby-plugin-sitemap è il plugin ufficiale per creare la sitemap del nostro sito.

gatsby-plugin-react-helmet

gatsby-plugin-react-helmet è un plugin fondamentale per il SEO aggiungendo le funzionalità del componente React Helmet che ci consente di controllare l'intestazione della pagina e quindi cose come titolo, meta attributi, ecc.

gatsby-plugin-offline

gatsby-plugin-offline rende disponibile il nostro sito anche offline come se fosse una App.

Source Plugins

Questi plugins aggiungono elementi al database GraphQL:

• gatsby-source-wordpress - gestisce i contenuti con WordPress
• gatsby-source-drupal - gestisce i contenuti con Drupal
• gatsby-source-airtable - gestisce i contenuti con Airtable
• gatsby-source-shopify - recupera dati tramite le API di Shopify
• gatsby-source-stripe - recupera dati tramite le API di Stripe

Credo che esista un plugin per ogni CMS e se un CMS non ha un plugin Gatsby o è il momento di crearlo o di cambiare CMS.

Transformer Plugins

Questi plugins trasformano il contenuto del database GrapQL:

• gatsby-transformer-yaml-full - aggiunge il supporto per il formato YAML

Plugins per CSS & UI

• gatsby-plugin-emotion - aggiunge la libreria Emotion per il css-in-js e styled components
• gatsby-plugin-typography - aggiunge la libreria typography.js
• gatsby-plugin-tailwindcss - aggiunge la liberia TailwindCSS
• gatsby-plugin-breadcrumb - aggiunge le breadcrumbrs
• gatsby-plugin-react-svg - aggiunge il supporto per le immagini .svg
• gatsby-background-image - lazyloading per immagini di background

Plugins per Analytics

• gatsby-plugin-gtag - aggiunge google analitics con il nuovo gtag.js
• gatsby-plugin-facebook-pixel - aggiunge il pixel facebook
• gatsby-plugin-robots-txt - gestisce il file robots.txt
• gatsby-plugin-sentry - aggiunge il monitoraggio degli errori tramite Sentry

Altri Plugins

• gatsby-plugin-nprogress - aggiunge la barra di caricamento
• gatsby-plugin-typescript - aggiunge il supporto per TypeScript
• gatsby-schema-field-absolute-path - aggiunge il supporto per i percorsi assoluti nei nomi di file per i campi del database GraphQL
• gatsby-plugin-catch-links - forza i link ad usare gatsby-link
• gatsby-plugin-webpack-bundle-analyser-v2 - analizza la dimensione del sito