Gatsby: Menggunakan komponen React di sumber penurunan harga

Ide yang bagus. Saya akan bersedia untuk mengerjakannya jika belum tersedia.

Saya pengembang reactdown. Akan luar biasa melihat reactdown bekerja dengan Gatsby. Ping saya jika Anda memiliki pertanyaan atau butuh bantuan tentang mengintegrasikannya.

👍 ini adalah permintaan yang umum, jadi akan sangat menyenangkan jika ada sesuatu yang berfungsi dan tersedia secara luas!

Saya menyiapkan repositori contoh cepat dan kotor tentang cara mendapatkan reactdown bekerja dengan gatsby. Penting untuk dicatat bahwa di bawah tenda gatsby hanyalah pembungkus yang sangat ramah pengguna di atas webpack, jadi semua kekuatan masih ada untuk melakukan apa saja.

https://github.com/benstepp/gatsby-reactdown

Terima kasih, saya akan mencobanya dan akan memberi tahu Anda bagaimana hasilnya.

Oh keren! Ben yang baik. Itu jauh lebih sederhana untuk disiapkan daripada yang saya bayangkan
ha ha. Kerja bagus Andrey.

Pada hari Selasa, 7 Jun 2016 pukul 22.31 Jo Meenen [email protected] menulis:

Terima kasih, saya akan mencobanya dan akan memberi tahu Anda bagaimana hasilnya.

-
Anda menerima ini karena Anda berkomentar.

Balas email ini secara langsung, lihat di GitHub
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -224492088,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe/AAEVh-2doZe_FXFMBxYTJ5FAVqo4XqxNks5qJlO6gaJpZM4Iubim
.

@benp bagus! Ini terlihat cukup jelas saat menggunakan file Markdown melalui pembungkus, tetapi apakah ini juga berfungsi saat mengimpor file penurunan harga untuk digunakan di dalam komponen React?

Sunting: sepertinya itu hanya berfungsi di luar kotak, tetapi entah bagaimana komponen React file md diubah menjadi tidak menghasilkan apa pun ...

Saya telah memikirkan tentang pendekatan berbeda yang membuka lapisan GraphQL baru (# 420). Saya membuka masalah yang menanyakannya di repo mdash https://github.com/wooorm/mdast/issues/13

Itu akan luar biasa! Saya merasa saya sangat dekat dengan Reactdown… File penurunan harga diubah dengan benar menjadi komponen React oleh webpack (setidaknya terlihat seperti itu), tetapi itu hanya memberi saya komponen kosong ketika saya menggunakannya dalam kode saya.

@SachaG memiliki repo di suatu tempat yang bisa saya lihat?

Wow, sangat aneh. Saya mencoba membuat reproduksi masalah, dan sekarang berhasil! Bahkan tidak yakin apa yang berubah ... Saya rasa tidak bisa mengeluh :)

Para dewa React turun dengan kereta emas, dan lihat! kodenya bekerja

@ SachaG Saya ingat ada beberapa masalah dengan bagaimana reactdown mereferensikan runtime-nya. Pokoknya jika Anda mengalami beberapa masalah saya akan datar membantu.

Halo! Apakah ada pembaruan terbaru untuk ini? Apa metode yang direkomendasikan untuk menggunakan komponen react dalam penurunan harga? Apakah ada contoh yang bisa saya ikuti? Terima kasih!

Belum :-( Saya punya rencana yang bagus tentang bagaimana melakukannya - pada dasarnya kompilasi file penurunan harga menjadi file komponen React di mana Anda menangani pengimporan dengan benar semua komponen React yang direferensikan tetapi belum perlu membuatnya. Jangan ragu untuk mulai kerjakan jika Anda membutuhkannya!

@KyleAMews maksud Anda saya harus menjalankan skrip konverter pada file penurunan harga saya dan kemudian secara manual menambahkan komponen react lain yang saya perlukan ke file output yang dihasilkan oleh langkah konversi? Setelah ini selesai, lalu lakukan pembuatan terakhir?

Ini idealnya adalah plugin untuk Gatsby v1 yang akan melakukan langkah-langkah ini
secara otomatis.

Pada hari Selasa, 2 Mei 2017, 12:50 Piyush Singh [email protected] menulis:

@KyleAMews https://gub.com/KAMAMESah maksudmu aku harus lari
skrip konverter pada file penurunan harga saya dan kemudian tambahkan reaksi lainnya
komponen yang saya perlukan untuk file keluaran yang dihasilkan oleh langkah konversi? Sekali
ini selesai lalu lakukan pembuatan terakhir?

-
Anda menerima ini karena Anda disebutkan.

Balas email ini secara langsung, lihat di GitHub
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment-298741837 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AAEVh4riB8uXgeRUybcR6OxsC1EAKnkKks5r14kPgaJpZM4Iubim
.

Contoh sederhana dari apa yang saya maksud.

Bayangkan Anda memiliki file penurunan harga di /my-blog/index.md yang terlihat seperti berikut:

---
title: "hi folks"
---

# This is my broomstick

Yo yo foo

<SweetComponent props="super cool" />

Body kemudian bisa diubah menjadi komponen react yang akan dijalankan melalui webpack / babel / etc. seperti biasa.

import React from 'react'
import SweetComponent from 'auto-resolve-this-somehow'

class MarkdownBody extends React.Component {
  render () {
    return (
      <div>
        <h1>This is my broomstick</h1>
        <p>Yo yo foo</p>
        <Sweet Component props="super cool" />
      </div>
    )
  }
}

Bagian triknya adalah bagaimana mengintegrasikan ini dengan sistem graphql Gatsby. Idealnya Anda bisa menanyakan versi "komponen" dari file penurunan harga yang mirip dengan cara Anda meminta html hari ini.

Bagaimanapun, itulah sketsa singkat dari apa yang saya pikirkan.

Terima kasih

Tujuan saya adalah untuk dapat menulis konten seperti ini yang memanfaatkan visualisasi MathJax, D3.js dan juga dapat menggabungkan komponen animasi Three.js dalam sumber penurunan harga.

Jika Anda melihat sumber html di sini , halaman tersebut menggunakan jQuery untuk beberapa slider kontrol, meskipun saya membayangkan mungkin ada cara yang lebih baik untuk melakukan hal-hal jQuery dengan komponen React?

Dari apa yang saya kumpulkan sejauh ini, saya membayangkan menghasilkan konten seperti itu dengan framework Gatsby dapat dicapai dengan cara yang jauh lebih rapi dan terstruktur, bukan?

Saya baru dalam pengembangan web, tetapi melakukan yang terbaik untuk mempelajari cara kerja sistem Gatsby sehingga saya dapat berkontribusi untuk mencapai tujuan semacam ini ...

@KAMAMews , saya telah memikirkan solusi yang Anda usulkan ..

Apakah menurut Anda sesuatu seperti markdown-it-jsx dapat digunakan atau diperbaiki untuk melakukan konversi ke struktur komponen MD JS yang diinginkan?

Untuk menyelesaikan auto-resolve-this-somehow bagian, mungkin parser kedua dapat memindai file komponen MD JS untuk mencari JSX yang cocok dengan yang ada di daftar registri komponen (yang bisa berupa file teks sederhana atau pencarian file di direktori tempat semua komponen akan disimpan) dan kemudian tambahkan baris impor yang relevan ke bagian atas file?

Saya akan mulai mengerjakan ini sehingga setiap umpan balik akan luar biasa!

Sekadar catatan ada proyek lain yang melakukan ini, mungkin akan berguna sebagai referensi: react-styleguidist . Contoh file penurunan harga

Mengaktifkan komponen dalam penurunan harga mengingatkan saya karya Bret Victor ini.

UPD: dan satu contoh lagi: mdxc

Dan satu lagi http://thejameskyle.com/react-markings.html

Solusinya adalah menggunakan react-jsx-parser .
Di howtographql.com kami menggunakannya dalam produksi: https://github.com/howtographql/howtographql/blob/master/src/components/Tutorials/Markdown.tsx#L182

Satu kelemahan: Ini tentu saja lebih lambat daripada hanya menggunakan dangerouslySetInnerHTML , karena itu

1. Parsing HTML
2. Membangun pohon dom virtual
3. Membuat pohon virtual dengan React

Salah satu cara untuk mempercepatnya adalah dengan tidak mengirim html mentah dengan kueri graphql, tetapi sebenarnya mengirim format yang digunakan oleh dokumen Inferno.js, seperti yang dijelaskan di sini .

Karena saat ini saya tidak dapat menemukan waktu untuk melakukan langkah pengoptimalan terakhir ini, siapa pun yang tertarik dapat melakukan pendekatan ini.

Itu berarti

1. Buat Jenis GraphQL yang tepat, yang seharusnya tidak menjadi masalah karena Jenis GraphQL dapat bersifat rekursif dan mewakili pohon
2. Setelah bisnis parsing penurunan harga remark selesai, buat format jsx berseri.
3. Dalam React deserialize format ini.

Opsi lain yang saya perhatikan adalah https://github.com/mapbox/jsxtreme-markdown

Kita bisa menggunakan pola serupa. Cukup ubah penurunan harga menjadi komponen JSX. Gunakan pembatas kustom untuk menambahkan JavaScript dan JSX. Kami dapat menggunakan pengaturan Remark yang ada dengan baik. Dan tidak akan ada banyak penalti kinerja karena ini hanya halaman React biasa.

Ada juga https://github.com/cerebral/marksy , yang baru-baru ini saya gunakan dengan efek yang baik.

Apakah ada pendekatan yang direkomendasikan untuk ini dalam konteks Gatsby atau masih harus diputuskan?

Hai, ada rekomendasi untuk menyertakan komponen bea cukai dalam file penurunan harga gatsby kami?

Satu lagi opsi ke dalam koleksi https://idyll-lang.github.io/

Sepertinya marksy berfungsi dengan baik untuk kasus penggunaan tersebut

karena mengembalikan pohon elemen reaksi, saya bertanya-tanya bagaimana saya bisa mengintegrasikannya ke dalam plugin gatsby?

@KyleAMathews @volunet Apa pendapat Anda tentang mendaftarkan komponen yang perlu kita gunakan sebagai elemen khusus, setelah itu kita dapat dengan mudah memasukkannya ke dalam posting blog dan menyerahkan sisanya kepada browser?

Ini akan menghilangkan kebutuhan untuk mengurai penurunan harga sebagai pohon reaksi dan menjaga kinerja aplikasi kita, namun, saya tidak tahu apakah akan ada biaya kinerja, untuk melakukan ReactDOM.render setiap kali kita perlu menambahkan yang baru komponen kustom, tetapi tetap akan memberi kita cara yang cukup keren untuk menambahkan fungsionalitas dinamis ke postingan blog.

@abdulhannanali Mendaftarkan komponen yang tersedia dalam penurunan harga adalah ide yang bagus, tetapi hal-hal elemen khusus tidak terdengar sangat ramah di sisi server :)

Jadi saya telah mencoba memikirkan cara yang bersih untuk menggabungkan React & Markdown hampir selamanya. Atau setidaknya sejak saya mulai mengerjakan Gatsby.

Dan akhirnya saya pikir saya punya ide yang bisa berhasil.

Kami akan menggunakan aturan yang sama untuk membedakan antara elemen HTML normal dan komponen React seperti yang dilakukan JSX, yaitu React menggunakan huruf besar.

Jadi, Anda dapat memasukkan komponen React langsung ke Markdown Anda misalnya

# Hi folks

I'm writing some markdown about speaker <Person id="Paul Ryan">Paul Ryan</Person> who's the speaker of the house and other stuff.

<InteractiveComponent invertedColors={true} allTheProps={true} />

Kemudian ini akan diurai menjadi AST seperti:

[
  [{ raw: true, value: "<h1>Hi Folks</h1>" }],
  [
    { raw: true, value: "<p>I'm writing some markdown about speaker " },
    {
      raw: false,
      value: {
        name: "Person",
        props: { id: "Paul Ryan", children: "Paul Ryan" }
      }
    },
    { raw: true, value: " who's the speaker of the house and other stuff.</p>" }
  ],
  [
    {
      raw: false,
      value: {
        name: "InteractiveComponent",
        props: { invertedColors: true, allTheProps: true }
      }
    }
  ]
];

Dan kemudian di komponen Anda, alih-alih langsung merender (gaya berbahaya) HTML, Anda malah akan meneruskannya ke fungsi pembantu dengan pemetaan ke setiap komponen React seperti:

import React from "react";
import renderHtmlReact from "gatsby-render-html-react";
import Person from "../components/Person";
import InteractiveComponent from "../components/InteractiveComponent";

export default ({ data }) => (
  <div>
    {renderHtmlReact({
      ast: data.markdownRemark.ast,
      componentMap: { Person, InteractiveComponent }
    })}
  </div>
);

// Your query goes down here

Kita perlu melakukan beberapa prototipe untuk memastikan ini bekerja dengan Remark tapi saya cukup yakin React "Html" akan lolos tanpa tersentuh. Jadi kita hanya membutuhkan parser untuk memisahkan HTML dan mengubah bagian React JSX menjadi data serta lib frontend untuk membuat "AST" yang dihasilkan.

Pikiran?

Dan kemudian di komponen Anda, alih-alih langsung merender (gaya berbahaya) HTML, Anda malah akan meneruskannya ke fungsi pembantu dengan pemetaan ke setiap komponen React seperti:
[…]
Pikiran?

Ini adalah sesuatu yang telah kami lakukan juga (sangat sederhana, sebenarnya tidak aman dan hanya dirancang untuk tag tertentu). Kasus penggunaan kami adalah untuk mendesain / menata dokumen JSON:

<IconGrid src="sensors.json" />

Ini sangat membantu untuk menghindari konten duplikat dan kami mempertimbangkan untuk menggunakan mekanisme serupa untuk komponen dokumentasi API yang dapat digunakan kembali.

Sesuatu yang kurang dari solusi ini, yang juga tidak kami selesaikan, adalah penggunaan penurunan harga dalam properti komponen. Sehingga hal seperti ini bisa terjadi:

<Api method="post" description="
An API which uses **markdown**.

And having multi line parameters would be helpful as well.
" />

Setelah mencoba banyak hal di ruang ini sebentar sekarang saya yakin bahwa ya itu perlu benar-benar diselesaikan pada tingkat penurunan harga. Artinya rasa penurunan harga benar-benar perlu dipahami jsx / react. Masalahnya sebenarnya adalah interpolasi javascript yang didukung jsx dan penurunan harga tersedak. Jsxtreme-markdown mendekati dan mengatasi ini dengan memprosesnya terlebih dahulu dan kemudian menggunakan penurunan harga untuk mengurai sisanya. Pendekatan lain adalah bersandar pada kemampuan alami parser MD untuk menangani html dan oleh karena itu jsx langsung (Ditandai, misalnya, akan menangani elemen huruf besar) tetapi Anda dengan cepat mengalami keterbatasan yang mengganggu karena terjebak pada alat peraga hanya string dan tidak ada penurunan harga bersarang (misalnya penurunan harga di dalam , alat peraga. anak). Masalah lainnya adalah bahwa hidrasi pada klien menjadi mengganggu karena Anda memerlukan runtime (dan umumnya yang cukup besar) untuk mengubah string menjadi elemen react, yang tidak ideal untuk fokus gatsby pada waktu cepat untuk interaksi dan kinerja.

Menurut saya cara yang paling menjanjikan untuk maju adalah pendekatan berbasis ast, tetapi untuk itu Anda benar-benar membutuhkan varian penurunan harga yang cukup berbeda dari yang sudah ada untuk menjadi proyek yang cukup besar.

Hanya membuang 2 sen saya!

Sebelum saya tahu gatsby ada (2 tahun yang lalu), saya mencoba membuat generator situs statis bereaksi yang berperilaku mirip dengan jekyll (

Saya memilih untuk menggunakan regex untuk menemukan <CapitalizedComponents/> dalam konten penurunan harga dan itu berhasil dengan cukup baik kecuali itu memiliki beberapa kasus tepi. Pada saat itu, saya menggunakan tanda yang memiliki beberapa efek samping aneh di sekitar parsing html mereka.

Juga, regex sederhana saya tidak mengizinkan tag akhir komponen dan karenanya tidak memiliki turunan ... jadi ini tidak berfungsi:

<Component>
   <Child/>
</Component>

Bagaimanapun, saya sangat senang gatsby mendukung ini! Saya sedang dalam proses mengubah situs Jekyll saya menjadi gatsby dan saya hampir selesai. Tugas saya selanjutnya adalah mencari tahu bagaimana mengubah jekyll saya termasuk dalam posting blog md ke komponen dalam versi gatsby saya.

@jquense setuju bahwa tidak mendukung JS dalam penurunan harga akan menjadi batasan. Tetapi sisi baiknya, ini akan cocok dengan baik dalam struktur kami yang ada. Lib runtime akan sangat sederhana, hanya mengulang secara rekursif di atas elemen pembuat AST. Kita juga dapat mengaturnya untuk secara otomatis mengurai teks anak dari komponen sebagai penurunan harga sehingga komponen untuk ini hanya akan dangerouslySetInnerHTML pada props.children .

Ini bukan solusi 100% tetapi berfungsi untuk banyak penyiapan. Saya juga bukan penggemar berat ide menulis JS di dalam penurunan harga. Anda kehilangan semua dukungan perkakas dengan cara itu.

@jakedeichert ya, ekspresi reguler sederhana hanya

@KAMAMews Apa kemajuan dari apa yang Anda usulkan?

Beberapa pemikiran tentang ini:

1. Saya memiliki contoh kerja yang menggunakan komentar untuk mengubah penurunan harga yang berisi komponen reaksi sewenang-wenang tmp-komentar-jsx . Saya menggunakan remark-html dan hast-util-to-html sebagai proyek dasar.
   Berikut adalah contoh penggunaan + keluaran: contoh
   Saya dapat memberikan beberapa informasi lebih lanjut tentang cara kerjanya jika Anda tertarik.
2. MapBox membuat paket komentar-reaksi yang mengubah penurunan harga menjadi elemen reaksi menggunakan komentar. Mungkin diperlukan beberapa pekerjaan untuk menyesuaikan paket untuk menerima elemen react kustom.

Tidak ada yang mulai mengerjakannya afaik.

Masalah dengan kedua pendekatan tersebut adalah mereka tidak bekerja dengan sistem data berbasis GraphQL Gatsby karena kueri GraphQL hanya dapat mengembalikan data yang tidak menjalankan kode. komentar-bereaksi misalnya melakukan konversi markdown => html di klien untuk mengatasi ini yang lebih mahal daripada ideal.

Jadi untuk bekerja dengan GraphQL, Anda memerlukan runtime klien untuk membuat komponen React. Proposal saya datang dari mengerjakan desain yang memungkinkan runtime sekecil mungkin.

Saya pikir saya mengerti sekarang. Jadi yang dibutuhkan menurut Anda adalah dua bagian kode:

1. markdown -> HAST siap pakai yang mendukung komponen react. (Kode ini harus berjalan pada waktu pembuatan?)
2. react enabled HAST -> react element (Ini harus berjalan di sisi klien dengan runtime minimal / sepele)

Apakah saya melakukannya dengan benar? Apakah saya melewatkan sesuatu?

Ya!

Berlari di proyek lain di ruang ini - memiliki beberapa ide menarik https://github.com/luiscarli/md-to-react

Hai,

Aku akan mencoba lagi. Saya memiliki contoh kerja dari bagian pertama yang membuat HAST di sini berkomentar-custom-element-to-hast . Ini masih perlu mendukung penggunaan penurunan harga sebagai elemen turunan dan mungkin pemuat webpack yang menggunakannya.

@KAMAMews Apakah menurut Anda pendekatan ini cocok dengan pandangan Anda?

Sedangkan untuk bagian kedua, kita bisa menggunakan sintaks-tree / hast-to-hyperscript . Berikut adalah contoh penggunaan wooorm / comment-vdom .

@ fazouane-marouane keren! Ya, dari pandangan sekilas sepertinya sangat dekat. Kerja bagus!

Kami tidak ingin menggunakan hast-to-hyperscript meskipun di frontend karena memiliki banyak dependensi dan kami ingin runtime menjadi seringan mungkin - misalnya hanya mengulang melalui AST yang membuat elemen React. Jadi pindahkan sebanyak mungkin di perpustakaan kedua ke dalam modul Anda.

@KAMews Itu bagus! Saya akan mencoba melakukan langkah-langkah yang tersisa dalam beberapa hari ke depan. Semoga ini akan membawa kita selangkah lebih dekat ke solusi praktis.

Hai @ fazouane-marouane & @KyleAMathews , saya telah membaca diskusi Anda dan menerapkan versi "sederhana" dari berbagai bagian yang Anda jelaskan di sini pada aplikasi yang sedang saya kerjakan.

Bagian yang menarik adalah yang menggunakan kode @ fazouane-marouane dalam bentuk plugin gatsby disini dan bagian dimana kita membuat HAST disini . Mungkin juga menarik untuk melihat bagaimana HAST diambil berkat GraphQL.

Harap dicatat bahwa pada saat saya menulis komentar ini, itu jauh dari sempurna, dioptimalkan & dan bersih.

EDIT: Komponen renderHAST sangat terinspirasi oleh cara phenomic menangani penurunan harga pada sisi klien: https://github.com/phenomic/phenomic/blob/master/packages/plugin-renderer-react/src /components/BodyRenderer.js

@pbellon Terima kasih telah bergabung! Ini akan menghemat banyak waktu. Kode tampaknya melakukan apa yang diperlukan untuk langkah selanjutnya. Saya akan mencobanya nanti malam.

Satu hal yang perlu saya debug adalah cara menangani anak komponen.
Sekarang jika saya menyetel tulis dalam penurunan harga This is a test <MyComponent>let's see how children are handled</MyComponent> properti MyComponent children akan disetel ke [0, null] .

Tapi saya tidak yakin apakah itu berasal dari pengurai atau dari cara saya menghidrasi HAST.

@pbellon itu berasal dari parser. Ini adalah pengurai minimalis untuk membuat prototipe keseluruhan ini bereaksi dalam hal penurunan harga. Ini pasti membutuhkan beberapa perbaikan agar dapat digunakan di semua kasus. Jangan ragu untuk mengirimkan masalah jika menemukan lebih banyak contoh. Ini akan membantu membuat basis pengujian yang baik.

@ fazouane-marouane begitu. Saya akan mencoba di sisi saya untuk bermain dengan kode Anda untuk melihat apakah saya dapat menerapkan fitur ini (dan membuat PR jika saya berhasil melakukannya) tetapi tampaknya itu bukan modifikasi yang sepele 😮
Saya telah membuat masalah pada repo Anda di sini

Menimpali dengan $ 0,02 saya. Sebagai bagian dari pengembangan GitDocs kami membutuhkan cara untuk memungkinkan pengguna menyematkan JSX di dalam file penurunan harga. Inilah yang saya dapatkan sejauh ini.

Markdown Parsing

Penggunaan pengolahan penurunan harga bersatu , komentar , dan rehype . Tokenizer kustom bercabang dari blok komentar raw untuk diproses lebih lanjut.

Saya menulis plugin rehype kustom yang berfungsi mirip dengan rehype-raw tetapi mendukung JSX dan beberapa evaluasi ekspresi dasar. Plugin menemukan raw node dan menentukan apakah mereka JSX dengan mencoba mengurai blok menggunakan acorn-jsx . Jika parsing berhasil, JSX AST yang diproduksi oleh biji pohon ek diubah menjadi HAST.

JSX yang didukung

Sejauh ini saya dapat mengonversi bit JSX berikut (contoh kasus yang diambil dari rangkaian pengujian)

<Test>
  <Test2></Test2>
</Test>

<Test>some text</Test>

<Test attr={{ prop: 400 }} />

Ekspresi

Evaluasi ekspresi waktu kompilasi sederhana didukung.

<Test attr={1 + 2}/>

Node HAST yang dibuat akan memiliki properti 'attr' disetel ke 3 .

Ekspresi Array

Penggunaan Array.prototype.map() diperbolehkan di properti:

<Test attr={ [1,2,3].map(x => 2 * x) } />

Anda bahkan dapat memetakan di atas larik dan membuat turunan JSX

<Test>{ [1,2,3].map(x => (<Test2>{x}</Test2>)) }</Test>

akan diterjemahkan ke HAST sebagai padanannya

<Test>
  <Test2>1</Test2>
  <Test2>2</Test2>
  <Test2>3</Test2>
</Test>

Batasan

Dukungan ekspresi sangat terbatas dan keamanannya belum ditinjau. Kode tidak menggunakan eval dan mengakses hal-hal seperti window seharusnya tidak dapat dilakukan tetapi saya tidak dapat menjamin.

Saya melakukan percobaan di area ini di mana Anda dapat sepenuhnya menggunakan plugin komentar gatsby seperti biasa. Anda meneruskan html graphql ke pemuat webpack yang menghasilkan kode react.js. Sayangnya, ini memiliki beberapa masalah, dan merusak produksi tunggal yang dibangun.

          createPage({
            path: edge.node.fields.slug,
            component: getCdResolve(blogPost, edge.node.fileAbsolutePath, {
              html: edge.node.html,
              site: result.data.site,
            }),
            context: {
              slug: edge.node.fields.slug,
            },
          })

Di mana cdResolve mengembalikan string seperti !!cd-resolve-loader!foo.md . Gatsby tidak suka itu. Ini setidaknya bekerja di server pengembangan.

Kode lainnya ada di sini .

Keluaran build adalah komponen sederhana dengan sekumpulan node statis untuk anak-anak.

var h = require('react').createElement;
var n1 = h('div', { key: 1, dangerouslySetInnerHTML: { __html: '<h1>Hello</h1>' } });
var n2 = h(CustomComponent, { key: 2, foo: 1 });

module.exports = () => h('div', null, [n1, n2]);

Hah menarik!

Sayangnya ini juga akan merusak pemuatan ulang penurunan harga dalam pengembangan sejauh yang saya tahu.

Ya, itu masalah lain. Saya pikir jika masalahnya berhasil, itu akan menjadi salah satu hasil akhir terbaik, sejauh ukuran bundel dan waktu untuk interaktif. Tentu saja, ini cukup jauh dari solusi yang berfungsi. Adakah tip tentang cara mendapatkan kompilasi ke file JS setelah komentar berfungsi?

@brigand Saya pikir solusi termudah adalah apa yang saya uraikan dalam komentar sebelumnya https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -336681894

@KyleAMews Untuk solusi yang Anda usulkan, kita sekarang tahu bagaimana mengubah penurunan harga yang mengandung jsx menjadi html AST menggunakan komentarjs. Kami telah memecahkan bug pemblokiran terakhir. Yang kita butuhkan sekarang adalah membuat kode yang dapat mengubah AST ini menjadi komponen react dan mendorongnya ke npm. Saya akan memiliki waktu luang untuk melakukan ini pada akhir minggu depan.

Jangan ragu untuk muncul di depan pintu saya dengan tongkat baseball jika saya tidak mendorong sesuatu saat itu 😅.

@ r24y membuat ini bekerja !!! Lihat PR https://github.com/gatsbyjs/gatsby/pull/3732 dan halaman contoh di situs contoh menggunakan komentar!

https://using-remark.gatsbyjs.org/custom-components/

Jadi, melaporkan kemajuan saya di sini. Saya punya waktu untuk menyelesaikan langkah kedua.

Secara keseluruhan, kami memiliki dua paket:
Penguraian menjadi HAST: @ dumpster / comment-custom-element-to-hast
Render yang sepele menjadi komponen react: @ dumpster / hast-react-renderer

@pbellon mengusulkan plugin Gatsby di sini.

Pipa ini harus lebih permisif daripada rehype. Jika ingatan saya benar, ketik ulang menggunakan parser5 yang tidak menerima <Note value="my content" /> dan saya tidak dapat mengingat apakah ia menerima badan untuk elemen khusus.

@KAMAMews Saya tidak yakin apa langkah selanjutnya dari sini.

@ fazane-marane mengagumkan !!!

Saya pikir langkah selanjutnya adalah menambahkan situs contoh ke repo sehingga kami dapat memamerkan pekerjaan Anda juga - kemudian kami perlu membuka halaman dokumen di gatsbyjs.org untuk membicarakan berbagai opsi dan trade-off yang mereka miliki.

Manis! Terima kasih atas klarifikasinya.

Saya akan mencoba memiliki sesuatu untuk minggu depan atau minggu berikutnya (mulai pekerjaan baru senin ini 😅).

Menimpali. Setelah membaca https://using-remark.gatsbyjs.org/custom-components/ dan mencobanya, saya membuat paket kecil bernama gatsby-comment-component untuk menghindari peringatan validateDOMNesting yang Anda dapatkan jika komponen Anda dalam penurunan harga berisi elemen tingkat blok (div ...). Komponen kustom secara default digabungkan ke dalam paragraf, sementara dengan paket ini, komponen tersebut digabungkan menjadi div.
Sangat mudah digunakan

//In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve: "gatsby-remark-component",
          options: { components: ["my-component", "other-component"] }
        }
      ]
    }
  }
]

Saya harap ini bermanfaat bagi seseorang.

@ Terima kasih banyak atas pluginnya; ya, saya menyadari semua komponen khusus dirender di dalam elemen <p> dan saya menggunakan,

<div>
  <custome-component></custom-component>
</div>

sebagai solusi.

Namun, tidak mudah untuk memasukkan semua custom-components ke dalam file config lagi , seperti yang sudah saya lakukan di file template penurunan harga.

@ li-xinyang Saya setuju dengan Anda. Saya menambahkan fitur deteksi otomatis sehingga Anda tidak perlu menambahkannya secara manual.
Pastikan untuk mengupgrade paket ke versi terbaru 1.1.0 jika Anda ingin mencobanya.
Ini bekerja di luar kotak dengan:

//In your gatsby-config.js ...
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["gatsby-remark-component"]
    }
  }
]

Ini sedikit menyinggung, tetapi orang-orang di sini mungkin tertarik untuk berkoordinasi dengan @rauchg : lihat proposal

@ r24y terdengar bagus!

Saya pikir ada beberapa cara yang dapat diselesaikan dengan pengorbanan yang berbeda.

Saya tidak tahu apakah Anda mengetahui proyek bernama Katalog yang juga mendukung untuk menyematkan komponen React ke dalam penurunan harga . Ada juga plugin Gatsby bernama gatsby-comment-design-system yang mencoba mengadaptasi konsep Katalog.

Solusi ini terlihat sempurna di @arcticicestudio

Katalog terlihat bagus; Dan plugin gatsby-comment-design-system keren, tetapi tidak memiliki dukungan untuk komponen React. Saya pikir itu melakukan sesuatu dengan benar, itu menggunakan sintaks blok kode yang ada untuk menambahkan fungsionalitas yang lebih kompleks ke penurunan harga.

Seperti yang telah dibahas beberapa kali dalam utas ini, saya pikir penggunaan parser yang ada bukanlah fungsionalitas yang diinginkan. Mungkin alih-alih elemen React yang mengambang bebas, dimungkinkan untuk secara lebih jelas menunjukkan komponen React yang kompleks secara eksplisit, misalnya file penurunan harga mungkin terlihat seperti:

 # Beberapa Heading
 ... dll dll ...

<Example>
   <Etc />
</Example>

Ketika kita ingin elemen react disematkan untuk dirender, kita menentukan bahasanya sebagai react , dan parser yang sadar JSX dijalankan dan menghasilkan AST yang valid yang dapat digunakan dengan rehype. Jika kita menginginkan contoh prisma JavaScript normal, gunakan saja bahasa normal javascript .

Hai teman-teman, diskusi bagus di sini.
Saya menggunakan gatsby-remark-component dan saya punya beberapa pertanyaan:

1. Apakah ada cara untuk "mendeteksi otomatis" komponen? Itu akan menghilangkan keharusan untuk secara eksplisit menginformasikan komponen saya di objek komponen:

const renderAst = new RehypeReact({
  createElement: React.createElement,
  components: {

  },
}).Compiler

1. Adakah cara untuk mengintegrasikan beberapa gambar dengan gatsby-remark-images ? Salah satu tujuan saya adalah pengguna dapat menambahkan gambar dan mengirimkannya ke komponen saya melalui props, misalnya. Sesuatu seperti:
   <my-component header-image="[](./image.png)"><my-component>

Terima kasih!

@ThiagoMiranda Ya, (2) akan sangat bagus! Kasus penggunaan saya adalah galeri gambar:

<gallery>
  <item source="image1.jpg" caption="One"></item>
  <item source="image2.jpg" caption="Two"></item>
</gallery>

Pengurai penurunan harga JSX sadar ini oleh Zeit terlihat menjanjikan: https://github.com/mdx-js/mdx

MDX adalah superset dari spesifikasi CommonMark yang menambahkan JSX tertanam dan sintaks impor / ekspor.

Itu dibangun di atas komentar dan pengulangan, jadi mungkin pengganti yang bagus untuk digunakan dalam proyek gatsby

Saya menulis plugin untuk mdx: https://github.com/nhducit/gatsby-plugin-mdx

keren, ingin mencobanya dengan Gatsby :)

Menggunakan plugin mdx @nhducit , sangat mudah untuk memasang halaman MDX !!

1. Tambahkan konfigurasi untuk mdx dan source di direktori pages/ .

gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-mdx',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: `${__dirname}/src/pages/`,
      },
    },
  ],
}

1. Buat kueri semua file penurunan harga dan buat halaman untuk masing-masing file.

gatsby-node.js

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    graphql(`
      { 
        allFile(filter:{extension:{eq:"md"}}) {
          edges {
            node {
              absolutePath
              relativeDirectory
              name
            }
          }
        }
      }
    `).then(result => {
      if (result.errors) {
        return reject(result.errors)
      }

      // Create markdown pages.
      result.data.allFile.edges.forEach(({ node: {
        absolutePath,
        relativeDirectory,
        name
       } }) => {
        createPage({
          path: `/${relativeDirectory}/${name}`,
          component: absolutePath
        })
      })
    })
    .then(resolve)
  })
}

1. Gunakan MDX 🎉

src/pages/my-markdown-page.md

import MyComponent from '../components/MyComponent'

# Title

_some content_

<MyComponent />

@avigold Bagus! Senang rasanya melihat contoh Anda ditambahkan ke README plugin @nhducit .

@avigoldman PR dipersilahkan! 👍

@avigoldman sepertinya pendekatan ini bertentangan dengan frontmatter?

@nhducit Saya akan membuat PR!

@lintonye dapatkah Anda menjelaskan lebih banyak tentang apa yang Anda maksud. Apakah Anda mengacu pada ekspor dari MDX?

@ lintonye sudahkah Anda mencoba menggunakan ekspor mdx? Tampaknya setara dengan mdx: https://github.com/mdx-js/mdx#exports

Koreksi saya jika saya salah, tetapi sepertinya kita perlu menunggu Gatsby 2.0 dengan versi webpack yang lebih baru untuk mengirimkan plugin komentar ke MDX.

@KyleAMathews cc

@avigoldman @nhducit Saat mengekspor data dari file mdx menggunakan sintaks ekspor, bagaimana kita bisa mengaksesnya di UI ketika komponen dirender?

pertanyaan yang sama di sini, dengan MDX saat ini, tidak dapat:

• menerapkan gaya kustom ke halaman penurunan harga
• menyuntikkan konten frontmatter sebagai pathContext dari ekspor bernama mdx
  Ini sebenarnya bisa dilakukan, tetapi ini membutuhkan pembuatan file .js untuk mengimpor file .md, untuk setiap file .md, jadi ini menggandakan pekerjaan ...

@slorber Saya memiliki solusi yang cukup hacky di repo ini: https://github.com/avigoldman/avigoldman.com

Jelas tidak ideal. Saya akan mengunjungi kembali ini setelah Gatsby V2 keluar.

Hai dan terima kasih @avigoldman

Saya juga mencoba melakukan itu di sini https://github.com/nhducit/gatsby-plugin-mdx/issues/13#issuecomment -392334706

Tampaknya Anda telah menemukan bagian yang hilang, saya tidak perlu mengekstrak ekspor dengan benar: babel-plugin-config-export

Anda membuat satu tata letak per halaman posting blog, tidak yakin persis apakah ini seharusnya dilakukan dengan cara ini atau apa dampaknya terhadap kinerja Gatsby, karena orang yang menggunakan Remark biasanya memiliki satu tata letak sebagai gantinya ...

Bagaimana dengan menerbitkan plugin Anda ke NPM? ini tampaknya lebih bermanfaat daripada yang @nhducit dibuat mengenai frontmatter

Selain itu, dari manakah fragmen ... mdx graphql berasal?

Tentang MDX, mereka baru saja menambahkan "MDXProvder" (berdasarkan Konteks React) yang mungkin berguna untuk mengintegrasikan tag kustom dengan Gatsby, cc @avigoldman

@slorber Saya membuat plugin -transformer-mdx sehingga saya dapat melakukan kueri terhadap file MDX.

Saya memperlakukan setiap tata letak sebagai halaman, dan setiap file MDX sebagai konten. Jadi tata letak mendapatkan konteks halaman dan kemudian MDX dimasukkan (seperti yang akan Anda lakukan dengan html yang dihasilkan komentar).
Ini tidak akan berfungsi di Gatsby V2 karena komponen tata letak khusus akan ditiadakan.

MDXProvider terlihat menjanjikan!

Menambahkan 2 ¢ saya di sini, saya telah berhasil meretas sebagian besar situs web saya sendiri (repo masih menggunakan Jekyll, akan segera memperbarui atau menambahkan repo baru) ke Gatsby menggunakan mdx berkat @ avigoldman gatsby-transformer-mdx!

Itu hebat! Harus memiliki waktu akhir pekan ini / minggu yang akan datang untuk membuatnya menjadi paket yang cocok dengan Gatsby V2.

@avigoldman satu hal yang tidak dapat saya html (yang merupakan string), apa yang digunakan transformator Anda? Bagaimana cara kerja pemuat webpack jika tidak diperlukan di mana pun?

Oh, saya baru saja membaca komentar di atas, triknya adalah Gatsby v1 secara otomatis membungkus semuanya dalam komponen tata letak, jadi Anda menggunakan absolutePath untuk menargetkan file MDX. 😃 Terima kasih untuk trik ini!

@avigoldman ada berita tentang plugin Gatsby 2? Ini juga akan luar biasa jika Anda bisa memberikan arahan kasar tentang bagaimana Anda akan membangunnya tanpa komponen tata letak yang tidak ada lagi di Gatsby 2.
Terima kasih!

Saya berharap saya bisa menggunakan fitur export default dari MDX, tetapi melewatkan alat peraga tambahan selain children tampaknya tidak memungkinkan melalui ATM. mdx-js / mdx # 187

Jika PR saya digabungkan (mdx-js / mdx # 189), saya pikir kita akan dapat menggunakan MDX dengan gatsby-plugin-mdx dan gatsby-transformer-mdx yang ada. Satu-satunya perubahan yang diperlukan akan ada di pihak kami, dan itu mengekspor template posting kami dari file .mdx :

src/posts/hello-world.mdx :

import Post from '../components/post'

# Hello World

Lorem ipsum.

export default Post

gatsby-node.js :

const path = require('path')

exports.createPages = ({ actions }) => {
  actions.createPage({
    path: '/posts/hello-world',
    component: path.join(__dirname, 'src', 'posts', 'hello-world.mdx'),
    context: { /* passed as pageContext */ }
  })
}

src/components/post.js :

import React from 'react'
import Layout from './layout'

export default ({ children, pageContext }) => (
  <Layout>
    {children}
  </Layout>
)

Saya pikir ini sangat penting. Saat ini semua plugin gatsby-remark-* ~ menerapkan ulang sekumpulan logika rendering yang bisa dan mungkin harus ada di React. Ini bisa sangat menyederhanakan banyak hal.

@DylanVann itu agak tergantung. gatsby-remark-* plugins melakukan banyak transformasi waktu build yang jika kita melakukannya di React berarti mengirimkan banyak JS ke browser. Juga hal-hal yang tidak mungkin dilakukan di React seperti https://www.gatsbyjs.org/packages/gatsby-remark-images/?=remark-image

Idealnya tentu saja kita memadukan kedua dunia tersebut.

@KyleAMews Ya itu akan berarti lebih banyak JS di sisi klien, meskipun itu masih akan dikirim pertama kali sebagai HTML statis. Saya pikir banyak orang mungkin mengirimkan gatsby-image untuk beberapa bagian dari situs mereka, jadi dalam hal ini duplikasi kurang menjadi masalah.

Saya mengerti bahwa ada utilitas di plugin gatsby-remark-* . Logika rendering secara khusus, yang saat ini dilakukan dengan string, sepertinya bisa dilakukan di React.

Saya memiliki cara kerja seperti ini dengan metode htmlAst / rehype-react .

Tampaknya seperti itu, tetapi dalam praktiknya jauh lebih rumit. Jika Anda yakin Anda tertarik pada sesuatu, Anda dapat mengangkat masalah baru dengan proposisi terfokus.

Sepertinya masalah yang sulit dipecahkan. Sayangnya saya tidak berpikir saya akan punya waktu untuk mengimplementasikan apa pun atau membuat proposal. Ide untuk melakukan remark plugin sebagian menggunakan komponen kustom React pasti berhasil, saya memiliki kode yang menggunakannya.

Ini dihasilkan oleh @dylanvann/gatsby-remark-cloudinary dari gambar penurunan harga yang diakhiri dengan mp4 . Idenya adalah untuk mengoptimalkan video (mengukur pada waktu pembuatan, menambahkan poster). Saya menginginkan logika rendering di React. Pemrosesan video dilakukan di fungsi lain tetapi ini adalah bagian dari apa yang menggantikan HTML node.

export const videoHTML = ({
    srcVideo,
    srcVideoPoster,
    base64,
    paddingBottom,
    presentationWidth,
}) =>
    `<cloud-video srcvideo="${srcVideo}" srcvideoposter="${srcVideoPoster}" base64="${base64}" paddingbottom="${paddingBottom}" presentationwidth="${presentationWidth}"></cloud-video>`

Kemudian menggunakan komponen ubahsuaian dengan rehype-react .

import React from 'react'
import rehypeReact from 'rehype-react'
import CloudVideo from './CloudVideo'

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    'cloud-video': CloudVideo,
  },
}).Compiler

const Markdown = ({ ast }) => renderAst(ast)

Markdown.propTypes = {
  ast: PropTypes.object,
}

export default Markdown

Ast dapat ditarik keluar dari GraphQL.

Jadi komponen ini berfungsi untuk SSR dan sisi klien. Bagaimanapun saya tahu bagaimana dengan OSS. Saya hanya mengatakan bahwa menurut saya ini akan menjadi fitur yang hebat dan dapat mengurangi kompleksitas kode, jadi akan sangat bagus jika ada yang punya waktu untuk mencari solusi yang lebih baik.

Saya tidak tidak setuju dengan apa pun yang Anda katakan, saya pikir memulai diskusi yang baik akan jauh lebih baik dalam masalahnya sendiri, daripada di akhir utas yang berisi 60+ komentar. 😉

Saya dan @avigoldman membuat -mdx untuk menampung integrasi dan utilitas MDX 2.0 yang ambisius.

Saat ini halaman gatsby .mdx bekerja secara default setelah mengaktifkan plugin dan fitur tambahan berikut telah ditambahkan di atas mdx:

• Gunakan dan buat kueri klasik dan gaya JSON frontmatter
• Tentukan tata letak default untuk file mdx yang tidak menentukannya

Kami juga merencanakan integrasi yang lebih canggih untuk

• pemrosesan gambar lanjutan
• custom md dan hast plugin.
• kompatibilitas dengan semua bidang yang sama seperti gatsby-transformer-comment

Kami masih cukup awal dalam siklus hidup, jadi beri tahu kami jika Anda mengalami masalah dan kami akan menyelesaikannya :)

@ChristopherBiscardi apakah itu dimaksudkan untuk digunakan dalam kombinasi dengan gatsby-plugin-mdx atau sebagai gantinya?

@silvenon Sepertinya akan ditinggalkan dan dengan demikian berhenti di 1.0, sementara gatsby-mdx akan bergerak maju dengan 2.0 dan seterusnya.

@ m-allanson berpikir aman untuk menutup masalah ini sekarang karena kita memiliki gatsby-mdx ?

Saya rasa begitu, terima kasih semuanya 🎉

Jadi, apakah gatsby-mdx sekarang lebih disukai daripada rehype-react sehubungan dengan gatsby-transformer-remark seperti yang dijelaskan di sini ?

Jika jawabannya tidak jelas ya, dapatkah seseorang menjelaskan keuntungan dan kerugian dari kedua pendekatan tersebut?

Saya pikir bagian dari entri blog itu menjawab pertanyaan Anda. rehype-react menyediakan elemen HTML khusus yang dipetakan ke komponen React, tetapi MDX sebenarnya adalah JSX di dalam Markdown, itu lebih dapat diprediksi dan memiliki lebih sedikit peringatan.

Saya tidak tergabung dalam tim Gatsby, tapi saya akan menjawab ya, gatsby-mdx adalah cara yang lebih disukai untuk React di Markdown.

@janosh sejauh yang saya tahu gatsby-mdx belum bisa menggantikan gatsby-transformer-comment sepenuhnya
sepertinya masih melewatkan gatsby-comment-images & gatsby-comment-copy-linked-files misalnya dan plugin gatsby-comment lainnya ..
Saya pikir mereka sedang mengerjakannya tetapi tidak yakin tentang keadaan saat ini

Tetapi jika Anda tidak membutuhkan plugin tersebut atau dapat menunggu maka saya akan mengatakan ya, setidaknya saya lebih suka, tampaknya lebih bersih bagi saya

@CanRau Saya menilai ulang hari ini (https://github.com/ChristopherBiscardi/gatsby-mdx/pull/68) dengan maksud untuk menggabungkan dan melepaskan. Mungkin akan ada beberapa kasus tepi kita harus berurusan dengan tapi aku akan pergi lebih beberapa dari mereka hari ini di sungai sebelum saya bergabung.

Status dari PR adalah plugin gatsby-comment- * diterapkan dengan benar, tetapi ada perbedaan dalam bagaimana keluaran dari katakanlah, plugin gatsby-comment-prismjs (yang saat ini menghasilkan keluaran HTML) ditangani oleh transformator-komentar vs mdx's pipa. Saya melihat dukungan untuk plugin seperti gatsby-comment-prismjs sebagai hal yang penting, tetapi juga merupakan pendekatan yang kurang optimal. Pendekatan yang lebih baik di dunia MDX adalah menggunakan sesuatu seperti prism-react-renderer sebagai elemen code dalam MDXProvider , yang akan memberi Anda fleksibilitas dan kendali penuh atas rendering jika dibandingkan dengan menggunakan komentar plugin untuk mencapai efek serupa (dan juga memungkinkan Anda untuk berbagi komponen itu dengan konten non-mdx seperti halaman .js).

Saya jauh lebih peduli dengan kerja copy-linked-files dan pemrosesan gambar daripada saya dengan prismjs yang bekerja untuk rilis pertama dukungan plugin gatsby-comment- *.

Kedengarannya luar biasa @ChristopherBiscardi terutama file yang ditautkan-salin dan dukungan gambar, saya ingin membantu tetapi secara realistis saya tidak berpikir saya dapat menanganinya sekarang karena kami benar-benar penuh ^^
Mungkin saya dapat membagikan beberapa umpan balik, saya pikir saya akan mencobanya untuk beberapa halaman meta yang lebih kecil untuk mencoba berbagai hal

menarik untuk mengetahui bahwa Anda sedang streaming pekerjaan Anda .. Saya cukup baru dalam hal siaran langsung dan belum mengerti bagaimana mengetahui kapan Anda akan hidup..mungkin hanya bekerja dengan akun yang saya kira

Senang mendapatkan bantuan Anda kapan pun di masa mendatang jika Anda punya waktu, silakan hubungi saya jika Anda memiliki pertanyaan :) Umpan balik itu sendiri sangat membantu, jadi jika Anda mencobanya, pastikan untuk mengajukan masalah!

menarik untuk mengetahui bahwa Anda sedang streaming pekerjaan Anda .. Saya cukup baru dalam hal siaran langsung dan belum mengerti bagaimana mengetahui kapan Anda akan hidup..mungkin hanya bekerja dengan akun yang saya kira

Saya menyiapkan "kalender" waktu streaming di bagian bawah saluran kedutan saya . Saya tahu jika seseorang memiliki akun twitch dan mereka mengikuti saya, mereka akan mendapat notifikasi ketika saya ditayangkan, tetapi sebaliknya jadwalnya sesuai dengan keinginan. Cukup yakin Anda dapat menonton apakah Anda memiliki akun atau tidak. Saya agak baru dalam streaming sendiri (baru melakukannya beberapa minggu sekarang) jadi selalu terbuka untuk cara yang lebih baik untuk melakukan hal-hal semacam ini. Saya memiliki beberapa orang yang datang berulang kali dan nongkrong / menonton / mengobrol dalam obrolan yang cukup menyenangkan :)

Oke, senang mengetahuinya

dan saya pasti akan memposting masalah ketika saya menemukan;)

Btw, karena Prism disebutkan, saya hanya ingin menambahkan bahwa plugin komentar / rehype yang ideal harus digunakan secara langsung, MDX mendukungnya melalui opsi mdPlugins dan hastPlugins (ini dapat melewati gatsby -mdx). Plugin seperti @ mapbox / rehype-prism dapat ditambahkan ke hastPlugins , tetapi ada beberapa masalah spasi yang saya perbaiki di mdx-js / mdx # 226, jadi setelah itu digabungkan dan dirilis, penyorotan sintaks akan bagus untuk pergi!

ya, benar-benar. gatsby-mdx sudah mendukung penerusan plugin komentar / rehype melalui mdx core. Ini @ mapbox / rehype-prism misalnya (Saya menarik contoh itu dari beberapa diskusi PR / Masalah Anda awalnya @silvenon , terima kasih). Prisma pengetikan ulang AFAIK tidak mendukung plugin prisma sehingga selalu ada pengorbanan tergantung pada kasus penggunaan (saya percaya menggunakan plugin pengulangan untuk prisma berarti Anda akan lebih sulit mengintegrasikan sesuatu seperti react-live , misalnya)

gatsby-comment-prismjs dan dukungan plugin gatsby-comment- * lainnya dirilis di 0.1.1 hari ini, jadi sekarang ada setidaknya 3 opsi untuk penyorotan sintaks antara rehype / comment / react-components 😝