Updated Vector Math page

CONTRIBUTING.md

@@ -388,39 +388,48 @@ You can use tabs to show different variations of the same content, for example i
 This is how you use tabs:
 ```html
 {% raw %}
-<div class="rr-tabs">
-  <div class="rr-tab" title="Tab 1 Title" default>
-    <div markdown="1">
-      Contents of Tab 1
-    </div>
-  </div>
-
-  <div class="rr-tab" title="Tab 2 Title">
-    <div markdown="1">
-      Contents of Tab 2
-    </div>
-  </div>
-</div>
+{% capture tab_1_content %}
+Contents of Tab 1
+{% endcapture %}
+
+{% capture tab_2_content %}
+Contents of Tab 2
+{% endcapture %}
+
+{% capture example_tabs %}
+{% include rr-tab.html title="Tab 1 Title" default=true content=tab_1_content %}
+{% include rr-tab.html title="Tab 2 Title" content=tab_2_content %}
+{% endcapture %}
+
+{% include rr-tabs.html group="example-group" tabs=example_tabs %}
 {% endraw %}
 ```
 
+Tab content now defaults to a vertically scrollable area with `max-height: 50vh`.
+The `maxHeight` argument is optional when you want to override that default, for example `maxHeight="50vw"`.
+
 Here is an example of what it will render:
 
 {% raw %}
-<div class="rr-tabs">
-<div class="rr-tab" title="C Code Example" default markdown="1">
+{% capture c_code_example %}
 
 # Heading
 **Default** - C Code would be here
 ```c
 sleep(1);
 ```  
-</div>
-
-<div class="rr-tab" title="Assembly Code" markdown="1">
-   **Assembly** code would be here
-</div>
-</div>
+{% endcapture %}
+
+{% capture asm_code_example %}
+**Assembly** code would be here
+{% endcapture %}
+
+{% capture code_example_tabs %}
+{% include rr-tab.html title="C Code Example" default=true content=c_code_example %}
+{% include rr-tab.html title="Assembly Code" content=asm_code_example %}
+{% endcapture %}
+
+{% include rr-tabs.html group="example-group" tabs=code_example_tabs %}
 {% endraw %}
 
 ---

_includes/rr-tab.html

@@ -0,0 +1,9 @@
+{% comment %}
+Render one rr-tab pane. The inner content is wrapped in a markdown-enabled div so
+pages can pass normal Markdown via a capture block.
+{% endcomment %}
+<div class="rr-tab" title="{{ include.title | escape }}"{% if include.default %} default{% endif %}>
+<div markdown="1">
+{{ include.content }}
+</div>
+</div>

_includes/rr-tabs.html

@@ -0,0 +1,17 @@
+{% comment %}
+Wrap one or more rr-tab includes in the DOM structure expected by the site tab JS.
+
+Usage:
+{% raw %}
+{% capture tab_items %}
+{% include rr-tab.html title="Types" default=true content=types_content %}
+{% include rr-tab.html title="Functions" content=functions_content %}
+{% endcapture %}
+{% include rr-tabs.html group="example-group" tabs=tab_items %}
+{% endraw %}
+{% endcomment %}
+<div class="rr-tabs"{% if include.group %} title="{{ include.group | escape }}"{% endif %}>
+<div style="max-height: {% if include.maxHeight %}{{ include.maxHeight | escape }}{% else %}50vh{% endif %}; overflow-y: auto;">
+{{ include.tabs }}
+</div>
+</div>

codex/skills/retroreversing-contributing/SKILL.md

@@ -5,6 +5,7 @@ Use this skill whenever you create or edit content in the `retroReversing` repo
 * Target audience is technical: assume programming literacy, don't assume reverse-engineering literacy.
 * Prefer linking to high-quality sources over duplicating other sites' content; still provide a short summary so the page reads coherently without clicking out.
 * Reference sources for technical claims and dates; Wikipedia only as a last resort.
+* Do not remove YouTube iframes and the reference information, they were added to the page for a reason, but you may move them to another section if required.
 
 ### Workflow (content edits)
 1) Decide fit: does this belong on RetroReversing (retro game dev + reverse engineering / digital archaeology; ~1980–2015)?
@@ -43,6 +44,8 @@ Use this skill whenever you create or edit content in the `retroReversing` repo
 8) Code examples:
    * Use TypeScript when it's runnable interactively in-browser; otherwise use Python for local scripts.
    * Use fenced code blocks with a language tag; use `nasm` for assembly highlighting.
+   * On concept-heavy reference pages, place code examples directly under the section they illustrate rather than collecting them in a separate generic example section.
+   * Only use a standalone "examples" section when the page is explicitly structured as a tutorial, walkthrough, or end-to-end implementation guide.
    * Mermaid diagrams: use sparingly; keep labels short; bold the first line in nodes when there's a title + explanation.
 
 ### Preferred Site Components (use instead of ad-hoc HTML)
@@ -52,7 +55,9 @@ Use this skill whenever you create or edit content in the `retroReversing` repo
 * Source-file callouts: `source-code-card.html` / `source-code-card-grid.html` when actually showing real file contents/symbols.
   * The `functions`, `variables`, and `lines` fields must be exact numeric counts from the file.
   * Omit the card if you can't provide exact counts yet.
-* Tabs: prefer the `rr-tabs` pattern shown in `CONTRIBUTING.md` when comparing variants (e.g., C vs ASM).
+* Tabs: prefer the `rr-tabs.html` and `rr-tab.html` includes shown in `CONTRIBUTING.md` when comparing variants (e.g., C vs ASM).
+  * `rr-tabs.html` defaults to a scrollable content area with `max-height: 50vh`.
+  * Use the optional `maxHeight` argument on `rr-tabs.html` when you need to override that default for a specific page.
 
 ### Images
 * Prefer linking externally hosted box-art (e.g. MobyGames) for "section about a specific game" figures when appropriate.
@@ -69,5 +74,13 @@ Use this skill whenever you create or edit content in the `retroReversing` repo
 * Use cspell blocks when needed:
   * `<!-- cspell:disable -->` / `<!-- cspell:enable -->`
 
+### Videos
+Make sure to have a sentence before any embedded youtube video explaining who created the video and what it contains, e.g:
+```markdown
+[PothOnProgramming](https://www.youtube.com/watch?v=b5TjpTBW6yw) offers a technical breakdown of the 2D dot product and its critical applications in game design and engine logic. The video highlights several fundamental applications of the dot product used in game development and vector math.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/b5TjpTBW6yw" title="2D Dot Product - Cool Things To Know" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+```
+
 ### Reminder
 * `CONTRIBUTING.md` is the source of truth for edge-cases and newer patterns; consult it if unsure.

pages/general/maths/Matrix.md

@@ -41,10 +41,7 @@ A Vector is basically a Matrix with just 1 row, you can find out more about Vect
 # Nintendo DS
 The Nintendo DS Operating System has a basic Matrix library defined by the header file **IrisMTX.h**. This file was leaked as part of the September 2020 "Platinum leak" as it is part of the Nintendo DS Boot ROM.
 
-<div class="rr-tabs" title="group1">
-  <div class="rr-tab" title="Types" default>
-
-<div  markdown="1" >
+{% capture matrix_types_tab %}
 Here are the types it provides to the developer:
 
 ```c
@@ -90,11 +87,9 @@ typedef union {
 typedef  vl Mtx44   vMtx44;
 ```
 
-</div>
-  </div>
+{% endcapture %}
 
-  <div class="rr-tab" title="Functions">
-<div  markdown="1" >
+{% capture matrix_functions_tab %}
 Here are a all of the functions it provides:
 
 ```c
@@ -292,7 +287,10 @@ void MTX_MultVecArraySR(  const Mtx   *mult, Vec *srcBasep, Vec *dstBasep, u32 c
 void MTX44_MultVecArraySR(const Mtx44 *mult, Vec *srcBasep, Vec *dstBasep, u32 count);
 ```
 
-</div>
-  </div>
-</div>
+{% endcapture %}
 
+{% capture matrix_tabs %}
+{% include rr-tab.html title="DS Matrix Types" default=true content=matrix_types_tab %}
+{% include rr-tab.html title="DS Martix Functions" content=matrix_functions_tab %}
+{% endcapture %}
+{% include rr-tabs.html group="group1" tabs=matrix_tabs %}

pages/general/maths/Quaternions.md

@@ -52,9 +52,7 @@ This is an excellent video which covers how to write your own Quaternion library
 # Nintendo DS
 The Nintendo DS Operating System has a small Quaternion helper library defined in the header file **IrisQUAT.h**. This file was leaked as part of the September 2020 "Platinum leak" as it is part of the Nintendo DS Boot ROM.
 
-<div class="rr-tabs" title="group1">
-  <div class="rr-tab" title="Types" default>
-    <div markdown="1" >
+{% capture quaternion_types_tab %}
 Here are the types it provides to the developer:
 
 ```c
@@ -78,11 +76,9 @@ typedef struct {
 typedef  vl Quat32    vQuat32;
 ```
 
-</div>
-  </div>
+{% endcapture %}
 
-  <div class="rr-tab" title="Functions">
-<div  markdown="1" >
+{% capture quaternion_functions_tab %}
 Here are all of the functions it provides:
 
 ```c
@@ -116,7 +112,10 @@ void QUAT_Lerp( Quat *p, Quat *q, Quat *d, s32 t);
 void QUAT_Slerp(Quat *p, Quat *q, Quat *d, s32 t);
 ```
 
-</div>
-  </div>
-</div>
+{% endcapture %}
 
+{% capture quaternion_tabs %}
+{% include rr-tab.html title="DS Types" default=true content=quaternion_types_tab %}
+{% include rr-tab.html title="DS Functions" content=quaternion_functions_tab %}
+{% endcapture %}
+{% include rr-tabs.html group="group1" tabs=quaternion_tabs %}