Merge pull request #92 from mtmacdonald/styles-cleanup

Styles Cleanup

package.json

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

src/docgen/fs/templates.ts

@@ -15,9 +15,6 @@ export const loadTemplates = async ({
       redirect: await readFile(
         __dirname + '/../../include/templates/redirect.html',
       ),
-      webCover: await readFile(
-        __dirname + '/../../include/templates/webCover.html',
-      ),
       pdfCover: await readFile(
         __dirname + '/../../include/templates/pdfCover.html',
       ),

src/docgen/types.ts

@@ -84,7 +84,6 @@ export type Meta = {
 export type Templates = {
   main?: string|TCheerioAPI,
   redirect?: string|TCheerioAPI,
-  webCover?: string|TCheerioAPI,
   pdfCover?: string|TCheerioAPI,
   pdfHeader?: string|TCheerioAPI,
   pdfFooter?: string|TCheerioAPI,

src/docgen/views/components/logo/logo.tsx

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

src/docgen/views/components/pdf-footer/pdf-footer.tsx

@@ -5,7 +5,7 @@ export const PdfFooter = ({
   parameters
 }) => {
   return (
-    <div id="dg-footer">
+    <div id="dg-pdf-footer">
       <table>
         <thead></thead>
         <tfoot></tfoot>

src/docgen/views/components/pdf-header/pdf-header.tsx

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

src/docgen/views/pages/cover/pdf-cover.tsx

@@ -1,19 +1,8 @@
 import React from 'react';
 import { Cover } from './cover';
+import { Logo } from '../../components/logo/logo';
 import { Footer } from '../../components/footer/footer';
 
-const Logo = ({
-  parameters,
-}) => {
-  return (
-    parameters?.logoPath && (
-      <img
-        src={`../${parameters?.logoPath}`}
-      />
-    )
-  )
-};
-
 export const PdfCover = ({
   parameters,
 }) => {
@@ -25,7 +14,7 @@ export const PdfCover = ({
         </div>
       </div>
       <Cover parameters={parameters} />
-      <div id="dg-footer">
+      <div id="dg-pdf-cover-footer">
         <Footer parameters={parameters} />
       </div>
     </>

src/docgen/views/pages/process-pages.tsx

@@ -6,6 +6,7 @@ import { Main } from './main/main';
 import { Cover } from './cover/cover';
 import { toHTML } from "../html";
 import { PdfCover } from "./cover/pdf-cover";
+import { PdfHeader } from "../components/pdf-header/pdf-header";
 import { PdfFooter } from "../components/pdf-footer/pdf-footer";
 
 export const processTemplates = ({
@@ -71,8 +72,8 @@ export const processPages = async ({
   const tableOfContents = contents;
   const mainTemplate = hydratedTemplates.main;
   const pdfCoverTemplate = hydratedTemplates.pdfCover;
+  const pdfHeaderTemplate = hydratedTemplates.pdfHeader;
   const pdfFooterTemplate = hydratedTemplates.pdfFooter;
-  const webCover = hydratedTemplates.webCover;
   const pdfEnabled = options.pdf;
   console.log(pico.green('Generating the static web content'));
   tableOfContents.forEach((section) => {
@@ -139,32 +140,32 @@ export const processPages = async ({
     </Main>
   );
   let $ = cheerio.load(mainTemplate.html());
-  let webCoverStyles = cheerio.load(webCover.html());
-  $('head').append(webCoverStyles('head').html());
   $('body').html(webCoverHtml);
 
   const pdfCoverHtml = toHTML(
     <PdfCover parameters={parameters} />
   );
   let $Pdf = cheerio.load(pdfCoverTemplate.html());
-  let pdfCoverStyles = cheerio.load(pdfCoverTemplate.html());
-  $Pdf('head').append(pdfCoverStyles('head').html());
   $Pdf('body').html(pdfCoverHtml);
 
+  const pdfHeaderHtml = toHTML(
+    <PdfHeader parameters={parameters} />
+  );
+  let $PdfHeader = cheerio.load(pdfHeaderTemplate.html());
+  $PdfHeader('body').html(pdfHeaderHtml);
+
   const pdfFooterHtml = toHTML(
     <PdfFooter parameters={parameters} />
   );
   let $PdfFooter = cheerio.load(pdfFooterTemplate.html());
-  let pdfFooterStyles = cheerio.load(pdfFooterTemplate.html());
-  $PdfFooter('head').append(pdfFooterStyles('head').html());
   $PdfFooter('body').html(pdfFooterHtml);
 
   return {
     pages,
     redirect: hydratedTemplates.redirect,
     webCover: $.html(),
     pdfCover: $Pdf.html(),
-    pdfHeader: hydratedTemplates.pdfHeader.html(),
+    pdfHeader: $PdfHeader.html(),
     pdfFooter: $PdfFooter.html(),
   };
 };

src/docs/parameters.json

@@ -1,8 +1,8 @@
 {
   "title": "DocGen - a documentation tool",
   "name": "DocGen",
-  "version": "3.5.0",
-  "date": "04/12/2023",
+  "version": "3.6.0",
+  "date": "14/12/2023",
   "organization": {
     "name": "Inkit Inc. and contributors",
     "url": "https://www.inkit.com"

src/docs/release-notes.md

@@ -1,4 +1,8 @@
-## DocGen 3.5.0 04/12/2023
+## DocGen 3.6.0 14/12/2023
+
+- simplify and improve styles layer
+
+## DocGen 3.5.0 04/12/2023
 
 - modernise view code (use React templates)
 

src/include/require/styles/framework.css

@@ -1040,3 +1040,217 @@ button .icon svg,
 td.center {
   display: table-cell;
 }
+
+#dg-coverInfo {
+  margin-top: 100px;
+  margin-bottom: 50px;
+  width: 100%;
+}
+
+#dg-coverInfo {
+  border-collapse: separate; /*http://stackoverflow.com/questions/7625586/*/
+}
+
+#dg-coverInfo th {
+  background-color: rgb(46, 113, 225);
+  color: white;
+  font-size: 34px;
+  padding: 20px;
+  border: 1px solid rgb(46, 113, 225);
+  border-radius: 10px 10px 0 0;
+}
+
+#dg-coverInfo tr td {
+  border-top: 2px solid rgb(46, 113, 225);
+  border-left: 2px solid rgb(46, 113, 225);
+  border-bottom: none;
+  border-right: none;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+#dg-coverInfo td:last-child {
+  border-right: 2px solid rgb(46, 113, 225);
+}
+
+#dg-coverInfo .dg-finalRow td {
+  border-bottom: 2px solid rgb(46, 113, 225);
+}
+
+#dg-summary {
+  margin-bottom: 100px;
+}
+
+/*
+  PDF header
+*/
+#dg-pdf-header {
+  text-align: right;
+}
+
+/*
+  PDF cover
+*/
+#dg-pdfLogo {
+  display: inline-block;
+  float: right;
+}
+
+#dg-pdf-cover-footer {
+  width: 100%;
+  text-align: center;
+}
+
+/*
+  PDF footer
+*/
+#dg-pdf-footer {
+  border-top: 1px solid #385691;
+  padding-top: 10px;
+}
+
+#dg-pdf-footer table {
+  width: 100%;
+  text-align: center;
+  table-layout: fixed;
+  word-wrap: break-word;
+}
+
+#dg-pdf-footer a {
+  text-decoration: none;
+  color: #444;
+}
+
+pre {
+  font-size: 12px; /*todo - move to base styles*/
+}
+
+section blockquote p,
+section li p {
+  margin: 0;
+}
+
+.w-table {
+  width: 100%;
+}
+
+/******************************** 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;
+  font-weight: bold;
+}
+
+/*Table of contents container*/
+#dg-toc {
+  color: white;
+  background-color: rgb(26, 34, 49);
+}
+
+#dg-toc table {
+  table-layout: auto;
+  width: 100%;
+}
+
+#dg-toc div {
+  padding: 15px 0 15px 0;
+}
+
+/*Columns in table of contents*/
+#dg-toc td {
+  border-right: 1px solid #666;
+  vertical-align: top;
+  text-align: left;
+  padding: 0 20px 0 20px;
+}
+
+#dg-toc ul {
+  padding: 0;
+  list-style-type: none;
+}
+
+#dg-toc li {
+  font-weight: bold;
+}
+
+#dg-toc table td a {
+  color: white;
+  font-weight: normal;
+  text-decoration: none;
+  margin-left: 10px;
+}
+
+#dg-toc table td a:hover {
+  text-decoration: underline;
+}
+
+#dg-tocFixedColumn {
+  border-right: none;
+}
+
+#dg-toc table #dg-tocFixedColumn a {
+  vertical-align: middle;
+  margin-left: 4px;
+}
+
+.dg-tocGroup {
+  width: 22%;
+}
+
+.dg-tocHeading {
+  font-size: 16px;
+}
+
+.dg-tocIcon {
+  width: 18px;
+  height: 18px;
+  float: left;
+}
+
+.dg-tocIcon svg {
+  fill: white;
+}
+
+/*
+	Page table of contents
+*/
+.dg-pageToc {
+  list-style: none;
+  padding: 10px;
+  border: 1px solid #999;
+  background-color: #eee;
+}
+
+/*
+	Class to make a heading look invisible in web page, but still appear in the PDF table of contents
+		- display:none, visibily: hidden, zero dimensions, and offscreen positioning don't work
+		- so instead take it out of the flow and make it small and translucent
+*/
+.dg-hiddenTitle {
+  display: block;
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  background-color: transparent;
+}
+
+.dg-fakeHeading {
+  text-decoration: none;
+  font-weight: bold;
+  color: #385691;
+  border-bottom: 1px solid #999;
+  margin: 20px 0 20px 0;
+  font-size: 16px;
+  padding-bottom: 4px;
+}