اعلام پیش نمایش زنده برای Storyblok’s Astro Integration

ما کاملاً هیجان زده هستیم که اعلام کنیم با شروع نسخه 4.1.0 یکپارچه سازی Astro ما @storyblok/astro اکنون به طور رسمی از عملکرد پیش نمایش زنده ویرایشگر ویژوال محبوب Storyblok پشتیبانی می کند. با این ویژگی جدید، توسعه‌دهندگان می‌توانند ویرایشگران را برای ایجاد محتوا در پروژه‌های Astro و بهره‌مندی از بازخورد لحظه‌ای و لحظه‌ای که تغییرات آن‌ها را منعکس می‌کند، توانمند کنند. بیایید آن را در عمل ببینیم:

نحوه استفاده از آن

از آنجایی که این یک ویژگی آزمایشی و انتخابی است، ابتدا باید آن را با تنظیم فعال کنید livePreview به true در شما astro.config.mjs فایل.

export default defineConfig({
  integrations: [
    storyblok({
      accessToken: "your-access-token",
      livePreview: true,
    }),
  ],
});

از آنجایی که ویژگی پیش نمایش زنده به شی Astro بستگی دارد، ما یک تابع ابزار جدید به نام طراحی کرده ایم useStoryblok که آن را به عنوان یک پارامتر در نظر می گیرد. علاوه بر این، ممکن است بخواهید گزینه های Storyblok Bridge را برای یک صفحه یا مسیر خاص به عنوان پارامتر ارسال کنید. بیایید به یک مثال نگاه کنیم:

---
import { useStoryblok } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";

const { slug } = Astro.params;

const story = await useStoryblok(
  // The slug to fetch
  `cdn/stories/${slug === undefined ? "home" : slug}`,
  // The API options
  {
    version: "draft",
  },
  // The Bridge options (optional, if an empty object, null, or false are set, the API options will be considered automatically as far as applicable)
  {},
  // The Astro object (essential for the live preview functionality)
  Astro
);
---

<StoryblokComponent blok={story.content} />

در نهایت، مطمئن شوید که پروژه شما در حالت SSR اجرا می شود تا عملکرد پیش نمایش زنده کار کند. برای اطلاعات بیشتر، ممکن است بخواهید آموزش ما را در مورد نحوه ایجاد یک محیط پیش نمایش اختصاصی برای پروژه Storyblok و Astro بخوانید.

و تمام، درست مثل آن، شما پیش نمایش زنده را فعال کردید!

چگونه به وجود آمد

وقتی اولین نسخه را منتشر کردیم @storyblok/astro در سال 2022، ما آگاه بودیم که در مقایسه مستقیم با سایر ادغام های ارائه شده به عنوان بخشی از اکوسیستم جاوا اسکریپت SDK ما، ادغام Astro مزایای بازخورد بصری بلادرنگ را ارائه نمی دهد. از آنجایی که Astro اساساً با سایر فریم ورک‌های جاوا اسکریپت مدرن تفاوت دارد و زمان اجرای سمت کلاینت را برای مؤلفه‌های اصلی خود ارائه نمی‌کند (که البته بخشی از جذابیت آن است)، رویکرد اثبات‌شده زمانی که ما برای چارچوب‌های دیگر استفاده می‌کنیم، در یک چارچوب قابل اجرا نیست. زمینه نجومی. در حالی که ما همیشه متصور بودیم و امیدوار بودیم که بتوانیم پشتیبانی از این ویژگی یکپارچه Storyblok را معرفی کنیم، به این نتیجه رسیده بودیم که از نظر فنی امکان پذیر نیست.

تلاش مبتکرانه یکی از نزدیک ترین شرکای ما، Virtual Identity، و به ویژه توسعه دهنده آنها Mario Hamann لازم بود تا به ما ثابت کند (بسیار!) اشتباه می کنیم. اعضای هیئت مدیره هویت مجازی تیمو مایر و ماریو هامان با ما تماس گرفتند و یک POC ارائه کردند که از یک رویکرد بسیار خلاقانه و استادانه طراحی شده پیروی می کند. با همکاری نزدیک، ماریو هامان و Dipankar Maikap خودمان این راه حل را اصلاح، آزمایش و یکپارچه کردند. ما واقعاً از Virtual Identity سپاسگزاریم که نه تنها این انگیزه نوآورانه را ارائه کرد، بلکه حتی فراتر از آن تلاش کرد تا زمان و تلاش خود را برای آماده کردن این بازار اختصاص دهد. در هر صورت، ما می دانیم که برای حل یک چالش تقریبا غیرممکن دوباره به کدام تیم فوق العاده با استعداد مراجعه کنیم.

چگونه زیر کاپوت کار می کند

به طور خلاصه، این رویکرد با به روز رسانی DOM با استفاده از متد ()replacementWith جاوا اسکریپت کار می کند. بسته به زمینه ای که در آن DOM به طور کامل یا جزئی جایگزین می شود input رویداد پل Storyblok فعال می شود. به لطف قدرت و انعطاف‌پذیری API یکپارچه سازی Astro، شی Astro می‌تواند برای ذخیره به‌روزترین داده‌های داستان ارائه شده توسط پل Storyblok استفاده شود. علاوه بر این، یک میان افزار تزریق شده با در نظر گرفتن داده های ذخیره شده در شی Astro، تعیین می کند که آیا یک داستان را به طور معمول بارگیری کند یا DOM را به روز کند.

در حالی که ثابت شده است که این روش در اکثر آزمایش‌های ما فوق‌العاده خوب عمل می‌کند، مهم است که به این نکته اشاره کنیم که ممکن است در پروژه‌های مقیاس بزرگ با روابط پیچیده برای حل و فصل و/یا اسکریپت‌های اسلاید کلاینت سنگین با اشکالاتی مواجه شوید. از این رو، ما آن را به عنوان یک ویژگی آزمایشی و انتخابی در حال حاضر منتشر کرده ایم. اگر مشکلی را تجربه کردید، اگر در GitHub ایجاد کرده باشید، واقعاً قدردانی خواهیم کرد. ما به بازخورد شما متکی هستیم و از بررسی آن خوشحالیم.

اگر می خواهید خودتان آن را کاوش کنید، منطق کلیدی در این فایل ها موجود است:

علاوه بر این، Dipankar Maikap، به لطف پشتیبانی ارائه شده توسط متیو فیلیپس، مدیر ارشد فناوری شرکت Astro Technology، یک ماژول مجازی Vite را با موفقیت ایجاد کرده است که امکان عبور گزینه های Storyblok Bridge را از Astro Pages فراهم می کند.

مراحل بعدی

امیدواریم برای امتحان این ویژگی جدید هیجان زده باشید! ما کاملاً دوست داریم پروژه های شما را با Storyblok و Astro ساخته شده ببینیم و نظرات شما را در مورد این آخرین ویژگی بشنویم.

آیا می خواهید در توسعه @storyblok/astro مشارکت کنید؟ برای ایجاد مشکل یا روابط عمومی در مخزن رسمی GitHub احساس راحتی کنید.

منابع بیشتر