Added Table Of Contents To Docs (#64)

* Add Bootstrap Extension

* Rename main.yml

* Artifact Upload

* Fix Bootstrap Reference Error

* BootstrapTreeProcessor

* getiterator removed

* keys function

* Style Images

* Update docs_build.yml

* Added Meta Files

* Template Get

* Fix Page Ref

* Update BASE_URL

* Sort Schemas

* Add Sitemaps

* Add favicons, open-graph, and setup guide

* Update Setup.md

* Update .gitignore

* Update Setup.md

* Use _blank on external links

* Restructured Docs

* Fix Links

* Added XML Schemas

* Name XML Schemas

* Improved Best Practices

* Add Logs For Static Files

* Make docs build happen on PR

* Responsive Footer

* Started On Table OF Contents

* Added Table Of Contents

* Fix <code> bg colors

* Remove unused CSS

* Add canonical link

* Fix OGP Image

* Try ScrollSpy on TOC

* Added ScrollSpy

* Improve TOC Spacing

* Custom Scroll Bars

* Fix Formatting in ship_log.md
This commit is contained in:
Ben C 2022-03-08 15:08:56 -08:00 committed by GitHub
parent bca1599d4d
commit 5f4980e49e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 142 additions and 63 deletions

View File

@ -7,13 +7,13 @@
<link href="https://bootswatch.com/5/darkly/bootstrap.min.css" <link href="https://bootswatch.com/5/darkly/bootstrap.min.css"
crossorigin="anonymous" rel="stylesheet"> crossorigin="anonymous" rel="stylesheet">
{{ defer_css("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css") }} {{ defer_css("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css") }}
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
crossorigin="anonymous"></script>
<script crossorigin="anonymous" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script crossorigin="anonymous" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="{{ 'styles/base.min.css'|static }}"/>
{% block resources %} {% endblock %} {% block resources %} {% endblock %}
</head> </head>
<body class="vh-100 d-flex flex-column" id="top" onload="{% block onLoad %}{% endblock %}"> <body class="vh-100 d-flex flex-column" style="overflow-x: hidden;" id="top" onload="{% block onLoad %}{% endblock %}" {% if page.render_toc %}data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="65"{% endif %}>
<header> <header>
<nav class="navbar navbar-expand-xl navbar-dark bg-dark sticky-top mb-3"> <nav class="navbar navbar-expand-xl navbar-dark bg-dark sticky-top mb-3">
<div class="container-fluid"> <div class="container-fluid">
@ -57,20 +57,22 @@
</div> </div>
</nav> </nav>
</header> </header>
<main class="flex-grow-1"> <div class="container-lg flex-grow-1">
<div class="container-lg"> <main class="main">
<div>
{% block content %} {% endblock %} {% block content %} {% endblock %}
</div> </div>
</main> </main>
<footer class="container-fluid w-100 mt-5 pt-4 pb-3 bg-dark">
<div class="row text-center">
<div class="col">
<p>Last Generated: {{ ''|gen_time }}</p>
</div> </div>
<div class="col"> <footer class="container-fluid w-100 mt-5 pt-4 pb-3 bg-dark">
<div class="row gy-3 text-center">
<div class="col-md">
<p class="p-0 m-0">Last Generated: {{ ''|gen_time }}</p>
</div>
<div class="col-md">
<a class="link-light" href="#top">Back To Top</a> <a class="link-light" href="#top">Back To Top</a>
</div> </div>
<div class="col"> <div class="col-md">
{{ external_link('Report An Issue', "https://github.com/xen-42/outer-wilds-new-horizons/issues/new/choose", 'link-light') }} {{ external_link('Report An Issue', "https://github.com/xen-42/outer-wilds-new-horizons/issues/new/choose", 'link-light') }}
</div> </div>
</div> </div>

View File

@ -14,6 +14,7 @@
{% set desc=page.description %} {% set desc=page.description %}
{% endif %} {% endif %}
{% set img="images/home/home_logo.webp"|static|full_url %} {% set img="images/home/home_logo.webp"|static|full_url %}
{% set canonical=page.title|route|full_url %}
{% set theme_color="#222222" %} {% set theme_color="#222222" %}
{# Meta Info #} {# Meta Info #}
@ -23,14 +24,15 @@
<title>{{ title }}</title> <title>{{ title }}</title>
<meta name="keywords" content="New Horizons, Outer Wilds, Modding, C#, Unity" /> <meta name="keywords" content="New Horizons, Outer Wilds, Modding, C#, Unity" />
<meta name="description" content="{{ desc }}"/> <meta name="description" content="{{ desc }}"/>
<link rel="canonical" href="{{ canonical }}">
{# OpenGraph Info #} {# OpenGraph Info #}
{{ og("type", "website") }} {{ og("type", "website") }}
{{ og("title", title) }} {{ og("title", title) }}
{{ og("description", desc) }} {{ og("description", desc) }}
{{ og("url", page.title|route|full_url) }} {{ og("url", canonical) }}
{{ og("image", img) }} {{ og("image", img) }}
{{ og("image:alt", desc) }} {{ og("image:alt", "The New Horizons Logo") }}
{# Twitter Info #} {# Twitter Info #}
{{ tw("title", title) }} {{ tw("title", title) }}

View File

@ -2,15 +2,44 @@
{% from "base/macros.jinja2" import defer_css %} {% from "base/macros.jinja2" import defer_css %}
{% set br="lg" %}
{% set col_num=3 %}
{% block resources %} {% block resources %}
{{ defer_css("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/styles/github-dark-dimmed.min.css") }} {{ defer_css("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/styles/github-dark-dimmed.min.css") }}
<script onload="hljs.highlightAll();" defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script onload="hljs.highlightAll();" defer
<style>code{background-color: #1a1a1a !important;}</style> src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row g-6">
<div class="col"> {% if page.render_toc %}
<div class="col-{{ br }}-{{ col_num }}">
<nav id="TableOfContents"
class="navbar navbar-light sticky-top flex-column align-items-stretch p-3 overflow-auto"
style="max-height: 100vh !important;">
{% macro render(item) %}
<a id="{{ item['id'] }}-toc" class="nav-link toc-link px-1 mb-1" href="#{{ item['id'] }}"
style="margin-left: {{ 0.7 * item['level'] }}rem;">{{ item['name'] }}</a>
{% if item['children'] %}
<nav class="nav nav-pills flex-column">
{% for child in item['children'] %}
{{ render(child) }}
{% endfor %}
</nav>
{% endif %}
{% endmacro %}
<nav class="nav nav-pills flex-column">
<strong class="nav-text pb-2">On This Page</strong>
{% for item in page.table_of_contents %}
{{ render(item) }}
{% endfor %}
</nav>
</nav>
</div>
<hr class="d-{{ br }}-none mt-3"/>
{% endif %}
<div id="page-contents" {% if page.render_toc %}class="col-{{ br }}-{{ 12 - col_num }}"{% else %}class="col"{% endif %}>
{{ rendered|safe }} {{ rendered|safe }}
</div> </div>
</div> </div>

View File

@ -5,7 +5,7 @@
<div class="accordion" id="accordion{{ html_id }}"> <div class="accordion" id="accordion{{ html_id }}">
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="heading{{ html_id }}"> <h2 class="accordion-header" id="heading{{ html_id }}">
<button class="accordion-button{% if not expanded %} collapsed{% endif %}" type="button" <button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target="#{{ html_id }}" data-bs-target="#{{ html_id }}"
aria-expanded="false" aria-controls="{{ html_id }}" aria-expanded="false" aria-controls="{{ html_id }}"

View File

@ -1,7 +1,7 @@
Title: API Title: API
Sort-Priority: 40 Sort-Priority: 40
## How to use New Horizons in Other Mods ## How to use the API
First create the following interface in your mod: First create the following interface in your mod:

View File

@ -1,6 +1,6 @@
Title: Home Title: Home
Out-File: index Out-File: index
Sort-Priority: 200 Sort-Priority: 100
![New Horizons Logo]({{ 'images/home/home_logo.webp'|static }}) ![New Horizons Logo]({{ 'images/home/home_logo.webp'|static }})
@ -8,7 +8,7 @@ Sort-Priority: 200
This is the official documentation for [New Horizons](https://github.com/xen-42/outer-wilds-new-horizons){ target="_blank" } This is the official documentation for [New Horizons](https://github.com/xen-42/outer-wilds-new-horizons){ target="_blank" }
## Getting Started with Planet Creation ## Getting Started
The [Config Template](https://github.com/xen-42/ow-new-horizons-config-template){ target="_blank" } is available if you want to release your own The [Config Template](https://github.com/xen-42/ow-new-horizons-config-template){ target="_blank" } is available if you want to release your own
planet mod using configs. You can learn how the configs work by picking apart planet mod using configs. You can learn how the configs work by picking apart
@ -119,7 +119,7 @@ it).
Check out the rest of the site for how to format planet, star system, dialogue, ship log, and translation files! Check out the rest of the site for how to format planet, star system, dialogue, ship log, and translation files!
## Helpful resources ## Helpful Resources
The texturemap/heightmap feature was inspired by the KSP mod Kopernicus. A lot of the same techniques that apply to The texturemap/heightmap feature was inspired by the KSP mod Kopernicus. A lot of the same techniques that apply to
planet creation there apply to New Horizons. If you need help with planetary texturing, check out [The KSP texturing guide](https://forum.kerbalspaceprogram.com/index.php?/topic/165285-planetary-texturing-guide-repository/){ target="_blank" }. planet creation there apply to New Horizons. If you need help with planetary texturing, check out [The KSP texturing guide](https://forum.kerbalspaceprogram.com/index.php?/topic/165285-planetary-texturing-guide-repository/){ target="_blank" }.

View File

@ -4,7 +4,7 @@ Sort-Priority: 70
{% macro image(name) %}{{ ("images/ship_log/" + name)|static }}{% endmacro %} {% macro image(name) %}{{ ("images/ship_log/" + name)|static }}{% endmacro %}
# Ship Log # Intro
Welcome! this page outlines how to create a custom ship log. Welcome! this page outlines how to create a custom ship log.
## Helpful Mods ## Helpful Mods
@ -85,12 +85,10 @@ navigate to ShipLogManager.
<Entry> <!-- An Entry For This Planet --> <Entry> <!-- An Entry For This Planet -->
<ID>EXAMPLE_ENTRY</ID> <!-- The ID of this entry --> <ID>EXAMPLE_ENTRY</ID> <!-- The ID of this entry -->
<Name>Example Planet</Name> <!-- The name to show for this entry both on the card and in map mode --> <Name>Example Planet</Name> <!-- The name to show for this entry both on the card and in map mode -->
<Curiosity>EXAMPLE_ENTRY <Curiosity>EXAMPLE_ENTRY</Curiosity> <!-- The curiosity this entry belongs to (optional) in this case, it belongs to itself -->
</Curiosity> <!-- The curiosity this entry belongs to (optional) in this case, it belongs to itself -->
<IsCuriosity/> <!-- Marks this entry as a curiosity, makes it bigger in rumor mode and allows custom colors --> <IsCuriosity/> <!-- Marks this entry as a curiosity, makes it bigger in rumor mode and allows custom colors -->
<IgnoreMoreToExplore/> <!-- Don't show a "more to explore" icon --> <IgnoreMoreToExplore/> <!-- Don't show a "more to explore" icon -->
<AltPhotoCondition>EXAMPLE_EXPLORE_FACT <AltPhotoCondition>EXAMPLE_EXPLORE_FACT</AltPhotoCondition> <!-- Show an alternate picture if a fact is known -->
</AltPhotoCondition> <!-- Show an alternate picture if a fact is known -->
<RumorFact> <!-- A rumor fact that belongs to this entry --> <RumorFact> <!-- A rumor fact that belongs to this entry -->
<ID>EXAMPLE_RUMOR_FACT</ID> <!-- The ID of this fact --> <ID>EXAMPLE_RUMOR_FACT</ID> <!-- The ID of this fact -->
@ -100,12 +98,10 @@ navigate to ShipLogManager.
<ExploreFact> <!-- An explore fact that belongs to this entry --> <ExploreFact> <!-- An explore fact that belongs to this entry -->
<ID>EXAMPLE_EXPLORE_FACT</ID> <!-- The ID of this fact --> <ID>EXAMPLE_EXPLORE_FACT</ID> <!-- The ID of this fact -->
<Text>Example Explore Fact <Text>Example Explore Fact <![CDATA[<color=orange>This is orange</color>]]></Text> <!-- The Text to display for this fact, notice how you can use color just like in dialogue -->
<![CDATA[<color=orange>This is orange</color>]]></Text> <!-- The Text to display for this fact, notice how you can use color just like in dialogue -->
<AltText> <!-- Text to display for this fact if another fact is known --> <AltText> <!-- Text to display for this fact if another fact is known -->
<Text><![CDATA[<color=blue>Different Text To Display</color>]]></Text> <!-- The text to display --> <Text><![CDATA[<color=blue>Different Text To Display</color>]]></Text> <!-- The text to display -->
<Condition>EXAMPLE_CHILD_RUMOR_FACT <Condition>EXAMPLE_CHILD_RUMOR_FACT</Condition> <!-- The fact that needs to be known to make this text display -->
</Condition> <!-- The fact that needs to be known to make this text display -->
</AltText> </AltText>
</ExploreFact> </ExploreFact>
@ -132,8 +128,7 @@ navigate to ShipLogManager.
<ID>EXAMPLE_ENTRY_2</ID> <!-- Make sure IDs are unique! --> <ID>EXAMPLE_ENTRY_2</ID> <!-- Make sure IDs are unique! -->
<Name>Example Entry 2</Name> <Name>Example Entry 2</Name>
<Curiosity>EXAMPLE_ENTRY</Curiosity> <!-- Set this entry's curiosity to the other one we defined --> <Curiosity>EXAMPLE_ENTRY</Curiosity> <!-- Set this entry's curiosity to the other one we defined -->
<IgnoreMoreToExploreCondition>EXAMPLE_EXPLORE_FACT_2 <IgnoreMoreToExploreCondition>EXAMPLE_EXPLORE_FACT_2</IgnoreMoreToExploreCondition> <!-- Don't show a more to explore icon if a fact is known -->
</IgnoreMoreToExploreCondition> <!-- Don't show a more to explore icon if a fact is known -->
<!-- Make some facts for this second entry --> <!-- Make some facts for this second entry -->
<RumorFact> <RumorFact>

View File

@ -1,7 +1,7 @@
Title: Update Planets Title: Update Planets
Sort-Priority: 80 Sort-Priority: 80
## How to Update Existing Planets ## Update Existing Planets
Similar to above, make a config where "Name" is the name of the planet. The name should be able to just match their in-game english names, however if you encounter any issues with that here are the in-code names for planets that are guaranteed to work: `SUN`, `CAVE_TWIN` (Ember Twin), `TOWER_TWIN` (Ash Twin), `TIMBER_HEARTH`, `BRITTLE_HOLLOW`, `GIANTS_DEEP`, `DARK_BRAMBLE`, `COMET` (Interloper), `WHITE_HOLE`, `WHITE_HOLE_TARGET` (Whitehole station I believe), `QUANTUM_MOON`, `ORBITAL_PROBE_CANNON`, `TIMBER_MOON` (Attlerock), `VOLCANIC_MOON` (Hollow's Lantern), `DREAMWORLD`, `MapSatellite`, `RINGWORLD` (the Stranger). Similar to above, make a config where "Name" is the name of the planet. The name should be able to just match their in-game english names, however if you encounter any issues with that here are the in-code names for planets that are guaranteed to work: `SUN`, `CAVE_TWIN` (Ember Twin), `TOWER_TWIN` (Ash Twin), `TIMBER_HEARTH`, `BRITTLE_HOLLOW`, `GIANTS_DEEP`, `DARK_BRAMBLE`, `COMET` (Interloper), `WHITE_HOLE`, `WHITE_HOLE_TARGET` (Whitehole station I believe), `QUANTUM_MOON`, `ORBITAL_PROBE_CANNON`, `TIMBER_MOON` (Attlerock), `VOLCANIC_MOON` (Hollow's Lantern), `DREAMWORLD`, `MapSatellite`, `RINGWORLD` (the Stranger).
@ -19,7 +19,7 @@ You can also delete parts of an existing planet. Here's part of an example confi
In `childrenToDestroy` you list the relative paths for the children of the planet's gameObject that you want to delete. In `childrenToDestroy` you list the relative paths for the children of the planet's gameObject that you want to delete.
## How to Destroy Existing Planets ## Destroy Existing Planets
You do this (but with the appropriate name) as its own config. You do this (but with the appropriate name) as its own config.
```json ```json

View File

@ -1,32 +1,55 @@
function flashElement(t) { $(document).on('click', 'a[href^="#"]', function (event) {
myElement = document.getElementById(t).parentNode, myElement.classList.add("jsfh-animated-property"), setTimeout(function () { if (this.href.split("#")[1] === "top") return;
event.preventDefault();
history.pushState({}, '', this.href);
});
function flashElement(elementId) {
myElement = document.getElementById(elementId).parentNode;
myElement.classList.add("jsfh-animated-property");
setTimeout(function () {
myElement.classList.remove("jsfh-animated-property"); myElement.classList.remove("jsfh-animated-property");
}, 1e3); }, 1000);
} }
function setAnchor(t) { function setAnchor(anchorLinkDestination) {
history.pushState({}, "", t); history.pushState({}, '', anchorLinkDestination);
} }
function anchorOnLoad() { function anchorOnLoad() {
let t = window.location.hash.split("?")[0].split("&")[0]; let linkTarget = window.location.hash.split("?")[0].split("&")[0];
"#" === t[0] && (t = t.substr(1)), t.length > 0 && anchorLink(t); if (linkTarget[0] === "#") {
let idTarget = linkTarget.substring(1);
if (idTarget !== "top") {
anchorLink(idTarget);
}
}
} }
function anchorLink(t) { function anchorLink(linkTarget) {
$("#" + t).parents().addBack().filter(".collapse:not(.show), .tab-pane, [role='tab']").each(function (t) { const target = $("#" + linkTarget);
if ($(this).hasClass("collapse")) $(this).collapse("show"); else if ($(this).hasClass("tab-pane")) { target.parents().addBack().filter(".collapse:not(.show), .tab-pane, [role='tab']").each(
const t = $("a[href='#" + $(this).attr("id") + "']"); function (index) {
t && t.tab("show"); if ($(this).hasClass("collapse")) {
} else "tab" === $(this).attr("role") && $(this).tab("show"); $(this).collapse("show");
}), setTimeout(function () { } else if ($(this).hasClass("tab-pane")) {
let e = document.getElementById(t); const tabToShow = $("a[href='#" + $(this).attr("id") + "']");
e && (e.scrollIntoView({block: "center", behavior: "smooth"}), setTimeout(function () { if (tabToShow) {
flashElement(t); tabToShow.tab("show");
}, 500));
}, 1e3);
} }
} else if ($(this).attr("role") === "tab") {
$(this).tab("show");
}
}
);
$(document).on("click", 'a[href^="#"]', function (t) { setTimeout(function () {
t.preventDefault(), history.pushState({}, "", this.href); let targetElement = document.getElementById(linkTarget);
}); if (targetElement) {
targetElement.scrollIntoView({block: "center", behavior: "smooth"});
setTimeout(function () {
flashElement(linkTarget);
}, 500);
}
}, 1000);
}

View File

@ -0,0 +1,22 @@
pre > code {
background-color: #1a1a1a !important;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bs-dark);
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: var(--bs-secondary);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}

View File

@ -12,6 +12,8 @@ class AbstractTemplatedItem(MinifyMixin, AbstractItem, ABC):
title: str = None title: str = None
description: str | None = None description: str | None = None
sort_priority: int = None sort_priority: int = None
render_toc: bool = False
table_of_contents: dict = {}
def load_metadata(self): def load_metadata(self):
if self.title is None: if self.title is None:
@ -40,7 +42,8 @@ class AbstractTemplatedItem(MinifyMixin, AbstractItem, ABC):
template = self.env.get_template(str(self.in_path.relative_to(Path('content/')).as_posix())) template = self.env.get_template(str(self.in_path.relative_to(Path('content/')).as_posix()))
context.update({ context.update({
'page': self, 'page': self,
'rendered': self.inner_render(template, **context) 'rendered': self.inner_render(template, **context),
'render_toc': self.render_toc
}) })
return container.render(**context) return container.render(**context)

View File

@ -21,6 +21,9 @@ class MDPage(AbstractTemplatedItem):
self.title = md.Meta.get('title')[0] self.title = md.Meta.get('title')[0]
self.description = md.Meta.get('description', [None])[0] self.description = md.Meta.get('description', [None])[0]
self.render_toc = md.Meta.get('toc', ['True'])[0].strip().lower() == "true"
if self.render_toc:
self.table_of_contents = md.toc_tokens
raw_priority = md.Meta.get('sort-priority') raw_priority = md.Meta.get('sort-priority')
if raw_priority is not None: if raw_priority is not None:
self.sort_priority = int(raw_priority[0]) self.sort_priority = int(raw_priority[0])