docs: restyle (#4803)

* docs: add twg theme * docs: import theme css
2026-05-22 14:42:16 +00:00 · 2025-12-23 12:13:05 +01:00
parent b2ea78bd45
commit 84d7abb89f
9 changed files with 9 additions and 183 deletions
@@ -34,6 +34,7 @@
        "@docusaurus/faster": "^3.8.1",
        "@docusaurus/preset-classic": "^3.8.1",
        "@mdx-js/react": "^3.0.0",
+        "@widlarzgroup/docusaurus-ui": "^0.0.2",
        "clsx": "^2.0.0",
        "docusaurus-lunr-search": "^3.6.0",
        "prism-react-renderer": "^2.3.0",
@@ -1182,6 +1183,8 @@

    "@webassemblyjs/wast-printer": ["@webassemblyjs/wast-printer@1.14.1", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@xtuc/long": "4.2.2" } }, "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw=="],

+    "@widlarzgroup/docusaurus-ui": ["@widlarzgroup/docusaurus-ui@0.0.2", "", { "peerDependencies": { "@docusaurus/core": "^3.9.2", "@docusaurus/theme-classic": "^3.9.2", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-ncO/RddO1/WwpRk+xs9GuQWbEWM2sy6Kj7byjwIyMfvcAqeyHJjXIASxLPCGqty+FPoEVqnBu1ASBez12tYABg=="],
+
    "@xmldom/xmldom": ["@xmldom/xmldom@0.8.11", "", {}, "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw=="],

    "@xtuc/ieee754": ["@xtuc/ieee754@1.2.0", "", {}, "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="],
@@ -79,6 +79,8 @@ const config: Config = {
    },
  ],

+  themes: ['@widlarzgroup/docusaurus-ui'],
+
  themeConfig: {
    image: 'img/twg-social-card.png',
    navbar: {
@@ -19,6 +19,7 @@
    "@docusaurus/faster": "^3.8.1",
    "@docusaurus/preset-classic": "^3.8.1",
    "@mdx-js/react": "^3.0.0",
+    "@widlarzgroup/docusaurus-ui": "^0.0.2",
    "clsx": "^2.0.0",
    "docusaurus-lunr-search": "^3.6.0",
    "prism-react-renderer": "^2.3.0",
@@ -1,74 +0,0 @@
-.extraContainer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 0.5rem;
-    text-align: center;
-    background-color: var(--ifm-color-primary);
-    padding: 1rem;
-    gap: 1rem;
-    border-radius: 0.5rem;
-}
-
-.extraText {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    font-weight: bold;
-    color: var(--ifm-background-color);
-    text-wrap: nowrap;
-    font-size: 0.95rem;
-}
-
-.extraButton {
-    width: 90%;
-    border: none;
-    padding: 0.4rem 0.8rem;
-    font-weight: 500;
-    background-color: var(--ifm-background-color);
-    transition: transform 0.3s ease, background-color 0.3s ease;
-    color: #fff;
-    border-radius: 0.5rem;
-}
-
-.extraButton:hover {
-    transform: scale(1.05);
-    background-color: #fff;
-}
-
-:is(html[class~=dark]) .extraContainer {
-    background-color: #87ccef;
-}
-
-:is(html[class~=dark]) .extraText {
-    color: #171717;
-}
-
-:is(html[class~=dark]) .extraButton {
-    background-color: #171717;
-}
-
-
-@media (min-width: 1280px) {
-    .visibleOnLarge {
-        display: flex;
-    }
-    .visibleOnSmall {
-        display: none;
-    }
-    .extraContainer {
-        margin: 1rem;
-    }
-}
-
-@media (max-width: 1279px) {
-    .visibleOnLarge {
-        display: none;
-    }
-    .visibleOnSmall {
-        display: flex;
-    }
-    .extraContainer {
-        margin: 2rem 0.2rem 0.2rem 0.2rem;
-    }
-}
@@ -1,26 +0,0 @@
-import styles from './TWGBadge.module.css';
-
-interface TWGBadgeProps {
-  visibleOnLarge?: boolean;
-}
-
-const TWGBadge = ({visibleOnLarge}: TWGBadgeProps) => {
-  const visibilityClass = visibleOnLarge
-    ? styles.visibleOnLarge
-    : styles.visibleOnSmall;
-
-  return (
-    <div className={[styles.extraContainer, visibilityClass].join(' ')}>
-      <span className={styles.extraText}>We are TheWidlarzGroup</span>
-      <a
-        target="_blank"
-        href="https://www.thewidlarzgroup.com/?utm_source=rnv&utm_medium=docs&utm_campaign=badge&utm_id=enterprise#Contact"
-        className={styles.extraButton}
-        rel="noreferrer">
-        Premium support →
-      </a>
-    </div>
-  );
-};
-
-export default TWGBadge;
@@ -1,30 +1,7 @@
+@import '@widlarzgroup/docusaurus-ui/css/custom.css';
+
 /**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
-:root {
-  --ifm-code-font-size: 95%;
-  --ifm-color-primary: #96c9eb;
-  --ifm-color-primary-dark: #76b8e5;
-  --ifm-color-primary-darker: #65b0e2;
-  --ifm-color-primary-darkest: #3597d9;
-  --ifm-color-primary-light: #b6daf1;
-  --ifm-color-primary-lighter: #c7e2f4;
-  --ifm-color-primary-lightest: #f7fbfd;
-  --ifm-color-secondary: #f4d970;
-  --ifm-color-secondary-dark: #f1d04f;
-  --ifm-color-secondary-darker: #f0cc3e;
-  --ifm-color-secondary-darkest: #e7bc12;
-  --ifm-color-secondary-light: #f7e291;
-  --ifm-color-secondary-lighter: #f8e6a2;
-  --ifm-color-secondary-lightest: #fcf3d3;
-  --ifm-background-color: #171717;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
-
-.hidden {
-  display: none !important;
-}
+ */
@@ -1,16 +0,0 @@
-import type { WrapperProps } from '@docusaurus/types';
-import TWGBadge from '@site/src/components/TWGBadge/TWGBadge';
-import Footer from '@theme-original/DocItem/Footer';
-import type FooterType from '@theme/DocItem/Footer';
-import { type ReactNode } from 'react';
-
-type Props = WrapperProps<typeof FooterType>;
-
-export default function FooterWrapper(props: Props): ReactNode {
-  return (
-    <>
-      <Footer {...props} />
-      <TWGBadge visibleOnLarge={false} />
-    </>
-  );
-}
@@ -1,25 +0,0 @@
-import type { Props } from '@theme/TOC';
-import TOCItems from '@theme/TOCItems';
-import clsx from 'clsx';
-import { type ReactNode } from 'react';
-
-import TWGBadge from '@site/src/components/TWGBadge/TWGBadge';
-import styles from './styles.module.css';
-
-// Using a custom className
-// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
-const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
-const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
-
-export default function TOC({className, ...props}: Props): ReactNode {
-  return (
-    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
-      <TOCItems
-        {...props}
-        linkClassName={LINK_CLASS_NAME}
-        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
-      />
-      <TWGBadge visibleOnLarge={true} />
-    </div>
-  );
-}
@@ -1,16 +0,0 @@
-.tableOfContents {
-  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
-  overflow-y: auto;
-  position: sticky;
-  top: calc(var(--ifm-navbar-height) + 1rem);
-}
-
-@media (max-width: 996px) {
-  .tableOfContents {
-    display: none;
-  }
-
-  .docItemContainer {
-    padding: 0 0.3rem;
-  }
-}