214 context

gatsby-node.js

@@ -7,14 +7,14 @@ const jsonld = require("jsonld")
 const n3 = require("n3")
 const { DataFactory } = n3
 const { namedNode } = DataFactory
-const path = require('path')
-const fs = require('fs-extra')
-const flexsearch = require('flexsearch')
-const omitEmpty = require('omit-empty')
-const { i18n, getFilePath } = require('./src/common')
-const context = require('./src/context')
-const queries = require('./src/queries')
-const types = require('./src/types')
+const path = require("path")
+const fs = require("fs-extra")
+const flexsearch = require("flexsearch")
+const omitEmpty = require("omit-empty")
+const { i18n, getFilePath } = require("./src/common")
+const context = require("./src/context")
+const queries = require("./src/queries")
+const types = require("./src/types")
 
 require("dotenv").config()
 require("graceful-fs").gracefulify(require("fs"))
@@ -67,7 +67,7 @@ const getTurtleFiles = function (dirPath, arrayOfFiles) {
 
 exports.onPreBootstrap = async ({ createContentDigest, actions }) => {
   const { createNode } = actions
-  const ttlFiles = getTurtleFiles('./data', [])
+  const ttlFiles = getTurtleFiles("./data", [])
   if (ttlFiles.length === 0)
     throw new Error(`
     ⛔ Data folder is empty, aborting. 

jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
     ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
     ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
   },
-  "resolver": undefined,
+  resolver: undefined,
   testPathIgnorePatterns: [`node_modules`, `.cache`],
   transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
   globals: {
@@ -16,5 +16,5 @@ module.exports = {
     url: `http://localhost`,
   },
   testEnvironment: `jsdom`,
-  setupFilesAfterEnv: ["<rootDir>/setup-test-env.js"],
+  setupFilesAfterEnv: ["<rootDir>/setup-test-env.js", "./jest.setup.js"],
 }

jest.setup.js

@@ -0,0 +1,2 @@
+// Polyfill "window.fetch" used in the React component.
+import "whatwg-fetch"

package.json

@@ -48,7 +48,8 @@
     "lint-staged": "^13.1.0",
     "nock": "^13.2.0",
     "prettier": "^2.8.1",
-    "supertest": "^6.3.3"
+    "supertest": "^6.3.3",
+    "whatwg-fetch": "^3.6.2"
   },
   "keywords": [
     "SKOS",

setup-test-env.js

@@ -1 +1 @@
-import "@testing-library/jest-dom"
+import "@testing-library/jest-dom"

src/components/header.js

@@ -1,8 +1,9 @@
 import { Link } from "gatsby"
 import { css } from "@emotion/react"
 import PropTypes from "prop-types"
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { useLocation } from "@gatsbyjs/reach-router"
+import { getFilePath } from "../common"
 
 import { colors as c } from "../styles/variables"
 import skohubsvg from "../images/skohub-signet-color.svg"
@@ -45,6 +46,10 @@ const style = css`
         font-size: 18px;
       }
     }
+    .conceptScheme {
+      padding: 15px 0 0 0;
+      font-size: 24px;
+    }
   }
 
   ul.language-menu {
@@ -82,33 +87,58 @@ const style = css`
     }
   }
 `
-const Header = ({ siteTitle, languages, language, pathName = useLocation().pathname.slice(0, -8) }) => (
-  <header aria-label="banner"
-    css={style}
-  >
-    <div className="headerContent">
-      <div className="skohubLogo">
-        <Link to={`/index.${language}.html`}>
-          <img className="skohubImg" src={skohubsvg} alt="SkoHub" />
-          <span className="skohubTitle">{siteTitle}</span>
-        </Link>
+
+const Header = ({ siteTitle, languages, language }) => {
+  const [conceptScheme, setConceptScheme] = useState({})
+  const pathName = useLocation().pathname.slice(0, -8)
+
+  // to display the concept scheme title in the header
+  // we have to retrieve concept scheme info in this component
+  useEffect(() => {
+    fetch(pathName + ".json")
+      .then((response) => response.json())
+      .then((r) => {
+        if (r.type === "ConceptScheme") {
+          setConceptScheme((prev) => ({ ...prev, ...r }))
+        } else if (r.type === "Concept") {
+          const cs = r.topConceptOf ? r.topConceptOf : r.inScheme
+          setConceptScheme((prev) => ({ ...prev, ...cs }))
+        }
+      })
+  }, [pathName])
+  return (
+    <header css={style}>
+      <div className="headerContent">
+        <div className="skohubLogo">
+          <Link to={`/index.${language}.html`}>
+            <img className="skohubImg" src={skohubsvg} alt="SkoHub" />
+            <span className="skohubTitle">{siteTitle}</span>
+          </Link>
+          {conceptScheme && conceptScheme.id && (
+            <div className="conceptScheme">
+              <Link to={getFilePath(conceptScheme.id, `${language}.html`)}>
+                {conceptScheme.title[language] || conceptScheme.id}
+              </Link>
+            </div>
+          )}
+        </div>
+        {languages && languages.length > 1 && (
+          <ul className="language-menu">
+            {languages.map((l) => (
+              <li key={l}>
+                {l === language ? (
+                  <span className="currentLanguage">{l}</span>
+                ) : (
+                  <a href={`${pathName}.${l}.html`}>{l}</a>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
-      {languages && languages.length > 1 && (
-        <ul className="language-menu">
-          {languages.map((l) => (
-            <li key={l}>
-              {l === language ? (
-                <span className="currentLanguage">{l}</span>
-              ) : (
-                <a href={`${pathName}.${l}.html`}>{l}</a>
-              )}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  </header>
-)
+    </header>
+  )
+}
 
 Header.propTypes = {
   siteTitle: PropTypes.string,