docgen-tool 5.3.0 → 6.0.2

package/dist/app/style-variables/js/style-variables.js

@@ -0,0 +1,78 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const ColorPrimary = 'rgb(46, 113, 225)';
+export const ColorPrimaryLight = 'rgb(222, 232, 252)';
+export const ColorPrimaryDark = 'rgb(22, 71, 193)';
+export const ColorBackgroundLight = '#fff';
+export const ColorBackgroundSuccess = '#e8f5e9';
+export const ColorBackgroundError = '#ffebee';
+export const ColorBackgroundWarning = '#fff8e1';
+export const ColorBackgroundInfo = 'rgb(222, 232, 252)';
+export const ColorBackgroundNeutral = '#f5f5f5';
+export const ColorBorder = '#999';
+export const ColorBorderSuccess = '#4caf50';
+export const ColorBorderError = '#f44336';
+export const ColorBorderWarning = '#ff9800';
+export const ColorBorderInfo = '#81a7f4';
+export const ColorBorderNeutral = '#9e9e9e';
+export const ColorText = 'rgb(1, 3, 4)';
+export const ColorTextLight = '#bbb';
+export const ColorTextNeutral = '#333';
+export const ColorTextSuccess = '#2ab100';
+export const ColorTextError = '#c20000';
+export const ColorTextWarning = '#b28900';
+export const ColorTextInfo = '#0a2a6b';
+export const ColorTextLink = 'rgb(1, 3, 4)';
+export const ColorTextLinkHover = '#4a72c1';
+export const ColorTextLinkActive = '#4b91ff';
+export const ColorTextLinkVisited = '#808080';
+export const ColorButtonBorder = '2px solid rgb(46, 113, 225)';
+export const ColorButtonBorderInverted = '2px solid rgb(46, 113, 225)';
+export const ColorButtonBackground = 'rgb(46, 113, 225)';
+export const ColorButtonBackgroundHover = '#0042b4';
+export const ColorButtonBackgroundInverted = '#fff';
+export const ColorButtonText = '#fff';
+export const ColorButtonTextInverted = 'rgb(46, 113, 225)';
+export const ColorButtonShadow = 'none';
+export const ColorTableBackground = '#eee';
+export const ColorTableBackgroundHeaderFooter = '#ddd';
+export const ColorTableBackgroundHeaderFooterPdf = '#eee';
+export const SizeBorderWidth = '1px';
+export const SizeBorderWidthPdf = '0.8pt';
+export const SizeButtonBase = '42px';
+export const SizeFontBase = '16px';
+export const SizeFontSmall = '12px';
+export const SizeFontMedium = '16px';
+export const SizeFontLarge = '24px';
+export const SizeFontH1 = '2rem';
+export const SizeFontH1Pdf = '24pt';
+export const SizeFontH2 = '1.5rem';
+export const SizeFontH2Pdf = '20pt';
+export const SizeFontH3 = '1.25rem';
+export const SizeFontH3Pdf = '18pt';
+export const SizeFontH4 = '1rem';
+export const SizeFontH4Pdf = '16pt';
+export const SizeFontH5 = '0.875rem';
+export const SizeFontH5Pdf = '14pt';
+export const SizeFontH6 = '0.75rem';
+export const SizeFontH6Pdf = '12pt';
+export const SizeLineHeight = '26px';
+export const SizeTableCellPadding = '2px 15px';
+export const SizeTableCellPaddingPdf = '2mm 2mm';
+export const SizeContentBlockMargin = '1.5em 0';
+export const SizeContentBlockMarginPdf = '2mm 0';
+export const SizeContentBlockPadding = '0.8rem 1rem';
+export const SizeContentBlockPaddingPdf = '1mm 4mm';
+export const SizeAdmonitionBorderLeft = '4px';
+export const SizeAdmonitionBorderLeftPdf = '1mm';
+export const SizeAdmonitionBorderRadius = '4px';
+export const SizeAdmonitionTitleMargin = '0.1em 0 0';
+export const SizeAdmonitionTitleMarginPdf = '3mm 0 0';
+export const SizeMessagePadding = '20px 30px';
+export const SizeMessageBorderRadius = '2px';
+export const SizeHeaderHeight = '80px';
+export const SizeSideBarWidth = '330px';
+export const SizeSideBarMinWidth = '40px';
+export const SizeSideBarPadding = '5px';

package/dist/{include/require → app/views/assets}/styles/framework.css

@@ -489,41 +489,81 @@ section > div blockquote {
  typography
 */
 @font-face {
-  font-family: 'montserrat';
-  src: url('fonts/Montserrat-Regular.woff') format('woff');
-  font-weight: normal;
+  font-family: 'archivo';
+  font-display: swap;
+  src: url('fonts/archivo-regular.woff2') format('woff2');
   font-style: normal;
+  font-weight: 400;
 }
 @font-face {
-  font-family: 'montserrat';
-  src: url('fonts/Montserrat-SemiBold.woff') format('woff');
-  font-weight: bold;
+  font-family: 'archivo';
+  font-display: swap;
+  src: url('fonts/archivo-600.woff2') format('woff2');
   font-style: normal;
+  font-weight: 600;
 }
 @font-face {
-  font-family: 'montserrat';
-  src: url('fonts/Montserrat-Italic.woff') format('woff');
-  font-weight: normal;
+  font-family: 'archivo';
+  font-display: swap;
+  src: url('fonts/archivo-italic.woff2') format('woff2');
   font-style: italic;
+  font-weight: 400;
 }
 @font-face {
-  font-family: 'montserrat';
-  src: url('fonts/Montserrat-SemiBoldItalic.woff') format('woff');
-  font-weight: bold;
+  font-family: 'archivo';
+  font-display: swap;
+  src: url('fonts/archivo-600-italic.woff2') format('woff2');
   font-style: italic;
+  font-weight: 600;
 }
 @font-face {
-  font-family: 'droid-sans-mono';
-  src: url('fonts/DroidSansMono.woff') format('woff');
-  font-weight: normal;
+  font-family: 'space-grotesk';
+  font-display: swap;
+  src: url('fonts/space-grotesk-regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'space-grotesk';
+  font-display: swap;
+  src: url('fonts/space-grotesk-600.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 600;
+}
+@font-face {
+  font-family: 'space-mono';
+  font-display: swap;
+  src: url('fonts/space-mono-regular.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'space-mono';
+  font-display: swap;
+  src: url('fonts/space-mono-700.woff2') format('woff2');
   font-style: normal;
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'space-mono';
+  font-display: swap;
+  src: url('fonts/space-mono-italic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'space-mono';
+  font-display: swap;
+  src: url('fonts/space-mono-700-italic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 700;
 }
 html {
   font-size: var(--size-font-medium);
 }
 
 body {
-  font-family: 'montserrat', Arial, sans-serif;
+  font-family: 'archivo', sans-serif;
   font-size: var(--size-font-medium);
   line-height: var(--size-line-height);
 }
@@ -684,7 +724,7 @@ a:visited {
  pre-formatted, code
 */
 code {
-  font-family: 'droid-sans-mono', Courier, monospace;
+  font-family: 'space-mono', monospace;
 }
 
 pre {
@@ -780,13 +820,14 @@ button,
   justify-content: center;
   outline: 0;
   vertical-align: baseline;
-  border: 2px solid var(--color-button-border);
+  border: var(--color-button-border);
   background: var(--color-button-background);
   color: var(--color-button-text) !important;
   padding: 0 25px;
   text-transform: none;
   text-shadow: none;
   line-height: 1em;
+  font-family: 'space-grotesk', sans-serif;
   font-style: normal;
   text-align: center;
   text-decoration: none;
@@ -838,14 +879,6 @@ button:active,
   box-shadow: none;
 }
 
-.button .icon {
-  margin-left: 8px;
-  transition: transform 0.1s ease;
-}
-.button:hover .icon {
-  transform: translateX(4px);
-}
-
 img {
   max-width: 100%;
   height: auto;
@@ -1038,7 +1071,7 @@ img {
   bottom: 0;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: var(size-side-bar-padding);
+  padding: var(--size-side-bar-padding);
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE 10+ */
   width: var(--size-side-bar-width);
@@ -1088,14 +1121,16 @@ img {
   display: flex;
   align-items: center;
 }
+#dgSideBarContent .dgSideBarAttribution li a {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+#dgSideBarContent .dgSideBarAttribution li a svg {
+  vertical-align: middle;
+}
 #dgSideBarContent .dgSideBarAttribution .dgIcon {
   padding: 0 5px 0 0;
-  width: 20px;
-  height: 20px;
-}
-#dgSideBarContent .dgSideBarAttribution .dgIcon svg {
-  width: 20px;
-  height: 20px;
 }
 #dgSideBarContent .dgSideBarPDFButton {
   margin: 32px 0 12px 0;
@@ -1147,9 +1182,6 @@ img {
   margin: 0;
   color: white;
 }
-#dgSideBarButton .dgIcon svg {
-  height: 40px;
-}
 .dgSideBarCollapsed #dgSideBarButton {
   transform: scaleX(-1);
 }
@@ -1195,6 +1227,7 @@ footer > div:first-child {
 
 @media (min-width: 1200px) {
   .banner h1 {
+    font-family: 'space-grotesk', sans-serif;
     font-size: 64px;
     letter-spacing: -0.025em;
     line-height: 1.15;

package/dist/app/views/components/copyright/copyright.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Copyright = ({
+  parameters
+}) => {
+  return (
+    <span id="dg-copyright">
+      &copy; {parameters.year}&nbsp;
+      {parameters?.organization?.url ? (
+        <a href={parameters.organization.url}>{parameters.organization.name}</a>
+      ) : parameters?.organization?.nmee ? (
+        <span>parameters.organization.name</span>
+      ) : null}
+    </span>
+  );
+};

package/dist/app/views/components/footer/footer.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Copyright } from "../copyright/copyright.tsx";
+
+export const Footer = ({
+  parameters
+}) => {
+  return (
+    <>
+      <p>
+        <Copyright parameters={parameters} />
+      </p>
+      <p>
+        <span>
+          {parameters.marking} {parameters.legalese} {parameters.attribution}
+        </span>
+      </p>
+    </>
+  );
+};
+
+
+export const WebFooter = ({parameters}) => {
+  return (
+    <footer>
+      <div>
+        <p>
+          <span id="dg-web-footer">
+            {parameters.webFooter}
+          </span>
+        </p>
+      </div>
+      <div>
+        <Footer parameters={parameters} />
+      </div>
+    </footer>
+  )
+};

package/dist/app/views/components/logo/logo.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const Logo = ({
+  parameters,
+}) => {
+  return (
+    parameters?.logoPath && (
+      <img
+        src={`../${parameters?.logoPath}`}
+      />
+    )
+  )
+};

package/dist/app/views/components/page/page.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+
+type PageProps = {
+  children?: ReactNode;
+};
+
+export const Page = ({children} : PageProps) => {
+  return (
+    <div
+      className="page"
+    >
+      {children}
+    </div>
+  );
+};

package/dist/app/views/components/pdf-footer/pdf-footer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Copyright } from "../copyright/copyright.tsx";
+
+export const PdfFooter = ({
+  parameters
+}) => {
+  return (
+    <div id="dg-pdf-footer">
+      <table>
+        <thead></thead>
+        <tfoot></tfoot>
+        <tbody>
+        <tr>
+          <td>
+            <span id="dg-title">{parameters.title}</span>&nbsp;
+            (<span id="dg-web-title-version">{parameters.version}</span>)
+          </td>
+          <td>
+            <Copyright parameters={parameters} />
+          </td>
+          <td>
+            Page <span className="page"></span> of <span className="topage"></span>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/dist/app/views/components/pdf-header/pdf-header.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Logo } from "../logo/logo.tsx";
+
+export const PdfHeader = ({
+  parameters
+}) => {
+  return (
+    <div id="dg-pdf-header">
+      <Logo parameters={parameters} />
+    </div>
+  );
+};

package/dist/app/views/components/pdf-toggle-button/pdf-toggle-button.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useRouter, useRouterState } from '@tanstack/react-router';
+import { TbFile, TbFileOff } from 'react-icons/tb';
+import { pdfRoute } from '../../router';
+
+type PdfToggleButtonProps = {
+  onClick?: () => void; // optional callback
+};
+
+export const PdfToggleButton = ({ onClick }: PdfToggleButtonProps) => {
+  const router = useRouter();
+  const pdfVisible = useRouterState({
+    select: (state) => state.location.pathname.endsWith(pdfRoute.path),
+  });
+
+  const onPdfToggle = () => {
+    if (pdfVisible) {
+      router.history.back();
+    } else {
+      router.navigate({ to: '/pdf' });
+    }
+
+    if (onClick) onClick(); // call sidebar close
+  };
+
+  return (
+    <button
+      className={`button ${pdfVisible ? '' : 'inverted'}`}
+      onClick={onPdfToggle}
+      title="Toggle PDF"
+      style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+    >
+      {pdfVisible ? (
+        <TbFile size={18} />
+      ) : (
+        <TbFileOff size={18} />
+      )}
+      <span>PDF</span>
+    </button>
+  );
+};

package/dist/app/views/components/side-bar/side-bar.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Link } from '@tanstack/react-router';
+import { TbMenu2, TbX, TbUsers, TbRefresh } from 'react-icons/tb';
+import cx from 'classnames';
+import { PdfToggleButton } from '../pdf-toggle-button/pdf-toggle-button.tsx';
+import type { TSortedPages } from '../../../../docgen/types.ts';
+
+const SIDEBAR_ICON_SIZE = 24;
+const SIDEBAR_SMALL_ICON_SIZE = 20;
+
+const Page = ({ page, onLinkClick }) => {
+  const name = page.source.substring(0, page.source.lastIndexOf('.'));
+  const path = name === 'index' ? '/' : name;
+  return (
+    <li>
+      <Link to={path} onClick={onLinkClick}>
+        {page.title}
+      </Link>
+    </li>
+  );
+};
+
+export type TSideBarProps = {
+  sortedPages: TSortedPages;
+  pdfEnabled: boolean;
+}
+
+export const SideBar = ({
+  sortedPages,
+  pdfEnabled
+} : TSideBarProps) => {
+  const [open, setOpen] = useState(false);
+  const toggleOpen = () => setOpen(!open);
+  const close = () => setOpen(false);
+
+  const pages = Object.values(sortedPages).flat();
+
+  return (
+    <div id="dgSideBar" className={cx(!open ? 'dgSideBarCollapsed' : '')}>
+      <button id="dgSideBarButton" onClick={toggleOpen}>
+        <span className="dgIcon">
+          {open ? <TbX size={SIDEBAR_ICON_SIZE} /> : <TbMenu2 size={SIDEBAR_ICON_SIZE} />}
+        </span>
+      </button>
+
+      <div id="dgSideBarInnerWrapper">
+        <div id="dgSideBarInner">
+          <div id="dgSideBarContent">
+            {pages
+              .filter((p) => p?.heading !== 'Extra')
+              .map((page, i) => (
+                <div key={i}>
+                  <div className="dgSideBarHeading">{page.heading}</div>
+                  <ul>
+                    {page.pages.map((subPage, i) => (
+                      <Page key={i} page={subPage} onLinkClick={close} />
+                    ))}
+                  </ul>
+                </div>
+              ))}
+
+            <div className="dgSideBarAttribution">
+              <ul>
+                <li>
+                  <span className="dgIcon" title="ownership"></span>
+                  <Link to="/ownership" onClick={close}>
+                    <TbUsers size={SIDEBAR_SMALL_ICON_SIZE} /> Ownership
+                  </Link>
+                </li>
+                <li>
+                  <span className="dgIcon" title="release notes"></span>
+                  <Link to="/release-notes" onClick={close}>
+                    <TbRefresh size={SIDEBAR_SMALL_ICON_SIZE} /> Release Notes
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            {pdfEnabled && (
+              <div className="dgSideBarPDFButton">
+                <PdfToggleButton onClick={close} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/dist/app/views/components/top-bar/top-bar.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Link } from '@tanstack/react-router';
+import { PdfToggleButton } from '../pdf-toggle-button/pdf-toggle-button.tsx';
+
+const Logo = ({ parameters }) => {
+  return (
+    parameters?.logoPath && (
+      <img
+        style={{ marginRight: '25px' }}
+        src={parameters?.logoPath}
+        alt="logo"
+      />
+    )
+  );
+};
+
+export const TopBar = ({ parameters }) => {
+  return (
+    <div>
+      <div className="topbar">
+        <div className="left">
+          <Link className="dg-homelink" to="/">
+            <Logo parameters={parameters} />
+          </Link>
+          <div id="headerLeftText">
+            <Link className="dg-homelink" to={parameters.homePagePath}>
+              <span id="dg-title">{parameters.title}</span>
+              <span id="dg-web-title-version" style={{ fontWeight: 'normal' }}>
+                &nbsp;({parameters.version})
+              </span>
+            </Link>
+            {parameters?.sponsorLink?.name && (
+              <div id="headerSponsor">
+                <span>{parameters.sponsorLink.name}</span>
+                <a href={parameters.sponsorLink.url}>
+                  <img
+                    id="sponsorLogo"
+                    src={parameters.sponsorLink.logo}
+                    alt="sponsor logo"
+                  />
+                </a>
+              </div>
+            )}
+          </div>
+        </div>
+        <div
+          className="right"
+          style={{ display: 'flex', alignItems: 'center', gap: '10px' }}
+        >
+          <PdfToggleButton />
+          <span id="dg-backlink">
+            {parameters.backlink.url && (
+              <a className="button inverted" href={parameters.backlink.url}>
+                {parameters.backlink.name}
+              </a>
+            )}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};