theme.config.tsx

import React from 'react'
import { DocsThemeConfig, useConfig } from 'nextra-theme-docs'
import Image from 'next/image'
import { useRouter } from 'next/router'
import Link from 'next/link'
import { ExclamationCircleIcon } from '@heroicons/react/24/outline'

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: '🚧 This Documentation is under active development.',
        dismissible: false,
    },
    logo: (
        <span className="flex items-center space-x-2">
            <Image
                src="/badge-api-icon.png"
                alt="Badge API Icon"
                width={220}
                height={80}
                className="h-12 w-auto"
            />
            <span>
                <span className="font-space-grotesk text-xl font-bold text-black">
                    Badge API Documentation
                </span>
            </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/badge-api-documentation',
    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: (
            <div className="flex w-full flex-col items-center text-sm sm:items-start">
                <div className="flex space-x-6">
                    <Link
                        className="text-blue-600 hover:text-blue-400"
                        title="Impressum"
                        href="https://opencode.de/de/impressum"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Imprint
                    </Link>
                    <Link
                        className="text-blue-600 hover:text-blue-400"
                        title="Datenschutz"
                        href="https://opencode.de/de/datenschutz"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Data Privacy
                    </Link>
                    <Link
                        className="text-blue-600 hover:text-blue-400"
                        title="Datenschutz"
                        href="/declaration-on-accessibility"
                    >
                        Declaration on accessibility
                    </Link>
                    <Link
                        className="text-blue-600 hover:text-blue-400"
                        title="Datenschutz"
                        href="mailto:info@opencode.de"
                    >
                        <ExclamationCircleIcon className="-mt-1 mr-1 inline h-4 w-4" />
                        Feedback on barriers
                    </Link>
                </div>
                <p className="mt-4">
                    © {new Date().getFullYear()} Zentrum für Digitale
                    Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH
                </p>
            </div>
        ),
    },
}

export default config