theme.config.tsx

// Copyright 2025 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
// SPDX-License-Identifier: MIT

import React from 'react'
import { DocsThemeConfig, useConfig } from 'nextra-theme-docs'
import Image from 'next/image'
import { useRouter } from 'next/router'
import Footer from './src/components/Footer'

const config: DocsThemeConfig = {
    head() {
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const { asPath, defaultLocale, locale } = useRouter()
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const { frontMatter, ...rest } = useConfig()
        const url =
            'http://localhost:3000' +
            (defaultLocale === locale ? asPath : `/${locale}${asPath}`)

        return (
            <>
                <meta property="og:url" content={url} />
                <meta
                    property="og:title"
                    content={
                        (frontMatter.title ?? rest.title) +
                            ' | Badge API Documentation' ||
                        'Badge API Documentation'
                    }
                />
                <title>
                    {(frontMatter.title ?? rest.title) +
                        ' | Badge API Documentation' ||
                        'Badge API Documentation'}
                </title>
            </>
        )
    },
    banner: {
        key: 'development',
        content: '🚧 Diese Dokumentation befindet sich aktuell im Aufbau.',
        dismissible: false,
    },
    i18n: [
        { locale: 'en', name: 'English' },
        { locale: 'de', name: 'Deutsch' },
    ],
    logo: (
        <span className="flex items-center space-x-2">
            <Image
                src="/assets/badge-programm-logo.svg"
                alt="Badge API Icon"
                width={220}
                height={80}
                className="h-12 w-auto md:inline-block"
            />

            <span className="font-space-grotesk text-xl font-bold text-black md:hidden lg:inline-block">
                Badge Programm
            </span>
        </span>
    ),
    sidebar: {
        defaultMenuCollapseLevel: 2,
    },
    project: {
        link: 'https://gitlab.opencode.de/open-code/badgebackend/badge-api',
        icon: (
            <Image
                src="/opencode-icon.svg"
                alt="OpenCode Icon"
                width={32}
                height={32}
            />
        ),
    },
    docsRepositoryBase:
        'https://gitlab.opencode.de/open-code/badgebackend/gitlab-profile/-/tree/main',
    backgroundColor: {
        dark: '12,17,23',
        light: '255,255,255',
    },
    color: {
        hue: {
            dark: 173,
            light: 228,
        },
        saturation: {
            dark: 100,
            light: 100,
        },
        lightness: {
            dark: 45,
            light: 46,
        },
    },
    darkMode: false,
    nextThemes: {
        defaultTheme: 'light',
        forcedTheme: 'light',
    },
    footer: {
        content: <Footer />,
    },
    navbar: {
        extraContent: (
            <div className="flex items-center space-x-4">
                <a
                    href="/de/leichte-sprache"
                    className="text-base font-medium hover:opacity-60"
                >
                    <img
                        src="/assets/leichte-sprache.svg"
                        alt="Leichte Sprache Icon"
                        width={24}
                        height={24}
                        className="h-6 w-auto"
                    />
                </a>
            </div>
        ),
    },
}

export default config