Make footer links configurable #29

Author: Phu2

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

@@ -7,6 +7,8 @@ import { getConfigAndConceptSchemes } from "../hooks/configAndConceptSchemes"
 const Footer = () => {
   const { config } = getConfigAndConceptSchemes()
 
+  //console.log("CONFIG:", config)
+
   const style = css`
     background: ${config.colors.skoHubMiddleColor};
     color: ${config.colors.skoHubWhite};
@@ -46,6 +48,10 @@ const Footer = () => {
       }
     }
   `
+
+  // Get links from config.yaml, if available
+  const links = config?.footer?.links || []
+
   return (
     <footer css={style}>
       <div className="footerContent">
@@ -61,25 +67,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