Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: update docfx to use modern template #8513

Merged
merged 2 commits into from
Mar 14, 2023
Merged

feat: update docfx to use modern template #8513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f615e00
feat: update docfx to use modern template
yufeih Mar 14, 2023
7c9a771
test(snapshot): update snapshots for 2a6864facd71820584e157b1a41feb43…
yufeih Mar 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/docfx.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"dest": "_site",
"template": [
"default",
"modern",
"template"
]
}
Expand Down
123 changes: 41 additions & 82 deletions docs/template/dashboard.html.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 0 additions & 20 deletions docs/template/index.html.tmpl
View file
Open in desktop

This file was deleted.

57 changes: 0 additions & 57 deletions docs/template/layout/_master.tmpl
View file
Open in desktop

This file was deleted.

146 changes: 4 additions & 142 deletions docs/template/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,145 +1,7 @@
/* 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 */
body {
--bs-link-color-rgb: 66, 184, 131;
--bs-link-hover-color-rgb: 66, 184, 131;
}
3 changes: 2 additions & 1 deletion templates/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions templates/modern/layout/_master.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
1 change: 1 addition & 0 deletions templates/modern/src/docfx.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: (
Expand Down
Loading