SVG logo

src/components/organisms/Navbar/Navbar.module.scss

@@ -19,6 +19,7 @@
     height: var(--logo-height);
     width: var(--logo-width);
     align-self: center;
+    color: var(--logo-color);
 }
 
 .languageSelector {

src/components/organisms/Navbar/Navbar.tsx

@@ -1,24 +1,57 @@
 import { useRouter } from 'next/router';
 import React, { ReactElement, useContext, useState } from 'react';
 import { AppContext } from '../../../contexts/app-context/AppContext';
-import { Image, ImageLayout } from '../../primitives/Image/Image';
+import { webSettingQueryResponse } from '../../../relay/__generated__/webSettingQuery.graphql';
+import { Image } from '../../primitives/Image/Image';
 import styles from './Navbar.module.scss';
 import { Link } from '../../primitives/Link/Link';
 import { MainMenu } from '../MainMenu/MainMenu';
 
+const Logo = ({
+    logo,
+    svg,
+    homepage,
+    className,
+}: {
+    logo: NonNullable<webSettingQueryResponse['item']>['logo'] | undefined;
+    svg?: string;
+    homepage?: {
+        readonly title: string | null;
+        readonly url: string | null;
+    } | null;
+    className?: string;
+}): ReactElement | null => {
+    if (!logo) {
+        return null;
+    }
+
+    let result = null;
+    if (svg) {
+        result = <span dangerouslySetInnerHTML={{ __html: svg }}></span>;
+    } else if (logo.width && logo.height) {
+        result = <Image image={logo} />;
+    }
+
+    if (homepage) {
+        return (
+            <Link page={homepage} className={className}>
+                {result}
+            </Link>
+        );
+    }
+
+    return <span className={className}>{result}</span>;
+};
+
 const Navbar = (): ReactElement<null, 'div'> | null => {
-    const { mainMenu, logo, homepage } = useContext(AppContext);
+    const { mainMenu, logo, homepage, svgLogo } = useContext(AppContext);
     const { locale, locales } = useRouter();
 
     const [languageSelectorOpen, setLanguageSelectorOpen] = useState<boolean>(false);
 
     return (
         <div className={styles.navbar}>
-            {logo && logo.width && logo.height && (
-                <Link page={homepage || undefined} className={styles.logo}>
-                    <Image image={logo} sizes={'3rem'} />
-                </Link>
-            )}
+            <Logo logo={logo} svg={svgLogo} homepage={homepage} className={styles.logo} />
             {mainMenu && <MainMenu menu={mainMenu} />}
             {Array.isArray(locales) && locales.length > 1 ? (
                 <div className={styles.languageSelector}>

src/components/primitives/Link/Link.module.scss

@@ -1,5 +1,4 @@
 .wrapper {
-  color: inherit;
   text-decoration: underline;
 
   &:hover {

src/components/primitives/Link/Link.tsx

@@ -37,7 +37,7 @@ const Link = ({ className, href, page, params, children, target, plain, ...rest
         }
 
         return (
-            <NextLink href={href}>
+            <NextLink href={href} passHref>
                 <a className={condCls(styles.wrapper, className)} target={target} {...rest}>
                     {children}
                 </a>
@@ -54,14 +54,25 @@ const Link = ({ className, href, page, params, children, target, plain, ...rest
 
         if (plain) {
             return (
-                <a href={href} className={className}>
+                <a
+                    href={href}
+                    className={className}
+                    target={target}
+                    {...rest}
+                    title={rest.title || page.title || undefined}
+                >
                     {children || page.title}
                 </a>
             );
         }
         return (
-            <NextLink href={'/[[...slug]]'} as={href}>
-                <a className={condCls(styles.wrapper, className)} target={target} {...rest}>
+            <NextLink href={'/[[...slug]]'} as={href} passHref>
+                <a
+                    className={condCls(styles.wrapper, className)}
+                    target={target}
+                    {...rest}
+                    title={rest.title || page.title || undefined}
+                >
                     {children || page.title}
                 </a>
             </NextLink>

src/pages/[[...slug]].tsx

@@ -26,7 +26,7 @@ const PreviewToolbar = dynamic<PreviewToolbarProps>(() =>
 );
 
 const Page = (props: MyPageProps): ReactElement => {
-    const { hostname, site, page, webSetting, blocksProps, preview } = props;
+    const { hostname, site, page, webSetting, blocksProps, preview, svgLogo } = props;
     const router = useRouter();
     const locale = router.locale || router.defaultLocale;
     const currentUrl =
@@ -59,6 +59,7 @@ const Page = (props: MyPageProps): ReactElement => {
                     page,
                     site,
                     absoluteLinks: false,
+                    svgLogo,
                     ...webSetting,
                 },
             }}

src/providers/datocms/PageProvider.ts

@@ -13,11 +13,9 @@ import { appQuery } from '../../relay/__generated__/appQuery.graphql';
 import { AppQuery } from '../../relay/app';
 import { getPagePattern } from '../../lib/routing/getPagePattern';
 import { AppData } from '../../types/app';
-import { blocksContent } from '../../blocks/__generated__/blocksContent.graphql';
 import { ParsedUrlQuery } from 'querystring';
 import { getStaticParamsFromBlocks } from '../../lib/blocks/getStaticParamsFromBlocks';
 import providers from '../../providers';
-import blocks from '../../blocks';
 import { BlockType } from '../../types/block';
 
 class PageProvider extends AbstractDatoCMSProvider<
@@ -49,7 +47,13 @@ class PageProvider extends AbstractDatoCMSProvider<
             redirectPattern,
         });
 
-        return data;
+        return {
+            ...data,
+            svgLogo:
+                data.webSetting?.logo?.format === 'svg'
+                    ? await (await fetch(data.webSetting.logo.url)).text()
+                    : undefined,
+        };
     }
 
     async getStaticPaths(locale: string, blocks: Record<string, BlockType>): Promise<GetStaticPathsResult['paths']> {

src/relay/webSetting.ts

@@ -3,6 +3,7 @@ import { graphql } from 'react-relay';
 graphql`
     fragment webSettingFragment on WebSettingRecord {
         logo {
+            format
             ...appImageBaseFragment @relay(mask: false)
             responsiveImage(imgixParams: { w: 32 }) {
                 ...appResponsiveImageFragment @relay(mask: false)

src/styles/global.scss

@@ -19,6 +19,7 @@ html, body {
     --navbar-height: 5rem;
     --logo-width: 3rem;
     --logo-height: 3rem;
+    --logo-color: #f60;
     --white: #fff;
     --black: #000;
     --red: #ff0000;

src/types/app.ts

@@ -1,7 +1,9 @@
 import { ResponsiveImageType } from 'react-datocms';
 import { appQueryResponse } from '../relay/__generated__/appQuery.graphql';
 
-export type AppData = appQueryResponse;
+export type AppData = appQueryResponse & {
+    svgLogo?: string;
+};
 
 export type BaseDatoCMSProps =
     | '_createdAt'

src/types/appContext.ts

@@ -9,4 +9,5 @@ export type AppContextProps = Partial<WebSetting> & {
     currentUrl?: string;
     site?: AppData['site'];
     page?: AppData['page'];
+    svgLogo?: string;
 };