scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: run prettier --write .

Browse Source
This commit is contained in:
Arvid Norlin
2024-02-19 14:24:30 +01:00
parent 7d51124b9f
commit 8a8c463452
71 changed files with 846 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/[lang]/(preview)/layout.tsx
View File

@@ -1,19 +1,19 @@
import "../../core.css";
import "../../scandic.css";
import "../../core.css"
import "../../scandic.css"
import Footer from "@/components/Current/Footer";
import LangPopup from "@/components/Current/LangPopup";
import Script from "next/script";
import SkipToMainContent from "@/components/SkipToMainContent";
import Footer from "@/components/Current/Footer"
import LangPopup from "@/components/Current/LangPopup"
import Script from "next/script"
import SkipToMainContent from "@/components/SkipToMainContent"
import type { Metadata } from "next";
import type { LangParams, LayoutArgs } from "@/types/params";
import InitLivePreview from "@/components/Current/LivePreview";
import type { Metadata } from "next"
import type { LangParams, LayoutArgs } from "@/types/params"
import InitLivePreview from "@/components/Current/LivePreview"
export const metadata: Metadata = {
description: "New web",
title: "Scandic Hotels New Web",
};
}
export default function RootLayout({
children,

1
components/Current/Aside/Contacts/contact.module.css
View File

@@ -1,4 +1,3 @@
.highlightBlock {
padding: 10px 10px 15px;
background: #fff;

6
components/Current/Aside/Puffs/Puff/puff.module.css
View File

@@ -43,9 +43,9 @@
}
@media screen and (min-width: 740px) {
.content {
padding: 20px 0px;
}
.content {
padding: 20px 0px;
}
}
@media screen and (min-width: 950px) {

7
components/Current/Aside/Puffs/Puff/renderOptions.tsx
View File

@@ -7,7 +7,12 @@ import type { RTENext, RTEDefaultNode } from "@/types/rte/node"
import type { RenderOptions } from "@/types/rte/option"
export const renderOptions: RenderOptions = {
[RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.p]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
return (
<p key={node.uid} className={styles.p}>
{next(node.children, embeds, fullRenderOptions)}

2
components/Current/Aside/Puffs/index.tsx
View File

@@ -8,7 +8,7 @@ export default function Puffs({ puffs }: PuffsProps) {
}
return (
<>
{puffs.map(puff => (
{puffs.map((puff) => (
<Puff key={puff.node.system.uid} {...puff.node} />
))}
</>

2
components/Current/Aside/aside.module.css
View File

@@ -1,3 +1,3 @@
.wrapper {
padding: 20px 10px 5px;
padding: 20px 10px 5px;
}

68
components/Current/Blocks/List/list.module.css
View File

@@ -1,65 +1,67 @@
.title {
font-family: BrandonText-Bold,Arial,Helvetica,sans-serif;
font-size: 1.375rem;
line-height: 1.1em;
text-transform: uppercase;
font-weight: 400;
color: #483729;
margin-bottom: 1rem;
font-family: BrandonText-Bold, Arial, Helvetica, sans-serif;
font-size: 1.375rem;
line-height: 1.1em;
text-transform: uppercase;
font-weight: 400;
color: #483729;
margin-bottom: 1rem;
}
.ul {
margin-bottom: 15px;
margin-bottom: 15px;
}
.listItem {
margin-bottom: 8px;
padding-left: 1.3em;
margin-bottom: 8px;
padding-left: 1.3em;
}
.checkmark {
padding-left: 1.6em;
padding-left: 1.6em;
}
.checkmark::before, .disc::before {
position:relative;
top: 4px;
display: inline-block;
height: 0px;
width: 0px;
.checkmark::before,
.disc::before {
position: relative;
top: 4px;
display: inline-block;
height: 0px;
width: 0px;
}
.checkmark::before {
content: url('/Static/img/bullet-list-tick-birch-v2.svg');
transform: scale(.9);
left: -1.2em;
content: url("/Static/img/bullet-list-tick-birch-v2.svg");
transform: scale(0.9);
left: -1.2em;
}
.disc::before {
content: "•";
color: rgb(157, 160, 161);
font-size: 26px;
left: -0.7em;
content: "•";
color: rgb(157, 160, 161);
font-size: 26px;
left: -0.7em;
}
.link {
border-bottom: 1px dotted #00838e;
color: #00838e;
text-decoration: none;
background-color: transparent;
border-bottom: 1px dotted #00838e;
color: #00838e;
text-decoration: none;
background-color: transparent;
}
.link:active, .link:hover {
text-decoration: underline;
outline: 0;
.link:active,
.link:hover {
text-decoration: underline;
outline: 0;
}
.link:hover {
border-bottom: none;
border-bottom: none;
}
@media screen and (min-width: 950px) {
.title {
.title {
font-size: 1.625rem;
}
}

6
components/Current/Blocks/Puffs.tsx
View File

@@ -1,7 +1,3 @@
export default function Puffs() {
return (
<>
</>
)
return <></>
}

2
components/Current/Blocks/Text.tsx
View File

@@ -1,4 +1,4 @@
import JsonToHtml from "@/components/JsonToHtml";
import JsonToHtml from "@/components/JsonToHtml"
import type { TextProps } from "@/types/components/current/blocks/text"

11
components/Current/Blocks/blocks.module.css
View File

@@ -1,11 +1,10 @@
.wrapper {
background-color: #fff;
padding: 20px 10px 5px;
background-color: #fff;
padding: 20px 10px 5px;
}
@media screen and (min-width: 740px) {
.wrapper {
padding:20px 0 0;
}
.wrapper {
padding: 20px 0 0;
}
}

12
components/Current/ContentPage/contentPage.module.css
View File

@@ -1,8 +1,8 @@
.wrapper {
width: 100%;
position: relative;
z-index: 10;
padding-bottom: 50px;
background: #f3f2f1;
display: block;
width: 100%;
position: relative;
z-index: 10;
padding-bottom: 50px;
background: #f3f2f1;
display: block;
}

16
components/Current/Header/Da.tsx
View File

@@ -1,5 +1,9 @@
/* eslint-disable @next/next/no-img-element */
import { currentAboutLinks, currentSponsoringLinks, currentWifiLinks } from "@/constants/current/links"
import {
currentAboutLinks,
currentSponsoringLinks,
currentWifiLinks,
} from "@/constants/current/links"
import Desktop from "./LanguageSwitcher/Desktop"
import Mobile from "./LanguageSwitcher/Mobile"
@@ -40,7 +44,9 @@ export default function DaHeader({ pathname }: HeaderProps) {
<ul className="nav-secondary navbar-login">
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Desktop currentLanguage={currentLanguage} links={links} />
) : null}
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a
@@ -178,7 +184,9 @@ export default function DaHeader({ pathname }: HeaderProps) {
</li>
<li className="nav-primary__item hidden-medium hidden-large">
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Mobile currentLanguage={currentLanguage} links={links} />
) : null}
</li>
</ul>
</nav>
@@ -186,5 +194,5 @@ export default function DaHeader({ pathname }: HeaderProps) {
</div>
</div>
</header>
);
)
}

165
components/Current/Header/De.tsx
View File

@@ -1,4 +1,8 @@
import { currentAboutLinks, currentSponsoringLinks, currentWifiLinks } from "@/constants/current/links"
import {
currentAboutLinks,
currentSponsoringLinks,
currentWifiLinks,
} from "@/constants/current/links"
import Desktop from "./LanguageSwitcher/Desktop"
import Mobile from "./LanguageSwitcher/Mobile"
@@ -7,7 +11,8 @@ import type { HeaderProps } from "@/types/components/current/header"
import type { LanguageSwitcherLink } from "@/types/components/current/languageSwitcher"
const paths: Record<string, LanguageSwitcherLink[]> = {
"/kundenbetreuung/haufig-gestellte-fragen/nutzung-der-internetseite": currentAboutLinks,
"/kundenbetreuung/haufig-gestellte-fragen/nutzung-der-internetseite":
currentAboutLinks,
"/scandic-entdecken/wlan": currentWifiLinks,
"/sponsoring": currentSponsoringLinks,
}
@@ -21,80 +26,178 @@ export default function DeHeader({ pathname }: HeaderProps) {
<header className="header" role="banner">
<div className="offline-banner hidden">
Sie sind offline. Manche Inhalte könnten nicht aktuell sein.
<button type="button" className="reload">Neu laden</button>
<button type="button" className="reload">
Neu laden
</button>
</div>
<div className="l-section main-header navigation-bar" data-js="main-nav-bar">
<div
className="l-section main-header navigation-bar"
data-js="main-nav-bar"
>
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
<div className="l-section__inner">
<a href="https://www.scandichotels.de" className="scandic-main-page-link">Back to scandichotels.de</a>
<a
href="https://www.scandichotels.de"
className="scandic-main-page-link"
>
Back to scandichotels.de
</a>
<ul className="nav-secondary navbar-login">
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Desktop currentLanguage={currentLanguage} links={links} />
) : null}
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="https://www.scandichotels.de/hotelreservation/get-booking">Buchung ansehen/ändern</a>
<a
className="nav-secondary__item__link"
href="https://www.scandichotels.de/hotelreservation/get-booking"
>
Buchung ansehen/ändern
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="https://www.scandichotels.de/karriere-bei-scandic-hotels">Karriere bei Scandic</a>
<a
className="nav-secondary__item__link"
href="https://www.scandichotels.de/karriere-bei-scandic-hotels"
>
Karriere bei Scandic
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="https://www.scandichotels.de/geschaftsreisen">Firmenkunden</a>
<a
className="nav-secondary__item__link"
href="https://www.scandichotels.de/geschaftsreisen"
>
Firmenkunden
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="https://www.scandichotels.de/scandic-friends">Über Scandic Friends</a>
<a
className="nav-secondary__item__link"
href="https://www.scandichotels.de/scandic-friends"
>
Über Scandic Friends
</a>
</li>
</ul>
</div>
</div>
<div className="navigation-bar__main">
<div className="l-section__inner l-section__inner--small-no-padding" itemScope={undefined} itemType="http://schema.org/Organization">
<div
className="l-section__inner l-section__inner--small-no-padding"
itemScope={undefined}
itemType="http://schema.org/Organization"
>
<meta itemProp="name" content="Scandic" />
<button type="button" className="navigation-bar__main__expander" data-js="main-nav-toggler" data-target="#main-menu" aria-pressed="false">
<span className="icon-bars"></span><span className="hidden--accessible">Menu</span>
<button
type="button"
className="navigation-bar__main__expander"
data-js="main-nav-toggler"
data-target="#main-menu"
aria-pressed="false"
>
<span className="icon-bars"></span>
<span className="hidden--accessible">Menu</span>
</button>
<a id="scandic-logo" className="navigation-bar__main__logo hidden-medium " href="https://www.scandichotels.de" itemProp="url">
<span className="hidden--accessible">Back to scandichotels.de</span>
<img src="/Static/img/scandic-logotype.svg" data-js="scandiclogoimg" alt="Scandic Hotels logo" height="22" data-nosvgsrc="/Static/img/scandic-logotype.png" itemProp="logo" />
<a
id="scandic-logo"
className="navigation-bar__main__logo hidden-medium "
href="https://www.scandichotels.de"
itemProp="url"
>
<span className="hidden--accessible">
Back to scandichotels.de
</span>
<img
src="/Static/img/scandic-logotype.svg"
data-js="scandiclogoimg"
alt="Scandic Hotels logo"
height="22"
data-nosvgsrc="/Static/img/scandic-logotype.png"
itemProp="logo"
/>
</a>
<ul id="navbar-header-design" className="hidden hidden-medium hidden-large nav-primary__header">
<ul
id="navbar-header-design"
className="hidden hidden-medium hidden-large nav-primary__header"
>
<li className="nav-primary__scandicfriendslogo">
<img src="/Static/img/icons/scandic-friends/icon-scandic-friends.svg" width="35" height="35" />
<img
src="/Static/img/icons/scandic-friends/icon-scandic-friends.svg"
width="35"
height="35"
/>
</li>
</ul>
<nav>
<ul id="main-menu" className="nav-primary is-collapsed" data-collapsable="main-menu">
<li className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall" aria-hidden="true">
<a className="navigation-bar__main__logo" href="https://www.scandichotels.de">
<img src="/Static/img/scandic-logotype.svg" data-js="scandiclogoimg" alt="Scandic Hotels logo" height="22" data-nosvgsrc="/Static/img/scandic-logotype.png" />
<span className="hidden--accessible">Back to scandichotels.de</span>
<ul
id="main-menu"
className="nav-primary is-collapsed"
data-collapsable="main-menu"
>
<li
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
aria-hidden="true"
>
<a
className="navigation-bar__main__logo"
href="https://www.scandichotels.de"
>
<img
src="/Static/img/scandic-logotype.svg"
data-js="scandiclogoimg"
alt="Scandic Hotels logo"
height="22"
data-nosvgsrc="/Static/img/scandic-logotype.png"
/>
<span className="hidden--accessible">
Back to scandichotels.de
</span>
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.de/hotelsuche">Hotels & Reiseziele</a>
<a href="https://www.scandichotels.de/hotelsuche">
Hotels & Reiseziele
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.de/reisemagazin">Reisemagazin</a>
<a href="https://www.scandichotels.de/reisemagazin">
Reisemagazin
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.de/tagungen-und-events">Tagungen & Events</a>
<a href="https://www.scandichotels.de/tagungen-und-events">
Tagungen & Events
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.de/scandic-entdecken">Scandic entdecken</a>
<a href="https://www.scandichotels.de/scandic-entdecken">
Scandic entdecken
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.de/angebote-arrangements">Angebote</a>
<a href="https://www.scandichotels.de/angebote-arrangements">
Angebote
</a>
</li>
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
<a href="https://www.scandichotels.de/scandic-friends">Über Scandic Friends</a>
<a href="https://www.scandichotels.de/scandic-friends">
Über Scandic Friends
</a>
</li>
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
<a href="https://www.scandichotels.de/geschaftsreisen">Geschäftsreisen</a>
<a href="https://www.scandichotels.de/geschaftsreisen">
Geschäftsreisen
</a>
</li>
<li className="nav-primary__item hidden-medium hidden-large">
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Mobile currentLanguage={currentLanguage} links={links} />
) : null}
</li>
</ul>
</nav>

19
components/Current/Header/En.tsx
View File

@@ -1,5 +1,9 @@
/* eslint-disable @next/next/no-img-element */
import { currentAboutLinks, currentSponsoringLinks, currentWifiLinks } from "@/constants/current/links"
import {
currentAboutLinks,
currentSponsoringLinks,
currentWifiLinks,
} from "@/constants/current/links"
import Desktop from "./LanguageSwitcher/Desktop"
import Mobile from "./LanguageSwitcher/Mobile"
@@ -8,7 +12,8 @@ import type { LanguageSwitcherLink } from "@/types/components/current/languageSw
import type { HeaderProps } from "@/types/components/current/header"
const paths: Record<string, LanguageSwitcherLink[]> = {
"/customer-service/frequently-asked-questions/using-the-website": currentAboutLinks,
"/customer-service/frequently-asked-questions/using-the-website":
currentAboutLinks,
"/explore-scandic/wifi": currentWifiLinks,
"/sponsoring": currentSponsoringLinks,
}
@@ -40,7 +45,9 @@ export default function EnHeader({ pathname }: HeaderProps) {
<ul className="nav-secondary navbar-login">
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Desktop currentLanguage={currentLanguage} links={links} />
) : null}
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a
@@ -175,7 +182,9 @@ export default function EnHeader({ pathname }: HeaderProps) {
</li>
<li className="nav-primary__item hidden-medium hidden-large">
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Mobile currentLanguage={currentLanguage} links={links} />
) : null}
</li>
</ul>
</nav>
@@ -183,5 +192,5 @@ export default function EnHeader({ pathname }: HeaderProps) {
</div>
</div>
</header>
);
)
}

19
components/Current/Header/Fi.tsx
View File

@@ -1,5 +1,9 @@
/* eslint-disable @next/next/no-img-element */
import { currentAboutLinks, currentSponsoringLinks, currentWifiLinks } from "@/constants/current/links"
import {
currentAboutLinks,
currentSponsoringLinks,
currentWifiLinks,
} from "@/constants/current/links"
import Desktop from "./LanguageSwitcher/Desktop"
import Mobile from "./LanguageSwitcher/Mobile"
@@ -8,7 +12,8 @@ import type { LanguageSwitcherLink } from "@/types/components/current/languageSw
import type { HeaderProps } from "@/types/components/current/header"
const paths: Record<string, LanguageSwitcherLink[]> = {
"/asiakaspalvelu/usein-kysytyt-kysymykset/tietoja-internetsivuista": currentAboutLinks,
"/asiakaspalvelu/usein-kysytyt-kysymykset/tietoja-internetsivuista":
currentAboutLinks,
"/koe-scandic/maksuton-internetyhteys": currentSponsoringLinks,
"/scandic-entdecken/wlan": currentWifiLinks,
}
@@ -40,7 +45,9 @@ export default function FiHeader({ pathname }: HeaderProps) {
<ul className="nav-secondary navbar-login">
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Desktop currentLanguage={currentLanguage} links={links} />
) : null}
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a
@@ -177,7 +184,9 @@ export default function FiHeader({ pathname }: HeaderProps) {
</li>
<li className="nav-primary__item hidden-medium hidden-large">
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Mobile currentLanguage={currentLanguage} links={links} />
) : null}
</li>
</ul>
</nav>
@@ -185,5 +194,5 @@ export default function FiHeader({ pathname }: HeaderProps) {
</div>
</div>
</header>
);
)
}

4
components/Current/Header/LanguageSwitcher/Desktop.tsx
View File

@@ -1,4 +1,4 @@
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher";
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
export default function Desktop({
currentLanguage,
@@ -33,5 +33,5 @@ export default function Desktop({
))}
</ul>
</div>
);
)
}

20
components/Current/Header/LanguageSwitcher/Mobile.tsx
View File

@@ -1,15 +1,25 @@
import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
export default function Mobile({ currentLanguage, links }: LanguageSwitcherProps) {
export default function Mobile({
currentLanguage,
links,
}: LanguageSwitcherProps) {
return (
<div className="navbar-language-selector">
<button className="navbar-language-selector__toggler " data-js="collapsible-toggler" data-target="language-menu" aria-pressed="false">
{currentLanguage} <span className="navbar-language-selector__toggler__arrow"></span><span className="hidden--accessible">Choose language</span>
<button
className="navbar-language-selector__toggler "
data-js="collapsible-toggler"
data-target="language-menu"
aria-pressed="false"
>
{currentLanguage}{" "}
<span className="navbar-language-selector__toggler__arrow"></span>
<span className="hidden--accessible">Choose language</span>
</button>
<ul className="is-collapsed" data-collapsable="language-menu">
{links.map(link => (
{links.map((link) => (
<li
className={`navbar-language-selector__item ${currentLanguage === link.title ? 'is-active' : ''}`}
className={`navbar-language-selector__item ${currentLanguage === link.title ? "is-active" : ""}`}
key={link.href}
>
<a href={link.href}>{link.title}</a>

158
components/Current/Header/No.tsx
View File

@@ -1,4 +1,8 @@
import { currentAboutLinks, currentSponsoringLinks, currentWifiLinks } from "@/constants/current/links"
import {
currentAboutLinks,
currentSponsoringLinks,
currentWifiLinks,
} from "@/constants/current/links"
import Desktop from "./LanguageSwitcher/Desktop"
import Mobile from "./LanguageSwitcher/Mobile"
@@ -21,77 +25,173 @@ export default function NoHeader({ pathname }: HeaderProps) {
<header className="header" role="banner">
<div className="offline-banner hidden">
Du er offline. Noe innhold kan være utdatert.
<button type="button" className="reload">Last inn på nytt</button>
<button type="button" className="reload">
Last inn på nytt
</button>
</div>
<div className="l-section main-header navigation-bar" data-js="main-nav-bar">
<div
className="l-section main-header navigation-bar"
data-js="main-nav-bar"
>
<div className="navigation-bar__top navigation-bar__top--ghostwhite-light">
<div className="l-section__inner">
<a href="https://www.scandichotels.no" className="scandic-main-page-link">Tilbake til scandichotels.no</a>
<a
href="https://www.scandichotels.no"
className="scandic-main-page-link"
>
Tilbake til scandichotels.no
</a>
<ul className="nav-secondary navbar-login">
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Desktop currentLanguage={currentLanguage} links={links} />
) : null}
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="https://www.scandichotels.no/hotelreservation/get-booking">Vis/Avbestill din booking</a>
<a
className="nav-secondary__item__link"
href="https://www.scandichotels.no/hotelreservation/get-booking"
>
Vis/Avbestill din booking
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="https://www.scandichotels.no/jobb-hos-oss/ledige-stillinger">Jobb hos oss</a>
<a
className="nav-secondary__item__link"
href="https://www.scandichotels.no/jobb-hos-oss/ledige-stillinger"
>
Jobb hos oss
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="https://www.scandichotels.no/for-bedrifter">For bedrifter</a>
<a
className="nav-secondary__item__link"
href="https://www.scandichotels.no/for-bedrifter"
>
For bedrifter
</a>
</li>
<li className=" hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a className="nav-secondary__item__link" href="https://www.scandichotels.no/scandic-friends">Om Scandic Friends</a>
<a
className="nav-secondary__item__link"
href="https://www.scandichotels.no/scandic-friends"
>
Om Scandic Friends
</a>
</li>
</ul>
</div>
</div>
<div className="navigation-bar__main">
<div className="l-section__inner l-section__inner--small-no-padding" itemScope={undefined} itemType="http://schema.org/Organization">
<div
className="l-section__inner l-section__inner--small-no-padding"
itemScope={undefined}
itemType="http://schema.org/Organization"
>
<meta itemProp="name" content="Scandic" />
<button type="button" className="navigation-bar__main__expander" data-js="main-nav-toggler" data-target="#main-menu" aria-pressed="false">
<span className="icon-bars"></span><span className="hidden--accessible">Menu</span>
<button
type="button"
className="navigation-bar__main__expander"
data-js="main-nav-toggler"
data-target="#main-menu"
aria-pressed="false"
>
<span className="icon-bars"></span>
<span className="hidden--accessible">Menu</span>
</button>
<a id="scandic-logo" className="navigation-bar__main__logo hidden-medium " href="https://www.scandichotels.no" itemProp="url">
<span className="hidden--accessible">Tilbake til scandichotels.no</span>
<img src="/Static/img/scandic-logotype.svg" data-js="scandiclogoimg" alt="Scandic Hotels logo" height="22" data-nosvgsrc="/Static/img/scandic-logotype.png" itemProp="logo" />
<a
id="scandic-logo"
className="navigation-bar__main__logo hidden-medium "
href="https://www.scandichotels.no"
itemProp="url"
>
<span className="hidden--accessible">
Tilbake til scandichotels.no
</span>
<img
src="/Static/img/scandic-logotype.svg"
data-js="scandiclogoimg"
alt="Scandic Hotels logo"
height="22"
data-nosvgsrc="/Static/img/scandic-logotype.png"
itemProp="logo"
/>
</a>
<ul id="navbar-header-design" className="hidden hidden-medium hidden-large nav-primary__header">
<ul
id="navbar-header-design"
className="hidden hidden-medium hidden-large nav-primary__header"
>
<li className="nav-primary__scandicfriendslogo">
<img src="/Static/img/icons/scandic-friends/icon-scandic-friends.svg" width="35" height="35" />
<img
src="/Static/img/icons/scandic-friends/icon-scandic-friends.svg"
width="35"
height="35"
/>
</li>
</ul>
<nav>
<ul id="main-menu" className="nav-primary is-collapsed" data-collapsable="main-menu">
<li className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall" aria-hidden="true">
<a className="navigation-bar__main__logo" href="https://www.scandichotels.no">
<img src="/Static/img/scandic-logotype.svg" data-js="scandiclogoimg" alt="Scandic Hotels logo" height="22" data-nosvgsrc="/Static/img/scandic-logotype.png" />
<span className="hidden--accessible">Tilbake til scandichotels.no</span>
<ul
id="main-menu"
className="nav-primary is-collapsed"
data-collapsable="main-menu"
>
<li
className="nav-primary__item nav-primary__item--primary hidden-large hidden-small hidden-xsmall hidden-xxsmall"
aria-hidden="true"
>
<a
className="navigation-bar__main__logo"
href="https://www.scandichotels.no"
>
<img
src="/Static/img/scandic-logotype.svg"
data-js="scandiclogoimg"
alt="Scandic Hotels logo"
height="22"
data-nosvgsrc="/Static/img/scandic-logotype.png"
/>
<span className="hidden--accessible">
Tilbake til scandichotels.no
</span>
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.no/hotell">Hoteller og destinasjoner</a>
<a href="https://www.scandichotels.no/hotell">
Hoteller og destinasjoner
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.no/reiseguider">Reiseguider</a>
<a href="https://www.scandichotels.no/reiseguider">
Reiseguider
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.no/moter-og-konferanser">Møter og konferanser</a>
<a href="https://www.scandichotels.no/moter-og-konferanser">
Møter og konferanser
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.no/utforsk-scandic">Utforsk Scandic</a>
<a href="https://www.scandichotels.no/utforsk-scandic">
Utforsk Scandic
</a>
</li>
<li className="nav-primary__item nav-primary__item--primary ">
<a href="https://www.scandichotels.no/hotelltilbud">Tilbud</a>
</li>
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
<a href="https://www.scandichotels.no/scandic-friends">Om Scandic Friends</a>
<a href="https://www.scandichotels.no/scandic-friends">
Om Scandic Friends
</a>
</li>
<li className="nav-primary__item nav-primary__item--secondary hidden-medium hidden-large ">
<a href="https://www.scandichotels.no/for-bedrifter">For bedrifter</a>
<a href="https://www.scandichotels.no/for-bedrifter">
For bedrifter
</a>
</li>
<li className="nav-primary__item hidden-medium hidden-large">
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Mobile currentLanguage={currentLanguage} links={links} />
) : null}
</li>
</ul>
</nav>

16
components/Current/Header/Sv.tsx
View File

@@ -1,5 +1,9 @@
/* eslint-disable @next/next/no-img-element */
import { currentAboutLinks, currentSponsoringLinks, currentWifiLinks } from "@/constants/current/links"
import {
currentAboutLinks,
currentSponsoringLinks,
currentWifiLinks,
} from "@/constants/current/links"
import Desktop from "./LanguageSwitcher/Desktop"
import Mobile from "./LanguageSwitcher/Mobile"
@@ -40,7 +44,9 @@ export default function SvHeader({ pathname }: HeaderProps) {
<ul className="nav-secondary navbar-login">
<li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
{links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Desktop currentLanguage={currentLanguage} links={links} />
) : null}
</li>
<li className="hidden-xxsmall hidden-xsmall hidden-small nav-secondary__item">
<a
@@ -178,7 +184,9 @@ export default function SvHeader({ pathname }: HeaderProps) {
</li>
<li className="nav-primary__item hidden-medium hidden-large">
{links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
{links ? (
<Mobile currentLanguage={currentLanguage} links={links} />
) : null}
</li>
</ul>
</nav>
@@ -186,5 +194,5 @@ export default function SvHeader({ pathname }: HeaderProps) {
</div>
</div>
</header>
);
)
}

32
components/Current/Header/index.tsx
View File

@@ -1,30 +1,30 @@
import { langEnum } from "@/types/lang";
import { langEnum } from "@/types/lang"
import Da from "./Da";
import De from "./De";
import En from "./En";
import Fi from "./Fi";
import No from "./No";
import Sv from "./Sv";
import Da from "./Da"
import De from "./De"
import En from "./En"
import Fi from "./Fi"
import No from "./No"
import Sv from "./Sv"
import type { HeaderProps } from "@/types/components/current/header";
import { LangParams } from "@/types/params";
import type { HeaderProps } from "@/types/components/current/header"
import { LangParams } from "@/types/params"
export default function Header({ lang, pathname }: LangParams & HeaderProps) {
switch (lang) {
case langEnum.sv:
return <Sv pathname={pathname} />;
return <Sv pathname={pathname} />
case langEnum.fi:
return <Fi pathname={pathname} />;
return <Fi pathname={pathname} />
case langEnum.en:
return <En pathname={pathname} />;
return <En pathname={pathname} />
case langEnum.da:
return <Da pathname={pathname} />;
return <Da pathname={pathname} />
case langEnum.de:
return <De pathname={pathname} />;
return <De pathname={pathname} />
case langEnum.no:
return <No pathname={pathname} />;
return <No pathname={pathname} />
default:
return null;
return null
}
}

54
components/Current/LangPopup/index.tsx
View File

@@ -1,48 +1,48 @@
import { localeToLang } from "@/constants/locales";
import { type Lang, langEnum } from "@/types/lang";
import { headers } from "next/headers";
import { localeToLang } from "@/constants/locales"
import { type Lang, langEnum } from "@/types/lang"
import { headers } from "next/headers"
export default function LangPopup({ lang }: { lang: Lang }) {
const headersList = headers();
const preferedLang = headersList.get("Accept-Language") ?? "";
const headersList = headers()
const preferedLang = headersList.get("Accept-Language") ?? ""
const possibleLocales = Object.keys(localeToLang);
const possibleLocales = Object.keys(localeToLang)
if (!possibleLocales.includes(preferedLang)) {
return null;
return null
}
//@ts-ignore
const langOfChoice: Lang = localeToLang[preferedLang];
const langOfChoice: Lang = localeToLang[preferedLang]
if (langOfChoice === lang) {
return null;
return null
}
let language = "";
let viewIn = "";
let language = ""
let viewIn = ""
switch (langOfChoice) {
case langEnum.de:
language = "Deutsch";
viewIn = "Ansicht in";
break;
language = "Deutsch"
viewIn = "Ansicht in"
break
case langEnum.da:
language = "Dansk";
viewIn = "Se in";
break;
language = "Dansk"
viewIn = "Se in"
break
case langEnum.fi:
language = "Suomi";
viewIn = "Katso in";
break;
language = "Suomi"
viewIn = "Katso in"
break
case langEnum.no:
language = "Norsk";
viewIn = "Se in";
break;
language = "Norsk"
viewIn = "Se in"
break
case langEnum.sv:
language = "Svenska";
viewIn = "Visa in";
break;
language = "Svenska"
viewIn = "Visa in"
break
}
return (
@@ -89,5 +89,5 @@ export default function LangPopup({ lang }: { lang: Lang }) {
</a>
</div>
</div>
);
)
}

12
components/Current/LivePreview/index.tsx
View File

@@ -1,14 +1,14 @@
"use client";
"use client"
import { useEffect } from "react"
import ContentstackLivePreview from "@contentstack/live-preview-utils"
export default function InitLivePreview() {
useEffect(() => {
if (!ContentstackLivePreview.livePreview) {
ContentstackLivePreview.init()
}
}, []);
if (!ContentstackLivePreview.livePreview) {
ContentstackLivePreview.init()
}
}, [])
return null;
return null
}

123
components/Current/LoadingSpinner/loading.module.css
View File

@@ -1,31 +1,31 @@
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.spinner {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
width: 80px;
height: 80px;
}
.spinner div {
transform-origin: 40px 40px;
animation: spinnerAnimation 1.2s linear infinite;
transform-origin: 40px 40px;
animation: spinnerAnimation 1.2s linear infinite;
}
.spinner div::after {
content: " ";
display: block;
position: absolute;
top: 3px;
left: 37px;
width: 6px;
height: 18px;
border-radius: 20%;
top: 3px;
left: 37px;
width: 6px;
height: 18px;
border-radius: 20%;
background: red;
}
@@ -34,57 +34,56 @@
animation-delay: -1.1s;
}
.spinner div:nth-child(2) {
transform: rotate(30deg);
animation-delay: -1s;
}
.spinner div:nth-child(3) {
transform: rotate(60deg);
animation-delay: -0.9s;
}
.spinner div:nth-child(4) {
transform: rotate(90deg);
animation-delay: -0.8s;
}
.spinner div:nth-child(5) {
transform: rotate(120deg);
animation-delay: -0.7s;
}
.spinner div:nth-child(6) {
transform: rotate(150deg);
animation-delay: -0.6s;
}
.spinner div:nth-child(7) {
transform: rotate(180deg);
animation-delay: -0.5s;
}
.spinner div:nth-child(8) {
transform: rotate(210deg);
animation-delay: -0.4s;
}
.spinner div:nth-child(9) {
transform: rotate(240deg);
animation-delay: -0.3s;
}
.spinner div:nth-child(10) {
transform: rotate(270deg);
animation-delay: -0.2s;
}
.spinner div:nth-child(11) {
transform: rotate(300deg);
animation-delay: -0.1s;
}
.spinner div:nth-child(12) {
transform: rotate(330deg);
animation-delay: 0s;
}
.spinner div:nth-child(2) {
transform: rotate(30deg);
animation-delay: -1s;
}
.spinner div:nth-child(3) {
transform: rotate(60deg);
animation-delay: -0.9s;
}
.spinner div:nth-child(4) {
transform: rotate(90deg);
animation-delay: -0.8s;
}
.spinner div:nth-child(5) {
transform: rotate(120deg);
animation-delay: -0.7s;
}
.spinner div:nth-child(6) {
transform: rotate(150deg);
animation-delay: -0.6s;
}
.spinner div:nth-child(7) {
transform: rotate(180deg);
animation-delay: -0.5s;
}
.spinner div:nth-child(8) {
transform: rotate(210deg);
animation-delay: -0.4s;
}
.spinner div:nth-child(9) {
transform: rotate(240deg);
animation-delay: -0.3s;
}
.spinner div:nth-child(10) {
transform: rotate(270deg);
animation-delay: -0.2s;
}
.spinner div:nth-child(11) {
transform: rotate(300deg);
animation-delay: -0.1s;
}
.spinner div:nth-child(12) {
transform: rotate(330deg);
animation-delay: 0s;
}
@keyframes spinnerAnimation {
0% {
opacity: 1;
}
opacity: 1;
}
100% {
opacity: 0;
}
opacity: 0;
}
}

5
components/Current/Preamble/Breadcrumbs/breadcrumbs.module.css
View File

@@ -26,7 +26,7 @@
.currentPage,
.li {
font-size: .875rem;
font-size: 0.875rem;
line-height: 1.4em;
}
@@ -36,8 +36,7 @@
margin-right: 4px;
}
@media (min-width: 740px){
@media (min-width: 740px) {
.nav {
display: block;
}

6
components/Current/Preamble/Breadcrumbs/index.tsx
View File

@@ -4,7 +4,11 @@ import styles from "./breadcrumbs.module.css"
import type { BreadcrumbsProps } from "@/types/components/current/breadcrumbs"
export default function Breadcrumbs({ breadcrumbs, parent, title }: BreadcrumbsProps) {
export default function Breadcrumbs({
breadcrumbs,
parent,
title,
}: BreadcrumbsProps) {
return (
<nav className={styles.nav}>
<ul className={styles.list}>

14
components/Current/Preamble/index.tsx
View File

@@ -7,11 +7,21 @@ import styles from "./preamble.module.css"
import type { PreambleProps } from "@/types/components/current/preamble"
export default function Preamble({ breadcrumbs, breadcrumbParent, breadcrumbTitle, preamble, title }: PreambleProps) {
export default function Preamble({
breadcrumbs,
breadcrumbParent,
breadcrumbTitle,
preamble,
title,
}: PreambleProps) {
return (
<section className={styles.container}>
<section>
<Breadcrumbs breadcrumbs={breadcrumbs} parent={breadcrumbParent} title={breadcrumbTitle} />
<Breadcrumbs
breadcrumbs={breadcrumbs}
parent={breadcrumbParent}
title={breadcrumbTitle}
/>
<h1>{title}</h1>
{preamble?.text ? (
<JsonToHtml

17
components/Current/Preamble/preamble.module.css
View File

@@ -9,7 +9,12 @@
.preamble {
color: #333;
font-family: Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;
font-family:
Helvetica Neue,
Roboto,
Helvetica,
Arial,
sans-serif;
font-size: 1.25rem;
font-weight: 300;
line-height: normal;
@@ -17,12 +22,12 @@
margin-bottom: 0;
}
@media (min-width: 740px){
@media (min-width: 740px) {
.container {
background: transparent;
padding: 30px 30px 15px;
grid-template-columns: 2fr 1fr;
max-width: 1200px;
background: transparent;
padding: 30px 30px 15px;
grid-template-columns: 2fr 1fr;
max-width: 1200px;
}
}

7
components/Current/Preamble/renderOptions.tsx
View File

@@ -7,7 +7,12 @@ import type { RTENext, RTEDefaultNode } from "@/types/rte/node"
import type { RenderOptions } from "@/types/rte/option"
export const renderOptions: RenderOptions = {
[RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.p]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
return (
<p key={node.uid} className={styles.preamble}>
{next(node.children, embeds, fullRenderOptions)}

4
components/Current/Section/index.tsx
View File

@@ -3,9 +3,7 @@ import styles from "./section.module.css"
export default function Section({ children }: React.PropsWithChildren) {
return (
<div className={styles.wrapper}>
<section className={styles.section}>
{children}
</section>
<section className={styles.section}>{children}</section>
</div>
)
}

1
components/Current/Section/section.module.css
View File

@@ -1,4 +1,3 @@
.section {
box-sizing: content-box;
margin: 0 auto;

8
components/Current/SubnavMobile.tsx
View File

@@ -2,7 +2,11 @@ import Link from "next/link"
import type { SubnavMobileProps } from "@/types/components/current/subnavMobile"
export default async function SubnavMobile({ breadcrumbs, parent, title }: SubnavMobileProps) {
export default async function SubnavMobile({
breadcrumbs,
parent,
title,
}: SubnavMobileProps) {
return (
<div className="subnav-mobile hidden-small hidden-medium hidden-large">
<nav className="u-flex">
@@ -14,7 +18,7 @@ export default async function SubnavMobile({ breadcrumbs, parent, title }: Subna
</Link>
</li>
) : null}
{breadcrumbs.edges.map(breadcrumb => (
{breadcrumbs.edges.map((breadcrumb) => (
<li className="breadcrumb-list__body" key={breadcrumb.node.url}>
<Link href={breadcrumb.node.url}>
{breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}

7
components/Image/index.tsx
View File

@@ -8,10 +8,5 @@ function imageLoader({ quality, src, width }: ImageLoaderProps) {
// Next/Image adds & instead of ? before the params
export default function Image(props: ImageProps) {
return (
<NextImage
{...props}
loader={imageLoader}
/>
)
return <NextImage {...props} loader={imageLoader} />
}

6
components/JsonToHtml/index.tsx
View File

@@ -2,7 +2,11 @@ import { nodesToHtml } from "./utils"
import type { JsonToHtmlProps } from "@/types/components/jsontohtml"
export default function JsonToHtml({ embeds, nodes, renderOptions = {} }: JsonToHtmlProps) {
export default function JsonToHtml({
embeds,
nodes,
renderOptions = {},
}: JsonToHtmlProps) {
if (!Array.isArray(nodes) || !nodes.length) {
return null
}

174
components/JsonToHtml/renderOptions.tsx
View File

@@ -9,7 +9,12 @@ import styles from "./jsontohtml.module.css"
import type { Attributes } from "@/types/rte/attrs"
import type { EmbedByUid } from "@/types/components/jsontohtml"
import type { RTENext, RTEDefaultNode, RTENode, RTERegularNode } from "@/types/rte/node"
import type {
RTENext,
RTEDefaultNode,
RTENode,
RTERegularNode,
} from "@/types/rte/node"
import type { RenderOptions } from "@/types/rte/option"
function extractPossibleAttributes(attrs: Attributes) {
@@ -30,7 +35,12 @@ function extractPossibleAttributes(attrs: Attributes) {
}
export const renderOptions: RenderOptions = {
[RTETypeEnum.a]: (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.a]: (
node: RTERegularNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
if (node.attrs.url) {
const props = extractPossibleAttributes(node.attrs)
return (
@@ -47,7 +57,12 @@ export const renderOptions: RenderOptions = {
return null
},
[RTETypeEnum.blockquote]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.blockquote]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<blockquote key={node.uid} {...props}>
@@ -56,7 +71,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.code]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.code]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<code key={node.uid} {...props}>
@@ -65,7 +85,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.embed]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.embed]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
if (node.attrs.src) {
props.src = node.attrs.src
@@ -83,7 +108,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.h1]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.h1]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<h1 key={node.uid} {...props}>
@@ -92,7 +122,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.h2]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.h2]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<h2 key={node.uid} {...props}>
@@ -101,7 +136,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.h3]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.h3]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<h3 key={node.uid} {...props}>
@@ -110,7 +150,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.h4]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.h4]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<h4 key={node.uid} {...props}>
@@ -119,7 +164,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.h5]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.h5]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<h5 key={node.uid} {...props}>
@@ -128,7 +178,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.h6]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.h6]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<h6 key={node.uid} {...props}>
@@ -141,7 +196,12 @@ export const renderOptions: RenderOptions = {
return <hr />
},
[RTETypeEnum.li]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.li]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<li key={node.uid} {...props}>
@@ -150,7 +210,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.ol]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.ol]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<ol key={node.uid} {...props}>
@@ -159,7 +224,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.p]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.p]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<p {...props} key={node.uid}>
@@ -168,7 +238,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.reference]: (node: RTENode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.reference]: (
node: RTENode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
if ("attrs" in node) {
const type = node.attrs.type
if (type === RTEItemTypeEnum.asset) {
@@ -199,7 +274,12 @@ export const renderOptions: RenderOptions = {
return null
},
[RTETypeEnum.table]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.table]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<table key={node.uid} {...props}>
@@ -208,7 +288,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.thead]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.thead]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<thead key={node.uid} {...props}>
@@ -217,7 +302,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.tbody]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.tbody]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<tbody key={node.uid} {...props}>
@@ -226,7 +316,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.tfoot]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.tfoot]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<tfoot key={node.uid} {...props}>
@@ -235,7 +330,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.tr]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.tr]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<tr key={node.uid} {...props}>
@@ -244,7 +344,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.th]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.th]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<th key={node.uid} {...props}>
@@ -253,7 +358,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.td]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.td]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<td key={node.uid} {...props}>
@@ -262,7 +372,12 @@ export const renderOptions: RenderOptions = {
)
},
[RTETypeEnum.ul]: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
[RTETypeEnum.ul]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<ul key={node.uid} {...props}>
@@ -309,7 +424,11 @@ export const renderOptions: RenderOptions = {
)
},
[RTEMarkType.classnameOrId]: (children: React.ReactNode, className?: string, id?: string) => {
[RTEMarkType.classnameOrId]: (
children: React.ReactNode,
className?: string,
id?: string
) => {
let props = {
className,
id,
@@ -331,7 +450,12 @@ export const renderOptions: RenderOptions = {
* Contentstack can return something called `default` as seen here in their
* own SDK (https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/options/default-node-options.ts#L89)
*/
default: (node: RTEDefaultNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => {
default: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => {
return next(node.children, embeds, fullRenderOptions)
},
}

20
components/JsonToHtml/utils.tsx
View File

@@ -6,22 +6,24 @@ import { RTETypeEnum } from "@/types/rte/enums"
import type { EmbedByUid } from "@/types/components/jsontohtml"
import type { Node } from "@/types/requests/utils/edges"
import type { RenderOptions } from "@/types/rte/option"
import type { RTENode, RTETextNode, RTERenderOptionComponent } from "@/types/rte/node"
import type {
RTENode,
RTETextNode,
RTERenderOptionComponent,
} from "@/types/rte/node"
import type { Embeds } from "@/types/requests/embeds"
export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
const embedsByUid = embedsArray
.reduce<EmbedByUid>((acc, embed) => {
if (embed.node.system.uid) {
acc[embed.node.system.uid] = embed
}
return acc
}, {})
const embedsByUid = embedsArray.reduce<EmbedByUid>((acc, embed) => {
if (embed.node.system.uid) {
acc[embed.node.system.uid] = embed
}
return acc
}, {})
return embedsByUid
}
export function nodeChildrenToHtml(
nodes: RTENode[],
embeds: EmbedByUid,

26
components/SkipToMainContent/index.tsx
View File

@@ -1,24 +1,24 @@
import { Lang, langEnum } from "@/types/lang";
import { Lang, langEnum } from "@/types/lang"
export default function SkipToMainContent({ lang }: { lang: Lang }) {
let message = "Skip to main content";
let message = "Skip to main content"
switch (lang) {
case langEnum.de:
message = "Direkt zum Inhalt";
break;
message = "Direkt zum Inhalt"
break
case langEnum.sv:
message = "Fortsätt till huvudinnehåll";
break;
message = "Fortsätt till huvudinnehåll"
break
case langEnum.da:
message = "Spring over og gå til hovedindhold";
break;
message = "Spring over og gå til hovedindhold"
break
case langEnum.no:
message = "Gå videre til hovedsiden";
break;
message = "Gå videre til hovedsiden"
break
case langEnum.fi:
message = "Siirry pääsisältöön";
break;
message = "Siirry pääsisältöön"
break
}
return (
@@ -27,5 +27,5 @@ export default function SkipToMainContent({ lang }: { lang: Lang }) {
{message}
</a>
</div>
);
)
}

4
constants/locales.ts
View File

@@ -1,4 +1,4 @@
import { langEnum } from "@/types/lang";
import { langEnum } from "@/types/lang"
export const localeToLang = {
en: langEnum.en,
@@ -38,4 +38,4 @@ export const localeToLang = {
"nb-NO": langEnum.no,
"nn-NO": langEnum.no,
"se-NO": langEnum.no,
};
}

2
env/client.ts vendored
View File

@@ -5,4 +5,4 @@ export const env = createEnv({
client: {},
emptyStringAsUndefined: true,
runtimeEnv: {},
});
})

4
env/server.ts vendored
View File

@@ -1,5 +1,5 @@
import { createEnv } from "@t3-oss/env-nextjs"
import { z } from "zod";
import { z } from "zod"
export const env = createEnv({
server: {
@@ -23,4 +23,4 @@ export const env = createEnv({
NODE_ENV: process.env.NODE_ENV,
PRINT_QUERY: process.env.PRINT_QUERY,
},
});
})

16
lib/previewRequest.ts
View File

@@ -1,11 +1,11 @@
import "server-only";
import { request as graphqlRequest } from "graphql-request";
import "server-only"
import { request as graphqlRequest } from "graphql-request"
import { env } from "@/env/server";
import { env } from "@/env/server"
import type { Data } from "@/types/request";
import type { DocumentNode } from "graphql";
import ContentstackLivePreview from "@contentstack/live-preview-utils";
import type { Data } from "@/types/request"
import type { DocumentNode } from "graphql"
import ContentstackLivePreview from "@contentstack/live-preview-utils"
export async function previewRequest<T>(
query: string | DocumentNode,
@@ -33,7 +33,7 @@ export async function previewRequest<T>(
return { data: response }
} catch (error) {
console.error(error);
throw new Error("Something went wrong");
console.error(error)
throw new Error("Something went wrong")
}
}

5
lib/request.ts
View File

@@ -5,7 +5,10 @@ import { env } from "@/env/server"
import type { Data } from "@/types/request"
import type { DocumentNode } from "graphql"
export async function request<T>(query: string | DocumentNode, variables?: {}): Promise<Data<T>> {
export async function request<T>(
query: string | DocumentNode,
variables?: {}
): Promise<Data<T>> {
try {
if (env.PRINT_QUERY) {
const graphqlRawRequest = (await import("graphql-request")).rawRequest

8
middleware.ts
View File

@@ -1,6 +1,6 @@
import ContentstackLivePreview from "@contentstack/live-preview-utils";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import ContentstackLivePreview from "@contentstack/live-preview-utils"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
// This function can be marked `async` if using `await` inside
export async function middleware(request: NextRequest) {
@@ -69,4 +69,4 @@ export const config = {
*/
"/((?!api|_next/static|_next/image|Static|imageVault|contentassets|favicon.ico).*)",
],
};
}

16
next.config.js
View File

@@ -1,9 +1,9 @@
import createJiti from "jiti"
const jiti = createJiti(new URL(import.meta.url).pathname);
const jiti = createJiti(new URL(import.meta.url).pathname)
jiti("./env/server");
jiti("./env/client");
jiti("./env/server")
jiti("./env/client")
/** @type {import('next').NextConfig} */
const nextConfig = {
@@ -22,11 +22,11 @@ const nextConfig = {
config.module.rules.push({
test: /\.(graphql|gql)/,
exclude: /node_modules/,
loader: "graphql-tag/loader"
});
loader: "graphql-tag/loader",
})
return config;
}
};
return config
},
}
export default nextConfig

21
tsconfig.json
View File

@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es2022",
"lib": [
"dom",
"dom.iterable",
"ES2022"
],
"lib": ["dom", "dom.iterable", "ES2022"],
"allowJs": true,
"checkJs": true,
"skipLibCheck": true,
@@ -25,18 +21,9 @@
}
],
"paths": {
"@/*": [
"./*"
]
"@/*": ["./*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
]
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}

4
types/components/current/header.ts
View File

@@ -1,3 +1,3 @@
export type HeaderProps = {
pathname: string;
};
pathname: string
}

6
types/components/jsontohtml.ts
View File

@@ -1,8 +1,8 @@
import type { RTENode } from "../rte/node"
import type { Node } from "@/types/requests/utils/edges";
import type { RenderOptions } from "../rte/option";
import type { Embeds } from "@/types/requests/embeds";
import type { Node } from "@/types/requests/utils/edges"
import type { RenderOptions } from "../rte/option"
import type { Embeds } from "@/types/requests/embeds"
export type JsonToHtmlProps = {
embeds: Node<Embeds>[]

2
types/graphql.d.ts vendored
View File

@@ -1 +1 @@
declare module '*.graphql'
declare module "*.graphql"

4
types/lang.ts
View File

@@ -5,6 +5,6 @@ export const langEnum = {
fi: "fi",
da: "da",
de: "de",
};
}
export type Lang = keyof typeof langEnum;
export type Lang = keyof typeof langEnum

22
types/params.ts
View File

@@ -1,27 +1,27 @@
import { Lang } from './lang';
import { Lang } from "./lang"
export type SearchParams<S = {}> = {
searchParams: S & { [key: string]: string };
};
searchParams: S & { [key: string]: string }
}
export type Params<P = {}> = {
params: P;
};
params: P
}
export type LangParams = {
lang: Lang;
};
lang: Lang
}
export type UriParams = {
uri?: string;
};
uri?: string
}
export type PreviewParams = {
uri?: string
live_preview?: string
}
export type LayoutArgs<P = undefined> = P extends undefined ? {} : Params<P>;
export type LayoutArgs<P = undefined> = P extends undefined ? {} : Params<P>
export type PageArgs<P = undefined, S = undefined> = LayoutArgs<P> &
(S extends undefined ? {} : SearchParams<S>);
(S extends undefined ? {} : SearchParams<S>)

1
types/requests/blocks/list.ts
View File

@@ -64,5 +64,4 @@ export type List = {
}
}
export type ListProps = List

14
types/rte/attrs.ts
View File

@@ -9,7 +9,7 @@ export interface Attributes {
}
export interface RTEAssetAttrs extends Attributes {
"alt": string
alt: string
"asset-alt": string
"asset-link": string
"asset-name": string
@@ -17,8 +17,8 @@ export interface RTEAssetAttrs extends Attributes {
"asset-uid": string
"display-type": EmbedTypesEnum.display
"content-type-uid": "sys_assets"
"inline": false
"type": RTEItemTypeEnum.asset
inline: false
type: RTEItemTypeEnum.asset
}
export interface RTEAnchorAttrs extends Attributes {
@@ -27,10 +27,10 @@ export interface RTEAnchorAttrs extends Attributes {
}
export interface RTELinkAttrs extends Attributes {
'display-type': EmbedTypesEnum.link
'class-name': string
'content-type-uid': string
'entry-uid': string
"display-type": EmbedTypesEnum.link
"class-name": string
"content-type-uid": string
"entry-uid": string
locale: Lang
href: string
target: HTMLAnchorElement["target"]

10
types/rte/enums.ts
View File

@@ -1,9 +1,9 @@
export enum EmbedTypesEnum {
block = 'block',
display = 'display',
download = 'download',
inline = 'inline',
link = 'link',
block = "block",
display = "display",
download = "download",
inline = "inline",
link = "link",
}
export type EmbedTypes = keyof typeof EmbedTypesEnum

27
types/rte/node.ts
View File

@@ -1,5 +1,10 @@
import { RTETypeEnum } from "./enums"
import type { Attributes, RTEAnchorAttrs, RTEAssetAttrs, RTELinkAttrs } from "./attrs"
import type {
Attributes,
RTEAnchorAttrs,
RTEAssetAttrs,
RTELinkAttrs,
} from "./attrs"
import type { EmbedByUid } from "../components/jsontohtml"
import type { RenderOptions } from "./option"
@@ -58,14 +63,26 @@ export type RTEReferenceNode = RTEDefaultNode | RTEAnchorNode
export type RTENode = RTERegularNode | RTEReferenceNode | RTETextNode
export type RTERenderMark = (children: React.ReactNode, classname?: string, id?: string) => JSX.Element
export type RTERenderMark = (
children: React.ReactNode,
classname?: string,
id?: string
) => JSX.Element
export interface RTEDocument extends RTEDefaultNode {
type: RTETypeEnum.doc
_version: number
}
export type RTERenderOptionComponent = (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => React.ReactNode
export type RTENext = (nodes: RTENode[], embeds: EmbedByUid, fullRenderOptions: RenderOptions) => string
export type RTERenderOptionComponent = (
node: RTERegularNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => React.ReactNode
export type RTENext = (
nodes: RTENode[],
embeds: EmbedByUid,
fullRenderOptions: RenderOptions
) => string