Gatsby: मार्कडाउन स्रोत में रिएक्ट घटकों का उपयोग करना

यह एक लाजवाब विचार है। अगर यह अभी तक उपलब्ध नहीं है तो मैं इस पर काम करने को तैयार हूं।

मैं रिएक्शनडाउन का डेवलपर हूं। गैट्सबी के साथ रिएक्शनडाउन को देखना शानदार होगा। मुझे पिंग करें यदि आपके पास प्रश्न हैं या इसे एकीकृत करने के बारे में कुछ सहायता की आवश्यकता है।

👍 यह एक सामान्य अनुरोध है, इसलिए व्यापक रूप से उपलब्ध कुछ काम करने के लिए बहुत अच्छा होगा!

मैंने एक त्वरित और गंदे उदाहरण का सेट किया कि कैसे गैट्सबी के साथ प्रतिक्रियाशीलता को काम करना है। यह नोट करना अच्छा है कि हुड गैट्सबी के तहत वेबपैक के शीर्ष पर केवल एक बहुत उपयोगकर्ता के अनुकूल आवरण है, इसलिए सभी शक्ति अभी भी कुछ भी करने के लिए है।

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

धन्यवाद, मैं इसे आज़माऊंगा और आपको बताऊंगा कि यह कैसे हुआ।

ओह बढ़िया! अच्छा बेन। कि मैं इमेजिंग के लिए सेटअप करने के लिए बहुत आसान है
हाहा। अच्छा काम एंड्री।

Tue पर, Jun 7, 2016 को 10:31 अपराह्न बजे Jo Meenen सूचनाएं @github.com ने लिखा:

धन्यवाद, मैं इसे आज़माऊंगा और आपको बताऊंगा कि यह कैसे हुआ।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की है।

इस ईमेल का उत्तर सीधे दें, इसे GitHub पर देखें
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -224492088,
या धागा म्यूट करें
https://github.com/notifications/unsubscribe/AAEVh-2doZe_FXFMBxYTJ5FAVqo4XqxNks5qJlO6gaJpZM4Iubim
।

@benstepp अच्छा! एक आवरण के माध्यम से मार्कडाउन फ़ाइलों का उपयोग करते समय यह काफी सीधा दिखता है, लेकिन क्या यह तब भी काम करेगा जब एक रिएक्ट घटक के अंदर उपयोग करने के लिए मार्कडाउन फ़ाइल को आयात किया जाए?

संपादित करें: ऐसा लगता है कि इसे केवल बॉक्स से बाहर काम करना चाहिए, लेकिन किसी भी तरह रिएक्ट घटक md फ़ाइल कुछ भी आउटपुट नहीं करता है ...

मैं एक अलग दृष्टिकोण के बारे में सोच रहा हूं कि नई ग्राफकलाइन परत (# 420) खुल जाती है। मैंने mdash repo में इसके बारे में पूछने वाला एक मुद्दा खोला https://github.com/wooorm/mdast/issues/13

यह बहुत बढ़िया होगा! मैंने महसूस किया कि मैं रिएक्टडाउन के साथ बहुत करीब था हालांकि ... मार्कडाउन फाइलें ठीक से वेबपैक द्वारा प्रतिक्रिया घटकों में बदल जाती हैं (कम से कम यह ऐसा दिखता है), लेकिन यह सिर्फ मुझे खाली घटक देता है जब मैं उन्हें अपने कोड में उपयोग करता हूं।

@ शचा जी का रेपो है कहीं मैं देख

वाह, वाकई अजीब है। मैं इस मुद्दे का प्रजनन बनाने की कोशिश कर रहा था, और अब यह काम करता है! यह भी निश्चित नहीं है कि क्या बदला ... मुझे नहीं लगता कि शिकायत कर सकते हैं :)

प्रतिक्रिया के देवता एक स्वर्ण रथ, और लो में उतरे! कोड काम किया

@ शचा जी मुझे याद है कि कुछ मुद्दे थे कि कैसे पुनर्संरचना इसके क्रम को संदर्भित करती है। वैसे भी अगर आप कुछ मुद्दों को मारते हैं तो मैं सपाट हो जाता हूं।

नमस्कार! क्या इस पर कोई हालिया अपडेट आया है? मार्कडाउन में प्रतिक्रिया घटकों का उपयोग करने की अनुशंसित विधि क्या है? क्या कोई उदाहरण है जिसका मैं अनुसरण कर सकता हूं? धन्यवाद!

अभी तक नहीं :-( मेरे पास यह कैसे करने के लिए एक अच्छी योजना है - मूल रूप से मार्कडाउन फ़ाइल को एक रिएक्ट घटक फ़ाइल में संकलित करें जहां आप सभी संदर्भित रिएक्ट घटकों को सही ढंग से आयात करना संभालते हैं लेकिन इसे अभी तक बनाने की आवश्यकता नहीं है। जरूरत पड़ने पर इस पर काम करना शुरू करें!

@ KyleAMathews का मतलब है कि मुझे अपनी

यह आदर्श रूप से Gatsby v1 के लिए एक प्लगइन होगा जो इन चरणों को करेगा
खुद ब खुद।

Tue पर, 2 मई, 2017, 12:50 PM पीयूष सिंह नोटिफिकेशन @github.com ने लिखा:

@KyleAMathews https://github.com/KyleAMathews क्या आपका मतलब है कि मुझे दौड़ना चाहिए
मेरी मार्कडाउन फ़ाइल पर एक कनवर्टर स्क्रिप्ट और फिर दूसरी प्रतिक्रिया जोड़ें
घटकों को रूपांतरण चरण द्वारा निर्मित आउटपुट फ़ाइल की आवश्यकता है? एक बार
यह किया जाता है तो अंतिम निर्माण करते हैं?

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।

इस ईमेल का उत्तर सीधे दें, इसे GitHub पर देखें
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment-298741837 ,
या धागा म्यूट करें
https://github.com/notifications/unsubscribe-auth/AAEVh4riB8uXgeRUybcR6OxsC1EAKnkKks5r14kPgaJpZM4bubim
।

मेरे कहने का एक सरल उदाहरण है।

कल्पना कीजिए कि आपके पास /my-blog/index.md पर मार्कडाउन फ़ाइल थी जो निम्नलिखित की तरह दिखती थी:

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

# This is my broomstick

Yo yo foo

<SweetComponent props="super cool" />

फिर शरीर एक प्रतिक्रिया घटक में परिवर्तित हो सकता है जो वेबपैक / बैबल / आदि के माध्यम से चलता है। सामान्य रूप में।

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

चाल हिस्सा यह है कि कैसे इसे गैट्सबी के ग्राफकल सिस्टम के साथ एकीकृत किया जाए। आदर्श रूप से आप केवल एक मार्कडाउन फ़ाइल के "घटक" संस्करण के लिए क्वेरी कर सकते हैं कि आप HTML के लिए कैसे क्वेरी कर सकते हैं।

वैसे भी, मैंने जो कुछ सोचा है, उसका संक्षिप्त विवरण है।

@KyleAMathews धन्यवाद, मुझे लगता है कि मुझे अब यह विचार मिल गया है।

मेरा उद्देश्य इस तरह की सामग्री को लिखने में सक्षम होना है जो MathJax, D3.js विज़ुअलाइज़ेशन का लाभ उठाता है और मार्कडाउन स्रोत के भीतर तीन.js एनीमेशन घटकों को भी शामिल कर सकता है।

यदि आप html स्रोत देखते

अब तक जो मैं इकट्ठा करता हूं, मैं कल्पना करता हूं कि गैट्सबी ढांचे के साथ इस तरह की सामग्री का उत्पादन बहुत ज्यादा खाने और संरचित तरीके से प्राप्त करने योग्य है, क्या यह सही है?

मैं वेब विकास के लिए नया हूं, लेकिन सीखने की पूरी कोशिश कर रहा हूं कि गैट्सबी प्रणाली कैसे काम करती है ताकि मैं इन प्रकार के लक्ष्यों को प्राप्त करने में योगदान कर सकूं ...

@ कीलामथेव्स , मैं आपके प्रस्तावित समाधान के बारे में सोच रहा हूं।

क्या आपको लगता है कि मार्कडाउन-इट-जेएक्स जैसी कोई चीज वांछित एमडी जेएस घटक संरचना में रूपांतरण करने के लिए उपयोग या सुधार की जा सकती है?

auto-resolve-this-somehow भाग के समाधान के लिए, शायद एक दूसरा पार्सर जेएसएक्स की तलाश करने के लिए एमडी जेएस घटक फ़ाइल को स्कैन कर सकता है जो घटक रजिस्ट्री सूची में उन लोगों से मेल खाते हैं (जो निर्देशिका में एक साधारण पाठ फ़ाइल या फ़ाइल लुक-अप हो सकता है) सभी घटकों को संग्रहीत किया जाएगा) और फिर फ़ाइल के शीर्ष पर संबंधित आयात लाइन जोड़ें?

मैं इस पर काम शुरू करने जा रहा हूँ ताकि कोई भी प्रतिक्रिया भयानक हो!

बस एक नोट एक और परियोजना है जो यह कर रही है, शायद यह संदर्भ के रूप में उपयोगी होगा: प्रतिक्रिया-स्टाइलगाइडिस्ट । मार्कडाउन फ़ाइल का उदाहरण

मार्कडाउन में घटकों को सक्षम करना मुझे ब्रेट विक्टर की इस कृति की याद दिलाता है।

UPD: और एक और उदाहरण: mdxc

और एक अन्य http://thejameskyle.com/react-markings.html

एक समाधान react-jsx-parser का उपयोग कर रहा है।
Howtographql.com पर हम इसे उत्पादन में उपयोग कर रहे हैं: https://github.com/howtographql/howtographql/blob/master/src/compenders/Tutorials/Markdown.tsx#L182

एक नुकसान: यह dangerouslySetInnerHTML का उपयोग करने की तुलना में बेशक धीमा है, क्योंकि यह

1. HTML को पार्स करता है
2. एक वर्चुअल डोम ट्री का निर्माण करता है
3. रिएक्ट के साथ वर्चुअल ट्री रेंडर करता है

इसे गति देने का एक तरीका यह होगा कि आप कच्चे html को ग्राफकल क्वेरी के साथ न भेजें, लेकिन वास्तव में एक प्रारूप भेजें जिसे Inferno.js डॉक्स उपयोग कर रहे हैं, जैसा कि यहां वर्णित

जैसा कि मैं वर्तमान में अनुकूलन के इस अंतिम चरण को करने के लिए समय नहीं पा सकता हूं, जो कोई भी इसमें रुचि रखता है वह इस दृष्टिकोण पर जा सकता है।

इसका मतलब होगा

1. उचित ग्राफ़कॉल प्रकारों का निर्माण करें, जो कि एक समस्या नहीं होनी चाहिए क्योंकि ग्राफकैलिक प्रकार पुनरावर्ती हो सकते हैं और एक पेड़ का प्रतिनिधित्व कर सकते हैं
2. remark मार्कडाउन पार्सिंग का व्यवसाय होने के बाद, क्रमबद्ध jsx प्रारूप उत्पन्न करें।
3. रिएक्ट में इस प्रारूप का वर्णन किया गया है।

एक अन्य विकल्प जो मैंने देखा है वह है https://github.com/mapbox/jsxtreme-markdown

हम एक समान पैटर्न का उपयोग कर सकते हैं। बस मार्कड को जेएसएक्स घटकों में बदलें। जावास्क्रिप्ट और JSX जोड़ने के लिए कस्टम सीमांकक का उपयोग करें। हम अपने मौजूदा रिमार्क सेटअप का उपयोग ठीक कर सकते हैं। और इसमें बहुत ज्यादा परफॉर्मेंस पेनल्टी नहीं होगी क्योंकि यह सिर्फ सामान्य रिएक्ट पेज होगा।

Https://github.com/cerebral/marksy भी है, जिसका उपयोग मैंने हाल ही में अच्छे प्रभाव के लिए किया है।

क्या गैट्सबी के संदर्भ में इसके लिए एक अनुशंसित दृष्टिकोण है या यह अभी भी तय किया जाना है?

नमस्ते, हमारे gatsby markdown फ़ाइलों में सीमा शुल्क घटकों को शामिल करने के लिए कोई सिफारिश?

संग्रह में एक और विकल्प https://idyll-lang.github.io/

लगता है कि मार्की उस उपयोग के मामले के लिए अच्छी तरह से काम करता है

जैसा कि यह एक प्रतिक्रिया तत्वों पेड़ देता है, मैं सोच रहा हूँ कि मैं कैसे एक gatsby प्लगइन में एकीकृत कर सकता है?

@Kyleamathews @revolunet आपको उन घटकों को पंजीकृत करने के बारे में क्या लगता है जिन्हें हमें कस्टम तत्वों के रूप में उपयोग करने की आवश्यकता है, बाद में हम उन्हें सरल रूप से ब्लॉग पोस्ट के भीतर शामिल कर सकते हैं और बाकी के काम को ब्राउज़र के लिए छोड़ सकते हैं?

यह एक प्रतिक्रिया पेड़ के रूप में मार्कडाउन को पार्स करने की किसी भी आवश्यकता को समाप्त कर देगा और हमारे आवेदन को निष्पादित करेगा, हालांकि, मुझे नहीं पता कि क्या प्रदर्शन लागत होने वाली है, ReactDOM.render करने के लिए जब भी हमें एक नया जोड़ने की आवश्यकता होती है कस्टम घटक, लेकिन फिर भी यह हमें ब्लॉग पोस्टों में गतिशील कार्यक्षमता जोड़ने के लिए बहुत अच्छा तरीका देगा।

@abdulhannanali मार्कडाउन में उपलब्ध घटकों को पंजीकृत करना एक अच्छा विचार है, लेकिन कस्टम-तत्वों का सामान बहुत सर्वर-साइड फ्रेंडली नहीं लगता है :)

इसलिए मैं प्रतिक्रिया और मार्कडाउन को हमेशा के लिए मिश्रित करने के लिए एक साफ तरीके के बारे में सोचने की कोशिश कर रहा हूं। या कम से कम जब से मैंने गैट्सबी पर काम करना शुरू किया।

और अंत में मुझे लगता है कि मेरे पास एक विचार है जो काम कर सकता है।

हम सामान्य HTML तत्वों और रिएक्ट घटकों के बीच अंतर करने के लिए उसी नियम का उपयोग करेंगे जैसे JSX करता है अर्थात React को कैपिटल किया जाता है।

तो फिर आप अपने मार्कडाउन जैसे रिएक्ट घटकों को सीधे शामिल कर सकते हैं

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

तो यह एक एएसटी में पार्स हो जाएगा जैसे कुछ:

[
  [{ 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 को सीधे रेंडर (डेंजर स्टाइल) करने के बजाय, आप इसके बजाय इसे हेल्पर फंक्शन पास करेंगे, जिसमें प्रत्येक रिएक्ट कंपोनेंट के लिए मैपिंग होगी जैसे:

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

हमें रिमार्क के साथ इस काम को सुनिश्चित करने के लिए कुछ प्रोटोटाइप बनाने की आवश्यकता होगी, लेकिन मुझे पूरा यकीन है कि रिएक्ट "एचटीएमएल" अछूते से होकर गुजरेगा। इसलिए हमें बस HTML को विभाजित करने के लिए एक पार्सर की आवश्यकता होगी और परिणाम में "JS" को प्रस्तुत करने के लिए प्रतिक्रियाशील JSX भागों को डेटा में बदलना होगा।

विचार?

और फिर आपके कंपोनेंट में, HTML को सीधे रेंडर (डेंजर स्टाइल) करने के बजाय, आप इसके बजाय इसे हेल्पर फंक्शन पास करेंगे, जिसमें प्रत्येक रिएक्ट कंपोनेंट के लिए मैपिंग होगी जैसे:
[…]
विचार?

यह कुछ ऐसा है जो हम भी कर रहे हैं (बहुत सरलीकृत, वास्तव में सुरक्षित नहीं है और केवल विशिष्ट टैग के लिए डिज़ाइन किया गया है)। हमारा उपयोग मामला JSON दस्तावेज़ को स्टाइल / ले आउट करने के लिए था:

<IconGrid src="sensors.json" />

डुप्लिकेट सामग्री से बचने के लिए यह वास्तव में मददगार था और हम पुन: प्रयोज्य एपीआई प्रलेखन घटकों के लिए एक समान तंत्र का उपयोग करने पर विचार कर रहे हैं।

इस समाधान में कुछ कमी है, जिसे हमने हल नहीं किया है, घटक गुणों के भीतर मार्कडाउन का उपयोग है। ताकि ऐसा कुछ संभव हो सके:

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

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

इस जगह में थोड़ा सा सामान रखने की कोशिश करने के बाद अब मुझे यकीन हो गया है कि हाँ इसे वास्तव में मार्कडाउन स्तर पर हल करने की आवश्यकता है। मतलब मार्कडाउन फ्लेवर को वास्तव में jsx / रिएक्ट को समझने की जरूरत है। समस्या वास्तव में जावास्क्रिप्ट इंटरपोलेशन jsx का समर्थन करती है और मार्कडाउन चोक है। Jsxtreme-markdown पास हो जाता है और इसके आसपास काम करके उन्हें पहले बाहर निकालता है और फिर बाकी हिस्सों को पार्स करने के लिए markdown का उपयोग करता है। एक और तरीका यह है कि एमडी पार्सर्स में एचटीएमएल को संभालने की प्राकृतिक क्षमता पर झुकाव किया जाता है और इसलिए सीधा जेएक्सएक्स (उदाहरण के लिए चिह्नित किया गया है, अपरकेस तत्वों को संभालना होगा) लेकिन आप जल्दी से कष्टप्रद सीमाओं में भाग जाते हैं, केवल स्ट्रिंग पर चिपके हुए होते हैं और कोई नेस्टेड मार्कडाउन नहीं होता है (उदाहरण के अंदर मार्कडाउन) , प्रॉप्स चिल्ड्रेन)। दूसरा मुद्दा यह है कि क्लाइंट पर हाइड्रेशन कष्टप्रद हो जाता है क्योंकि आपको एक स्ट्रिंग को प्रतिक्रिया तत्वों में बदलने के लिए एक रनटाइम (और आमतौर पर काफी बड़ा) की आवश्यकता होती है, जो कि इंटरैक्शन और परफेक्ट के लिए त्वरित समय पर गैट्सबी के फोकस के लिए आदर्श नहीं है।

मुझे लगता है कि सबसे आशाजनक तरीका एक अद्भुत आधारित दृष्टिकोण है, लेकिन इसके लिए आपको वास्तव में एक मार्कडाउन गति की आवश्यकता है जो मौजूदा लोगों से काफी अलग है एक काफी परियोजना है

बस मेरे 2 सेंट में फेंक!

इससे पहले कि मैं जानता था कि गैट्सबी अस्तित्व में है (2 साल पहले), मैंने एक प्रतिक्रिया स्थैतिक साइट जनरेटर बनाने पर रोक लगाई जो कि जेकिल ( रोवर ) के समान व्यवहार करता था। मैं अपनी md फाइलों में मार्कडाउन, रिएक्शन और html को मिलाना चाहता था।

मैंने मार्कडैंट सामग्री के भीतर <CapitalizedComponents/> खोजने के लिए एक रेगेक्स के साथ जाने का विकल्प चुना और इसमें कुछ किनारे वाले मामलों को छोड़कर बहुत अच्छा काम किया। उस समय, मैं चिन्हित का उपयोग कर रहा था जिसका html के पार्सिंग के आसपास कुछ अजीब दुष्प्रभाव था।

इसके अलावा, मेरे सरलीकृत regex घटक अंत टैग के लिए अनुमति नहीं दी और कोई बच्चों के लिए ... तो यह काम नहीं किया:

<Component>
   <Child/>
</Component>

वैसे भी, मैं वास्तव में यह समर्थन करने के लिए gatsby के लिए उत्साहित हूँ! मैं अपने jekyll साइट को gatsby में बदलने की प्रक्रिया में हूँ और मैं लगभग पूरा कर रहा हूँ। मेरा अगला कार्य यह पता लगाना है कि मेरे gekyll संस्करण में घटकों में md ब्लॉग पोस्ट के भीतर मेरे jekyll को कैसे बदलना है।

@ जेकेंस सहमत हैं कि dangerouslySetInnerHTML props.children ।

यह 100% समाधान नहीं है, लेकिन यह बहुत सारे सेटअप के लिए काम करेगा। मैं मार्कड के अंदर JS लिखने के विचार का भी बहुत बड़ा प्रशंसक नहीं हूं। आप इस तरह से सभी टूलींग समर्थन खो देते हैं।

@jakedeichert हाँ, सरल regex केवल इतना दूर चला जाता है। कूल आपको इस काम के समान कुछ मिला! यह अवधारणा को मान्य करता है। हम एक JS पार्सर का उपयोग करना चाहते हैं जो संरचित जानकारी निकालने के लिए JSX को समझता है। इस तरह हम नेस्टेड घटकों का समर्थन कर सकते हैं।

@KyleAMathews आपने जो प्रस्तावित किया है उस पर क्या प्रगति है?

इसके बारे में कुछ विचार:

1. मेरे पास एक कामकाजी उदाहरण है जो टिप्पणी को बदलने के लिए उपयोग करता है जिसमें मनमाने ढंग से प्रतिक्रिया करने वाले घटक tmp-comment-jsx होते हैं । मैंने आधार परियोजनाओं के रूप में remark-html और hast-util-to-html किया।
   यहाँ उपयोग + आउटपुट का एक उदाहरण है: उदाहरण
   यदि आप रुचि रखते हैं तो मैं इस बारे में कुछ और जानकारी प्रदान कर सकता हूं कि यह कैसे काम करता है।
2. MapBox ने एक पैकेज टिप्पणी-प्रतिक्रिया बनाई जो मार्कडाउन को टिप्पणी का उपयोग करके प्रतिक्रिया तत्वों में बदल देती है। कस्टम प्रतिक्रिया तत्वों को स्वीकार करने के लिए पैकेज को अनुकूलित करने में कुछ काम हो सकता है।

किसी ने भी इस पर काम करना शुरू नहीं किया है।

उन दो दृष्टिकोणों के साथ समस्या यह है कि वे गैट्सबी के ग्राफक्यूएल आधारित डेटा सिस्टम के साथ काम नहीं करते हैं क्योंकि ग्राफकॉल प्रश्न केवल डेटा को चलाने वाले कोड को वापस नहीं कर सकते हैं। उदाहरण के लिए टिप्पणी-प्रतिक्रिया करता है => क्लाइंट में html रूपांतरण इस के आसपास मिलता है जो आदर्श से अधिक महंगा है।

तो ग्राफकॉल के साथ काम करने के लिए, आपको प्रतिक्रिया घटकों को बनाने के लिए क्लाइंट रनटाइम की आवश्यकता होती है। मेरा प्रस्ताव एक डिजाइन के माध्यम से काम करने से आया है जो सबसे छोटे संभव रनटाइम को सक्षम करेगा।

मुझे लगता है मैं अब समझ गया। तो क्या आपकी राय में कोड के दो टुकड़े हैं:

1. markdown -> HAST का उपयोग करने के लिए तैयार जो प्रतिक्रिया घटकों का समर्थन करता है। (यह कोड बिल्ड-टाइम पर चलना चाहिए?)
2. प्रतिक्रिया सक्षम HAST -> प्रतिक्रिया तत्व (यह ग्राहक की ओर से एक न्यूनतम / तुच्छ रनटाइम के साथ चलना चाहिए)

क्या मैं सही हो रहा हूँ? क्या मैं कुछ भूल रहा हूँ?

हाँ!

इस अंतरिक्ष में एक अन्य परियोजना के दौरान रैन - कुछ दिलचस्प विचार हैं https://github.com/luiscarli/md-to-react

नमस्ते,

मैं इस पर एक और छुरा ले जा रहा हूँ। मेरे पास पहले भाग का एक कार्यशील उदाहरण है जो यहाँ HAST को टिप्पणी-कस्टम-एलिमेंट-टू- हैस्ट बनाता है। इसे अभी भी बाल तत्वों के रूप में मार्कडाउन के उपयोग का समर्थन करने की आवश्यकता है और शायद इसका इस्तेमाल करने वाले वेबपैक लोडर।

@KyleAMathews क्या आपको लगता है कि दृष्टिकोण आपके विचार से

दूसरे भाग के रूप में, हम वाक्य-वृक्ष / hast-to-hyperscript का उपयोग कर सकते हैं। यहाँ उपयोग wooorm / टिप्पणी-टिप्पणी का एक उदाहरण है।

@ fazouane-marouane शांत! हाँ, एक त्वरित नज़र से यह वास्तव में करीब लगता है। अच्छा कार्य!

हालांकि, हम इस पर निर्भरता का जल्दबाजी में उपयोग नहीं करना चाहते हैं क्योंकि इसमें निर्भरता का एक समूह है और हम चाहते हैं कि रनटाइम जितना संभव हो उतना हल्का हो - उदाहरण के लिए, रेक्ट तत्वों को बनाने वाले एएसटी के माध्यम से पुनरावृत्ति करें। इसलिए अपने मॉड्यूल में दूसरी लाइब्रेरी में जाएं।

@KyleAMathews यह तो बहुत अच्छा है! मैं अगले कुछ दिनों में शेष चरणों को करने की कोशिश करूंगा। उम्मीद है कि यह हमें एक व्यावहारिक समाधान के करीब ले जाएगा।

Hi @ fazouane-marouane & @KyleAMathews , मैंने आपकी चर्चा पढ़ी है और इस ऐप पर यहां वर्णित विभिन्न भागों के "सरल" संस्करण लागू किए हैं, जिन पर मैं काम कर रहा हूं।

दिलचस्प भागों यहाँ एक gatsby प्लगइन के रूप में @ fazouane-marouane कोड का उपयोग कर रहे यहाँ HAST प्रस्तुत करना। यह देखने के लिए भी दिलचस्प हो सकता है कि ग्राफ के लिए एचएएसटी को

कृपया ध्यान दें कि जिस समय मैं यह टिप्पणी लिख रहा हूं, यह एकदम सही, अनुकूलित और स्वच्छ है।

EDIT: मेरा renderHAST घटक उस तरह से प्रेरित है जिस तरह से क्लाइंट की तरफ से मार्कडाउन के साथ फेनोमिक डील होती है: https://github.com/phenomic/phenomic/blob/master/packages/plugin-runer-react/src / संगोष्ठी / BodyRenderer.js

@pbellon में शामिल होने के लिए धन्यवाद! इससे सभी का काफी समय बचेगा। ऐसा लगता है कि कोड को बाकी चरणों के लिए आवश्यक है। मैं इसे आज शाम को कोशिश करूँगा।

एक बात जो मुझे डिबग करने की ज़रूरत है वह घटकों के बच्चों को संभालने का तरीका है।
अभी अगर मैं मार्कडाउन में This is a test <MyComponent>let's see how children are handled</MyComponent> MyComponent children प्रॉपर्टी [0, null] सेट करने के लिए

लेकिन मुझे यकीन नहीं है कि यह पार्सर या जिस तरह से मैं हाइड हाइड करता हूं उससे आता है।

@ पेबलन यह पार्सर से आता है। यह मार्कडाउन चीज़ में इस पूरी प्रतिक्रिया को प्रोटोटाइप करने के लिए एक न्यूनतम पार्सर है। यह निश्चित रूप से सभी मामलों में प्रयोग करने योग्य कुछ सुधारों की आवश्यकता होगी। अधिक उदाहरणों में यदि कोई समस्या आती है तो उसे प्रस्तुत करने के लिए स्वतंत्र महसूस करें। यह वैसे भी एक अच्छा परीक्षण आधार बनाने में मदद करेगा।

@ fazouane-marouane मैं देख रहा हूं। मैं अपने कोड के साथ खेलने के लिए अपनी तरफ से यह देखने की कोशिश करूंगा कि क्या मैं इस सुविधा को लागू कर सकता हूं (और अगर मैं ऐसा करने का प्रबंध करता हूं तो पीआर बना सकता हूं) लेकिन यह एक तुच्छ संशोधन नहीं लगता है side
मैंने यहां आपके रेपो पर एक मुद्दा बनाया

मेरे $ 0.02 के साथ झंकार। GitDocs को विकसित करने के एक हिस्से के रूप में हमें उपयोगकर्ताओं को JSX को एम्बेड करने की आवश्यकता थी। यहाँ मुझे अब तक क्या मिला है।

मार्कडाउन पार्सिंग

मार्कडाउन प्रोसेसिंग एकीकृत , टिप्पणी और रीहाइप का उपयोग करता है। जेएसएक्स का पता लगाने के लिए एक अतिरिक्त regex के साथ टिप्पणी ब्लॉक एचटीएमएल टोकन से एक कस्टम टोकन को फोर्क किया गया। इस टोकन को आगे की प्रक्रिया के लिए raw के रूप में JSX ब्लॉक का पता लगाने की अनुमति देता है।

मैंने एक कस्टम रिहाइप प्लगइन लिखा जो रिहाइप-रॉ के समान काम करता है लेकिन वह raw नोड्स पाता है और निर्धारित करता है कि क्या वे जेएसएक्स हैं जो बलूत का

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 पास करते हैं जो रिएक्शन.जेएस कोड उत्पन्न करता है। दुर्भाग्य से, इसके कई मुद्दे हैं, और एकल उत्पादन को तोड़ता है।

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

हुह दिलचस्प!

यह दुर्भाग्य से विकास में मार्कडाउन के गर्म लोडिंग को भी तोड़ देगा जहां तक ​​मैं बता सकता हूं।

हां, यह एक और मुद्दा था। मुझे लगता है कि अगर मुद्दों पर किसी तरह काम किया गया, तो यह सबसे अच्छे अंतिम परिणामों में से एक होगा, जहाँ तक बंडल साइज़ और इंटरेक्टिव होने का समय है। बेशक, यह काम करने वाले समाधान से काफी दूर है। टिप्पणी काम करने के बाद जेएस फाइलों का संकलन कैसे प्राप्त करें?

@brigand मुझे लगता है कि सबसे आसान समाधान वही है जो मैंने पहले की टिप्पणी में बताया था https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -336681894

@KyleAMathews आपके द्वारा प्रस्तावित समाधान के लिए, अब हम जानते हैं कि जेएसएक्स युक्त मार्कडाउन को html एएसटी में कैसेट के रूप में बदलना है। हमने पिछले ब्लॉकिंग बग को हल कर दिया है। अब हमें केवल उस कोड को बनाना है जो इस एएसटी को एक प्रतिक्रिया घटक में बदल सकता है और इसे एनपीएम में धकेल सकता है। मेरे पास अगले सप्ताह के अंत तक ऐसा करने के लिए कुछ खाली समय होगा।

अगर मैं तब तक कुछ धक्का न दे तो बेसबॉल के बल्ले से मेरे दरवाजे पर दिखाने में संकोच न करें।

@ r24y को यह काम मिल गया !!! अपने PR https://github.com/gatsbyjs/gatsby/pull/3732 और उदाहरण पृष्ठ का उपयोग-टिप्पणी उदाहरण साइट पर चेकआउट करें!

https://use-remark.gatsbyjs.org/custom-compenders/

इसलिए, यहां मेरी प्रगति की रिपोर्ट करना। मेरे पास दूसरा कदम खत्म करने का समय था।

सभी में, हमारे पास दो पैकेज हैं:
HAST में पार्सिंग: @ डंपस्टर / टिप्पणी-कस्टम-तत्व-से-जल्द
प्रतिक्रिया घटक में तुच्छ प्रतिपादन: @ डंपस्टर / जल्द-प्रतिक्रिया-रेंडरर

@pbellon ने यहाँ एक Gatsby प्लगइन प्रस्तावित किया।

यह पाइपलाइन रीहाइप से अधिक अनुमेय होनी चाहिए। यदि मेरी मेमोरी मुझे सही सेवा देती है, तो rehype parser5 का उपयोग करता है जो <Note value="my content" /> स्वीकार नहीं करता है और मुझे याद नहीं है कि क्या यह कस्टम तत्वों के लिए निकायों को स्वीकार करता है।

@KyleAMathews मुझे यकीन नहीं है कि यहाँ से अगला कदम क्या है।

@ फज़ौने-मरौने कमाल !!!

मुझे लगता है कि अगले कदम रेपो के लिए एक उदाहरण साइट को जोड़ना होगा ताकि हम आपके काम को भी दिखा सकें - फिर हमें gatsbyjs.org पर जाने वाले डॉक्स पेज पर आने वाले विभिन्न विकल्पों और ट्रेड-ऑफ के बारे में बात करनी होगी।

मिठाई ! स्पष्टीकरण के लिए धन्यवाद।

मैं अगले सप्ताह या सप्ताह के बाद कुछ करने की कोशिश करूँगा (नई नौकरी शुरू करने के बाद इस सोमवार)।

में जुटाए रखने। पढ़ने के बाद https://using-remark.gatsbyjs.org/custom-components/ और इसे बाहर की कोशिश कर रहा है, मैं एक छोटे पैकेज नामित किए गए gatsby-टिप्पणी घटक चेतावनी validateDOMNesting कि आप से बचने के लिए अगर आपके markdown के अंदर अपने घटक इसमें ब्लॉक-स्तरीय तत्व (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>

एक समाधान के रूप में।

हालांकि, सभी कस्टम-घटकों को फिर से कॉन्फ़िगर फ़ाइल में शामिल करना आसान नहीं है, जैसे कि मैंने पहले ही मार्कडाउन टेम्पलेट फ़ाइल में क्या किया था।

@ ली-झींयांग मैं आपसे सहमत हूं। मैंने एक ऑटो-डिटेक्शन फीचर जोड़ा है ताकि आपको उन्हें मैन्युअल रूप से जोड़ना न पड़े।
यदि आप इसे आज़माना चाहते हैं तो पैकेज को नवीनतम संस्करण 1.1.0 में अपग्रेड करना सुनिश्चित करें।
यह बॉक्स से बाहर काम करता है:

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

यह थोड़ा पेचीदा है , लेकिन यहां के लोग प्रस्ताव देखें

@ r24y निफ्टी लगता है!

मुझे लगता है कि इसके कई तरीके हो सकते हैं जिन्हें अलग-अलग ट्रेडऑफ़ के रूप में हल किया जा सकता है।

मुझे नहीं पता कि क्या आप कैटलॉग नामक परियोजना से अवगत हैं, जो मार्कडाउन में रिएक्ट घटकों को गैट्सबी प्लगइन भी है जिसे है जो कैटलॉग की अवधारणा को अनुकूलित करने की कोशिश करता है।

यह समाधान एकदम सही @arcticicestudio दिखता है

कैटलॉग अच्छा लग रहा है; और गैट्सबी-कॉमेंट-डिज़ाइन-सिस्टम प्लगइन शांत है, लेकिन इसमें रिएक्ट घटकों के लिए समर्थन नहीं है। मुझे लगता है कि यह कुछ सही करता है, हालांकि, यह मार्कडाउन में अधिक जटिल कार्यक्षमता जोड़ने के लिए मौजूदा कोड ब्लॉक सिंटैक्स का उपयोग करता है।

जैसा कि इस थ्रेड के भीतर कुछ बार चर्चा की गई है, मुझे लगता है कि मौजूदा पार्सर का उपयोग वांछित कार्यक्षमता नहीं है। शायद मुक्त फ्लोटिंग रिएक्ट तत्वों के बजाय, स्पष्ट रूप से जटिल रिएक्ट घटकों को अधिक स्पष्ट रूप से निरूपित करना संभव होगा, उदाहरण के लिए एक मार्कडाउन फ़ाइल जैसा दिख सकता है:

 # कुछ शीर्षक
 ... आदि आदि ...

<Example>
   <Etc />
</Example>

जब हम एक एम्बेडेड react तत्व प्रदान करना चाहते हैं, तो हम भाषा को react रूप में निर्दिष्ट करते हैं, और एक JSX जागरूक पार्सर में प्रवेश करता है और एक वैध एएसटी बनाता है जिसे रीहाइप के साथ उपयोग किया जा सकता है। यदि हम एक सामान्य जावास्क्रिप्ट प्रिज्म उदाहरण चाहते हैं, तो बस सामान्य 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>

Zeit का यह JSX जागरूक मार्कशीट पार्सर आशाजनक लग रहा है: https://github.com/mdx-js/mdx

MDX राष्ट्रमंडल विनिर्देश का सुपरसेट है जो एम्बेडेड JSX और आयात / निर्यात सिंटैक्स जोड़ता है।

यह टिप्पणी और पूर्वाभ्यास पर बनाया गया है, इसलिए गैट्सबी परियोजनाओं के उपयोग के लिए प्रतिस्थापन में एक अच्छी गिरावट हो सकती है

मैंने mdx के लिए एक प्लगइन लिखा: https://github.com/nhducit/gatsby-plugin-mdx

शांत, Gatsby के साथ कोशिश करना चाहता था :)

@Nhducit के mdx प्लगइन का उपयोग करते

1. pages/ निर्देशिका में mdx और स्रोत के लिए कॉन्फ़िगरेशन में जोड़ें।

gatsby-config.js

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

1. सभी मार्कडाउन फाइलों को क्वेरी करें और उनमें से प्रत्येक के लिए पेज बनाएं।

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

@avigoldman अच्छा लगा! आपका उदाहरण @nhducit के प्लगइन के README में जोड़ा जाना बहुत अच्छा होगा।

@avigoldman PR का स्वागत है! 👍

@avigoldman को लगता है कि यह दृष्टिकोण

@ अनुदित मैं एक पीआर

@lintonye क्या आप के बारे में थोड़ा और समझा सकते हैं। क्या आप एमडीएक्स से निर्यात की बात कर रहे हैं?

@lintonye क्या आपने https://github.com/mdx-js/mdx#exports के लिए एक समकक्ष प्रतीत होता है

सही होने पर मुझे सही करें, लेकिन ऐसा लगता है कि हमें Gatsby 2.0 के लिए प्रतीक्षा करने की आवश्यकता है ताकि बाद के वेबपैक संस्करण के साथ कमेंट प्लग इन MDX में पास किया जा सके।

cc @KyleAMathews

@avigoldman @nhducit जब निर्यात सिंटैक्स का उपयोग करके mdx फ़ाइलों का डेटा निर्यात किया जाता है, तो घटकों को प्रदान किए जाने पर हम अपने UI में कैसे पहुंच सकते हैं?

एमडीएक्स के साथ वर्तमान में यहां भी यही प्रश्न है:

• कस्टम शैलियों को मार्कडाउन पृष्ठों पर लागू करें
• नामित mdx निर्यात से pathContext के रूप में फ्रंटमैटर सामग्री को इंजेक्ट करें
  यह वास्तव में किया जा सकता है, लेकिन इसके लिए एक .js फ़ाइल बनाने की आवश्यकता होती है .md फ़ाइल को आयात करने के लिए, प्रत्येक .md फ़ाइल के लिए, इसलिए यह कार्य को डुप्लिकेट करता है ...

@ सेलर मेरे पास इस रेपो में एक बहुत ही आसान उपाय है: https://github.com/avigoldman/avigoldman.com

निश्चित रूप से आदर्श नहीं। एक बार Gatsby V2 के बाहर होने के बाद मैं इसे फिर से जारी करने जा रहा हूं।

हाय और धन्यवाद @avigoldman

मैंने यह भी करने की कोशिश की कि यहाँ https://github.com/nhducit/gatsby-plugin-mdx/issues/13#issuecomment -392334706

ऐसा लगता है कि आपको लापता टुकड़ा मिल गया है जिसे मुझे सही तरीके से निर्यात निकालने की ज़रूरत नहीं थी: बेबल-प्लगइन-कॉन्फ़िगरेशन-निर्यात

आप प्रति ब्लॉग पोस्ट पृष्ठ पर एक लेआउट बनाते हैं, निश्चित रूप से यह निश्चित नहीं है कि क्या इसे इस तरह से किया जाना चाहिए या गैट्सबी के प्रदर्शन पर इसका क्या प्रभाव पड़ सकता है, क्योंकि रेमार्क का उपयोग करने वाले लोगों के बजाय आमतौर पर एक लेआउट होता है ...

एनपीएम के लिए अपने प्लगइन को प्रकाशित करने के बारे में क्या? यह फ्रंटमेटर के संबंध में किए गए

इसके अलावा, जहां ... mdx graphql टुकड़ा आता है?

MDX के बारे में, उन्होंने सिर्फ एक "MDXProvder" (प्रतिक्रिया संदर्भ के आधार पर) जोड़ा, जो Gatsby, cc @avigoldman के साथ कस्टम टैग को एकीकृत करने में सहायक हो सकता है

@ Slorber मैंने एक gatsby- ट्रांसफार्मर-mdx प्लगइन बनाया ताकि मैं MDX फ़ाइलों के खिलाफ क्वेरी कर

मैं प्रत्येक लेआउट को पृष्ठ के रूप में और प्रत्येक MDX फ़ाइल को सामग्री के रूप में मान रहा हूं। इसलिए लेआउट को पृष्ठ संदर्भ मिलता है और फिर MDX को हटा दिया जाता है (जैसे आप टिप्पणी-जनित html के साथ करते हैं)।
यह Gatsby V2 में काम नहीं करेगा क्योंकि विशेष लेआउट घटक दूर जा रहे हैं।

MDXProvider होनहार लग रहा है!

अपने 2, को यहां जोड़ते हुए, मैंने अपनी अधिकांश वेबसाइट को हैक करने में कामयाबी हासिल कर ली है (रेपो अभी भी Jekyll का उपयोग कर रहा है, जल्द ही Gatsby को @ avigoldman के gatsby-ट्रांसफॉर्मर-mdx के लिए mdx धन्यवाद का उपयोग करके Gatsby के ऊपर अपडेट या नया रेपो जोड़ रहा होगा)!

एक दम बढ़िया! इस सप्ताहांत / आगामी सप्ताह के लिए कुछ समय होना चाहिए ताकि इसे एक ऐसे पैकेज में बनाया जा सके जो Gatsby V2 के साथ अच्छी तरह से खेलता है।

@avigoldman एक बात मैं आपके gatsby- ट्रांसफॉर्मर-mdx से समझ नहीं पाया है वह प्रतिपादन कदम है। gatsby- ट्रांसफार्मर-टिप्पणी html फ़ील्ड (जो एक स्ट्रिंग है) का उपयोग करता है, आपका ट्रांसफार्मर क्या उपयोग करता है? यदि वे कहीं भी आवश्यक नहीं हैं, तो वेबपैक लोडर कैसे काम करता है?

ओह, मैं सिर्फ ऊपर की टिप्पणियों को पढ़ता हूं, चाल यह है कि Gatsby v1 स्वचालित रूप से एक लेआउट घटक में सब कुछ लपेटता है, इसलिए आप एमडीएक्स फ़ाइल को लक्षित करने के लिए absolutePath का उपयोग कर रहे हैं। 😃 इस ट्रिक के लिए धन्यवाद!

@avigoldman Gatsby 2 प्लगइन पर कोई खबर? यदि आप लेआउट घटक के बिना इसका निर्माण कर सकते हैं, तो आप बहुत बढ़िया दिशा-निर्देश दे सकते हैं जो कि Gatsby 2 में मौजूद नहीं है।
धन्यवाद!

मुझे उम्मीद थी कि मैं किसी तरह एमडीएक्स की export default सुविधा का उपयोग कर सकता हूं, लेकिन children अलावा किसी भी अतिरिक्त प्रॉप्स को पारित करना संभव नहीं लगता। mdx-js / mdx # 187

यदि मेरा PR मर्ज हो जाता है (mdx-js / mdx # 189), तो मुझे लगता है कि हम मौजूदा gatsby-plugin-mdx और gatsby- ट्रांसफार्मर-mdx के साथ 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-* प्लगइन्स हैं ~ प्रतिपादन तर्क के एक गुच्छा को फिर से लागू कर रहे हैं और जो शायद रिएक्ट में होना चाहिए। यह चीजों को बहुत सरल बना सकता है।

@DylanVann कि थोड़े निर्भर करता है। gatsby-remark-* प्लगइन्स बहुत सारे बिल्ड-टाइम ट्रांस्फ़ॉर्मेशन करते हैं कि अगर हमने रिएक्ट में किया तो इसका मतलब होगा कि बहुत सारे JS को ब्राउज़र में शिपिंग करना। इसके अलावा ऐसी चीजें जो असंभव हो जाती हैं जैसे कि https://www.gatsbyjs.org/packages/gatsby-remark-images/?=remark-image

आदर्श रूप से हम दोनों दुनिया को मिलाते हैं।

@KyleAMathews हाँ, इसका अर्थ होगा ग्राहक पक्ष पर कुछ और JS, हालाँकि इसे अभी भी स्थैतिक HTML के रूप में दिया जाएगा। मुझे लगता है कि बहुत सारे लोग शायद अपनी साइट के कुछ हिस्सों के लिए gatsby-image शिपिंग कर रहे हैं, इसलिए उस मामले में दोहराव किसी मुद्दे से कम नहीं है।

मैं समझता हूँ कि gatsby-remark-* प्लगइन्स में उपयोगिता है। रेंडरिंग लॉजिक विशेष रूप से, जो वर्तमान में स्ट्रिंग्स के साथ किया जाता है, ऐसा लगता है कि यह रिएक्ट में किया जा सकता है।

मुझे htmlAst / rehype-react पद्धति के साथ काम करने का इस प्रकार मिला है।

यह ऐसा लगता है, लेकिन व्यवहार में यह बहुत अधिक जटिल है। यदि आपको लगता है कि आप किसी चीज़ पर हैं, तो आप एक केंद्रित प्रस्ताव के साथ एक नया मुद्दा उठा सकते हैं।

यह हल करने के लिए एक कठिन समस्या की तरह लगता है। दुर्भाग्य से मुझे नहीं लगता कि मेरे पास कुछ भी लागू करने या प्रस्ताव करने का समय होगा। आंशिक रूप से रिएक्ट कस्टम घटकों का उपयोग करके remark प्लग करने का विचार निश्चित रूप से काम करता है, मेरे पास इसका उपयोग करने वाला कोड है।

यह द्वारा उत्पन्न होता है @dylanvann/gatsby-remark-cloudinary में समाप्त होने वाले markdown छवियों से mp4 । विचार वीडियो को अनुकूलित करने का है (निर्माण समय पर आकार देना, पोस्टर जोड़ना)। मैं हालांकि प्रतिक्रिया में प्रतिपादन तर्क चाहता था। वीडियो का प्रसंस्करण दूसरे फ़ंक्शन में किया जाता है लेकिन यह नोड के 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 और क्लाइंट पक्ष के लिए काम करता है। वैसे भी मुझे पता है कि यह ओएसएस के साथ कैसा है। मैं सिर्फ यह कह रहा हूं कि मुझे लगता है कि यह एक बड़ी विशेषता होगी और कोड जटिलता को कम कर सकती है, इसलिए यह बहुत अच्छा होगा यदि किसी के पास बेहतर समाधान निकालने का समय हो।

आप जो कुछ भी कह रहे हैं, उससे मैं असहमत नहीं हूं, मुझे लगता है कि एक अच्छी चर्चा शुरू करना अपने स्वयं के मुद्दे में बहुत बेहतर होगा, बजाय 60+ टिप्पणियों के बहुत भरे हुए धागे के अंत में। 😉

मुझे और @avigoldman ने घर में महत्वाकांक्षी 2.0 संगत MDX एकीकरण और बर्तनों के लिए gatsby- mdx बनाया।

वर्तमान में gatsby .mdx पृष्ठ प्लगइन को सक्षम करने के बाद डिफ़ॉल्ट रूप से काम करते हैं और mdx के शीर्ष पर निम्नलिखित अतिरिक्त सुविधाएँ जोड़ी गई हैं:

• क्लासिक और JSON स्टाइल फ्रंटमैटर का उपयोग और क्वेरी करें
• Mdx फ़ाइलों के लिए डिफ़ॉल्ट लेआउट परिभाषित करें जो एक को परिभाषित नहीं करते हैं

हम इसके लिए और अधिक परिष्कृत एकीकरण की योजना बना रहे हैं

• उन्नत छवि प्रसंस्करण
• कस्टम एमडी और hast प्लगइन्स।
• Gatsby- ट्रांसफार्मर-टिप्पणी के रूप में सभी समान क्षेत्रों के साथ संगतता

हम अभी भी जीवन चक्र में बहुत जल्दी हैं, इसलिए हमें बताएं कि क्या आप किसी भी मुद्दे में भाग लेते हैं और हम इसे पूरा कर लेंगे :)

@ChristopherBiscardi इसका मतलब गैट्सबी-प्लगइन-एमडीएक्स के साथ संयोजन में या इसके बजाय इसका उपयोग करने के लिए है?

@silvenon ऐसा लगता है कि gatsby-plugin-mdx पदावनत हो जाएगा और इस तरह 1.0 पर रुक जाएगा, जबकि gatsby-mdx 2.0 और आगे के साथ आगे बढ़ेगा।

@ m-allanson इस मुद्दे को बंद करने के लिए अपनी सुरक्षित सोचता है कि अब हमारे पास gatsby-mdx है ?

मुझे ऐसा लगता है, सभी को धन्यवाद everyone

तो क्या gatsby-mdx अब rehype-react gatsby-transformer-remark के साथ संयोजन के रूप में पसंद किया जा सकता है जैसा यहाँ वर्णित

यदि उत्तर स्पष्ट नहीं है, तो क्या कोई व्यक्ति दोनों दृष्टिकोणों के फायदे और कमियां बता सकता है?

मुझे लगता है कि उस ब्लॉग पोस्ट का यह हिस्सा आपके सवाल का जवाब देता है। रीहाइप-रिएक्शन कस्टम HTML तत्वों को प्रदान करता है जो रिएक्ट घटकों के लिए मैप करते हैं, लेकिन MDX वास्तव में मार्कडाउन के अंदर JSX है, यह अधिक पूर्वानुमान है और इसमें कम चेतावनी है।

मैं गैट्सबी टीम में नहीं हूं, लेकिन मैं कहूंगा कि हां, मार्कटड में रिएक्ट का पसंदीदा तरीका gatsby-mdx है।

@ जनाब जहाँ तक मुझे पता है कि gatsby-mdx gatsby- ट्रांसफार्मर-टिप्पणी को पूरी तरह से बदल नहीं सकता है
उदाहरण और अन्य गैट्सबी-टिप्पणी प्लगइन्स के लिए अभी भी गैट्सबी-टिप्पणी-छवियां और गैट्सबी-टिप्पणी-कॉपी-लिंक्ड-फाइलें याद आती हैं ..
मुझे लगता है कि वे इस पर काम कर रहे हैं, लेकिन वर्तमान स्थिति के बारे में निश्चित नहीं हैं

लेकिन अगर आप उन प्लगइन्स की ज़रूरत में नहीं हैं या प्रतीक्षा कर सकते हैं तो मैं कहूँगा हाँ, कम से कम मैं इसे पसंद करूँगा, मुझे साफ लगता है

@CanRau मैं विलय और विमोचन के इरादे से आज (https://github.com/ChristopherBiscardi/gatsby-mdx/pull/68) का धारा पर इससे पहले कि मैं मर्ज करें।

PR की स्थिति यह है कि gatsby-comment- * प्लगइन्स को ठीक से लागू किया जाता है, लेकिन इस बात में अंतर होता है कि कैसे आउटपुट का कहना है, gatsby-comment-prismjs प्लगइन (जो वर्तमान में HTML आउटपुट का उत्पादन करता है) को ट्रांसफॉर्मर-टिप्पणी mdx's द्वारा संभाला जाता है पाइपलाइन। मुझे गट्सबी-कॉमेंट-प्रिज्म जैसे प्लगइन्स के लिए समर्थन महत्वपूर्ण है, लेकिन यह भी एक उप-दृष्टिकोण है। MDX दुनिया में एक बेहतर दृष्टिकोण प्रिज्म-रिएक्शन-रेंडरर की तरह code तत्व का उपयोग MDXProvider , जो आपको उपयोग करने की तुलना में रेंडरिंग पर पूर्ण लचीलापन और नियंत्रण प्रदान करेगा। टिप्पणी प्लगइन्स एक समान प्रभाव को प्राप्त करने के लिए (और आपको गैर-mdx सामग्री जैसे .js पृष्ठों के साथ उस घटक को साझा करने की अनुमति भी देता है)।

मैं कॉपी-लिंक्ड-फाइल्स और इमेज प्रोसेसिंग के साथ काम करने से बहुत ज्यादा चिंतित हूं, क्योंकि मैं पहले से ही gatsby-comment- * प्लगइन समर्थन के रिलीज के लिए काम कर रहा हूं।

बहुत बढ़िया लगता है @ChristopherBiscardi विशेष रूप से कॉपी-लिंक्ड फ़ाइलें और छवि समर्थन, मैं मदद करना पसंद करेंगे, लेकिन वास्तविक रूप से बोलें तो मुझे नहीं लगता कि मैं इसे अभी संभाल सकता हूं क्योंकि हम वास्तव में पैक कर रहे हैं ^ ^
शायद मैं कुछ प्रतिक्रिया साझा कर सकता हूं, मुझे लगता है कि मैं चीजों को आज़माने के लिए कुछ छोटे मेटा पृष्ठों के लिए कोशिश करूंगा

यह जानना दिलचस्प है कि आप अपना काम पूरा कर रहे हैं..मैं सामान रखने के लिए बहुत नया हूं और अभी तक यह नहीं समझ पाया कि जब आप जीवन जा रहे हैं तो कैसे पता चलेगा..बस एक खाते के साथ काम करता है जो मुझे लगता है

अगर आपको समय मिले तो भविष्य में किसी भी बिंदु पर आपकी मदद करने में प्रसन्नता महसूस करें, यदि आपके प्रश्न हों तो मुझे बेझिझक पाइए :) प्रतिक्रिया स्वयं ही किसी भी तरह से एक गुच्छा में मदद करती है, हालांकि यदि आप इसे आजमाते हैं तो मुद्दों को दर्ज करना सुनिश्चित करें!

यह जानना दिलचस्प है कि आप अपना काम पूरा कर रहे हैं..मैं सामान रखने के लिए बहुत नया हूं और अभी तक यह नहीं समझ पाया कि जब आप जीवन जा रहे हैं तो कैसे पता चलेगा..बस एक खाते के साथ काम करता है जो मुझे लगता है

मैंने अपने चिकोटी चैनल के नीचे स्ट्रीमिंग समय का "कैलेंडर" स्थापित किया। मुझे पता है कि अगर किसी के पास एक चिकोटी खाता है और वे मेरा अनुसरण करते हैं तो मुझे लाइव होने पर सूचनाएं मिलेंगी, लेकिन अन्यथा शेड्यूल यह है कि कहां देखें। बहुत यकीन है कि आप देख सकते हैं कि आपके पास कोई खाता है या नहीं। मैं अपने आप को स्ट्रीमिंग करने के लिए थोड़ा नया हूं (केवल इसे अभी कुछ सप्ताह कर रहा हूं) इसलिए इस तरह के सामान को करने के लिए हमेशा बेहतर तरीके से खोलें। मैंने कुछ लोगों को बार-बार घूमने और बाहर घूमने / देखने / बातचीत करने के लिए कहा जो बहुत मजेदार है :)

काे मिल गया, जानकर अच्छा लगा

और मैं निश्चित रूप से मुद्दों पर पोस्ट करूँगा जब मैं किसी भी मुठभेड़;)

Btw, चूंकि प्रिज्म का उल्लेख किया गया था, मैं सिर्फ यह जोड़ना चाहूंगा कि आदर्श रूप से टिप्पणी / rehype प्लगइन्स को सीधे इस्तेमाल किया जाना चाहिए, MDX का समर्थन करता है कि mdPlugins और hastPlugins विकल्पों के माध्यम से (इसे gatsby के माध्यम से पास किया जा सकता है) -एमडीएक्स)। @ Mapbox / rehype- प्रिज्म जैसे प्लगइन्स hastPlugins जोड़े जा सकते हैं, लेकिन कुछ व्हाट्सएप मुद्दे थे जो मैंने mdx-js / mdx # 226 में तय किए थे, इसलिए एक बार विलय और जारी होने के बाद, सिंटैक्स हाइलाइटिंग अच्छी होगी जाना!

हाँ, पूरी तरह से। gatsby-mdx पहले से ही mdx कोर के माध्यम से पासिंग कमेंट / रीहाइप प्लगइन्स का समर्थन करता है। यहाँ उदाहरण के लिए @ mapbox / rehype-prism है (मैंने आपके पीआर / इश्यू चर्चाओं के कुछ उदाहरण मूल रूप से @silvenon , धन्यवाद से yanked किया है)। AFAIK rehype प्रिज्म प्रिज्म प्लगइन्स का समर्थन नहीं करता है इसलिए यह हमेशा उपयोग मामलों के आधार पर एक ट्रेडऑफ़ है (मेरा मानना ​​है कि प्रिज़्म के लिए रिहिप प्लगइन्स का उपयोग करने का मतलब है कि आपके पास प्रतिक्रिया-लाइव जैसी किसी चीज़ को एकीकृत करने में कठिन समय होगा, उदाहरण के लिए)

gatsby-comment-prismjs और अन्य gatsby-comment- * प्लगइन समर्थन आज 0.1.1 में जारी किया गया था, इसलिए अब रीहाइप / टिप्पणी / प्रतिक्रिया-घटकों के बीच वाक्यविन्यास हाइलाइटिंग के लिए कम से कम 3 विकल्प हैं-