Skip to content

Commit

Permalink
feat(vth): add grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@bddjong
bddjong committed Oct 4, 2023
1 parent f3ce621 commit 8a52585
Show file tree
Hide file tree
Showing 30 changed files with 1,518 additions and 1,729 deletions.
122 changes: 39 additions & 83 deletions apps/vth-frontend/src/app/[locale]/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,20 @@
import classnames from 'classnames';
import {dir} from 'i18next';
import type {Metadata} from 'next';
import { dir } from 'i18next';
import type { Metadata } from 'next';
import React from 'react';
import {QueryClientProvider} from '@/client';
import {Article, Page, PageContent, PageHeader} from '@/components';
import { QueryClientProvider } from '@/client';
import { Navigation, Page, PageContent, PageHeader } from '@/components';
import '@utrecht/component-library-css';
import '../../styles/globals.css';
import '@utrecht/design-tokens/dist/index.css';
import {Footer} from '@/components/Footer';
import {Grid} from '@/components/Grid';
import {Logo} from '@/components/Logo';
import { Footer } from '@/components/Footer';
import { Grid } from '@/components/Grid';
import { Logo } from '@/components/Logo';
import 'react-loading-skeleton/dist/skeleton.css';
import {useTranslation} from '../i18n/index';
import { useTranslation } from '../i18n/index';
import '@frameless/ui/dist/bundle.css';

<
<
<
<
<
<< HEAD
import {Article, Navigation, Page, PageContent, PageHeader} from '@/components';

======
=

>>>>>>>
f63dd0e(feat(vth)
:
add
page
layout
components
)

<
<
<
<
<
<
<
HEAD

======
=

>>>>>>>
f63dd0e(feat(vth)
:
add
page
layout
components
)
const Main: React.FC<{ children: React.ReactNode }> = ({children}) => <main>{children}</main>;
const Main: React.FC<{ children: React.ReactNode }> = ({ children }) => <main>{children}</main>;

interface LayoutProps {
children: React.ReactNode;
Expand Down Expand Up @@ -104,8 +64,8 @@ const getNavListData = (t: (text: string) => string) => [
},
];

export async function generateMetadata({params: {locale}}: Params): Promise<Metadata> {
const {t} = await useTranslation(locale, 'common');
export async function generateMetadata({ params: { locale } }: Params): Promise<Metadata> {
const { t } = await useTranslation(locale, 'common');
return {
title: {
template: `%s | ${t('website-setting.website-name')}`,
Expand All @@ -114,8 +74,8 @@ export async function generateMetadata({params: {locale}}: Params): Promise<Meta
};
}

const RootLayout = async ({children, params: {locale}}: LayoutProps) => {
const {t} = await useTranslation(locale, ['layout']);
const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
const { t } = await useTranslation(locale, ['layout']);

const footerData = {
title: t('footer.title'),
Expand Down Expand Up @@ -203,36 +163,32 @@ const RootLayout = async ({children, params: {locale}}: LayoutProps) => {
};
return (
<html lang={locale} dir={dir(locale)}>
<body
className={classnames('utrecht-theme', 'utrecht-document', 'utrecht-surface')}
suppressHydrationWarning={true}
>
<QueryClientProvider>
<Page className="utrecht-page--full-width">
<PageHeader>
<Grid>
<Logo locale={locale}/>
</Grid>
</PageHeader>
<Navigation
list={getNavListData(t)}
mobileBreakpoint={998}
toggleButton={{
openText: 'Menu',
closeText: 'Sluiten',
}}
/>
<PageContent>
<Grid>
<Main>
<Article>{children}</Article>
</Main>
</Grid>
</PageContent>
<Footer data={footerData}/>
</Page>
</QueryClientProvider>
</body>
<body
className={classnames('utrecht-theme', 'utrecht-document', 'utrecht-surface')}
suppressHydrationWarning={true}
>
<QueryClientProvider>
<Page className="utrecht-page--full-width">
<PageHeader>
<Grid>
<Logo locale={locale} />
</Grid>
</PageHeader>
<Navigation
list={getNavListData(t)}
mobileBreakpoint={998}
toggleButton={{
openText: 'Menu',
closeText: 'Sluiten',
}}
/>
<PageContent>
<Main>{children}</Main>
</PageContent>
<Footer data={footerData} />
</Page>
</QueryClientProvider>
</body>
</html>
);
};
Expand Down
37 changes: 21 additions & 16 deletions apps/vth-frontend/src/app/[locale]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { fetchData } from '@frameless/pdc-frontend/src/util/fetchData';
import { Heading1, Heading2, Link, UnorderedList, UnorderedListItem } from '@utrecht/component-library-react';
import { Metadata } from 'next';
import React from 'react';
import { Grid } from '@/components/Grid';
import { Markdown } from '@/components/Markdown';
import { GET_HOME_PAGE } from '@/query';
import { useTranslation } from '../i18n';
Expand Down Expand Up @@ -38,22 +39,26 @@ const Home = async ({ params: { locale } }: { params: any }) => {
const themas = data?.themas?.data;

return (
<>
<Heading1>{title}</Heading1>
<Markdown>{content}</Markdown>
<Heading2>Themas</Heading2>
<UnorderedList>
{themas &&
themas.map((thema: any) => {
const { title, slug } = thema.attributes;
return (
<UnorderedListItem key={`thema-${slug}`}>
<Link href={`/themas/${slug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
</>
<Grid>
<div className={'two-thirds'}>
<Heading1>{title}</Heading1>
<Markdown>{content}</Markdown>
</div>
<div className={'two-thirds'}>
<Heading2>Themas</Heading2>
<UnorderedList>
{themas &&
themas.map((thema: any) => {
const { title, slug } = thema.attributes;
return (
<UnorderedListItem key={`thema-${slug}`}>
<Link href={`/themas/${slug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
</div>
</Grid>
);
};

Expand Down
47 changes: 25 additions & 22 deletions apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/content/[contentSlug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
import { Metadata } from 'next';
import React from 'react';
import { useTranslation } from '@/app/i18n';
import { Grid } from '@/components/Grid';
import { Markdown } from '@/components/Markdown';
import { GET_CONTENT_BY_SLUG } from '@/query';

Expand Down Expand Up @@ -40,28 +41,30 @@ const Thema = async ({ params: { locale, contentSlug } }: Params) => {
const { title, content, parents } = data.findSlug.data.attributes;

return (
<>
<Heading1>{title}</Heading1>
<Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
<Heading2>Themas</Heading2>
{parents.data[0] ? (
<UnorderedList>
{parents.data &&
parents.data.map((content: any) => {
const { title, slug: parentSlug } = content.attributes;
return (
<UnorderedListItem key={`thema-${parentSlug}`}>
<Link href={`/themas/${parentSlug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
) : (
<>
<Paragraph>Geen thema paginas verbonden.</Paragraph>
</>
)}
</>
<Grid>
<div className={'two-thirds'}>
<Heading1>{title}</Heading1>
<Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
<Heading2>Themas</Heading2>
{parents.data[0] ? (
<UnorderedList>
{parents.data &&
parents.data.map((content: any) => {
const { title, slug: parentSlug } = content.attributes;
return (
<UnorderedListItem key={`thema-${parentSlug}`}>
<Link href={`/themas/${parentSlug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
) : (
<>
<Paragraph>Geen thema paginas verbonden.</Paragraph>
</>
)}
</div>
</Grid>
);
};

Expand Down
115 changes: 62 additions & 53 deletions apps/vth-frontend/src/app/[locale]/themas/[themaSlug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
import { Metadata } from 'next';
import React from 'react';
import { useTranslation } from '@/app/i18n';
import { Grid } from '@/components/Grid';
import { Markdown } from '@/components/Markdown';
import { GET_THEMA_BY_SLUG } from '@/query';

Expand Down Expand Up @@ -40,63 +41,71 @@ const Thema = async ({ params: { locale, themaSlug } }: Params) => {
const { title, content, parents, child_themas, child_contents } = data.findSlug.data.attributes;

return (
<>
<Heading1>{title}</Heading1>
<Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
<Heading2>Hoofd-themas</Heading2>
{parents.data[0] ? (
<UnorderedList>
{parents.data &&
parents.data.map((content: any) => {
const { title, slug: parentSlug } = content.attributes;
<Grid>
<div className={'two-thirds'}>
<Heading1>{title}</Heading1>
<Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{content}</Markdown>
</div>
<div className={'two-thirds'}>
<Heading2>Hoofd-themas</Heading2>
{parents.data[0] ? (
<UnorderedList>
{parents.data &&
parents.data.map((content: any) => {
const { title, slug: parentSlug } = content.attributes;
return (
<UnorderedListItem key={`thema-${parentSlug}`}>
<Link href={`/themas/${parentSlug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
) : (
<>
<Paragraph>Geen content paginas verbonden.</Paragraph>
</>
)}
</div>
<div className={'two-thirds'}>
<Heading2>Sub-themas</Heading2>
{child_themas.data[0] ? (
<UnorderedList>
{child_themas.data.map((thema: any) => {
const { title, slug: childSlug } = thema.attributes;
return (
<UnorderedListItem key={`thema-${parentSlug}`}>
<Link href={`/themas/${parentSlug}`}>{title}</Link>
<UnorderedListItem key={`thema-${childSlug}`}>
<Link href={`/themas/${childSlug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
) : (
<>
<Paragraph>Geen content paginas verbonden.</Paragraph>
</>
)}
<Heading2>Sub-themas</Heading2>
{child_themas.data[0] ? (
<UnorderedList>
{child_themas.data.map((thema: any) => {
const { title, slug: childSlug } = thema.attributes;
return (
<UnorderedListItem key={`thema-${childSlug}`}>
<Link href={`/themas/${childSlug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
) : (
<>
<Paragraph>Geen sub-themas verbonden.</Paragraph>
</>
)}
<Heading2>Content paginas</Heading2>
{child_contents.data[0] ? (
<UnorderedList>
{child_contents.data &&
child_contents.data.map((content: any) => {
const { title, slug: contentSlug } = content.attributes;
return (
<UnorderedListItem key={`thema-${contentSlug}`}>
<Link href={`/themas/${themaSlug}/content/${contentSlug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
) : (
<>
<Paragraph>Geen content paginas verbonden.</Paragraph>
</>
)}
</>
</UnorderedList>
) : (
<>
<Paragraph>Geen sub-themas verbonden.</Paragraph>
</>
)}
</div>
<div className={'two-thirds'}>
<Heading2>Content paginas</Heading2>
{child_contents.data[0] ? (
<UnorderedList>
{child_contents.data &&
child_contents.data.map((content: any) => {
const { title, slug: contentSlug } = content.attributes;
return (
<UnorderedListItem key={`thema-${contentSlug}`}>
<Link href={`/themas/${themaSlug}/content/${contentSlug}`}>{title}</Link>
</UnorderedListItem>
);
})}
</UnorderedList>
) : (
<>
<Paragraph>Geen content paginas verbonden.</Paragraph>
</>
)}
</div>
</Grid>
);
};

Expand Down
Loading

0 comments on commit 8a52585

Please sign in to comment.