+ );
+};
+
+const Center = ({ children }: { children: ReactNode }) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/apps/frameless.io/pages/index/+Page.tsx b/apps/frameless.io/pages/index/+Page.tsx
new file mode 100644
index 00000000..09428e4d
--- /dev/null
+++ 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 = () => (
+
+ }
+ menuItems={[
+ { label: 'Aanpak', href: '#aanpak' },
+ { label: 'WCAG Audits', href: '#audits' },
+ // { label: 'Voorbeelden', href: '#voorbeelden' },
+ { label: 'Contact', href: '#contact' },
+ ]}
+ />
+
+
+
+
+
+
+
+ Neem gelijk contact op
+
+
+ Bekijk voorbeelden van ons werk
+
+
+
+
+
+ Als Frameless ondersteunen wij graag jouw organisatie bij:
+
+
+
+ Een audit door ons laten doen?
+
+
+ Vraag een offerte aan
+
+
+
+
+
+
+
+
+
+
+ Hieronder hebben we er een aantal voor je uitgelicht
+
+
+
+ Frameless heeft al aan meerdere white-label design systems mogen werken, zoals bijvoorbeeld voor{' '}
+ Backbase
+
+
+ Maar het meest trots zijn we natuurlijk op onze bijdrage aan{' '}
+ NL Design System Waar Robbert en Yolijn als Product Manager en
+ Design System lead samenwerken aan het mooiste design system van Nederland!
+
+
+
+
+ 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.
+
+
+ Meer weten over dit CMS? https://cms.frameless.io
+
+
+
+
+
+
+ Meer dan 80 componenten ontwikkeld voor{' '}
+ Utrecht Design System in
+ verschillende technieken: als CSS, HTML, React, Angular, Vue en als Web Component.
+
+
+ Deze componenten worden inmiddels ook veel gebruikt door uiteenlopende projecten in de NL Design System
+ community.
+
+
+
+
+ Begeleiding van het
+ Den Haag Design System team en leveranciers
+ met open source bouwen volgens de NL Design System architectuur.
+
+
+
+
+ Ontwikkeling van CMS voor de Producten en Diensten Catalogus, en de nieuwe website ontwikkelen als headless
+ frontend op basis van NL Design System.
+ Digitaal Loket van gemeente Utrecht.
+
+
+
+
+ Meer projecten
+
+
+
+ De cijfers voor het jaarlijks verslag zijn nu voor iedereen beschikbaar op{' '}
+
+ https://vth-programma-verslag.digitaal.utrecht.nl
+
+
+
+ Wij maakten hiervoor in samenwerking met de beleidsmedewerkers een uitbreiding op het CMS voor Producten
+ en Diesten Catalogus en NL Design System.
+
+
+
+
+ Front-end ontwikkeling voor de Huwelijksplanner CMS op basis van NL Design System componenten.
+
+
+
+
+ gemeente Voorbeeld: ontwikkeling van demo-website waar
+ Vereniging van Nederlandse Gemeenten (VNG) gebruikerstesten doet, om gemeenten op weg te helpen met
+ voldoen aan de
+
+ WMEBV
+
+ met NL Design System.
+
+
+
+
+ We hebben voor gemeente Rotterdam een Proof-of-concept{' '}
+ Rotterdam Design System gemaakt.
+ Daarnaast hebben we onderzocht op welke manier dit design system in het interessante Rotterdam ecosysteem
+ met Mendix en Apache Wicket zou passen.
+
+
+
+
+ We hebben OpenCatalogi.nl 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.
+
+
+ {/*
+
+ We hebben OpenCatalogi.nl 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.
+
+ */}
+
+
+
+
+
+
+
+);
+
+export default HomePage;
diff --git a/apps/frameless.io/pages/index/+config.ts b/apps/frameless.io/pages/index/+config.ts
new file mode 100644
index 00000000..020f1543
--- /dev/null
+++ 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
new file mode 100644
index 00000000..9a167a73
--- /dev/null
+++ 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!
+
+
+
+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
new file mode 100644
index 00000000..fb7958a8
--- /dev/null
+++ b/apps/frameless.io/pages/index/docs/contact.mdx
@@ -0,0 +1,17 @@
+import { Image } from "@utrecht/component-library-react";
+
+# Kennis maken?
+
+
+
+## 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 [hello@frameless.io](mailto:hello@frameless.io), dan spreken we snel een keer af!
diff --git a/apps/frameless.io/pages/index/docs/projecten.mdx b/apps/frameless.io/pages/index/docs/projecten.mdx
new file mode 100644
index 00000000..487030f3
--- /dev/null
+++ b/apps/frameless.io/pages/index/docs/projecten.mdx
@@ -0,0 +1,6 @@
+## Wij werken aan
+
+Herbruikbare componenten onafhankelijk van huisstijl, met een Headless CMS en slimme API's, daar mag je ons voor wakker maken!
+
+Sinds de oprichting van Frameless in 2013 hebben we diverse opdrachten mogen doen, de ene nog leuker en
+ingewikkelder dan de ander.
diff --git a/apps/frameless.io/pages/index/docs/technisch-partner.mdx b/apps/frameless.io/pages/index/docs/technisch-partner.mdx
new file mode 100644
index 00000000..e18e650b
--- /dev/null
+++ b/apps/frameless.io/pages/index/docs/technisch-partner.mdx
@@ -0,0 +1,13 @@
+import { TechnicalPartner } from "../illustrations/TechnicalPartner";
+
+# Technisch partner voor toegankelijke, gebruiksvriendelijke webapplicaties.
+
+Frameless ontzorgt bij implementatie, beheer, ondersteuning en toegankelijkheid. We werken Agile en zijn ervaren in transitie van bestaande systemen naar gebruiksvriendelijke, onderhoudbare oplossingen volgens de Common Ground principes.
+
+
+
+- Gebruiksvriendelijkheid voorop, voor eindgebruikers én redactie.
+- Expertise in bouwen en onderhouden van robuuste webapplicaties.
+- WCAG-EM audits en hulp bij het oplossen van toegankelijkheidsproblemen.
+
+[Lees meer over de Frameless aanpak](/#aanpak)
diff --git a/apps/frameless.io/pages/index/docs/toegankelijkheid/partner-in-toegankelijkheid.mdx b/apps/frameless.io/pages/index/docs/toegankelijkheid/partner-in-toegankelijkheid.mdx
new file mode 100644
index 00000000..1079fc9d
--- /dev/null
+++ b/apps/frameless.io/pages/index/docs/toegankelijkheid/partner-in-toegankelijkheid.mdx
@@ -0,0 +1,9 @@
+import { AccessiblityPartner } from "../../illustrations/AccessiblityPartner";
+
+# Partner in toegankelijkheid
+
+Met de komst van de European Accessibility Act wordt het toegankelijk maken van een website of webapplicatie nóg belangrijker. Momenteel is digitale toegankelijkheid al verplicht voor overheidsorganisaties, maar in 2025 wordt dit ook verplicht voor alle andere bedrijven.
+
+Benieuwd hoe je ervoor staat, of hulp nodig om WCAG-complient te worden? Frameless kan WCAG-EM audits uitvoeren, tips geven en meehelpen bij het verbeteren van de gevonden problemen en na een aantal maanden een hertest doen. Zo ben je er helemaal klaar voor!
+
+
diff --git a/apps/frameless.io/pages/index/docs/toegankelijkheid/toegankelijkheidsverklaring.mdx b/apps/frameless.io/pages/index/docs/toegankelijkheid/toegankelijkheidsverklaring.mdx
new file mode 100644
index 00000000..7176f968
--- /dev/null
+++ b/apps/frameless.io/pages/index/docs/toegankelijkheid/toegankelijkheidsverklaring.mdx
@@ -0,0 +1,5 @@
+# Het uitvoeren van een WCAG audit
+
+Onderzoek doen naar de toegankelijkheid van je website is nodig, maar niet altijd makkelijk. Wij hebben de expertise in huis voor het doen van audits en het opleveren van een toegankelijkheidsverklaring.
+
+We maken een onderzoeksrapport met de gevonden problemen en verwijzen naar [de WCAG paginas van NL Design System](https://nldesignsystem.nl/wcag/) die helpen met het zelf testen en oplossen van de problemen.
diff --git a/apps/frameless.io/pages/index/docs/toegankelijkheid/wcag-eend.mdx b/apps/frameless.io/pages/index/docs/toegankelijkheid/wcag-eend.mdx
new file mode 100644
index 00000000..2df70be7
--- /dev/null
+++ b/apps/frameless.io/pages/index/docs/toegankelijkheid/wcag-eend.mdx
@@ -0,0 +1,7 @@
+# Toegankelijkheid in onze eigen projecten
+
+Wanneer wij een project voor je doen willen we natuurlijk dat dit voor alle gebruikers goed werkt. Daarom doen we standaard een onderzoek volgens de WCAG-EM methode van het W3C. Het onderzoeksrapport maakt bij ons standaard onderdeel uit van de opdracht. En wanneer je dat wilt, dan maken we er ook gewoon gelijk een toegankelijkheidsverklaring van.
+
+## Mogen wij van WCAG-eend dat wel doen?
+
+Volgens [DigiToeganklijk](https://www.digitoegankelijk.nl/toegankelijkheidsverklaring/onderzoek#zelf) wel, wij hebben namelijk de technische kennis, alle benodigde documentatie en het gereedschap in huis!
diff --git a/apps/frameless.io/pages/index/illustrations/AccessiblityPartner.tsx b/apps/frameless.io/pages/index/illustrations/AccessiblityPartner.tsx
new file mode 100644
index 00000000..6fc12220
--- /dev/null
+++ b/apps/frameless.io/pages/index/illustrations/AccessiblityPartner.tsx
@@ -0,0 +1,25 @@
+import { Figure, FigureCaption, FigureProps, Image } from '@utrecht/component-library-react';
+
+export const AccessiblityPartner = (props: FigureProps) => {
+ const labelId = '49skj12kdnmf';
+ const descriptionId = '043o23jenflskdqasld';
+
+ return (
+
+
+
+ Speelse schets van een vrouw die met vergrootglas naar een webpagina kijkt
+
+
+ Illustratie in de huisstijlkleuren van Frameless. Links staat een vrouw met zwart lang haar met een knot
+ bovenop, sportief gekleed in een t-shirt en korte broek. Rechts staan 2 frames alsof het een webpagina is en een
+ code blokje. In de achtergrond decoratieve golven.
+
+
+ );
+};
diff --git a/apps/frameless.io/pages/index/illustrations/Coffee.tsx b/apps/frameless.io/pages/index/illustrations/Coffee.tsx
new file mode 100644
index 00000000..bdab4e97
--- /dev/null
+++ b/apps/frameless.io/pages/index/illustrations/Coffee.tsx
@@ -0,0 +1,20 @@
+import { Figure, FigureCaption, FigureProps, Image } from '@utrecht/component-library-react';
+
+export const Coffee = (props: FigureProps) => {
+ const labelId = '0934wdfhksfjsas';
+ const descriptionId = 'lhjeroqawpodfg12';
+
+ return (
+
+
+
+ Speelse schets van een man met een enorme kop koffie
+
+
+ Illustratie in de huisstijlkleuren van Frameless. De man kijkt gelukzalig terwijl hij achterover leunt van de
+ enorme bak koffie die groter is dan hij. De koffie klotst over de rand en de man steekt zijn linker been uit
+ alsof hij zijn balans bijna niet kan houden.
+
+
+ );
+};
diff --git a/apps/frameless.io/pages/index/illustrations/ImplementationPartner.tsx b/apps/frameless.io/pages/index/illustrations/ImplementationPartner.tsx
new file mode 100644
index 00000000..43d2e0c2
--- /dev/null
+++ b/apps/frameless.io/pages/index/illustrations/ImplementationPartner.tsx
@@ -0,0 +1,25 @@
+import { Figure, FigureCaption, FigureProps, Image } from '@utrecht/component-library-react';
+
+export const ImplementationPartner = (props: FigureProps) => {
+ const labelId = 'oisdfhsdjfkwqsnd';
+ const descriptionId = '12ukebaksjd4jd';
+ return (
+
+
+
+ Speelse schets van een vrouw met haar telefoon in de hand achter een bureau.
+
+
+ Illustratie in de huisstijlkleuren van Frameless. Links zit een vrouw met kort zwart haar en een oorbel in, ze
+ heeft een pluizige trui aan. Ze zit op een comfortabele bureaustoel met wielen en steekt haar benen voor zich
+ uit. Rechts staat haar bueau met een beeldscherm, glas water en een vaas met bloemen. Boven het bureau hangt een
+ ronde transparante lamp met een zichtbaar peertje erin.
+
+
+ );
+};
diff --git a/apps/frameless.io/pages/index/illustrations/TechnicalPartner.tsx b/apps/frameless.io/pages/index/illustrations/TechnicalPartner.tsx
new file mode 100644
index 00000000..bf3df808
--- /dev/null
+++ b/apps/frameless.io/pages/index/illustrations/TechnicalPartner.tsx
@@ -0,0 +1,25 @@
+import { Figure, FigureCaption, FigureProps, Image } from '@utrecht/component-library-react';
+
+export const TechnicalPartner = (props: FigureProps) => {
+ const labelId = '09u2309rejf';
+ const descriptionId = 'kjdqwmednas';
+ return (
+
+
+
+ Speelse schets van twee mensen die samenwerken
+
+
+ Illustratie in de huisstijlkleuren van Frameless. Links staat vrouw met plannen onder haar arm, licht haar in
+ een paardenstaart en een blije uitdrukking. Rechts staat een man met donker haar en een snor. Hij heeft een
+ laptop in zijn hand met het icoon van een peer erop. Hij draagt een gestippelde grote trui en driekwartbroek. Op
+ de achtergrond zie je decoratieve golven.
+
+
+ );
+};
diff --git a/apps/frameless.io/pages/index/illustrations/Workshops.tsx b/apps/frameless.io/pages/index/illustrations/Workshops.tsx
new file mode 100644
index 00000000..efa1f601
--- /dev/null
+++ b/apps/frameless.io/pages/index/illustrations/Workshops.tsx
@@ -0,0 +1,20 @@
+import { Figure, FigureCaption, FigureProps, Image } from '@utrecht/component-library-react';
+
+export const Workshops = (props: FigureProps) => {
+ const labelId = 'zkjd23euhakds';
+ const descriptionId = '091ue0dakj';
+
+ return (
+
+
+
+ Speelse schets van een vrouw met allemaal spraakbubbels en vraagtekens.
+
+
+ Illustratie in de huisstijlkleuren van Frameless. In het midden staat vrouw met een ronde bril, blouse met korte
+ mouwen en broek met een strepenprint. Ze maakt een dansende beweging en staat tussen vraagtekens en lege
+ spraakbubbels.
+
+
+ );
+};
diff --git a/apps/frameless.io/public/font/fira-sans-latin-400-normal.woff2 b/apps/frameless.io/public/font/fira-sans-latin-400-normal.woff2
new file mode 100644
index 00000000..d31eba84
Binary files /dev/null and b/apps/frameless.io/public/font/fira-sans-latin-400-normal.woff2 differ
diff --git a/apps/frameless.io/public/font/fira-sans-latin-600-normal.woff2 b/apps/frameless.io/public/font/fira-sans-latin-600-normal.woff2
new file mode 100644
index 00000000..c938f864
Binary files /dev/null and b/apps/frameless.io/public/font/fira-sans-latin-600-normal.woff2 differ
diff --git a/apps/frameless.io/public/font/oswald-latin-400-normal.woff2 b/apps/frameless.io/public/font/oswald-latin-400-normal.woff2
new file mode 100644
index 00000000..df40e60a
Binary files /dev/null and b/apps/frameless.io/public/font/oswald-latin-400-normal.woff2 differ
diff --git a/apps/frameless.io/public/svg/accessibility-partner.svg b/apps/frameless.io/public/svg/accessibility-partner.svg
new file mode 100644
index 00000000..d3db9ed6
--- /dev/null
+++ b/apps/frameless.io/public/svg/accessibility-partner.svg
@@ -0,0 +1,104 @@
+
+
\ No newline at end of file
diff --git a/apps/frameless.io/public/svg/coffee.svg b/apps/frameless.io/public/svg/coffee.svg
new file mode 100644
index 00000000..e595aafd
--- /dev/null
+++ b/apps/frameless.io/public/svg/coffee.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/apps/frameless.io/public/svg/implementation-partner.svg b/apps/frameless.io/public/svg/implementation-partner.svg
new file mode 100644
index 00000000..73d97641
--- /dev/null
+++ b/apps/frameless.io/public/svg/implementation-partner.svg
@@ -0,0 +1,116 @@
+
+
\ No newline at end of file
diff --git a/apps/frameless.io/public/svg/technical-partner.svg b/apps/frameless.io/public/svg/technical-partner.svg
new file mode 100644
index 00000000..4e6ecd16
--- /dev/null
+++ b/apps/frameless.io/public/svg/technical-partner.svg
@@ -0,0 +1,22 @@
+
+
\ No newline at end of file
diff --git a/apps/frameless.io/public/svg/workshops.svg b/apps/frameless.io/public/svg/workshops.svg
new file mode 100644
index 00000000..3da93a02
--- /dev/null
+++ b/apps/frameless.io/public/svg/workshops.svg
@@ -0,0 +1,112 @@
+
+
\ No newline at end of file
diff --git a/apps/frameless.io/renderer/+config.ts b/apps/frameless.io/renderer/+config.ts
new file mode 100644
index 00000000..03c197ad
--- /dev/null
+++ b/apps/frameless.io/renderer/+config.ts
@@ -0,0 +1,19 @@
+import type { Config } from 'vike/types';
+
+// https://vike.dev/config
+export default {
+ // https://vike.dev/clientRouting
+ clientRouting: false,
+ // https://vike.dev/meta
+ meta: {
+ // Define new setting 'title'
+ title: {
+ env: { server: true, client: false },
+ },
+ // Define new setting 'description'
+ description: {
+ env: { server: true },
+ },
+ },
+ hydrationCanBeAborted: true,
+} satisfies Config;
diff --git a/apps/frameless.io/renderer/+onRenderClient.tsx b/apps/frameless.io/renderer/+onRenderClient.tsx
new file mode 100644
index 00000000..2889da80
--- /dev/null
+++ b/apps/frameless.io/renderer/+onRenderClient.tsx
@@ -0,0 +1,33 @@
+import ReactDOM from 'react-dom/client';
+import type { OnRenderClientAsync } from 'vike/types';
+import { Layout } from './Layout';
+import { getPageTitle } from './getPageTitle';
+
+let root: ReactDOM.Root;
+
+// https://vike.dev/onRenderClient
+export const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType => {
+ const { Page } = pageContext;
+
+ // This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
+ // to support SPA
+ if (!Page) throw new Error('My onRenderClient() hook expects pageContext.Page to be defined');
+
+ const container = document.getElementById('react-root');
+ if (!container) throw new Error('DOM element #react-root not found');
+
+ const page = (
+
+
+
+ );
+ if (pageContext.isHydration) {
+ root = ReactDOM.hydrateRoot(container, page);
+ } else {
+ if (!root) {
+ root = ReactDOM.createRoot(container);
+ }
+ root.render(page);
+ }
+ document.title = getPageTitle(pageContext);
+};
diff --git a/apps/frameless.io/renderer/+onRenderHtml.tsx b/apps/frameless.io/renderer/+onRenderHtml.tsx
new file mode 100644
index 00000000..f932ec30
--- /dev/null
+++ b/apps/frameless.io/renderer/+onRenderHtml.tsx
@@ -0,0 +1,46 @@
+import logoUrl from '@frameless/assets/src/logo-frameless.svg';
+import ReactDOMServer from 'react-dom/server';
+import { dangerouslySkipEscape, escapeInject } from 'vike/server';
+import type { OnRenderHtmlAsync } from 'vike/types';
+import { Layout } from './Layout';
+import { getPageTitle } from './getPageTitle';
+
+// https://vike.dev/onRenderHtml
+export const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType => {
+ const { Page } = pageContext;
+
+ // This onRenderHtml() hook only supports SSR, see https://vike.dev/render-modes for how to modify
+ // onRenderHtml() to support SPA
+ if (!Page) throw new Error('My onRenderHtml() hook expects pageContext.Page to be defined');
+
+ // Alternatively, we can use an HTML stream, see https://vike.dev/streaming
+ const pageHtml = ReactDOMServer.renderToString(
+
+
+ ,
+ );
+
+ const title = getPageTitle(pageContext);
+ const desc = pageContext.data?.description || pageContext.config.description || 'Demo of using Vike';
+
+ const documentHtml = escapeInject`
+
+
+
+
+
+
+
+
+
+ ${title}
+
+
+
${dangerouslySkipEscape(pageHtml)}
+
+ `;
+
+ return {
+ documentHtml,
+ };
+};
diff --git a/apps/frameless.io/renderer/Layout.tsx b/apps/frameless.io/renderer/Layout.tsx
new file mode 100644
index 00000000..0b6c4dd1
--- /dev/null
+++ b/apps/frameless.io/renderer/Layout.tsx
@@ -0,0 +1,16 @@
+import { Document } from '@utrecht/component-library-react';
+import clsx from 'clsx';
+import React from 'react';
+import type { PageContext } from 'vike/types';
+import { PageContextProvider } from './usePageContext';
+import './global.css';
+
+export const Layout = ({ children, pageContext }: { children: React.ReactNode; pageContext: PageContext }) => {
+ return (
+
+
+ {children}
+
+
+ );
+};
diff --git a/apps/frameless.io/renderer/getPageTitle.ts b/apps/frameless.io/renderer/getPageTitle.ts
new file mode 100644
index 00000000..fca1984c
--- /dev/null
+++ b/apps/frameless.io/renderer/getPageTitle.ts
@@ -0,0 +1,12 @@
+import type { PageContext } from 'vike/types';
+
+export const getPageTitle = (pageContext: PageContext): string => {
+ const title =
+ // Title defined dynamically by data()
+ pageContext.data?.title ||
+ // Title defined statically by /pages/some-page/+title.js (or by `export default { title }` in /pages/some-page/+config.js)
+ // The setting 'pageContext.config.title' is a custom setting we defined at ./+config.ts
+ pageContext.config.title ||
+ 'Frameless';
+ return title;
+};
diff --git a/apps/frameless.io/renderer/global.css b/apps/frameless.io/renderer/global.css
new file mode 100644
index 00000000..e23ea92e
--- /dev/null
+++ b/apps/frameless.io/renderer/global.css
@@ -0,0 +1,161 @@
+@import "@frameless/design-tokens/dist/index.css";
+@import "@utrecht/component-library-css/dist/index.css";
+@import "@frameless/components-css/dist/index.css";
+
+@font-face {
+ font-display: swap;
+ font-family: "Fira Sans";
+ font-style: normal;
+ font-weight: 400;
+ src:
+ local("Fira Sans"),
+ url("/font/fira-sans-latin-400-normal.woff2") format("woff2");
+ unicode-range: U+000-5FF; /* Downloads only latin glyphs */
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Fira Sans";
+ font-style: normal;
+ font-weight: 600;
+ src:
+ local("Firava"),
+ url("/font/fira-sans-latin-600-normal.woff2") format("woff2");
+ unicode-range: U+000-5FF; /* Downloads only latin glyphs */
+}
+
+@font-face {
+ font-display: swap;
+ font-family: "Oswald";
+ font-style: normal;
+ font-weight: 400;
+ src: url("/font/oswald-latin-400-normal.woff2") format("woff2");
+ unicode-range: U+000-5FF; /* Downloads only latin glyphs */
+}
+
+.frameless-theme {
+ --utrecht-space-around: 1;
+ --frameless-illustration-color: #122529;
+ --frameless-illustration-background-color: white;
+ --frameless-illustration-floor-color: #a9c7cb;
+ --frameless-illustration-background-detail-color: #295960;
+ --frameless-illustration-detail-color: #51929a;
+ --utrecht-logo-min-block-size: auto;
+ --utrecht-logo-min-inline-size: 42px;
+
+ hyphenate-limit-chars: 12 8 4;
+ hyphenate-limit-lines: 2;
+ hyphens: auto;
+ overflow-wrap: break-word;
+ word-break: break-word;
+}
+
+.utrecht-heading-1,
+.utrecht-heading-2,
+.utrecht-heading-3,
+.utrecht-heading-4,
+.utrecht-heading-5,
+.utrecht-heading-6 {
+ text-wrap: balance;
+}
+
+.utrecht-logo > .frameless-logo-image__svg {
+ display: block;
+}
+
+.utrecht-paragraph:last-child {
+ --utrecht-paragraph-margin-block-end: 0;
+}
+
+.utrecht-heading-3:first-child {
+ --utrecht-heading-3-margin-block-start: 0;
+}
+
+.utrecht-nav-bar {
+ margin-block-start: 32px;
+}
+
+details[open] summary {
+ margin-block-end: 1.5rem;
+}
+
+.utrecht-img {
+ max-inline-size: 100%;
+}
+
+.frameless-illustration {
+ max-inline-size: 22rem;
+ padding-block-end: 1.5rem;
+ padding-block-start: 1.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+ .frameless-theme {
+ --utrecht-document-background-color: var(--utrecht-document-inverse-background-color);
+ --utrecht-document-color: var(--utrecht-document-inverse-color);
+ --utrecht-paragraph-color: var(--utrecht-document-inverse-color);
+ --utrecht-paragraph-lead-color: var(--utrecht-document-inverse-color);
+ --utrecht-heading-1-color: var(--utrecht-document-inverse-color);
+ --utrecht-heading-2-color: var(--utrecht-document-inverse-color);
+ --utrecht-heading-3-color: var(--utrecht-document-inverse-color);
+ --utrecht-heading-4-color: var(--utrecht-document-inverse-color);
+ --utrecht-heading-5-color: var(--utrecht-document-inverse-color);
+ --utrecht-heading-6-color: var(--utrecht-document-inverse-color);
+ --utrecht-link-color: var(--frameless-color-petrol-70);
+ --utrecht-link-hover-color: var(--frameless-color-petrol-80);
+ --utrecht-link-text-decoration-color: currentColor;
+ --frameless-card-background-color: var(--utrecht-document-inverse-background-color);
+ --frameless-card-border-color: var(--frameless-color-gray-60);
+ --frameless-card-border-width: 1px;
+ --frameless-card-box-shadow-color: var(--frameless-color-black);
+ --frameless-section-alternate-background-color: var(--frameless-color-petrol-20);
+ --frameless-section-alternate-card-background-color: var(--utrecht-document-inverse-background-color);
+ --frameless-section-alternate-card-border-width: 1px;
+ --frameless-section-alternate-card-border-color: var(--frameless-color-gray-60);
+ --utrecht-unordered-list-marker-color: white;
+ summary {
+ color: var(--utrecht-document-inverse-color);
+ }
+
+ .frameless-illustration--backdrop {
+ background-color: hsla(0 0% 100%);
+ border-radius: 40px;
+ padding-block-end: 16px;
+ padding-block-start: 16px;
+ padding-inline-end: 16px;
+ padding-inline-start: 16px;
+ }
+ }
+}
+
+@media screen and (width <= 400px) {
+ .frameless-theme {
+ --frameless-logo-text-font-size: 2rem;
+ --utrecht-heading-2-font-size: 1.5rem;
+ --utrecht-heading-3-font-size: 1.4rem;
+ --utrecht-heading-4-font-size: 1.3rem;
+ --utrecht-heading-5-font-size: 1.2rem;
+ --utrecht-heading-6-font-size: 1rem;
+ --utrecht-logo-min-inline-size: 32px;
+ --frameless-logo-wrapper-gap: 1ch;
+ }
+}
+
+@media screen and (width <= 350px) {
+ .frameless-theme {
+ --frameless-logo-wrapper-flex-direction: column;
+ --frameless-logo-wrapper-gap: 1ch;
+ }
+
+ .frameless-logo__wrapper .utrecht-logo {
+ display: none;
+ }
+}
+
+@media screen and (width <= 300px) {
+ .frameless-page-header__container {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ gap: 1rem;
+ }
+}
diff --git a/apps/frameless.io/renderer/types.ts b/apps/frameless.io/renderer/types.ts
new file mode 100644
index 00000000..534dfbce
--- /dev/null
+++ b/apps/frameless.io/renderer/types.ts
@@ -0,0 +1,27 @@
+import React from 'react';
+
+// https://vike.dev/pageContext#typescript
+declare global {
+ export namespace Vike {
+ export interface PageContext {
+ Page: () => React.ReactElement;
+ data?: {
+ /** Value for defined dynamically by by /pages/some-page/+data.js */
+ title?: string;
+ /** Value for <meta name="description"> defined dynamically */
+ description?: string;
+ };
+ config: {
+ /** Value for <title> defined statically by /pages/some-page/+title.js (or by `export default { title }` in /pages/some-page/+config.js) */
+ title?: string;
+ /** Value for <meta name="description"> defined statically */
+ description?: string;
+ };
+ /** https://vike.dev/render */
+ abortReason?: string;
+ }
+ }
+}
+
+// Tell TypeScript this file isn't an ambient module
+export {};
diff --git a/apps/frameless.io/renderer/usePageContext.tsx b/apps/frameless.io/renderer/usePageContext.tsx
new file mode 100644
index 00000000..92a91854
--- /dev/null
+++ b/apps/frameless.io/renderer/usePageContext.tsx
@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+import type { PageContext } from 'vike/types';
+
+const Context = React.createContext<PageContext>(undefined as unknown as PageContext);
+
+export const PageContextProvider = ({
+ pageContext,
+ children,
+}: {
+ pageContext: PageContext;
+ children: React.ReactNode;
+}) => {
+ return <Context.Provider value={pageContext}>{children}</Context.Provider>;
+};
+
+/** https://vike.dev/usePageContext */
+// eslint-disable-next-line react-refresh/only-export-components
+export const usePageContext = () => {
+ const pageContext = useContext(Context);
+ return pageContext;
+};
diff --git a/apps/frameless.io/rollup.config.mjs b/apps/frameless.io/rollup.config.mjs
deleted file mode 100644
index b9bd3f5f..00000000
--- a/apps/frameless.io/rollup.config.mjs
+++ /dev/null
@@ -1,57 +0,0 @@
-import postcss from "rollup-plugin-postcss";
-import discardDuplicates from "postcss-discard-duplicates";
-import purgecss from "@fullhuman/postcss-purgecss";
-import { rollupPluginHTML as html } from "@web/rollup-plugin-html";
-import copy from "rollup-plugin-copy";
-
-export default [
- {
- input: "src/index.scss",
- output: {
- dir: "./dist",
- compact: true,
- },
- plugins: [
- // Transform SCSS to one CSS file with only used CSS
- postcss({
- extensions: [".css", ".scss"],
- minimize: true,
- plugins: [
- discardDuplicates(),
- purgecss({
- content: ["./src/index.html"],
- }),
- ],
- extract: true,
- }),
- // Copy html file to enable replacing of the scss import to the minified css file created by the previous step
- // This enables us to have the html plugin automatically build a hash for the minified css file in the next step
- copy({
- targets: [
- {
- src: "./src/index.html",
- dest: "./tmp",
- transform: (contents) =>
- contents.toString().replace("./index.scss", "../dist/index.css"),
- },
- // Copy font-files in a directory expected by the font-css files
- {
- src: "./node_modules/@fontsource/fira-sans/files",
- dest: "./dist/assets",
- },
- {
- src: "./node_modules/@fontsource/oswald/files",
- dest: "./dist/assets",
- },
- ],
- }),
- ],
- },
- // Use the html file with a reference to the minified css
- // And create a hashed CSS reference to ensure new versions will reach all users regardless of cache settings
- {
- input: "./tmp/index.html",
- output: { dir: "./dist" },
- plugins: [html()],
- },
-];
diff --git a/apps/frameless.io/server/tsconfig.json b/apps/frameless.io/server/tsconfig.json
new file mode 100644
index 00000000..a8441ea1
--- /dev/null
+++ b/apps/frameless.io/server/tsconfig.json
@@ -0,0 +1,6 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "noEmit": true
+ }
+}
diff --git a/apps/frameless.io/src/font.scss b/apps/frameless.io/src/font.scss
deleted file mode 100644
index aed5ec84..00000000
--- a/apps/frameless.io/src/font.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "~@fontsource/fira-sans/200";
-@import "~@fontsource/fira-sans/200-italic";
-@import "~@fontsource/fira-sans/300";
-@import "~@fontsource/fira-sans/300-italic";
-@import "~@fontsource/fira-sans/400";
-@import "~@fontsource/fira-sans/400-italic";
-@import "~@fontsource/fira-sans/500";
-@import "~@fontsource/fira-sans/500-italic";
-@import "~@fontsource/fira-sans/600";
-@import "~@fontsource/fira-sans/600-italic";
-@import "~@fontsource/fira-sans/700";
-@import "~@fontsource/fira-sans/700-italic";
-@import "~@fontsource/fira-sans/800";
-@import "~@fontsource/fira-sans/800-italic";
-@import "~@fontsource/fira-sans/900";
-@import "~@fontsource/fira-sans/900-italic";
-@import "~@fontsource/oswald/200";
-@import "~@fontsource/oswald/300";
-@import "~@fontsource/oswald/400";
-@import "~@fontsource/oswald/500";
-@import "~@fontsource/oswald/600";
-@import "~@fontsource/oswald/700";
diff --git a/apps/frameless.io/src/index.html b/apps/frameless.io/src/index.html
deleted file mode 100644
index 71cb7ab7..00000000
--- a/apps/frameless.io/src/index.html
+++ /dev/null
@@ -1,703 +0,0 @@
-<!doctype html>
-<html dir="ltr" lang="nl" class="frameless-theme frameless-theme--media-query">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link rel="preload" href="/assets/files/fira-sans-latin-600-normal.woff2" as="font" />
- <link rel="preload" href="/assets/files/oswald-latin-400-normal.woff2" as="font" />
- <link rel="preload" href="/assets/files/fira-sans-latin-400-normal.woff2" as="font" />
- <link rel="stylesheet" type="text/css" href="./index.scss" />
- <title>Frameless — experts in samenwerken aan websites
-
-
-
-
-
-
- Technisch partner voor toegankelijke, gebruiksvriendelijke webapplicaties.
-
-
- Frameless ontzorgt bij implementatie, beheer, ondersteuning en toegankelijkheid. We werken Agile en
- zijn ervaren in transitie van bestaande systemen naar gebruiksvriendelijke, onderhoudbare oplossingen
- volgens de Common Ground principes.
-
-
-
-
- Speelse schets van twee mensen die samenwerken
-
-
- Illustratie in de huisstijlkleuren van Frameless. Links staat vrouw met plannen onder haar arm, licht
- haar in een paardenstaart en een blije uitdrukking. Rechts staat een man met donker haar en een snor.
- Hij heeft een laptop in zijn hand met het icoon van een peer erop. Hij draagt een gestippelde grote trui
- en driekwartbroek. Op de achtergrond zie je decoratieve golven.
-
-
-
-
- Gebruiksvriendelijkheid voorop, voor eindgebruikers én redactie.
-
-
- Expertise in bouwen en onderhouden van robuuste webapplicaties.
-
-
- WCAG-EM audits en hulp bij het oplossen van toegankelijkheidsproblemen.
-
- Sta je voor een technische of organistorische uitdaging? Na een goede kop koffie zijn wij een ideale
- sparringspartner!
-
-
-
-
- Speelse schets van een man met een enorme kop koffie
-
-
- Illustratie in de huisstijlkleuren van Frameless. De man kijkt gelukzalig terwijl hij achterover leunt van
- de enorme bak koffie die groter is dan hij. De koffie klotst over de rand en de man steekt zijn linker
- been uit alsof hij zijn balans bijna niet kan houden.
-
-
-
- Tijdens een kennismaking bespreken we waar jullie mee bezig zijn, en bekijken we op welke manier Frameless
- of ons netwerk kunnen helpen.
-
-
Plan van aanpak
-
- We onderzoeken welke oplossingen, technieken en expertise er in de organisatie aanwezig is om daarna met een
- plan van aanpak te komen voor migratie of vernieuwing. Dat doen we graag samen met betrokken expertise uit
- de organisatie én andere leveranciers.
-
-
Ontzorgen bij uitvoering
-
- We helpen graag bij het aansturen van leveranciers of teams bij het uitvoeren of aansturen en zorgen dat het
- in de organisatie ingebed wordt. Daarnaast hebben we zelf mensen in dienst en experts in ons netwerk die de
- opdracht desgewenst kunnen uitvoeren en het eindresultaat op toegankelijkheid kunnen toetsen.
-
-
Efficiënt en herkenbaar
-
- We zorgen dat de oplossing aansluit bij bestaande oplossingen, en doen ons best om dubbel werk te voorkomen.
- Met gebruik van de NL Design System aanpak zorgen we dat we hergebruiken waar mogelijk en voeren we
- verbeteringen door op een manier dat ook anderen er gebruik van kunnen maken.
-
- Met de komst van de European Accessibility Act wordt het toegankelijk maken van een website of webapplicatie
- nóg belangrijker. Momenteel is digitale toegankelijkheid al verplicht voor overheidsorganisaties, maar in
- 2025 wordt dit ook verplicht voor alle andere bedrijven.
-
-
- Benieuwd hoe je ervoor staat, of hulp nodig om WCAG-complient te worden? Frameless kan WCAG-EM audits
- uitvoeren, tips geven en meehelpen bij het verbeteren van de gevonden problemen en na een aantal maanden een
- hertest doen. Zo ben je er helemaal klaar voor!
-
-
-
-
- Speelse schets van een vrouw die met vergrootglas naar een webpagina kijkt
-
-
- Illustratie in de huisstijlkleuren van Frameless. Links staat een vrouw met zwart lang haar met een knot
- bovenop, sportief gekleed in een t-shirt en korte broek. Rechts staan 2 frames alsof het een webpagina is
- en een code blokje. In de achtergrond decoratieve golven.
-
-
-
Als Frameless ondersteunen wij graag jouw organisatie bij:
-
-
-
-
-
WCAG audit
-
- Onderzoek doen naar de toegankelijkheid van je website is nodig, maar niet altijd makkelijk. Wij
- hebben de expertise in huis voor het doen van audits en het opleveren van een
- toegankelijkheidsverklaring.
-
-
- We maken een onderzoeksrapport met de gevonden problemen en verwijzen naar
- de WCAG paginas van NL Design System
- die helpen met het zelf testen en oplossen van de problemen.
-
- Wanneer wij een project voor je doen willen we natuurlijk dat hij voor alle gebruikers goed werkt.
- Daarom doen we standaard een onderzoek volgens de WCAG-EM methode van het W3C. Het onderzoeksrapport
- is bij ons onderdeel van de opdracht en wanneer je dat wil maken we er ook gewoon gelijk een
- toegankelijkheidsverklaring van.
-
-
Mogen wij van WCAG-eend dat wel doen?
-
- Volgens
- DigiToeganklijk
- wel, wij hebben de technische kennis, alle benodigde documentatie en het gereedschap in huis!
-
-
-
-
-
-
-
-
-
-
Wij werken aan
-
- Herbruikbare componenten onafhankelijk van huisstijl, met een Headless CMS en slimme API's, daar mag je
- ons voor wakker maken!
-
-
- Sinds de oprichting van Frameless in 2013 hebben we diverse opdrachten mogen doen, de ene nog leuker en
- ingewikkelder dan de ander. Hieronder hebben we er een aantal voor je uitgelicht
-
-
-
-
-
-
NL Design System
-
- Frameless heeft al aan meerdere white-label design systems mogen werken, zoals bijvoorbeeld voor
- Backbase
-
-
- Maar het meest trots zijn we natuurlijk op onze bijdrage aan
- NL Design System
- Waar Robbert en Yolijn als Product Manager en Design System lead samenwerken aan het mooiste design
- system van Nederland!
-
-
-
-
-
-
Headless CMS
-
- 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.
-
- Meer dan 80 componenten ontwikkeld voor
- Utrecht Design System
- in verschillende technieken: als CSS, HTML, React, Angular, Vue en als Web Component.
-
-
- Deze componenten worden inmiddels ook veel gebruikt door uiteenlopende projecten in de NL Design
- System community.
-
-
-
-
-
-
Den Haag Design System
-
- Begeleiding van het
- Den Haag Design System
- team en leveranciers met open source bouwen volgens de NL Design System architectuur.
-
-
-
-
-
-
Digitaal Loket van gemeente Utrecht
-
- Ontwikkeling van CMS voor de Producten en Diensten Catalogus, en de nieuwe website ontwikkelen als
- headless frontend op basis van NL Design System.Digitaal Loket van gemeente Utrecht.
-
-
-
-
-
-
- Meer projecten
-
-
-
-
-
- Website voor Veiligheid Toezicht en Handhaving
-
- Wij maakten hiervoor in samenwerking met de beleidsmedewerkers een uitbreiding op het CMS voor
- Producten en Diesten Catalogus en NL Design System.
-
-
-
-
-
-
Huwelijksplanner
-
- Front-end ontwikkeling voor de Huwelijksplanner CMS op basis van NL Design System componenten.
-
-
-
-
-
-
WMEBV Gebruikerstests
-
- gemeente Voorbeeld: ontwikkeling van demo-website waar Vereniging van Nederlandse Gemeenten (VNG) gebruikerstesten
- doet, om gemeenten op weg te helpen met voldoen aan de WMEBV met NL Design System.
-
-
-
-
-
-
Rotterdam Design System
-
- We hebben voor gemeente Rotterdam een Proof-of-concept
- Rotterdam Design System
- gemaakt. Daarnaast hebben we onderzocht op welke manier dit design system in het interessante
- Rotterdam ecosysteem met Mendix en Apache Wicket zou passen.
-
-
-
-
-
-
OpenCatelogi
-
- We hebben
- OpenCatalogi.nl
- 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.
-
-
-
-
-
-
-
-
-
-
-
Kennis maken?
-
-
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
- hello@frameless.io, dan
- spreken we snel een keer af!
-
-