Summary tables

Author: ShukantPal

packages/webdoc-default-template/helper/renderer-plugins/category-filter.js

@@ -15,6 +15,9 @@ exports.categoryFilterPlugin = (doc /*: Doc */, constraints /*: CategoryConstrai
         return false;
       }
     }
+    if (child.inherited && !child.overrides) {
+      return;
+    }
 
     if (child.type === "MethodDoc" && child.name === "constructor") {
       return false;// Filter constructors always!

packages/webdoc-default-template/helper/renderer-plugins/signature.js

@@ -5,7 +5,7 @@ import type {Doc} from "@webdoc/types";
 const {linker} = require("../linker");
 
 exports.signaturePlugin = {
-  generateSignature(doc /*: Doc */) {
+  generateSignature(doc /*: Doc */, options = {} /*: { noTail: boolean } */) {
     const mapDocTypeToKeyboard = {
       ClassDoc: "class",
       NSDoc: "namespace",
@@ -48,7 +48,7 @@ exports.signaturePlugin = {
             .join(", ")
         })`;
       }
-      if (doc.returns) {
+      if (!options.noTail && doc.returns) {
         signature += ` → {${
           (doc.returns || [])
             .map((returns) => (returns.dataType ?
@@ -59,7 +59,7 @@ exports.signaturePlugin = {
       }
       break;
     case "PropertyDoc":
-      if (doc.dataType) {
+      if (!options.noTail && doc.dataType) {
         signature += ": " + linker.linkTo(doc.dataType, undefined, {htmlSafe: false});
       }
       break;

packages/webdoc-default-template/publish.js

@@ -6,6 +6,7 @@ const path = require("path");
 const {traverse} = require("@webdoc/model");
 const {
   FlushToFile,
+  RelationsPlugin,
   TemplateRenderer,
   TemplatePipeline,
   TemplateTagsResolver,
@@ -62,11 +63,14 @@ exports.publish = (options /*: PublishOptions */) => {
     .installPlugin("linker", linker)
     .installPlugin("generateIndex", indexSorterPlugin)
     .installPlugin("signature", signaturePlugin)
-    .installPlugin("categoryFilter", categoryFilterPlugin);
+    .installPlugin("categoryFilter", categoryFilterPlugin)
+    .installPlugin("relations", RelationsPlugin);
   const pipeline = new TemplatePipeline(renderer)
     .pipe(new TemplateTagsResolver())
     .pipe(new FlushToFile({skipNullFile: false}));
 
+  renderer.getPlugin("relations").buildRelations();
+
   idToDoc = new Map();
 
   traverse(docTree, (doc) => {

packages/webdoc-default-template/src/app/index.js

@@ -6,6 +6,8 @@ import ReactDOM from "react-dom";
 import store from "./store";
 
 window.onload = function() {
+  wakeAccordions();
+
   const appBarRoot = document.getElementById("header-mount-point");
   const explorerRoot = document.getElementById("explorer-mount-point");
   const footerRoot = document.getElementById("footer-mount-point");
@@ -35,3 +37,16 @@ window.onload = function() {
     footerRoot,
   );
 };
+
+function wakeAccordions() {
+  document.querySelectorAll(".accordion").forEach(
+    (accordion) => {
+      const btn = accordion.querySelector(".accordion__toggle");
+
+      btn.onclick = () => {
+        console.log("WTF");
+        accordion.classList.toggle("accordion-active");
+      };
+    },
+  );
+}

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

@@ -10,8 +10,17 @@
     padding: 8px;
   }
 
+  &__subcategory {
+    color: #333;
+    font-size: 1.125em;
+    font-weight: normal;
+    line-height: 1.4em;
+    margin: 14px 8px 14px 0;
+  }
+
   > hr {
-    border: 2px solid $colorSheetSecondary
+    border: 1px solid $colorSheetSecondary;
+    margin-bottom: 10px;
   }
 
   > * {
@@ -50,3 +59,57 @@
     margin-bottom: 8px;
   }
 }
+
+.accordion {
+  &__toggle {
+    align-items: center;
+    border-radius: 8px;
+    display: flex;
+    transition-duration: 200ms;
+
+    button {
+      background: transparent;
+      border: none;
+      height: 40px;
+      padding: 0;
+      width: 40px;
+
+      .accordion__bg-active {
+        display: none;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &__content {
+    max-height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+}
+
+.accordion-active {
+  > .accordion__content {
+    max-height: max-content;
+    visibility: visible;
+  }
+
+  .accordion__toggle {
+    button {
+      .accordion__bg-inactive {
+        display: none;
+      }
+
+      .accordion__bg-active {
+        display: inline;
+      }
+    }
+  }
+}

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

@@ -43,3 +43,40 @@ table {
   display: block;
   overflow-x: scroll;
 }
+
+table.summary {
+  margin-left: 40px;
+  padding: 18px auto;
+  table-layout: fixed;
+  width: calc(100% - 40px);
+
+  tbody {
+    margin: 18px auto;
+  }
+
+  td {
+    vertical-align: top;
+
+    section:last-child {
+      color: #333;
+      margin-top: 18px;
+    }
+  }
+
+  td:first-child {
+    width: 36%;
+  }
+
+  td:last-child {
+    width: 64%;
+  }
+
+  .summary__signature {
+    font-family: IBM Plex Mono, monospace;
+    font-weight: bold;
+
+    a {
+      text-decoration: underline;
+    }
+  }
+}

packages/webdoc-default-template/static/icons/chevron-down.svg

@@ -9545,6 +9545,7 @@ function Footer() {
 
 
 window.onload = function () {
+  wakeAccordions();
   var appBarRoot = document.getElementById("header-mount-point");
   var explorerRoot = document.getElementById("explorer-mount-point");
   var footerRoot = document.getElementById("footer-mount-point");
@@ -9557,6 +9558,17 @@ window.onload = function () {
   external_ReactDOM_default.a.render(React.createElement(components_Footer, null), footerRoot);
 };
 
+function wakeAccordions() {
+  document.querySelectorAll(".accordion").forEach(function (accordion) {
+    var btn = accordion.querySelector(".accordion__toggle");
+
+    btn.onclick = function () {
+      console.log("WTF");
+      accordion.classList.toggle("accordion-active");
+    };
+  });
+}
+
 /***/ }),
 /* 68 */,
 /* 69 */,