I documenti New Layer0 (Edgio) sono l’inizio di un nuovo inizio

Il cambiamento è inevitabile, e ogni tanto arriva. Negli ultimi anni ci sono stati imposti cambiamenti, cambiamenti su cui non abbiamo avuto alcun controllo diretto. Ma a Layer0/Edgio, il recente cambiamento è una delle nostre creazioni, una che era molto necessaria: Una riscrittura e riprogettazione completa della documentazione Edgio.

Questa revisione doveva essere fondamentale e controllabile. La verità è che volevamo prendere le cose nelle nostre mani come non abbiamo mai fatto prima. E così, fortemente ispirati ai documenti beta di React, ci siamo spinti sulle spalle dei giganti creando un’istanza del repo di base e regolandola per il nostro caso di utilizzo specifico.‍

Prima le prime cose

Il primo passo fu il canale di discordia Reactiflux. In parole povere, la comunità ha contribuito a identificare il repo di documentazione beta di React.

React beta Repo come vantaggio

Abbiamo trascorso un paio di giorni a studiare come è stato costruito il sito beta React docs, quali tecnologie utilizza e come possiamo sfruttare e sviluppare questo stack per soddisfare le nostre esigenze specifiche. La nostra idea di MDX e Next.js era giusta e ci siamo trovati con un vantaggio.

Tecnologie

Ecco alcune delle principali tecnologie utilizzate:

• MDX: Markdown funzionale con componenti React incorporati
• Next.js: Struttura REACT
• Webpack: Bundle di moduli
• Componenti di stile: Stile
• Algolia: Ricerca
• PRISM: Evidenziazione della sintassi del codice

‍‍MDX: MDX è una forma estesa di Markdown per l’era dei componenti. Rende funzionale il markdown consentendo di incorporare JSX in qualsiasi documento markdown, portando l’authoring dei contenuti con markdown a un nuovo livello.

Sapevamo già cosa fosse MDX e quanto potesse essere potente da articoli come MDX, l’ingrediente segreto e la documentazione front-end, le guide di stile e l’ascesa di MDX. Questo ha spianato la strada ad alcuni dei componenti personalizzati che abbiamo creato.

Next.js: Associare MDX a Next.js non è una novità, quindi il primo istinto è stato quello di leggere la documentazione ufficiale o questo post sul blog. Ci sono un paio di approcci per ottenere markdown nelle pagine Next.js come avere un documento markdown locale e trasformarlo in HTML utilizzando pacchetti come Remark e Remark-html all’interno di getStaticProps, getStaticPaths o getServerSideProps

Un altro approccio consiste nel definire un file “.md” o “.mdx” direttamente come pagine Next.js con il pacchetto @Next/mdx, oppure, se vi piace gestire le cose di livello inferiore, seguite l’approccio del team React e il fai da te.

Webpack: Next.config.js (o Next.config.mjs) viene utilizzato dal server Next.js e dalle fasi di build. Qui è possibile configurare Next.js per casi di utilizzo avanzati, come far leggere ai markdown le estensioni file “.mdx” nella directory Pages e caricarle come pagine Next.js.

Webpack usa i caricatori per pre-elaborare i file. Uno dei casi d’uso più comuni è il transpiling e uno di questi pacchetti comuni è babel-loader (carica il codice ES2015+ e i transpiles su ES5 usando Babel). Per caricare i file `.mdx` con Webpack in Next.js, viene usato @mdx-js/loader.

Il ricco ecosistema di plug-in Remark/Rehype può essere chiamato a ricevere assistenza da @mdx-js/loader per una trasformazione fine del markdown in html.

Componenti di stile: Sebbene ci siano molti modi per scrivere CSS in Next.js, abbiamo scelto i componenti di stile. Con i componenti di stile, siamo in grado di creare stili di componenti in modo più colocato, modulare, accoppiato e meno invasivo. Scopri come utilizzare i componenti di stile in React o esplora il percorso felice dei componenti di stile per ulteriori informazioni sui componenti di stile.

Algolia: Abbiamo aggiornato la versione più recente di DocSearch v3, che si basa su Algolia AutoComplete, fornendo miglioramenti in termini di accessibilità e reattività per un’esperienza più fluida sia su dispositivi desktop che mobili. Insieme a questo è l’Algolia Crawler per estrarre le informazioni più rilevanti quando si esegue la ricerca.

PRISM: PRISM è l’evidenziatore della sintassi del codice collaudato e affidabile. Non è solo più facile iniziare, ha anche un ricco ecosistema di plugin ed è estensibile con impostazioni predefinite ragionevoli per operazioni come il tema.

Funzioni

Mentre la riprogettazione presenta una modifica in gran parte cosmetica al valore della faccia, ci sono altre funzioni come:

Una nuova home page con dettagli importanti

Iniziate con i quattro pilastri della piattaforma Layer0/Edgio e sviluppate la vostra strada verso l’alto e verso altre funzionalità che Layer0/Edgio ha da offrire.