mdnext
1.0.0
MDNEXT هو نظام بيئي للأدوات للحصول على مشاريع MDX NEXT
تبحث لبدء مشروع جديد؟
# Using NPX we'll start up the mdnext CLI prompts --
npx mdnext
# You will first be prompted with.. --
What is the name of your project ?
# Then you will choose which template to use
Select which template to use ... فقط هل تريد الوصول إلى المكونات في تطبيقات MDX الخاصة بك؟
# Even though we're a Next based ecosystem, our `MDX` components should be usable in most React based applications
yarn add @mdnext/components
or
npm i @mdnext/components mdnext هو نظام بيئي للأدوات لتمكين العمل مع NEXTJS + MDX.
mdnext CLI يمنح مجموعة تم الحفاظ عليها رسميًا وقوالب المجتمع للاختيار من بينها. بمجرد اختياره ، يتم استنساخ المشروع محليًا مع تاريخ الالتزام النظيف وأنت مستعد لبناء مشروعك التالي.
@mdnext/components توفر متاحة (بفضل chakraui) والمكونات القابلة للتمديد للعمل مع MDX . وتشمل هذه الأشياء التي رأيتها مثل مكونات Code لكتل رمز التصميم أو Iframes لتضمين المحتوى الغني على MDX
مجموعة mdnext Template هي مشاريع قائمة على NextJS مع آراء حول كيفية التصميم ، والتعامل مع MDX (ومصادر البيانات الأخرى) ، وتسليم الوسائط ، والتعامل مع مهام سير العمل المعتادة (ECOMM / POCKS / PRODUCT PAGES). في حين أن هناك مجموعة من القوالب التي تم صيانتها رسميًا ، كنت متحمسًا لرؤية ومشاركة ما أنشأه المجتمع. أعلم أن هناك العديد من الآراء والراحة المختلفة كمطور ويب وأريد الوصول إلى نظامنا الإيكولوجي.
يمكن رؤية الهيكل الأساسي لـ mdnext-starter في جميع القوالب الأخرى في جوهرها لكيفية استخدامها MDX و Next .
سيساعد التعرف على هذا الهيكل في إبلاغك بأفضل الممارسات الحالية التي يتم اتباعها (والتي هي مجانية في التفسير!) وسهلة التوصيل والتشغيل. دعونا نغطس في المبتدئ:
jsconfig.js
يتيح لنا NextJS تكوين المسارات المطلقة لتطبيقنا. نستخدم هذا لاستيراد جميع وظائفنا وأدواتنا داخل دليل src بسهولة
pages
يحدد دليل الصفحات التوجيه الخاص بك. تتوفر طرق دورة الحياة مثل getStaticProps / getStaticPaths / getServerProps على مستوى الصفحة. هذا هو المكان الذي نستهلك فيه محتوى MDX الخاص بنا كبيانات لنمرها إلى مكوناتنا.
*_app.js* يتيح لك NextJS تجاوز مكون التطبيق ، والذي يتم استخدامه لتهيئة الصفحات. المزيد هنا*_document.js* : يسمح لك بزيادة علامات تطبيقنا <html> و <body> .all-data/index.js : هذه الصفحة مثال على عرض الروابط لجميع صفحات بيانات MDX الفردية. هنا نستخدم getStaticProps لتغذية Frontmatter من ملفات MDX الخاصة بنا لمكوناتنا.data/[slug].js : هنا نستخدم التوجيه الديناميكي التالي. باستخدام getStaticPaths يمكننا إطعام سبيكة ديناميكية ، والتعامل مع جميع المنطق مرة واحدة وتطبيقه على كل بيانات MDX التي نقوم بتحميلها. يتيح لنا ذلك مطابقة بياناتنا في getStaticProps وعرض ذلك على الصفحة ومكوناتنا.index.js : صفحتنا في جذر تطبيقنا ، تعيش داخل pages الدلائل index.js . src لدينا دليل src يحمل جميع رمز العميل لدينا. components ، hooks المخصصة ، ووظائف utility ، وملفات MDX الخاصة بنا جميعها تعيش هنا ، مع أول ثلاثة متاحين للواردات المطلقة للمسار؟
next.config.js للتكوين المخصص حول أشياء مثل environment variables ، webpack ، و pageExtensions ، وغيرها الكثير ، يمكنك استخدام next.config.js
سيكون لكل قالب README الخاص به مع وثائق صريحة تتعلق بالإضافات التي تشكل التكوين الجديد. خلاف ذلك ، ستجد كل قالب في جوهره ، يبدأ بشكل مشابه إلى mdnext-starter
تم إجراء القوالب الموجودة داخل mdnext لتخفيف الاحتكاك عند بدء موقع ويب جديد. يمكن أن تشعر المدونات والمواقع الشخصية وعمل العميل ، وما إلى ذلك دائمًا ، شاقة للغاية للبدء.
ماذا علينا تحقيقه؟
كيف نتعامل مع التصميم؟
كيف سأتعامل مع البيانات؟
ما هي أفضل طريقة لدمج المصادقة؟
سوف تبدأ الآراء في هذه القوالب بسرعة وتسمح لك بالتخصيص كما ترى مناسبة.
قوالبنا التي تم الحفاظ عليها حاليًا:
mdnext-starter هذا هو القالب الأقل رأيًا ، يتم إنشاء جميع القوالب من. يضم الحد الأدنى من التكوين والرأي خارج مثال على تحديد مصادر MDX داخل getStaticProps/Pathsmdnext-blog تضيف قوالب المدونة ميزات أعلى من mdnext-starter . على وجه التحديد باستخدام Chakra-UI للتصميم. تكوين منشورات المدونات في الصفحة ومستوى المحتوى باستخدام ملفات MDX الخاصة بنا كطرق. FuseJS لتصفية منشورات مدوناتنا. تحقق من هذا القالب في العمل!mdnext-overlays عند أن تصبح لعبة جديدة ، تقابل العديد من التحديات. في النهاية ، سترغب في إعداد المشاهد الخاصة بك والرسوم المتحركة والتفاعلات الخاصة بك ومشاهديها. لماذا لا تستخدم الأدوات التي تحبها لإنشائها؟ مع هذا التكوين ، قمت بإعداد طبقة أساسية لتكوين كل مشهد جديد كطريق. يحتوي كل مسار على طرق للتفاعل مع Twitch API ، ودردشة نشلتك ، والمعلومات المحيطة بالتيار الخاص بك والأحداث!تم تقديم مجتمعات مجتمعنا:
mdnext-tailwind هل تريد الاستيقاظ والتشغيل بسرعة مع مشروع Tailwind + mdnext ؟ هذا هو الجواب. تكوين مناسب جنبًا إلى جنب مع مجموعة من الموارد للحصول على من الجديد في Tailwind يشعرون بالراحة!mdnext-twin-macro تم تكوين هذا المبتدئ مع twin.macro مع اختياره للتصميم. يتيح لك ذلك استخدام فصول الأدوات المساعدة الخاصة Tailwind's وطريقة css emotion's لأسلوب واحد.mdnext-graphcms باستخدام GraphCMS كموارد البيانات الخاصة بنا ، نقوم بإعداد الأساسيات للمدونة. إنه يبدأك بمثال بسيط على كيفية سحب التخفيضات من GraphCMs وتغذيةه إلى واجهة المستخدم الخاصة بنا مع MDX لديناmdnext-reflexjs ReflexJS هي مكتبة تصميم مصممة للسرعة وتجربة مطور ممتازة. يمكنك تصميم مكوناتك باستخدام الدعائم والقيود على أساس مواصفات نظام واجهة المستخدم.تريد تقديم قالب جديد؟ توجه إلى قسم المساهمة لدينا وتحقق من MDNext-Starter
