Footer, ConNext Website

React / MDX usage

Mount as Docusaurus theme swizzle

The Conduction preset ships the canal scene as theme/Footer/index.jsx. Sites configure the link grid through themeConfig.footer.links; the skyline, kade, boats, and wave layer come from canal-footer.css + canal-footer.js loaded on every page that uses the preset.

docusaurus.config.js

const {createConfig} = require('@conduction/docusaurus-preset');

module.exports = createConfig({
  title: 'ConNext',
  url: 'https://connext.conduction.nl',
  footer: {
    links: [
      {title: 'Apps', items: [
        {label: 'OpenCatalogi',  href: 'https://opencatalogi...'},
        {label: 'OpenRegister',  href: 'https://openregister...'},
        /* ... */
      ]},
      {title: 'Solutions', items: [...]},
      {title: 'Resources', items: [...]},
      {title: 'Conduction', items: [...]},
    ],
    copyright: 'Conduction B.V. · KvK 76741850 · BTW NL860784241B01 · IBAN NL51 ABNA 0868951550 · Lauriergracht 14h, 1016 RR Amsterdam · © 2026',
  },
});

Static assets the swizzle expects

/lib/canal-footer.css scoped under .canal-footer
/lib/canal-footer.js randomises the skyline + drives the boat-game
Templates for houses (5) + ships (4) ride below the footer as raw HTML so canal-footer.js can .content-clone them — the swizzle injects them via dangerouslySetInnerHTML.