Bibdk2021 2787 frontepage and topbar

src/components/base/logo/Logo.js

@@ -1,11 +1,10 @@
-import LogoWithText from "./logo_text.svg";
 import PropTypes from "prop-types";
 import styles from "./Logo.module.css";
 import Link from "@/components/base/link";
 import { cyKey } from "@/utils/trim";
-import Translate from "@/components/base/translate";
-import cx from "classnames";
 import useTestUser from "@/components/hooks/useTestUser";
+import Image from "next/image";
+import useAgencyFromSubdomain from "@/components/hooks/useSubdomainToAgency";
 
 /**
  * Mark when test user mode is active
@@ -36,7 +35,9 @@ function TestUserActive() {
  *  Color of text and svg logo
  * @returns {React.JSX.Element}
  */
-export default function Logo({ href = "/", type = "BLUE", ...props }) {
+export default function Logo({ href = "/", ...props }) {
+  const { logoPath } = useAgencyFromSubdomain();
+
   if (props.skeleton) {
     return <Logo {...props} />;
   }
@@ -50,14 +51,7 @@ export default function Logo({ href = "/", type = "BLUE", ...props }) {
       })}
     >
       <div className={styles.display_flex}>
-        <LogoWithText
-          style={{ color: type === "BLUE" ? "var(--blue)" : "var(--white)" }}
-          className={cx({
-            [styles.defaultLogo_Blue]: type === "BLUE",
-            [styles.defaultLogo_White]: type === "WHITE",
-          })}
-          alt={Translate({ context: "logo", label: "default_logo_text" })}
-        />
+        <Image src={logoPath} alt="logo" width={200} height={50} />
       </div>
       <TestUserActive />
     </Link>
@@ -66,6 +60,5 @@ export default function Logo({ href = "/", type = "BLUE", ...props }) {
 
 // PropTypes for Button component
 Logo.propTypes = {
-  type: PropTypes.oneOf(["BLUE", "WHITE"]),
   href: PropTypes.string,
 };

src/components/base/logo/Logo.module.css

@@ -11,15 +11,3 @@
     padding-top: var(--pt1);
   }
 }
-
-.defaultLogo_Blue {
-  color: var(--blue);
-}
-
-.defaultLogo_White {
-  color: var(--white);
-}
-
-.defaultLogo_Blue *[data-text="true"] {
-  color: var(--mine-shaft);
-}

src/components/base/translate/Translate.json

@@ -570,12 +570,12 @@
         "en": "Skip to content"
       },
       "heroTxt": {
-        "da": "Søg, find, lån",
-        "en": "Search, find, borrow"
+        "da": "Let søgning for elever og lærere",
+        "en": "Easy search for students and teachers"
       },
       "readMore": {
-        "da": "Bibliotek.dk viser materialer fra alle danske biblioteker, som du nemt kan låne og aflevere på dit bibliotek.",
-        "en": "Materials from all danish libraries, easy to pickup and deliver at your local library"
+        "da": "GymnasieSøg er en enkel grænseflade, der gør det let at søge efter bøger, artikler og gymnasierelevante kilder ét sted.",
+        "en": "GymnasieSøg is a simple interface that makes it easy to search for books, articles and sources relevant to high school students in one place."
       },
       "searchButton": {
         "da": "Søg",
@@ -915,8 +915,8 @@
     },
     "footer": {
       "hvad_er_bibliotek_dk": {
-        "da": "Bibliotek.dk er en samlet indgang til alle danske bibliotekers materialer og til hvad der udgives i Danmark. Du kan bestille materialer og så hente og låne på dit eget bibliotek. \n Du kan bruge Bibliotek.dk til at søge frem, hvad der er udgivet af bøger, musik, tidsskrifter, artikler, e-bøger, lydbøger osv. Bibliotek.dk er altså ikke et fysisk bibliotek, men en database og service over hvad der findes på danske offentlige biblioteker, som du kan bestille og få leveret til dit lokale bibliotek.",
-        "en": "What is bibliotek.dk"
+        "da": "StudieSøg er en enkel søgeflade designet til gymnasieelever og lærere, som gør det nemt at søge efter bøger og artikler. Med funktioner som filtrering på sprog og emne samt adgang til artikler via Infomedia, hvis abonnement er tilgængeligt, hjælper GymnasieSøg med at finde relevant materiale hurtigt. ",
+        "en": "StudieSøg is a simple search interface designed for high school students and teachers, making it easy to search for books and articles. With features such as filtering by language and subject, as well as access to articles via Infomedia, if available, GymnasieSøg helps find relevant material quickly."
       },
       "contact": {
         "da": "Kontakt",
@@ -2264,6 +2264,10 @@
       "menu": {
         "da": "Menu",
         "en": "Menu"
+      },
+      "english-danish": {
+        "da": "English",
+        "en": "Dansk"
       }
     },
     "search": {

src/components/footer/Footer.js

@@ -7,23 +7,14 @@ import Translate from "@/components/base/translate";
 import Language from "@/components/base/language";
 import Link from "@/components/base/link";
 import styles from "./Footer.module.css";
-import Logo from "@/components/base/logo/Logo";
-import { MATERIAL_PAGES } from "@/components/header";
+import useAgencyFromSubdomain from "@/components/hooks/useSubdomainToAgency";
 
 /** @file
  * Footer
  * holds a section with logo and three columns with description and links
  * well section .. rather a copy paste from the Section component
  */
 
-/**
- * The logo @see icons/logowhite.svg
- * @returns {React.JSX.Element}
- */
-const FooterLogo = () => {
-  return <Logo type="WHITE" />;
-};
-
 /**
  * First column holds a description of bibliotek.dk and a link to administer
  * cookie settings
@@ -58,11 +49,19 @@ const FirstColumn = () => {
  * @returns {React.JSX.Element}
  */
 const SecondColumn = () => {
+  const { agency } = useAgencyFromSubdomain();
   let label = Translate({ context: "footer", label: "contact" });
   return (
     <React.Fragment>
       <Text type="text4">{label}</Text>
       <div className={styles.spacer}></div>
+      <div className={styles.contactContainer}>
+        <Text type="text3">{agency?.agencyName}</Text>
+        <Text type="text3">{agency?.postalAddress}</Text>
+        <Text type="text3">
+          {agency?.city} {agency?.postalCode}
+        </Text>
+      </div>
       <ContactLinks />
     </React.Fragment>
   );
@@ -76,19 +75,19 @@ const ContactLinks = () => {
   // Object holding info to generate contact links * NOTICE Keys of objects are translated.
   const contact_links = {
     // find_library: { pathname: "/", query: {} },
-    about: { pathname: "/hjaelp/om-bibliotek-dk/24", query: {} },
-    help: { pathname: "/hjaelp", query: {} },
+    // about: { pathname: "/hjaelp/om-bibliotek-dk/24", query: {} },
+    // help: { pathname: "/hjaelp", query: {} },
     // press: { pathname: "/", query: {} },
-    contact: { pathname: "/hjaelp/kontakt-os/25", query: {} },
+    //  contact: { pathname: "/hjaelp/kontakt-os/25", query: {} },
     privacy: {
       pathname: "/hjaelp/privatlivspolitik-saadan-haandterer-vi-dine-data-/26",
       query: {},
     },
-    suppliers: {
-      pathname: "/artikel/leverandører/59",
-      query: {},
-    },
-    English: { pathname: "/", query: {} },
+    // suppliers: {
+    //   pathname: "/artikel/leverandører/59",
+    //   query: {},
+    // },
+    // English: { pathname: "/", query: {} },
     accessibility: {
       pathname: "https://www.was.digst.dk/bibliotek-dk",
       query: {},
@@ -141,50 +140,6 @@ const ContactLinks = () => {
   });
 };
 
-/**
- * Third column holds links to different material types
- * (don't know why it is called branches - see design)
- * @returns {React.JSX.Element}
- */
-const ThirdColumn = () => {
-  let label = Translate({ context: "footer", label: "branches" });
-  return (
-    <React.Fragment>
-      <Text type="text4" lines={1}>
-        {label}
-      </Text>
-      <div className={styles.spacer}></div>
-      <BranchLinks className={styles.padder} />
-    </React.Fragment>
-  );
-};
-
-/**
- * Generate links for materialtypes
- * Object holding info to generate links to materialtypes
- * NOTICE Keys are translated
- * @returns {React.JSX.Element}
- */
-const BranchLinks = () => {
-  return MATERIAL_PAGES.map(({ path, label }) => (
-    <div key={`link-${path}-${label}`}>
-      <Link
-        href={`/inspiration/${path}?workTypes=${label}`}
-        className={styles.footerlink}
-        border={{ bottom: { keepVisible: true } }}
-        dataCy="branchlink"
-      >
-        <Text type="text3" tag="span">
-          {Translate({
-            context: "facets",
-            label: `label-${label}`,
-          })}
-        </Text>
-      </Link>
-    </div>
-  ));
-};
-
 /**
  * Defines the footer section - one row with four columns
  * @returns {React.JSX.Element}
@@ -198,14 +153,6 @@ const FooterSection = () => {
           className={`${styles.background} `}
           data-cy="footer-section"
         >
-          <Col
-            md={{ span: 2 }}
-            xs="12"
-            className={styles.padder}
-            data-cy="footer-column"
-          >
-            <FooterLogo />
-          </Col>
           <Col
             md={{ span: 3, order: 1, offset: 1 }}
             xs={{ span: 12, order: 3 }}
@@ -215,20 +162,18 @@ const FooterSection = () => {
             <FirstColumn />
           </Col>
           <Col
-            md={{ span: 2, order: 2, offset: 1 }}
+            md={{ span: 3, order: 3, offset: 1 }}
             xs={{ span: 6, order: 1 }}
             className={styles.padder}
             data-cy="footer-column"
           >
             <SecondColumn />
           </Col>
           <Col
-            md={{ span: 3, order: 3 }}
+            md={{ span: 3, order: 2 }}
             xs={{ span: 6, order: 2 }}
             data-cy="footer-column"
-          >
-            <ThirdColumn />
-          </Col>
+          ></Col>
         </Row>
       </Container>
     </footer>

src/components/footer/Footer.module.css

@@ -48,3 +48,7 @@
     display: none;
   }
 }
+
+.contactContainer {
+  margin-top: var(--pt1);
+}

src/components/head/Head.js

@@ -3,10 +3,12 @@ import Head from "next/head";
 import useCanonicalUrl from "@/components/hooks/useCanonicalUrl";
 
 import Translate from "@/components/base/translate";
+import useAgencyFromSubdomain from "@/components/hooks/useSubdomainToAgency";
 
 export default function _Head() {
+  const { agency } = useAgencyFromSubdomain();
   const context = { context: "metadata" };
-  const pageTitle = Translate({ ...context, label: "frontpage-title" });
+  const pageTitle = agency?.name || "Studiesøg";
   const pageDescription = Translate({
     ...context,
     label: "frontpage-description",
@@ -38,7 +40,7 @@ export default function _Head() {
       <meta name="referrer" content="strict-origin-when-cross-origin" />
 
       <link rel="preconnect" href="https://moreinfo.addi.dk"></link>
-      <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+      <link rel="icon" href="/favicon.ico" sizes="any" type="image/x-icon" />
       <link rel="alternate icon" href="/favicon.ico" />
       {alternate.map(({ locale, url }) => (
         <link key={locale} rel="alternate" hreflang={locale} href={url} />