feature: tweaking docusaurus, uitbreiding homepage

Author: tomootes

docusaurus.config.ts

@@ -5,10 +5,14 @@ import type * as Preset from "@docusaurus/preset-classic";
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
-  title: "Developer Portal van de Nederlandse Overheid",
-  tagline:
-    "Eén centrale plek voor de developer die voor of met de overheid ontwikkelt ",
+  title: "Developer.overheid.nl",
+  customFields: {
+    siteName: 'Ontwikkelaarsportaal'
+  },
+  tagline: "Voor de developer bij de overheid",
+  organizationName: "developer.overheid.nl",
   favicon: "favicon.ico",
+  headTags: [],
 
   // Set the production url of your site here
   url: "https://don.apps.digilab.network",
@@ -68,7 +72,17 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: "img/docusaurus-social-card.jpg",
+    image: "img/don-social-card.png",
+    metadata: [
+      {
+        property: 'og:title',
+        content: 'Developer.overheid.nl | Ontwikkelaarsportaal voor de developer bij de overheid',
+      },
+      {
+        name: 'twitter:image:alt', 
+        content: 'Ontwikkelaarsportaal voor de developer bij de overheid; Informatie en tools van de overheid voor ontwikkelaars door Kennisplatform API\'s, Digilab, DSO, Open source werken, BZK, Belastingdienst, Kadaster en andere overheidsorganisaties.',
+      }
+    ],
     navbar: {
       title: "Home",
       items: [
@@ -135,6 +149,20 @@ const config: Config = {
     footer: {
       style: "dark",
       links: [
+        {
+          title: "Mede mogelijk gemaakt door:",
+          items: [
+            {
+              html: `
+              <div class="sponsors">
+                <img class="sponsors__logo" src="/img/logo-bzk.png" alt="Logo van Ministerie van Binnenlandse Zaken en Koninkrijksrelaties" />
+                <img class="sponsors__logo" src="/img/logo-vng.svg" alt="Logo van Vereniging van Nederlandse Gemeenten" />
+                <img class="sponsors__logo" src="/img/Logo_Forum_Standaardisatie_RGB_wit.png" alt="Logo forum voor standaardisatie" />
+              </div>
+              `,
+            }
+          ]
+        },
         {
           title: "Community",
           items: [

package.json

@@ -4,8 +4,10 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
-    "build": "docusaurus build",
+    "start": "pnpm run --if-present --recursive build && npm-run-all start:*",
+    "start:docusaurus": "docusaurus start",
+    "build": "pnpm run --if-present --recursive build && npm-run-all build:*",
+    "build:docusaurus": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -17,7 +19,9 @@
   },
   "dependencies": {
     "@docusaurus/core": "3.7.0",
+    "@docusaurus/plugin-content-docs": "^3.7.0",
     "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/theme-common": "^3.7.0",
     "@docusaurus/theme-mermaid": "^3.7.0",
     "@mdx-js/react": "^3.1.0",
     "@rijkshuisstijl-community/components-react": "1.0.0-alpha.114",

pnpm-lock.yaml

@@ -1,8 +1,25 @@
 {
-  "ifm": {
-    "primary": {
-      "color": {
-        "value": "{rhc.color.primary.500}"
+  "rhc": {
+    "font-family": {
+      "primary": {
+        "value": "RijksoverheidSansWebText, Arial, sans-serif"
+      }
+    },
+    "card-as-link": {
+      "border-color": {
+        "value": "{rhc.color.grijs.300}"
+      },
+      "link-color": {
+        "value": "{rhc.color.donkerblauw.500}"
+      }
+    }
+  },
+  "utrecht": {
+    "link": {
+      "visited": {
+        "color": {
+          "value": "{rhc.color.donkerblauw.500}"
+        }
       }
     }
   }

proprietary/design-tokens/src/tokens.json

@@ -6,15 +6,29 @@ import styles from './styles.module.css';
 type FeatureItem = {
   title: string;
   image?: string;
+  alt?: string;
   description: JSX.Element;
   link: string;
   label?: string;
 };
 
 const FeatureList: FeatureItem[] = [
+  {
+    title: 'Kennisbank',
+    image: '/img/boek-opengeslagen.svg',
+    alt: '',
+    description: (
+      <>
+        Lees artikelen over diverse onderwerpen zoals ...
+      </>
+    ),
+    link: '/docs',
+    label: 'Lees onze artikelen',
+  },
   {
     title: 'Onze community',
     image: '/img/tekstballonnen-met-punten.svg',
+    alt: '',
     description: (
       <>
         Ga in gesprek met andere developers en vind hier getting started guides, tutorials en tools.
@@ -26,6 +40,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: 'Vind een API',
     image: '/img/ict.svg',
+    alt: '',
     description: (
       <>
         Bekijk welke API's er allemaal zijn en kom er achter hoe je jouw oplossing hier op kan laten aansluiten.
@@ -37,6 +52,7 @@ const FeatureList: FeatureItem[] = [
   {
     title: 'Vind een repository',
     image: '/img/computercode.svg',
+    alt: '',
     description: (
       <>
         Vind bestaande repositories om bij aan te haken en ontdek wat er binnen welke organisatie beschikbaar is.
@@ -50,15 +66,6 @@ const FeatureList: FeatureItem[] = [
 function Feature({title, image, description, link, label}: FeatureItem) {
   return (
     <Card href={link} heading={title} description={description} imageSrc={image} linkLabel={label} />
-    // <div className={clsx('col col--4')}>
-    //   <div className="text--center">
-    //     <Svg className={styles.featureSvg} role="img" />
-    //   </div>
-    //   <div className="text--center padding-horiz--md">
-    //     <Heading as="h3">{title}</Heading>
-    //     <p>{description}</p>
-    //   </div>
-    // </div>
   );
 }
 

src/components/HomepageFeatures/index.tsx

@@ -8,4 +8,5 @@
 .row {
   display: flex;
   justify-content: space-between;
+  gap: 1rem;
 }