Skip to content

Commit

Permalink
feat: i18n complete
Browse files Browse the repository at this point in the history 
i18n: all translations done, language-switcher working
  • Loading branch information
@Lillebo
Lillebo committed Aug 5, 2024
1 parent 752dcc4 commit b0a9414
Show file tree
Hide file tree
Showing 24 changed files with 437 additions and 195 deletions.
3 changes: 1 addition & 2 deletions .env.example
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
# FORMS
DATAJEGER_EMAIL_ADDRESS=[email protected]
FDK_MAIL_SERVICE_ENDPOINT=mail-sender-service.staging.fellesdatakatalog.digdir.no/api/sendmail
FDK_MAIL_SERVICE_API_KEY=
FDK_BASE_URI=https://staging.fellesdatakatalog.digdir.no
FDK_COMMUNITY_BASE_URI=https://community.staging.fellesdatakatalog.digdir.no
FDK_REGISTRATION_BASE_URI=https://registrering.staging.fellesdatakatalog.digdir.no
#
FDK_LLM_SEARCH_ENDPOINT=https://aisearch.api.staging.fellesdatakatalog.digdir.no/llm
9 changes: 5 additions & 4 deletions apps/frontpage/src/app/[lang]/components/catalogs-banner/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { HeadingWithDivider } from '../typography';
import styles from './catalogs-banner.module.scss';

type CatalogsBannerProps = {
dictionary: Dictionary;
commonDictionary: Dictionary;
frontpageDictionary: Dictionary;
baseUri: string;
}

const CatalogsBanner = ({ dictionary, baseUri }: CatalogsBannerProps) => {
const CatalogsBanner = ({ commonDictionary, frontpageDictionary, baseUri }: CatalogsBannerProps) => {
return (
<div className={styles.catalogsBanner}>
<div className={styles.inner}>
Expand All @@ -17,10 +18,10 @@ const CatalogsBanner = ({ dictionary, baseUri }: CatalogsBannerProps) => {
level={2}
size="md"
>
Våre datakataloger
{frontpageDictionary.catalogsBanner.title}
</HeadingWithDivider>
<CatalogsMenu
dictionary={dictionary}
dictionary={commonDictionary}
baseUri={baseUri}
/>
</div>
Expand Down
9 changes: 6 additions & 3 deletions apps/frontpage/src/app/[lang]/components/footer/footer.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
.footer {
background: var(--color-fdk-navy-dark);

.inner {
max-width:1000px;
margin:auto;
padding:4rem 2rem;
}

.links {
display:flex;
gap:1rem;
justify-content: space-between;
max-width:1000px;
margin:auto;
padding:4rem 2rem;

.linkSection {
.linkSectionHeader {
Expand Down
138 changes: 71 additions & 67 deletions apps/frontpage/src/app/[lang]/components/footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import { Link, Heading } from '@digdir/designsystemet-react';

import { CatalogIcon } from '../catalog-symbol';
import { LogoLink } from '../logo';
import LanguageSwitcher from '../language-switcher'
import getMainMenuData from '../main-menu/data'

import DigdirLogo from './images/digdir-logo';
import GithubLogo from './images/github-logo';

import getMainMenuData from '../main-menu/data'
import getFooterData from './data'

import styles from './footer.module.scss';
Expand All @@ -23,77 +24,80 @@ const Footer = ({ dictionary, baseUri }: FooterProps) => {

return (
<footer className={styles.footer}>
<div className={styles.links}>
<div className={styles.linkSection}>
<Heading className={styles.linkSectionHeader} level={3} size="sm">
{dictionary.mainMenu.catalogs.heading}
</Heading>
<ul>
{
mainMenuData.catalogs.map(item => (
<li>
<Link className={styles.iconLink} href={item.href}>
<CatalogIcon catalog={item.key} fontSize='1.5em' />
{item.title}
</Link>
</li>
))
}
</ul>
</div>
<div className={styles.linkSection}>
<Heading className={styles.linkSectionHeader} level={3} size="sm">
{dictionary.mainMenu.help.heading}
</Heading>
<ul>
{
mainMenuData.help.map(item => (
<li><Link href={item.href}>{item.title}</Link></li>
))
}
</ul>
</div>
<div className={styles.linkSection}>
<Heading className={styles.linkSectionHeader} level={3} size="sm">
{dictionary.mainMenu.tools.heading}
</Heading>
<ul>
{
mainMenuData.tools.map(item => (
<li><Link href={item.href}>{item.title}</Link></li>
))
}
</ul>
</div>
<div className={styles.linkSection}>
<Heading className={styles.linkSectionHeader} level={3} size="sm">
{dictionary.mainMenu.about.heading}
</Heading>
<ul>
{
mainMenuData.about.map(item => (
<li><Link href={item.href}>{item.title}</Link></li>
))
}
{
footerData.policies.map(item => (
<li><Link href={item.href}>{item.title}</Link></li>
))
}
<li>
<Link className={styles.iconLink} href={footerData.githubUri}>
<GithubLogo fontSize='1.25em' />
{dictionary.footer.githubFollow}
</Link>
</li>
</ul>
<div className={styles.inner}>
<div className={styles.links}>
<div className={styles.linkSection}>
<Heading className={styles.linkSectionHeader} level={3} size="sm">
{dictionary.mainMenu.catalogs.heading}
</Heading>
<ul>
{
mainMenuData.catalogs.map(item => (
<li>
<Link className={styles.iconLink} href={item.href}>
<CatalogIcon catalog={item.key} fontSize='1.5em' />
{item.title}
</Link>
</li>
))
}
</ul>
</div>
<div className={styles.linkSection}>
<Heading className={styles.linkSectionHeader} level={3} size="sm">
{dictionary.mainMenu.help.heading}
</Heading>
<ul>
{
mainMenuData.help.map(item => (
<li><Link href={item.href}>{item.title}</Link></li>
))
}
</ul>
</div>
<div className={styles.linkSection}>
<Heading className={styles.linkSectionHeader} level={3} size="sm">
{dictionary.mainMenu.tools.heading}
</Heading>
<ul>
{
mainMenuData.tools.map(item => (
<li><Link href={item.href}>{item.title}</Link></li>
))
}
</ul>
</div>
<div className={styles.linkSection}>
<Heading className={styles.linkSectionHeader} level={3} size="sm">
{dictionary.mainMenu.about.heading}
</Heading>
<ul>
{
mainMenuData.about.map(item => (
<li><Link href={item.href}>{item.title}</Link></li>
))
}
{
footerData.policies.map(item => (
<li><Link href={item.href}>{item.title}</Link></li>
))
}
<li>
<Link className={styles.iconLink} href={footerData.githubUri}>
<GithubLogo fontSize='1.25em' />
{dictionary.footer.githubFollow}
</Link>
</li>
</ul>
</div>
</div>
<LanguageSwitcher inverted />
</div>
<div className={styles.bottom}>
<div className={styles.bottomInner}>
<LogoLink baseUri={baseUri} />
<div className={styles.digdirCredit}>
<span>en tjeneste fra</span>
<span>{dictionary.footer.digdirCredit}</span>
<Link href={footerData.digdirUri}>
<DigdirLogo />
</Link>
Expand Down
6 changes: 3 additions & 3 deletions ...e/src/app/[lang]/components/frontpage-banner/components/norgeskart/norgeskart.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
filter: grayscale(100%) contrast(100%) brightness(100%);
pointer-events:none;

@media (max-width: 550px) {
display:none;
}
// @media (max-width: 550px) {
// display:none;
// }
}
14 changes: 11 additions & 3 deletions apps/frontpage/src/app/[lang]/components/frontpage-banner/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,21 @@ import { Norgeskart } from './components/norgeskart';

import styles from './frontpage-banner.module.css';

const FrontpageBanner = () => (
type FrontpageBannerProps = {
endpoint: string;
dictionary: Dictionary;
}

const FrontpageBanner = ({ endpoint, dictionary }: FrontpageBannerProps) => (
<div className={styles.outer}>
<div className={styles.inner}>
<HeadingWithDivider level={1} className={styles.headline}>
Der Norge deler data
{dictionary.aiBanner.title}
</HeadingWithDivider>
<OrakelSearch />
<OrakelSearch
endpoint={endpoint}
dictionary={dictionary}
/>
</div>
<Norgeskart />
</div>
Expand Down
47 changes: 47 additions & 0 deletions apps/frontpage/src/app/[lang]/components/language-switcher/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
'use client';

import { useRouter, usePathname } from 'next/navigation';
import cn from 'classnames';
import { ToggleGroup } from '@digdir/designsystemet-react';

import { i18n, Locale } from '@fdk-frontend/dictionaries';

import styles from './language-switcher.module.scss';

type LanguageSwitcher = {
inverted?: boolean;
};

const LanguageSwitcher = ({ inverted }: LanguageSwitcher) => {

const router = useRouter();
const pathName = usePathname();

const segments = pathName.split('/');
const defaultCode = segments[1];

const onLanguageSelect = (code) => {
const segments = pathName.split('/');
segments[1] = code;
return router.replace(segments.join('/'));
};

return (
<ToggleGroup
className={cn(styles.languageSwitcher, { [styles.inverted]: inverted })}
defaultValue={defaultCode}
size="sm"
onChange={(code) => onLanguageSelect(code)}
>
{
i18n.locales.map(locale => (
<ToggleGroup.Item value={locale.code}>
{locale.flag} {locale.name}
</ToggleGroup.Item>
))
}
</ToggleGroup>
);
}

export default LanguageSwitcher;
15 changes: 15 additions & 0 deletions apps/frontpage/src/app/[lang]/components/language-switcher/language-switcher.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.languageSwitcher {
&.inverted {
background:transparent;

button {
&:not([aria-checked="true"]) {
color: var(--fds-semantic-border-action-first-subtle);
}
&:not([aria-checked="true"]):hover {
background: var(--color-fdk-navy);
color:white;
}
}
}
}
11 changes: 3 additions & 8 deletions apps/frontpage/src/app/[lang]/components/layout-root/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { PropsWithChildren } from 'react';
import { getDictionary, i18n, type Locale } from '@fdk-frontend/dictionaries';
import cn from 'classnames';

// import { Footer } from '@fdk-frontend/ui/footer';
import Footer from '../footer';
import Header from '../header';

Expand All @@ -26,15 +25,11 @@ const RootLayout = async ({ children, className, params }: RootLayoutProps & Pro
const dictionary = await getDictionary(params.lang, 'common');

const {
FDK_BASE_URI,
FDK_COMMUNITY_BASE_URI,
FDK_REGISTRATION_BASE_URI,
FDK_BASE_URI: baseUri = '/',
FDK_COMMUNITY_BASE_URI: communityBaseUri = '/',
FDK_REGISTRATION_BASE_URI: registrationBaseUri = '/',
} = process.env;

const baseUri = FDK_BASE_URI ?? '/';
const communityBaseUri = FDK_COMMUNITY_BASE_URI ?? '/';
const registrationBaseUri = FDK_REGISTRATION_BASE_URI ?? '/';

return (
<html lang={params.lang}>
<body className={cn(className)}>
Expand Down
Loading

0 comments on commit b0a9414

Please sign in to comment.