Installation

Configure the environment variables (see below) in an .env.local file.

npm install
npm run dev

Environment Variables

CSS

The frontend is using styled components and if you really need to .scss which you could import wherever it suits you.

Right now only one .scss is used /styles/global.scss which should be as little as possible. It includes all the css that is not dependend on the styled component theme. Use is as little as possible.

Please define all global css variables here.

:root {
  --color-bg: rgba(255, 255, 255, 1);
  --color-text: #000;
  --color-hl: #ff0;
  ...
}

In the folder /theme you find styled component related files. Here you have a globalstyle.ts which is used by styled component to add css to every page. In globalstyle.ts you have access to the theme with it's parametric styling abilities.

You can configure the theme in /theme/index.ts (primarily for font styling) and /theme/breakpoints.ts to define the breakpoints. Next to the more usual tablet and desktop breakpoints we make use of a narrow phone breakpoint default and a ~360px mobile

Style Componentens

Please add reusable style component. Like a in the /components/styled folder. You can aways extend these using.

const PinkButton = styled(Button)`
  background-color: pink;
`

Using SVGs

To help you with preparing the SVG we've written a little script that takes all svgs in the folder /assets/svg/original, optimizes them (saving a copy in /assets/svg/optimized) and then also converts them into BASE64 encoded strings that are saved as components into the /components/svgs/ folder. These can later be used as source for background images.

Please put all your svgs into /assets/svg/original and run the following script

./scripts/convertsvgs.sh

Use as Components You can import any svg as a component and

import Logo from "~/assets/svg/optimized/logo.svg";

export const Icon = () => {
  return (
    <div>
      <Logo fill="#ff0" width="100%" height="100%">
    </div>
  )
}

As backgrounds As Next.js can't inline SVGs directly into css background background-image: url('data:image/svg+xml,<svg ...') from a file. One has to create component to do that.

import SvgMenu from "~/components/svgs/SvgMenu";

export const SvgBackground = () => {
  return (
    <span
      className={className}
      style={{
        display: "block",
        ...
        backgroundPosition: "center center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "contain",
        backgroundImage: `url('data:image/svg+xml,${SvgMenu}')`,
      }}
    ></span>
  );
};

Use directly As last resort option you can place the <svg/> code straight into your components

export const Icon = () => {
  return (
    <div>
      <svg> ... </svg>
    </div>
  )
}

You can then make use of the generated SVGs in other component. /components/svgs/SVGBackround.tsx does give you an example.

Data Sanitazation

Never trust any html coming from the CMS or any other sources. Never directly make use of

<div
  dangerouslySetInnerHTML={{
    __html: unsafeHtmlString,
  }}
/>

always use

<SafeHtmlDiv html={type} />

<SafeHtmlSpan html={type} />

or at least use the safeHtml function before setting dangerouslySetInnerHTML

<div
  dangerouslySetInnerHTML={{
    __html: safeHtml(unsafeHtmlString),
  }}
/>

Please note some components (the ones with an html attribute)do the sanitization for you. E.g.

<Heading
  heading={fontStyle === "bold" ? "h2" : "h3"}
  html={heading}
/>

Using Images

Most images will be served from the CMS. is the helper to render them. It takes care of sizing, loading icon, and retrieving .webp images if needed.

Next.js should not be used for images coming from the CMS (as the CMS does resize and optimizes the images and next.js would just add another overhead.)

If you've got cwebp installed (via brew install webp) you can use the following script

./scripts/convertimages.sh

To convert images to the webp format.