docgen-tool 6.0.3 → 6.1.1

package/dist/app/pdf/pdf-generator/generate-pdf.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { pdf } from '@react-pdf/renderer';
+import { Pdf } from './react-pdf.tsx';
+
+export const generatePdf = async (loadedPages) => {
+  const instance = await pdf(<Pdf loadedPages={loadedPages} />);
+  const blob = await instance.toBlob();
+  return blob;
+};

package/dist/app/pdf/pdf-generator/generate-pdf.worker.tsx

@@ -0,0 +1,56 @@
+import { generatePdf } from './generate-pdf.tsx';
+import type { TSection, TSortedPages } from '../../../docgen/types.ts';
+
+declare const __BASE_PATH__: string;
+declare const __DOCGEN_PAGES__: TSortedPages;
+
+const loadPdfPages = async (
+  sortedPages: any,
+): Promise<Record<string, string>> => {
+  const pages: Record<string, string> = {};
+
+  const sources = Object.values(sortedPages).flatMap((columns: TSection) =>
+    columns.flatMap((section) => section.pages.map((p: any) => p.source)),
+  );
+
+  await Promise.all(
+    sources.map(async (filename) => {
+      const url = `${__BASE_PATH__}${filename}`;
+      try {
+        const res = await fetch(url);
+        pages[filename] = res.ok
+          ? await res.text()
+          : `Error loading ${filename}: ${res.status}`;
+      } catch (err) {
+        pages[filename] = `Error loading ${filename}: ${err}`;
+      }
+    }),
+  );
+
+  return pages;
+};
+
+const slowTask = async () => {
+  let data;
+  try {
+    const loadedPages = await loadPdfPages(__DOCGEN_PAGES__);
+    data = await generatePdf(loadedPages);
+  } catch (error) {
+    console.error(error);
+  }
+  self.postMessage({
+    type: 'complete',
+    payload: {
+      data,
+    },
+  });
+};
+
+self.onmessage = ({ data: message }) => {
+  switch (message.type) {
+    case 'start':
+      slowTask();
+      break;
+    default:
+  }
+};

package/dist/app/pdf/{react-pdf → pdf-generator}/pdf-page/pdf-footer/pdf-footer.tsx

@@ -18,18 +18,18 @@ const styles = StyleSheet.create({
     width: '33%',
     textAlign: 'center',
     fontSize: 10,
-  }
+  },
 });
 
-export const PdfFooter = ({parameters}) => (
+export const PdfFooter = ({ parameters }) => (
   <View style={styles.footer} fixed>
     <Text style={styles.column}>{parameters.title}</Text>
-    <Text style={styles.column}>{`© ${parameters.year} ${parameters.name}`}</Text>
     <Text
       style={styles.column}
-      render={({ pageNumber, totalPages }) => (
-        `${pageNumber} / ${totalPages}`
-      )}
+    >{`© ${parameters.year} ${parameters.name}`}</Text>
+    <Text
+      style={styles.column}
+      render={({ pageNumber, totalPages }) => `${pageNumber} / ${totalPages}`}
     />
   </View>
 );

package/dist/app/pdf/{react-pdf → pdf-generator}/pdf-page/pdf-html-block/custom-renderers/custom-renderers.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-//import path from 'path';
-import {
-  View,
-  Text,
-  Image,
-} from '@react-pdf/renderer';
+import { View, Text, Image } from '@react-pdf/renderer';
 import * as cheerio from 'cheerio';
 
+declare const __BASE_PATH__: string;
+
 /*
   For "default" renderers in react-pdf-html, see
 
@@ -16,17 +13,21 @@ import * as cheerio from 'cheerio';
   (and renderers.tsx for more details)
 */
 
-export const customRenderers = ({options}) => ({
+export const customRenderers = ({ options }) => ({
   div: (payload) => {
-    const {children, style, element} = payload;
+    const { children, style, element } = payload;
     const classNames = element.classList.toString();
-    if (classNames.includes("dgPDFPageBreak")) {
-      return <View break style={style}>{children}</View>;
+    if (classNames.includes('dgPDFPageBreak')) {
+      return (
+        <View break style={style}>
+          {children}
+        </View>
+      );
     }
     return <View style={style}>{children}</View>;
   },
   pre: (payload) => {
-    const {children, element, style} = payload;
+    const { children, element, style } = payload;
     //strip and handle code blocks
     const $ = cheerio.load(element.content.join());
     const code = $('code');
@@ -35,11 +36,14 @@ export const customRenderers = ({options}) => ({
     }
     return <Text style={style}>{children}</Text>;
   },
-  // TODO: reinstate images without path
-  // img: (payload) => {
-  //   const {element, style} = payload;
-  //   const relativeSource = element.attributes.src;
-  //   //const source = path.join(options.input, relativeSource);
-  //   return <Image style={style} source={source} />;
-  // },
+  img: (payload) => {
+    const { element, style } = payload;
+    // Load images from base URL
+    return (
+      <Image
+        style={style}
+        source={`${__BASE_PATH__}${element?.attributes?.src}`}
+      />
+    );
+  },
 });

package/dist/app/pdf/{react-pdf → pdf-generator}/pdf-page/pdf-html-block/pdf-html-block.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import Html from 'react-pdf-html';
+import Html from 'react-pdf-html-simple';
 import { fontSize, htmlStyleSheet } from '../../pdf-styles/pdf-styles.ts';
-import { customRenderers } from "./custom-renderers/custom-renderers.tsx";
+import { customRenderers } from './custom-renderers/custom-renderers.tsx';
 
-export const PdfHtmlBlock = ({
-  page,
-  options
-}) => {
+export const PdfHtmlBlock = ({ page, options }) => {
   return (
     <Html
       style={{ fontSize }}
       stylesheet={htmlStyleSheet}
-      renderers={customRenderers({options})}
+      renderers={customRenderers({ options })}
     >
       {page}
     </Html>
   );
-}
+};

package/dist/app/pdf/{react-pdf → pdf-generator}/pdf-page/pdf-page.tsx

@@ -1,22 +1,18 @@
 import React from 'react';
 import { Page, View, StyleSheet } from '@react-pdf/renderer';
-import { PdfHtmlBlock } from "./pdf-html-block/pdf-html-block.tsx";
+import { PdfHtmlBlock } from './pdf-html-block/pdf-html-block.tsx';
 import { PdfFooter } from './pdf-footer/pdf-footer.tsx';
 import { pdfStyleSheet } from '../pdf-styles/pdf-styles.ts';
 
 export const reactPdfStyles = StyleSheet.create(pdfStyleSheet);
 
-export const PdfPage = ({
-  page,
-  parameters,
-  options
-}) => {
+export const PdfPage = ({ page, parameters, options }) => {
   return (
     <Page size="A4" style={reactPdfStyles.page}>
       <View>
         <PdfHtmlBlock page={page} options={options} />
       </View>
-      <PdfFooter parameters={parameters}/>
+      <PdfFooter parameters={parameters} />
     </Page>
-  )
+  );
 };

package/dist/app/pdf/{react-pdf → pdf-generator}/react-pdf.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Document, Font } from '@react-pdf/renderer';
 import { PdfPage } from './pdf-page/pdf-page.tsx';
 import { marked } from 'marked';
@@ -15,10 +15,11 @@ import spaceMonoRegular from '../../views/assets/styles/fonts/space-mono-regular
 import spaceMonoItalic from '../../views/assets/styles/fonts/space-mono-italic.ttf';
 import spaceMono700 from '../../views/assets/styles/fonts/space-mono-700.ttf';
 import spaceMono700Italic from '../../views/assets/styles/fonts/space-mono-700-italic.ttf';
-import type { TParameters, TSortedPages, TSection } from '../../../docgen/types.ts';
+import type { TParameters, TSortedPages } from '../../../docgen/types.ts';
 import { preprocessAdmonitions } from '../../common/markdown/markdown.ts';
 
-declare const __BASE_PATH__: string;
+declare const __DOCGEN_PARAMETERS__: TParameters;
+declare const __DOCGEN_PAGES__: TSortedPages;
 
 Font.register({
   family: 'archivo',
@@ -48,58 +49,26 @@ Font.register({
   ],
 });
 
-type PdfProps = {
-  parameters: TParameters;
-  options: any;
-  sortedPages: TSortedPages;
-};
-
 // Async loader for PDF pages
-const loadPdfPages = async (sortedPages: any): Promise<Record<string, string>> => {
-  const pages: Record<string, string> = {};
 
-  const sources = Object.values(sortedPages)
-    .flatMap((columns: TSection) =>
-      columns.flatMap((section) => section.pages.map((p: any) => p.source)),
-    );
-
-  await Promise.all(
-    sources.map(async (filename) => {
-      const url = `${__BASE_PATH__}${filename}`;
-      try {
-        const res = await fetch(url);
-        pages[filename] = res.ok ? await res.text() : `Error loading ${filename}: ${res.status}`;
-      } catch (err) {
-        pages[filename] = `Error loading ${filename}: ${err}`;
-      }
-    }),
+export const Pdf = ({ loadedPages }) => {
+  const parameters = __DOCGEN_PARAMETERS__;
+  const options = {};
+  const allSources = Object.values(__DOCGEN_PAGES__).flatMap((columns) =>
+    columns.flatMap((section) => section.pages.map((p: any) => p.source)),
   );
 
-  return pages;
-};
-
-export const Pdf = ({ parameters, options, sortedPages }: PdfProps) => {
-  const [pages, setPages] = useState<Record<string, string>>({});
-
-  useEffect(() => {
-    const fetchPages = async () => {
-      const loaded = await loadPdfPages(sortedPages);
-      setPages(loaded);
-    };
-    fetchPages();
-  }, [sortedPages]);
-
-  const allSources = Object.values(sortedPages)
-    .flatMap((columns) =>
-      columns.flatMap((section) => section.pages.map((p: any) => p.source)),
-    );
-
   return (
     <Document>
       {allSources.map((source, i) => {
-        const html = marked(preprocessAdmonitions(pages[source] || ''));
+        const html = marked(preprocessAdmonitions(loadedPages[source] || ''));
         return (
-          <PdfPage key={i} page={html} parameters={parameters} options={options} />
+          <PdfPage
+            key={i}
+            page={html}
+            parameters={parameters}
+            options={options}
+          />
         );
       })}
     </Document>

package/dist/app/pdf/pdf-generator/use-generate.pdf.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import WorkerURL from './generate-pdf.worker.tsx?worker';
+
+export type TGeneratedPdf = {
+  pdfBlob: Blob | null;
+  pdfUrl: string | null;
+};
+
+let cachedPdf: TGeneratedPdf | null = null;
+
+export const useGeneratePdf = () => {
+  const [result, setResult] = useState<TGeneratedPdf>({
+    pdfBlob: null,
+    pdfUrl: null,
+  });
+
+  useEffect(() => {
+    if (cachedPdf) {
+      setResult(cachedPdf);
+      return;
+    }
+
+    const worker = new WorkerURL();
+
+    worker.onmessage = (e) => {
+      if (e.data.type === 'complete') {
+        const blob: Blob | null = e.data.payload.data ?? null;
+        const url = blob ? URL.createObjectURL(blob) : null;
+
+        cachedPdf = {
+          pdfBlob: blob,
+          pdfUrl: url,
+        };
+
+        setResult(cachedPdf);
+        worker.terminate();
+      }
+    };
+
+    worker.postMessage({ type: 'start' });
+
+    return () => worker.terminate();
+  }, []);
+
+  return result;
+};

package/dist/app/pdf/pdf-viewer/pdf-controls/pdf-controls.module.css

@@ -0,0 +1,61 @@
+.pdfControlsContainer {
+  display: flex;
+  justify-content: space-between;
+  /* Push items to edges */
+  align-items: center;
+  width: 100%;
+  gap: 16px;
+}
+
+.paginationControls {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  /* Removed flex: 1 and justify-content: center to keep it on the left */
+}
+
+.actionButtons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.controlButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  color: #f1f3f4;
+  /* Light grey/white text */
+  border-radius: 16px;
+  /* Rounded for hover effect */
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  font-size: 20px;
+  /* Icon size */
+}
+
+.controlButton:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  /* Subtle grey highlight */
+}
+
+.controlButton:disabled {
+  color: #5f6368;
+  /* Dimmed icon color */
+  cursor: default;
+  background-color: transparent;
+}
+
+.pageText {
+  font-size: 13px;
+  color: #f1f3f4;
+  margin: 0 8px;
+  font-family: Roboto, Arial, sans-serif;
+  font-weight: 500;
+  user-select: none;
+}

package/dist/app/pdf/pdf-viewer/pdf-controls/pdf-controls.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  TbChevronLeft,
+  TbChevronRight,
+  TbDownload,
+  TbExternalLink,
+} from 'react-icons/tb';
+import styles from './pdf-controls.module.css';
+
+export const PdfControls = ({
+  pageNumber,
+  numPages,
+  goToPrevPage,
+  goToNextPage,
+  onDownload,
+  onOpenNewTab,
+}) => {
+  const mobileDevice = 'ongesturechange' in window;
+  return (
+    <div className={styles.pdfControlsContainer}>
+      <div className={styles.paginationControls}>
+        <button
+          className={styles.controlButton}
+          onClick={goToPrevPage}
+          disabled={pageNumber <= 1}
+          title="Previous page"
+        >
+          <TbChevronLeft />
+        </button>
+        <span className={styles.pageText}>
+          {pageNumber} of {numPages}
+        </span>
+        <button
+          className={styles.controlButton}
+          onClick={goToNextPage}
+          disabled={pageNumber >= numPages}
+          title="Next page"
+        >
+          <TbChevronRight />
+        </button>
+      </div>
+      <div className={styles.actionButtons}>
+        <button
+          className={styles.controlButton}
+          onClick={onDownload}
+          title="Download PDF"
+        >
+          <TbDownload />
+        </button>
+        {!mobileDevice && (
+          <button
+            className={styles.controlButton}
+            onClick={onOpenNewTab}
+            title="Open in new tab"
+          >
+            <TbExternalLink />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

package/dist/app/pdf/pdf-viewer/pdf-display/pdf-display.module.css

@@ -0,0 +1,22 @@
+.pdfDisplayWrapper {
+  > div div {
+    /* Override global rule from page.scss that interferes with the text highlighting layer in the react-pdf viewer */
+    margin: 0;
+  }
+
+  :global(.react-pdf__Page__annotations) {
+    background: transparent !important;
+  }
+
+  :global(.react-pdf__Page__annotations) * {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  :global(.react-pdf__Page__annotations) a {
+    cursor: pointer;
+    color: var(--color-text-link) !important;
+    text-decoration: underline !important;
+  }
+}

package/dist/app/pdf/pdf-viewer/pdf-display/pdf-display.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import { Document, Page, pdfjs } from 'react-pdf';
+import styles from './pdf-display.module.css';
+
+import 'react-pdf/dist/Page/TextLayer.css';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import { PdfLoader } from '../pdf-loader/pdf-loader.tsx';
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url,
+).toString();
+
+export const PdfDisplay = ({ pdfUrl, pageNumber, onPdfLoadSuccess }) => {
+  const { width, ref } = useResizeDetector<HTMLDivElement>();
+  if (!pdfUrl) {
+    return null;
+  }
+  const key = `${pdfUrl}-${pageNumber}`;
+  return (
+    <div ref={ref} className={styles.pdfDisplayWrapper}>
+      <Document
+        file={pdfUrl}
+        loading={<PdfLoader />}
+        onLoadSuccess={onPdfLoadSuccess}
+      >
+        <Page
+          key={key}
+          pageNumber={pageNumber}
+          width={width}
+          renderAnnotationLayer={true}
+        />
+      </Document>
+    </div>
+  );
+};

package/dist/app/pdf/pdf-viewer/pdf-loader/pdf-loader.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Loader } from '../../../views/components/loader/loader.tsx';
+import { Spinner } from '../../../views/components/loader/spinner.tsx';
+
+export const PdfLoader = () => {
+  return (
+    <Loader cover text="Loading PDF...">
+      <Spinner />
+    </Loader>
+  );
+};

package/dist/app/pdf/pdf-viewer/pdf-viewer.module.css

@@ -0,0 +1,50 @@
+.pdfViewerOuterWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  width: auto;
+  margin: 30px 30px 0 30px;
+}
+
+.pdfViewerInnerWrapper {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  max-width: 800px;
+  width: 100%;
+  aspect-ratio: 210 / 297;
+  overflow: hidden;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.cardContent {
+  flex-grow: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.cardContent::-webkit-scrollbar {
+  display: none;
+}
+
+.loaderWrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 210 / 297;
+}
+
+.pdfHeader {
+  background-color: #323639 !important;
+  color: white;
+  border-bottom: 1px solid #323639;
+  padding: 4px 12px !important;
+}

package/dist/app/pdf/pdf-viewer/pdf-viewer.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { useGeneratePdf } from '../pdf-generator/use-generate.pdf.tsx';
+import { PdfDisplay } from './pdf-display/pdf-display.tsx';
+import { PdfControls } from './pdf-controls/pdf-controls.tsx';
+import styles from './pdf-viewer.module.css';
+import { PdfLoader } from './pdf-loader/pdf-loader.tsx';
+import { Card } from '../../views/components/card/card.tsx';
+
+export const PdfViewer = () => {
+  const { pdfUrl } = useGeneratePdf();
+  const [numPages, setNumPages] = useState(0);
+  const [pageNumber, setPageNumber] = useState(1);
+
+  const loading = !pdfUrl;
+
+  const onPdfLoadSuccess = ({ numPages }: { numPages: number }) =>
+    setNumPages(numPages);
+  const goToPrevPage = () => setPageNumber((p) => Math.max(p - 1, 1));
+  const goToNextPage = () => setPageNumber((p) => Math.min(p + 1, numPages));
+
+  const onDownload = () => {
+    if (!pdfUrl) return;
+    const link = document.createElement('a');
+    link.href = pdfUrl;
+    link.download = 'document.pdf';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const onOpenNewTab = () => {
+    if (!pdfUrl) return;
+    window.open(pdfUrl, '_blank');
+  };
+
+  return (
+    <div className={styles.pdfViewerOuterWrapper}>
+      <div className={styles.pdfViewerInnerWrapper}>
+        <Card
+          padding={false}
+          headerClassName={styles.pdfHeader}
+          className={styles.card}
+          contentClassName={styles.cardContent}
+          heading={
+            <PdfControls
+              pageNumber={pageNumber}
+              numPages={numPages}
+              goToPrevPage={goToPrevPage}
+              goToNextPage={goToNextPage}
+              onDownload={onDownload}
+              onOpenNewTab={onOpenNewTab}
+            />
+          }
+        >
+          <div className={styles.loaderWrapper}>
+            {loading && <PdfLoader />}
+            <PdfDisplay
+              pdfUrl={pdfUrl}
+              pageNumber={pageNumber}
+              onPdfLoadSuccess={onPdfLoadSuccess}
+            />
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};