Add source code publishing!

Author: ShukantPal

common/config/rush/pnpm-lock.yaml

@@ -141,6 +141,7 @@ async function main(argv: yargs.Argv) {
     docDatabase: db,
     opts: config.opts,
     tutorials,
+    source: sourceFiles,
     verbose: !!argv.verbose,
   };
 

packages/webdoc-cli/src/index.js

@@ -47,7 +47,8 @@
     "code-prettify": "^0.1.0",
     "fs-extra": "^9.0.1",
     "markdown-it": "^11.0.0",
-    "markdown-it-highlightjs": "^3.1.0"
+    "markdown-it-highlightjs": "^3.1.0",
+    "highlight.js": "~10.7.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/webdoc-default-template/package.json

@@ -1,7 +1,9 @@
 // @flow
 
 const {crawl} = require("./helper/crawl");
+const fs = require("fs");
 const fse = require("fs-extra");
+const hljs = require("highlight.js");
 const path = require("path");
 const {traverse} = require("@webdoc/model");
 const {
@@ -24,6 +26,7 @@ const {categoryFilterPlugin} = require("./helper/renderer-plugins/category-filte
 import type {
   Doc,
   RootDoc,
+  SourceFile,
   TutorialDoc,
 } from "@webdoc/types";
 
@@ -62,6 +65,7 @@ let idToDoc/*: Map<string, Doc> */;
 
 exports.publish = async function publish(options /*: PublishOptions */) {
   const config = options.config;
+  const source = options.source;
 
   await prepareLinker(config);
 
@@ -146,6 +150,7 @@ exports.publish = async function publish(options /*: PublishOptions */) {
   });
 
   await outStaticFiles(outDir, config);
+  outSource(outDir, pipeline, options.config, source);
   outExplorerData(outDir, crawlData);
   outMainPage(indexRelative ? path.join(outDir, indexRelative) : null, pipeline, options.config);
   outIndexes(outDir, pipeline, options.config, crawlData.index);
@@ -247,6 +252,32 @@ async function outMainPage(
   }
 }
 
+function outSource(
+  outDir /*: string */,
+  pipeline /*: TemplatePipeline */,
+  config /*: ConfigSchema */,
+  source /*: ?$ReadOnlyArray<SourceFile> */,
+) {
+  if (source) {
+    for (const file of source) {
+      const raw = hljs.highlightAuto(
+        fs.readFileSync(path.resolve(process.cwd(), file.path), "utf8"),
+      ).value;
+      const pkgName = file.package.name || "";
+      const outFile = path.join(pkgName, file.path + ".html");
+
+      pipeline.render("source.tmpl", {
+        appBar: {current: "sources"},
+        env: config,
+        raw,
+        title: path.basename(file.path),
+      }, {
+        outputFile: path.join(outDir, outFile),
+      });
+    }
+  }
+}
+
 async function outReadme(
   outputFile /*: string */,
   pipeline /*: TemplatePipeline */,
@@ -357,6 +388,7 @@ function outReference(
         document: doc,
         explorerData,
         title: doc.name,
+        require,
         env: config,
       }, {
         outputFile: path.join(outDir, page),

packages/webdoc-default-template/publish.js

@@ -10,6 +10,7 @@
 @import "members";
 @import "members-explorer";
 @import "snippets";
+@import "source";
 @import "footer";
 @import "tutorial";
 

packages/webdoc-default-template/src/styles/index.scss

@@ -45,6 +45,7 @@
     }
 
     &_content {
+      flex-grow: 1;
       font-size: 1.3em;
       margin-left: 8px;
       line-height: 1.4em;
@@ -95,6 +96,10 @@
   }
 }
 
+.tag--source {
+  font-size: 14px;
+}
+
 .accordion {
   &__toggle {
     align-items: center;

packages/webdoc-default-template/src/styles/members.scss

@@ -2,7 +2,6 @@
 
 @import "vars";
 
-
 pre {
   @include normalize();
 

packages/webdoc-default-template/src/styles/snippets.scss

@@ -0,0 +1,38 @@
+.sources .page-content {
+  max-width: 100%;
+}
+
+.sources .page-content .source {
+  margin: 24px 0 !important;
+}
+
+.source {
+  border: 1px solid #999;
+  padding: 8px 8px 48px 8px;
+  max-width: 100%;
+  overflow-x: auto;
+
+  &__split {
+    display: flex;
+    flex-direction: row;
+
+    ul {
+      font-size: 14px;
+      line-height: 24px;
+      height: 100%;
+      list-style: none;
+      padding-top: 24px;
+      width: 48px;
+    }
+  }
+
+  pre {
+    background-color: white !important;
+
+    code {
+      background-color: white !important;
+      font-size: 14px;
+      line-height: 24px;
+    }
+  }
+}

packages/webdoc-default-template/src/styles/source.scss

@@ -2,8 +2,14 @@
 /**
  * Object member render component.
  */
-const doc = obj;
+const { doc, require } = obj;
 const linkSvg = this.getPlugin("linker").getResourceURI("icons/link.svg");
+const pkgName = doc.loc && doc.loc.file && doc.loc.file.package && doc.loc.file.package.name || "";
+const source = doc.loc && doc.loc.file && doc.loc.file.path
+    && this.getPlugin("linker").getResourceURI(require("path").join(pkgName, doc.loc.file.path + ".html"));
+const sourceName = source && require("path").basename(doc.loc.file.path);
+const sourceStart = source && doc.loc.start ? ":" + doc.loc.start.line : "";
+const sourceLinkFragment = source && doc.loc.start ? "#" + doc.loc.start.line : "";
 
 const modifiers = [
   doc.deprecated ? "member__title_deprecated" : ""
@@ -25,6 +31,13 @@ const modifiers = [
           (deprecated)
         <?js } ?>
       </span>
+      <?js if (source) { ?>
+        <span class="tag--source">
+            <a href="<?js= source + sourceLinkFragment ?>">
+              <?js= sourceName + sourceStart ?>
+            </a>
+        </span>
+      <?js } ?>
     </section>
   <?js } ?>
   <?js= this.partial("components/signature.tmpl", doc) ?>