Обновление проекта SvelteKit и Storyblok (после последних изменений)

Новая версия SvelteKit принесла с собой некоторые долго обсуждаемые (ломающие) изменения и потребовала небольшой перестройки по многим направлениям — вероятно, прокладывая путь к выпуску SvelteKit 1.0 (скоро!?).

Если вы заинтересованы в использовании Storyblok с Sveltekit, вы могли наткнуться на нашу новую серию Ultimate Tutorial Series для Sveltekit (которая, к сожалению, устарела всего через пару дней после публикации). Мы обновим ее полностью, как только выйдет версия 1.0, не волнуйтесь. А пока давайте посмотрим, какие изменения нужно сделать для работы со SvelteKit и Storyblok.

SvelteKit & Storyblok

Давайте начнем с установки последней версии SvelteKit:

npm create svelte@latest your-app

cd your-app
npm install
npm run dev
Войдите в полноэкранный режим Выйти из полноэкранного режима

Вы пройдете через установку create svelte — конечно, эти настройки сильно зависят от ваших требований, но для этого руководства мы используем приложение Skeleton с ESLint & Prettier, без Typescript или Playwright.

После запуска npm run dev вы должны увидеть базовое стартовое приложение на localhost:5173.

Для работы со Storyblok V2 нам потребуется установить безопасное соединение с HTTPS. Мы сделаем это, установив плагин mkcert и включив его в наш vite.config.js:

npm i vite-plugin-mkcert -D
Вход в полноэкранный режим Выход из полноэкранного режима

vite.config.js:

import { sveltekit } from '@sveltejs/kit/vite';
import mkcert from 'vite-plugin-mkcert'

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [sveltekit(), mkcert()],
    server: {
        https: true
    },
};

export default config;
Войти в полноэкранный режим Выход из полноэкранного режима

Теперь в Storyblok все (кроме URL-адреса localhost) остается таким же, как и раньше:

Мы создадим новое пространство с нуля, дадим ему запоминающееся имя и перейдем в Настройки, чтобы изменить URL среды по умолчанию для визуального редактора на https://localhost:5173/.

В конфигурации визуального редактора вы можете установить реальный путь на «/». Теперь вы должны быть в состоянии видеть ваш localhost в визуальном редакторе.

Далее, давайте установим Storyblok с помощью Storyblok Svelte SDK:

 npm install @storyblok/svelte
Войдите в полноэкранный режим Выход из полноэкранного режима

Потрясающе 🎉

Дальше все становится действительно интересным:

Подключение Storyblok к SvelteKit

Теперь мы можем создать файл +page.js для инициализации нашей библиотеки, добавить API Plugin и маркер доступа в наше пространство. Раньше это делалось в __layout.svelte. Обратите внимание на новый знак +, указывающий на создание нового маршрута.


import { storyblokInit, apiPlugin } from "@storyblok/svelte";


storyblokInit({
    accessToken: "your-access-token",
    use: [apiPlugin]
});
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь вы можете добавить свой токен доступа, который вы можете получить на вкладке настроек в вашем пространстве Storyblok.

Далее мы получим содержимое с помощью useStoryblokAPI — раньше это делалось в index.svelte, но теперь мы можем сделать это в том же +page.js, потому что нам нужны эти данные, загруженные до того, как мы сможем отобразить страницу:

/** @type {import('./$types').PageLoad} */
export async function load() {

    const storyblokApi = useStoryblokApi();
    const { data } = await storyblokApi.get("cdn/stories/home", {
        version: "draft",
    });
    return {
        story: data.story
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, чтобы прослушивать наши изменения из визуального редактора, нам нужно настроить мост Storyblok Bridge. С помощью моста Storyblok Bridge мы сможем видеть наши изменения в режиме реального времени. Для этого мы создадим файл +page.svelte и импортируем наши useStoryblokBridge и StoryblokComponent из storyblok/svelte.

 <script>
    import { onMount } from "svelte";
    import { useStoryblokBridge, StoryblokComponent } from "@storyblok/svelte";

    export let data;

    onMount(() => {
        useStoryblokBridge(
            data.story.id,
            (newStory) => (data.story = newStory)
        );
    });
</script>

<div>
    {#if data.story}
        <StoryblokComponent blok={data.story.content} />
    {/if}
</div>
Вход в полноэкранный режим Выйдите из полноэкранного режима

Вот, в принципе, и все 🔥.
Теперь, когда мы соединили наше приложение SvelteKit со Storyblok, давайте добавим некоторые компоненты, чтобы представить нашу сетку блоков по умолчанию, страницу, особенность и тизер:

Page.svelte

<script>
    import { storyblokEditable, StoryblokComponent } from '@storyblok/svelte';

    export let blok;
</script>

{#key blok}
    <div use:storyblokEditable={blok} class="px-6">
        {#each blok.body as blok}
            <StoryblokComponent {blok} />
        {/each}
    </div>
{/key}

Вход в полноэкранный режим Выход из полноэкранного режима

Grid.svelte

<script>
    import { storyblokEditable, StoryblokComponent } from '@storyblok/svelte';

    export let blok;
</script>

<div
    use:storyblokEditable={blok}
    class="container mx-auto grid md:grid-cols-3 gap-16 place-items-center"
>
    {#each blok.columns as blok}
        <div class="flex-auto px-6">
            <StoryblokComponent {blok} />
        </div>
    {/each}
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

Feature.svelte

<script>
    import { storyblokEditable } from '@storyblok/svelte';

    export let blok;
</script>

<div use:storyblokEditable={blok} class="w-full p-12 bg-[#f7f6fd] rounded-[5px] text-center">
    <h1 class="text-2xl text-[#1d243d] font-bold">{blok.name}</h1>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

Teaser.svelte

<script>
    import { storyblokEditable } from '@storyblok/svelte';

    export let blok;
</script>

<div use:storyblokEditable={blok} class="py-32 text-6xl text-[#50b0ae] font-bold text-center">
    {blok.headline}
</div>

Войти в полноэкранный режим Выход из полноэкранного режима

Чтобы иметь возможность видеть наши стили Tailwind, мы добавляем тег script в наш app.html:

<script src="https://cdn.tailwindcss.com"></script>
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь ваши Компоненты должны быть видны во всей красе в вашем визуальном редакторе:

Ура, отличная работа! 🎉

Эта работа еще не завершена, мы адаптируемся к последним изменениям в Sveltekit — но мы будем рады услышать, что вы думаете! Каким был ваш опыт миграции проекта Storyblok & Sveltekit на последнюю версию?

Оцените статью
devanswers.ru
Добавить комментарий