Experiment with code snippet tabs

docs/Systems.md

@@ -2,7 +2,9 @@
 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:
-
+<div class="tabbed">
+<ul>
+<li><b class="tab-title">C</b>
 ```c
 // System implementation
 void Move(ecs_iter_t *it) {
@@ -20,15 +22,6 @@ void Move(ecs_iter_t *it) {
 // System declaration
 ECS_SYSTEM(world, Move, EcsOnUpdate, Position, [in] Velocity);
 ```
-```cpp
-// System declaration
-flecs::system sys = world.system<Position, const Velocity>("Move")
-    .each([](Position& p, const Velocity &v) {
-        // Each is invoked for each entity
-        p.x += v.x;
-        p.y += v.y;
-    });
-```
 
 In C, a system can also be created with the `ecs_system_init` function / `ecs_system` shorthand which provides more flexibility. The same system can be created like this:
 
@@ -45,24 +38,54 @@ ecs_entity_t ecs_id(Move) = ecs_system(world, {
     .callback = Move
 })
 ```
+</li>
+<li><b class="tab-title">C++</b>
+```cpp
+// System declaration
+flecs::system sys = world.system<Position, const Velocity>("Move")
+    .each([](Position& p, const Velocity &v) {
+        // Each is invoked for each entity
+        p.x += v.x;
+        p.y += v.y;
+    });
+```
+</li>
+</ul>
+</div>
 
 To manually run a system, do:
-
+<div class="tabbed">
+<ul>
+<li><b class="tab-title">C</b>
 ```c
 ecs_run(world, ecs_id(Move), 0.0 /* delta_time */, NULL /* param */)
 ```
+</li>
+<li><b class="tab-title">C++</b>
 ```cpp
+flecs::system sys = ...;
 sys.run();
 ```
+</li>
+</ul>
+</div>
 
 By default systems are registered for a pipeline which orders systems by their "phase" (`EcsOnUpdate`). To run all systems in a pipeline, do:
-
+<div class="tabbed">
+<ul>
+<li><b class="tab-title">C</b>
 ```c
 ecs_progress(world, 0 /* delta_time */);
 ```
+</li>
+<li><b class="tab-title">C++</b>
 ```cpp
+flecs::world world = ...;
 world.progress();
 ```
+</li>
+</ul>
+</div>
 
 To run systems as part of a pipeline, applications must build Flecs with the `FLECS_PIPELINE` addon (enabled by default). To prevent a system from being registered as part of a pipeline, specify 0 as phase:
 

docs/cfg/Doxyfile

@@ -1381,6 +1381,7 @@ HTML_EXTRA_FILES       = docs/cfg/doxygen-awesome-darkmode-toggle.js \
                          docs/cfg/doxygen-awesome-paragraph-link.js \
                          docs/cfg/doxygen-awesome-interactive-toc.js \
                          docs/cfg/doxygen-awesome-tabs.js \
+                         docs/cfg/flecs-snippet-tabs.js \
                          docs/img/logo_small_dark.png
 
 # The HTML_COLORSTYLE tag can be used to specify if the generated HTML output

docs/cfg/doxygen-awesome-tabs.js

@@ -87,4 +87,4 @@ class DoxygenAwesomeTabs {
     static resize(tabbed) {
 
     }
-}
+}

docs/cfg/flecs-snippet-tabs.js

@@ -0,0 +1,80 @@
+/**
+
+Doxygen Awesome
+https://github.com/jothepro/doxygen-awesome-css
+
+MIT License
+
+Copyright (c) 2023 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.
+
+*/
+
+// Heavily modified version of DoxygenAwesomeTabs
+// https://github.com/jothepro/doxygen-awesome-css
+// doxygen-awesome-tabs.js
+class FlecsSnippetTabs {
+    static init() {
+        window.addEventListener("load", () => {
+            document.querySelectorAll(".tabbed:not(:empty)").forEach((tabbed, tabbedIndex) => {
+                let tabLinkList = [];
+                tabbed.querySelectorAll("li").forEach((tab, tabIndex) => {
+                    tab.id = "tab_" + tabbedIndex + "_" + tabIndex;
+
+                    let header = tab.querySelector(".tab-title");
+                    header.title = header.textContent;
+
+                    let tabLink = document.createElement("button");
+                    tabLink.classList.add("tab-button");
+                    tabLink.appendChild(header);
+                    tabLink.addEventListener("click", () => {
+                        tabbed.querySelectorAll("li").forEach((tab) => {
+                            tab.classList.remove("selected");
+                        });
+                        tabLinkList.forEach((tabLink) => {
+                            tabLink.classList.remove("active");
+                        });
+                        tab.classList.add("selected");
+                        tabLink.classList.add("active");
+                    });
+
+                    tabLinkList.push(tabLink);
+
+                    if(tabIndex == 0) {
+                        tab.classList.add("selected");
+                        tabLink.classList.add("active");
+                    }
+                });
+
+                let tabsOverview = document.createElement("div");
+                tabsOverview.classList.add("tabs-overview");
+                tabLinkList.forEach((tabLink) => {
+                    tabsOverview.appendChild(tabLink);
+                });
+
+                let tabsOverviewContainer = document.createElement("div");
+                tabsOverviewContainer.classList.add("tabs-overview-container");
+                tabsOverviewContainer.appendChild(tabsOverview);
+
+                tabbed.before(tabsOverviewContainer);
+            });
+        });
+    }
+}

docs/cfg/header.html

@@ -44,12 +44,14 @@
   <script type="text/javascript" src="$relpath^doxygen-awesome-paragraph-link.js"></script>
   <script type="text/javascript" src="$relpath^doxygen-awesome-interactive-toc.js"></script>
   <script type="text/javascript" src="$relpath^doxygen-awesome-tabs.js"></script>
+  <script type="text/javascript" src="$relpath^flecs-snippet-tabs.js"></script>
   <script type="text/javascript">
       DoxygenAwesomeDarkModeToggle.init()
       DoxygenAwesomeFragmentCopyButton.init()
       DoxygenAwesomeParagraphLink.init()
       DoxygenAwesomeInteractiveToc.init()
-      DoxygenAwesomeTabs.init()
+      // DoxygenAwesomeTabs.init()
+      FlecsSnippetTabs.init()
   </script>
 </head>
 <body>