feat(gatsby): language switch

src/app/website/gatsby-node.js

@@ -0,0 +1,8 @@
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+  const oldPage = { ...page };
+  const regex = new RegExp('/en');
+  page.context.langKey = regex.test(page.path) ? 'en' : 'fr';
+  deletePage(oldPage);
+  createPage(page);
+};

src/app/website/src/components/Layout.tsx

@@ -5,22 +5,40 @@ import Header, {
   Scrolled
 } from '../../../../components/website/molecules/Header/Header';
 import Footer from '../../../../components/website/organisms/Footer/Footer';
+import i18n, { SupportedLanguage } from '../../../../libs/i18n';
+import switchLanguage from '../utils/switchLanguage';
+import { PageContext } from '../types';
 import useGetMenus from '../hooks/useGetMenus';
+import useChangeLanguage from '../hooks/useChangeLanguage';
 import './layout.css';
 import Seo from './seo';
 
 interface LayoutProps {
   children: React.ReactNode;
   pageTitle: string;
   scrolled?: Scrolled;
+  pageContext: PageContext;
 }
 
-const Layout = ({ children, pageTitle, scrolled }: LayoutProps) => {
-  const { footer, header } = useGetMenus('fr');
+const Layout = ({
+  children,
+  pageTitle,
+  scrolled,
+  pageContext
+}: LayoutProps) => {
+  useChangeLanguage(pageContext.langKey as SupportedLanguage);
+  const { footer, header } = useGetMenus(i18n.language as SupportedLanguage);
+
   return (
     <ThemeProvider theme={theme}>
       <Seo title={pageTitle} />
-      <Header scrolled={scrolled} links={header} />
+      <Header
+        scrolled={scrolled}
+        links={header}
+        switchLanguage={() =>
+          switchLanguage(i18n.language as SupportedLanguage, pageContext.slug)
+        }
+      />
       <main>{children}</main>
       <Footer links={footer} />
     </ThemeProvider>

src/app/website/src/contents/fr/creatingAPost.mdx → src/app/website/src/contents/fr/creating-a-post.mdx

@@ -3,6 +3,7 @@ title: "Poster une information sur le web grâce à DisMoi"
 name: "contribuer"
 label: "Contribuer"
 locale: "fr"
+langKey: "fr"
 ---
 
 > ## Contribuer avec l’extension directement sur les pages web visitées

src/app/website/src/hooks/useChangeLanguage.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import i18n, { SupportedLanguage } from '../../../../libs/i18n';
+
+const useChangeLanguage = (locale: SupportedLanguage) => {
+  useEffect(() => {
+    i18n.changeLanguage(locale);
+  }, []);
+};
+export default useChangeLanguage;

src/app/website/src/hooks/useGetMenus.ts

@@ -32,7 +32,7 @@ const useGetMenus = (
   const header: Link[] = [];
   const formatLink = (node: GetLinksQuery['allMdx']['nodes'][0]) => {
     return {
-      href: node.slug || '#',
+      href: '/' + node.slug + '/' || '#',
       label: node.frontmatter?.label || ''
     };
   };
@@ -43,8 +43,6 @@ const useGetMenus = (
     FOOTER_LINKS.some(name => name === node.frontmatter?.name) &&
       footer.push(formatLink(node));
   });
-
-  console.log(header, footer);
   return {
     header,
     footer

src/app/website/src/pages/index.en.tsx

@@ -1,11 +1,26 @@
 import * as React from 'react';
 import Layout from '../components/Layout';
+import { PageContext } from '../types';
 import HomePage from '../../../../components/website/pages/HomePage/HomePage';
+import useGetContributors from '../hooks/useGetContributors';
+import { contributorsIds } from '../contents/ContributorsIds';
+import i18n, { options } from '../../../../libs/i18n';
+
+i18n
+  .init(options)
+  .then(() => null)
+  .catch(() => null);
+
+interface IndexProps {
+  pageContext: PageContext;
+}
+
+const IndexPage = ({ pageContext }: IndexProps) => {
+  const [contributors] = useGetContributors(contributorsIds);
 
-const IndexPage = () => {
   return (
-    <Layout pageTitle={"Page d'accueil dis moi"}>
-      <HomePage />
+    <Layout pageTitle={"Page d'accueil dis moi"} pageContext={pageContext}>
+      <HomePage contributors={contributors} />
     </Layout>
   );
 };

src/app/website/src/pages/index.tsx

@@ -1,14 +1,25 @@
 import * as React from 'react';
 import Layout from '../components/Layout';
+import { PageContext } from '../types';
 import HomePage from '../../../../components/website/pages/HomePage/HomePage';
 import useGetContributors from '../hooks/useGetContributors';
 import { contributorsIds } from '../contents/ContributorsIds';
+import i18n, { options } from '../../../../libs/i18n';
 
-const IndexPage = () => {
+i18n
+  .init(options)
+  .then(() => null)
+  .catch(() => null);
+
+interface IndexProps {
+  pageContext: PageContext;
+}
+
+const IndexPage = ({ pageContext }: IndexProps) => {
   const [contributors] = useGetContributors(contributorsIds);
 
   return (
-    <Layout pageTitle={"Page d'accueil dis moi"}>
+    <Layout pageTitle={"Page d'accueil dis moi"} pageContext={pageContext}>
       <HomePage contributors={contributors} />
     </Layout>
   );

src/app/website/src/pages/{mdx.slug}.tsx

@@ -3,20 +3,29 @@ import { graphql } from 'gatsby';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MdxBySlugQuery } from '../graphql/generated/graphql';
 import Layout from '../components/Layout';
+import { PageContext } from '../types';
 import ContentPage from '../../../../components/website/organisms/ContentPage/ContentPage';
+import i18n, { options, SupportedLanguage } from '../../../../libs/i18n';
+import useChangeLanguage from '../hooks/useChangeLanguage';
 
-interface AboutPageProps {
+i18n
+  .init(options)
+  .then(() => null)
+  .catch(() => null);
+
+interface PageProps {
   data: MdxBySlugQuery;
   uri: string;
+  pageContext: PageContext;
 }
 
-const Page = ({ data }: AboutPageProps) => {
+const Page = ({ data, pageContext }: PageProps) => {
   const content = data?.mdx?.body && <MDXRenderer>{data.mdx.body}</MDXRenderer>;
   if (!content) return null;
   const title = data?.mdx?.frontmatter?.title || '';
 
   return (
-    <Layout pageTitle={title} scrolled={true}>
+    <Layout pageTitle={title} scrolled={true} pageContext={pageContext}>
       <article className={'className'}>
         <ContentPage title={title} content={content} />
       </article>

src/app/website/src/types/index.d.ts

@@ -0,0 +1 @@
+export type PageContext = { langKey: string; slug: string };

src/app/website/src/utils/switchLanguage.ts

@@ -0,0 +1,11 @@
+import { navigate } from 'gatsby';
+import i18n, { SupportedLanguage } from '../../../../libs/i18n';
+
+const switchLanguage = (locale: SupportedLanguage, slug: string) => {
+  const newLocale = locale === 'fr' ? 'en' : 'fr';
+  i18n.changeLanguage(newLocale);
+  const newSlug = '/' + slug.replace(locale, newLocale);
+  navigate(newSlug);
+};
+
+export default switchLanguage;

src/components/website/molecules/Header/Header.tsx

@@ -6,8 +6,8 @@ import LogoDisMoi from '../../atoms/LogoDisMoi/LogoDisMoi';
 import ToggleMenu from '../../atoms/NavMobileButton/ToggleMenu';
 import Modal from '../../atoms/Modal/Modal';
 import NavMobile from '../../atoms/NavMobile/NavMobile';
-import ListLinks, { Link } from './ListLinks';
 import NavDesktopItem from '../../atoms/NavDesktopItem/NavDesktopItem';
+import ListLinks, { Link } from './ListLinks';
 
 const MobileButtonsWrapper = styled.div`
   display: flex;
@@ -56,48 +56,50 @@ export interface HeaderProps {
   className?: string;
   scrolled?: Scrolled;
   links: Link[];
+  switchLanguage: () => void;
 }
 
-const Header = styled(({ className, scrolled, links }: HeaderProps) => {
-  const [offset, setOffset] = useState(0);
-  const [modalOpen, setModalOpen] = React.useState<boolean>(false);
+const Header = styled(
+  ({ className, scrolled, links, switchLanguage }: HeaderProps) => {
+    const [offset, setOffset] = useState(0);
+    const [modalOpen, setModalOpen] = React.useState<boolean>(false);
 
-  useEffect(() => {
-    window.onload = () => {
-      setOffset(window.pageYOffset);
-    };
-    window.onscroll = () => {
-      setOffset(window.pageYOffset);
-    };
-  }, []);
+    useEffect(() => {
+      window.onload = () => {
+        setOffset(window.pageYOffset);
+      };
+      window.onscroll = () => {
+        setOffset(window.pageYOffset);
+      };
+    }, []);
 
-  const isScrolled = scrolled || offset > 0;
-
-  return (
-    <>
-      <header className={className + (isScrolled ? ' scrolled' : '')}>
-        <a className="homeLink" href={'/'}>
-          <LogoDisMoi />
-        </a>
-        <NavDesktop>
-          <ListLinks links={links} />
-          {isScrolled && <HeaderCTAButton />}
-          <NavDesktopItem href={'#'}>fr | en</NavDesktopItem>
-        </NavDesktop>
-        <MobileButtonsWrapper>
-          {isScrolled && <HeaderCTAButton />}
-          <ToggleMenu handleClick={() => setModalOpen(true)} />
-        </MobileButtonsWrapper>
-      </header>
-      <Modal open={modalOpen} setOpen={setModalOpen}>
-        <NavMobile>
-          <ListLinks links={links} />
-          <HeaderCTAButton />
-        </NavMobile>
-      </Modal>
-    </>
-  );
-})`
+    const isScrolled = scrolled || offset > 0;
+    return (
+      <>
+        <header className={className + (isScrolled ? ' scrolled' : '')}>
+          <a className="homeLink" href={'/'}>
+            <LogoDisMoi />
+          </a>
+          <NavDesktop>
+            <ListLinks links={links} />
+            {isScrolled && <HeaderCTAButton />}
+            <NavDesktopItem onClick={switchLanguage}>fr | en</NavDesktopItem>
+          </NavDesktop>
+          <MobileButtonsWrapper>
+            {isScrolled && <HeaderCTAButton />}
+            <ToggleMenu handleClick={() => setModalOpen(true)} />
+          </MobileButtonsWrapper>
+        </header>
+        <Modal open={modalOpen} setOpen={setModalOpen}>
+          <NavMobile>
+            <ListLinks links={links} />
+            <HeaderCTAButton />
+          </NavMobile>
+        </Modal>
+      </>
+    );
+  }
+)`
   position: fixed;
   top: 0;
   left: 0;