diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml index 949a240f93..4bf1c81e09 100644 --- a/.github/workflows/pages.yml +++ b/.github/workflows/pages.yml @@ -34,11 +34,10 @@ jobs: - name: Setup Pages uses: actions/configure-pages@v2 - - name: Install Doxygen - run: sudo apt-get install doxygen -y - - - name: Generate docs - run: doxygen docs/Doxyfile + - name: Doxygen + uses: mattnotmitt/doxygen-action@v1.9.5 + with: + doxyfile-path: 'docs/cfg/Doxyfile' - name: Upload artifact uses: actions/upload-pages-artifact@v1 diff --git a/docs/Docs.md b/docs/Docs.md index cad182e913..db1cc96ee3 100644 --- a/docs/Docs.md +++ b/docs/Docs.md @@ -1,18 +1,18 @@ -# Flecs Documentation +# Documentation ## Getting Started -- [FAQ](/flecs/#/docs/FAQ) -- [Quickstart](/flecs/#/docs/Quickstart) -- [Designing with Flecs](/flecs/#/docs/DesignWithFlecs) +- [FAQ](/flecs/docs/api/html/md_docs_FAQ.html) +- [Quickstart](/flecs/docs/api/html/md_docs_Quickstart.html) +- [Designing with Flecs](/flecs/docs/api/html/md_docs_DesignWithFlecs.html) - [Getting Started with Unreal Engine](https://github.com/PreyK/Unreal-Minimum-Viable-Flecs) ## Manuals -- [Manual](/flecs/#/docs/Manual) -- [Query Manual](/flecs/#/docs/Queries) -- [Systems Manual](/flecs/#/docs/Systems) -- [Relationships Manual](/flecs/#/docs/Relationships) -- [JSON Format Manual](/flecs/#/docs/JsonFormat) -- [REST API Manual](/flecs/#/docs/RestApi) +- [Manual](/flecs/docs/api/html/md_docs_Manual.html) +- [Query Manual](/flecs/docs/api/html/md_docs_Queries.html) +- [Systems Manual](/flecs/docs/api/html/md_docs_Systems.html) +- [Relationships Manual](/flecs/docs/api/html/md_docs_Relationships.html) +- [JSON Format Manual](/flecs/docs/api/html/md_docs_JsonFormat.html) +- [REST API Manual](/flecs/docs/api/html/md_docs_RestApi.html) ## API reference - [C API](/flecs/docs/api/html/group__c.html) diff --git a/docs/Manual.md b/docs/Manual.md index eeb7a12200..7d1aff3286 100644 --- a/docs/Manual.md +++ b/docs/Manual.md @@ -1,4 +1,4 @@ -# Flecs Manual +# Manual ## Introduction Nobody likes to read manuals, and you should be able to get up and running with Flecs by using the quickstart, by looking at examples and by checking the documentation in the flecs header files. However, if you truly want to know how something works, or why it works that way, the manual is the right place to go. With that said, the manual is not exhaustive, and it complements the other sources of documentation. @@ -27,19 +27,19 @@ There are few things as satisfying as building games. If nothing else, Flecs has ### High level architecture This diagram provides an overview of how entities, components, tables, queries, filters and systems are wired together. -![Architecture diagram](flecs-architecture-overview.png) +![Architecture diagram](img/flecs-architecture-overview.png) ### Component add flow This diagram provides an overview of the different steps that occur when adding a component to an entity. The diagram shows when component lifecycle callbacks, OnAdd triggers, OnSet systems, UnSet systems and monitors are invoked. Additionally the diagram shows how the defer mechanism is integrated with the listed Flecs operations. -![Component add flow](flecs-add-component-flow.png) +![Component add flow](img/flecs-add-component-flow.png) ### Component remove flow This diagram provides an overview of the different steps that occur when removing a component from an entity. The diagram shows when component lifecycle callbacks, OnRemove triggers, OnSet systems, UnSet systems and monitors are invoked. Additionally the diagram shows how the defer mechanism is integrated with the listed Flecs operations. -![Component remove flow](flecs-remove-component-flow.png) +![Component remove flow](img/flecs-remove-component-flow.png) ### Staging flow This diagram provides an overview of what happens when an application uses staging. Staging is a lockless mechanism that lets threads concurrently read & perform structural changes on the store. Changes are temporarily stored in a command queue per stage, which can be merged with the store when convenient. -![Staging flow](flecs-staging-flow.png) +![Staging flow](img/flecs-staging-flow.png) ## API design diff --git a/docs/Quickstart.md b/docs/Quickstart.md index 7014b52070..34b81dd00d 100644 --- a/docs/Quickstart.md +++ b/docs/Quickstart.md @@ -1,10 +1,10 @@ -# Flecs Quickstart +# Quickstart This document provides a quick overview of the different features and concepts in Flecs with short examples. This is a good resource if you're just getting started or just want to get a better idea of what kind of features are available in Flecs! ## Overview This shows an overview of all the different concepts in Flecs and how they wire together. The sections in the quickstart go over them in more detail and with code examples. -![Flecs Overview](flecs-quickstart-overview.png) +![Flecs Overview](img/flecs-quickstart-overview.png) ## World The world is the container for all ECS data. It stores the entities and their components, does queries and runs systems. Typically there is only a single world, but there is no limit on the number of worlds an application can create. diff --git a/docs/RestApi.md b/docs/RestApi.md index eb22569a29..991c5ec1a9 100644 --- a/docs/RestApi.md +++ b/docs/RestApi.md @@ -66,7 +66,7 @@ An application with REST enabled can be remotely monitored with the [Flecs Explo When the connection is successful, the Explorer should look similar to this: -![Remote Explorer](explorer-remote.png) +![Remote Explorer](img/explorer-remote.png) The remote icon next to the title should be visible. If the connection is not successful it could be that the explorer did not receive a response fast enough. To force the explorer to connect remotely, add `?remote=true` to the request: https://flecs.dev/explorer?remote=true. diff --git a/docs/Systems.md b/docs/Systems.md index c4b78f0435..9ce05c6dc0 100644 --- a/docs/Systems.md +++ b/docs/Systems.md @@ -1,4 +1,4 @@ -# Systems Manual +# Systems Systems are queries + a function that can be ran manually or get scheduled as part of a pipeline. To use systems, applications must build Flecs with the `FLECS_SYSTEM` addon (enabled by default). An example of a simple system: diff --git a/docs/Doxyfile b/docs/cfg/Doxyfile similarity index 98% rename from docs/Doxyfile rename to docs/cfg/Doxyfile index 016afc5134..1c1cedbec4 100644 --- a/docs/Doxyfile +++ b/docs/cfg/Doxyfile @@ -42,26 +42,26 @@ DOXYFILE_ENCODING = UTF-8 # title of most generated pages and in a few other places. # The default value is: My Project. -PROJECT_NAME = flecs +PROJECT_NAME = Flecs # The PROJECT_NUMBER tag can be used to enter a project or revision number. This # could be handy for archiving the generated documentation or if some version # control system is used. -PROJECT_NUMBER = 3.1 +PROJECT_NUMBER = v3.1 # Using the PROJECT_BRIEF tag one can provide an optional one line description # for a project that appears at the top of each page and should give viewer a # quick idea about the purpose of the project. Keep the description short. -PROJECT_BRIEF = +PROJECT_BRIEF = A fast entity component system (ECS) for C & C++ # With the PROJECT_LOGO tag one can specify a logo or an icon that is included # in the documentation. The maximum height of the logo should not exceed 55 # pixels and the maximum width should not exceed 200 pixels. Doxygen will copy # the logo to the output directory. -PROJECT_LOGO = +PROJECT_LOGO = # The OUTPUT_DIRECTORY tag is used to specify the (relative or absolute) path # into which the generated documentation will be written. If a relative path is @@ -901,7 +901,16 @@ WARN_LOGFILE = INPUT = include/flecs.h \ include/flecs/os_api.h \ include/flecs/addons \ - docs/Docs.md + docs/Docs.md \ + docs/Quickstart.md \ + docs/FAQ.md \ + docs/DesignWithFlecs.md \ + docs/Manual.md \ + docs/Queries.md \ + docs/Systems.md \ + docs/Relationships.md \ + docs/RestApi.md \ + docs/JsonFormat.md # This tag can be used to specify the character encoding of the source files # that doxygen parses. Internally doxygen uses the UTF-8 encoding. Doxygen uses @@ -1013,7 +1022,7 @@ EXAMPLE_RECURSIVE = NO # that contain images that are to be included in the documentation (see the # \image command). -IMAGE_PATH = +IMAGE_PATH = docs # The INPUT_FILTER tag can be used to specify a program that doxygen should # invoke to filter for each input file. Doxygen will invoke the filter program @@ -1232,7 +1241,7 @@ HTML_FILE_EXTENSION = .html # of the possible markers and block names see the documentation. # This tag requires that the tag GENERATE_HTML is set to YES. -HTML_HEADER = +HTML_HEADER = docs/cfg/header.html # The HTML_FOOTER tag can be used to specify a user-defined HTML footer for each # generated HTML page. If the tag is left blank doxygen will generate a standard @@ -1267,7 +1276,10 @@ HTML_STYLESHEET = # list). For an example see the documentation. # This tag requires that the tag GENERATE_HTML is set to YES. -HTML_EXTRA_STYLESHEET = +HTML_EXTRA_STYLESHEET = docs/cfg/doxygen-awesome.css \ + docs/cfg/doxygen-awesome-sidebar-only.css \ + docs/cfg/doxygen-awesome-sidebar-only-darkmode-toggle.css \ + docs/cfg/custom.css # The HTML_EXTRA_FILES tag can be used to specify one or more extra images or # other source files which should be copied to the HTML output directory. Note @@ -1277,7 +1289,10 @@ HTML_EXTRA_STYLESHEET = # files will be copied as-is; there are no commands or markers available. # This tag requires that the tag GENERATE_HTML is set to YES. -HTML_EXTRA_FILES = +HTML_EXTRA_FILES = docs/cfg/doxygen-awesome-darkmode-toggle.js \ + docs/cfg/doxygen-awesome-fragment-copy-button.js \ + docs/cfg/doxygen-awesome-paragraph-link.js \ + docs/cfg/doxygen-awesome-interactive-toc.js # The HTML_COLORSTYLE tag can be used to specify if the generated HTML output # should be rendered with a dark or light theme. Default setting AUTO_LIGHT @@ -1294,7 +1309,7 @@ HTML_EXTRA_FILES = # The default value is: AUTO_LIGHT. # This tag requires that the tag GENERATE_HTML is set to YES. -HTML_COLORSTYLE = AUTO_LIGHT +HTML_COLORSTYLE = LIGHT # The HTML_COLORSTYLE_HUE tag controls the color of the HTML output. Doxygen # will adjust the colors in the style sheet and background images according to @@ -2680,7 +2695,3 @@ GENERATE_LEGEND = YES # The default value is: YES. DOT_CLEANUP = YES - -# Custom styling -HTML_EXTRA_STYLESHEET = docs/css/doxygen-awesome.css \ - docs/css/doxygen-awesome-sidebar-only.css diff --git a/docs/cfg/custom.css b/docs/cfg/custom.css new file mode 100644 index 0000000000..c7845526dd --- /dev/null +++ b/docs/cfg/custom.css @@ -0,0 +1,82 @@ +@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600"); + +.github-corner svg { + fill: var(--primary-color); + color: var(--page-background-color); + width: 72px; + height: 72px; +} + +@media screen and (max-width: 767px) { + .github-corner svg { + width: 50px; + height: 50px; + } + #projectnumber { + margin-right: 22px; + } +} + +.next_section_button { + display: block; + padding: var(--spacing-large) 0 var(--spacing-small) 0; + color: var(--page-background-color); + user-select: none; +} + +.alter-theme-button:hover { + background: var(--primary-dark-color); +} + +html.dark-mode .darkmode_inverted_image img, /* < doxygen 1.9.3 */ +html.dark-mode .darkmode_inverted_image object[type="image/svg+xml"] /* doxygen 1.9.3 */ { + filter: brightness(87%) hue-rotate(180deg) invert(); +} + +.bordered_image { + border-radius: var(--border-radius-small); + border: 1px solid var(--separator-color); + display: inline-block; + overflow: hidden; +} + +html.dark-mode .bordered_image img, /* < doxygen 1.9.3 */ +html.dark-mode .bordered_image object[type="image/svg+xml"] /* doxygen 1.9.3 */ { + border-radius: var(--border-radius-small); +} + +html { + --primary-color: #42b983; + --fragment-link: #42b983; + --fragment-keywordflow: #ff7b72; + --spacing-small: 8px; + --content-maxwidth: 800px; + --font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; + --font-family-monospace: 'Roboto Mono', Monaco, courier, monospace; + --fragment-lineheight: 24px; +} + +html.dark-mode { + --primary-color: #42b983; + --page-background-color: #1a1d23; + --side-nav-background: #242832; + --separator-color: rgba(255,255,255,0.07); + --tablehead-background: #242832; + --code-background: #242832; + --fragment-background: #242832; + --fragment-link: #42b983; + --fragment-keywordflow: #ff7b72; +} + +div.fragment { + padding-top: 25px !important; + padding-bottom: 25px !important; + padding-left: 20px !important; + border-radius: 0px; + border: none; +} + +code { + border-radius: 0px; + border: none; +} diff --git a/docs/cfg/doxygen-awesome-darkmode-toggle.js b/docs/cfg/doxygen-awesome-darkmode-toggle.js new file mode 100644 index 0000000000..f2c5853f7b --- /dev/null +++ b/docs/cfg/doxygen-awesome-darkmode-toggle.js @@ -0,0 +1,157 @@ +/** + +Doxygen Awesome +https://github.com/jothepro/doxygen-awesome-css + +MIT License + +Copyright (c) 2021 - 2022 jothepro + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + +class DoxygenAwesomeDarkModeToggle extends HTMLElement { + // SVG icons from https://fonts.google.com/icons + // Licensed under the Apache 2.0 license: + // https://www.apache.org/licenses/LICENSE-2.0.html + static lightModeIcon = `` + static darkModeIcon = `` + static title = "Toggle Light/Dark Mode" + + static prefersLightModeInDarkModeKey = "prefers-light-mode-in-dark-mode" + static prefersDarkModeInLightModeKey = "prefers-dark-mode-in-light-mode" + + static _staticConstructor = function() { + DoxygenAwesomeDarkModeToggle.enableDarkMode(DoxygenAwesomeDarkModeToggle.userPreference) + // Update the color scheme when the browsers preference changes + // without user interaction on the website. + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { + DoxygenAwesomeDarkModeToggle.onSystemPreferenceChanged() + }) + // Update the color scheme when the tab is made visible again. + // It is possible that the appearance was changed in another tab + // while this tab was in the background. + document.addEventListener("visibilitychange", visibilityState => { + if (document.visibilityState === 'visible') { + DoxygenAwesomeDarkModeToggle.onSystemPreferenceChanged() + } + }); + }() + + static init() { + $(function() { + $(document).ready(function() { + const toggleButton = document.createElement('doxygen-awesome-dark-mode-toggle') + toggleButton.title = DoxygenAwesomeDarkModeToggle.title + toggleButton.updateIcon() + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { + toggleButton.updateIcon() + }) + document.addEventListener("visibilitychange", visibilityState => { + if (document.visibilityState === 'visible') { + toggleButton.updateIcon() + } + }); + + $(document).ready(function(){ + document.getElementById("MSearchBox").parentNode.appendChild(toggleButton) + }) + $(window).resize(function(){ + document.getElementById("MSearchBox").parentNode.appendChild(toggleButton) + }) + }) + }) + } + + constructor() { + super(); + this.onclick=this.toggleDarkMode + } + + /** + * @returns `true` for dark-mode, `false` for light-mode system preference + */ + static get systemPreference() { + return window.matchMedia('(prefers-color-scheme: dark)').matches + } + + /** + * @returns `true` for dark-mode, `false` for light-mode user preference + */ + static get userPreference() { + return (!DoxygenAwesomeDarkModeToggle.systemPreference && localStorage.getItem(DoxygenAwesomeDarkModeToggle.prefersDarkModeInLightModeKey)) || + (DoxygenAwesomeDarkModeToggle.systemPreference && !localStorage.getItem(DoxygenAwesomeDarkModeToggle.prefersLightModeInDarkModeKey)) + } + + static set userPreference(userPreference) { + DoxygenAwesomeDarkModeToggle.darkModeEnabled = userPreference + if(!userPreference) { + if(DoxygenAwesomeDarkModeToggle.systemPreference) { + localStorage.setItem(DoxygenAwesomeDarkModeToggle.prefersLightModeInDarkModeKey, true) + } else { + localStorage.removeItem(DoxygenAwesomeDarkModeToggle.prefersDarkModeInLightModeKey) + } + } else { + if(!DoxygenAwesomeDarkModeToggle.systemPreference) { + localStorage.setItem(DoxygenAwesomeDarkModeToggle.prefersDarkModeInLightModeKey, true) + } else { + localStorage.removeItem(DoxygenAwesomeDarkModeToggle.prefersLightModeInDarkModeKey) + } + } + DoxygenAwesomeDarkModeToggle.onUserPreferenceChanged() + } + + static enableDarkMode(enable) { + if(enable) { + DoxygenAwesomeDarkModeToggle.darkModeEnabled = true + document.documentElement.classList.add("dark-mode") + document.documentElement.classList.remove("light-mode") + } else { + DoxygenAwesomeDarkModeToggle.darkModeEnabled = false + document.documentElement.classList.remove("dark-mode") + document.documentElement.classList.add("light-mode") + } + } + + static onSystemPreferenceChanged() { + DoxygenAwesomeDarkModeToggle.darkModeEnabled = DoxygenAwesomeDarkModeToggle.userPreference + DoxygenAwesomeDarkModeToggle.enableDarkMode(DoxygenAwesomeDarkModeToggle.darkModeEnabled) + } + + static onUserPreferenceChanged() { + DoxygenAwesomeDarkModeToggle.enableDarkMode(DoxygenAwesomeDarkModeToggle.darkModeEnabled) + } + + toggleDarkMode() { + DoxygenAwesomeDarkModeToggle.userPreference = !DoxygenAwesomeDarkModeToggle.userPreference + this.updateIcon() + } + + updateIcon() { + if(DoxygenAwesomeDarkModeToggle.darkModeEnabled) { + this.innerHTML = DoxygenAwesomeDarkModeToggle.darkModeIcon + } else { + this.innerHTML = DoxygenAwesomeDarkModeToggle.lightModeIcon + } + } +} + +customElements.define("doxygen-awesome-dark-mode-toggle", DoxygenAwesomeDarkModeToggle); diff --git a/docs/cfg/doxygen-awesome-fragment-copy-button.js b/docs/cfg/doxygen-awesome-fragment-copy-button.js new file mode 100644 index 0000000000..7d06b348d6 --- /dev/null +++ b/docs/cfg/doxygen-awesome-fragment-copy-button.js @@ -0,0 +1,85 @@ +/** + +Doxygen Awesome +https://github.com/jothepro/doxygen-awesome-css + +MIT License + +Copyright (c) 2022 jothepro + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + +class DoxygenAwesomeFragmentCopyButton extends HTMLElement { + constructor() { + super(); + this.onclick=this.copyContent + } + static title = "Copy to clipboard" + static copyIcon = `` + static successIcon = `` + static successDuration = 980 + static init() { + $(function() { + $(document).ready(function() { + if(navigator.clipboard) { + const fragments = document.getElementsByClassName("fragment") + for(const fragment of fragments) { + const fragmentWrapper = document.createElement("div") + fragmentWrapper.className = "doxygen-awesome-fragment-wrapper" + const fragmentCopyButton = document.createElement("doxygen-awesome-fragment-copy-button") + fragmentCopyButton.innerHTML = DoxygenAwesomeFragmentCopyButton.copyIcon + fragmentCopyButton.title = DoxygenAwesomeFragmentCopyButton.title + + fragment.parentNode.replaceChild(fragmentWrapper, fragment) + fragmentWrapper.appendChild(fragment) + fragmentWrapper.appendChild(fragmentCopyButton) + + } + } + }) + }) + } + + + copyContent() { + const content = this.previousSibling.cloneNode(true) + // filter out line number from file listings + content.querySelectorAll(".lineno, .ttc").forEach((node) => { + node.remove() + }) + let textContent = content.textContent + // remove trailing newlines that appear in file listings + let numberOfTrailingNewlines = 0 + while(textContent.charAt(textContent.length - (numberOfTrailingNewlines + 1)) == '\n') { + numberOfTrailingNewlines++; + } + textContent = textContent.substring(0, textContent.length - numberOfTrailingNewlines) + navigator.clipboard.writeText(textContent); + this.classList.add("success") + this.innerHTML = DoxygenAwesomeFragmentCopyButton.successIcon + window.setTimeout(() => { + this.classList.remove("success") + this.innerHTML = DoxygenAwesomeFragmentCopyButton.copyIcon + }, DoxygenAwesomeFragmentCopyButton.successDuration); + } +} + +customElements.define("doxygen-awesome-fragment-copy-button", DoxygenAwesomeFragmentCopyButton) diff --git a/docs/cfg/doxygen-awesome-interactive-toc.js b/docs/cfg/doxygen-awesome-interactive-toc.js new file mode 100644 index 0000000000..b049f57331 --- /dev/null +++ b/docs/cfg/doxygen-awesome-interactive-toc.js @@ -0,0 +1,81 @@ +/** + +Doxygen Awesome +https://github.com/jothepro/doxygen-awesome-css + +MIT License + +Copyright (c) 2022 jothepro + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + +class DoxygenAwesomeInteractiveToc { + static topOffset = 38 + static hideMobileMenu = true + static headers = [] + + static init() { + window.addEventListener("load", () => { + let toc = document.querySelector(".contents > .toc") + if(toc) { + toc.classList.add("interactive") + if(!DoxygenAwesomeInteractiveToc.hideMobileMenu) { + toc.classList.add("open") + } + document.querySelector(".contents > .toc > h3")?.addEventListener("click", () => { + if(toc.classList.contains("open")) { + toc.classList.remove("open") + } else { + toc.classList.add("open") + } + }) + + document.querySelectorAll(".contents > .toc > ul a").forEach((node) => { + let id = node.getAttribute("href").substring(1) + DoxygenAwesomeInteractiveToc.headers.push({ + node: node, + headerNode: document.getElementById(id) + }) + + document.getElementById("doc-content")?.addEventListener("scroll", () => { + DoxygenAwesomeInteractiveToc.update() + }) + }) + DoxygenAwesomeInteractiveToc.update() + } + }) + } + + static update() { + let active = DoxygenAwesomeInteractiveToc.headers[0]?.node + DoxygenAwesomeInteractiveToc.headers.forEach((header) => { + let position = header.headerNode.getBoundingClientRect().top + header.node.classList.remove("active") + header.node.classList.remove("aboveActive") + if(position < DoxygenAwesomeInteractiveToc.topOffset) { + active = header.node + active?.classList.add("aboveActive") + } + }) + active?.classList.add("active") + active?.classList.remove("aboveActive") + } +} \ No newline at end of file diff --git a/docs/cfg/doxygen-awesome-paragraph-link.js b/docs/cfg/doxygen-awesome-paragraph-link.js new file mode 100644 index 0000000000..6424dbd429 --- /dev/null +++ b/docs/cfg/doxygen-awesome-paragraph-link.js @@ -0,0 +1,51 @@ +/** + +Doxygen Awesome +https://github.com/jothepro/doxygen-awesome-css + +MIT License + +Copyright (c) 2022 jothepro + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + +class DoxygenAwesomeParagraphLink { + // Icon from https://fonts.google.com/icons + // Licensed under the Apache 2.0 license: + // https://www.apache.org/licenses/LICENSE-2.0.html + static icon = `` + static title = "Permanent Link" + static init() { + $(function() { + $(document).ready(function() { + document.querySelectorAll(".contents a.anchor[id], .contents .groupheader > a[id]").forEach((node) => { + let anchorlink = document.createElement("a") + anchorlink.setAttribute("href", `#${node.getAttribute("id")}`) + anchorlink.setAttribute("title", DoxygenAwesomeParagraphLink.title) + anchorlink.classList.add("anchorlink") + node.classList.add("anchor") + anchorlink.innerHTML = DoxygenAwesomeParagraphLink.icon + node.parentElement.appendChild(anchorlink) + }) + }) + }) + } +} diff --git a/docs/cfg/doxygen-awesome-sidebar-only-darkmode-toggle.css b/docs/cfg/doxygen-awesome-sidebar-only-darkmode-toggle.css new file mode 100644 index 0000000000..b988b6f05e --- /dev/null +++ b/docs/cfg/doxygen-awesome-sidebar-only-darkmode-toggle.css @@ -0,0 +1,40 @@ + +/** + +Doxygen Awesome +https://github.com/jothepro/doxygen-awesome-css + +MIT License + +Copyright (c) 2021 jothepro + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + +@media screen and (min-width: 768px) { + + #MSearchBox { + width: calc(var(--side-nav-fixed-width) - calc(2 * var(--spacing-medium)) - var(--searchbar-height) - 1px); + } + + #MSearchField { + width: calc(var(--side-nav-fixed-width) - calc(2 * var(--spacing-medium)) - 66px - var(--searchbar-height)); + } +} diff --git a/docs/css/doxygen-awesome-sidebar-only.css b/docs/cfg/doxygen-awesome-sidebar-only.css similarity index 99% rename from docs/css/doxygen-awesome-sidebar-only.css rename to docs/cfg/doxygen-awesome-sidebar-only.css index 68e66be7a8..656ebbf437 100644 --- a/docs/css/doxygen-awesome-sidebar-only.css +++ b/docs/cfg/doxygen-awesome-sidebar-only.css @@ -27,7 +27,7 @@ SOFTWARE. */ - html { +html { /* side nav width. MUST be = `TREEVIEW_WIDTH`. * Make sure it is wide enough to contain the page title (logo + title + version) */ @@ -112,4 +112,4 @@ SOFTWARE. left: var(--spacing-medium) !important; right: auto; } -} \ No newline at end of file +} diff --git a/docs/css/doxygen-awesome.css b/docs/cfg/doxygen-awesome.css similarity index 99% rename from docs/css/doxygen-awesome.css rename to docs/cfg/doxygen-awesome.css index 652306a1b4..3bb7a29018 100644 --- a/docs/css/doxygen-awesome.css +++ b/docs/cfg/doxygen-awesome.css @@ -49,7 +49,7 @@ html { /* default spacings. Most components reference these values for spacing, to provide uniform spacing on the page. */ --spacing-small: 5px; --spacing-medium: 10px; - --spacing-large: 32px; + --spacing-large: 16px; /* default box shadow used for raising an element above the normal content. Used in dropdowns, search result, ... */ --box-shadow: 0 2px 8px 0 rgba(0,0,0,.075); @@ -185,7 +185,7 @@ html { html:not(.light-mode) { color-scheme: dark; - --primary-color: #42b983; + --primary-color: #1982d2; --primary-dark-color: #86a9c4; --primary-light-color: #4779ac; @@ -195,11 +195,11 @@ html { --menu-selected-background: rgba(0,0,0,.4); - --page-background-color: #0d1117; + --page-background-color: #1C1D1F; --page-foreground-color: #d2dbde; --page-secondary-foreground-color: #859399; - --separator-color: #242832; - --side-nav-background: #1a1d23; + --separator-color: #38393b; + --side-nav-background: #252628; --code-background: #2a2c2f; @@ -227,7 +227,7 @@ html { --invariant-color-dark: #76ce96; --invariant-color-darker: #cceed5; - --fragment-background: #242832; + --fragment-background: #282c34; --fragment-foreground: #dbe4eb; --fragment-keyword: #cc99cd; --fragment-keywordtype: #ab99cd; @@ -2402,4 +2402,4 @@ a.anchorlink:hover { h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.anchorlink { display: inline-block; -} \ No newline at end of file +} diff --git a/docs/cfg/header.html b/docs/cfg/header.html new file mode 100644 index 0000000000..761048f52c --- /dev/null +++ b/docs/cfg/header.html @@ -0,0 +1,93 @@ + + + + + + + + + $projectname: $title + $title + + + + + + + + + $treeview + $search + $mathjax + $darkmode + + $extrastylesheet + + + + + + + + + + + + + + + +
+ + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
$projectname $projectnumber +
+
$projectbrief
+ 		+
$projectbrief
+ 		$searchbox
$searchbox
+
+ + diff --git a/docs/theme.css b/docs/css/theme.css similarity index 100% rename from docs/theme.css rename to docs/css/theme.css diff --git a/docs/explorer-remote.png b/docs/img/explorer-remote.png similarity index 100% rename from docs/explorer-remote.png rename to docs/img/explorer-remote.png diff --git a/docs/flecs-add-component-flow.png b/docs/img/flecs-add-component-flow.png similarity index 100% rename from docs/flecs-add-component-flow.png rename to docs/img/flecs-add-component-flow.png diff --git a/docs/flecs-architecture-overview.png b/docs/img/flecs-architecture-overview.png similarity index 100% rename from docs/flecs-architecture-overview.png rename to docs/img/flecs-architecture-overview.png diff --git a/docs/flecs-quickstart-overview.png b/docs/img/flecs-quickstart-overview.png similarity index 100% rename from docs/flecs-quickstart-overview.png rename to docs/img/flecs-quickstart-overview.png diff --git a/docs/flecs-remove-component-flow.png b/docs/img/flecs-remove-component-flow.png similarity index 100% rename from docs/flecs-remove-component-flow.png rename to docs/img/flecs-remove-component-flow.png diff --git a/docs/flecs-staging-flow.png b/docs/img/flecs-staging-flow.png similarity index 100% rename from docs/flecs-staging-flow.png rename to docs/img/flecs-staging-flow.png diff --git a/index.html b/index.html index b7a6812ba4..4de69fa7b6 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +