DEV Community: Ondřej Chrastina

[Boost]

Ondřej Chrastina — Thu, 02 Apr 2026 05:40:09 +0000

Ondřej Chrastina for CKEditor

Apr 1

DrupalCon Chicago 2026: How I vibe-coded my first custom Drupal module extending CKEditor

#drupal #ai #webdev #tutorial

Comments

7 min read

DrupalCon Chicago 2026: How I vibe-coded my first custom Drupal module extending CKEditor

Ondřej Chrastina — Wed, 01 Apr 2026 14:58:57 +0000

I was at DrupalCon Chicago 2026, juggling booth duty, an AI Summit talk, and a Lightning Talk about CKEditor's contrib modules. But it's those hallway conversations that stick with you – and this time, the same question kept coming up.

"How do I customize CKEditor just a little bit?"

"Can I add my own button?"

"I want something specific to our workflow, but where do I even start?"

People knew what they wanted. They just didn't know how to get there.

So I grabbed Wojtek Kukowski – the main maintainer of the CKEditor Drupal modules (CKEditor 5 Plugin Pack and CKEditor 5 Premium Features), and asked him:

"What's actually required to make a CKEditor plugin extension for Drupal?"

He briefed me on the essentials: create a Drupal module that wraps a CKEditor plugin. And I thought: "Let me try to translate this into a prompt for Claude Code and include the official docs and see what happens."

The experiment

Setup

Drupal: 11.3.3.
Tool: Claude Code.
Goal: Create a Drupal module with a CKEditor 5 plugin from scratch.

The prompt (almost too simple)

I kept it minimal:

I would like to register a new module for Drupal based on the https://www.drupal.org/docs/develop/creating-modules information. I would like the module to be a CKEditor plugin https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/creating-simple-plugin-timestamp.html

If you are not sure, ask me.

That's it. Two documentation links and an invitation to ask questions.

What happened

Claude explored the codebase – I was prompting in the local project with CKEditor AI running. It found existing CKEditor modules (CKEditor 5 Plugin Pack and CKEditor 5 Premium Features in my case) and learned from their patterns.
Claude asked clarifying questions:
- What should the plugin do? (Insert timestamp.)
- What should the module be called? (ckeditor5_timestamp)
- Toolbar button or context menu? (Toolbar button.)
Claude created all the files – module metadata, CKEditor configuration, JavaScript plugin, PHP class. Everything.
Time: A couple of minutes.

Let me show you what it generated.

The files Claude created

All in ~/web/modules/custom/ckeditor5_timestamp.

Module metadata

The standard .info.yml that tells Drupal about your module:

name: CKEditor 5 Timestamp
type: module
description: "Adds a CKEditor 5 plugin that inserts the current timestamp at the cursor position."
package: CKEditor
core_version_requirement: "^10.1 || ^11"

CKEditor plugin definition

This is where the magic happens – the .ckeditor5.yml file that registers your plugin with Drupal's CKEditor integration:

ckeditor5_timestamp_timestamp:
  ckeditor5:
    plugins:
      - timestamp.Timestamp
  drupal:
    label: Timestamp
    library: ckeditor5_timestamp/timestamp
    toolbar_items:
      timestamp:
        label: Timestamp
    elements: false

JavaScript plugin

The actual CKEditor 5 plugin that creates the toolbar button and handles the timestamp insertion:

import { Plugin } from "ckeditor5/src/core";
import { ButtonView } from "ckeditor5/src/ui";

class Timestamp extends Plugin {
  init() {
    const editor = this.editor;

    editor.ui.componentFactory.add("timestamp", (locale) => {
      const button = new ButtonView(locale);

      button.set({
        label: "Timestamp",
        withText: true,
        tooltip: true,
      });

      button.on("execute", () => {
        const now = new Date();
        editor.model.change((writer) => {
          editor.model.insertContent(writer.createText(now.toString()));
        });
        editor.editing.view.focus();
      });

      return button;
    });
  }

  static get pluginName() {
    return "Timestamp";
  }
}

export default { Timestamp };

PHP plugin class

A minimal PHP class that extends Drupal's CKEditor plugin system:

<?php

declare(strict_types=1);

namespace Drupal\ckeditor5_timestamp\Plugin\CKEditor5Plugin;

use Drupal\ckeditor5\Plugin\CKEditor5PluginDefault;

/**
 * CKEditor 5 Timestamp plugin.
 */
class Timestamp extends CKEditor5PluginDefault {

}

The gotcha (there's always one)

I enabled the module, cleared the cache, added the button to a text format... and hit this:

CKEditorError: plugincollection-plugin-not-found {"plugin":null}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-plugincollection-plugin-not-found

The problem

Drupal's CKEditor 5 uses a DLL (Dynamic Link Library) pattern – webpack-specific builds that register plugins to the global CKEditor5 variable. Raw ES modules don't work – plugins must be bundled and exported to the CKEditor5.[pluginname] namespace.

Drupal core is discussing an Import Maps API that might let browsers resolve ES module imports natively – no bundling to UMD required. If import maps land in Drupal core, you'll be able to write clean import { Plugin } from 'ckeditor5/src/core' statements and have the browser figure out the rest. Browser support for import maps is getting there too: Chrome 133+ and Safari already support multiple import maps, with Firefox ESR 153 expected around July 2026.

The fix

Claude created a properly bundled version in js/build/timestamp.js and updated the library configuration to point to it:

timestamp:
  js:
    js/build/timestamp.js: { minified: true }
  dependencies:
    - core/ckeditor5

Total additional time: About 2 minutes.

Voila! The timestamp button appeared in the toolbar, and clicking it inserted the current date and time.

What you get

Two files that can help you extend CKEditor:

SKILL.md – A comprehensive guide teaching Claude Code how to:
- Explore existing CKEditor implementations.
- Ask the right clarifying questions.
- Create all necessary files.
- Handle the DLL bundling requirement.
- Troubleshoot common issues.
PROMPT.md – A template you can customize:
- Replace the plugin requirements with yours.
- Specify your module name.
- Define the UI type you need.

How to use it

Install Claude Code: See the official documentation.
Put the files in your Drupal project.
Adjust PROMPT.md with your requirements:
- Plugin function: What should it do?
- Module name: your_module_name.
- UI type: Toolbar button, context menu, etc.
Ask Claude to run it:

Please create a CKEditor 5 plugin for Drupal following the SKILL.md approach using the requirements in PROMPT.md
Enable and configure:

   drush en your_module_name
   drush cr

Then configure the text format in Drupal admin to add your new button.

Try it yourself

My plugin was straightforward – a simple timestamp inserter. I'm curious how it works for you with more complex requirements.

Did it work on the first try?
What gotchas did you encounter?
How complex was your plugin?

You can check out the files like PROMPT.md and SKILL.md as well as the module files in the GitHub repository.

Beyond the plugin

How the SKILL.md and PROMPT.md came to be

The same "reverse engineering" approach I used for the webpack configuration also created the SKILL.md and PROMPT.md files. After Claude successfully built the plugin, I backtracked through its actions – what did it explore? What questions did it ask? What files did it create? – and distilled that into reusable instructions.

I do this whenever I need repeatable context. Instead of relying solely on a project-wide CLAUDE.md file, I create focused instruction files for specific tasks. The SKILL.md teaches Claude how to build CKEditor plugins; the PROMPT.md provides the what – the specific requirements for each new plugin.

CI for the build

Similarly, I asked Claude to generate a GitHub Actions workflow that builds the JavaScript on every push to main. If the bundled output changes, the action commits it automatically. This keeps the repository's js/build/timestamp.js in sync without manual intervention – useful for contributors who might not have Node.js set up locally.

Making it community-friendly

To make this repository truly accessible as a starting point, more work would be needed: proper documentation, contribution guidelines, issue templates, and licensing clarity. I maintain a template for this at os-guidelines – a checklist covering everything from repository naming to CI automation across different tech stacks. If you're publishing your own CKEditor plugin module, consider using it as a starting point.

Want to learn more?

Create your own plugin: Check out the CKEditor 5 plugin development guide for the full tutorial on building custom plugins from scratch. Once you're comfortable with the basics, explore more capabilities – toolbar customization, editor behavior hooks, and custom commands.
Try CKEditor AI: The AI capabilities have been in CKEditor since last year and are gaining adoption across the ecosystem. Drupal support landed just a week before DrupalCon – perfect timing! You can try the demo right in your browser, or grab a free 14-day trial to test it in your own Drupal installation.
Grab the code: All the files from this article – SKILL.md, PROMPT.md, the complete module, webpack config, and GitHub Actions workflow – are available in the GitHub repository.

Enjoy! And if you have any question - the comments section is yours, or find me up on Drupal Slack! 🥑

AI Conference 2025 - CKEditor in da house

Ondřej Chrastina — Tue, 07 Oct 2025 12:55:04 +0000

In the middle of September 2025, the CKEditor team attended The AI Conference in San Francisco. The team engaged with the vibrant AI community, connected with other leaders for potential integrations, and revealed news about the new CKEditor AI suite of capabilities 👻.

// Detect dark theme var iframe = document.getElementById('tweet-1968337657546813612-747'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1968337657546813612&theme=dark" }

I wanted to summarize the conference from the eyes of a developer advocate who has worked in the field for decades and has put particular focus on AI in recent months. Here you go...

Conference rundown

It was a busy two days filled with basically non-stop talking to people about CKEditor and CKEditor AI (😅 ohh I spoiled it already). The overall vibe was more on the business side: lots of CEOs, founders of AI startups, and business professionals. Developers? Probably less than 10% of attendees. Not the standard crowd for the developer advocate part of me, but very exciting for the AI enthusiast part.

The venue itself was unique. It was an old shed at Pier 39 (Google says Pier 48 - Lot #39). My guess is it was originally a boat storage or maintenance shed. We arrived to set up our booth the evening before the event: swag arrived on time, the booth looked good, and the stage and the venue were still getting ready. Still partly looking like a shed.

On the first day of the conference, we encountered a lot of excitement, but also a pinch of hesitance with AI advancing so quickly. Inside, the Pier was nice and shiny: almost unrecognizable from the evening before. The main corridor in the center included two stages on the sides, with the back lined with booths, and finishing with the main stage.

The morning flew by so quickly that we barely had time to grab breakfast or coffee. Lunch wasn’t much different. We had to take turns just to grab a bite. And right after, I went to deliver my talk (more about that in the next section).

Day two was quieter, but no less engaging. The slower pace meant more one-on-one conversations and deeper dives into what CKEditor AI can really do.

// Detect dark theme var iframe = document.getElementById('tweet-1968721785777451082-439'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1968721785777451082&theme=dark" }

The talk — why we went there

I gave a lightning talk during lunch and expected maybe 30 people casually eating. Instead, I ended up speaking to ~300 (my best guess from the photos). That was a surprise, but also a great opportunity.

The talk focused on the problem of “Bring Your Own AI” chaos (78% of knowledge workers bring their own AI tools) and how CKEditor AI solves it by offering a frictionless, unified AI writing stack inside any application.

Outline of the talk

The Bring Your Own AI (BYOAI) problem: copy/paste friction, compliance risks, and content inconsistency
What is CKEditor?
- Editor (customizable and framework-agnostic)
- Cloud services (including telemetry, logs, compliance, and on-prem or SaaS deployment)
- 🎉 CKEditor AI Early access announcement
The three AI surfaces:
- AI Chat: An AI writing assistant directly next to your editor
- Quick AI Actions: Sentiment analysis, proofreading, translation, repetitive tasks - anything you use repeatably
- AI Content Review: Handles complex use cases, offering help for suggestion-heavy workflows and advanced AI tasks
Real-world use case examples: Audits in regulated industries, marketing translations with disclaimers, and support ticket reply generation

Below is the exclusive preview of the talk (after a bit of post-processing):

🖼️ Slide deck 🔗

If you want to learn more, check out the CKEditor AI Landing page.

CKEditor 5 Pitfall: Don't Forget the Paragraph Plugin

Ondřej Chrastina — Mon, 23 Jun 2025 10:51:07 +0000

When you're adding CKEditor 5 to your platform, chances are you're starting simple—maybe testing in a sandbox project or integrating through the excellent CKEditor Builder, or diving into the CKEditor Framework Crash Course.

In my case, I tried both approaches:

Both are fantastic resources. However, there's one small but crucial detail that’s easy to overlook:
💡 You need two plugins to make even a minimal CKEditor 5 setup work:

Essentials

🚨 Paragraph (yes, it's not included in Essentials!)

ClassicEditor.create(element, {
    licenseKey: 'GPL',
    plugins: [
        Essentials, // * ✅ Essential
        Paragraph // 🚨 Paragraph 🚨 
    ]
});

The Pitfall: Only Using Essentials

It might seem like the following setup is enough:

// Import the editor.
import {
    ClassicEditor,
    Essentials,
} from 'ckeditor5';

// Import the styles.
import 'ckeditor5/ckeditor5.css';

// Get the HTML element with the ID of 'app'.
const element = document.querySelector('#app');

// Instantiate the editor using the `create` method.
const editor = await ClassicEditor.create(element, {
    licenseKey: 'GPL',
    plugins: [
        Essentials
    ]
});

The editor initializes, but nothing works—no content, no cursor, and no error messages either! 😱

Yes, the configuration on the image is slightly richer, but still behaves the same.

Take a look at this case:

“Are you missing something?”
Yes. Yes, you are!

YES, it is in the code docs

(alias) class Essentials
import Essentials
A plugin including all essential editing features. It represents a set of features that enables similar functionalities to a element.
It includes:

:ui/editorui/accessibilityhelp/accessibilityhelp~AccessibilityHelp,

:clipboard/clipboard~Clipboard,

:enter/enter~Enter,

:select-all/selectall~SelectAll,

:enter/shiftenter~ShiftEnter,

:typing/typing~Typing,

:undo/undo~Undo.

This plugin set does not define any block-level containers (such as :paragraph/paragraph~Paragraph). If your editor is supposed to handle block content, make sure to include it.

The Fix: Add the Paragraph Plugin 🎉

// Import the editor.
import {
    ClassicEditor,
    Essentials,
    Paragraph
} from 'ckeditor5';

// Import the styles.
import 'ckeditor5/ckeditor5.css';

// Get the HTML element with the ID of 'app'.
const element = document.querySelector('#app');

// Instantiate the editor using the `create` method.
const editor = await ClassicEditor.create(element, {
    licenseKey: 'GPL',
    plugins: [
        Essentials,
        Paragraph
    ]
});

And voilà:
“Much better!”

🧠 Key Takeaway

Essentials plugin ≠ has everything you need for editing.
For a working CKEditor instance, especially one with block content, add the Paragraph plugin.
Always double-check the docs—even for plugins that sound... well, essential.

Keep this in mind as you build your rich text editing experiences! 💡

How I Turned Kubernetes Into a Fun, Kid-Friendly YouTube Short

Ondřej Chrastina — Mon, 17 Feb 2025 17:37:27 +0000

Recently, I set out on a mission to simplify one of tech’s more complex concepts—Kubernetes—so that even a five-year-old could grasp it. Imagine having a huge box of LEGO bricks and a magical helper that organizes them into perfect structures every time. That’s Kubernetes in a nutshell!

Step 1: Crafting the Script

I started by using ChatGPT to generate a script along with detailed scene descriptions. In just minutes, I had a solid foundation that broke down Kubernetes into easy-to-understand, playful ideas. This step was all about making sure the content was accessible and engaging.

Step 2: Creating the Visuals

After a few rounds of tweaks, I managed to produce some really appealing images for each scene—all while staying within the free image usage limits. These visuals helped turn abstract concepts into something tangible and fun, much like turning LEGO bricks into a masterpiece.

Step 3: Bringing It to Life with Audio

Next up, I generated the audio using ElevenLabs. I opted for a reel/short video format since it allowed me to find free resources more easily compared to creating a full comic (which was my initial idea). The result was clear, lively narration that tied everything together.

Step 4: Assembling the Video

Finally, I combined the script, images, and audio using Canva. The final video was a seamless blend of creativity and technology, culminating in an engaging YouTube upload that makes learning about Kubernetes a delightful experience.

Wrap-up

This project is a testament to how modern creative tools can transform complex technical subjects into something both fun and approachable. Whether you're a tech enthusiast or just looking for a simpler way to learn, I hope this video inspires you to see technology from a new, playful perspective. Enjoy the video, and happy learning!

🎉 And this is the result 🎉

https://youtube.com/shorts/N85_wB-kkCs?si=BOi0qkA40momwTFg

Build and Deploy a Next.js Blog with Kentico Kontent and Vercel

Ondřej Chrastina — Fri, 11 Jun 2021 09:23:51 +0000

Kentico Kontent delivers all the benefits of a headless CMS while empowering your marketing team to manage the experience across your digital channels.

This guide showcases how to use Kontent with Next.js Static Generation to generate static pages from your Kontent data, delivering a lightning-fast experience for your users.

Following text is an extended explanation of the Statically generated blog using Next.js and Kontent repository.

Step 1: Creating a Kontent + Next.js Project

You can view a working demo, the app you will create is shown in the screenshot below:

The Next.js + Kontent demo app.

Register Kontent project

To get started, create an account on Kontent.ai. After signing up, create an empty project.

Create the content models and fill them with data

The content model defines the data structures of your application/websites. The structures are flexible and you can tailor them to your needs.

For this example, you need to create a content model that defines an author and a post content type.

You can create the content model and fill it with data manually to familiarize yourself with the Kontent user interface.

To import the content models with their data automatically, follow the next steps:

Enter Kontent application
Go to "Project Settings", select API keys
Activate Management API
Copy Project ID and Management API key
Install Kontent Backup Manager and import data to newly created project from kontent-backup.zip file (place appropriate values for apiKey and projectId arguments):

npm i -g @kentico/kontent-backup-manager
kbm --action=restore --apiKey=<Management API key> --projectId=<Project ID> --zipFilename=kontent-backup

💡 Alternatively, you can use the Template Manager UI for importing the content.

Go to your Kontent project and publish all the imported items. > You could deactivate the Management API, it is not necessary anymore.

Application initialization

Initialize the application locally with following command:

npm init next-app --example cms-kontent nextjs-kontent-app && cd nextjs-kontent-app

Initializing a Next.js + Kontent app and entering the project directory.

Step 2: Set up Environment Variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

Then set each variable on .env.local using the keys Project settings > API keys:

KONTENT_PROJECT_ID - Should be the Project ID in Project settings > API keys.
KONTENT_PREVIEW_API_KEY - One of the Preview API keys in Project settings > API keys.
KONTENT_PREVIEW_SECRET - Can be any random string (but avoid spaces), like MY_SECRET - this is used for Preview Mode.

After installing the required dependencies, you are now able to run and develop your Next.js + Kontent app locally.

npm install
npm run dev

yarn
yarn dev

Step 3: Understanding the Code

To understand how the app works, there are three main areas to explore:

Page Setup
Retrieving Content
Image Optimization

Page Setup

Each page displays a single blog post with the dynamic Object slug and two latest blog posts teasers from Kontent:

import { useRouter } from 'next/router'
import ErrorPage from 'next/error'
import Container from '../../components/container'
import PostBody from '../../components/post-body'
import MoreStories from '../../components/more-stories'
import Header from '../../components/header'
import PostHeader from '../../components/post-header'
import SectionSeparator from '../../components/section-separator'
import Layout from '../../components/layout'
import {
  getAllPostSlugs,
  getPostBySlug,
  getMorePostsForSlug,
} from '../../lib/api'
import PostTitle from '../../components/post-title'
import Head from 'next/head'
import { CMS_NAME } from '../../lib/constants'

export default function Post({ post, morePosts = [], preview }) {
  const router = useRouter()
  if (!router.isFallback && !post?.slug) {
    return <ErrorPage statusCode={404} />
  }
  return (
    <Layout preview={preview}>
      <Container>
        <Header />
        {router.isFallback ? (
          <PostTitle>Loading…</PostTitle>
        ) : (
          <>
            <article className="mb-32">
              <Head>
                <title>
                  {post.title} | Next.js Blog Example with {CMS_NAME}
                </title>
                <meta property="og:image" content={post.coverImage.url} />
              </Head>
              <PostHeader
                title={post.title}
                coverImage={post.coverImage}
                date={post.date}
                author={post.author}
              />
              <PostBody content={post.content} />
            </article>
            <SectionSeparator />
            {morePosts.length > 0 && <MoreStories posts={morePosts} />}
          </>
        )}
      </Container>
    </Layout>
  )
}

export async function getStaticProps({ params, preview = null }) {
  return await Promise.all([
    getPostBySlug(params.slug, preview),
    getMorePostsForSlug(params.slug, preview),
  ]).then((values) => ({
    props: {
      post: values[0],
      morePosts: values[1],
      preview,
    },
  }))
}

export async function getStaticPaths() {
  const slugs = await getAllPostSlugs(['slug'])
  return {
    paths: slugs.map(
      (slug) =>
        ({
          params: {
            slug,
          },
        } || [])
    ),
    fallback: false,
  }
}

The pages/posts/[slug].js file for your Next.js +
Kontent app.

Retrieving Content

Kontent data is retrieved in the lib/api.js file making requests to the Kontent Delivery API using the Kontent Delivery SDK.

import { DeliveryClient } from '@kentico/kontent-delivery'
import { name, version } from '../package.json'

const sourceTrackingHeaderName = 'X-KC-SOURCE'

const client = new DeliveryClient({
  projectId: process.env.KONTENT_PROJECT_ID,
  previewApiKey: process.env.KONTENT_PREVIEW_API_KEY,
  globalHeaders: (_queryConfig) => [
    {
      header: sourceTrackingHeaderName,
      value: `@vercel/next.js/example/${name};${version}`,
    },
  ],
})

function parseAuthor(author) {
  return {
    name: author.name.value,
    picture: author.picture.value[0].url,
  }
}

function parsePost(post) {
  return {
    title: "post.title.value,"
    slug: post.slug.value,
    date: post.date.value.toISOString(),
    content: post.content.value,
    excerpt: post.excerpt.value,
    coverImage: post.cover_image.value[0].url,
    author: parseAuthor(post.author.value[0]),
  }
}

export async function getAllPostSlugs() {
  const postsResponse = await client
    .items()
    .type('post')
    .elementsParameter(['slug'])
    .toPromise()

  return postsResponse.items.map((post) => post.slug.value)
}

export async function getMorePostsForSlug(slug, preview) {
  return client
    .items()
    .queryConfig({
      usePreviewMode: !!preview,
    })
    .type('post')
    .orderByDescending('elements.date')
    .withParameter('elements.slug[neq]', slug)
    .limitParameter(2)
    .toPromise()
    .then((res) => {
      return res.items.map((post) => parsePost(post))
    })
}

export async function getPostBySlug(slug, preview) {
  const post = await client
    .items()
    .queryConfig({
      usePreviewMode: !!preview,
    })
    .type('post')
    .equalsFilter('elements.slug', slug)
    .toPromise()
    .then((result) => result.getFirstItem())
    .then((post) => parsePost(post))
  return post
}

export async function getAllPosts(preview) {
  return await client
    .items()
    .queryConfig({
      usePreviewMode: !!preview,
    })
    .type('post')
    .orderByDescending('elements.date')
    .toPromise()
    .then((postsResponse) => postsResponse.items.map((post) => parsePost(post)))
}

The lib/api.js file for your Next.js + Kontent app.

Image Transformation possibilities

If you want to optimize the speed of your site, it is possible to use Kontent Image Transformation API to transform retrieved images and reduce the download time for images. This could be applied to the blog post's cover image or the author's profile picture. The easiest way is to use the Image transformation support in Kontent Delivery SDK.

import cn from 'classnames'
import Link from 'next/link'
import {
  ImageUrlBuilder,
  ImageCompressionEnum,
  ImageFormatEnum,
} from '@kentico/kontent-delivery'

export default function CoverImage({ title, src, slug }) {
  const transformedSrc = new ImageUrlBuilder(src)
    .withCompression(ImageCompressionEnum.Lossless)
    .withAutomaticFormat(ImageFormatEnum.Webp)
    .withQuality(80)
    .getUrl()

  const image = (
    <img
      src={transformedSrc}
      alt={`Cover Image for ${title}`}
      className={cn('shadow-small', {
        'hover:shadow-medium transition-shadow duration-200': slug,
      })}
    />
  )
  return (
    <div className="-mx-5 sm:mx-0">
      {slug ? (
        <Link as={`/posts/${slug}`} href="/posts/[slug]">
          <a aria-label={title}>{image}</a>
        </Link>
      ) : (
        image
      )}
    </div>
  )
}

Possible modification of components/cover-image.js
component using Image Transformation API to get images in
modern WebP format.

Step 4: Using Preview Mode

To add the ability to preview content from your Kontent project using Preview Delivery API, open your Kontent project, go to Project Settings > Preview URLs, and set a new preview URL for the Post content type to:

http://localhost:3000/api/preview?secret=<KONTENT_PREVIEW_SECRET>&slug={URLslug}

Replace <KONTENT_PREVIEW_SECRET> with its respective value in .env.local:

Once saved, go to one of the posts you've created and:

Create a new version of the post
Update the title. For example, you can add [Draft] in front of the title. > Mind the title also regenerates the URL slug, if you want to change any other field that does not influence the URL slug, feel free to do so.
Do not publish it. By doing this, the post will be in the draft workflow step.
On the menu, you will see the Preview button. Click on it!

You will now be able to see the updated title. To exit preview mode, you can click on Click here to exit preview mode at the top of the page.

Step 5: Deploying Your App with Vercel

To deploy your Next.js + Kontent site with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

During the import process, you will need to add the following environment variables:

KONTENT_PROJECT_ID
KONTENT_PREVIEW_API_KEY
KONTENT_PREVIEW_SECRET

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your site live, such as the following: https://next-blog-kontent.vercel.app/

Set up a Next.js + Kontent site with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.

If you want to explore a more complex example for Kentico Kontent and Next.js, check out this Corporate Starter.

Kentico / kontent-starter-corporate-next-js

Next.js corporate starter site using Kentico Kontent as a data source.

Get Kontent Project ID from the Management API key

Ondřej Chrastina — Mon, 22 Mar 2021 14:00:03 +0000

It is possible to parse out Kontent Project ID out of the Management API Key. That means no more necessity to ask for two keys for your Kontent tools.

Do you develop any Kontent tool using Management API and still ask for both - Project ID and Management API key? Following lines will help you to improve your UX as well as cleanout your code.

The management API key is just a JWT token containing the payload (in between header with signature). So you could decode it i.e. by using JWT.io, And as a payload, you could see this:

{
    "jti": "b6a9ee86bfdc41c89f20048c3baaba04",
    "iat": "1612535158",
    "exp": "1958135158",
    "project_id": "06c2b8951700013e5f3160283aff1100",
    "ver": "2.1.0",
    "uid": "usr_0vMrpCH2TkOK5oK3y3bKNS",
    "aud": "manage.kenticocloud.com"
}

The project_id could be used to identify the project with one modification. It is necessary to add dashes on appropriate places to respect the GUID format.

To do all of that, the code would end up looking like that (or any other language alternative) - or you just use a library like jwt-decode. But it is always good to know what they do.

const managementApiKey = "ew0KICAiYWxnIjogIkhTMjU2IiwNCiAgInR5cCI6ICJKV1QiDQp9.ew0KICAianRpIjogImI2YTllZTg2YmZkYzQxYzg5ZjIwMDQ4YzNiYWFiYTA0IiwNCiAgImlhdCI6ICIxNjEyNTM1MTU4IiwNCiAgImV4cCI6ICIxOTU4MTM1MTU4IiwNCiAgInByb2plY3RfaWQiOiAiMDZjMmI4OTUxNzAwMDEzZTVmMzE2MDI4M2FmZjExMDAiLA0KICAidmVyIjogIjIuMS4wIiwNCiAgInVpZCI6ICJ1c3JfMHZNcnBDSDJUa09LNW9LM3kzYktOUyIsDQogICJhdWQiOiAibWFuYWdlLmtlbnRpY29jbG91ZC5jb20iDQp9.aEqGajw7e9m13lnID0z9PBCL0MytqYlvoYg_rwPfEJo";

const payloadBase64 = managementApiKey.split('.')[1];
const payloadBase64Cleared = payloadBase64.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(
    atob(payloadBase64Cleared)
    .split('')
    .map((c) => 
        ('%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
    )
    .join('')
);

const payloadObject = JSON.parse(jsonPayload);

const projectIdWithoutDashes = payloadObject.project_id;

const projectId = 
    `${projectIdWithoutDashes.substr(0, 8)}-\
${projectIdWithoutDashes.substr(8, 4)}-\
${projectIdWithoutDashes.substr(12,4 )}-\
${projectIdWithoutDashes.substr(16, 4)}-\
${projectIdWithoutDashes.substr(20)}`

console.log(projectId);

If you want to play with it - check out this Codepen.

...and of course, I invalidated the showcased API key 🤞

Jamstack on .NET: From zero to hero with Statiq and Kontent

Ondřej Chrastina — Mon, 30 Nov 2020 11:21:13 +0000

Are you interested in Jamstack, but sad you can't practice it with .NET? The times have changed, and .NET developers are now able to build Jamstack apps using the new static site generator Statiq. This article walks you through the setup of a ready-to-use boilerplate! If you are new to Jamstack on .NET, follow the steps below to wrap your head around the basics. If you know the drill, skip that part and use the boilerplate.

kontent-ai / boilerplate-statiq-net

Boilerplate utilizing Statiq and Kontent.ai to provide a starting point in the Jamstack world for .NET developers.

Statiq boilerplate for Kontent.ai

Boilerplate utilizing Statiq and Kontent.ai to provide a starting point in the Jamstack world for .NET developers.

Get started

Requirements

.NET 6

Clone the codebase

Click the "Use this template" button to create your own repository from this template.

Running locally

dotnet run -- preview

🎊🎉 Visit http://localhost:5080 and start exploring the code base!

By default, the content is loaded from a shared Kontent.ai project. If you want to use your own clone of the project so that you can customize it and experiment with Kontent, continue to the next section.

Create a content source

Application itself is configured to use shared alvawys avalable Kontent-ai project.

If you want to generate the clone of the project in order to be able to edit the content, use Sample site generator.

Use "CREATE A NEW SAMPLE PROJECT" for generating the project.
Access the project listing on…

View on GitHub

Technologies

Let's briefly introduce Jamstack. It is a web architecture based on the pre-rendered assets (HTML files, images, CSS, etc.) that are generated at the build time based on templates and data.

Now, let's jump right to the available technologies. First is Statiq, a generation platform providing the .NET based Statiq.Framework for creating a static site generator infrastructure and a set of modules called Statiq.Web that will make the initial configuration of the framework easier.

The next pieces of the puzzle are the templates and data storage. I have chosen Razor as a template engine since it is the most known one in the .NET world. Data will be provided by a headless CMS—Kentico Kontent. It provides more flexibility and collaboration features in comparison with markdown files, and it has a Statiq module out of the box.

The last piece is to get all the assets and deploy them to Netlify.

Let's start

The whole boilerplate creation is split into three parts—an application skeleton, a content source, and a connector that allows Statiq to generate pages.

Before you do anything else, download and install a .NET 5 if you haven't already.

Prepare the application

First, use dotnet CLI to create a new console application.

dotnet new console --name FromZeroToHero

Then, navigate to the application folder and install a Statiq.Web Nuget package (which will also download Statiq.Framework as a dependency).

cd FromZeroToHero
dotnet add package Statiq.Web -v 1.0.0-*

And then configure Statiq.Framework in Program.cs to use the default configuration of the Statiq.Web modules.

using System.Threading.Tasks;
  using Statiq.App;
  using Statiq.Web;

  namespace FromZeroToHero
  {
    public class Program
    {
      public static async Task<int> Main(string[] args) =>
        await Bootstrapper
          .Factory
          .CreateWeb(args)
          .RunAsync();
    }
  }

💡 At this point, if you run dotnet run -- preview , you can browse your empty site at http://localhost:5080 💡

Prepare content

As the title mentioned, the boilerplate is about going "from zero to hero". This means creating a "Hero" content model that consists of a headline, summary, and CTA. Plus creating one content item based on that model. We'll do all that in a headless CMS Kentico Kontent as it already features Statiq integration.

First, create an account at Kontent.ai.
- The link above will provide you with a 90-day trial. Once you finish the trial, or even during the trial period, you can switch to the Developer plan , which is free of charge and lets you run small projects with a $0 budget.
After signing up, create an empty project.
From your Kontent project, go to Content models and add a new Content type called "Hero" with these text fields:
- Headline
- Summary
- CTA label
- CTA URL

Go to Content & Assets section in your project and click Create new on the Content_tab and select _Hero content type and fill the elements
- Content Item Name: Hero
- Headline: From zero to hero with Statiq and Kontent
- _Summary:_How to start with the .NET Jamstack app utilizing Statiq as a Static generation platform and Kentico Kontent as a data source.
- CTA label: Explore
- CTA URL: https://github.com/Kentico/kontent-boilerplate-statiq-net
Publish the changes

Connect content and the site

Now let's load the content from the headless CMS using Kontent.Statiq module and render it with the Razor engine.

First, install Kontent.Statiq module:

dotnet add package Kontent.Statiq --version 1.0.0-*

Copy the Project ID from the Kontent application.

Enter Kontent application
Go to "Project Settings" and select "API keys"
Copy "Project ID"

Then install the Kontent Model Generator for .NET and generate our Hero model.

dotnet new tool-manifest
  dotnet tool install Kentico.Kontent.ModelGenerator
  dotnet tool run KontentModelGenerator --projectid "<projectid>" --namespace "FromZeroToHero.Models" --outputdir "Models" --generatepartials true --structuredmodel true

For more specific information about the model generator configuration, follow the generator's Readme .

After generation, you will end up with three files Models/Hero.Generated.cs, which is a POCO model class, then Models/Hero.cs that allows extending the model class, and the last one is Models/CustomTypeProviders.cs that will be used to provide model mapping information.

The next step is to initialize the Kontent Delivery SDK client for dependency injection. Extend Program.cs file with ConfigureServices.

using System.Threading.Tasks;
  using FromZeroToHero.Models;
  using Kentico.Kontent.Delivery.Abstractions;
  using Kentico.Kontent.Delivery.Extensions;
  using Microsoft.Extensions.DependencyInjection;
  using Statiq.App;
  using Statiq.Common;
  using Statiq.Web;

  namespace FromZeroToHero
  {
      public class Program
      {
          public static async Task<int> Main(string[] args) =>
            await Bootstrapper
              .Factory
              .CreateWeb(args)
              .ConfigureServices((services, config) =>
              {
                  // Add the type provider
                  services.AddSingleton<ITypeProvider, CustomTypeProvider>();
                  // Configure Delivery SDK
                  services.AddDeliveryClient(opts =>
                      opts.WithProjectId("<projectid>")
                          .UseProductionApi()
                          .Build());
              })
              .RunAsync();
      }
  }

All of your assets and templates should be placed in the /input folder. Create a view file _Hero.cshtml in the /input folder then and use the generated FromZeroToHero.Models.Hero class as a model for the template.

@model FromZeroToHero.Models.Hero;

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@Model.Headline</title>
  </head>
  <body>
    <h1>@Model.Headline</h1>
    <div>
      @Model.Summary
    </div>
    <div>
      <a href="@Model.CtaUrl">@Model.CtaLabel</a>
    </div>
  </body>
  </html>

And finally, to connect the configured client to load the data to the model and pass them to the Razor engine, we will define a new Statiq Pipeline. The pipeline is like a Controller from MVC. Create a new file in Pipelines/HeroPipeline.cs. By inheriting from Statiq.Core.Pipeline, Statiq automatically includes your pipeline in the generation process.

using FromZeroToHero.Models;
  using Kentico.Kontent.Delivery.Abstractions;
  using Kentico.Kontent.Delivery.Urls.QueryParameters;
  using Kentico.Kontent.Delivery.Urls.QueryParameters.Filters;
  using Kontent.Statiq;
  using Statiq.Common;
  using Statiq.Core;
  using Statiq.Razor;

  namespace FromZeroToHero
  {
      // <see href="https://statiq.dev/framework/pipelines">Pipelines documentation</see>
      public class HeroPipeline : Pipeline
      {
          public HeroPipeline(IDeliveryClient client)
          {
              ProcessModules = new ModuleList
              {
                  // Load the "Hero" item and transfer it into IDocument.
                  // <see href="https://github.com/alanta/Kontent.Statiq">Kontent.Statiq</see>
                  new Kontent<Hero>(client)
                      .WithQuery(
                          new EqualsFilter("system.codename", "hero"),
                          new LimitParameter(1)
                      ),
                  // Load Razor template to IDocument content.
                  // <see href="https://github.com/statiqdev/Statiq.Framework/blob/main/src/core/Statiq.Core/Modules/Content/MergeContent.cs">MergeContent</see>.
                  // <see href="https://statiq.dev/web/content-and-data/content/">Content propery of IDocument</see>
                  new MergeContent(
                      new ReadFiles(patterns: "_Hero.cshtml")
                  ),
                  // Render HTML file from Razor template and document typed as Hero model.
                  // <see href="https://github.com/statiqdev/Statiq.Framework/blob/main/src/extensions/Statiq.Razor/RenderRazor.cs">RenderRazor</see>
                  new RenderRazor()
                      .WithModel(KontentConfig.As<Hero>()),
                  // Set file system destionation for the document.
                  // <see href="https://github.com/statiqdev/Statiq.Framework/blob/main/src/core/Statiq.Core/Modules/IO/SetDestination.cs">SetDestination</see>
                  new SetDestination(new NormalizedPath("index.html")),
                  // Flush the the output.
                  // <see href="https://github.com/statiqdev/Statiq.Framework/blob/main/src/core/Statiq.Core/Modules/IO/WriteFiles.cs">WriteFiles</see>.
                  new WriteFiles()
              };
          }
      }
  }

🚀 Done! Now run dotnet build -- preview and see your first hero page at http://localhost:5080 🚀

Raw boilerplate is on GitHub under raw-boilerplate tag

Fine-tuning

The following sections describe how to extend a boilerplate with Razor layout standards, basic styling, and configuration settings. These changes are already included in the boilerplate.

Razor conventions

Razor works the standard way in the Statiq environment. By creating _Layout.cshtml in the input folder and specifying the default layout in _ViewStart.cshtml like below, you prepare the standard setup for adding the pages with the same layout (as was done in this commit with _Hero.cshtml template).

@{
    Layout = "_Layout";
}

Sass

Since the Sass (as well as Less) is already pre-configured in Statiq.Web default modules, it is possible to create a sass file in the input folder and then reference it by the same name with .css extension. Create main.scss file and reference its transpiled version in the Razor view using @IExecutionContext.Current.GetLink("/main.css") and add some basic styling (see the implementation).

Extract Project ID

It is a good idea and a .NET best practice to extract configuration to settings files. To extract the Kontent delivery client configuration to this file, create an appsettings.json file with the DeliveryOptions section containing only one property ProjectId. Then in Project.cs configure the delivery client to dependency injection (see the implementation):

services.AddDeliveryClient((IConfiguration)config)

That action also opens the door for you to use different sets of configurations depending on the environment i.e. use configuration with a preview API key for your local development environment.

Conclusion

In this article, I showed you how to build a simple Jamstack site using .NET and static site generator Statiq. We created a new content type with some content in a headless CMS, connected the CMS to our application, and converted the data into generated static pages. Find the complete implementation here:

kontent-ai / boilerplate-statiq-net

Boilerplate utilizing Statiq and Kontent.ai to provide a starting point in the Jamstack world for .NET developers.

Statiq boilerplate for Kontent.ai

Boilerplate utilizing Statiq and Kontent.ai to provide a starting point in the Jamstack world for .NET developers.

Get started

Requirements

.NET 6

Clone the codebase

Click the "Use this template" button to create your own repository from this template.

Running locally

dotnet run -- preview

🎊🎉 Visit http://localhost:5080 and start exploring the code base!

By default, the content is loaded from a shared Kontent.ai project. If you want to use your own clone of the project so that you can customize it and experiment with Kontent, continue to the next section.

Create a content source

Application itself is configured to use shared alvawys avalable Kontent-ai project.

If you want to generate the clone of the project in order to be able to edit the content, use Sample site generator.

Use "CREATE A NEW SAMPLE PROJECT" for generating the project.
Access the project listing on…

View on GitHub

If you want to see a more complex example, check out the Kentico Kontent Statiq - Lumen Starter.