Merge pull request #80 from mtmacdonald/inkitHeader

Docs website: add Inkit sponsorship links to the header
mtmacdonald · Oct 3, 2023 · df3c3b3 · df3c3b3
2 parents 9cf3acd + 7d01b45
commit df3c3b3
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docgen-tool",
-  "version": "3.2.12",
+  "version": "3.2.13",
   "description": "A tool for creating HTML and PDF documentation",
   "main": "dist/docgen.js",
   "bin": {

diff --git a/src/docgen/docgen.js b/src/docgen/docgen.js
@@ -276,6 +276,15 @@ function DocGen(process) {
             url: { type: 'string' },
           },
         },
+        sponsorLink: {
+          type: 'object',
+          required: ['name', 'url', 'logo'],
+          properties: {
+            name: { type: 'string' },
+            url: { type: 'string' },
+            logo: { type: 'string' },
+          },
+        },
         backlink: {
           type: 'object',
           required: ['name', 'url'],
@@ -624,7 +633,7 @@ function DocGen(process) {
     let backlink = '';
     if (meta.parameters.backlink.url !== '') {
       backlink +=
-        '<a href="' +
+        '<a class="button inverted" href="' +
         meta.parameters.backlink.url +
         '">' +
         meta.parameters.backlink.name +
@@ -633,6 +642,18 @@ function DocGen(process) {
       backlink += meta.parameters.backlink.name;
     }
 
+    let sponsorLink = '';
+    if (meta.parameters.sponsorLink) {
+      sponsorLink = `
+        <div id="headerSponsor">
+          <span>${meta.parameters.sponsorLink.name}</span>
+            <a href="${meta.parameters.sponsorLink.url}">
+             <img id="sponsorLogo" src="${meta.parameters.sponsorLink.logo}" alt="sponsor logo">
+            </a>
+        </div>
+      `;
+    }
+
     let contributors = '';
     meta.parameters.contributors.forEach((contributor) => {
       if (contributor.url !== '') {
@@ -659,14 +680,13 @@ function DocGen(process) {
           let logoUrl = logoPath;
           $('#dg-logo').css('background-image', 'url(' + logoUrl + ')');
           $('#dg-logo').css('height', logoHeight + 'px');
-          $('#dg-logo').css('line-height', logoHeight + 'px');
           $('#dg-logo').css('padding-left', logoWidth + 25 + 'px');
         } else {
           $('#dg-logo').css('padding-left', '0');
         }
         //parameters
         $('title').text(meta.parameters.title);
-        $('#dg-homelink').attr('href', homelink);
+        $('.dg-homelink').attr('href', homelink);
         $('#dg-title').text(meta.parameters.title);
         $('#dg-owner').html(owner);
         $('#dg-version').text(releaseVersion);
@@ -679,6 +699,7 @@ function DocGen(process) {
         $('#dg-id').html(meta.parameters.id);
         $('#dg-website').html(website);
         $('#dg-backlink').html(backlink);
+        $('#headerLeftText').append(sponsorLink);
         $('#dg-summary').text(meta.parameters.summary);
         $('#dg-copyright').html(copyright);
         $('#dg-marking').text(meta.parameters.marking);

diff --git a/src/docs/files/images/inkit-logo-small.svg b/src/docs/files/images/inkit-logo-small.svg
diff --git a/src/docs/index.md b/src/docs/index.md
@@ -1,4 +1,7 @@
 <style>
+header {
+  border-bottom: 2px solid transparent;
+}
 h1 {
   font-size: 32px;
   border-bottom: none;

diff --git a/src/docs/parameters.json b/src/docs/parameters.json
@@ -1,8 +1,8 @@
 {
   "title": "DocGen - a documentation tool",
   "name": "DocGen",
-  "version": "3.2.12",
-  "date": "28/09/2023",
+  "version": "3.2.13",
+  "date": "03/10/2023",
   "organization": {
     "name": "Inkit Inc. and contributors",
     "url": "https://www.inkit.com"
@@ -25,9 +25,14 @@
     "name": "Github",
     "url": "https://github.com/mtmacdonald/docgen"
   },
+  "sponsorLink": {
+    "name": "Sponsored by",
+    "url": "https://www.inkit.com",
+    "logo": "files/images/inkit-logo-small.svg"
+  },
   "backlink": {
-    "name": "",
-    "url": ""
+    "name": "Contact Inkit",
+    "url": "https://www.inkit.com/contact-us"
   },
   "module": "",
   "id": "",

diff --git a/src/docs/release-notes.md b/src/docs/release-notes.md
@@ -1,4 +1,8 @@
-## DocGen 3.2.12 28/09/2023
+## DocGen 3.2.13 03/10/2023
+
+- docs website: add Inkit sponsorship links to header
+
+## DocGen 3.2.12 28/09/2023
 
 - fix deprecated MathJax CDN ([#77](https://github.com/mtmacdonald/docgen/issues/77))
 

diff --git a/src/include/require/styles/framework.css b/src/include/require/styles/framework.css
@@ -357,8 +357,7 @@ input[type='submit']:focus {
  reused entities
 */
 .w-clear-after::after,
-.w-clear,
-header::after {
+.w-clear {
   clear: both;
   height: 0;
   visibility: hidden;
@@ -437,27 +436,51 @@ header .w-false-link,
 header .w-false-link:hover {
   color: rgb(1, 3, 4);
 }
-header .header-title {
-  display: table-cell;
-  vertical-align: middle;
-  padding: 30px 0 30px 0;
+header .header {
+  display: flex;
+  align-items: center;
+  height: 102px;
+  padding-right: 40px;
 }
-header .header-title > a {
-  text-decoration: none;
+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 .header-title > a div {
-  background-repeat: no-repeat;
-  height: 42px;
-  line-height: 42px;
-  padding-left: 115px;
+header #headerLeftText a {
+  text-decoration: none;
 }
-header .header-extra {
-  display: table-cell;
-  vertical-align: middle;
-  text-align: right;
+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;
+}
+header #headerRightBlock a {
+  padding: 5px 10px;
 }
+
 /*
  footer
 */

diff --git a/src/include/templates/main.html b/src/include/templates/main.html
@@ -62,15 +62,20 @@
 
 <header>
   <div class="w-fixed-width header-container">
-    <div class="header-title">
-      <a id="dg-homelink" href="#">
-        <div id="dg-logo" style="background-image:url('docs/images/logo.svg');">
-          <span id="dg-title"></span> <span id="dg-web-title-version" style="font-weight:normal;"></span>
+    <div class="header">
+      <div class="headerLeftBlock">
+        <a class="dg-homelink" href="#">
+          <div id="dg-logo"></div>
+        </a>
+        <div id="headerLeftText">
+          <a class="dg-homelink" href="#">
+            <span id="dg-title"></span> <span id="dg-web-title-version" style="font-weight:normal;"></span>
+          </a>
         </div>
-      </a>
-    </div>
-    <div class="header-extra">
-      <span id="dg-backlink"></span>
+      </div>
+      <div id="headerRightBlock">
+        <span id="dg-backlink"></span>
+      </div>
     </div>
   </div>
 </header>

diff --git a/src/styles/page.scss b/src/styles/page.scss
@@ -33,39 +33,60 @@ header
 	border-top: 2px solid $brand-primary-color;
 	border-bottom: 2px solid $brand-primary-color;
 
-	//.header-container {
-	//	display: table;
-	//}
+	.header {
+		display: flex;
+		align-items: center;
+		height: 102px;
+		padding-right: 40px;
+	}
+
+	.headerLeftBlock {
+		display: flex;
+		align-items: center;
+	}
+
+	#dg-logo {
+		background-repeat: no-repeat;
+	}
+
+	#headerLeftText {
+		display: flex;
+		flex-direction: column;
 
-	.header-title {
+		font-weight: bold;
+		font-size: 16px;
 
-		display: table-cell;
-		vertical-align: middle;
-		padding: 30px 0 30px 0;
+		a {
+			text-decoration: none;
+		}
+
+		#headerSponsor {
+			display: flex;
+			align-items: center;
+			font-weight: normal;
+			font-size: 11px;
+			margin: 5px 0 0 0;
+			opacity: 0.6;
 
-		> a {
-			text-decoration:none;
-			font-weight: bold;
-			font-size: 16px;
+			span {
+				margin-right: 6px;
+			}
 
-			div {
-				background-repeat: no-repeat;
-				height: $logo-height; line-height: $logo-height; //'vertical center'
-				padding-left: $logo-width + 25;
+			#sponsorLogo {
+				height: 12px;
+				margin: 0 auto;
+				display: block;
 			}
 		}
 	}
 
-	.header-extra {
-		display: table-cell;
-		vertical-align: middle;
-		text-align: right;
-	}
+	#headerRightBlock {
+		margin-left: auto;
 
-	&::after {
-		@extend .w-clear
+		a {
+			padding: 5px 10px;
+		}
 	}
-
 }
 
 /*