Merge pull request #114 from webdoc-labs/feature/manual-styling

ShukantPal · web-flow · commit 73a703fb5569 · 2021-04-24T16:24:19.000-04:00
Feature: Custom stylesheets
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/common/changes/@webdoc/cli/feature-manual-styling_2021-04-24-20-01.json b/common/changes/@webdoc/cli/feature-manual-styling_2021-04-24-20-01.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@webdoc/cli",
+      "comment": "Add experimental support for adding stylesheets for @webdoc/default-template",
+      "type": "none"
+    }
+  ],
+  "packageName": "@webdoc/cli",
+  "email": "sukantk2002@outlook.com"
+}
diff --git a/common/changes/@webdoc/default-template/feature-manual-styling_2021-04-24-20-01.json b/common/changes/@webdoc/default-template/feature-manual-styling_2021-04-24-20-01.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@webdoc/default-template",
+      "comment": "Add experimental support for adding stylesheets. Separate explorer from its header, and move header to always be in the app bar (even when explorer is closed).",
+      "type": "none"
+    }
+  ],
+  "packageName": "@webdoc/default-template",
+  "email": "sukantk2002@outlook.com"
+}
diff --git a/common/changes/@webdoc/model/feature-manual-styling_2021-04-24-20-01.json b/common/changes/@webdoc/model/feature-manual-styling_2021-04-24-20-01.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@webdoc/model",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@webdoc/model",
+  "email": "sukantk2002@outlook.com"
+}
diff --git a/common/changes/@webdoc/template-library/feature-manual-styling_2021-04-24-20-01.json b/common/changes/@webdoc/template-library/feature-manual-styling_2021-04-24-20-01.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@webdoc/template-library",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@webdoc/template-library",
+  "email": "sukantk2002@outlook.com"
+}
diff --git a/common/changes/@webdoc/types/feature-manual-styling_2021-04-24-20-01.json b/common/changes/@webdoc/types/feature-manual-styling_2021-04-24-20-01.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@webdoc/types",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@webdoc/types",
+  "email": "sukantk2002@outlook.com"
+}
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,16 @@ 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));
@@ -147,7 +152,28 @@ function outStaticFiles(outDir /*: string */) /*: Promise<void> */ {
           toPath,
         );
       });
-    });
+    })(),
+    (() => {
+      // Copy the stylesheets
+      const stylesheets = config.template.stylesheets;
+      const copyPromises = [];
+      const 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/app/components/Explorer/ExplorerHeader.js b/packages/webdoc-default-template/src/app/components/Explorer/ExplorerHeader.js
@@ -5,6 +5,7 @@ import {makeStyles} from "@material-ui/core/styles";
 
 const useToggleButtonStyles = makeStyles({
   root: {
+    color: "var(--color-primary-text)",
     margin: "0 0 0 12px",
   },
 });
diff --git a/packages/webdoc-default-template/src/app/components/Explorer/ExplorerItem.js b/packages/webdoc-default-template/src/app/components/Explorer/ExplorerItem.js
@@ -44,7 +44,11 @@ export default function ExplorerItem(props) {
   return (
     <TreeItem
       id={props.data.$nodeId}
-      className="explorer-tree__target"
+      className={`explorer-tree__target${
+        targetChildren.length > 0 ? " explorer-tree__parent" : ""
+      }${
+        primary ? " explorer-tree__selected" : ""
+      }`}
       classes={{
         label: classes.label,
         iconContainer: classes.iconContainer,
diff --git a/packages/webdoc-default-template/src/app/components/Explorer/index.js b/packages/webdoc-default-template/src/app/components/Explorer/index.js
@@ -67,7 +67,6 @@ export default connect(({
   }),
 }))(function Explorer({
   isOpen,
-  setOpen,
   expandedItems,
   setExpandedItems,
   toggleItem,
@@ -76,7 +75,6 @@ export default connect(({
   const [data, setData] = React.useState(null);
   const [autoScrollTo, setAutoScrollTo] = React.useState(null);
   const {root} = useExplorerStyles();
-  const toggleOpen = React.useCallback(() => setOpen(!isOpen), [isOpen]);
   const children = [];
   const explorerTree = window.appData.explorerTree;
 
@@ -153,7 +151,6 @@ export default connect(({
         overflowX: "hidden",
       }),
     }}>
-      <ExplorerHeader isOpen={isOpen} toggleOpen={toggleOpen} />
       {data && <ExplorerFilter data={data} />}
       <TreeView
         expanded={expandedItems}
diff --git a/packages/webdoc-default-template/src/app/components/Header/Header.js b/packages/webdoc-default-template/src/app/components/Header/Header.js
@@ -16,11 +16,10 @@ export default connect(({explorerOpen}) => ({
 
   return (
     <div className="header__container">
-      {explorerOpen ? null :
-        <ExplorerHeader
-          isOpen={false}
-          toggleOpen={() => setExplorerOpen(!explorerOpen)}
-        />}
+      {<ExplorerHeader
+        isOpen={false}
+        toggleOpen={() => setExplorerOpen(!explorerOpen)}
+      />}
       <div className="header__contents">
         {items.map(([id, appBarItem], i) => (
           <a
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/scripts/default-template.js b/packages/webdoc-default-template/static/scripts/default-template.js
@@ -7074,6 +7074,7 @@ function makeStyles_makeStyles(stylesOrCreator) {
 
 var useToggleButtonStyles = styles_makeStyles({
   root: {
+    color: "var(--color-primary-text)",
     margin: "0 0 0 12px"
   }
 });
@@ -8693,7 +8694,7 @@ function ExplorerItem(props) {
 
   return external_React_default.a.createElement(esm_TreeItem_TreeItem, {
     id: props.data.$nodeId,
-    className: "explorer-tree__target",
+    className: "explorer-tree__target".concat(targetChildren.length > 0 ? " explorer-tree__parent" : "").concat(primary ? " explorer-tree__selected" : ""),
     classes: {
       label: classes.label,
       iconContainer: classes.iconContainer,
@@ -9565,10 +9566,7 @@ function makeIds(data, collector) {
       width: 291,
       overflowX: "hidden"
     })
-  }, external_React_default.a.createElement(ExplorerHeader, {
-    isOpen: isOpen,
-    toggleOpen: toggleOpen
-  }), data && external_React_default.a.createElement(Explorer_ExplorerFilter, {
+  }, data && external_React_default.a.createElement(Explorer_ExplorerFilter, {
     data: data
   }), external_React_default.a.createElement(esm_TreeView_TreeView, {
     expanded: expandedItems,
@@ -9692,7 +9690,7 @@ function Header_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
   var currentItemId = appData.appBar.current;
   return React.createElement("div", {
     className: "header__container"
-  }, explorerOpen ? null : React.createElement(ExplorerHeader, {
+  }, React.createElement(ExplorerHeader, {
     isOpen: false,
     toggleOpen: function toggleOpen() {
       return setExplorerOpen(!explorerOpen);
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,12 +48,12 @@ 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">
           <section class="header" id="header-mount-point"></section>
           <div class="header-content-container__content">
+            <div class="page-explorer" id="explorer-mount-point"></div>
             <?js /* Includes content and member-explorer. */ ?>
             <?js= content ?>
             <!-- footer in content -->
diff --git a/packages/webdoc-template-library/src/TemplateRenderer.js b/packages/webdoc-template-library/src/TemplateRenderer.js
@@ -205,7 +205,7 @@ export class TemplateRenderer {
       const templateData = Array.isArray(data) ? [...data] : {...data};
 
       for (const key in this.data) {
-        if ("key" in this.data) {
+        if (key in this.data) {
           templateData[key] = merge({}, this.data[key], templateData[key] || {});
         }
       }
diff --git a/webdoc.iml b/webdoc.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
