-
+
{i18n(language)(collection.prefLabel) ||
`*No label in language "${language}" provided.*`}
@@ -192,17 +194,7 @@ const Concept = ({
otherwise link to first present language
*/}
{Object.keys(conceptSchemes).includes(inScheme.id) ? (
-
+
{inScheme.id}
) : (
diff --git a/src/components/ConceptScheme.jsx b/src/components/ConceptScheme.jsx
index 4df9bd39..801f4d3c 100644
--- a/src/components/ConceptScheme.jsx
+++ b/src/components/ConceptScheme.jsx
@@ -1,42 +1,53 @@
import Markdown from "markdown-to-jsx"
-
import Concept from "./Concept"
import { i18n, getDomId, getFilePath } from "../common"
import JsonLink from "./JsonLink"
import ConceptURI from "./ConceptURI"
+import { useSkoHubContext } from "../context/Context"
+import { useEffect, useState } from "react"
+import { useLocation } from "@gatsbyjs/reach-router"
const ConceptScheme = ({
- pageContext: { node: conceptScheme, embed, language, customDomain },
+ pageContext: { node: conceptScheme, embed, customDomain },
}) => {
- return (
-
- {
- /*
- we use embed here for embedding hashURI concepts
- */
- embed &&
- embed.map((concept) => (
-
- ))
- }
-
-
{i18n(language)(conceptScheme.title)}
-
-
- {conceptScheme.description && (
-
- {i18n(language)(conceptScheme.description)}
-
- )}
+ const { data } = useSkoHubContext()
+ const [language, setLanguage] = useState("")
+ useEffect(() => {
+ setLanguage(data.selectedLanguage)
+ }, [data?.selectedLanguage])
+
+ const pathname = useLocation()
+
+ // got some hash uri to show
+ if (pathname.hash) {
+ const filtered = embed.filter((c) => c.json.id.endsWith(pathname.hash))
+ return (
+
+
+
+ )
+ } else {
+ return (
+
+
+
{i18n(language)(conceptScheme.title)}
+
+
+ {conceptScheme.description && (
+
+ {i18n(language)(conceptScheme.description)}
+
+ )}
+
-
- )
+ )
+ }
}
export default ConceptScheme
diff --git a/src/components/header.jsx b/src/components/header.jsx
index 65558742..9f84a729 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -1,12 +1,12 @@
import React, { useEffect, useState } from "react"
import { css } from "@emotion/react"
-import { useLocation } from "@gatsbyjs/reach-router"
import { Link, withPrefix } from "gatsby"
-import { getFilePath, getLinkPath, replaceFilePathInUrl } from "../common"
+import { getFilePath } from "../common"
import { useSkoHubContext } from "../context/Context.jsx"
import { getConfigAndConceptSchemes } from "../hooks/configAndConceptSchemes"
+import { getUserLang } from "../hooks/getUserLanguage"
-const Header = ({ siteTitle, languages, language }) => {
+const Header = ({ siteTitle }) => {
const { config, conceptSchemes: conceptSchemesData } =
getConfigAndConceptSchemes()
const { data, updateState } = useSkoHubContext()
@@ -73,7 +73,8 @@ const Header = ({ siteTitle, languages, language }) => {
margin: 0 0 0 5px;
display: inline;
- a {
+ button {
+ background: none;
display: inline-block;
padding: 5px;
color: ${config.colors.skoHubMiddleGrey};
@@ -87,6 +88,7 @@ const Header = ({ siteTitle, languages, language }) => {
}
.currentLanguage {
+ color: black;
font-weight: bold;
display: inline-block;
padding: 5px;
@@ -96,69 +98,41 @@ const Header = ({ siteTitle, languages, language }) => {
}
}
`
+ const [languages, setLanguages] = useState([])
+ const [language, setLanguage] = useState("")
- const [langs, setLangs] = useState(new Set())
- const pathName = useLocation().pathname.slice(0, -8)
+ // set page language
+ useEffect(() => {
+ if (typeof languages !== "undefined" && languages.length) {
+ if (!data.selectedLanguage) {
+ const userLang = getUserLang({
+ availableLanguages: languages,
+ })
+ setLanguage(userLang)
+ // updateState({ ...data, selectedLanguage: userLang })
+ } else {
+ setLanguage(data.selectedLanguage)
+ }
+ }
+ }, [data])
- /**
- * To display the concept scheme title in the header
- * we have to retrieve concept scheme info in this component.
- * We do this by getting the path of the component and looking up
- * its information in the JSON data
- * */
+ // Set Languages
useEffect(() => {
- fetch(pathName + ".json")
- .then((response) => response.json())
- .then(async (r) => {
- if (r.type === "ConceptScheme") {
- updateState({ ...data, currentScheme: r })
- setLangs(() => new Set(conceptSchemesData[r.id].languages))
- } else if (r.type === "Concept") {
- // FIXME how to handle inScheme as array? Currently we fetch the first scheme
- // this could also be cached in local storage but that might also be a bit overkill
- const cs = r.inScheme[0]
- Object.keys(data.currentScheme).length === 0 &&
- updateState({ ...data, currentScheme: cs })
- setLangs(() => new Set(conceptSchemesData[cs.id].languages))
- } else if (r.type === "Collection") {
- // members of a collection can either be skos:Concepts or skos:Collection
- // so we need to check each member till we find a concept
- // from which we can derive the languages of the concept scheme
- for (const member of r.member) {
- const path = replaceFilePathInUrl(
- pathName,
- member.id,
- "json",
- config.customDomain
- )
- const res = await (await fetch(path)).json()
- const cs = res.inScheme[0]
- if (res.type === "Concept") {
- updateState({ ...data, currentScheme: cs })
- setLangs(() => new Set(conceptSchemesData[cs.id].languages))
- break
- }
- }
- } else {
- languages.forEach((l) => setLangs((prev) => new Set(prev.add(l))))
- }
- })
- .catch((err) => {
- /* FIXME Currently there is no general index.json
- * that we can use to retrieve languages when using header on the
- * index page so we need to set languages hard
- */
- if (typeof languages !== "undefined") {
- languages.forEach((l) => setLangs((prev) => new Set(prev.add(l))))
- }
- })
- }, [pathName, languages])
+ if (!data?.currentScheme?.id) {
+ setLanguages(data.languages)
+ } else {
+ setLanguages(conceptSchemesData[data.currentScheme.id].languages)
+ }
+ }, [data])
return (