Add TypeDoc example, improve navbar

.github/workflows/publish.yml

@@ -5,39 +5,35 @@ on:
             - master
     schedule:
         - cron: "0 12 * * *"
+    workflow_dispatch:
 jobs:
     publish-site:
         runs-on: ubuntu-latest
         steps:
             - name: Checkout repository
               uses: actions/checkout@v2
-            - name: Fix remote
-              run: git remote set-url origin [email protected]:TypeStrong/typedoc-site.git
             - name: Set up Node
               uses: actions/setup-node@v1
               with:
                   node-version: "16"
             - name: Install
               run: npm ci
-            - name: Set up auth
-              run: |
-                  git config --global user.email "[email protected]"
-                  git config --global user.name "TypeDoc Bot"
-                  mkdir -p ~/.ssh
-                  echo "${{ secrets.BOT_SSH_KEY }}" > ~/.ssh/id_rsa
-                  chmod 0600 ~/.ssh/id_rsa
-                  ssh-keygen -l -f ~/.ssh/id_rsa
             - name: Rebuild /api
               run: |
-                  test -f typedoc || git clone git@github.com:TypeStrong/typedoc.git
+                  git clone https://github.com/TypeStrong/typedoc.git
                   cd typedoc
-                  git pull
                   git checkout $(git describe --tags --abbrev=0)
                   npm ci
                   node scripts/set_strict.js false
                   npm run build
                   node bin/typedoc --options ../typedoc.json --gitRevision $(git describe --tags --abbrev=0)
                   cd ..
+            - name: Rebuild /example
+              run: |
+                  cd typedoc/example
+                  npm ci
+                  node ../bin/typedoc --options ../../example.typedoc.json --gitRevision $(git describe --tags --abbrev=0)
+                  cd ../..
             - name: Rebuild schema.json
               run: node typedoc/scripts/generate_options_schema.js _site/schema.json
             - name: Rebuild markdown site

.gitignore

@@ -1,7 +1,7 @@
 _site
 typedoc
 node_modules
-changelog.md
+guides/changelog.md
 plugins.json
 versions.json
 plugin_content.txt

README.md

@@ -23,7 +23,7 @@ menuOrder: 1
 
 ```bash
 npm i
-npm run build -- --serve
+npm run serve
 ```
 
 To regenerate the `_site/api/` folder, go to the root directory of
@@ -37,7 +37,16 @@ npm run build
 node bin/typedoc --options ../typedoc.json
 ```
 
-If new options have been added since the last update, run the following to update the typedoc.json schema:
+To regenerate the `_site/example/` folder:
+
+```bash
+cd typedoc/example
+npm i
+node ../bin/typedoc --options ../../example.typedoc.json
+```
+
+If new options have been added since the last update, run the following to
+update the typedoc.json schema:
 
 ```bash
 node typedoc/scripts/generate_options_schema.js _site/schema.json

_includes/header.html

@@ -3,9 +3,9 @@
         <a href="/" class="logo">TypeDoc</a>
         <nav>
             <ul>
-                <li><a href="/guides/installation">Guides</a></li>
+                <li><a href="/guides/installation">Docs</a></li>
+                <li><a href="/example/">Example</a></li>
                 <li><a href="/api/">API</a></li>
-                <li><a href="/changelog/">Changelog</a></li>
                 <li>
                     <a href="https://github.com/TypeStrong/typedoc">GitHub</a>
                 </li>

css/main.css

@@ -5,11 +5,6 @@
 
 /** ============== Layout =============== **/
 
-html,
-body {
-    height: 100%;
-}
-
 body {
     background-color: #fff;
     padding: 0;
@@ -25,7 +20,7 @@ body {
     font-weight: 300;
     font-size: 42px;
     color: #285786;
-    margin: 0.5em 0 0.5em 0;
+    margin: 0 0 0.5em 0;
 }
 .typography h2 {
     position: relative;
@@ -58,6 +53,7 @@ body {
     line-height: 1.5em;
     margin: 1em 0;
     border-bottom: 1px solid #eee;
+    overflow: auto;
 }
 .typography dl.specs dt {
     float: left;
@@ -91,12 +87,26 @@ body {
 /** ================= GRID =================== **/
 
 .container {
-    margin: 0 auto;
-    padding: 0 40px;
+    padding: 0 20px;
     max-width: 1200px;
 }
+
+@media (min-width: 768px) {
+    .container {
+        margin: 0 auto;
+    }
+}
+
 .container.main {
-    padding: 100px 40px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+@media (min-width: 768px) {
+    .container.main {
+        padding-top: 40px;
+        padding-bottom: 40px;
+    }
 }
 
 .row {
@@ -131,7 +141,7 @@ body {
     margin-left: 8.3333333333%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-1 {
         display: inline-block;
         box-sizing: border-box;
@@ -173,7 +183,7 @@ body {
     margin-left: 16.6666666667%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-2 {
         display: inline-block;
         box-sizing: border-box;
@@ -215,7 +225,7 @@ body {
     margin-left: 25%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-3 {
         display: inline-block;
         box-sizing: border-box;
@@ -257,7 +267,7 @@ body {
     margin-left: 33.3333333333%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-4 {
         display: inline-block;
         box-sizing: border-box;
@@ -299,7 +309,7 @@ body {
     margin-left: 41.6666666667%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-5 {
         display: inline-block;
         box-sizing: border-box;
@@ -341,7 +351,7 @@ body {
     margin-left: 50%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-6 {
         display: inline-block;
         box-sizing: border-box;
@@ -383,7 +393,7 @@ body {
     margin-left: 58.3333333333%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-7 {
         display: inline-block;
         box-sizing: border-box;
@@ -425,7 +435,7 @@ body {
     margin-left: 66.6666666667%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-8 {
         display: inline-block;
         box-sizing: border-box;
@@ -467,7 +477,7 @@ body {
     margin-left: 75%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-9 {
         display: inline-block;
         box-sizing: border-box;
@@ -509,7 +519,7 @@ body {
     margin-left: 83.3333333333%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-10 {
         display: inline-block;
         box-sizing: border-box;
@@ -551,7 +561,7 @@ body {
     margin-left: 91.6666666667%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-11 {
         display: inline-block;
         box-sizing: border-box;
@@ -593,7 +603,7 @@ body {
     margin-left: 100%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767.98px) {
     .col-sm-12 {
         display: inline-block;
         box-sizing: border-box;
@@ -615,31 +625,30 @@ body {
 /** ============== Header =============== **/
 
 header {
-    position: absolute;
-    z-index: 1024;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 60px;
     background-color: #fff;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
     text-transform: uppercase;
-    font-size: 20px;
 }
+
+@media (min-width: 768px) {
+    header .container {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
 header .logo {
     padding-left: 37px;
-    float: left;
     text-decoration: none;
     color: var(--color-text);
+    font-size: 20px;
     line-height: 60px;
+    height: 60px;
+    display: block;
     background-image: url(../images/logo-32.png);
     background-repeat: no-repeat;
     background-position: left center;
 }
-header nav {
-    text-align: right;
-    font-size: 0;
-}
 header nav ul {
     display: inline-block;
     padding: 0;
@@ -651,11 +660,10 @@ header nav li {
 }
 header nav a {
     display: inline-block;
-    padding: 0 15px;
+    margin-right: 1rem;
     color: var(--color-text);
     text-decoration: none;
-    font-size: 20px;
-    line-height: 60px;
+    margin-bottom: 0.5rem;
     transition: opacity 0.2s;
 }
 header nav a.current {
@@ -665,6 +673,14 @@ header nav a:hover {
     opacity: 0.75;
 }
 
+@media (min-width: 768px) {
+    header nav a {
+        margin-bottom: 0;
+        font-size: 20px;
+        line-height: 60px;
+    }
+}
+
 /** ============== Home =============== **/
 
 .content {
@@ -707,9 +723,10 @@ header nav a:hover {
 }
 
 /** ============== Navigation ============== **/
-
 .navigation {
-    padding: 20px 20px 0 0;
+    /* This !important is only necessary because the col classes set
+    margin-bottom to 0 */
+    margin-bottom: 1.5rem !important;
 }
 .navigation ul {
     list-style: none;
@@ -737,7 +754,15 @@ header nav a:hover {
     top: 0;
     max-height: 100vh;
     overflow-y: auto;
+    display: none;
 }
+
+@media (min-width: 768px) {
+    .toc-container {
+        display: inline-block;
+    }
+}
+
 .toc-container ol {
     list-style: none;
     padding-left: 20px;

example.typedoc.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "https://typedoc.org/schema.json",
+    "extends": "./typedoc/example/typedoc.json",
+    "out": "_site/example",
+    "json": "_site/example/docs.json",
+    "name": "TypeDoc Example"
+}