I18n

gatsby-node.js

@@ -10,15 +10,14 @@ const fs = require('fs-extra')
 const flexsearch = require('flexsearch')
 const omitEmpty = require('omit-empty')
 const urlTemplate = require('url-template')
-const { t, getPath, getFilePath } = require('./src/common')
+const { i18n, getPath, getFilePath } = require('./src/common')
 const context = require('./src/context')
 const queries = require('./src/queries')
 const types = require('./src/types')
 
 require('dotenv').config()
 
 const languages = new Set()
-let conceptSchemes
 
 jsonld.registerRDFParser('text/turtle', ttlString => {
   const quads = (new n3.Parser()).parse(ttlString)
@@ -95,7 +94,7 @@ exports.createSchemaCustomization = ({ actions: { createTypes } }) => createType
 
 exports.createPages = async ({ graphql, actions: { createPage } }) => {
   const actorUrlTemplate = urlTemplate.parse(process.env.ACTOR)
-  conceptSchemes = await graphql(queries.allConceptScheme(languages))
+  const conceptSchemes = await graphql(queries.allConceptScheme(languages))
 
   conceptSchemes.errors && console.error(conceptSchemes.errors)
 
@@ -112,7 +111,7 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
       const jsonas = Object.assign(omitEmpty({
         id: actor,
         type: 'Service',
-        name: t(concept.prefLabel),
+        name: i18n(languages[0])(concept.prefLabel), // FIXME: which lang should we use?
         preferredUsername: Buffer.from(actorPath).toString('hex'),
         inbox: concept.inbox,
         followers: concept.followers,
@@ -128,14 +127,16 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
         embeddedConcepts.push({ json, jsonld, jsonas })
       } else {
         // create pages and data
-        createPage({
-          path: getFilePath(concept.id, 'html'),
+        languages.forEach(language => createPage({
+          path: getFilePath(concept.id, `${language}.html`),
           component: path.resolve(`./src/components/Concept.js`),
           context: {
+            language,
+            languages: Array.from(languages),
             node: concept,
             baseURL: process.env.BASEURL || ''
           }
-        })
+        }))
         createData({
           path: getFilePath(concept.id, 'json'),
           data: JSON.stringify(json, null, 2)
@@ -149,20 +150,22 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
           data: JSON.stringify(jsonas, null, 2)
         })
       }
-      index.add(concept.id, t(concept.prefLabel))
+      languages.forEach(language => index.add(concept.id, i18n(language)(concept.prefLabel)))
     })
 
     console.log("Built index", index.info())
 
-    createPage({
-      path: getFilePath(conceptScheme.id, 'html'),
+    languages.forEach(language => createPage({
+      path: getFilePath(conceptScheme.id, `${language}.html`),
       component: path.resolve(`./src/components/ConceptScheme.js`),
       context: {
+        language,
+        languages: Array.from(languages),
         node: conceptScheme,
         embed: embeddedConcepts,
         baseURL: process.env.BASEURL || ''
       }
-    })
+    }))
     createData({
       path: getFilePath(conceptScheme.id, 'json'),
       data: JSON.stringify(omitEmpty(Object.assign({}, conceptScheme, context.jsonld), null, 2))
@@ -176,23 +179,19 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
       data: JSON.stringify(index.export(), null, 2)
     })
   })
+
+  // Build index pages
+  languages.forEach(language => createPage({
+    path: `/index.${language}.html`,
+    component: path.resolve(`./src/components/index.js`),
+    context: {
+      language,
+      languages: Array.from(languages),
+      conceptSchemes: conceptSchemes.data.allConceptScheme.edges.map(node => node.node)
+    },
+  }))
+
 }
 
 const createData = ({path, data}) =>
   fs.outputFile(`public${path}`, data, err => err && console.error(err))
-
-exports.onCreatePage = ({ page, actions }) => {
-  const { createPage, deletePage } = actions
-  // Pass allConceptScheme to the pageContext of /pages/index.js
-  if (page.component && page.component.endsWith('src/pages/index.js')) {
-    deletePage(page)
-    const { allConceptScheme } = conceptSchemes.data
-    createPage({
-      ...page,
-      context: {
-        ...page.context,
-        allConceptScheme
-      },
-    })
-  }
-}

src/common.js

@@ -2,9 +2,7 @@ const maybe = require('mjn')
 const crypto = require('crypto')
 const fetch = require("node-fetch")
 
-const t = localized => localized
-  && (Object.entries(localized).filter(([, value]) => !!value).shift() || []).pop()
-  || ''
+const i18n = lang => localized => localized[lang] || ''
 
 const getFilePath = (url, extension) => {
   let path = url.replace(/^https?:\//, "").split('#').shift()
@@ -151,7 +149,7 @@ const verifyFiles = (files) => {
 const getHeaders = (inbox, hub, self, path) => `Header set Link "<${inbox}>; rel=\\"http://www.w3.org/ns/ldp#inbox\\", <${hub}>; rel=\\"hub\\", <${self}>; rel=\\"self\\"" "expr=%{REQUEST_URI} =~ m|${path}|"`
 
 module.exports = {
-  t,
+  i18n,
   getPath,
   getFilePath,
   getFragment,

src/components/Concept.js

@@ -2,15 +2,15 @@
 import { jsx } from '@emotion/core'
 import Markdown from 'markdown-to-jsx'
 
-import { t, getDomId } from '../common'
+import { i18n, getDomId } from '../common'
 
-const Concept = ({ pageContext: { node: concept } }) => (
+const Concept = ({ pageContext: { node: concept, language } }) => (
   <div className="content block" id={getDomId(concept.id)}>
     <h1>
       {concept.notation &&
         <span>{concept.notation.join(',')}&nbsp;</span>
       }
-      {t(concept.prefLabel)}
+      {i18n(language)(concept.prefLabel)}
     </h1>
     <h2>{concept.id}</h2>
     <p>
@@ -21,7 +21,7 @@ const Concept = ({ pageContext: { node: concept } }) => (
         <div className="markdown">
           <h3>Definition</h3>
           <Markdown>
-            {t(concept.definition)}
+            {i18n(language)(concept.definition)}
           </Markdown>
         </div>
       )
@@ -31,7 +31,7 @@ const Concept = ({ pageContext: { node: concept } }) => (
         <div className="markdown">
           <h3>Scope Note</h3>
           <Markdown>
-            {t(concept.scopeNote)}
+            {i18n(language)(concept.scopeNote)}
           </Markdown>
         </div>
       )
@@ -41,7 +41,7 @@ const Concept = ({ pageContext: { node: concept } }) => (
         <div className="markdown">
           <h3>Note</h3>
           <Markdown>
-            {t(concept.note)}
+            {i18n(language)(concept.note)}
           </Markdown>
         </div>
       )

src/components/ConceptScheme.js

@@ -3,23 +3,23 @@ import { jsx } from '@emotion/core'
 import Markdown from 'markdown-to-jsx'
 
 import Concept from './Concept'
-import { t, getDomId } from '../common'
+import { i18n, getDomId } from '../common'
 
-const ConceptScheme = ({ pageContext: { node: conceptScheme, embed } }) => (
+const ConceptScheme = ({ pageContext: { node: conceptScheme, embed, language } }) => (
   <div className="content concept block" id={getDomId(conceptScheme.id)}>
     {embed && (
       embed.map(concept => (
         <Concept key={concept.json.id} pageContext={{ node: concept.json }} />
       ))
     )}
     <div>
-      <h1>{t(conceptScheme.title)}</h1>
+      <h1>{i18n(language)(conceptScheme.title)}</h1>
       <h2>{conceptScheme.id}</h2>
       {conceptScheme.description
         && (
           <div className="markdown">
             <Markdown>
-              {t(conceptScheme.description)}
+              {i18n(language)(conceptScheme.description)}
             </Markdown>
           </div>
         )

src/components/header.js

@@ -2,6 +2,7 @@ import { Link } from "gatsby"
 import { css } from '@emotion/core'
 import PropTypes from "prop-types"
 import React from "react"
+import { useLocation } from '@reach/router'
 
 import { colors as c } from '../styles/variables'
 
@@ -11,13 +12,19 @@ const style = css`
 
   h1 {
     margin: 0;
+    display: inline;
 
     a {
       text-decoration: none;
       color: white;
     }
   }
 
+  ul, li {
+    display: inline;
+    margin-right: 5px;
+  }
+
   .wave {
     overflow: hidden;
     position: relative;
@@ -28,6 +35,10 @@ const style = css`
     padding: 20px 20px 5px 20px;
   }
 
+  .currentLanguage {
+    font-weight: bold;
+  }
+
   svg {
     position: absolute;
     bottom: 0;
@@ -37,17 +48,29 @@ const style = css`
     fill: ${c.base};
   }
 `
-const Header = ({ siteTitle }) => (
+const Header = ({ siteTitle, languages, language, pathName = useLocation().pathname.slice(0, -8) }) => (
   <header
     css={style}
   >
     <div className="headerContent">
       <h1>
-        <Link to="/" >
+        <Link to={`/index.${language}.html`} >
           {siteTitle}
         </Link>
       </h1>
-
+      {languages && languages.length > 1 && (
+        <ul>
+          {languages.map(l => (
+            <li key={l}>
+              {l === language ? (
+                <span className="currentLanguage">{l}</span>
+              ) : (
+                <a href={`${pathName}.${l}.html`}>{l}</a>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
 
     <div className="wave">

src/components/index.js

@@ -0,0 +1,25 @@
+import React from "react"
+import { Link } from "gatsby"
+import { i18n, getFilePath } from '../common'
+
+import Layout from "./layout"
+import SEO from "./seo"
+
+const IndexPage = ({ pageContext: { conceptSchemes, language, languages } }) => (
+  <Layout languages={languages} language={language}>
+    <SEO title="Concept Schemes" keywords={['conceptSchemes']} />
+    <div className="centerPage block">
+      <ul>
+        {conceptSchemes.map(conceptScheme => (
+          <li key={conceptScheme.id}>
+            <Link to={(process.env.BASEURL || '') + getFilePath(conceptScheme.id, `${language}.html`)}>
+              {conceptScheme.title ? i18n(language)(conceptScheme.title) : conceptScheme.id}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </Layout>
+)
+
+export default IndexPage

src/components/layout.js

@@ -45,7 +45,7 @@ const style = css`
   }
 `
 
-const Layout = ({ children }) => (
+const Layout = ({ children, languages, language }) => (
   <StaticQuery
     query={graphql`
       query SiteTitleQuery {
@@ -132,7 +132,11 @@ const Layout = ({ children }) => (
             }
           `}
         />
-        <Header siteTitle={data.site.siteMetadata.title} />
+        <Header
+          siteTitle={data.site.siteMetadata.title}
+          languages={languages}
+          language={language}
+        />
         <main>{children}</main>
 
         {process.env.GATSBY_RESPOSITORY_URL && (

src/components/nestedList.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
-import { t, getFilePath, getFragment } from '../common'
+import { i18n, getFilePath, getFragment } from '../common'
 import { Link } from "gatsby"
 
 import { colors as c } from '../styles/variables'
@@ -102,10 +102,11 @@ const getNestedItems = item => {
   return ids
 }
 
-const NestedList = ({ items, current, filter, highlight }) => {
+const NestedList = ({ items, current, filter, highlight, language }) => {
   const filteredItems = filter
     ? items.filter(item => !filter || filter.some(filter => getNestedItems(item).includes(filter)))
     : items
+  const t = i18n(language)
 
   return (
     <ul css={style}>
@@ -143,7 +144,7 @@ const NestedList = ({ items, current, filter, highlight }) => {
             ) : (
               <Link
                 className={item.id === current ? 'current' : ''}
-                to={getFilePath(item.id, 'html')}
+                to={getFilePath(item.id, `${language}.html`)}
               >
                 {item.notation &&
                   <span className="notation">{item.notation.join(',')}&nbsp;</span>