docgen-tool 3.7.0 → 4.0.0

package/dist/include/require/styles/framework.css

@@ -408,102 +408,42 @@ input[type='submit']:focus {
  page
 */
 html {
+  height: 100%;
   background-color: rgb(1, 3, 4);
   color: #444;
 }
 html body {
-  min-width: 1020px;
-}
-html body .w-fixed-width {
-  width: 980px;
-  margin: 0 auto;
+  height: 100%;
 }
 
-/*
- header
-*/
-header {
-  color: rgb(1, 3, 4);
+.page {
   background-color: #fff;
-  border-top: 2px solid rgb(1, 3, 4);
-  border-bottom: 2px solid rgb(1, 3, 4);
-}
-header a,
-header a:hover,
-header a:active,
-header a:visited,
-header .w-false-link,
-header .w-false-link:hover {
-  color: rgb(1, 3, 4);
-}
-header .header {
-  display: flex;
-  align-items: center;
-  height: 102px;
-  padding-right: 40px;
-}
-header .headerLeftBlock {
-  display: flex;
-  align-items: center;
-}
-header #dg-logo {
-  background-repeat: no-repeat;
-}
-header #headerLeftText {
-  display: flex;
-  flex-direction: column;
-  font-weight: bold;
-  font-size: 16px;
-}
-header #headerLeftText a {
-  text-decoration: none;
-}
-header #headerLeftText #headerSponsor {
-  display: flex;
-  align-items: center;
-  font-weight: normal;
-  font-size: 11px;
-  margin: 5px 0 0 0;
-  opacity: 0.6;
-}
-header #headerLeftText #headerSponsor span {
-  margin-right: 6px;
-}
-header #headerLeftText #headerSponsor #sponsorLogo {
-  height: 12px;
-  margin: 0 auto;
-  display: block;
-}
-header #headerRightBlock {
-  margin-left: auto;
-}
-
-/*
- footer
-*/
-footer div {
-  padding: 15px 0 15px 0;
-}
-footer > div:first-child {
-  text-align: center;
-  background-color: rgb(222, 232, 252);
-}
-footer > div:nth-child(2) {
-  color: #fff;
-  text-align: center;
-  line-height: 35px;
-}
-footer > div:nth-child(2) a,
-footer > div:nth-child(2) a:hover,
-footer > div:nth-child(2) a:active,
-footer > div:nth-child(2) a:visited,
-footer > div:nth-child(2) .w-false-link,
-footer > div:nth-child(2) .w-false-link:hover {
-  color: #fff;
-}
-footer > div:nth-child(2) > p:nth-child(2) {
-  font-size: 10px;
-  line-height: 12px;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  overflow: scroll;
+  left: 40px;
+  top: 80px;
+  padding: 30px;
+}
+@media not print {
+  .page {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media print {
+  .page {
+    background-color: white;
+    color: black !important;
+    position: relative !important;
+    left: 0 !important;
+    top: 0 !important;
+    overflow: visible !important;
+    padding: 0 !important;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 /*
@@ -511,7 +451,23 @@ footer > div:nth-child(2) > p:nth-child(2) {
 */
 section {
   background-color: #fff;
-  padding: 25px 0 25px 0;
+  /*
+  	Center content
+  	Note we need an old way because wkhtmltopdf doesn't support modern styles
+  */
+  width: 1200px;
+  max-width: 100%;
+  text-align: center;
+  margin: 0 auto;
+  overflow: hidden;
+}
+section > * {
+  text-align: left; /* Reset text alignment for child items */
+}
+@media not print {
+  section {
+    flex: 1 0 auto;
+  }
 }
 section > div p,
 section > div div,
@@ -883,24 +839,6 @@ button:active,
 .button:active {
   box-shadow: none;
 }
-button:hover,
-button:focus,
-button:active,
-.button:hover,
-.button:focus,
-.button:active {
-  position: relative;
-  z-index: 1;
-}
-button .icon,
-.button .icon {
-  margin: 0 0 0 10px;
-}
-button .icon svg,
-.button .icon svg {
-  height: 12px;
-  width: 12px;
-}
 
 .inverted {
   background-color: transparent;
@@ -924,6 +862,11 @@ button .icon svg,
   box-shadow: none;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 .w-image-shadow {
   box-shadow: 0 0 8px black;
 }
@@ -1082,104 +1025,265 @@ button .icon svg,
   color: #444;
 }
 
-pre {
-  font-size: 12px; /*todo - move to base styles*/
+.topbar {
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: 80px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-bottom: none;
+  background: white;
+  display: flex;
+  align-items: center;
+  position: fixed;
+  color: rgb(1, 3, 4);
 }
-
-section blockquote p,
-section li p {
-  margin: 0;
+@media print {
+  .topbar {
+    display: none !important;
+  }
 }
-
-.w-table {
-  width: 100%;
+.topbar .left,
+.topbar .right {
+  display: flex;
+  min-width: 0;
 }
-
-/******************************** TABLE OF CONTENTS ****************************/
-/*Table of contents button to initiate show/hide*/
-#dg-navigator {
-  float: right;
-  background-color: rgb(26, 34, 49);
-  color: white;
-  text-align: right;
-  padding: 10px 20px 10px 20px;
-  margin-right: 200px;
-  border-radius: 0 0 10px 10px;
-  cursor: pointer;
+.topbar .left {
+  gap: 10px;
+  padding-left: 30px;
+}
+.topbar .right {
+  margin-left: auto;
+  flex-shrink: 0;
+  padding-right: 30px;
+  gap: 10px;
+}
+.topbar a,
+.topbar a:hover,
+.topbar a:active,
+.topbar a:visited,
+.topbar .w-false-link,
+.topbar .w-false-link:hover {
+  color: rgb(1, 3, 4);
+}
+.topbar #dg-logo {
+  background-repeat: no-repeat;
+}
+.topbar #headerLeftText {
+  display: flex;
+  flex-direction: column;
   font-weight: bold;
+  font-size: 16px;
+}
+.topbar #headerLeftText a {
+  text-decoration: none;
+}
+.topbar #headerLeftText #headerSponsor {
+  display: flex;
+  align-items: center;
+  font-weight: normal;
+  font-size: 11px;
+  margin: 5px 0 0 0;
+  opacity: 0.6;
+}
+.topbar #headerLeftText #headerSponsor span {
+  margin-right: 6px;
+}
+.topbar #headerLeftText #headerSponsor #sponsorLogo {
+  height: 12px;
+  margin: 0 auto;
+  display: block;
+}
+@media only screen and (max-width: 600px) {
+  .topbar #headerLeftText {
+    display: none;
+  }
+}
+.topbar #headerRightBlock {
+  margin-left: auto;
 }
 
-/*Table of contents container*/
-#dg-toc {
+#dgSideBar {
+  background-color: #1c1c1c;
   color: white;
-  background-color: rgb(26, 34, 49);
+  transition: width 0.4s ease;
+  width: 330px;
+  max-width: 80%;
+  position: fixed;
+  top: 80px;
+  left: 0;
+  bottom: 0;
+  z-index: 99;
 }
-
-#dg-toc table {
-  table-layout: auto;
-  width: 100%;
+@media print {
+  #dgSideBar {
+    display: none;
+  }
 }
-
-#dg-toc div {
-  padding: 15px 0 15px 0;
+#dgSideBar.dgSideBarCollapsed {
+  width: 40px;
 }
 
-/*Columns in table of contents*/
-#dg-toc td {
-  border-right: 1px solid #666;
-  vertical-align: top;
-  text-align: left;
-  padding: 0 20px 0 20px;
+#dgSideBarInnerWrapper {
+  overflow: hidden;
 }
 
-#dg-toc ul {
-  padding: 0;
-  list-style-type: none;
+#dgSideBarInner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 5px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  width: 330px;
+  transition: opacity 0.4s ease;
 }
-
-#dg-toc li {
-  font-weight: bold;
+.dgSideBarCollapsed #dgSideBarInner {
+  opacity: 0;
+  pointer-events: none;
+}
+#dgSideBarInner::-webkit-scrollbar {
+  width: 0px; /* Remove scrollbar space */
+  background: transparent; /* Optional: just make scrollbar invisible */
 }
 
-#dg-toc table td a {
+#dgSideBarContent {
+  padding: 20px;
   color: white;
-  font-weight: normal;
+}
+#dgSideBarContent .dgSideBarHeading {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 18px;
+  margin: 32px 0 12px 0;
+  border: none;
+}
+#dgSideBarContent ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0 0 10px;
+}
+#dgSideBarContent li {
+  padding: 2px 0 2px 0;
+}
+#dgSideBarContent li a {
   text-decoration: none;
-  margin-left: 10px;
+  padding: 0;
+  margin: 0;
+  color: white;
 }
-
-#dg-toc table td a:hover {
-  text-decoration: underline;
+#dgSideBarContent .dgSideBarAttribution {
+  margin: 32px 0 12px 0;
 }
-
-#dg-tocFixedColumn {
-  border-right: none;
+#dgSideBarContent .dgSideBarAttribution ul {
+  padding: 0;
 }
-
-#dg-toc table #dg-tocFixedColumn a {
-  vertical-align: middle;
-  margin-left: 4px;
+#dgSideBarContent .dgSideBarAttribution li {
+  display: flex;
+  align-items: center;
+}
+#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;
 }
 
-.dg-tocGroup {
-  width: 22%;
+#dgSideBarButton {
+  position: absolute;
+  right: 0;
+  top: 20px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 -20px 0 0;
+  padding: 0;
+  vertical-align: baseline;
+  line-height: 1em;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  outline: 0;
+  border: 1px solid rgb(22, 71, 193);
+  background: rgb(46, 113, 225);
+  color: rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  user-select: none;
+  will-change: '';
+  max-width: 100%;
+  min-height: 20px;
+  cursor: pointer;
+  transition: transform 0.4s;
+}
+#dgSideBarButton:hover,
+#dgSideBarButton:focus {
+  background-color: #1f64d7;
+  background-image: none;
+  color: rgba(0, 0, 0, 0.8);
+  opacity: 1;
+}
+#dgSideBarButton:active,
+#dgSideBarButton.active {
+  background-color: #1c59c0;
+  background-image: none;
+  color: rgba(0, 0, 0, 0.9);
+}
+#dgSideBarButton .dgIcon {
+  margin: 0;
+  color: white;
+}
+#dgSideBarButton .dgIcon svg {
+  height: 40px;
+}
+.dgSideBarCollapsed #dgSideBarButton {
+  transform: scaleX(-1);
 }
 
-.dg-tocHeading {
-  font-size: 16px;
+/*
+ footer
+*/
+footer {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+}
+footer div {
+  margin: 0 30px 0 30px;
+}
+footer > div:first-child {
+  border-top: 1px solid #ddd;
+}
+@media not print {
+  footer {
+    flex-shrink: 0;
+  }
 }
 
-.dgWebTocAttribution li {
-  display: flex;
-  align-items: center;
+pre {
+  font-size: 12px; /*todo - move to base styles*/
 }
-.dgWebTocAttribution .dgIcon {
-  width: 18px;
-  height: 18px;
+
+section blockquote p,
+section li p {
+  margin: 0;
 }
-.dgWebTocAttribution .dgIcon svg {
-  width: 18px;
-  height: 18px;
+
+.w-table {
+  width: 100%;
 }
 
 /*

package/dist/include/require/styles/framework.js

@@ -5437,3 +5437,23 @@ $(document).ready(() => {
     $(this).toggleClass('active');
   });
 });
+
+/*
+  SideBar Toggle Button
+*/
+document.addEventListener('DOMContentLoaded', function () {
+  const sideBar = document.getElementById('dgSideBar');
+  const sideBarButton = document.getElementById('dgSideBarButton');
+  const sideBarIcon = sideBarButton.querySelector('span.dgIcon');
+  sideBarButton.addEventListener('click', function () {
+    if (sideBar.classList.contains('dgSideBarCollapsed')) {
+      sideBar.classList.remove('dgSideBarCollapsed');
+      sideBarIcon.setAttribute('data-name', 'x');
+      sideBarIcon.innerHTML = w_icons['x'];
+    } else {
+      sideBar.classList.add('dgSideBarCollapsed');
+      sideBarIcon.setAttribute('data-name', 'menu-2');
+      sideBarIcon.innerHTML = w_icons['menu-2'];
+    }
+  });
+});

package/dist/include/templates/main.html

@@ -2,7 +2,8 @@
 <html>
  <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, user-scalable=yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
+  <meta name="apple-mobile-web-app-capable" content="yes">
   <title></title>
 
   <link rel="stylesheet" href="require/styles/framework.css" type="text/css" />

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "docgen-tool",
-    "version": "3.7.0",
+    "version": "4.0.0",
     "description": "A tool for creating HTML and PDF documentation",
     "main": "dist/docgen.ts",
     "bin": {

package/dist/src/docgen/views/components/footer/footer.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
+exports.WebFooter = exports.Footer = void 0;
 var react_1 = __importDefault(require("react"));
 var copyright_1 = require("../copyright/copyright");
 var Footer = function (_a) {
@@ -20,3 +20,13 @@ var Footer = function (_a) {
                 parameters.attribution))));
 };
 exports.Footer = Footer;
+var WebFooter = function (_a) {
+    var parameters = _a.parameters;
+    return (react_1.default.createElement("footer", null,
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("p", null,
+                react_1.default.createElement("span", { id: "dg-web-footer" }, parameters.webFooter))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(exports.Footer, { parameters: parameters }))));
+};
+exports.WebFooter = WebFooter;

package/dist/src/docgen/views/components/page/page.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Page = void 0;
+var react_1 = __importDefault(require("react"));
+var Page = function (_a) {
+    var children = _a.children;
+    return (react_1.default.createElement("div", { className: "page" }, children));
+};
+exports.Page = Page;

package/dist/src/docgen/views/components/side-bar/side-bar.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideBar = void 0;
+// @ts-nocheck
+var react_1 = __importDefault(require("react"));
+var Page = function (_a) {
+    var page = _a.page;
+    var name = page.source.substring(0, page.source.lastIndexOf('.'));
+    var path = name + '.html';
+    return (react_1.default.createElement("li", null,
+        react_1.default.createElement("a", { href: path }, page.title)));
+};
+var SideBar = function (_a) {
+    var name = _a.name, sortedPages = _a.sortedPages, pdfEnabled = _a.pdfEnabled;
+    var pages = Object.values(sortedPages).flat();
+    var pdfName = name.toLowerCase() + '.pdf';
+    return (react_1.default.createElement("div", { id: "dgSideBar", className: "dgSideBarCollapsed" },
+        react_1.default.createElement("button", { id: "dgSideBarButton" },
+            react_1.default.createElement("span", { className: "dgIcon", "data-name": "menu-2" })),
+        react_1.default.createElement("div", { id: "dgSideBarInnerWrapper" },
+            react_1.default.createElement("div", { id: "dgSideBarInner" },
+                react_1.default.createElement("div", { id: "dgSideBarContent" },
+                    pages
+                        .filter(function (p) { return (p === null || p === void 0 ? void 0 : p.heading) !== 'Extra'; })
+                        .map(function (page, i) { return (react_1.default.createElement("div", { key: i },
+                        react_1.default.createElement("div", { className: "dgSideBarHeading" }, page.heading),
+                        react_1.default.createElement("ul", null, page.pages.map(function (subPage, i) { return (react_1.default.createElement(Page, { key: i, page: subPage })); })))); }),
+                    react_1.default.createElement("div", { className: "dgSideBarAttribution" },
+                        react_1.default.createElement("ul", null,
+                            react_1.default.createElement("li", null,
+                                react_1.default.createElement("span", { className: "dgIcon", "data-name": "users", title: "ownership" }),
+                                react_1.default.createElement("a", { href: "ownership.html" }, "Ownership")),
+                            react_1.default.createElement("li", null,
+                                react_1.default.createElement("span", { className: "dgIcon", "data-name": "refresh", title: "release notes" }),
+                                react_1.default.createElement("a", { href: "release-notes.html" }, "Release Notes")))),
+                    react_1.default.createElement("div", { className: "dgSideBarPDFButton" }, pdfEnabled && (react_1.default.createElement("a", { className: "button", style: { textDecoration: 'none' }, href: pdfName }, "PDF"))))))));
+};
+exports.SideBar = SideBar;

package/dist/src/docgen/views/components/top-bar/top-bar.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBar = void 0;
+var react_1 = __importDefault(require("react"));
+var Logo = function (_a) {
+    var parameters = _a.parameters;
+    return ((parameters === null || parameters === void 0 ? void 0 : parameters.logoPath) && (react_1.default.createElement("img", { style: {
+            marginRight: '25px',
+        }, src: parameters === null || parameters === void 0 ? void 0 : parameters.logoPath })));
+};
+var TopBar = function (_a) {
+    var parameters = _a.parameters;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: "topbar" },
+            react_1.default.createElement("div", { className: "left" },
+                react_1.default.createElement("a", { className: "dg-homelink", href: parameters.homePagePath },
+                    react_1.default.createElement(Logo, { parameters: parameters })),
+                react_1.default.createElement("div", { id: "headerLeftText" },
+                    react_1.default.createElement("a", { className: "dg-homelink", href: parameters.homePagePath },
+                        react_1.default.createElement("span", { id: "dg-title" }, parameters.title),
+                        react_1.default.createElement("span", { id: "dg-web-title-version", style: { fontWeight: 'normal' } },
+                            "\u00A0(",
+                            parameters.version,
+                            ")")),
+                    react_1.default.createElement("div", { id: "headerSponsor" },
+                        react_1.default.createElement("span", null, parameters.sponsorLink.name),
+                        react_1.default.createElement("a", { href: parameters.sponsorLink.url },
+                            react_1.default.createElement("img", { id: "sponsorLogo", src: parameters.sponsorLink.logo, alt: "sponsor logo" }))))),
+            react_1.default.createElement("div", { className: "right" },
+                react_1.default.createElement("span", { id: "dg-backlink" }, parameters.backlink.url && (react_1.default.createElement("a", { className: "button inverted", href: parameters.backlink.url }, parameters.backlink.name)))))));
+};
+exports.TopBar = TopBar;

package/dist/src/docgen/views/pages/main/main.js

@@ -5,55 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Main = void 0;
 var react_1 = __importDefault(require("react"));
-var web_table_of_contents_1 = require("../../components/web-table-of-contents/web-table-of-contents");
 var footer_1 = require("../../components/footer/footer");
-var Logo = function (_a) {
-    var parameters = _a.parameters;
-    return ((parameters === null || parameters === void 0 ? void 0 : parameters.logoPath) && (react_1.default.createElement("img", { style: {
-            marginRight: '25px',
-        }, src: parameters === null || parameters === void 0 ? void 0 : parameters.logoPath })));
-};
-var Header = function (_a) {
-    var parameters = _a.parameters;
-    return (react_1.default.createElement("header", null,
-        react_1.default.createElement("div", { className: "w-fixed-width header-container" },
-            react_1.default.createElement("div", { className: "header" },
-                react_1.default.createElement("div", { className: "headerLeftBlock" },
-                    react_1.default.createElement("a", { className: "dg-homelink", href: parameters.homePagePath },
-                        react_1.default.createElement(Logo, { parameters: parameters })),
-                    react_1.default.createElement("div", { id: "headerLeftText" },
-                        react_1.default.createElement("a", { className: "dg-homelink", href: parameters.homePagePath },
-                            react_1.default.createElement("span", { id: "dg-title" }, parameters.title),
-                            react_1.default.createElement("span", { id: "dg-web-title-version", style: { fontWeight: 'normal' } },
-                                "\u00A0(",
-                                parameters.version,
-                                ")")),
-                        react_1.default.createElement("div", { id: "headerSponsor" },
-                            react_1.default.createElement("span", null, parameters.sponsorLink.name),
-                            react_1.default.createElement("a", { href: parameters.sponsorLink.url },
-                                react_1.default.createElement("img", { id: "sponsorLogo", src: parameters.sponsorLink.logo, alt: "sponsor logo" }))))),
-                react_1.default.createElement("div", { id: "headerRightBlock" },
-                    react_1.default.createElement("span", { id: "dg-backlink" }, parameters.backlink.url && (react_1.default.createElement("a", { className: "button inverted", href: parameters.backlink.url }, parameters.backlink.name))))))));
-};
-var WebFooter = function (_a) {
-    var parameters = _a.parameters;
-    return (react_1.default.createElement("footer", null,
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("p", { className: "w-fixed-width" },
-                react_1.default.createElement("span", { id: "dg-web-footer" }, parameters.webFooter))),
-        react_1.default.createElement("div", { className: "w-fixed-width" },
-            react_1.default.createElement(footer_1.Footer, { parameters: parameters }))));
-};
+var top_bar_1 = require("../../components/top-bar/top-bar");
+var side_bar_1 = require("../../components/side-bar/side-bar");
+var page_1 = require("../../components/page/page");
 var Main = function (_a) {
-    var parameters = _a.parameters, sortedPages = _a.sortedPages, pdfEnabled = _a.pdfEnabled, fixedWidth = _a.fixedWidth, children = _a.children;
+    var parameters = _a.parameters, sortedPages = _a.sortedPages, pdfEnabled = _a.pdfEnabled, children = _a.children;
     var name = parameters.name;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { id: "dg-toc" },
-            react_1.default.createElement(web_table_of_contents_1.TableOfContents, { name: name, sortedPages: sortedPages, pdfEnabled: pdfEnabled })),
-        react_1.default.createElement("div", { id: "dg-navigator" }, "Table of contents"),
-        react_1.default.createElement(Header, { parameters: parameters }),
-        react_1.default.createElement("section", { id: "dg-content" }, fixedWidth ? (react_1.default.createElement("div", { className: "w-fixed-width" },
-            react_1.default.createElement("div", { id: "dg-innerContent" }, children))) : (react_1.default.createElement("div", { id: "dg-innerContent" }, children))),
-        react_1.default.createElement(WebFooter, { parameters: parameters })));
+        react_1.default.createElement(top_bar_1.TopBar, { parameters: parameters }),
+        react_1.default.createElement(side_bar_1.SideBar, { name: name, sortedPages: sortedPages, pdfEnabled: pdfEnabled }),
+        react_1.default.createElement(page_1.Page, null,
+            react_1.default.createElement("section", { id: "dg-content" },
+                react_1.default.createElement("div", { id: "dg-innerContent" }, children)),
+            react_1.default.createElement(footer_1.WebFooter, { parameters: parameters }))));
 };
 exports.Main = Main;

package/dist/src/docgen/views/pages/process-pages.js

@@ -103,7 +103,7 @@ var processPages = function (_a) {
                 section.pages.forEach(function (page) {
                     var $ = cheerio_1.default.load(mainTemplate.html()); //clone
                     var key = page.source;
-                    var htmlPage = (0, html_1.toHTML)(react_1.default.createElement(main_1.Main, { parameters: parameters, sortedPages: sortedPages, pdfEnabled: pdfEnabled, fixedWidth: page.html !== true }));
+                    var htmlPage = (0, html_1.toHTML)(react_1.default.createElement(main_1.Main, { parameters: parameters, sortedPages: sortedPages, pdfEnabled: pdfEnabled }));
                     $('body').html(htmlPage);
                     //Todo: render the Markdown directly inside the React component
                     var content = pages[key];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docgen-tool",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "description": "A tool for creating HTML and PDF documentation",
   "main": "dist/docgen.ts",
   "bin": {

package/dist/src/docgen/views/components/web-table-of-contents/web-table-of-contents.js

@@ -1,41 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableOfContents = void 0;
-var react_1 = __importDefault(require("react"));
-var Page = function (_a) {
-    var page = _a.page;
-    var name = page.source.substring(0, page.source.lastIndexOf('.'));
-    var path = name + '.html';
-    return (react_1.default.createElement("li", null,
-        react_1.default.createElement("a", { href: path }, page.title)));
-};
-var Section = function (_a) {
-    var section = _a.section;
-    if ((section === null || section === void 0 ? void 0 : section.heading) === 'Extra') {
-        return null;
-    }
-    var visible = (section === null || section === void 0 ? void 0 : section.heading) && (section === null || section === void 0 ? void 0 : section.pages);
-    return (react_1.default.createElement("td", { className: "dg-tocGroup" }, visible && (react_1.default.createElement("ul", null,
-        react_1.default.createElement("li", { className: "dg-tocHeading" }, section.heading),
-        section.pages.map(function (page, i) { return (react_1.default.createElement(Page, { key: i, page: page })); })))));
-};
-var TableOfContents = function (_a) {
-    var sortedPages = _a.sortedPages, name = _a.name, pdfEnabled = _a.pdfEnabled;
-    var pdfName = name.toLowerCase() + '.pdf';
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("table", { className: "unstyled" },
-            Object.values(sortedPages).map(function (section, i) { return (react_1.default.createElement(Section, { key: i, section: section === null || section === void 0 ? void 0 : section[0] })); }),
-            react_1.default.createElement("td", { className: "dg-tocGroup dgWebTocAttribution", id: "dg-tocFixedColumn" },
-                react_1.default.createElement("ul", null,
-                    react_1.default.createElement("li", null,
-                        react_1.default.createElement("span", { className: "dgIcon", "data-name": "users", title: "ownership" }),
-                        react_1.default.createElement("a", { href: "ownership.html" }, "Ownership")),
-                    react_1.default.createElement("li", null,
-                        react_1.default.createElement("span", { className: "dgIcon", "data-name": "refresh", title: "release notes" }),
-                        react_1.default.createElement("a", { href: "release-notes.html" }, "Release Notes"))),
-                react_1.default.createElement("div", null, pdfEnabled && (react_1.default.createElement("a", { className: "button whiteInverted", style: { textDecoration: 'none' }, href: pdfName }, "PDF")))))));
-};
-exports.TableOfContents = TableOfContents;