frameless · Yolijn · Oct 20, 2024 · Oct 13, 2024 · Oct 13, 2024 · Oct 13, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -63,7 +63,7 @@
       "files": ["**/stencil.tsx", "**/*.stencil.tsx"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": ["packages/web-components-stencil/tsconfig.json"]
+        "parserSerivce": true
       },
       "plugins": ["@typescript-eslint", "import"]
     },
@@ -78,11 +78,7 @@
       "files": ["*.ts", "*.tsx"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": [
-          "packages/storybook/tsconfig.json",
-          "packages/components-react/tsconfig.json",
-          "packages/components-react/tsconfig.test.json"
-        ]
+        "parserSerivce": true
       },
       "plugins": ["@typescript-eslint"]
     }

diff --git a/.github/workflows/continuous-deployment.yml b/.github/workflows/continuous-deployment.yml
@@ -150,7 +150,7 @@ jobs:
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages
-          folder: apps/frameless.io/dist/
+          folder: apps/frameless.io/dist/client/
 
   publish-npm:
     runs-on: ubuntu-latest

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -13,7 +13,7 @@
     "scss/operator-no-newline-after": null,
     "scss/at-extend-no-missing-placeholder": null,
     "custom-property-pattern": "^_?(frameless|denhaag|utrecht)-[a-z0-9-]+$",
-    "selector-class-pattern": "^(frameless|utrecht)-[a-z0-9_-]+$",
+    "selector-class-pattern": "^((frameless|utrecht)-[a-z0-9_-]+|hydrated)$",
     "keyframes-name-pattern": "^(frameless|utrecht)-[a-z0-9-]+$",
     "at-rule-no-unknown": null,
     "block-no-empty": [true],

diff --git a/apps/frameless.io/.eslintrc.cjs b/apps/frameless.io/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+    '@typescript-eslint/no-namespace': 'off',
+  },
+  reportUnusedDisableDirectives: true,
+  ignorePatterns: ['dist/*', '**/*.mdx'],
+  env: { browser: true, es2020: true, node: true },
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: 'detect' } },
+  plugins: ['react-refresh'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:mdx/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+};
diff --git a/apps/frameless.io/.gitignore b/apps/frameless.io/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/apps/frameless.io/package.json b/apps/frameless.io/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.2.0",
+  "version": "4.0.0",
   "author": "Frameless",
   "description": "V1",
   "license": "EUPL-1.2",
@@ -9,34 +9,54 @@
   "publishConfig": {
     "access": "public"
   },
+  "type": "module",
   "repository": {
     "type": "git+ssh",
     "url": "[email protected]:frameless/website/.git"
   },
-  "devDependencies": {
-    "@fontsource/fira-sans": "5.0.20",
-    "@fontsource/oswald": "5.0.20",
-    "@frameless/design-tokens": "workspace:*",
-    "@rollup/plugin-replace": "5.0.7",
-    "@web/rollup-plugin-html": "2.3.0",
-    "postcss-discard-duplicates": "7.0.0",
-    "rimraf": "3.0.2",
-    "rollup": "3.29.4",
-    "rollup-plugin-copy": "3.5.0",
-    "rollup-plugin-postcss": "4.0.2"
-  },
   "scripts": {
-    "build": "rollup --config ./rollup.config.mjs",
-    "prebuild": "pnpm run clean",
-    "postbuild": "rimraf tmp",
-    "clean": "rimraf dist tmp",
-    "serve": "npx http-server ./dist"
+    "dev": "pnpm run server:dev",
+    "prod": "pnpm run lint && pnpm run build && pnpm run server:prod",
+    "build": "vite build",
+    "purgecss": "purgecss --css 'dist/client/assets/static/*.css' --content dist/client/index.html 'dist/client/assets/**/*.js' --variables --output 'dist/client/assets/static'",
+    "postbuild": "pnpm run purgecss && precompress --exclude '**.woff2' --types br --verbose dist/client/",
+    "server": "tsx ./server/index.ts",
+    "server:dev": "pnpm run server",
+    "server:prod": "cross-env NODE_ENV=production pnpm run server",
+    "start": "http-server dist/client/ --brotli",
+    "lint": "eslint . --max-warnings 0"
   },
-  "main": "dist/index.css",
-  "dependencies": {
+  "devDependencies": {
+    "@frameless/assets": "workspace:*",
     "@frameless/components-css": "workspace:*",
+    "@frameless/components-react": "workspace:*",
     "@frameless/design-tokens": "workspace:*",
-    "@fullhuman/postcss-purgecss": "6.0.0",
-    "@utrecht/component-library-css": "3.2.0"
+    "@frameless/font": "workspace:*",
+    "@mdx-js/react": "3.0.1",
+    "@mdx-js/rollup": "3.0.1",
+    "@types/node": "20.16.11",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
+    "@utrecht/component-library-css": "6.1.0",
+    "@utrecht/component-library-react": "3.1.0",
+    "@vitejs/plugin-react-swc": "3.7.1",
+    "clsx": "2.1.1",
+    "cross-env": "7.0.3",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "0.4.13",
+    "precompress": "12.0.5",
+    "purgecss": "6.0.0",
+    "tsx": "4.19.1",
+    "typescript": "5.6.3",
+    "vite-plugin-compression2": "1.3.0",
+    "vite-plugin-svgr": "4.2.0"
+  },
+  "dependencies": {
+    "vike": "0.4.199",
+    "vite": "5.4.8"
+  },
+  "peerDependencies": {
+    "react": "18",
+    "react-dom": "18"
   }
 }
diff --git a/apps/frameless.io/pages/_error/+Page.tsx b/apps/frameless.io/pages/_error/+Page.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { usePageContext } from '../../renderer/usePageContext';
+
+export const Page = () => {
+  const pageContext = usePageContext();
+  let { abortReason } = pageContext;
+  if (!abortReason) {
+    abortReason = pageContext.is404 ? 'Page not found.' : 'Something went wrong.';
+  }
+  return (
+    <Center>
+      <p style={{ fontSize: '1.3em' }}>{abortReason}</p>
+    </Center>
+  );
+};
+
+const Center = ({ children }: { children: ReactNode }) => {
+  return (
+    <div
+      style={{
+        height: 'calc(100vh - 100px)',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/apps/frameless.io/pages/index/+Page.tsx b/apps/frameless.io/pages/index/+Page.tsx
@@ -0,0 +1,171 @@
+import { Card, CardGroup, Hero, Logo, Section } from '@frameless/components-react/src';
+import { PageHeader } from '@frameless/components-react/src/PageHeader';
+import { ButtonGroup, ButtonLink, Link, Page, Paragraph } from '@utrecht/component-library-react';
+import Aanpak from './docs/aanpak.mdx';
+import Contact from './docs/contact.mdx';
+import Projecten from './docs/projecten.mdx';
+import TechnischPartner from './docs/technisch-partner.mdx';
+import AccessiblityPartner from './docs/toegankelijkheid/partner-in-toegankelijkheid.mdx';
+import Toegankelijkheidsverklaring from './docs/toegankelijkheid/toegankelijkheidsverklaring.mdx';
+import WCAGEend from './docs/toegankelijkheid/wcag-eend.mdx';
+import { customComponents, mapHeadings, omitHeading1 } from '../../src/mdxUtils';
+
+const HomePage = () => (
+  <Page>
+    <PageHeader
+      Logo={<Logo />}
+      menuItems={[
+        { label: 'Aanpak', href: '#aanpak' },
+        { label: 'WCAG Audits', href: '#audits' },
+        // { label: 'Voorbeelden', href: '#voorbeelden' },
+        { label: 'Contact', href: '#contact' },
+      ]}
+    />
+    <Hero id="partner">
+      <TechnischPartner components={mapHeadings(2, customComponents)} />
+    </Hero>
+    <Section appearance="alternate" id="aanpak">
+      <Aanpak components={mapHeadings(2, customComponents)} />
+      <ButtonGroup>
+        <ButtonLink appearance="primary-action-button" href="#contact">
+          Neem gelijk contact op
+        </ButtonLink>
+        <ButtonLink appearance="secondary-action-button" href="#voorbeelden">
+          Bekijk voorbeelden van ons werk
+        </ButtonLink>
+      </ButtonGroup>
+    </Section>
+    <Section id="audits">
+      <AccessiblityPartner components={mapHeadings(2, customComponents)} />
+      <Paragraph>Als Frameless ondersteunen wij graag jouw organisatie bij:</Paragraph>
+      <CardGroup>
+        <Card headingLevel={3} heading="Het uitvoeren van een WCAG audit">
+          <Toegankelijkheidsverklaring components={omitHeading1(mapHeadings(3, customComponents))} />
+          <Paragraph>Een audit door ons laten doen?</Paragraph>
+          <ButtonGroup>
+            <ButtonLink href="https://forms.gle/gyKPd6Ha9Ng7C9s56" appearance="secondary-action-button" target="_blank">
+              Vraag een offerte aan
+            </ButtonLink>
+          </ButtonGroup>
+        </Card>
+        <Card headingLevel={3} heading="Toegankelijkheid in onze eigen projecten">
+          <WCAGEend components={omitHeading1(mapHeadings(3, customComponents))} />
+        </Card>
+      </CardGroup>
+    </Section>
+    <Section appearance="alternate" id="voorbeelden">
+      <Projecten components={omitHeading1(mapHeadings(2, customComponents))} />
+      <Paragraph>Hieronder hebben we er een aantal voor je uitgelicht </Paragraph>
+      <CardGroup>
+        <Card headingLevel={3} heading="NL Design System">
+          <Paragraph>
+            Frameless heeft al aan meerdere white-label design systems mogen werken, zoals bijvoorbeeld voor{' '}
+            <Link href="https://designsystem.backbase.com">Backbase</Link>
+          </Paragraph>
+          <Paragraph>
+            Maar het meest trots zijn we natuurlijk op onze bijdrage aan{' '}
+            <Link href="https://nldesignsystem.nl">NL Design System</Link> Waar Robbert en Yolijn als Product Manager en
+            Design System lead samenwerken aan het mooiste design system van Nederland!
+          </Paragraph>
+        </Card>
+        <Card headingLevel={3} heading="Headless CMS">
+          <Paragraph>
+            Afgelopen jaren heeft Frameless voor de gemeente Utrecht diverse projecten met Strapi ontwikkeld, waar
+            inmiddels twee websites op draaien en één API: het Digitaal Loket, het VTH Programma-verslag en de
+            Samenwerkende Catalogi API.
+          </Paragraph>
+          <Paragraph>
+            Meer weten over dit CMS? <Link href="https://cms.frameless.io">https://cms.frameless.io</Link>
+          </Paragraph>
+        </Card>
+      </CardGroup>
+      <CardGroup>
+        <Card headingLevel={3} heading="Utrecht Design System">
+          <Paragraph>
+            Meer dan 80 componenten ontwikkeld voor{' '}
+            <Link href="https://nl-design-system.github.io/utrecht/storybook/">Utrecht Design System</Link> in
+            verschillende technieken: als CSS, HTML, React, Angular, Vue en als Web Component.
+          </Paragraph>
+          <Paragraph>
+            Deze componenten worden inmiddels ook veel gebruikt door uiteenlopende projecten in de NL Design System
+            community.
+          </Paragraph>
+        </Card>
+        <Card headingLevel={3} heading="Den Haag Design System">
+          <Paragraph>
+            Begeleiding van het
+            <Link href="https://nl-design-system.github.io/denhaag/"> Den Haag Design System</Link> team en leveranciers
+            met open source bouwen volgens de NL Design System architectuur.
+          </Paragraph>
+        </Card>
+        <Card headingLevel={3} heading="Digitaal Loket van gemeente Utrecht">
+          <Paragraph>
+            Ontwikkeling van CMS voor de Producten en Diensten Catalogus, en de nieuwe website ontwikkelen als headless
+            frontend op basis van NL Design System.
+            <Link href="https://loket.digitaal.utrecht.nl/nl">Digitaal Loket van gemeente Utrecht</Link>.
+          </Paragraph>
+        </Card>
+      </CardGroup>
+      <details>
+        <summary>Meer projecten</summary>
+        <CardGroup>
+          <Card headingLevel={3} heading="Website voor Veiligheid Toezicht en Handhaving">
+            <Paragraph>
+              De cijfers voor het jaarlijks verslag zijn nu voor iedereen beschikbaar op{' '}
+              <Link href="https://vth-programma-verslag.digitaal.utrecht.nl/nl">
+                https://vth-programma-verslag.digitaal.utrecht.nl
+              </Link>
+            </Paragraph>
+            <Paragraph>
+              Wij maakten hiervoor in samenwerking met de beleidsmedewerkers een uitbreiding op het CMS voor Producten
+              en Diesten Catalogus en NL Design System.
+            </Paragraph>
+          </Card>
+          <Card headingLevel={3} heading="Huwelijksplanner">
+            <Paragraph>
+              Front-end ontwikkeling voor de Huwelijksplanner CMS op basis van NL Design System componenten.
+            </Paragraph>
+          </Card>
+          <Card headingLevel={3} heading="WMEBV Gebruikerstests">
+            <Paragraph>
+              <Link href="https://gemeentevoorbeeld.nl/">gemeente Voorbeeld</Link>: ontwikkeling van demo-website waar
+              Vereniging van Nederlandse Gemeenten (VNG) gebruikerstesten doet, om gemeenten op weg te helpen met
+              voldoen aan de&#160;
+              <Link href="https://www.digitaleoverheid.nl/overzicht-van-alle-onderwerpen/wetgeving/wet-modernisering-elektronisch-bestuurlijk-verkeer/">
+                WMEBV
+              </Link>
+              &#160;met NL Design System.
+            </Paragraph>
+          </Card>
+          <Card headingLevel={3} heading="Rotterdam Design System">
+            <Paragraph>
+              We hebben voor gemeente Rotterdam een Proof-of-concept{' '}
+              <Link href="https://nl-design-system.github.io/rotterdam/">Rotterdam Design System</Link> gemaakt.
+              Daarnaast hebben we onderzocht op welke manier dit design system in het interessante Rotterdam ecosysteem
+              met Mendix en Apache Wicket zou passen.
+            </Paragraph>
+          </Card>
+          <Card headingLevel={3} heading="OpenCatelogi">
+            <Paragraph>
+              We hebben <Link href="https://opencatalogi.nl/">OpenCatalogi.nl</Link> gemigreerd naar React componenten
+              uit de NL Design System community. De huisstijl keuzes van gemeente Rotterdam die hiervoor nodig waren
+              hebben we als een NL Design System thema beschikbaar gemaakt.
+            </Paragraph>
+          </Card>
+          {/* <Card headingLevel={3} heading="Wilbur voor Schiphol">
+              <Paragraph>
+                We hebben <Link href="https://opencatalogi.nl/">OpenCatalogi.nl</Link> gemigreerd naar React componenten
+                uit de NL Design System community. De huisstijl keuzes van gemeente Rotterdam die hiervoor nodig waren
+                hebben we als een NL Design System thema beschikbaar gemaakt.
+              </Paragraph>
+            </Card> */}
+        </CardGroup>
+      </details>
+    </Section>
+    <Section className="frameless-section__contact" id="contact">
+      <Contact components={mapHeadings(2, customComponents)} />
+    </Section>
+  </Page>
+);
+
+export default HomePage;
diff --git a/apps/frameless.io/pages/index/+config.ts b/apps/frameless.io/pages/index/+config.ts
@@ -0,0 +1,5 @@
+export default {
+  title: 'Frameless: technisch partner voor toegankelijke, gebruiksvriendelijke webapplicaties.',
+  description:
+    'Frameless ontzorgt bij implementatie, beheer, ondersteuning en toegankelijkheid. Ervaren in transitie van bestaande systemen naar gebruiksvriendelijke, onderhoudbare oplossingen met de NL Design System aanpak en Common Ground principes. Ook voeren we WCAG-EM audits uit en maken we toegankelijkheidsverklaringen.',
+};
diff --git a/apps/frameless.io/pages/index/docs/aanpak.mdx b/apps/frameless.io/pages/index/docs/aanpak.mdx
@@ -0,0 +1,21 @@
+import { Coffee } from "../illustrations/Coffee";
+
+# Samen vinden we de beste oplossing!
+
+Sta je voor een technische of organistorische uitdaging? Na een goede kop koffie zijn wij een ideale sparringspartner!
+
+<Coffee className="frameless-illustration frameless-illustration--backdrop" />
+
+Tijdens een kennismaking bespreken we waar jullie mee bezig zijn, en bekijken we op welke manier Frameless of ons netwerk kunnen helpen.
+
+## Hulp nodig?
+
+We onderzoeken welke oplossingen, technieken en expertise er in jouw organisatie al aanwezig zijn om een plan van aanpak op maat te maken voor een migratie of vernieuwing. Dat doen we graag in samen met betrokken experts uit jouw organisatie én andere leveranciers om zo tot een passende en duurzame oplossing te komen.
+
+## Ontzorgen bij uitvoering
+
+We nemen met alle plezier werk uit handen, zoals het aansturen van leveranciers, het ondersteunen van interne teams bij de uitvoering en bij het zorgen dat de oplossing daadwerkelijk wordt ingebed in de organisatie. Daarnaast hebben we professionals in dienst en experts in ons netwerk die desgewenst de opdracht voor jouw organisatie graag uitvoeren én het eindresultaat op toegankelijkheid toetsen.
+
+## Efficiënt en herkenbaar
+
+We zorgen dat de oplossing aansluit bij bestaande oplossingen, en doen ons best om dubbel werk te voorkomen. Door te werken volgens de NL Design System aanpak, zorgen we voor hergebruik waar mogelijk en voeren we de verbeteringen door op een manier dat anderen hier ook weer gebruik van kunnen maken.
diff --git a/apps/frameless.io/pages/index/docs/contact.mdx b/apps/frameless.io/pages/index/docs/contact.mdx
@@ -0,0 +1,17 @@
+import { Image } from "@utrecht/component-library-react";
+
+# Kennis maken?
+
+<Image
+  loading="lazy"
+  src="https://raw.githubusercontent.com/frameless/website/assets/weverssingel-2.webp"
+  alt="Schets van het oude pand aan de weverssingel, met een groot raam beneden"
+  height="640"
+  width="426"
+/>
+
+## Kom een keer (digitaal) langs!
+
+Ons kantoor zit op Weverssingel 28 in het pittoreske centrum van Amersfoort, maar we werken meestal online! Het team van Frameless werkt namelijk graag vanuit huis, dus of we nou in Enschede, Portugal of Polen zitten, online kan iedereen aansluiten.
+
+Mail ons op [[email protected]](mailto:[email protected]), dan spreken we snel een keer af!