react notion x

رد فعل مفهوم x

عارض رد فعل سريع ودقيق للمفهوم. شملت بطاريات TS. ⚡

محتويات

• رد فعل مفهوم x
  • محتويات
  • نصيحة
  • سمات
  • الاستخدام
  • أنماط
  • مكونات اختيارية
  • صفحات خاصة
  • أمثلة next.js
  • حزم
  • كتل مدعومة
  • أداء
  • متعلق ب
  • المساهمة
  • رخصة
  • راعي

نصيحة

إذا كنت ترغب فقط في نشر موقع ويب باستخدام فكرة ، فإننا نوصي بشدة باستخدام Super.so - وهو حل مستضاف مع Perf Great الذي يهتم بكل التفاصيل لك.

إذا كنت ترغب في مزيد من التحكم في موقع الويب الخاص بك عبر React ، فإننا نوصي بمراجعة مجموعة Starter Next.js المصاحبة ، وهي مجانية وتستخدم react-notion-x تحت الغطاء.

وإذا كنت تريد المزيد من التحكم ، فأنت في المكان المناسب! ؟

سمات

• بسيط - TypeScript + React
• ⚡ سريع - 10-100x أسرع من الفكرة
  • 95-100 ٪ درجات منارة
  • يمكن تحميل المكونات الأثقل بتكاسل عبر next/dynamic
• ؟ الاختبارات - تأتي مع جناح اختبار شامل يغطي معظم وظائف الفكرة
• صلبة - تستخدم في الإنتاج من قبل الجرعة وآلاف المواقع الإلكترونية
• ؟ سلس - يدعم next/image مع صور معاينة LQIP (العرض التوضيحي)
• إطار عمل لاضيف-استخدم مع next.js ، إنشاء التفاعل ، غاتسبي ، إلخ

الاستخدام

أولاً ، ستحتاج إلى جلب المحتوى لصفحة فكرة:

 import { NotionAPI } from 'notion-client'

const notion = new NotionAPI ( )

const recordMap = await notion . getPage ( '067dd719a912471ea9a3ac10710e7fdf' )

بمجرد حصولك على البيانات للحصول على صفحة فكرة ، يمكنك تقديمها عبر React:

 import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'

export default ( { recordMap } ) => (
  < NotionRenderer recordMap = { recordMap } fullPage = { true } darkMode = { false } />
)

ملاحظة: بالنسبة للكتل الأثقل ، سيتعين عليك اختيار استخدامها عبر NotionRenderer.components . لا يتم تضمينها في تصدير NotionRenderer الافتراضي لأنها ثقيلة للغاية للعديد من حالات الاستخدام.

أنماط

ستحتاج إلى استيراد بعض أنماط CSS أيضًا. إذا كنت تستخدم next.js ، نوصيك بوضع هذه الواردات في الجزء العلوي من pages/_app.js :

 // core styles shared by all of react-notion-x (required)
import 'react-notion-x/src/styles.css'

// used for code syntax highlighting (optional)
import 'prismjs/themes/prism-tomorrow.css'

// used for rendering equations (optional)
import 'katex/dist/katex.min.css' 

مكونات اختيارية

تسعى الواردات الافتراضية من react-notion-x إلى أن تكون خفيفة الوزن قدر الإمكان. ستجعل معظم الكتل على ما يرام ، ولكن لا يتم تضمين بعض الكتل الكبيرة مثل PDFs و INCHOLING VIAWS (طرق عرض قاعدة البيانات) افتراضيًا.

لاستخدامها ، ستحتاج إلى استيراد تلك التي تريدها من react-notion-x/build/third-party/* :

 import { Code } from 'react-notion-x/build/third-party/code'
import { Collection } from 'react-notion-x/build/third-party/collection'
import { Equation } from 'react-notion-x/build/third-party/equation'
import { Modal } from 'react-notion-x/build/third-party/modal'
import { Pdf } from 'react-notion-x/build/third-party/pdf'

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

إذا كنت تستخدم next.js ، فيمكنك استخدام Next/Dynamic لتحميلها بتكاسل. إذا لم يستخدم محتوى فكرةك أحد مكونات الوزن الثقيل هذه ، فلن يتم تحميله في صفحتك. هذا يحافظ على حزمة الصفحة الأولية الصغيرة وموقع الويب الخاص بك يشعر بالضيق.

 import dynamic from 'next/dynamic'

const Code = dynamic ( ( ) =>
  import ( 'react-notion-x/build/third-party/code' ) . then ( ( m ) => m . Code )
)
const Collection = dynamic ( ( ) =>
  import ( 'react-notion-x/build/third-party/collection' ) . then (
    ( m ) => m . Collection
  )
)
const Equation = dynamic ( ( ) =>
  import ( 'react-notion-x/build/third-party/equation' ) . then ( ( m ) => m . Equation )
)
const Pdf = dynamic (
  ( ) => import ( 'react-notion-x/build/third-party/pdf' ) . then ( ( m ) => m . Pdf ) ,
  {
    ssr : false
  }
)
const Modal = dynamic (
  ( ) => import ( 'react-notion-x/build/third-party/modal' ) . then ( ( m ) => m . Modal ) ,
  {
    ssr : false
  }
)

ستحتاج إلى تمكينهم عن طريق تمريرها إلى components الدعامة من NotionRenderer .

 export default ( { recordMap } ) => (
  < NotionRenderer
    recordMap = { recordMap }
    components = { {
      Code ,
      Collection ,
      Equation ,
      Modal ,
      Pdf
    } }
  />
)

يستخدم مكون Code المنشور تحت الغطاء. يأتي مجمعة بدعم لـ JavaScript و TypeScript و CSS افتراضيًا. لإضافة دعم لبناء جملة اللغة الإضافية ، اتبع المثال في components/NotionPage.tsx . من المحتمل أن ترغب في إضافة prismjs إلى مشروعك كاعتماد عند استخدام مكون Code حتى لا يشتكي TypeScript.

للحصول على دعم Equation ، ستحتاج إلى استيراد أنماط Katex CSS.

لكل من هذه المكونات الاختيارية ، تأكد من أنك تستورد أيضًا CSS من الجهة الثالثة ذات الصلة إذا لزم الأمر (أعلاه).

صفحات خاصة

يمكنك تمرير authToken و activeUser اختياريًا إلى API إذا كنت ترغب في الوصول إلى صفحات فكرة خاصة. يمكن استرداد كلاهما من متصفح الويب الخاص بك. بمجرد مشاهدة مساحة العمل الخاصة بك ، افتح أدوات التطوير الخاصة بك> التطبيق> ملف تعريف الارتباط> ونسخ token_v2 و notion_user_id . على التوالي ، ActiveUser: indice_user_id ، authtoken: token_v2.

نوصي بتخزين هذه المتغيرات البيئية ونقلها إلى مُنشئ NotionAPI على النحو التالي:

 const notion = new NotionAPI ( {
  activeUser : process . env . NOTION_ACTIVE_USER ,
  authToken : process . env . NOTION_TOKEN_V2
} )

لاحظ أن هذا ليس هو نفسه رمز API الذي توفره واجهة برمجة تطبيقات الفكرة الرسمية لأن notion-client تستخدم واجهة برمجة تطبيقات الفكرة غير الرسمية (وهو ما تستخدمه كل تطبيقات الفكرة).

أمثلة next.js

فيما يلي مشروع مثال MIXMALE NEXT.JS مع أهم رمز في pages/[pageId].tsx components/NotionPage.tsx . يمكنك عرض هذا المثال على الهواء مباشرة على Vercel.

فيما يلي مشروع مثال على سبيل المثال أكثر من المعتاد مع أهم رمز في pages/[pageId].tsx components/NotionPage.tsx . يمكنك عرض هذا المثال على الهواء مباشرة على Vercel.

يضيف العرض التجريبي الكامل بعض الميزات الرائعة:

• يستخدم التالي/الصورة لتقديم الصور المثلى
• يستخدم صور المعاينة التي تم إنشاؤها عبر LQIP-Mode
• حزم بتكاسل مكونات اختيارية أكبر عبر التالي/الديناميكي
  • شفرة
  • معادلة
  • PDF
  • وسيط
  • المجموعة (على سبيل المثال ، قواعد بيانات المفهوم بما في ذلك طرق عرض الجدول والمعرض)

للحصول على مثال على الإنتاج ، تحقق من مجموعة Starter Next.js ، والتي تستخدم react-notion-x أسفل الغطاء.

حزم

طَرد	NPM	بيئة	وصف
رد الفعل-notion-x		متصفح + SSR	عارض رد فعل سريع للمفهوم.
فكرة عاهرة		جانب الخادم*	عميل TypeScript القوي لمؤسسة API.
أنواع الفكرة		عالمي	أنواع الفكرة الأساسية أنواع.
الفكرة		عالمي	الأدوات المساعدة المفيدة للعمل مع بيانات الفكرة.

* لا ينبغي استدعاء واجهة برمجة تطبيقات الفكرة من المتصفحات من جانب العميل بسبب قيود CORS. notion-client متوافقة مع Node.js و Deno.

كتل مدعومة

غالبية كتل المفهوم ووجهات نظر التجميع مدعومة بالكامل.

نوع الكتلة	مدعوم	كتلة نوع التعداد	ملحوظات
صفحة	✅ نعم	page
نص	✅ نعم	text	يدعم جميع خيارات تنسيق النص المعروفة
إشارة مرجعية	✅ نعم	bookmark	معاينة مضمنة لعنوان URL الخارجي
قائمة نبضات	✅ نعم	bulleted_list	<ul>
قائمة مرقمة	✅ نعم	numbered_list	<ol>
العنوان 1	✅ نعم	header	<h1>
العنوان 2	✅ نعم	sub_header	<h2>
العنوان 3	✅ نعم	sub_sub_header	<h3>
يقتبس	✅ نعم	quote
شرح	✅ نعم	callout
المعادلة (كتلة)	✅ نعم	equation	Katex عبر React-Katex
المعادلة (مضمنة)	✅ نعم	text	Katex عبر React-Katex
Todos (مربعات الاختيار)	✅ نعم	to_do
جدول المحتويات	✅ نعم	table_of_contents	انظر notion-utils getPageTableOfContents التضمين
مقسم	✅ نعم	divider	الخط الأفقي
عمود	✅ نعم	column
قائمة الأعمدة	✅ نعم	column_list
تبديل	✅ نعم	toggle	<details>
صورة	✅ نعم	image	<img>
تضمين	✅ نعم	embed	إطارات iframe العامة
فيديو	✅ نعم	video	iframe
FIGMA	✅ نعم	figma	iframe
خرائط جوجل	✅ نعم	maps	iframe
محرك Google	✅ نعم	drive	جوجل مستندات ، أوراق ، إلخ.
سقسقة	✅ نعم	tweet	يستخدم Twitter تضمين SDK
PDF	✅ نعم	pdf	يستخدم عناوين URL الموقعة S3 و React-PDF
صوتي	✅ نعم	audio	يستخدم عناوين URL الموقعة S3 وعنصر audio HTML5
ملف	✅ نعم	file	يستخدم عناوين URL الموقعة S3 (ملف قابل للتنزيل عام)
وصلة	✅ نعم	text	روابط خارجية
رابط الصفحة	✅ نعم	page	رابط إلى صفحة فكرة في نفس مساحة العمل
رابط الصفحة الخارجية	✅ نعم	text	روابط إلى صفحة فكرة أو عرض مجموعة في مساحة عمل أخرى
الكود (كتلة)	✅ نعم	code	تمييز بناء جملة الكود عبر Prismjs
رمز (مضمّن)	✅ نعم	text	تنسيق رمز مضمّن (لا يسلط الضوء على بناء الجملة)
مجموعات	✅ نعم		المعروف أيضًا باسم قواعد البيانات
عرض المجموعة	✅ نعم	collection_view	المجموعات لديها 1: n رسم الخرائط لجمع طرق العرض
جدول عرض الجدول	✅ نعم	collection_view	type = "table" (عرض الجدول الافتراضي)
مجموعة معرض عرض	✅ نعم	collection_view	type = "gallery" (عرض الشبكة)
مجموعة عرض لوحة	✅ نعم	collection_view	type = "board" (kanban view)
قائمة عرض المجموعة	✅ نعم	collection_view	type = "list" (عرض القائمة العمودية)
مجموعة عرض التقويم	مفتقد	collection_view	type = "calendar" (عرض التقويم المدمج)
جمع صفحة عرض	✅ نعم	collection_view_page	عرض المجموعة كصفحة مستقلة

يرجى إعلامنا إذا وجدت أي مشكلات أو كتل مفقودة.

يمكن العثور على جميع الكتل المعروفة وإعدادات التكوين المعروفة في جناح الاختبار الخاص بنا.

أداء

درجات منارة Google لصفحة مثال يتم تقديمها بواسطة "React-Notion-X" على Vercel.

خارج الصندوق ، يكون react-notion-x سريعًا وخفيف الوزن نسبيًا ، ولكن هناك بعض العوامل الرئيسية التي يجب أن تكون على دراية بها.

تقارير Bundlephobia حجم حزمة Gzip ~ 28 كيلو بايت لحزمة react-notion-x الرئيسية. لا يتضمن ذلك مكونات third-party الاختياري والتي نوصي بالتحميل الكسول عبر التالي/الديناميكي فقط إذا كانت الصفحة تحتاجها.

هناك عامل رئيسي آخر لـ Perf يأتي من الصور التي تستضيفها فكرة. إنها عمومًا غير متوقفة ، وحجمها بشكل غير صحيح ، وليست قابلة للتخطيط لأن الفكرة يجب أن تتعامل مع التحكم الدقيق للوصول الذي يمكن للمستخدمين تغييره في أي وقت. يمكنك تجاوز وظيفة mapImageUrl الافتراضية على NotionRenderer لإضافة التخزين المؤقت عبر CDN مثل عمال CloudFlare ، وهو ما تفعله الفكرة X لسرعات تحميل الصفحة المثلى.

يدعم NotionRenderer أيضًا تحميل الصور الكسول مع معاينات النائب لتصوير صورة منخفضة الجودة. يمكنك رؤية عرض توضيحي لهذا الممارسة في هذه الصفحة التي تستخدم LQIP-Mode-Mode لتوصيل الصور المسبقة للعلامة المسبقة التي تستوحى من تحميل صورة Medium.com.

إذا كنت تستخدم next.js ، فإننا نوصي بتمرير next/image أو next/legacy/image ، والرابط next/link على النحو التالي:

 import Image from 'next/image' // or import Image from 'next/legacy/image' if you use legacy Image
import Link from 'next/link'

export default ( { recordMap } ) => (
  < NotionRenderer
    recordMap = { recordMap }
    components = { {
      nextImage : Image , // or nextLegacyImage: LegacyImage,
      nextLink : Link
    } }
  />
)

هذا يلتف مكونات Next.js في طبقة التوافق بحيث يمكن NotionRenderer استخدامها مثل ما يعادلها غير next.js <img> و <a> .

لاحظ أن مكون الصورة المخصص يتم تمكينه حاليًا فقط باستخدام صورة المعاينة أو عن طريق تشغيل forceCustomImages of NotionRenderer .

متعلق ب

• قالب NEXT.JS - أسهل طريقة لنشر موقع فكرة مستضافة ذاتيًا باستخدام NEXT.JS و Vercel.
  • يستغرق فقط بضع دقائق للإعداد!
  • يستخدم react-notion-x تحت الغطاء
• جناح اختبار الفكرة - مجموعة شاملة من صفحات اختبار الفكرة
• React -Notion - React Original Reacter for Ision
  • بدأ react-notion-x كشواف من react-notion مع دعم أفضل لأنواع مختلفة من محتوى الفكرة (وخاصة المجموعات) ونمت إلى شيء أكثر شمولاً بكثير
  • لم يعد react-notion بنشاط
• عامل الفكرة-عامل-وكيل واجهة برمجة التطبيقات المفهوم المكشوف كعامل CloudFlare
  • notion-types والفكرة notion-client هي إعادة كتابة notion-api-worker
  • إحدى حالات الاستخدام الرئيسية لـ react-notion-x هي تقديم من جانب الخادم عبر Next.js ، وفي هذه الحالة يكون عامل التليف الكيسي غير ضروري
  • نوصيك باستخدام فكرة العميل بدلاً من ذلك
• مفهوم - غلاف بيثون حول مفهوم واجهة برمجة تطبيقات

المساهمة

انظر دليل المساهمة وانضم إلى قائمة المدهشين من المساهمين!

رخصة

MIT © Travis Fischer

يمتد هذا المشروع العمل المرخص لـ MIT من قبل Timo Lins و Tobias Lins و Sam Wight وغيرهم من المساهمين.

دعم عملي OSS من خلال متابعتي على Twitter

راعي

لقد كان Super.so لطيفًا بما يكفي لرعاية هذا المشروع. إذا كنت تبحث عن حل مستضيف يتطلب مقاربة مشابهة جدًا لـ react-notion-x ولكنها تتعامل مع جميع التفاصيل لك ، ثم تحقق من ذلك بالتأكيد.