Make footer links configurable

README.md

@@ -174,6 +174,7 @@ The following customizations can be made:
 1. Changing the Logo
 1. Changing the Colors
 1. Changing the Fonts
+1. Changing the Footer Links
 
 #### Changing the Title
 
@@ -222,6 +223,18 @@ After that you have to adjust the config with the appropriate settings for `font
 You need to provide all settings for `regular` as well as `bold`.
 Otherwise SkoHub Vocabs will use the default fonts.
 
+#### Changing the Footer Links
+
+You can - and probably should - change the following links 
+
+- "Impressum" (Imprint)
+- "Datenschutz" (Privacy) 
+
+in the footer section of your Skohub website by adding a custom `footer` object to your `config.yaml`. See `config.default.yaml` for how the default links are defined. You can also add more links as desired.
+
+Currently, only the "Source" link cannot not be changed by configuration. 
+
+
 ## Adding additional properties to SkoHub Vocabs
 
 If you need additional properties beside SKOS, here is how you add them:

config.default.yaml

@@ -37,3 +37,17 @@ ui:
       font_style: "normal"
       font_weight: 700
       name: "ubuntu-v20-latin-700"
+  footer:
+    links:
+      - title: "Impressum"
+        url: "https://www.hbz-nrw.de/impressum"
+        target: "_blank"
+        rel: "noopener noreferrer"
+      - title: "Datenschutz"
+        url: "https://www.hbz-nrw.de/datenschutz"
+        target: "_blank"
+        rel: "noopener noreferrer"
+      - title: "© SkoHub"
+        url: "https://skohub.io"
+        target: "_blank"
+        rel: "noopener noreferrer"

gatsby-config.js

@@ -12,6 +12,7 @@ module.exports = {
     colors: config.colors,
     logo: config.logo,
     fonts: config.fonts,
+    footer: config.footer,
     searchableAttributes: config.searchableAttributes,
     customDomain: config.customDomain,
     failOnValidation: config.failOnValidation,

src/common.js

@@ -139,6 +139,7 @@ function loadConfig(configFile, defaultFile) {
     tokenizer: userConfig.tokenizer || defaults.tokenizer,
     colors: userConfig.ui.colors || defaults.ui.colors,
     fonts: userConfig.ui.fonts || defaults.ui.fonts,
+    footer: userConfig.ui.footer || defaults.ui.footer,
     searchableAttributes:
       userConfig.searchableAttributes || defaults.searchableAttributes,
     customDomain: userConfig.custom_domain || "",

src/components/footer.jsx

@@ -46,6 +46,10 @@ const Footer = () => {
       }
     }
   `
+
+  // Get links from config.yaml, if available
+  const links = config?.footer?.links || []
+
   return (
     <footer css={style}>
       <div className="footerContent">
@@ -61,25 +65,17 @@ const Footer = () => {
               </a>
             </li>
           )}
-          <li className="push-right">
-            <a
-              href="https://www.hbz-nrw.de/impressum"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Impressum
-            </a>
-          </li>
-          <li>
-            &copy;{" "}
-            <a
-              href="https://skohub.io"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              SkoHub
-            </a>
-          </li>
+          {links.map((link, idx) => (
+            <li key={idx} className={idx === 0 ? "push-right" : ""}>
+              <a
+                href={link.url}
+                target={link.target || undefined}
+                rel={link.rel || undefined}
+              >
+                {link.title}
+              </a>
+            </li>
+          ))}
         </ul>
       </div>
     </footer>

src/hooks/configAndConceptSchemes.js

@@ -74,6 +74,14 @@ export const getConfigAndConceptSchemes = () => {
               name
             }
           }
+          footer {
+            links {
+              title
+              url
+              target
+              rel
+            }
+          }
           searchableAttributes
           customDomain
           failOnValidation

test/config.test.js

@@ -41,6 +41,28 @@ describe("Config Parsing", () => {
           name: "alegreya-sans-v24-latin-700",
         },
       },
+      footer: {
+        links: [
+          {
+            title: "Impressum",
+            url: "https://www.hbz-nrw.de/impressum",
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+          {
+            title: "Datenschutz",
+            url: "https://www.hbz-nrw.de/datenschutz",
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+          {
+            title: "© SkoHub",
+            url: "https://skohub.io",
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+        ],
+      },
     })
   })
 

test/data/config/config.default.yaml

@@ -30,3 +30,17 @@ ui:
       font_style: "normal"
       font_weight: 700
       name: "ubuntu-v20-latin-700"
+  footer:
+    links:
+      - title: "Impressum"
+        url: "https://www.hbz-nrw.de/impressum"
+        target: "_blank"
+        rel: "noopener noreferrer"
+      - title: "Datenschutz"
+        url: "https://www.hbz-nrw.de/datenschutz"
+        target: "_blank"
+        rel: "noopener noreferrer"
+      - title: "© SkoHub"
+        url: "https://skohub.io"
+        target: "_blank"
+        rel: "noopener noreferrer"

test/data/config/config.test.yaml

@@ -26,3 +26,17 @@ ui:
       font_style: "normal"
       font_weight: 700
       name: "alegreya-sans-v24-latin-700"
+  footer:
+    links:
+      - title: "Impressum"
+        url: "https://www.hbz-nrw.de/impressum"
+        target: "_blank"
+        rel: "noopener noreferrer"
+      - title: "Datenschutz"
+        url: "https://www.hbz-nrw.de/datenschutz"
+        target: "_blank"
+        rel: "noopener noreferrer"
+      - title: "© SkoHub"
+        url: "https://skohub.io"
+        target: "_blank"
+        rel: "noopener noreferrer"