added language toggle support to starter

gatsby-config.js

@@ -7,7 +7,7 @@ require("dotenv").config({
 const agilityConfig = {
  guid: process.env.AGILITY_GUID,
  apiKey: process.env.AGILITY_API_KEY,
- isPreview: process.env.AGILITY_API_ISPREVIEW
+ isPreview: process.env.AGILITY_API_ISPREVIEW,
 }
 
 /**
@@ -19,47 +19,50 @@ const agilityConfig = {
 module.exports = {
  siteMetadata: {
  title: "Agility CMS Gatsby Starter",
-
  },
  plugins: [
  `gatsby-plugin-netlify`,
  `gatsby-plugin-react-helmet`,
  {
  //the name of the plugin
- resolve: "@agility/gatsby-source-agilitycms", 
+ resolve: "@agility/gatsby-source-agilitycms",
  //the options for our plugin
  options: {
  //your Agility Content Fetch API Guid
- guid: agilityConfig.guid, 
+ guid: agilityConfig.guid,
  //your Agility Content Fetch API Key
- apiKey: agilityConfig.apiKey, 
+ apiKey: agilityConfig.apiKey,
  //set this to true if you are using the preview API Key
- isPreview: agilityConfig.isPreview, 
+ isPreview: agilityConfig.isPreview,
  //set this to true to see expanded traces in the build logs
  debug: false,
  //the languages you want to source content for
- languages: [{
- // The name of the language code
- name: "English",
- // The actual language code set in Agility CMS
- code: "en-us", 
- // The name to be used in the URL path that represents the current language
- path: "en"
- }], 
+ languages: [
+ {
+ // The name of the language code
+ name: "English",
+ // The actual language code set in Agility CMS
+ code: "en-us",
+ // The name to be used in the URL path that represents the current language
+ path: "en",
+ },
+ ],
  // The channels you want to include
- channels: [{
- // The reference name for the website channel as it is defined in Agility CMS
- referenceName: "website"
- }],
- //the page template that will be used to render Agility CMS pages
- masterPageTemplate: "./src/AgilityPage.js"
+ channels: [
+ {
+ // The reference name for the website channel as it is defined in Agility CMS
+ referenceName: "website",
+ },
+ ],
+ //the page template that will be used to render Agility CMS pages
+ masterPageTemplate: "./src/AgilityPage.js",
  },
  },
  `gatsby-plugin-sharp`,
  `gatsby-transformer-sharp`,
- { 
+ {
  resolve: `gatsby-source-filesystem`,
- options: { name: `images`, path: `./src/img/` }
+ options: { name: `images`, path: `./src/img/` },
  },
  ],
 }

package.json

@@ -13,7 +13,7 @@
  "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "dependencies": {
- "@agility/gatsby-source-agilitycms": "^1.6.4",
+ "@agility/gatsby-source-agilitycms": "^1.6.6",
  "dotenv": "^8.1.0",
  "gatsby": "^2.21.4",
  "gatsby-image": "^2.3.2",

src/AgilityPage.js

@@ -1,40 +1,63 @@
-import React from 'react'
+import React from "react"
 import { graphql } from "gatsby"
-import agilityUtils from './agility/utils'
-import AgilityPageTemplate from './agility/components/AgilityPageTemplate'
+import agilityUtils from "./agility/utils"
+import AgilityPageTemplate from "./agility/components/AgilityPageTemplate"
 //Some things we need for our layout
 import LayoutTemplate from "./components/LayoutTemplate"
 import PreviewBar from "./components/PreviewBar"
-import GlobalHeader from './components/GlobalHeader'
-import SEO from './components/SEO'
-
+import GlobalHeader from "./components/GlobalHeader"
+import SEO from "./components/SEO"
 
 //Our query to get the our page data and check for a dynamic page item (agilityItem)
 export const query = graphql`
  query($pageID: Int!, $contentID: Int!, $languageCode: String!) {
-
  agilitypage(languageCode: { eq: $languageCode }, itemID: { eq: $pageID }) {
- pageJson
- }
- agilityitem(languageCode: {eq: $languageCode}, itemID: {eq: $contentID}) {
- itemJson
+ pageJson
  }
-}
+ agilityitem(
+ languageCode: { eq: $languageCode }
+ itemID: { eq: $contentID }
+ ) {
+ itemJson
+ }
+ pagesInOtherLanguages: allAgilitySitemapNode(
+ filter: {
+ languageCode: { ne: $languageCode }
+ pageID: { eq: $pageID }
+ contentID: { eq: $contentID }
+ }
+ ) {
+ nodes {
+ pageID
+ pagePath
+ path
+ languageCode
+ contentID
+ title
+ }
+ }
+ }
 `
 const AgilityPage = ({ pageContext, data }) => {
- const viewModel = agilityUtils.buildPageViewModel({ pageContext, data });
- return (
- <LayoutTemplate>
- <SEO title={viewModel.page.title} description={viewModel.page.seo.metaDescription} />
- <PreviewBar isPreview={viewModel.isPreview} />
- <GlobalHeader languageCode={viewModel.languageCode} isMultiLanguage={viewModel.isMultiLanguage} />
- <main className="main">
- <AgilityPageTemplate {...viewModel} />
- </main>
- </LayoutTemplate>
- );
+ const viewModel = agilityUtils.buildPageViewModel({ pageContext, data })
+ return (
+ <LayoutTemplate>
+ <SEO
+ title={viewModel.page.title}
+ description={viewModel.page.seo.metaDescription}
+ />
+ <PreviewBar isPreview={viewModel.isPreview} />
+ <GlobalHeader
+ languageCode={viewModel.languageCode}
+ isMultiLanguage={viewModel.isMultiLanguage}
+ pagesInOtherLanguages={viewModel.pagesInOtherLanguages}
+ languages={viewModel.languages}
+ />
+ <main className="main">
+ <AgilityPageTemplate {...viewModel} />
+ </main>
+ </LayoutTemplate>
+ )
 }
 
-export default AgilityPage;
-
-
+export default AgilityPage

src/agility/components/StaticMultiLangPreviewPage.js

@@ -0,0 +1,31 @@
+const StaticMultiLangPreviewPage = ({ pageContext }) => {
+ if (typeof window !== `undefined`) {
+ const requestedLangCode = getParameterByName({
+ name: "lang",
+ url: window.location.href,
+ })
+
+ const { languages } = pageContext
+
+ languages.map((language) => {
+ if (language.code === requestedLangCode) {
+ window.location = `/${language.path}${window.location.pathname}`
+ return null
+ }
+ })
+ }
+ //no render
+ return null
+}
+
+const getParameterByName = ({ name, url }) => {
+ if (!url) url = window.location.href
+ name = name.replace(/[[\]]/g, "\\$&")
+ var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+ results = regex.exec(url)
+ if (!results) return null
+ if (!results[2]) return ""
+ return decodeURIComponent(results[2].replace(/\+/g, " "))
+}
+
+export default StaticMultiLangPreviewPage