Add dc:description, add tests for meta tags in head, fix attrs passed…

… to SEO #284
skohub-io · Apr 24, 2024 · 0b8a809 · 0b8a809
1 parent 180efea
commit 0b8a809
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 24 deletions.
diff --git a/cypress/e2e/head.cy.js b/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"
+    )
+  })
+})
diff --git a/src/components/Concept.jsx b/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>

diff --git a/src/components/ConceptScheme.jsx b/src/components/ConceptScheme.jsx
@@ -17,30 +17,27 @@ const ConceptScheme = ({
   }, [data?.selectedLanguage])
 
   const pathname = useLocation()
-
+  const description = conceptScheme?.description || conceptScheme?.dcdescription
+  const title =
+    conceptScheme?.title || conceptScheme?.dctitle || 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>
-            {(conceptScheme?.title && i18n(language)(conceptScheme.title)) ||
-              (conceptScheme?.prefLabel &&
-                i18n(language)(conceptScheme.prefLabel)) ||
-              (conceptScheme?.dctitle && i18n(language)(conceptScheme.dctitle))}
-          </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>

diff --git a/src/context.js b/src/context.js
@@ -18,6 +18,10 @@ const jsonld = {
       "@id": "http://purl.org/dc/elements/1.1/title",
       "@container": "@language",
     },
+    dcdescription: {
+      "@id": "http://purl.org/dc/elements/1.1/description",
+      "@container": "@language",
+    },
     description: {
       "@id": "dct:description",
       "@container": "@language",

diff --git a/src/queries.js b/src/queries.js
@@ -157,6 +157,9 @@ module.exports.allConceptScheme = (languages) => `
           description {
             ${[...languages].join(" ")}
           }
+          dcdescription {
+            ${[...languages].join(" ")}
+          }
           hasTopConcept {
             ...ConceptFields
             narrower {

diff --git a/src/templates/App.jsx b/src/templates/App.jsx
@@ -160,19 +160,16 @@ const App = ({ pageContext, children, location }) => {
   })
 
   const toggleClick = (e) => setLabels({ ...labels, [e]: !labels[e] })
+  const title =
+    pageContext.node?.prefLabel ||
+    pageContext.node?.title ||
+    pageContext.node?.dctitle
 
   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">

diff --git a/src/types.js b/src/types.js
@@ -12,6 +12,7 @@ module.exports = (languages) => `
     dctitle: LanguageMap,
     prefLabel: LanguageMap,
     description: LanguageMap,
+    dcdescription: LanguageMap,
     hasTopConcept: [Concept] @link(from: "hasTopConcept___NODE"),
     languages: [String]
   }