storyblok / gatsbyjs-multilanguage-website Goto Github PK

Hi, I have been playing around with your repo. It's working smoothly. All editable blocks are working as expect except for the nav_items. Nav Items do not get refreshed unless and until the server is restarted. Can you please let me know what can be the issue here? Thanks.

Hi, I have played around with this tutorial and starter, and I can think of a couple of use cases that could be covered.

Although the website is multilingual, the language switcher doesn't work as it should work.
When a language is selected it should redirect to that same page, but translated. Currently, it redirects to the translated homepage, which is less than ideal.

I was able to implement a more complete multilingual system a while ago, but I'm starting from scratch now.

Basically having a single file tree (instead of a folder per language), coupled with translated slugs. Then I expose the translated URLs for each page and use that in the language switcher.

I remember having to do a lot of workarounds back in the days because it wasn't possible to query for those translated slugs in a clean way.

Enhancement

The basic logic of this tutorial has been the same for a couple of years.

Would it be possible to create a new (more advanced) tutorial, that would cover more use cases?

Featured Articles not working giving node undefined error. Any idea how can I fix that?

import React from 'react'
import { useStaticQuery, graphql } from "gatsby"
import Link from 'gatsby-link'

export default function ArticleTeaser({ blok }){
  const { articles, authors } = useStaticQuery(graphql`
  query Articles {
    articles: allStoryblokEntry(filter: {field_component: {eq: "blogpost"}}) {
      edges {
        node {
          name
          full_slug
          content
        }
      }
    }
    authors: allStoryblokEntry(filter: {field_component: {eq: "author"}}) {
      edges {
        node {
          name
          uuid
          content
        }
      }
    }
  } 
  `)
  let article = articles.edges.filter(({ node }) => node.full_slug === blok.article.cached_url)
  let content = article.length ? JSON.parse(article[0].node.content) : {};
  let  { author } = content
  let thisAuthor = authors.edges.filter(({ node }) => node.uuid === author)
  let authorContent = thisAuthor.length ? JSON.parse(thisAuthor[0].node.content) : {};

  return (
      <Link to={`/${article[0].node.full_slug}`} className="py-16 block transition hover:opacity-50">
        <img src={content.image} className="pb-10 w-full"/>
        <h2 className="pb-6 text-lg font-bold">{content.title}</h2>
        <p className="pb-6 text-gray-700 leading-loose">{content.intro}</p>
        <p className="text-gray-700">{authorContent.name}</p>
      </Link>
  )
}

Hey,

this is a great tutorial to follow on implementing Storyblok into a Gatsby application. As your goal was to approach a multilingual site: How would you handle component translations in this context? One route could be to do everything in Storyblok but this could become messy pretty fast. Is there a way to add something like i18next on top of the application to manage generic translations?

Thanks,
Johannes