Allow custom stylesheets to be defined.

ShukantPal · ShukantPal · commit 79877d49dfd6 · 2021-04-24T15:00:39.000-04:00
diff --git a/packages/webdoc-cli/src/config.js b/packages/webdoc-cli/src/config.js
@@ -33,6 +33,7 @@ type ConfigSchema = {
   },
   template: {
     applicationName: string,
+    stylesheets: Array<string>,
     siteDomain?: string,
     siteRoot: string,
     mainPage?: {
@@ -79,6 +80,7 @@ const defaultConfig: ConfigSchema = {
   template: {
     applicationName: "{ <i>webdoc</i> }",
     siteRoot: "",
+    stylesheets: [],
     mainPage: {
       title: "Main Page",
     },
diff --git a/packages/webdoc-default-template/publish.js b/packages/webdoc-default-template/publish.js
@@ -122,7 +122,7 @@ exports.publish = async function publish(options /*: PublishOptions */) {
     idToDoc.set(doc.id, doc);
   });
 
-  outStaticFiles(outDir);
+  await outStaticFiles(outDir, config);
   outExplorerData(outDir, crawlData);
   outMainPage(path.join(outDir, indexRelative), pipeline, options.config);
   outIndexes(outDir, pipeline, options.config, crawlData.index);
@@ -133,11 +133,13 @@ exports.publish = async function publish(options /*: PublishOptions */) {
 };
 
 // Copy the contents of ./static to the output directory
-function outStaticFiles(outDir /*: string */) /*: Promise<void> */ {
+async function outStaticFiles(outDir /*: string */, config /*: ConfigSchema */) /*: Promise<void> */ {
   const staticDir = path.join(__dirname, "./static");
 
-  return fse.copy(staticDir, outDir)
-    .then(() => {
+  await fse.copy(staticDir, outDir)
+
+  await Promise.all([
+    (async () => {
       // Copy the prettify script to outDir
       PRETTIFIER_SCRIPT_FILES.forEach((fileName) => {
         const toPath = path.join(outDir, "scripts", path.basename(fileName));
@@ -146,8 +148,29 @@ function outStaticFiles(outDir /*: string */) /*: Promise<void> */ {
           path.join(require.resolve("code-prettify"), "..", fileName),
           toPath,
         );
-      });
-    });
+      })
+    })(),
+    (() => {
+      // Copy the stylesheets
+      const stylesheets = config.template.stylesheets;
+      let copyPromises = [];
+      let resolved = [];
+
+      for (const file of stylesheets) {
+        const out = path.join(outDir, file);
+
+        resolved.push(path.relative(outDir, out));
+        copyPromises.push(fse.copy(
+          path.join(process.cwd(), file),
+          out,
+        ));
+      }
+
+      config.template.stylesheets = resolved;
+
+      return Promise.all(copyPromises);
+    })(),
+  ]);
 }
 
 // Write the explorer JSON data in the output directory
diff --git a/packages/webdoc-default-template/src/styles/header.scss b/packages/webdoc-default-template/src/styles/header.scss
@@ -65,7 +65,7 @@
   }
 
   &__link__current {
-    color: #0066cd;
+    color: $colorPrimary;
     text-decoration: none;
   }
 
diff --git a/packages/webdoc-default-template/static/styles/index.css b/packages/webdoc-default-template/static/styles/index.css
diff --git a/packages/webdoc-default-template/tmpl/layout.tmpl b/packages/webdoc-default-template/tmpl/layout.tmpl
@@ -10,6 +10,7 @@ const siteRoot = this.getPlugin("linker").siteRoot;
 const sitePrefix = siteRoot ? siteRoot + "/" : siteRoot;
 const integrations = JSON.stringify(config.integrations);
 ?>
+<!-- Generated by webdoc on <?js= new Date().toLocaleString() + " " + Intl.DateTimeFormat().resolvedOptions().timeZone ?> -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -25,6 +26,10 @@ const integrations = JSON.stringify(config.integrations);
       <meta property="<?js= key ?>" content="<?js= config.meta[key].replace("{{url}}", `${config.siteDomain}`) ?>" />
     <?js }); ?>
 
+    <?js config.stylesheets.forEach((file) => { ?>
+      <link rel="stylesheet" type="text/css" href="<?js= "/" + sitePrefix + file ?>" />
+    <?js }); ?>
+
     <script>
       window.appData = {
         applicationName: "<?js= config.applicationName ?>",
@@ -43,7 +48,7 @@ const integrations = JSON.stringify(config.integrations);
     <script src="/<?js= sitePrefix ?>scripts/default-template.js"></script>
   </head>
   <body class="root">
-    <div class="docs">
+    <div class="docs <?js= document && document.type === "TutorialDoc" ? "tutorials" : "api-docs" ?>">
       <article class="page">
         <div class="page-explorer" id="explorer-mount-point"></div>
         <div class="header-content-container">
diff --git a/packages/webdoc-template-library/src/TemplateRenderer.js b/packages/webdoc-template-library/src/TemplateRenderer.js

Original file line number	Diff line number	Diff line change
`@@ -65,7 +65,7 @@`
`65`	`65`	`}`
`66`	`66`
`67`	`67`	`&__link__current {`
`68`		`- color: #0066cd;`
	`68`	`+ color: $colorPrimary;`
`69`	`69`	`text-decoration: none;`
`70`	`70`	`}`
`71`	`71`