improved the changelog & in-game news display on the docs site

.config/dotnet-tools.json

@@ -3,7 +3,7 @@
   "isRoot": false,
   "tools": {
     "docfx": {
-      "version": "2.64.0",
+      "version": "2.65.0",
       "commands": [
         "docfx"
       ]

docs/articles/toc.yml

@@ -8,6 +8,7 @@
       href: creating_textures.md
     - name: Creating Custom Maps
       href: custom_maps.md
+  expanded: true
 - name: Contributing Localizations
   href: localization.md
 - name: Tiny Life's Data Folder

docs/docfx.json

@@ -39,14 +39,10 @@
             "_enableSearch": true
         },
         "dest": "_site",
-        "globalMetadataFiles": [],
-        "fileMetadataFiles": [],
         "template": [
             "default",
-            "templates/darkfx"
-        ],
-        "postProcessors": [],
-        "markdownEngineName": "markdig",
-        "noLangKeyword": false
+            "modern",
+            "overrides"
+        ]
     }
 }

docs/overrides/conceptual.extension.js

@@ -0,0 +1,15 @@
+exports.preTransform = function (model) {
+    if (model._path.includes("Changelog") || model._path.includes("InGameNews")) {
+        // reduce header levels by 1
+        model.conceptual = model.rawTitle + model.conceptual;
+        for (let i = 5; i >= 1; i--) {
+            model.conceptual = model.conceptual.replaceAll(`<h${i}`, `<h${i + 1}`);
+            model.conceptual = model.conceptual.replaceAll(`</h${i}`, `</h${i + 1}`);
+        }
+
+        // set appropriate title
+        model.title = model._path.includes("Changelog") ? "Changelog" : "In-Game News";
+        model.rawTitle = `<h1>${model.title}</h1>`;
+    }
+    return model;
+};

docs/templates/darkfx/partials/affix.tmpl.partial

@@ -1,40 +0,0 @@
-{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
-
-<div class="hidden-sm col-md-2" role="complementary">
-  <div class="sideaffix">
-    {{^_disableContribution}}
-    <div class="contribution">
-      <ul class="nav">
-        {{#docurl}}
-        <li>
-          <a href="{{docurl}}" class="contribution-link">{{__global.improveThisDoc}}</a>
-        </li>
-        {{/docurl}}
-        {{#sourceurl}}
-        <li>
-          <a href="{{sourceurl}}" class="contribution-link">{{__global.viewSource}}</a>
-        </li>
-        {{/sourceurl}}
-      </ul>
-    </div>
-    {{/_disableContribution}}
-    <div class="toggle-mode">
-      <div class="icon">
-        <i aria-hidden="true">☀</i>
-      </div>
-      <label class="switch">
-        <input type="checkbox" id="switch-style">
-        <span class="slider round"></span>
-      </label>
-      <div class="icon">
-        <i aria-hidden="true">☾</i>
-      </div>
-    </div>
-
-    <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
-    <h5>{{__global.inThisArticle}}</h5>
-    <div></div>
-    <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
-    </nav>
-  </div>
-</div>

docs/templates/darkfx/partials/footer.tmpl.partial

@@ -1,29 +0,0 @@
-{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
-
-<footer>
-  <div class="grad-bottom"></div>
-  <div class="footer">
-    <div class="container">
-      <span class="pull-right">
-        <a href="#top">Back to top</a>
-      </span>
-      <div class="pull-left">
-        {{{_appFooter}}}
-        {{^_appFooter}}<span>Generated by <strong>DocFX</strong></span>{{/_appFooter}}
-      </div>
-      <div class="toggle-mode pull-right visible-sm visible-xs">
-        <div class="icon">
-          <i aria-hidden="true">☀</i>
-        </div>
-        <label class="switch">
-          <input type="checkbox" id="switch-style-m">
-          <span class="slider round"></span>
-        </label>
-        <div class="icon">
-          <i aria-hidden="true">☾</i>
-        </div>
-      </div>
-    </div>
-  </div>
-  <script type="text/javascript" src="{{_rel}}styles/toggle-theme.js"></script>
-</footer>

docs/templates/darkfx/partials/head.tmpl.partial

@@ -1,20 +0,0 @@
-{{!Copyright (c) Oscar Vasquez. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}</title>
-  <meta name="viewport" content="width=device-width">
-  <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}">
-  <meta name="generator" content="docfx {{_docfxVersion}}">
-  {{#_description}}<meta name="description" content="{{_description}}">{{/_description}}
-  <link rel="shortcut icon" href="{{_rel}}{{{_appFaviconPath}}}{{^_appFaviconPath}}favicon.ico{{/_appFaviconPath}}">
-  <link rel="stylesheet" href="{{_rel}}styles/docfx.vendor.min.css">
-  <link rel="stylesheet" href="{{_rel}}styles/docfx.css">
-  <link rel="stylesheet" href="{{_rel}}styles/main.css">
-  <meta property="docfx:navrel" content="{{_navRel}}">
-  <meta property="docfx:tocrel" content="{{_tocRel}}">
-  {{#_noindex}}<meta name="searchOption" content="noindex">{{/_noindex}}
-  {{#_enableSearch}}<meta property="docfx:rel" content="{{_rel}}">{{/_enableSearch}}
-  {{#_enableNewTab}}<meta property="docfx:newtab" content="true">{{/_enableNewTab}}
-</head>

docs/templates/darkfx/styles/main.css

@@ -1,443 +0,0 @@
-:root, body.dark-theme {
-  --color-foreground: #ccd5dc;
-  --color-navbar: #66666d;
-  --color-breadcrumb: #999;
-  --color-underline: #ddd;
-  --color-toc-hover: #fff;
-  --color-background: #2d2d30;
-  --color-background-subnav: #333337;
-  --color-background-dark: #1e1e1e;
-  --color-background-table-alt: #212123;
-  --color-background-quote: #69696e;
-}
-
-body.light-theme {
-  --color-foreground: #171717;
-  --color-breadcrumb: #4a4a4a;
-  --color-toc-hover: #4c4c4c;
-  --color-background: #ffffff;
-  --color-background-subnav: #f5f5f5;
-  --color-background-dark: #ddd;
-  --color-background-table-alt: #f9f9f9;
-}
-
-body {
-  color: var(--color-foreground);
-  line-height: 1.5;
-  font-size: 14px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  word-wrap: break-word;
-  background-color: var(--color-background);
-}
-
-.btn.focus, .btn:focus, .btn:hover {
-  color: var(--color-foreground);
-}
-
-h1 {
-  font-weight: 600;
-  font-size: 32px;
-}
-
-h2 {
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 1.8;
-}
-
-h3 {
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 1.8;
-}
-
-h5 {
-  font-size: 14px;
-  padding: 10px 0px;
-}
-
-article h1, article h2, article h3, article h4 {
-  margin-top: 35px;
-  margin-bottom: 15px;
-}
-
-article h4 {
-  padding-bottom: 8px;
-  border-bottom: 2px solid var(--color-underline);
-}
-
-.navbar-brand>img {
-  color: var(--color-background);
-}
-
-.navbar {
-  border: none;
-}
-
-.subnav {
-  border-top: 1px solid var(--color-underline);
-  background-color: var(--color-background-subnav);
-}
-
-.sidenav, .fixed_header, .toc {
-  background-color: var(--color-background);
-}
-
-.navbar-inverse {
-  background-color: var(--color-background-dark);
-  z-index: 100;
-}
-
-.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-text {
-  color: var(--color-navbar);
-  background-color: var(--color-background-dark);
-  border-bottom: 3px solid transparent;
-  padding-bottom: 12px;
-}
-
-.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
-  color: var(--color-foreground);
-  background-color: var(--color-background-dark);
-  border-bottom: 3px solid var(--color-background-subnav);
-  transition: all ease 0.25s;
-}
-
-.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
-  color: var(--color-foreground);
-  background-color: var(--color-background-dark);
-  border-bottom: 3px solid var(--color-foreground);
-  transition: all ease 0.25s;
-}
-
-.navbar-form .form-control {
-  border: none;
-  border-radius: 0;
-}
-
-.light-theme .navbar-brand svg {
-  filter: brightness(20%);
-}
-
-.toc .level1>li {
-  font-weight: 400;
-}
-
-.toc .nav>li>a {
-  color: var(--color-foreground);
-}
-
-.sidefilter {
-  background-color: var(--color-background);
-  border-left: none;
-  border-right: none;
-}
-
-.sidefilter {
-  background-color: var(--color-background);
-  border-left: none;
-  border-right: none;
-}
-
-.toc-filter {
-  padding: 10px;
-  margin: 0;
-  background-color: var(--color-background);
-}
-
-.toc-filter>input {
-  border: none;
-  border-radius: unset;
-  background-color: var(--color-background-subnav);
-  padding: 5px 0 5px 20px;
-  font-size: 90%
-}
-
-.toc-filter>.clear-icon {
-  position: absolute;
-  top: 17px;
-  right: 15px;
-}
-
-.toc-filter>input:focus {
-  color: var(--color-foreground);
-  transition: all ease 0.25s;
-}
-
-.toc-filter>.filter-icon {
-  display: none;
-}
-
-.sidetoc>.toc {
-  background-color: var(--color-background);
-  overflow-x: hidden;
-}
-
-.sidetoc {
-  background-color: var(--color-background);
-  border: none;
-}
-
-.alert {
-  background-color: inherit;
-  border: none;
-  padding: 10px 0;
-  border-radius: 0;
-}
-
-.alert>p {
-  margin-bottom: 0;
-  padding: 5px 10px;
-  border-bottom: 1px solid;
-  background-color: var(--color-background-dark);
-}
-
-.alert>h5 {
-  padding: 10px 15px;
-  margin-top: 0;
-  margin-bottom: 0;
-  text-transform: uppercase;
-  font-weight: bold;
-  border-top: 2px solid;
-  background-color: var(--color-background-dark);
-  border-radius: none;
-}
-
-.alert>ul {
-  margin-bottom: 0;
-  padding: 5px 40px;
-}
-
-.alert-info {
-  color: #1976d2;
-}
-
-.alert-warning {
-  color: #f57f17;
-}
-
-.alert-danger {
-  color: #d32f2f;
-}
-
-pre {
-  padding: 9.5px;
-  margin: 0 0 10px;
-  font-size: 13px;
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: var(--color-background-dark);
-  border-radius: 0;
-  border: none;
-}
-
-code {
-  background: var(--color-background-dark) !important;
-  border-radius: 2px;
-}
-
-.hljs {
-  color: var(--color-foreground);
-}
-
-.toc .nav>li.active>.expand-stub::before, .toc .nav>li.in>.expand-stub::before, .toc .nav>li.in.active>.expand-stub::before, .toc .nav>li.filtered>.expand-stub::before {
-  content: "▾";
-}
-
-.toc .nav>li>.expand-stub::before, .toc .nav>li.active>.expand-stub::before {
-  content: "▸";
-}
-
-.affix ul ul>li>a:before {
-  content: "|";
-}
-
-.breadcrumb {
-  background-color: var(--color-background-subnav);
-}
-
-.breadcrumb .label.label-primary {
-  background: #444;
-  border-radius: 0;
-  font-weight: normal;
-  font-size: 100%;
-}
-
-#breadcrumb .breadcrumb>li a {
-  border-radius: 0;
-  font-weight: normal;
-  font-size: 85%;
-  display: inline;
-  padding: 0 .6em 0;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  color: var(--color-breadcrumb);
-}
-
-#breadcrumb .breadcrumb>li a:hover {
-  color: var(--color-foreground);
-  transition: all ease 0.25s;
-}
-
-.breadcrumb>li+li:before {
-  content: "⯈";
-  font-size: 75%;
-  color: var(--color-background-dark);
-  padding: 0;
-}
-
-.light-theme .breadcrumb>li+li:before {
-  color: var(--color-foreground)
- }
-
-.toc .level1>li {
-  font-weight: 600;
-  font-size: 130%;
-  padding-left: 5px;
-}
-
-.footer {
-  border-top: none;
-  background-color: var(--color-background-dark);
-  padding: 15px 0;
-  font-size: 90%;
-}
-
-.toc .nav>li>a:hover, .toc .nav>li>a:focus {
-  color: var(--color-toc-hover);
-  transition: all ease 0.1s;
-}
-
-.form-control {
-  background-color: var(--color-background-subnav);
-  border: none;
-  border-radius: 0;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-
-.form-control:focus {
-  border-color: #66afe9;
-  outline: 0;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-
-input#search-query:focus {
-  color: var(--color-foreground);
-}
-
-.table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
-  border: 1px solid var(--color-background-dark);
-}
-
-.table-striped>tbody>tr:nth-of-type(odd) {
-  background-color: var(--color-background-table-alt);
-}
-
-blockquote {
-  padding: 10px 20px;
-  margin: 0 0 10px;
-  font-size: 110%;
-  border-left: 5px solid var(--color-background-quote);
-  color: var(--color-background-quote);
-}
-
-.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
-  background-color: var(--color-background-subnav);
-  border-color: var(--color-background-subnav);
-}
-
-.breadcrumb>li, .pagination {
-  display: inline;
-}
-
-.tabGroup a[role="tab"] {
-  border-bottom: 2px solid var(--color-background-dark);
-}
-
-.tabGroup a[role="tab"][aria-selected="true"] {
-  color: var(--color-foreground);
-}
-
-.tabGroup section[role="tabpanel"] {
-  border: 1px solid var(--color-background-dark);
-}
-
-.sideaffix > div.contribution > ul > li > a.contribution-link:hover {
-  background-color: var(--color-background);
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 20px;
-}
-
-.switch input { 
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 14px;
-  width: 14px;
-  left: 4px;
-  bottom: 3px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: #337ab7;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px #337ab7;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(19px);
-  -ms-transform: translateX(19px);
-  transform: translateX(19px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 20px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
-.toggle-mode .icon {
-  display: inline-block;
-}
-
-.toggle-mode .icon i {
-  font-style: normal;
-  font-size: 17px;
-  display: inline-block;
-  padding-right: 7px;
-  padding-left: 7px;
-  vertical-align: middle;
-}

docs/templates/darkfx/styles/toggle-theme.js

@@ -1,35 +0,0 @@
-const sw = document.getElementById("switch-style"), sw_mobile = document.getElementById("switch-style-m"), b = document.body;
-if (b) {
-  function toggleTheme(target, dark) {
-    target.classList.toggle("dark-theme", dark)
-    target.classList.toggle("light-theme", !dark)
-  }
-
-  function switchEventListener() {
-    toggleTheme(b, this.checked);
-    if (window.localStorage) {
-      this.checked ? localStorage.setItem("theme", "dark-theme") : localStorage.setItem("theme", "light-theme")
-    }
-  }
-
-  var isDarkTheme = !window.localStorage || !window.localStorage.getItem("theme") || window.localStorage && localStorage.getItem("theme") === "dark-theme";
-
-  if(sw && sw_mobile){
-    sw.checked = isDarkTheme;
-    sw_mobile.checked = isDarkTheme;
-
-    sw.addEventListener("change", switchEventListener);
-    sw_mobile.addEventListener("change", switchEventListener);
-    
-    // sync state between switches
-    sw.addEventListener("change", function() {
-      sw_mobile.checked = this.checked;
-    });
-
-    sw_mobile.addEventListener("change", function() {
-      sw.checked = this.checked;
-    });
-  }
-
-  toggleTheme(b, isDarkTheme);
-}