feat: add vth-frontend

.eslintrc.js

@@ -53,6 +53,7 @@ module.exports = {
           './apps/pdc-frontend/tsconfig.json',
           './apps/pdc-dashboard/tsconfig.json',
           './apps/pdc-dashboard/src/admin/tsconfig.json',
+          './apps/vth-frontend/tsconfig.json',
           './apps/vth-dashboard/tsconfig.json',
           './apps/vth-dashboard/src/admin/tsconfig.json',
           './packages/catalogi-data/tsconfig.json',

apps/vth-frontend/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-html-link-for-pages": ["error", "apps/vth-frontend/src/pages/"]
+  }
+}

apps/vth-frontend/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/vth-frontend/README.md

@@ -0,0 +1 @@
+# Utrecht VTH Frontend

apps/vth-frontend/next-sitemap.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: process.env.FRONTEND_PUBLIC_URL,
+  generateRobotsTxt: true,
+  exclude: ['/sitemap.xml'],
+  robotsTxtOptions: {
+    additionalSitemaps: [`${process.env.FRONTEND_PUBLIC_URL}/sitemap.xml`],
+  },
+};

apps/vth-frontend/next.config.js

@@ -0,0 +1,19 @@
+const { URL } = require('url');
+const { hostname, protocol, port } = new URL(process.env.STRAPI_PUBLIC_URL || 'http://localhost:1337');
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: protocol.replace(/:$/, ''),
+        hostname: hostname,
+        port: port,
+      },
+    ],
+  },
+  experimental: {
+    serverActions: true,
+  },
+};
+
+module.exports = nextConfig;

apps/vth-frontend/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@frameless/vth-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "author": "@frameless",
+  "description": "Utrecht VTH frontend application",
+  "license": "",
+  "keywords": [],
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "prebuild": "npm run clean",
+    "clean": "rimraf build .next",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "4.29.12",
+    "@utrecht/component-library-css": "1.0.0-alpha.543",
+    "@utrecht/component-library-react": "1.0.0-alpha.352",
+    "@utrecht/design-tokens": "1.0.0-alpha.536",
+    "@utrecht/web-component-library-react": "1.0.0-alpha.542",
+    "accept-language": "3.0.18",
+    "add": "2.0.6",
+    "classnames": "2.3.2",
+    "downshift": "7.6.0",
+    "i18next": "22.5.1",
+    "i18next-browser-languagedetector": "7.0.2",
+    "i18next-resources-to-backend": "1.1.4",
+    "is-absolute-url": "4.0.1",
+    "next": "13.4.5",
+    "next-sitemap": "4.1.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-i18next": "12.3.1",
+    "react-loading-skeleton": "3.3.1",
+    "react-markdown": "8.0.5",
+    "react-vega": "7.6.0",
+    "rehype-raw": "6.1.1",
+    "sharp": "0.32.1",
+    "vega": "5.25.0",
+    "vega-lite": "5.14.1",
+    "yarn": "1.22.19"
+  },
+  "devDependencies": {
+    "eslint": "8.35.0",
+    "eslint-config-next": "13.2.4",
+    "sass": "1.63.6"
+  }
+}

apps/vth-frontend/src/app/[locale]/[...not-found]/page.tsx

@@ -0,0 +1,22 @@
+import { Heading1 } from '@utrecht/component-library-react/dist/css-module';
+import { Markdown } from '@/components/Markdown';
+import { GET_NOT_FOUND_PAGE } from '@/query';
+import { createStrapiURL } from '@/util/createStrapiURL';
+import { fetchData } from '@/util/fetchData';
+
+const NotFoundPage = async ({ params: { locale } }: { params: { locale: string } }) => {
+  const { data } = await fetchData({
+    url: createStrapiURL(),
+    query: GET_NOT_FOUND_PAGE,
+    variables: { locale: locale },
+  });
+
+  return (
+    <div>
+      <Heading1>{data?.notFoundPage?.data?.attributes?.title}</Heading1>
+      <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
+    </div>
+  );
+};
+
+export default NotFoundPage;

apps/vth-frontend/src/app/[locale]/error.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Button, Heading1, Paragraph } from '@utrecht/component-library-react/dist/css-module';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useTranslation } from '../i18n/client';
+interface ErrorPageProps {
+  error: Error;
+  reset: () => void;
+}
+
+export default function Error({ error, reset }: ErrorPageProps) {
+  const [errorMessage, setErrorMessage] = useState<Error>();
+
+  useEffect(() => {
+    setErrorMessage(error);
+  }, [error]);
+  const { locale } = useParams();
+  const { t } = useTranslation(locale, 'server-error');
+  return (
+    <>
+      <Heading1>{t('common.title')}</Heading1>
+      {process.env.NODE_ENV === 'production' && <Paragraph>{t('common.body')}</Paragraph>}
+      <Paragraph>{process.env.NODE_ENV === 'development' && errorMessage?.message}</Paragraph>
+      <Paragraph />
+      <Button appearance="secondary-action-button" onClick={() => reset()}>
+        {t('actions.try-again')}
+      </Button>
+    </>
+  );
+}

apps/vth-frontend/src/app/[locale]/layout.tsx

@@ -0,0 +1,158 @@
+import classnames from 'classnames';
+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 { ClientLanguageSwitcher } from '@/components/ClientLanguageSwitcher';
+import '@utrecht/component-library-css';
+import '../../styles/globals.css';
+import '@utrecht/design-tokens/dist/index.css';
+import { Footer } from '@/components/Footer';
+import { Logo } from '@/components/Logo';
+import 'react-loading-skeleton/dist/skeleton.css';
+import { useTranslation } from '../i18n/index';
+import { languages } from '../i18n/settings';
+
+const Main: React.FC<{ children: React.ReactNode }> = ({ children }) => <main>{children}</main>;
+
+interface LayoutProps {
+  children: React.ReactNode;
+  params: {
+    locale: string;
+  };
+}
+
+type Params = {
+  params: {
+    locale: string;
+  };
+};
+
+export async function generateMetadata({ params: { locale } }: Params): Promise<Metadata> {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { t } = await useTranslation(locale, 'common');
+  return {
+    title: {
+      template: `%s | ${t('website-setting.website-name')}`,
+      default: `${t('website-setting.website-name')}`,
+    },
+  };
+}
+
+const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
+  const { t } = await useTranslation(locale, 'layout');
+
+  const footerData = {
+    title: t('footer.title'),
+    list: [
+      {
+        title: t('footer.list.0.title'),
+        items: [
+          {
+            title: t('footer.list.0.items.0.title'),
+            link: 'tel:14030',
+            external: false,
+          },
+          {
+            title: t('footer.list.0.items.1.title'),
+            link: 'https://utrecht.nl/contact/verkort-telefoonnummer-gemeente/',
+            external: true,
+          },
+        ],
+        paragraph: null,
+        column: 6,
+      },
+      {
+        title: t('footer.list.1.title'),
+        items: [],
+        paragraph: 'Stadskantoor\nStadsplateau 1\n3521AZ Utrecht',
+        column: 6,
+      },
+      {
+        title: null,
+        items: [
+          {
+            title: t('footer.list.2.items.0.title'),
+            link: 'https://utrecht.nl/contact/',
+            external: true,
+          },
+        ],
+        paragraph: null,
+        column: 12,
+      },
+      {
+        title: null,
+        items: [
+          {
+            title: t('footer.list.3.items.0.title'),
+            link: 'https://utrecht.nl/over-deze-website/',
+            external: true,
+          },
+        ],
+        paragraph: null,
+        column: 12,
+      },
+    ],
+    social_media: [
+      {
+        icon: 'facebook',
+        link: 'https://www.facebook.com/GemeenteUtrecht',
+        external: true,
+        title: t('footer.social_media.0.title'),
+      },
+      {
+        icon: 'instagram',
+        link: 'https://www.instagram.com/GemeenteUtrecht',
+        external: true,
+        title: t('footer.social_media.1.title'),
+      },
+      {
+        icon: 'linkedin',
+        link: 'https://nl.linkedin.com/company/gemeente-utrecht',
+        external: true,
+        title: t('footer.social_media.2.title'),
+      },
+      {
+        icon: 'twitter',
+        link: 'https://twitter.com/gemeenteutrecht',
+        external: true,
+        title: t('footer.social_media.3.title'),
+      },
+      {
+        icon: 'whatsapp',
+        link: 'https://api.whatsapp.com/send?phone=31624927665',
+        external: false,
+        title: t('footer.social_media.4.title'),
+      },
+    ],
+  };
+  return (
+    <html lang={locale} dir={dir(locale)}>
+      <body
+        className={classnames('utrecht-theme', 'utrecht-document')}
+        suppressHydrationWarning={true}
+      >
+        <QueryClientProvider>
+          <Page className="utrecht-main-wrapper">
+            <PageHeader>
+              <div className="utrecht-header">
+                <Logo locale={locale} />
+                <div className="utrecht-nav__content">
+                  <ClientLanguageSwitcher locales={languages} currentLocale={locale} />
+                </div>
+              </div>
+            </PageHeader>
+            <PageContent className="utrecht-page-content--modifier" style={{ position: 'relative' }}>
+              <Main>
+                <Article>{children}</Article>
+              </Main>
+            </PageContent>
+            <Footer data={footerData} />
+          </Page>
+        </QueryClientProvider>
+      </body>
+    </html>
+  );
+};
+export default RootLayout;

apps/vth-frontend/src/app/[locale]/not-found.tsx

@@ -0,0 +1,24 @@
+import { Heading1 } from '@utrecht/component-library-react/dist/css-module';
+import { cookies } from 'next/headers';
+import { Markdown } from '@/components/Markdown';
+import { GET_NOT_FOUND_PAGE } from '@/query';
+import { createStrapiURL } from '@/util/createStrapiURL';
+import { fetchData } from '@/util/fetchData';
+
+const NotFoundPage = async () => {
+  const locale = cookies().get('i18next')?.value;
+  const { data } = await fetchData({
+    url: createStrapiURL(),
+    query: GET_NOT_FOUND_PAGE,
+    variables: { locale: locale },
+  });
+
+  return (
+    <div>
+      <Heading1>{data?.notFoundPage?.data?.attributes?.title}</Heading1>
+      <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
+    </div>
+  );
+};
+
+export default NotFoundPage;