Doc old versions (SAP#2458)

docs/versions.md

@@ -99,7 +99,7 @@ In order to use TNT icons or businessSuiteInAppSymbols icons suite, it is recomm
 
 ## Docs for earlier versions
 
-<!-- add-attribute:class:warning -->
-> **NOTE**: Always download the latest patch version!
+The current documentation page describes the latest Luigi version. The documentation for earlier Luigi versions is provided as Markdown files in our GitHub repository.
+
 
-The current documentation page describes the latest Luigi version. You can find the documentation for earlier Luigi versions by going to our [GitHub repository](https://github.com/SAP/luigi/tree/master/docs), selecting the branch dropdown in the top left corner, and choosing the tag of any earlier version.
+<!-- oldVersionsDropdown -->

website/docs/.gitignore

@@ -12,6 +12,7 @@ luigi-client
 docsearch.min.css
 public
 static/assets
+static/versions.json
 *coreStyles*
 navigation-generated.json
 sitemap.xml

website/docs/package.json

@@ -8,7 +8,8 @@
     "dev:config": "npm run build:config -- --watch",
     "dev:luigi": "sirv static/luigi --single --dev --cors --port 4000 --host 0.0.0.0",
     "debug:sapper": "PORT=4001 node --inspect node_modules/sapper/dist/cli.js dev",
-    "build:config": "node -r esm scripts/generate-docu-sitemap.js && webpack --config webpack-generateConfig.config",
+    "fetchversions": "curl -H \"Accept: application/vnd.github.v3+json\" https://api.github.com/repos/SAP/luigi/tags?per_page=100 > static/versions.json",
+    "build:config": "npm run fetchversions && node -r esm scripts/generate-docu-sitemap.js && webpack --config webpack-generateConfig.config",
     "export:sapper": "NODE_ENV=production sapper export --basepath /docu-microfrontend && sh ./scripts/move-export.sh",
     "export:serve": "sirv public --single --dev --cors --port 5000 --host 0.0.0.0",
     "export": "npm run build:config && npm run export:sapper",

website/docs/src/client.js

@@ -8,7 +8,7 @@ import { ScrollAnchorsHandler } from './client-js/smooth-scroll-anchors';
 import { SearchTagHandler } from './client-js/search-tag';
 
 sapper.start({
-	target: document.querySelector('#sapper')
+  target: document.querySelector('#sapper')
 });
 
 new CopyCodeHandler().init();

website/docs/src/routes/_layout.svelte

@@ -186,7 +186,7 @@
 				padding-left: 20px;
 			}
 		}
-		
+
 		ol {
 			padding: 0 0 0 18px;
 
@@ -414,6 +414,33 @@
 			font-size: 14px;
 		}
 
+    .custom-select {
+          position: relative;
+        select {
+          -moz-appearance: none;
+          -webkit-appearance: none;
+          appearance: none;
+          background: #edf2f7;
+          border: 1px solid #d0d8e2;
+          font-size: 16px;
+          line-height: 28px;
+          margin: 0;
+          font-weight: 600;
+          padding: 18px 80px 18px 20px;
+          cursor: pointer;
+          width: 100%;
+        }
+        &::after {
+          content: "▼";
+          color: #2deb8a;
+          font-size: 22px;
+          pointer-events: none;
+          position: absolute;
+          right: 15px;
+          top: 18px;
+        }
+    }
+
 		.accordion-container {
 
 			margin: 30px 0;

website/docs/src/services/markdown.service.js

@@ -13,6 +13,7 @@ import addCustomAttributes from '../unified-plugins/rehype-add-custom-attributes
 import wrapAccordion from '../unified-plugins/rehype-accordion';
 import luigiNavigationBuilder from '../unified-plugins/remark-generate-luigi-navigation';
 import addKeyWords from '../unified-plugins/rehype-add-keywords';
+import oldVersions from '../unified-plugins/rehype-luigi-oldVersions';
 
 // import highlight from 'rehype-highlight' // syntax highlight code blocks with lowlight: https://github.com/wooorm/lowlight
 import rehypeSection from '@agentofuser/rehype-section';
@@ -23,23 +24,24 @@ class MarkdownService {
     return new Promise((resolve, reject) => {
       unified()
         .use(markdown)
-        .use(frontmatter, {type: 'json', fence: {open: '<!-- meta', close: 'meta -->'}})
+        .use(frontmatter, { type: 'json', fence: { open: '<!-- meta', close: 'meta -->' } })
         // .use(logger)
         .use(luigiNavigationBuilder, data)
-        .use(remark2rehype, {allowDangerousHTML: true})
+        .use(remark2rehype, { allowDangerousHTML: true })
         .use(raw)
         .use(addCustomAttributes)
         .use(wrapAccordion, { questionTagName: 'h3' })
         .use(luigiLinkParser, data)
         .use(addIdsToHeadings)
         .use(addCopyToClipboard)
         .use(addKeyWords)
+        .use(oldVersions)
         .use(section) // section should be the last one
         .use(format)
         .use(html)
-        .process(String(value), function (err, file) {
-          if(err) {
-            console.error(err || file)
+        .process(String(value), function(err, file) {
+          if (err) {
+            console.error(err || file);
             return reject();
           }
           resolve(file.contents);
@@ -52,4 +54,4 @@ class MarkdownService {
   }
 }
 
-export const MarkdownSvc = new MarkdownService();
+export const MarkdownSvc = new MarkdownService();

website/docs/src/unified-plugins/rehype-luigi-oldVersions.js

@@ -0,0 +1,40 @@
+import visit from 'unist-util-visit';
+import h from 'hastscript';
+import versions from '../../static/versions.json';
+
+export default function oldVersion() {
+  return function transformer(tree) {
+    visit(tree, ['comment'], function(node, index, parent) {
+      if (node.type === 'comment' && node.value.trim() === 'oldVersionsDropdown') {
+        const wrapper = h('div.custom-select');
+        const oldVerDropdown = h('select.oldverdrop');
+        oldVerDropdown.properties.onchange =
+          "window.open('https://github.com/SAP/luigi/blob/' + event.target.value + '/docs/README.md', '_blank'); event.target.value=0;";
+        wrapper.children.push(oldVerDropdown);
+        parent.children.splice(index + 1, 0, wrapper);
+        const tagLinks = [];
+        const minors = {};
+        versions.forEach(tag => {
+          if (tag.name.indexOf('v') === 0 && tag.name.indexOf('-') < 0) {
+            const vInfo = tag.name.split('.');
+            if (vInfo && vInfo.length === 3) {
+              const minor = vInfo[0] + '.' + vInfo[1];
+              if (!minors[minor]) {
+                minors[minor] = tag;
+                tagLinks.push(tag);
+              }
+            }
+          }
+        });
+        const chooseOption = h('option', 'Choose a version');
+        chooseOption.properties.value = '0';
+        chooseOption.properties.style = 'display:none;';
+        oldVerDropdown.children.push(chooseOption);
+        tagLinks.slice(1).forEach(tag => {
+          const tagOption = h('option', tag.name);
+          oldVerDropdown.children.push(tagOption);
+        });
+      }
+    });
+  };
+}