feat: update docfx to use modern template

dotnet · Mar 14, 2023 · 59a77f8 · 59a77f8
1 parent 49e3050
commit 59a77f8
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 358 deletions.
diff --git a/docs/docfx.json b/docs/docfx.json
@@ -37,6 +37,7 @@
     "dest": "_site",
     "template": [
       "default",
+      "modern",
       "template"
     ]
   }

diff --git a/docs/template/dashboard.html.tmpl b/docs/template/dashboard.html.tmpl
@@ -1,88 +1,47 @@
 {{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
-{{!include(/^styles/.*/)}}
-{{!include(/^fonts/.*/)}}
-{{!include(favicon.ico)}}
-{{!include(logo.svg)}}
-<!DOCTYPE html>
-<!--[if IE]><![endif]-->
-<html>
-  {{>partials/head}}
-  <body data-spy="scroll" data-target="#affix">
-  <style type="text/css">
+{{!master(layout/_master.tmpl)}}
+<h1>{{title}}</h1>
+{{#items.Length}}
+<div id="template-container">
+{{#items}}
+  <div class="card">
+    <img src="{{thumbnail}}" class="card-img-top" alt="{{name}}">
+    <div class="card-body flex-fill">
+      <h5 class="card-title"><a href="{{homepage}}" class="card-link">{{name}}</a></h5>
+      <p class="card-text">{{{description}}}</p>
+    </div>
+    <div class="card-body flex-grow-0">
+      {{#usage}}
+      <div class="">
+        {{#config}}<div class="list-group-item"><c>docfx.json</c>: <code>{{config}}</code></div>{{/config}}
+        {{#command}}<div class="list-group-item"><c>docfx</c>: <code>{{command}}</code></div>{{/command}}
+        {{#init}}<div class="list-group-item"><c>docfx init</c>: <code>{{init}}</code></div>{{/init}}
+      </div>
+      {{/usage}}
+    </div>
+  </div>
+{{/items}}
+</div>
+{{/items.Length}}
+
+<style type="text/css">
+  .affix {
+    display: none !important;
+  }
+
+  .card {
+    width: 24rem;
+    margin: 1rem;
+  }
+
+  .card > img {
+    height: 16rem;
+    object-fit: cover;
+  }
+
   #template-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    clear: both;
-  }
-  .template-item {
-    flex: 0 0 50%;
-    display: block;
-    padding: 16px;
   }
-  .template-screenshot {
-    display: flex;
-    justify-content: center;
-    position: relative;
-    margin-bottom: 16px;
-    padding-top: 60%;
-    height: 0;
-  }
-  .template-screenshot-img {
-    position: absolute;
-    top: 0;
-    width: auto;
-    height: auto;
-    max-height: 100%;
-    max-width: 100%;
-  }
-  .template-title {
-    font-weight: 600;
-    font-size: 1.1em;
-  }
-  </style>
-    <div id="wrapper">
-      <header>
-        {{>partials/navbar}}
-        {{>partials/breadcrumb}}
-      </header>
-      <div role="main" class="container body-content hide-when-search">
-        {{>partials/toc}}
-        <div class="article row grid-right">
-          <h1>{{title}}</h1>
-          <span class="pull-right mobile-hide">
-          <a href="{{contributionLink}}" class="contribution-link">Improve this Doc</a>
-          </span>
-          {{#items.Length}}
-          <ul id="template-container">
-          {{#items}}
-              <li class="template-item">
-                <div class="template-screenshot">
-                  <img src= "{{thumbnail}}" class="template-screenshot-img"/>
-                </div>
-                <a class="template-title" href="{{homepage}}">{{name}}</a>
-                <p class="template-desc" >{{{description}}}</p>
-                {{#usage}}
-                <ul>
-                  {{#init}}
-                  <li><span>Init:<code>{{init}}</code></span></li>
-                  {{/init}}
-                  {{#command}}
-                  <li><span>In command:<code>{{command}}</code></span></li>
-                  {{/command}}
-                  {{#config}}
-                  <li><span>In <c>docfx.json</c>:<code>{{config}}</code></span></li>
-                  {{/config}}
-                </ul>
-                {{/usage}}
-              </li>
-          {{/items}}
-          </ul>
-          {{/items.Length}}
-        </div>
-      </div>
-      {{>partials/footer}}
-    </div>
-    {{>partials/scripts}}
-  </body>
-</html>
+</style>
diff --git a/docs/template/index.html.tmpl b/docs/template/index.html.tmpl
diff --git a/docs/template/layout/_master.tmpl b/docs/template/layout/_master.tmpl
diff --git a/docs/template/styles/main.css b/docs/template/styles/main.css
@@ -1,145 +1,6 @@
 /* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information. */
-/* Colors */
-button, a, .btn-primary {
-  color: #47A7A0;
-}
-.btn-primary:hover, .btn-primary:focus, button:hover, button:focus, a:hover, a:focus, .toc .nav > li.active > a:hover, .toc .nav > li.active > a:focus, .toc .nav > li > a:hover, .toc .nav > li > a:focus {
-  color: #6E8B60;
-}
-.btn-primary.disable, .btn-primary.disable:hover, a.disable, a.disable:hover{
-  color: #90ABB9;
-}
-.hero {
-    color: #C1D38B;
-    background-color: #385361;
-    background-image: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#000),color-stop(100%,#385361));
-    background-image: -webkit-linear-gradient(45deg,#000 0,#385361 100%);
-    background-image: -moz-linear-gradient(45deg,#000 0,#385361 100%);
-    background-image: -ms-linear-gradient(45deg,#000 0,#385361 100%);
-    background-image: -o-linear-gradient(45deg,#000 0,#385361 100%);
-    background-image: linear-gradient(45deg,#000 0,#385361 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#385361', GradientType=1);
 
-}
-.hero strong {
-    color: #e7e7e7;
-}
-.buttons-unit .button {
-    color: #fff;
-    background: #6E8B60;
-}
-.buttons-unit .button:active {
-    background: #A27865;
-}
-.toc .nav > li.active > a, .affix ul > li.active > a, .affix ul > li.active > a:before {
-  color: #6E8B60
-}
-.btn-primary {
-    background: #385361;
-    color: #8BFEB4;
-}
-
-.affix ul > li > a:before {
-  color: #cccccc;
-}
-.toc .nav > li > a, .affix ul > li > a, .affix ul > li > a:hover {
-  color: #666666;
-}
-
-.counter-key-section{
-  border: 2px solid #6E8B60;
-  -webkit-border-image-source: -webkit-gradient(linear, left, right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(50%, #385361), color-stop(100%, rgba(0, 0, 0, 0)));
-  -webkit-border-image-source: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
-  -moz-border-image-source: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
-  -ms-border-image-source: -ms-linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
-  -o-border-image-source: -o-linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
-  border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0), #385361 50%, rgba(0, 0, 0, 0));
-  border-image-slice: 1;
-}
-
-/* End Colors */
-
-.value-prop-heading {
-  font-size: 24px;
-}
-
-#vp-container{
-  margin-top: 30px;
-}
-
-.hero {
-    height: 350px;
-    margin-top: 50px;
-    padding-top: 50px;
-    font-weight: 300;
-    text-align: center;
-}
-.key-section{
-  padding: 30px 0;
-}
-
-.key-section .glyphicon, .counter-key-section .glyphicon {
-  font-size: 4em;
-  display: table-cell;
-  vertical-align: middle;
-}
-.glyphicon {
-  margin-right: 10px;
-  font-size: 16px;
-}
-
-.key-section section, .counter-key-section section {
-  display: table-cell;
-  padding-left: 20px;
-}
-
-.key-section section p, .counter-key-section section p {
-  text-align: initial;
-}
-
-.counter-key-section{
-  padding: 30px 0;
-}
-.buttons-unit-small{
-  font-size: 16px;
-}
-.version-link, .github-link{
-  margin: 5px;
-}
-.hero strong {
-    font-weight: 400;
-    font-family: Rockwell;
-}
-.hero .text {
-    font-size: 64px;
-    text-align: center;
-}
-.hero .minitext {
-    font-size: 20px;
-    text-align: center;
-    font-family: Candara;
-}
-.buttons-unit {
-    margin-top: 60px;
-    text-align: center;
-}
-.hero .button {
-    border-radius: 4px;
-    padding: 8px 16px;
-    margin: 0 12px;
-    box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
-}
-.buttons-unit .button {
-    font-size: 24px;
-}
-
-@media only screen and (max-width: 768px) {
-  .hero {
-    height: 500px;
-    margin-top: 0px;
-  }
-  .hero .button {
-    display: block;
-    margin: 12px;
-  }
+/* Checkout https://getbootstrap.com/docs/5.3/customize/color/ for more customization options */
+html {
+  --bs-link-color-rgb: 66, 184, 131
 }
diff --git a/templates/build.js b/templates/build.js
@@ -12,7 +12,8 @@ const { hideBin } = require('yargs/helpers')
 const argv = yargs(hideBin(process.argv)).argv
 
 const watch = argv.watch
-const project = '../samples/seed'
+const project = argv.project || '../samples/seed'
+
 const loader = {
   '.eot': 'file',
   '.svg': 'file',

diff --git a/templates/modern/layout/_master.tmpl b/templates/modern/layout/_master.tmpl
@@ -24,6 +24,7 @@
       {{#_noindex}}<meta name="searchOption" content="noindex">{{/_noindex}}
       {{#_enableSearch}}<meta name="docfx:rel" content="{{_rel}}">{{/_enableSearch}}
       {{#_enableNewTab}}<meta name="docfx:newtab" content="true">{{/_enableNewTab}}
+      {{#docurl}}<meta name="docfx:docurl" content="{{docurl}}">{{/docurl}}
     {{/redirect_url}}
   </head>
 

diff --git a/templates/modern/src/docfx.scss b/templates/modern/src/docfx.scss
@@ -3,6 +3,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
 */
 
+$enable-grid-classes: false;
 $enable-important-utilities: false;
 
 $container-max-widths: (