first try

content/posts/7-habits/index.mdx

@@ -35,6 +35,7 @@ banner: /images/seven-habits-of-highly-effecitve-people-book.jpeg
 
 Становясь основой характера, семь принципов высокоэффективных людей являются мощными инструментами раскрытия потенциала, решения проблем, достижения успеха и непрерывного совершенствования. В их основе принципы и правила, которые действуют везде и всегда и одинаково результативны как в личной жизни, так и в бизнесе.
 
+<Translate id="section1" />
 
 ### Ключевые моменты
 

locales/en/index.json

@@ -1,5 +1,7 @@
 {
   "title": "Your Search For Better Sleep Ends Here",
-  "hello": "привіт",
-  "Roman Rud Blog": "Roman Rud Blog"
+  "hero_greeting": "Hi",
+  "hero_description": "From time to time I write articles on topics that interest me :)",
+  "hero_recent_posts": "Нещодавні пости",
+  "Roman Rud Blog": "Roman Rud"
 }

locales/ru/index.json

@@ -1,5 +1,7 @@
 {
-  "title": "заголовок",
-  "hello": "Привет",
+  "title": "Your Search For Better Sleep Ends Here",
+  "hero_greeting": "Hi",
+  "hero_description": "From time to time I write articles on topics that interest me :)",
+  "hero_recent_posts": "Нещодавні пости",
   "Roman Rud Blog": "Roman Rud"
 }

locales/uk/blog1.json

@@ -0,0 +1,5 @@
+{
+    "title": "Das ist der Titel des Blogbeitrags",
+    "section1": "Dies ist der erste Abschnitt des Blogbeitrags",
+    "section2": "Dies ist der zweite Abschnitt des Blogbeitrags"
+  }

locales/uk/blog2.json

@@ -0,0 +1,5 @@
+{
+    "title": "This is the blog post title",
+    "section1": "This is the first section of the blog post",
+    "section2": "This is the second section of the blog post"
+  }

locales/uk/index.json

@@ -1,5 +1,8 @@
 {
-  "title": "назва",
-  "hello": "привіт",
-  "Roman Rud Blog": "Roman Rud"
+  "title": "Your Search For Better Sleep Ends Here",
+  "hero_greeting": "Hi",
+  "hero_description": "From time to time I write articles on topics that interest me :)",
+  "hero_recent_posts": "Нещодавні пости",
+  "Roman Rud Blog": "Roman Rud",
+  "Блог": "БЛОГГГ"
 }

src/@lekoarts/gatsby-theme-minimal-blog-core/templates/homepage-query.tsx

@@ -0,0 +1,35 @@
+import { graphql } from "gatsby"
+import HomepageComponent, { Head } from "../../gatsby-theme-minimal-blog/components/homepage"
+
+export default HomepageComponent
+
+export { Head }
+
+export const query = graphql`
+  query ($formatString: String!, $language: String!) {
+    allPost(sort: { date: DESC }, limit: 3) {
+      nodes {
+        slug
+        title
+        date(formatString: $formatString)
+        excerpt
+        timeToRead
+        description
+        tags {
+          name
+          slug
+        }
+      }
+    }
+
+    locales: allLocale(filter: { language: { eq: $language } }) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`;

src/@lekoarts/gatsby-theme-minimal-blog-core/templates/page-query.tsx

@@ -0,0 +1,26 @@
+import { graphql } from "gatsby"
+import PageComponent, { Head } from "../../gatsby-theme-minimal-blog/components/page"
+
+export default PageComponent
+
+export { Head }
+
+export const query = graphql`
+  query ($slug: String!, $language: String!) {
+    page(slug: { eq: $slug }) {
+      title
+      slug
+      excerpt
+    }
+
+    locales: allLocale(filter: { language: { eq: $language } }) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`

src/@lekoarts/gatsby-theme-minimal-blog-core/templates/post-query.tsx

@@ -0,0 +1,41 @@
+import { graphql } from "gatsby"
+import PostComponent, { Head } from "../../gatsby-theme-minimal-blog/components/post";
+
+export default PostComponent
+
+export { Head }
+
+export const query = graphql`
+  query ($slug: String!, $formatString: String!, $language: String!) {
+    post(slug: { eq: $slug }) {
+      slug
+      title
+      date(formatString: $formatString)
+      tags {
+        name
+        slug
+      }
+      description
+      canonicalUrl
+      excerpt
+      timeToRead
+      banner {
+        childImageSharp {
+          resize(width: 1200, quality: 90) {
+            src
+          }
+        }
+      }
+    }
+    
+    locales: allLocale(filter: { language: { eq: $language } }) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`

src/@lekoarts/gatsby-theme-minimal-blog-core/templates/tag-query.tsx

@@ -0,0 +1,35 @@
+import { graphql } from "gatsby"
+import TagComponent, { Head } from "../../gatsby-theme-minimal-blog/components/tag"
+
+export default TagComponent
+
+export { Head }
+
+export const query = graphql`
+  query ($slug: String!, $formatString: String!, $language: String!) {
+    allPost(sort: { date: DESC }, filter: { tags: { elemMatch: { slug: { eq: $slug } } } }) {
+      nodes {
+        slug
+        title
+        date(formatString: $formatString)
+        excerpt
+        timeToRead
+        description
+        tags {
+          name
+          slug
+        }
+      }
+    }
+
+    locales: allLocale(filter: { language: { eq: $language } }) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`

src/@lekoarts/gatsby-theme-minimal-blog-core/templates/tags-query.tsx

@@ -0,0 +1,27 @@
+import { graphql } from "gatsby"
+import TagsComponent, { Head } from "../../gatsby-theme-minimal-blog/components/tags"
+
+export default TagsComponent
+
+export { Head }
+
+export const query = graphql`
+  query ($language: String!) {
+    allPost {
+      group(field: tags___name) {
+        fieldValue
+        totalCount
+      }
+    }
+
+    locales: allLocale(filter: { language: { eq: $language } }) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`

src/@lekoarts/gatsby-theme-minimal-blog/components/homepage.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import { HeadFC, Link } from "gatsby"
+import { HeadFC, Link, graphql } from "gatsby"
 import Layout from "./layout"
 import Title from "./title"
 import Listing from "./listing"
@@ -12,6 +12,7 @@ import { visuallyHidden } from "../styles/utils"
 import Seo from "./seo"
 import Hero from "../texts/hero.mdx"
 import Bottom from "../texts/bottom.mdx"
+import { useTranslation } from "gatsby-plugin-react-i18next";
 
 export type MBHomepageProps = {
   posts: {
@@ -31,14 +32,16 @@ export type MBHomepageProps = {
 const Homepage = ({ posts }: MBHomepageProps) => {
   const { basePath, blogPath } = useMinimalBlogConfig()
   const { siteTitle } = useSiteMetadata()
+  const { t } = useTranslation();
 
   return (
     <Layout>
       <h1 sx={visuallyHidden}>{siteTitle}</h1>
       <section sx={{ mb: [6, 6, 6], p: { fontSize: [1, 2, 3], mt: 2 }, variant: `section_hero` }}>
         <Hero />
+        {t("hero_recent_posts")}
       </section>
-      <Title text="Недавние посты">
+      <Title text={t("hero_recent_posts")}>
         <Link to={replaceSlashes(`/${basePath}/${blogPath}`)}>Посмотреть все</Link>
       </Title>
       <Listing posts={posts} showTags={false} />
@@ -51,4 +54,18 @@ const Homepage = ({ posts }: MBHomepageProps) => {
 
 export default Homepage
 
-export const Head: HeadFC = () => <Seo />
+export const Head: HeadFC = () => <Seo />
+
+export const query = graphql`
+  query ($language: String!) {
+    locales: allLocale(filter: { language: { eq: $language } }) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`;

src/@lekoarts/gatsby-theme-minimal-blog/components/layout.tsx

@@ -8,11 +8,12 @@ import Header from "./header"
 import Footer from "./footer"
 import CodeStyles from "../styles/code"
 import SkipNavLink from "./skip-nav"
+import Translate from "./translate-blog" // import the Translate component
 
 type LayoutProps = { children: React.ReactNode; className?: string }
 
 const Layout = ({ children, className = `` }: LayoutProps) => (
-  <MDXProvider components={MdxComponents}>
+<MDXProvider components={{...MdxComponents, Translate }}>
     <Global
       styles={(t) => ({
         "*": {

src/@lekoarts/gatsby-theme-minimal-blog/components/navigation.tsx

@@ -4,7 +4,7 @@ import { jsx } from "theme-ui";
 import { Link } from "gatsby";
 import useMinimalBlogConfig from "../hooks/use-minimal-blog-config";
 import replaceSlashes from "../utils/replaceSlashes";
-import { useI18next } from "gatsby-plugin-react-i18next";
+import { useI18next, useTranslation } from "gatsby-plugin-react-i18next";
 
 type NavigationProps = {
   nav: {
@@ -13,7 +13,10 @@ type NavigationProps = {
   }[];
 };
 
+// Navigation bar, uses data from gatsby-config.ts, navigation array;
+// Line 48 works only for the blog page /uk/blog/
 const Navigation = ({ nav }: NavigationProps) => {
+  const { t } = useTranslation();
   const { basePath: basePath_ } = useMinimalBlogConfig();
   const { language, i18n } = useI18next();
   const isDefaultLanguage =
@@ -43,7 +46,7 @@ const Navigation = ({ nav }: NavigationProps) => {
                 }}
                 to={replaceSlashes(`${basePath}/${item.slug}`)}
               >
-                {item.title}
+                {t(item.title)} 
               </Link>
             );
           })}

src/@lekoarts/gatsby-theme-minimal-blog/components/post.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import type { HeadFC, PageProps } from "gatsby"
+import { HeadFC, PageProps, graphql } from "gatsby"
 import * as React from "react"
 import { jsx, Heading } from "theme-ui"
 import Layout from "./layout"
@@ -105,3 +105,17 @@ export const Head: HeadFC<MBPostProps> = ({ data: { post } }) => {
     />
   )
 }
+
+export const query = graphql`
+  query PostQuery($language: String!) {
+    locales: allLocale(filter: { language: { eq: $language } }) {
+      edges {
+        node {
+          ns
+          data
+          language
+        }
+      }
+    }
+  }
+`

src/@lekoarts/gatsby-theme-minimal-blog/components/translate-blog.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type TranslateProps = {
+  id: string;
+};
+
+const Translate: React.FC<TranslateProps> = ({ id }) => {
+  const { t } = useTranslation();
+  return <>{t(id)}</>;
+};
+
+export default Translate;