docgen-tool 6.1.0 → 6.2.0

package/dist/app/pdf/pdf-generator/pdf-page/pdf-html-block/custom-renderers/custom-renderers.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 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
 
@@ -37,6 +39,11 @@ export const customRenderers = ({ options }) => ({
   img: (payload) => {
     const { element, style } = payload;
     // Load images from base URL
-    return <Image style={style} source={`/${element?.attributes?.src}`} />;
+    return (
+      <Image
+        style={style}
+        source={`${__BASE_PATH__}${element?.attributes?.src}`}
+      />
+    );
   },
 });

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

@@ -48,3 +48,10 @@
   border-bottom: 1px solid #323639;
   padding: 4px 12px !important;
 }
+
+@media (max-width: 600px) {
+  .loaderWrapper {
+    height: 100% !important;
+    aspect-ratio: unset;
+  }
+}

package/dist/app/views/assets/styles/framework.css

@@ -644,7 +644,9 @@ li.list-heading {
 section > div ul ul,
 section > div ol ol {
   margin: 0;
-} /*don't put margin on nested lists*/
+}
+
+/*don't put margin on nested lists*/
 .w-small {
   font-size: 12px;
 }
@@ -731,8 +733,13 @@ pre {
   padding: 12px;
   background-color: #f3f3f3;
   border: 1px solid var(--color-border);
-  line-height: 14px;
+  line-height: 1.5;
   border-radius: 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+pre::-webkit-scrollbar {
+  display: none;
 }
 
 .w-inline-code {

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

@@ -24,7 +24,6 @@ export const Loader = ({
   const color = 'black'; //theme === Theme.DARK ? Theme.WHITE : Theme.INHERIT;
 
   const background = '#ccc';
-
   return (
     <div
       className={cx(styles.loader, styles.cover)}

package/dist/app/views/content/code-block.module.css

@@ -0,0 +1,35 @@
+.codeBlockWrapper {
+  position: relative;
+}
+
+.copyButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  font-size: 16px;
+  opacity: 1;
+}
+
+.copyButton:hover {
+  background-color: rgba(0, 0, 0, 0.45);
+}
+
+.copyButton:active {
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+.copied {
+  opacity: 0.8;
+}

package/dist/app/views/content/markdown.tsx

@@ -1,14 +1,47 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
 import { Link } from '@tanstack/react-router';
+import { TbCopy, TbCheck } from 'react-icons/tb';
 import { preprocessAdmonitions } from '../../common/markdown/markdown.ts';
+import styles from './code-block.module.css';
 
 type Props = {
   content: string;
 };
 
+const CodeBlock = ({ children, ...props }: any) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    const codeElement = children?.props?.children;
+    const textContent =
+      typeof codeElement === 'string'
+        ? codeElement
+        : codeElement?.toString() || '';
+
+    navigator.clipboard.writeText(textContent.trim()).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className={styles.codeBlockWrapper}>
+      <button
+        className={`${styles.copyButton} ${copied ? styles.copied : ''}`}
+        onClick={handleCopy}
+        aria-label="Copy code"
+        title={copied ? 'Copied' : 'Copy code'}
+      >
+        {copied ? <TbCheck /> : <TbCopy />}
+      </button>
+      <pre {...props}>{children}</pre>
+    </div>
+  );
+};
+
 export const Markdown = ({ content }: Props) => {
   const preparedContent = preprocessAdmonitions(content);
   return (
@@ -16,6 +49,7 @@ export const Markdown = ({ content }: Props) => {
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw]}
       components={{
+        pre: CodeBlock,
         a: ({ href, children, title, className }) => {
           // no href -> render plain text anchor
           if (!href) {

package/dist/cli/cli.js

@@ -256,12 +256,26 @@ const basePath = process.env.BASE_PATH || "/", generate = async (command, mode)
 		root: appPath,
 		publicDir: inputDir,
 		base: basePath,
-		plugins: [react({ exclude: /\/src\/app\/pdf\// }), {
-			name: "html-transform",
-			transformIndexHtml(html) {
-				return html.replace(/%APP_TITLE%/g, parameters.title ?? "DocGen");
-			}
-		}],
+		plugins: [
+			react({ exclude: /\/src\/app\/pdf\// }),
+			{
+				name: "html-transform",
+				transformIndexHtml(html) {
+					return html.replace(/%APP_TITLE%/g, parameters.title ?? "DocGen");
+				}
+			},
+			...mode !== "build" ? [{
+				name: "watch-input-dir",
+				configureServer(server) {
+					const watchPattern = path.join(inputDir, "**/*.{md,json,png}");
+					server.watcher.add(watchPattern);
+					const handleFileChange = (changedPath) => {
+						console.log(`Input file changed, reloading: ${path.relative(inputDir, changedPath)}`), server.ws.send({ type: "full-reload" });
+					};
+					server.watcher.on("add", handleFileChange), server.watcher.on("change", handleFileChange), server.watcher.on("unlink", handleFileChange);
+				}
+			}] : []
+		],
 		define: {
 			__DOCGEN_PARAMETERS__: JSON.stringify(parameters),
 			__DOCGEN_PAGES__: JSON.stringify(sortedPages),
@@ -283,7 +297,7 @@ const basePath = process.env.BASE_PATH || "/", generate = async (command, mode)
 }, scaffold = async (command) => {
 	const inputDir = findTemplateDir(import.meta.dirname), outputDir = path.normalize(command.output + "/"), verbose = command.verbose === true;
 	console.log(pico.green("Creating scaffold template directory")), await copyDirectory(inputDir, outputDir, verbose);
-}, version = "6.1.0";
+}, version = "6.2.0";
 if (program.version(version).usage("[command] [--option]"), program.command("scaffold").usage("[--option]").description("create a template input directory").option("-o, --output [path]", "path to the output directory (default: ./)", "./").option("-v, --verbose", "show verbose output including detailed errors").action((command) => {
 	scaffold(command);
 }), program.command("dev").usage("[--option]").description("create a static website from an input directory").option("-i, --input [path]", "path to the input directory [default: ./]", "./").option("-o, --output [path]", "path to the output directory [default: ./output]", "./output").option("-p, --pdf", "create a PDF document").option("-s, --set-version [version]", "override parameters.version (useful for build tools) [default: false]", false).option("-R, --set-release-date [date]", "override parameters.date (useful for build tools) [default: false]", false).option("-v, --verbose", "show verbose output including detailed errors").action((command) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docgen-tool",
   "type": "module",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "A tool for creating HTML and PDF documentation",
   "bin": "./dist/cli/cli.js",
   "files": [