Use TypeDoc (#333)

* upgrade typescript, add typedoc * do not generate toc apitree * use page title * highlight sidebar from page url * common typedoc assets * use typedoc css * typedoc layout * use typedoc, custom theme * readme to markdown for vue * use typedoc * add sanddance-specs * add title * style changes wip * fix color & spacing * fix api urls * fix font size and spacing * add link to sanddance-specs * remove c-tree classes
microsoft · May 21, 2021 · ca25fd0 · ca25fd0
1 parent c3c49e8
commit ca25fd0
Show file tree

Hide file tree

Showing 36 changed files with 1,744 additions and 248 deletions.
diff --git a/.gitignore b/.gitignore
@@ -65,6 +65,7 @@ typings/
 docs/**/*.map
 docs/.jekyll-cache
 docs/.jekyll-metadata
+docs/docs/**/assets
 
 # powerbi builds
 .tmp

diff --git a/docs/_data/tree.json b/docs/_data/tree.json
@@ -18,6 +18,10 @@
       "tree": "sanddance",
       "url": "/docs/sanddance/v3"
     },
+    {
+      "tree": "sanddance-specs",
+      "url": "/docs/sanddance-specs/v1"
+    },
     {
       "tree": "sanddance-react",
       "url": "/docs/sanddance-react/v3"
@@ -36,10 +40,6 @@
     }
   ],
   "Resources": [
-    {
-      "tree": "API Reference",
-      "url": "/docs/api"
-    },
     {
       "tree": "Vega",
       "url": "https://vega.github.io/"

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -5,8 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>SandDance</title>
+    <title>SandDance {{ page.title }}</title>
     <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/typedoc.css">
     <link rel="shortcut icon" href="{{ site.baseurl }}/favicon.ico" />
 </head>
 

diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
@@ -8,6 +8,16 @@
     </div>
 </nav>
 
+{% assign match = '' %}
+{% for tree in site.data.tree %}
+    {% for branch in tree[1] %}
+        {% assign checkArray = page.url | split:branch.url %}                       
+        {% if checkArray[0] == '' %}
+            {% assign match = branch.url %}
+        {% endif %}
+    {% endfor %}
+{% endfor %}
+
 <section class="c-page-content">
     <div class="o-wrapper">
         <div class="o-layout o-layout--large">
@@ -41,8 +51,8 @@
                                 {% capture branch_link %}{{ site.baseurl }}{{branch_url}}{% endcapture %}
                             {% endif %}
 
-                            <li class="c-tree__item {% if page_url == tree_url %} is-active{% endif %}">
-                                <a href="{{ branch_link }}" {% if page_url == branch_url %}class="is-active"{% endif %}>
+                            <li class="c-tree__item {% if branch.url == match %} is-active{% endif %}">
+                                <a href="{{ branch_link }}" {% if branch.url == match %}class="is-active"{% endif %}>
                                     {{ branch.tree }}
                                 </a>
                             </li>

diff --git a/docs/_layouts/typedoc.html b/docs/_layouts/typedoc.html
@@ -0,0 +1,74 @@
+---
+layout: docs
+---
+
+<div class="typedoc">
+
+    {{ content }}
+
+    <footer class="with-border-bottom o-wrapper">
+        <div class="container">
+            <h2>Legend</h2>
+            <div class="tsd-legend-group">
+                <ul class="tsd-legend">
+                    <li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
+                    <li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
+                    <li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
+                    <li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+                    <li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
+                    <li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
+                    <li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+                    <li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li>
+                </ul>
+                <ul class="tsd-legend">
+                    <li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+                    <li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
+                    <li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
+                    <li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
+                </ul>
+                <ul class="tsd-legend">
+                    <li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+                    <li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
+                    <li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
+                    <li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+                    <li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
+                    <li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
+                </ul>
+                <ul class="tsd-legend">
+                    <li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+                    <li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
+                    <li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
+                    <li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
+                    <li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
+                    <li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
+                    <li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
+                </ul>
+                <ul class="tsd-legend">
+                    <li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
+                    <li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
+                    <li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
+                    <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
+                </ul>
+                <ul class="tsd-legend">
+                    <li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
+                    <li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
+                    <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
+                </ul>
+                <ul class="tsd-legend">
+                    <li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
+                    <li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
+                    <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
+                </ul>
+                <ul class="tsd-legend">
+                    <li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
+                    <li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
+                </ul>
+            </div>
+        </div>
+    </footer>
+
+    <div class="container tsd-generator">
+        <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+    </div>
+
+</div>
diff --git a/docs/_sass/components/_components.page-foot.scss b/docs/_sass/components/_components.page-foot.scss
@@ -16,7 +16,4 @@ footer {
         margin-left: initial;
         padding-left: initial;
     }
-    a {
-        color: #0078d7;
-    }
 }
diff --git a/docs/_sass/components/_components.tree.scss b/docs/_sass/components/_components.tree.scss
@@ -25,14 +25,6 @@
         }
     }
 
-    @include mq($from: tablet) {
-        position: sticky;
-        top: $spacing-huge;
-        max-height: calc(100vh - #{$spacing*7 - $spacing-small});
-        overflow-y: auto;
-        @include inuit-font-size($inuit-font-size-h4);
-    }
-
     ul {
         margin-left: 0;
         overflow: hidden;

diff --git a/docs/_sass/elements/_elements.code.scss b/docs/_sass/elements/_elements.code.scss
@@ -55,20 +55,17 @@ pre.highlight {
 .language-typescript:before { content: 'TypeScript'; }
 
 code {
+    padding-bottom:   $spacing-tiny;
     padding-right:  $spacing-tiny;
     padding-left:   $spacing-tiny;
     background: lighten($ms-black-100, 3%);
     border: 1px solid $ms-black-200;
     color: $ms-black-500;
     @include inuit-font-size($inuit-font-size-h5);
 
-    .dark-theme & {
-        background: $ms-black-600;
-        border-color: $ms-black-500;
-        color: $ms-black-100;
-    }
-
     pre & {
         border: 0;
+        display: block;
+        overflow: auto;
     }
 }
diff --git a/docs/_sass/elements/_elements.links.scss b/docs/_sass/elements/_elements.links.scss
@@ -12,12 +12,20 @@ a {
         text-decoration: underline;
     }
 
-    .c-page-main & {
+    .c-page-main &, footer & {
         color: $ms-sky-400;
 
+        .dark-theme & {
+            color: $ms-cyan-400;
+        }
+
         &:hover,
         &:focus {
             color: $ms-sky-500;
+
+            .dark-theme & {
+                color: $ms-cyan-200;
+            }
         }
     }
 }