The Complete Guide to Build a Full-Blown Multilanguage Website with Gatsby.js

This is a writing sample from Scripted writer Lisi Linhart

To enable the connection to Storyblok, let's take a look at the src/utils/storyblok file. It takes a story and the location as a parameter. On Line 18, we're checking if the story.content is a string, and parsing it into a JSON object. This is necessary because of the gatsby-source-storyblok plugin returning the story.content object as a string. On Line 82 it loads the Storyblok Bridge, which is necessary to make the Visual Editor interactive. Once the Bridge script is loaded, it will add the events to listen for in Storyblok with the initEventListeners function. The storyblokInstance function can listen for different events: input when we change a field, published when we click publish, change when we click save or enterEditmode when the editor is opened. The input event on Line 36 uses the hook callback setStory to live-update the content inside of Storyblok. The enterEditmode event uses a Storyblok client to request the current draft version content, in case the project is set up with a published version of the content. This is useful to show the draft content inside of Storyblok, but the published content outside of Storyblok, when the project is deployed.

Written by:

Lisi Linhart

Hire Lisi L

Lisi is a frontend engineer with an M.Sc. degree in Computer Science. Additional to her 12-year background in media technology and design, she has a passion for creating better experiences for anyone using the web. In the past, she's taught university-level web development and media design classes, where she simplified the technical nature of this line of work for her students. Since then, she has enjoyed teaching developers and helping make the web platform better by creating top-notch, easily understandable, technical freelance content.

Customer Ratings:

1 reviews

VIEW COMPLETE PROFILE

Hire Lisi L

Power your marketing with great writing.

Get Started