Merge pull request #297 from skohub-io/284-other-attributes-for-cs

284-other-attr-for-cs

cypress/e2e/conceptSchemeAndConcept.cy.js

@@ -109,3 +109,25 @@ describe("Parsing language from URL on Concept Schemes and Concepts", () => {
     )
   })
 })
+
+describe("DC properties for describing concept scheme are working", () => {
+  it("Title is present", () => {
+    cy.visit("/w3id.org/dc/index.html", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    //header
+    cy.get(".conceptScheme > a").should("have.text", "Test Vokabular DC")
+    // concept content block
+    cy.get("h1").should("include.text", "Test Vokabular DC")
+  })
+  it("Description is present", () => {
+    cy.visit("/w3id.org/dc/index.html", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.get(".markdown").should("have.text", "Test Beschreibung DC")
+  })
+})

cypress/e2e/head.cy.js

@@ -0,0 +1,15 @@
+describe("Concept Scheme has correct head tags", () => {
+  it("has correct title", () => {
+    cy.visit("/w3id.org/index.html", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.title().should("eq", "Test Vokabular | SkoHub Vocabs")
+    cy.get(`head > meta[name="keywords"]`).should(
+      "have.attr",
+      "content",
+      "Concept, Test Vokabular"
+    )
+  })
+})

cypress/e2e/index.cy.js

@@ -6,7 +6,7 @@ describe("Main Vocab Index page", () => {
       },
     })
     // vocabs are found
-    cy.get(".centerPage > ul li").should("have.length", 7)
+    cy.get(".centerPage > ul li").should("have.length", 8)
 
     /**
      * What is tested by the existence of these links:
@@ -35,6 +35,9 @@ describe("Main Vocab Index page", () => {
     cy.findByRole("link", {
       name: "Test Vokabular in zwei Dateien",
     }).should("exist")
+    cy.findByRole("link", {
+      name: "Test Vokabular DC",
+    }).should("exist")
 
     // switch language
     cy.get(".language-menu").contains("en").click()

cypress/prepare-cypress-test.sh

@@ -9,6 +9,7 @@ cp test/data/ttl/hashURIConceptScheme.ttl \
   test/data/ttl/oneConceptSchemeTwoFiles_1.ttl \
    test/data/ttl/oneConceptSchemeTwoFiles_2.ttl \
  test/data/ttl/slashURIConceptScheme.ttl \
+ test/data/ttl/slashURIConceptSchemeDCproperties.ttl \
  test/data/ttl/systematik.ttl \
  test/data/ttl/twoConceptSchemesOneFile.ttl \
    data/

gatsby-node.js

@@ -17,6 +17,7 @@ const {
   getFilePath,
   parseLanguages,
   loadConfig,
+  replaceMultipleKeysInObject,
 } = require("./src/common")
 const context = require("./src/context")
 const queries = require("./src/queries")
@@ -145,6 +146,8 @@ exports.onPreBootstrap = async ({ createContentDigest, actions, getNode }) => {
         hasTopConcept,
         member,
         deprecated,
+        "dc:title": dc_title,
+        "dc:description": dc_description,
         ...properties
       } = graph
       const type = Array.isArray(properties.type)
@@ -204,6 +207,8 @@ exports.onPreBootstrap = async ({ createContentDigest, actions, getNode }) => {
           type,
         },
         member___NODE: (member || []).map((member) => member.id),
+        dc_title,
+        dc_description,
       }
       if (type === "Concept") {
         Object.assign(node, {})
@@ -382,17 +387,29 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
             customDomain: config.customDomain,
           },
         })
+        const jsonldConceptScheme = replaceMultipleKeysInObject(conceptScheme, [
+          ["dc_title", "dc:title"],
+          ["dc_description", "dc:description"],
+        ])
 
         createData({
           path: getFilePath(conceptScheme.id, "json", config.customDomain),
           data: JSON.stringify(
-            omitEmpty(Object.assign({}, conceptScheme, context.jsonld), null, 2)
+            omitEmpty(
+              Object.assign({}, jsonldConceptScheme, context.jsonld),
+              null,
+              2
+            )
           ),
         })
         createData({
           path: getFilePath(conceptScheme.id, "jsonld", config.customDomain),
           data: JSON.stringify(
-            omitEmpty(Object.assign({}, conceptScheme, context.jsonld), null, 2)
+            omitEmpty(
+              Object.assign({}, jsonldConceptScheme, context.jsonld),
+              null,
+              2
+            )
           ),
         })
         // create index files
@@ -406,7 +423,10 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
     conceptSchemes.data.allConceptScheme.edges.map(({ node: cs }) => ({
       id: cs.id,
       title: cs.title,
+      dc_title: cs.dc_title,
+      prefLabel: cs.prefLabel,
       description: cs.description,
+      dc_description: cs.dc_description,
       languages: Array.from(languagesByCS[cs.id]),
     }))
   )

shapes/skohub.shacl.ttl

@@ -7,9 +7,9 @@
 @prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
 @prefix skos: <http://www.w3.org/2004/02/skos/core#> .
 @prefix dct: <http://purl.org/dc/terms/> .
+@prefix dc: <http://purl.org/dc/elements/1.1/> .
 @prefix sdo: <https://schema.org> .
 @prefix vann: <http://purl.org/vocab/vann/> .
-@prefix dc: <http://purl.org/dc/elements/1.1/> .
 
 # rdfs:comment holds info with what file under ./tests/invalid/skohub.shacl.ttl
 # the constraint is tested

src/common.js

@@ -215,6 +215,32 @@ const getLanguageFromUrl = (location) => {
   return language
 }
 
+/**
+ * Replaces an oldKey against a new key
+ * @param {Object} obj
+ * @param {string} oldKey
+ * @param {string} newKey
+ * @returns {Object}
+ */
+const replaceKeyInObject = (obj, oldKey, newKey) => {
+  if (!(oldKey in obj)) return obj
+  const newObject = {}
+  delete Object.assign(newObject, obj, { [newKey]: obj[oldKey] })[oldKey]
+  return newObject
+}
+
+/**
+ * Replaces multiple keys of an object.
+ * Expects an array of arrays in the form [oldKey, newKey]
+ */
+const replaceMultipleKeysInObject = (obj, keys) => {
+  const replaced = keys.reduce(
+    (acc, val) => replaceKeyInObject(acc, val[0], val[1]),
+    obj
+  )
+  return replaced
+}
+
 module.exports = {
   i18n,
   getFilePath,
@@ -225,4 +251,6 @@ module.exports = {
   parseLanguages,
   loadConfig,
   getLanguageFromUrl,
+  replaceKeyInObject,
+  replaceMultipleKeysInObject,
 }

src/components/Concept.jsx

@@ -13,6 +13,9 @@ const Concept = ({
   const { config, conceptSchemes } = getConfigAndConceptSchemes()
   const { data } = useSkoHubContext()
   const [language, setLanguage] = useState("")
+  const definition =
+    concept?.definition || concept?.description || concept?.dcdescription
+  const title = concept?.prefLabel || concept?.title || concept?.dctitle
 
   useEffect(() => {
     setLanguage(data.selectedLanguage)
@@ -25,8 +28,7 @@ const Concept = ({
       </h1>
       <h1>
         {concept.notation && <span>{concept.notation.join(",")}&nbsp;</span>}
-        {(concept?.prefLabel && i18n(language)(concept.prefLabel)) ||
-          (concept?.title && i18n(language)(concept.title))}
+        {title && i18n(language)(title)}
       </h1>
       <ConceptURI id={concept.id} />
       <JsonLink to={getFilePath(concept.id, "json", customDomain)} />
@@ -44,11 +46,11 @@ const Concept = ({
           </ul>
         </div>
       )}
-      {concept.definition && (
+      {definition && (
         <div className="markdown">
           <h3>Definition</h3>
           <Markdown>
-            {i18n(language)(concept.definition) ||
+            {i18n(language)(definition) ||
               `*No definition in language "${language}" provided.*`}
           </Markdown>
         </div>

src/components/ConceptScheme.jsx

@@ -17,25 +17,28 @@ const ConceptScheme = ({
   }, [data?.selectedLanguage])
 
   const pathname = useLocation()
-
+  const description =
+    conceptScheme?.description || conceptScheme?.dc_description
+  const title =
+    conceptScheme?.title || conceptScheme?.dc_title || conceptScheme?.prefLabel
   // got some hash uri to show
   if (pathname.hash) {
-    const filtered = embed.filter((c) => c.json.id.endsWith(pathname.hash))
+    const filtered = embed.find((c) => c.json.id.endsWith(pathname.hash))
     return (
       <div id={getDomId(conceptScheme.id)}>
-        <Concept pageContext={{ node: filtered[0].json, language }} />
+        <Concept pageContext={{ node: filtered.json, language }} />
       </div>
     )
   } else {
     return (
       <div id={getDomId(conceptScheme.id)}>
         <div>
-          <h1>{i18n(language)(conceptScheme.title)}</h1>
+          <h1>{title && i18n(language)(title)}</h1>
           <ConceptURI id={conceptScheme.id} />
           <JsonLink to={getFilePath(conceptScheme.id, "json", customDomain)} />
-          {conceptScheme.description && (
+          {description && (
             <div className="markdown">
-              <Markdown>{i18n(language)(conceptScheme.description)}</Markdown>
+              <Markdown>{i18n(language)(description)}</Markdown>
             </div>
           )}
         </div>

src/components/header.jsx

@@ -100,6 +100,7 @@ const Header = ({ siteTitle }) => {
   `
   const [languages, setLanguages] = useState([])
   const [language, setLanguage] = useState("")
+  const [title, setTitle] = useState("")
 
   // set page language
   useEffect(() => {
@@ -125,6 +126,16 @@ const Header = ({ siteTitle }) => {
     }
   }, [data])
 
+  // set title
+  useEffect(() => {
+    const title =
+      data.currentScheme?.title?.[data.selectedLanguage] ||
+      data.currentScheme?.prefLabel?.[data.selectedLanguage] ||
+      data.currentScheme?.dc_title?.[data.selectedLanguage] ||
+      data.currentScheme?.id
+    setTitle(title)
+  }, [data])
+
   return (
     <header css={style}>
       <div className="headerContent">
@@ -158,8 +169,7 @@ const Header = ({ siteTitle }) => {
                     config.customDomain
                   )}
                 >
-                  {data.currentScheme?.title?.[data.selectedLanguage] ||
-                    data.currentScheme.id}
+                  {title}
                 </Link>
               </div>
             </div>

src/context.js

@@ -6,6 +6,7 @@ const jsonld = {
     "@vocab": "http://www.w3.org/2004/02/skos/core#",
     xsd: "http://www.w3.org/2001/XMLSchema#",
     dct: "http://purl.org/dc/terms/",
+    dc: "http://purl.org/dc/elements/1.1/",
     schema: "https://schema.org/",
     vann: "http://purl.org/vocab/vann/",
     ldp: "http://www.w3.org/ns/ldp#",
@@ -14,6 +15,14 @@ const jsonld = {
       "@id": "dct:title",
       "@container": "@language",
     },
+    "dc:title": {
+      "@id": "dc:title",
+      "@container": "@language",
+    },
+    "dc:description": {
+      "@id": "dc:description",
+      "@container": "@language",
+    },
     description: {
       "@id": "dct:description",
       "@container": "@language",

src/pages/index.js

@@ -59,6 +59,19 @@ const IndexPage = ({ location }) => {
     }
   }, [data?.languages, data?.selectedLanguage])
 
+  const getTitle = (conceptScheme) => {
+    const title =
+      i18n(language)(
+        conceptScheme?.title ||
+          conceptScheme?.prefLabel ||
+          conceptScheme?.dc_title
+      ) || conceptScheme.id
+    if (title) {
+      return title
+    }
+    return conceptScheme.id
+  }
+
   return (
     <Layout language={language}>
       <SEO title="Concept Schemes" keywords={["conceptSchemes"]} />
@@ -79,8 +92,7 @@ const IndexPage = ({ location }) => {
                 }
                 to={getFilePath(conceptScheme.id, `html`, customDomain)}
               >
-                {(conceptScheme.title && i18n(language)(conceptScheme.title)) ||
-                  conceptScheme.id}
+                {getTitle(conceptScheme)}
               </Link>
             </li>
           ))}

src/queries.js

@@ -148,9 +148,18 @@ module.exports.allConceptScheme = (languages) => `
           title {
             ${[...languages].join(" ")}
           }
+          prefLabel {
+            ${[...languages].join(" ")}
+          }
+          dc_title {
+            ${[...languages].join(" ")}
+          }
           description {
             ${[...languages].join(" ")}
           }
+          dc_description {
+            ${[...languages].join(" ")}
+          }
           hasTopConcept {
             ...ConceptFields
             narrower {

src/templates/App.jsx

@@ -158,21 +158,17 @@ const App = ({ pageContext, children, location }) => {
         inline: "nearest",
       })
   })
-
   const toggleClick = (e) => setLabels({ ...labels, [e]: !labels[e] })
+  const title =
+    pageContext.node?.prefLabel ||
+    pageContext.node?.title ||
+    pageContext.node?.dc_title
 
   return (
     <Layout>
       <SEO
-        title={i18n(pageContext.language)(
-          pageContext.node.prefLabel || pageContext.node.title
-        )}
-        keywords={[
-          "Concept",
-          i18n(pageContext.language)(
-            pageContext.node.prefLabel || pageContext.node.title
-          ),
-        ]}
+        title={i18n(language)(title)}
+        keywords={["Concept", i18n(language)(title)]}
       />
       <div className="Concept" css={style}>
         <nav className="block nav-block">