Gatsby: استخدام مكونات React في Markdown source

هذه فكرة عظيمة. سأكون على استعداد للعمل إذا لم يكن متاحًا بعد.

أنا مطور رد الفعل. سيكون من الرائع رؤية رد الفعل يعمل مع Gatsby. اتصل بي إذا كانت لديك أسئلة أو كنت بحاجة إلى بعض المساعدة فيما يتعلق بدمجه.

👍 هذا طلب شائع ، لذا سيكون من الرائع أن يكون لديك شيء يعمل على نطاق واسع!

لقد أنشأت مستودعًا سريعًا وقذرًا لأمثلة حول كيفية إعادة العمل مع gatsby. من الجيد أن نلاحظ أن gatsby تحت غطاء المحرك هو مجرد غلاف سهل الاستخدام للغاية أعلى حزمة الويب ، لذلك لا تزال كل القوة موجودة للقيام بأي شيء تقريبًا.

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

شكرًا ، سأحاول وسأعلمك كيف سارت الأمور.

رائع! لطيف بن. هذا أسهل بكثير في الإعداد مما كنت أتخيله
هاها. عمل جيد أندريه.

في الثلاثاء ، 7 يونيو 2016 الساعة 10:31 مساءً ، كتب Jo Meenen [email protected] :

شكرًا ، سأحاول وسأعلمك كيف سارت الأمور.

-
أنت تتلقى هذا لأنك علقت.

قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -224492088 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe/AAEVh-2doZe_FXFMBxYTJ5FAVqo4XqxNks5qJlO6gaJpZM4Iubim
.

تضمين التغريدة يبدو هذا واضحًا بدرجة كافية عند استخدام ملفات Markdown من خلال غلاف ، ولكن هل سيعمل هذا أيضًا عند استيراد ملف markdown لاستخدامه داخل مكون React؟

تحرير: يبدو أنه يجب أن يعمل فقط خارج الصندوق ، ولكن بطريقة ما يتم تحويل مكون React md الملف إلى أي شيء ...

كنت أفكر في نهج مختلف تفتحه طبقة GraphQL الجديدة (# 420). فتحت مشكلة تسأل عنها في mdash repo https://github.com/wooorm/mdast/issues/13

سيكون ذلك رائعًا! شعرت بأنني كنت قريبًا جدًا من Reactdown على الرغم من ... يتم تحويل ملفات markdown بشكل صحيح إلى مكونات React بواسطة webpack (على الأقل تبدو مثلها) ، لكنها تعطيني مكونات فارغة عندما أستخدمها في الكود الخاص بي.

SachaG هل لديك الريبو في مكان ما يمكنني إلقاء نظرة عليه؟

واو ، غريب حقًا. كنت أحاول إنشاء نسخة طبق الأصل من المشكلة ، وهي تعمل الآن! لست متأكدًا مما تغير ... لا يمكنني الشكوى على ما أعتقد :)

نزل آلهة رياكت في عربة ذهبية ، وها! عمل الرمز

SachaG أتذكر أن هناك بعض المشكلات المتعلقة بكيفية إشارات إعادة التشغيل إلى وقت التشغيل. على أي حال إذا واجهت بعض المشكلات ، فسأكون ثابتًا لتقديم المساعدة.

مرحبا! هل كان هناك أي تحديثات حديثة لهذا؟ ما هي الطريقة الموصى بها لاستخدام مكونات التفاعل في الشطب؟ هل هناك مثال يمكنني اتباعه؟ شكر!

ليس بعد :- (لدي خطة جيدة لكيفية القيام بذلك - قم بتجميع ملف markdown في ملف مكون React حيث تتعامل مع استيراد جميع مكونات React المشار إليها بشكل صحيح ولكنك لست بحاجة إلى بنائها بعد. لا تتردد في ذلك ابدأ العمل عليها إذا كنت في حاجة إليها!

KyleAMathews هل تقصد أنه يجب علي تشغيل برنامج نصي للمحول على ملف markdown الخاص بي ثم إضافة مكونات التفاعل الأخرى التي

سيكون هذا بشكل مثالي مكونًا إضافيًا لـ Gatsby v1 يقوم بهذه الخطوات
تلقائيا.

في الثلاثاء ، 2 مايو 2017 ، 12:50 مساءً كتب Piyush Singh [email protected] :

KyleAMathews https://github.com/KyleAMathews هل تقصد أنني يجب أن أركض
برنامج نصي محول في ملف markdown الخاص بي ثم قم بإضافة التفاعل الآخر
المكونات التي أحتاجها إلى ملف الإخراج الناتج عن خطوة التحويل؟ ذات مرة
يتم ذلك ثم تفعل البناء النهائي؟

-
أنت تتلقى هذا لأنه تم ذكرك.

قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment-298741837 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/AAEVh4riB8uXgeRUybcR6OxsC1EAKnkKks5r14kPgaJpZM4Iubim
.

مثال بسيط على ما أعنيه.

تخيل أن لديك ملف تخفيض السعر على /my-blog/index.md يشبه ما يلي:

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

# This is my broomstick

Yo yo foo

<SweetComponent props="super cool" />

يمكن بعد ذلك تحويل الجسم إلى مكون تفاعل يتم تشغيله من خلال webpack / babel / إلخ. كالطبيعي.

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>
    )
  }
}

الجزء المهم هو كيفية دمج هذا مع نظام الرسم البياني لـ Gatsby. من الناحية المثالية ، يمكنك فقط الاستعلام عن الإصدار "المكون" لملف markdown على غرار الطريقة التي يمكنك بها الاستعلام عن html اليوم.

على أي حال ، هذا رسم موجز لما فكرت فيه.

KyleAMathews شكرا ، أعتقد أنني فهمت الفكرة الآن.

هدفي هو أن أكون قادرًا على كتابة محتوى مثل هذا الذي يستفيد من تصورات MathJax و D3.js ويمكن أيضًا أن يدمج مكونات الرسوم المتحركة Three.js داخل مصدر markdown.

إذا رأيت مصدر html هنا ، فستستخدم الصفحة jQuery لبعض أشرطة تمرير التحكم ، على الرغم من أنني أتخيل أنه قد تكون هناك طرق أفضل لعمل أشياء jQuery باستخدام مكونات React؟

من خلال ما أجمعه حتى الآن ، أتخيل أن إنتاج مثل هذا المحتوى باستخدام إطار عمل Gatsby يمكن تحقيقه بطريقة أكثر إتقانًا وتنظيمًا ، هل هذا صحيح؟

أنا جديد في تطوير الويب ، لكنني أبذل قصارى جهدي لمعرفة كيفية عمل نظام Gatsby حتى أتمكن من المساهمة في تحقيق هذه الأنواع من الأهداف ...

KyleAMathews ، كنت أفكر في الحل المقترح ..

هل تعتقد أن شيئًا مثل markdown-it-jsx يمكن استخدامه أو تحسينه لإجراء التحويل إلى هيكل مكون MD JS المطلوب؟

لحل جزء auto-resolve-this-somehow ، ربما يستطيع المحلل اللغوي الثاني فحص ملف مكون MD JS للبحث عن JSX التي تتطابق مع تلك الموجودة في قائمة تسجيل المكون (والتي يمكن أن تكون ملفًا نصيًا بسيطًا أو بحثًا عن ملف في الدليل حيث سيتم تخزين جميع المكونات) ثم إضافة سطر الاستيراد ذي الصلة إلى أعلى الملف؟

سأبدأ العمل على هذا ، لذا فإن أي تعليقات ستكون رائعة!

مجرد ملاحظة هناك مشروع آخر يقوم بذلك ، ربما سيكون مفيدًا كمرجع: دليل أسلوب التفاعل . مثال على ملف تخفيض السعر

يذكرني تمكين المكونات في تخفيض السعر بهذه التحفة الفنية لبريت فيكتور.

محدث: ومثال آخر: mdxc

وأخرى http://thejameskyle.com/react-markings.html

الحل هو استخدام react-jsx-parser .
في howtographql.com ، نستخدمه في الإنتاج: https://github.com/howtographql/howtographql/blob/master/src/components/Tutorials/Markdown.tsx#L182

عيب واحد: إنه بالطبع أبطأ من مجرد استخدام dangerouslySetInnerHTML ، لأنه

1. يوزع HTML
2. ينشئ شجرة دوم افتراضية
3. يجسد الشجرة الافتراضية باستخدام React

تتمثل إحدى طرق تسريع هذا في عدم إرسال ملف html الأولي مع استعلام الرسم البياني ، ولكن في الواقع إرسال تنسيق تستخدمه مستندات Inferno.js ، كما هو موضح هنا .

نظرًا لأنني حاليًا لا أجد الوقت للقيام بهذه الخطوة الأخيرة من التحسين ، يمكن لأي شخص مهتم بها اتباع هذا النهج.

هذا يعني أن

1. قم ببناء أنواع GraphQL المناسبة ، فلا ينبغي أن تكون هذه مشكلة لأن أنواع GraphQL يمكن أن تكون متكررة وتمثل شجرة
2. بعد الانتهاء من عملية تحليل التخفيضات في remark ، قم بإنشاء تنسيق jsx متسلسل.
3. في React ، قم بإلغاء تسلسل هذا التنسيق.

هناك خيار آخر كنت أتطلع إليه وهو https://github.com/mapbox/jsxtreme-markdown

يمكننا استخدام نمط مماثل. فقط قم بتحويل تخفيض السعر إلى مكونات JSX. استخدم المحددات المخصصة لإضافة JavaScript و JSX. يمكننا استخدام إعداد Remark الحالي الخاص بنا على ما يرام. ولن يكون هناك الكثير من عقوبة الأداء حيث ستكون مجرد صفحات رد فعل عادية.

هناك أيضًا https://github.com/cerebral/marksy ، والذي استخدمته مؤخرًا لتحقيق تأثير جيد.

هل هناك نهج موصى به لهذا في سياق غاتسبي أم أنه لم يُقرر بعد؟

مرحبًا ، هل لديك أي توصية لتضمين المكونات الجمركية في ملفات التخفيض في gatsby؟

خيار آخر في المجموعة https://idyll-lang.github.io/

يبدو أن ماركسي يعمل بشكل جيد لحالة الاستخدام هذه

عندما تعيد شجرة عناصر التفاعل ، أتساءل كيف يمكنني دمج ذلك في مكون غاتسبي الإضافي؟

KyleAMathewsrevolunet ما رأيك في تسجيل المكونات التي نحتاج إلى استخدامها كعناصر مخصصة ، بعد ذلك يمكننا ببساطة تضمينها في منشور المدونة وترك باقي العمل ليقوم المتصفح به؟

سيؤدي هذا إلى التخلص من أي حاجة لتحليل تخفيض السعر باعتباره شجرة تفاعل والحفاظ على أداء تطبيقنا ، ومع ذلك ، لا أعرف ما إذا كانت ستكون هناك تكلفة أداء ، للقيام بـ ReactDOM.render كل مرة نحتاج فيها إلى إضافة عنصر جديد مكونات مخصصة ، لكنها لا تزال تعطينا طريقة رائعة لإضافة وظائف ديناميكية إلى منشورات المدونة.

abdulhannanali يعد تسجيل المكونات المتوفرة في تخفيض السعر فكرة جيدة ، لكن عناصر العناصر المخصصة لا تبدو ملائمة جدًا من جانب الخادم :)

لذلك كنت أحاول التفكير في طريقة نظيفة لخلط React و Markdown إلى الأبد. أو على الأقل منذ أن بدأت العمل على Gatsby.

وفي النهاية أعتقد أن لدي فكرة يمكن أن تنجح.

سنستخدم نفس القاعدة للتمييز بين عناصر HTML العادية ومكونات React كما تفعل JSX ، أي يتم كتابة React بأحرف كبيرة.

لذلك يمكنك تضمين مكونات React مباشرة في Markdown الخاص بك على سبيل المثال

# 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} />

ثم يتم تحليل هذا في AST مثل:

[
  [{ 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 }
      }
    }
  ]
];

ثم في المكون الخاص بك ، بدلاً من عرض HTML مباشرةً (نمط الخطر) ، يمكنك بدلاً من ذلك تمريره إلى وظيفة مساعدة مع تعيين كل مكون من مكونات React ، مثل:

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

سنحتاج إلى عمل بعض النماذج الأولية للتأكد من أن هذا يعمل مع Remark لكنني متأكد تمامًا من أن React "Html" ستمرر دون تغيير. لذلك نحتاج فقط إلى محلل لتقسيم HTML وتحويل أجزاء React JSX إلى بيانات بالإضافة إلى lib الواجهة لتقديم "AST" الناتج.

أفكار؟

ثم في المكون الخاص بك ، بدلاً من عرض HTML مباشرةً (نمط الخطر) ، يمكنك بدلاً من ذلك تمريره إلى وظيفة مساعدة مع تعيين كل مكون من مكونات React ، مثل:
[...]
أفكار؟

هذا شيء قمنا به أيضًا (مبسط للغاية ، وليس آمنًا في الواقع ومصممًا فقط لعلامات محددة) كانت حالة الاستخدام الخاصة بنا هي تصميم / تخطيط مستند JSON:

<IconGrid src="sensors.json" />

كان هذا مفيدًا حقًا لتجنب المحتوى المكرر ونحن نفكر في استخدام آلية مماثلة لمكونات وثائق API القابلة لإعادة الاستخدام.

هناك شيء يفتقر إليه هذا الحل ، والذي لم نحله أيضًا ، وهو استخدام تخفيض السعر داخل خصائص المكون. حتى يكون شيء من هذا القبيل ممكنًا:

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

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

بعد تجربة الكثير من الأشياء في هذه المساحة لبعض الوقت الآن ، أنا مقتنع بأن الأمر يحتاج إلى حل على مستوى تخفيض السعر. بمعنى أن نكهة تخفيض السعر تحتاج حقًا إلى فهم jsx / رد فعل. تكمن المشكلة حقًا في دعم jsx لاستيفاء جافا سكريبت واختناقات تخفيض السعر. Jsxtreme-markdown يقترب ويعمل حول هذا من خلال معالجتها أولاً ثم استخدام تخفيض السعر لتحليل الباقي. هناك طريقة أخرى تتمثل في الاعتماد على القدرة الطبيعية لمحللي MD على التعامل مع html ، وبالتالي فإن jsx المباشر (المحدد ، على سبيل المثال ، سوف يتعامل مع العناصر الكبيرة) ولكنك تواجه قيودًا مزعجة سريعًا حيث تكون عالقة في الدعائم المتسلسلة فقط ولا يوجد تخفيض متداخل (على سبيل المثال Markdown في الداخل ، الدعائم ، الأطفال). المشكلة الأخرى هي أن الترطيب على العميل يصبح مزعجًا قبل الميلاد ، فأنت بحاجة إلى وقت تشغيل (وعمومًا وقتًا كبيرًا إلى حد ما) لتحويل سلسلة إلى عناصر تفاعل ، وهو ليس مثاليًا لتركيز غاتسبي على الوقت السريع للتفاعل والأداء.

أعتقد أن أكثر الطرق الواعدة للمضي قدمًا هي اتباع نهج قائم على الذكاء ، ولكن من أجل ذلك تحتاج حقًا إلى متغير تخفيض السعر الذي يختلف بدرجة كافية عن الموجود حاليًا ليكون مشروعًا كبيرًا

مجرد رمي في 2 سنتي!

قبل أن أعرف أن gatsby موجود (منذ عامين) ، قمت بإجراء طعنة في صنع مولد موقع ثابت يتصرف بشكل مشابه لـ jekyll ( rovr ). كنت أرغب في مزج تخفيض السعر ، والتفاعل ، و html في ملفات md الخاصة بي.

لقد اخترت استخدام regex للعثور على <CapitalizedComponents/> ضمن محتوى تخفيض السعر وقد نجح الأمر بشكل جيد باستثناء أنه كان يحتوي على بعض حالات الحافة. في ذلك الوقت ، كنت أستخدم علامة والتي كان لها بعض الآثار الجانبية الغريبة حول تحليلها لـ html.

أيضًا ، لم يسمح التعبير العادي البسيط الخاص بي بعلامات نهاية المكون وبالتالي لا يوجد أطفال ...

<Component>
   <Child/>
</Component>

على أي حال ، أنا متحمس جدًا لجاتسبي لدعم هذا! أنا بصدد تحويل موقع jekyll الخاص بي إلى gatsby وأنا على وشك الانتهاء. مهمتي التالية هي معرفة كيفية تغيير تضمين jekyll الخاص بي في مشاركات مدونة md إلى مكونات في إصدار gatsby الخاص بي.

jquense توافق على أن عدم دعم JS في تخفيض السعر سيكون بمثابة قيود. ولكن في الاتجاه الصعودي ، سيتناسب هذا بشكل جيد مع هيكلنا الحالي. سيكون وقت التشغيل lib بسيطًا جدًا ، ما عليك سوى إجراء حلقة متكررة على عناصر إنشاء AST. يمكننا أيضًا إعداده للتحليل التلقائي لأي نص فرعي للمكونات باعتباره تخفيض السعر ، لذا فإن مكونات هذا ستكون dangerouslySetInnerHTML على props.children .

إنه ليس حلاً بنسبة 100٪ ولكنه يعمل مع الكثير من الإعدادات. أنا أيضًا لست معجبًا كبيرًا بفكرة كتابة JS داخل تخفيض السعر. تفقد كل دعم الأدوات بهذه الطريقة.

jakedeichert نعم ، التعبير العادي البسيط يذهب فقط حتى الآن. رائع ، لقد حصلت على شيء مشابه لهذا العمل! هذا يؤكد صحة المفهوم. نود استخدام محلل JS يفهم JSX لاستخراج المعلومات المنظمة. بهذه الطريقة يمكننا دعم المكونات المتداخلة.

KyleAMathews ما هو تقدم ما اقترحته؟

بعض الأفكار حول هذا:

1. لدي مثال عملي يستخدم الملاحظة لتحويل تخفيض السعر الذي يحتوي على مكونات تفاعل عشوائية tmp-comment-jsx . لقد استخدمت remark-html و hast-util-to-html كمشاريع أساسية.
   هنا مثال على الاستخدام + الإخراج: مثال
   قد أقدم بعض المعلومات الإضافية حول كيفية عملها إذا كنت مهتمًا.
2. أنشأ MapBox حزمة ملاحظات تفاعلية تحول تخفيض السعر إلى عناصر تفاعل باستخدام الملاحظة. قد يستغرق الأمر بعض العمل لتكييف الحزمة لقبول عناصر التفاعل المخصصة.

لم يبدأ أحد في العمل عليه afaik.

تكمن المشكلة في هذين الأسلوبين في أنهما لا يعملان مع نظام البيانات المستند إلى GraphQL من Gatsby نظرًا لأن استعلامات GraphQL يمكنها فقط إرجاع البيانات التي لا يتم تشغيل التعليمات البرمجية. ملاحظة رد فعل على سبيل المثال هل markdown => تحويل html في العميل للالتفاف على هذا الأمر الذي يعد أكثر تكلفة من المثالي.

لذا للعمل مع GraphQL ، تحتاج إلى وقت تشغيل العميل لإنشاء مكونات React. جاء اقتراحي من العمل من خلال تصميم من شأنه أن يتيح أصغر وقت تشغيل ممكن.

أعتقد أنني فهمت ذلك الآن. إذن ما هو مطلوب في رأيك هما جزءان من الكود:

1. markdown -> جاهز لاستخدام HAST الذي يدعم مكونات التفاعل. (يجب تشغيل هذا الرمز في وقت البناء؟)
2. تم تمكين التفاعل HAST -> عنصر رد الفعل (يجب أن يعمل هذا من جانب العميل بأقل وقت تشغيل / تافه)

هل أفهمها بشكل صحيح؟ هل فاتني شيء؟

نعم!

ركض عبر مشروع آخر في هذا الفضاء - لديه بعض الأفكار الشيقة https://github.com/luiscarli/md-to-react

مرحبا،

أنا آخذ طعنة أخرى. لدي مثال عملي للجزء الأول الذي ينشئ HAST هنا ملاحظة-تخصيص-عنصر-إلى-تسرع . لا يزال بحاجة إلى دعم استخدام تخفيض السعر كعناصر فرعية وربما أداة تحميل حزمة الويب التي تستخدمه.

KyleAMathews هل تعتقد أن النهج

بالنسبة للجزء الثاني ، يمكننا استخدام شجرة التركيب / التسرع إلى النص الفائق . هنا مثال على الاستخدام wooorm / comment-vdom .

@ fazouane-marouane رائع! نعم ، من نظرة سريعة يبدو قريبًا جدًا. عمل عظيم!

لا نريد استخدام أسلوب hast-to-hyperscript على الرغم من أنه في الواجهة الأمامية لأنه يحتوي على مجموعة من التبعيات ونريد أن يكون وقت التشغيل خفيفًا قدر الإمكان - على سبيل المثال ، قم بالتكرار من خلال AST لإنشاء عناصر React. لذا ، انقل قدر ما في المكتبة الثانية إلى الوحدة النمطية الخاصة بك.

KyleAMathews هذا رائع إذن! سأحاول القيام بالخطوات المتبقية في الأيام القليلة القادمة. نأمل أن يقرّبنا هذا خطوة من حل عملي.

مرحبًا @ fazouane-marouane و @ KyleAMathews ، لقد قرأت مناقشتك وطبقت إصدارات "بسيطة" من الأجزاء المختلفة التي وصفتها هنا على هذا التطبيق الذي أعمل عليه.

الأجزاء المثيرة للاهتمام هي تلك التي تستخدم كود @ fazouane-marouane في شكل ملحق gatsby هنا والجزء الذي نقدم فيه HAST هنا . قد يكون من المثير للاهتمام أيضًا معرفة كيفية استرداد HAST بفضل GraphQL.

يرجى ملاحظة أنه في الوقت الذي أكتب فيه هذا التعليق ، لم يكن الأمر مثاليًا ومحسّنًا ونظيفًا.

تحرير: مكوّن renderHAST مستوحى بشكل كبير من الطريقة التي تتعامل بها الفينوم مع تخفيض السعر من جانب العميل: https://github.com/phenomic/phenomic/blob/master/packages/plugin-renderer-react/src /components/BodyRenderer.js

pbellon شكرا لانضمامك في! سيوفر هذا على الجميع الكثير من الوقت. يبدو أن الكود يقوم بما هو مطلوب لبقية الخطوات. سأحاول في وقت لاحق هذا المساء.

الشيء الوحيد الذي أحتاج إلى تصحيحه هو طريقة التعامل مع العناصر الفرعية.
الآن إذا قمت بتعيين الكتابة في تخفيض السعر This is a test <MyComponent>let's see how children are handled</MyComponent> فسيتم تعيين خاصية MyComponent children على [0, null] .

لكنني لست متأكدًا مما إذا كان يأتي من المحلل اللغوي أو من طريقة ترطيبي HAST.

pbellon تأتي من المحلل اللغوي. إنه محلل بسيط لعمل نموذج أولي لهذا الأمر برمته في عملية تخفيض السعر. سيحتاج بالتأكيد إلى بعض الإصلاحات ليكون قابلاً للاستخدام في جميع الحالات. لا تتردد في إرسال مشكلة إذا صادفت المزيد من الأمثلة. سوف يساعد في تكوين قاعدة اختبار جيدة على أي حال.

@ fazouane-marouane أرى. سأحاول من جانبي اللعب بالرمز الخاص بك لمعرفة ما إذا كان بإمكاني تنفيذ هذه الميزة (وإجراء العلاقات العامة إذا تمكنت من القيام بذلك) ولكن لا يبدو أنه تعديل تافه 😮
لقد قمت بإنشاء مشكلة في الريبو الخاص بك هنا

تتناغم مع بلدي 0.02 دولار. كجزء من تطوير GitDocs ، كنا بحاجة إلى طريقة للسماح للمستخدمين بتضمين JSX داخل ملفات markdown. هذا ما لدي حتى الآن.

تحليل Markdown

استخدامات معالجة تخفيض السعر موحدة ، التصريح ، و rehype . تم تفرع رمز مميز مخصص من رمز HTML المميز لكتلة الملاحظات مع regex إضافي لاكتشاف JSX. يتيح هذا الرمز المميز إعادة كتابة كتل JSX كـ raw لمزيد من المعالجة.

كتبت rehype مخصصة المساعد الذي يعمل على غرار rehype-الخام ولكن هذا الدعم JSX وبعض تقييم التعبير الأساسي. يعثر المكون الإضافي على عقد raw ويحدد ما إذا كانوا من JSX بمحاولة تحليل الكتلة باستخدام acorn-jsx . إذا نجح التحليل ، يتم تحويل JSX AST الذي تنتجه البلوط إلى HAST.

دعم JSX

يمكنني حتى الآن تحويل البتات التالية من JSX (أمثلة على الحالات المأخوذة من مجموعة الاختبار)

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

<Test>some text</Test>

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

التعبيرات

يتم دعم تقييم تعبير وقت الترجمة البسيط .

<Test attr={1 + 2}/>

عقدة HAST التي تم إنشاؤها سيكون لها الخاصية 'attr' مضبوطة على 3 .

تعبيرات المصفوفة

استخدام Array.prototype.map() مسموح به في العقارات:

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

يمكنك حتى التخطيط عبر مصفوفة وإنشاء توابع JSX

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

ستتم ترجمته إلى HAST كمكافئ لـ

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

محددات

دعم التعبير محدود للغاية ولم تتم مراجعة الأمان. لا يستخدم الرمز eval والوصول إلى أشياء مثل window لا يجب أن يكون ممكنًا ولكن لا يمكنني تقديم أي ضمانات.

لقد أجريت تجربة في هذا المجال حيث يمكنك استخدام ملحقات ملاحظة غاتسبي بشكل كامل كالمعتاد. تقوم بتمرير html Graphql إلى أداة تحميل حزم الويب التي تُنتج كود response.js. لسوء الحظ ، لديها العديد من المشكلات ، وتكسر عمليات الإنتاج الفردية.

          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,
            },
          })

حيث يقوم cdResolve بإرجاع سلسلة مثل !!cd-resolve-loader!foo.md . غاتسبي لا يحب ذلك. يعمل على الأقل في خادم التطوير.

باقي الكود هنا .

ناتج البناء هو مكون بسيط مع مجموعة من العقد الثابتة للأطفال.

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]);

هاه مثير للاهتمام!

هذا لسوء الحظ سيؤدي أيضًا إلى كسر إعادة التحميل السريع للتخفيض في التطوير بقدر ما أستطيع أن أقول.

نعم ، كانت هذه مشكلة أخرى. أعتقد أنه إذا تم حل المشكلات بطريقة ما ، فستكون إحدى أفضل النتائج النهائية ، من حيث حجم الحزمة ووقت التفاعل. بالطبع ، هذا بعيد كل البعد عن أن يكون حلاً عمليًا. هل من نصائح حول كيفية تجميع ملفات JS بعد عمل الملاحظة؟

brigand أعتقد أن الحل الأسهل هو ما أوجزته في تعليق سابق https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -336681894

KyleAMathews بالنسبة للحل الذي اقترحته ، نعرف الآن كيفية تحويل تخفيض السعر الذي يحتوي على jsx إلى html AST باستخدام الملاحظة. لقد حللنا آخر خطأ مانع. كل ما نحتاجه الآن هو إنشاء الكود الذي يمكنه تحويل AST هذا إلى مكون رد فعل ودفعه إلى npm. سيكون لدي بعض الوقت للقيام بذلك بحلول نهاية الأسبوع المقبل.

لا تتردد في الظهور على عتبة منزلي بمضرب بيسبول إذا لم أدفع شيئًا بحلول ذلك الوقت.

@ r24y حصلت على هذا العمل !!! تحقق من العلاقات العامة الخاصة به https://github.com/gatsbyjs/gatsby/pull/3732 والصفحة النموذجية على موقع مثال الملاحظات باستخدام الملاحظات!

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

لذا ، أبلغ عن تقدمي هنا. كان لدي الوقت لإنهاء الخطوة الثانية.

بشكل عام ، لدينا حزمتان:
التحليل إلى HAST: @ dumpster / comment-custom-element-to-hast
التقديم البسيط إلى مكون التفاعل: @ dumpster / hast-reaction-renderer

اقترحpbellon على غاتسبي المساعد هنا.

يجب أن يكون خط الأنابيب هذا أكثر تساهلاً من إعادة التسخين. إذا كانت ذاكرتي تخدمني بشكل صحيح ، فإن إعادة الكتابة تستخدم parser5 الذي لا يقبل <Note value="my content" /> ولا أتذكر ما إذا كان يقبل الهيئات لعناصر مخصصة.

KyleAMathews لست متأكدًا من الخطوة التالية من هنا.

@ fazouane-marouane رهيبة !!!

أعتقد أن الخطوات التالية ستكون إضافة موقع مثال إلى الريبو حتى نتمكن من عرض عملك أيضًا - ثم نحتاج إلى الحصول على صفحة مستندات تنتقل إلى gatsbyjs.org للتحدث عن الخيارات والمفاضلات المختلفة لديهم.

حلو ! شكرا على التوضيحات.

سأحاول الحصول على شيء ما للأسبوع القادم أو الأسبوع الذي يليه (أبدأ في وظيفة جديدة يوم الاثنين 😅).

الرنين. بعد قراءة https://using-remark.gatsbyjs.org/custom-components/ وتجربتها ، قمت بعمل حزمة صغيرة تسمى gatsby-comment-component لتجنب التحقق من تحذيرات DOMNesting التي تحصل عليها إذا كان المكون الخاص بك داخل تخفيض السعر يحتوي على عناصر على مستوى الكتلة (div ...). يتم تغليف المكونات المخصصة افتراضيًا في فقرة ، بينما يتم لفها بهذه الحزمة في div.
إنه سهل الاستخدام

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

آمل أن يكون هذا مفيدًا لشخص ما.

Hebilicious شكرا على البرنامج المساعد ؛ نعم ، لقد أدركت أن جميع المكونات المخصصة تم عرضها داخل عنصر <p> وكنت أستخدمه ،

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

كحل بديل.

ومع ذلك ، ليس من السهل تضمين جميع المكونات المخصصة في ملف التكوين مرة أخرى ، مثل ما فعلته بالفعل في ملف قالب markdown.

@ li-xinyang أتفق معك. لقد أضفت ميزة الكشف التلقائي حتى لا تضطر إلى إضافتها يدويًا.
تأكد من ترقية الحزمة إلى أحدث إصدار 1.1.0 إذا كنت تريد تجربتها.
يعمل خارج الصندوق مع:

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

هذا جزء من الظل ، ولكن قد يكون الأشخاص هنا مهتمين بالتنسيق مع rauchg : راجع الاقتراح

@ r24y يبدو أنيق!

أعتقد أن هناك عدة طرق يمكن حلها مع مقايضات مختلفة.

لا أعرف ما إذا كنت على دراية بالمشروع المسمى Catalog والذي يدعم أيضًا تضمين مكونات React في Markdown . هناك أيضًا مكون إضافي لـ Gatsby يسمى نظام تصميم gatsby-note والذي يحاول تكييف مفهوم الكتالوج.

هذا الحل يبدو مثاليًا arcticicestudio

الكتالوج يبدو لطيفا. والمكوِّن الإضافي لنظام gatsby-note-design-system رائع ، لكنه لا يدعم مكونات React. أعتقد أنه يفعل شيئًا صحيحًا على الرغم من ذلك ، فهو يستخدم بنية كتلة التعليمات البرمجية الحالية لإضافة وظائف أكثر تعقيدًا إلى Markdown.

كما تمت مناقشته عدة مرات في هذا الموضوع ، أعتقد أن استخدام المحلل اللغوي الحالي ليس الوظيفة المطلوبة تمامًا. ربما بدلاً من عناصر React العائمة الحرة ، سيكون من الممكن الإشارة بوضوح إلى مكونات React المعقدة بشكل أكثر وضوحًا ، على سبيل المثال قد يبدو ملف markdown كما يلي:

 # بعض العناوين
 ... الخ الخ ...

<Example>
   <Etc />
</Example>

عندما نريد عرض عنصر react مضمن ، فإننا نحدد اللغة على أنها react ، ويقوم محلل JSX على دراية بتشغيل وإنشاء AST صالح يمكن استخدامه مع إعادة الكتابة. إذا أردنا مثال منشور JavaScript عادي ، فما عليك سوى استخدام اللغة العادية javascript .

مرحبا شباب ، مناقشة عظيمة هنا.
أنا أستخدم gatsby-remark-component ولدي بعض الأسئلة:

1. هل هناك طريقة "للكشف التلقائي" عن المكونات؟ هذا من شأنه أن يزيل الحاجة إلى التوضيح عن مكوناتي في كائن المكونات:

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

  },
}).Compiler

1. هل هناك طريقة لدمج بعض الصور مع gatsby-remark-images ؟ أحد أهدافي هو أنه يمكن للمستخدم إضافة صورة وإرسالها إلى المكون الخاص بي عبر الدعائم ، على سبيل المثال. شيء مثل:
   <my-component header-image="[](./image.png)"><my-component>

شكر!

ThiagoMiranda نعم ، (2) سيكون رائعًا! حالة الاستخدام الخاصة بي هي معرض للصور:

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

يبدو محلل تخفيض السعر المدرك لـ JSX بواسطة Zeit واعدًا: https://github.com/mdx-js/mdx

MDX هي مجموعة شاملة لمواصفات CommonMark التي تضيف JSX المضمنة وبناء جملة الاستيراد / التصدير.

إنه مبني على الملاحظة وإعادة الصياغة ، لذلك قد يكون بديلًا رائعًا للاستخدام في مشاريع غاتسبي

لقد كتبت مكونًا إضافيًا لـ mdx: https://github.com/nhducit/gatsby-plugin-mdx

رائع ، أردت تجربة ذلك مع Gatsby :)

باستخدام المكون الإضافي mdx الخاص بـ nhducit ، من السهل جدًا توصيل صفحات MDX !!

1. أضف التكوين لـ mdx والمصدر في الدليل pages/ .

gatsby-config.js

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

1. استعلم عن جميع ملفات markdown وأنشئ صفحات لكل منها.

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. استخدم MDX 🎉

src/pages/my-markdown-page.md

import MyComponent from '../components/MyComponent'

# Title

_some content_

<MyComponent />

تضمين التغريدة سيكون من الرائع رؤية مثالك مضافًا إلى README الخاص nhducit .

avigoldman العلاقات العامة موضع ترحيب! 👍

avigoldman يبدو أن هذا النهج يتعارض مع المادة الأمامية؟

nhducit سأقدم العلاقات العامة!

lintonye ، هل يمكنك أن تشرح أكثر قليلاً عما

lintonye هل حاولت استخدام صادرات mdx؟ يبدو أنه مكافئ لـ mdx: https://github.com/mdx-js/mdx#exports

صححني إذا كنت مخطئًا ، ولكن يبدو أننا بحاجة إلى انتظار Gatsby 2.0 مع إصدار أحدث من حزمة الويب لتمرير ملحقات الملاحظات إلى MDX.

تضمين التغريدة

nhducitavigoldman عند تصدير البيانات من mdx الملفات باستخدام بناء الجملة التصدير، وكيف يمكننا الوصول إلى ذلك في واجهة المستخدم لدينا عند تقديم المكونات؟

نفس السؤال هنا ، مع MDX حاليًا ، لم يكن قادرًا على:

• تطبيق أنماط مخصصة على صفحات التخفيضات
• حقن محتوى المادة الأمامية على هيئة pathContext من صادرات mdx المسماة
  يمكن القيام بذلك في الواقع ، لكن هذا يتطلب إنشاء ملف .js لاستيراد ملف .md ، لكل ملف .md ، لذلك يكرر العمل ...

slorber لدي حل رائع في هذا الريبو: https://github.com/avigoldman/avigoldman.com

بالتأكيد ليست مثالية. سأقوم بإعادة زيارة هذا بمجرد خروج Gatsby V2.

مرحبا وشكرا @ avigoldman

لقد حاولت أيضًا القيام بذلك هنا https://github.com/nhducit/gatsby-plugin-mdx/issues/13#issuecomment -392334706

يبدو أنك عثرت على القطعة المفقودة التي لم أكن مضطرًا لاستخراج الصادرات بشكل صحيح: babel-plugin-config-export

يمكنك إنشاء تخطيط واحد لكل صفحة نشر مدونة ، ولست متأكدًا تمامًا مما إذا كان من المفترض أن يتم ذلك بهذه الطريقة أو نوع التأثير الذي قد يحدثه على أداء Gatsby ، حيث أن الأشخاص الذين يستخدمون Remark عادة ما يكون لديهم تخطيط واحد بدلاً من ذلك ...

ماذا عن نشر المكون الإضافي الخاص بك على NPM؟ يبدو أن هذا أكثر قابلية للاستخدام من nhducit فيما يتعلق بالمادة الأمامية

أيضًا ، من أين يأتي جزء الرسم البياني mdx؟

حول MDX ، أضافوا للتو "MDXProvder" (استنادًا إلى سياق React) والذي قد يكون مفيدًا لدمج العلامات المخصصة مع Gatsby ، ccavigoldman

slorber لقد قمت بإنشاء gatsby-transformer-mdx حتى أتمكن من الاستعلام عن ملفات MDX.

أنا أعامل كل تخطيط على أنه صفحة ، وكل ملف MDX على أنه المحتوى. لذا فإن التنسيق يحصل على سياق الصفحة ثم يتم إسقاط MDX فيه (كما تفعل مع html الذي تم إنشاؤه بالملاحظات).
لن يعمل هذا في Gatsby V2 نظرًا لأن مكونات التخطيط الخاصة ستختفي.

MDXProvider يبدو واعدًا!

بإضافة 2 ¢ هنا ، تمكنت من اختراق معظم موقع الويب الخاص بي (لا يزال الريبو يستخدم Jekyll ، وسيتم قريبًا تحديث أو إضافة ريبو جديد) إلى Gatsby باستخدام mdx بفضل @ avigoldman's gatsby-transformer-mdx!

هذا جيد! يجب أن يكون لديك بعض الوقت في نهاية هذا الأسبوع / الأسبوع القادم لتحويله إلى حزمة تلعب بشكل جيد مع Gatsby V2.

avigoldman شيء واحد لم أستطع html (وهو عبارة عن سلسلة) ، ما الذي يستخدمه محولك؟ كيف تعمل أداة تحميل حزمة الويب إذا لم تكن مطلوبة في أي مكان؟

أوه ، لقد قرأت للتو التعليقات أعلاه ، الحيلة هي أن Gatsby v1 يلف كل شيء تلقائيًا في مكون تخطيط ، لذلك أنت تستخدم absolutePath لاستهداف ملف MDX. 😃 شكرا لهذه الحيلة!

avigoldman هل من أخبار عن البرنامج المساعد Gatsby 2؟ سيكون من الرائع أيضًا أن تعطي توجيهات تقريبية حول كيفية بنائه بدون مكون التخطيط الذي لم يعد موجودًا في Gatsby 2.
شكر!

كنت آمل أن أتمكن بطريقة ما من استخدام ميزة MDX export default ، لكن تمرير أي أدوات إضافية بخلاف children لا يبدو أنه ماكينة صراف آلي ممكنة. mdx-js / mdx # 187

إذا تم دمج العلاقات العامة الخاصة بي (mdx-js / mdx # 189) ، أعتقد أننا سنكون قادرين على استخدام MDX مع gatsby-plugin-mdx و gatsby-transformer-mdx. التغيير الوحيد المطلوب سيكون من جانبنا ، وهو تصدير قالب المنشور الخاص بنا من ملفات .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>
)

أعتقد أن هذا أمر بالغ الأهمية حقًا. في الوقت الحالي ، تعيد جميع المكونات الإضافية gatsby-remark-* تنفيذ مجموعة من منطق العرض الذي يمكن وربما يجب أن يكون في React. هذا يمكن أن يبسط الأمور كثيرا.

DylanVann أن نوعا ما يعتمد. تقوم المكونات الإضافية gatsby-remark-* بالكثير من عمليات التحويل في وقت الإنشاء ، والتي إذا فعلناها في React ، فإن ذلك يعني شحن الكثير من JS إلى المتصفحات. أيضًا الأشياء التي يستحيل فعلها في React مثل https://www.gatsbyjs.org/packages/gatsby-remark-images/؟=remark-image

من الناحية المثالية بالطبع نحن نمزج كلا العالمين.

KyleAMathews نعم ، هذا يعني المزيد من JS على جانب العميل ، على الرغم من أنه سيظل يتم تسليمه أولاً gatsby-image لبعض أجزاء موقعهم على أي حال ، لذا في هذه الحالة لا يمثل التكرار مشكلة.

أفهم أن هناك فائدة في المكونات الإضافية gatsby-remark-* . يبدو منطق العرض على وجه التحديد ، والذي يتم إجراؤه حاليًا باستخدام السلاسل النصية ، أنه يمكن تنفيذه في React.

لقد حصلت على هذا النوع من العمل باستخدام طريقة htmlAst / rehype-react .

يبدو الأمر كذلك ، لكن من الناحية العملية ، الأمر أكثر تعقيدًا. إذا كنت تعتقد أنك تعمل على شيء ما ، فيمكنك إثارة قضية جديدة باقتراح مركّز.

يبدو أنه مشكلة صعبة الحل. لسوء الحظ ، لا أعتقد أن لدي الوقت الكافي لتنفيذ أي شيء أو تقديم اقتراح. فكرة عمل المكونات الإضافية remark جزئيًا باستخدام مكونات React المخصصة تعمل بالتأكيد ، ولدي رمز يستخدمها.

تم إنشاؤه بواسطة @dylanvann/gatsby-remark-cloudinary من صور التخفيضات المنتهية بـ mp4 . تكمن الفكرة في تحسين مقاطع الفيديو (تغيير الحجم في وقت الإنشاء وإضافة ملصقات). ومع ذلك ، أردت منطق العرض في React. تتم معالجة الفيديو في وظيفة أخرى ولكن هذا جزء مما تم استبدال HTML للعقدة.

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

ثم استخدام مكون مخصص مع 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 من GraphQL.

لذلك يعمل هذا المكون مع SSR وجانب العميل. على أي حال أنا أعرف كيف هو الحال مع OSS. أنا أقول فقط أعتقد أنها ستكون ميزة رائعة ويمكن أن تقلل من تعقيد الكود ، لذلك سيكون من الرائع أن يكون لدى أي شخص الوقت لاكتشاف حلول أفضل.

أنا لا أختلف مع أي شيء تقوله ، أعتقد أن بدء مناقشة جيدة سيكون أفضل بكثير في موضوعها الخاص ، بدلاً من نهاية سلسلة محادثات محملة للغاية تضم أكثر من 60 تعليقًا. 😉

صممت أنا و gatsby-mdx لإيواء تكاملات وأدوات MDX متوافقة مع 2.0.

تعمل صفحات gatsby .mdx حاليًا بشكل افتراضي بعد تمكين المكون الإضافي وتمت إضافة الميزات الإضافية التالية أعلى mdx:

• استخدم واستعلام عن المادة الأمامية بنمط JSON الكلاسيكي
• حدد التنسيقات الافتراضية لملفات mdx التي لا تحدد أحدها

نحن نخطط أيضًا لعمليات تكامل أكثر تعقيدًا لـ

• المعالجة المتقدمة للصور
• مخصصة md و hast الإضافات.
• التوافق مع جميع المجالات نفسها مثل ملاحظة محول غاتسبي

ما زلنا في وقت مبكر جدًا من دورة الحياة ، لذا أخبرنا إذا واجهتك أية مشكلات وسننجزها :)

ChristopherBiscardi هل من المفترض استخدامه مع برنامج gatsby-plugin-mdx أم بدلاً منه؟

silvenon يبدو أن gatsby-plugin-mdx سيتم إهماله وبالتالي سيتوقف عند 1.0 ، بينما سيتقدم gatsby-mdx للأمام بـ 2.0 وما بعده.

@ m-allanson أعتقد أنه من الآمن إغلاق هذه المسألة الآن بعد أن أصبح لدينا gatsby-mdx ؟

أعتقد ذلك ، شكرًا للجميع 🎉

إذن ، هل يتم تفضيل gatsby-mdx الآن على rehype-react بالتزامن مع gatsby-transformer-remark كما هو موضح هنا ؟

إذا لم تكن الإجابة بنعم قاطعة ، فهل يمكن لأحد أن يشرح مزايا وعيوب كلا النهجين؟

أعتقد أن هذا الجزء من منشور المدونة يجيب على سؤالك. يوفر رد فعل إعادة الصياغة عناصر HTML مخصصة ترسم لمكونات React ، ولكن MDX هو في الواقع JSX داخل Markdown ، وهو أكثر قابلية للتنبؤ به ولديه تحذيرات أقل.

أنا لست في فريق Gatsby ، لكنني أقول نعم ، gatsby-mdx هي الطريقة المفضلة لـ React في Markdown.

janosh بقدر ما أعرف أن gatsby-mdx لا يمكنه استبدال ملاحظة gatsby-transformer-تماما بعد
يبدو أنه لا يزال يفتقد صور gatsby-note وملفات gatsby-note المرتبطة بنسخ الملفات على سبيل المثال وغيرها من المكونات الإضافية لملاحظات gatsby ..
أعتقد أنهم يعملون على ذلك ولكنهم غير متأكدين من الوضع الحالي

ولكن إذا لم تكن بحاجة إلى هذه المكونات الإضافية أو يمكنك الانتظار ، فسأقول نعم ، على الأقل سأفضلها ، ويبدو أنظف بالنسبة لي

CanRau أنا في البث المباشر قبل الدمج.

حالة العلاقات العامة هي أنه يتم تطبيق المكونات الإضافية gatsby-comment- * بشكل صحيح ، ولكن هناك اختلافات في كيفية معالجة إخراج المكوّن الإضافي gatsby-comment-prismjs (الذي ينتج حاليًا إخراج HTML) بواسطة محول الملاحظة مقابل mdx خط انابيب. أرى أن دعم المكونات الإضافية مثل gatsby-comment-prismjs مهم ، ولكنه أيضًا نهج دون المستوى الأمثل. تتمثل الطريقة الأفضل في عالم MDX في استخدام شيء مثل prism-reaction-renderer كعنصر code في MDXProvider ، مما يمنحك مرونة وتحكمًا كاملين في العرض عند مقارنته باستخدام لتحقيق تأثير مماثل (وتسمح لك أيضًا بمشاركة هذا المكون مع محتوى غير mdx مثل صفحات .js).

أنا مهتم أكثر بكثير بالملفات المرتبطة بالنسخ وعمل معالجة الصور أكثر مما أنا عليه مع prismjs الذي يعمل للإصدار الأول من دعم البرنامج المساعد gatsby-comment- *.

يبدو رائعًا ChristopherBiscardi خاصةً الملفات المرتبطة بالنسخ ودعم الصور ، أود المساعدة ولكن من الناحية الواقعية لا أعتقد أنني أستطيع التعامل معها الآن لأننا معبأون حقًا ^^
ربما يمكنني مشاركة بعض التعليقات ، وأعتقد أنني سأجربها لبعض الصفحات الوصفية الأصغر لتجربة الأشياء

من المثير للاهتمام معرفة أنك تبث عملك .. فأنا جديد تمامًا لأعيش الأشياء ولا أفهم بعد كيف أعرف متى ستعيش .. ربما يعمل فقط مع حساب أعتقد

يسعدني مساعدتك في أي وقت في المستقبل إذا وجدت الوقت ، فلا تتردد في الاتصال بي إذا كانت لديك أسئلة :) تساعد التعليقات نفسها في كلتا الحالتين ، لذا إذا جربتها فتأكد من إرسال المشكلات!

من المثير للاهتمام معرفة أنك تبث عملك .. فأنا جديد تمامًا لأعيش الأشياء ولا أفهم بعد كيف أعرف متى ستعيش .. ربما يعمل فقط مع حساب أعتقد

لقد قمت بإعداد "تقويم" لأوقات البث في الجزء السفلي من قناة twitch الخاصة بي . أعرف ما إذا كان لدى شخص ما حساب على twitch ويتابعونني ، فسيحصلون على إشعارات عندما أبدأ البث المباشر ، ولكن بخلاف ذلك يكون الجدول هو المكان الذي يجب البحث فيه. متأكد من أنه يمكنك مشاهدة ما إذا كان لديك حساب أم لا. أنا جديد بعض الشيء في البث بنفسي (كنت أفعل ذلك منذ أسبوعين فقط) لذا منفتح دائمًا على طرق أفضل للقيام بهذا النوع من الأشياء. لقد كان هناك عدد قليل من الأشخاص يتجولون مرارًا وتكرارًا ويتسكعون / يشاهدون / يتحدثون في الدردشة وهو أمر ممتع جدًا :)

حصلت عليه كاي ، من الجيد أن تعرف

وسأقوم بالتأكيد بنشر المشكلات عندما أواجه أيًا منها ؛)

راجع للشغل ، منذ ذكر Prism ، أود فقط أن أضيف أن الإضافات الملحوظة / إعادة الكتابة المثالية يجب أن تُستخدم مباشرة ، MDX يدعم ذلك عبر خيارات mdPlugins و hastPlugins (يمكن تمرير هذا عبر gatsby -mdx). يمكن إضافة المكونات الإضافية مثل @ mapbox / rehype-prism إلى hastPlugins ، ولكن كانت هناك بعض مشكلات المسافة البيضاء التي أصلحتها في mdx-js / mdx # 226 ، لذا بمجرد دمجها وإصدارها ، سيكون تمييز بناء الجملة جيدًا توجو!

نعم تماما. يدعم gatsby-mdx بالفعل تمرير ملحقات الملاحظة / إعادة الكتابة إلى mdx core. إليك @ mapbox / rehype-prism على سبيل المثال (لقد سحبت هذا المثال من بعض مناقشات العلاقات العامة / المشكلة في الأصل silvenon ، شكرًا). لا تدعم إعادة كتابة المنشور AFAIK المكونات الإضافية المنشورية ، لذا فهي دائمًا مقايضة اعتمادًا على حالات الاستخدام (أعتقد أن استخدام المكونات الإضافية لإعادة الكتابة للمنشور يعني أنك ستواجه صعوبة في دمج شيء مثل رد الفعل المباشر ، على سبيل المثال)

تم إصدار دعم برنامج gatsby-comment-prismjs وغيره من المكونات الإضافية لـ gatsby-comment- * في 0.1.1 اليوم ، لذلك يوجد الآن على الأقل 3 خيارات لإبراز بناء الجملة بين مكونات إعادة الكتابة / الملاحظة / التفاعل 😝