Skip to content

Modernize docgen: Bootstrap 5.3.8, drop jQuery/Font Awesome, add centralized mega menu #863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stevespringett merged 6 commits into from
Mar 10, 2026
+1,745 −623
Merged

Modernize docgen: Bootstrap 5.3.8, drop jQuery/Font Awesome, add centralized mega menu #863

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
58441e3
Updated documentation generation
stevespringett Mar 10, 2026
a085fce
Updated documentation generation
stevespringett Mar 10, 2026
18c651a
Fixed potential security issue
stevespringett Mar 10, 2026
1badf6b
Fixed potential security issue
stevespringett Mar 10, 2026
5aef9ae
Potential fix for code scanning alert no. 39: Uncontrolled data used …
stevespringett Mar 10, 2026
ca40799
Merge branch 'master' into doc-updates
stevespringett Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions docgen/json/gen.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ SCHEMA_PATH="$(realpath "$THIS_PATH/../../schema")"
DOCS_PATH="$THIS_PATH/docs"
TEMPLATES_PATH="$THIS_PATH/templates"

# Centralized header injection
source "$THIS_PATH/../static/inject-header.sh"


# --

Expand Down Expand Up @@ -71,6 +74,8 @@ generate () {
sed -i -e "s/\${quotedTitle}/\"$title\"/g" "$OUT_FILE"
sed -i -e "s/\${title}/$title/g" "$OUT_FILE"
sed -i -e "s/\${version}/$version/g" "$OUT_FILE"

inject_header "$OUT_FILE" "$version" "json"
}


Expand Down
58 changes: 10 additions & 48 deletions docgen/json/templates/cyclonedx/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,54 +18,15 @@
<meta property="og:type" content="website" />
<meta property="og:image" content="https://cyclonedx.org/images/CycloneDX-Social-Card.png" />
<link href="/favicon.ico" rel="shortcut icon" type="image/ico" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<link rel="stylesheet" type="text/css" href="schema_doc.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.js" integrity="sha512-docBEeq28CCaXCXN7cINkyQs0pRszdQsVBFWUd+pLNlEk3LDlSDDtN7i1H+nTB8tshJPQHS0yu0GW9YGFd/CRg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js" integrity="sha512-7rusk8kGPFynZWu26OKbTeI+QPoYchtxsmPeBqkHIEXJxeun4yJ4ISYe7C6sz9wdxeE1Gk3VxsIWgCZTc+vX3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="schema_doc.min.js"></script>
<!-- mega menu CSS is injected by inject-header.sh -->
</head>
<body class="blue" data-spy="scroll" data-target=".js-scrollspy" onload="anchorOnLoad();" id="root">
<body class="blue" data-bs-spy="scroll" data-bs-target=".js-scrollspy" onload="anchorOnLoad();" id="root">

<nav class="navbar fixed-top navbar-expand-sm navbar-inverse">
<a href="/" class="navbar-brand site-header__logo"><img src="https://cyclonedx.org/images/logo-all-white.svg" height="48" width="276"></img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
v${version} (JSON)
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="/docs/1.7/json/">v1.7 (JSON)</a></li>
<li><a class="dropdown-item" href="/docs/1.6/json/">v1.6 (JSON)</a></li>
<li><a class="dropdown-item" href="/docs/1.5/json/">v1.5 (JSON)</a></li>
<li><a class="dropdown-item" href="/docs/1.4/json/">v1.4 (JSON)</a></li>
<li><a class="dropdown-item" href="/docs/1.3/json/">v1.3 (JSON)</a></li>
<li><a class="dropdown-item" href="/docs/1.2/json/">v1.2 (JSON)</a></li>
<li><hr class="dropdown-divider"/></li>
<li><a class="dropdown-item" href="/docs/1.7/xml/">v1.7 (XML)</a></li>
<li><a class="dropdown-item" href="/docs/1.6/xml/">v1.6 (XML)</a></li>
<li><a class="dropdown-item" href="/docs/1.5/xml/">v1.5 (XML)</a></li>
<li><a class="dropdown-item" href="/docs/1.4/xml/">v1.4 (XML)</a></li>
<li><a class="dropdown-item" href="/docs/1.3/xml/">v1.3 (XML)</a></li>
<li><a class="dropdown-item" href="/docs/1.2/xml/">v1.2 (XML)</a></li>
<li><a class="dropdown-item" href="/docs/1.1/xml/">v1.1 (XML)</a></li>
<li><a class="dropdown-item" href="/docs/1.0/xml/">v1.0 (XML)</a></li>
<li><hr class="dropdown-divider"/></li>
<li><a class="dropdown-item" href="/docs/1.7/proto/">v1.7 (Protobuf)</a></li>
<li><a class="dropdown-item" href="/docs/1.6/proto/">v1.6 (Protobuf)</a></li>
<li><a class="dropdown-item" href="/docs/1.5/proto/">v1.5 (Protobuf)</a></li>
<li><a class="dropdown-item" href="/docs/1.4/proto/">v1.4 (Protobuf)</a></li>
<li><a class="dropdown-item" href="/docs/1.3/proto/">v1.3 (Protobuf)</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- MEGA_MENU_HEADER -->


<div class="container-fluid" style="margin-top:110px; margin-bottom:3rem">
Expand All @@ -75,9 +36,9 @@ <h1>${title}</h1>
<h1>{{ title }}</h1>
{%- endif -%}
{%- if config.expand_buttons -%}
<div class="text-right">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapse:not(.show)" aria-expanded="false">Expand all</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapse.show" aria-expanded="false">Collapse all</button>
<div class="text-end">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".collapse:not(.show)" aria-expanded="false">Expand all</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".collapse.show" aria-expanded="false">Collapse all</button>
</div>
{%- endif -%}

Expand All @@ -95,6 +56,7 @@ <h1>{{ title }}</h1>
</footer>
-->

<img referrerpolicy="no-referrer-when-downgrade" src="https://static.scarf.sh/a.png?x-pxid=ce3b481f-33a5-4c88-aaf1-00c8805f24d9" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- mega menu JS is injected by inject-header.sh -->
</body>
</html>
10 changes: 5 additions & 5 deletions docgen/json/templates/cyclonedx/content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@

{# Display type #}
{%- if not schema is combining -%}
<span class="badge badge-dark value-type">Type: {{ type_name }}</span>
<span class="badge text-bg-dark value-type">Type: {{ type_name }}</span>
{%- endif -%}

{%- if schema.format -%}
<span class="badge badge-info value-type">Format: {{ schema.format }}</span>
<span class="badge text-bg-info value-type">Format: {{ schema.format }}</span>
{%- endif -%}

{# Display default #}
{%- set default_value = schema.default_value -%}
{%- if default_value -%}
{{ " " }}<span class="badge badge-success default-value">Default: {{ default_value }}</span>
{{ " " }}<span class="badge text-bg-success default-value">Default: {{ default_value }}</span>
{%- endif -%}
<br/>

Expand All @@ -42,7 +42,7 @@
{{ content(schema.refers_to_merged, True) }}
{%- else -%}
{%- if schema.explicit_no_additional_properties -%}
{{ " " }}<span class="badge badge-info no-additional">No Additional Properties</span>
{{ " " }}<span class="badge text-bg-info no-additional">No Additional Properties</span>
{%- endif -%}

{# Combining: allOf, anyOf, oneOf, not #}
Expand All @@ -64,7 +64,7 @@
<div class="enum-value" id="{{ schema.kw_enum.html_id }}">
<h4>Must be one of:</h4>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<thead class="table-dark">
<tr>
<th class="text-nowrap" scope="col">Name</th>
<th scope="col">Description</th>
Expand Down
56 changes: 36 additions & 20 deletions docgen/json/templates/cyclonedx/schema_doc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,22 @@ body {
padding: 0;
}
.navbar {
height: 90px;
min-height: 90px;
padding: 0;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse {
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar-dark .navbar-nav>.open>a,
.navbar-dark .navbar-nav>.open>a:focus,
.navbar-dark .navbar-nav>.open>a:hover,
.navbar-dark {
background-image: linear-gradient(269.12deg, rgba(232, 52, 82, 1) 0%, rgba(136, 38, 125, 1) 51.26%, rgba(52, 57, 175, 1) 100%);
}
.navbar-brand, .navbar-fixed-top {
.navbar-brand, .fixed-top {
padding: 0 30px 0 30px;
}
.navbar-inverse .navbar-nav>li>a {
.navbar-dark .navbar-nav>li>a {
color: #ffffff;
}
.site-header__logo img {
Expand All @@ -26,8 +29,9 @@ body {
.version-selector {
font-size: 1.2rem
}
.table .thead-dark th {
.table .table-dark th {
background-color: #323550;
color: #ffffff;
}
.container {
margin-right: auto;
Expand Down Expand Up @@ -73,15 +77,24 @@ ul .dropdown-menu li {
}
.card {
border-radius: 0;
--bs-card-border-color: rgba(0, 0, 0, 0.125);
}
.accordion + .accordion .card {
margin-top: -1px;
}
.card-header {
padding: 0;
}
.card-header .fa {
.card-header .btn .bi {
display: inline-block;
transition: .3s transform ease-in-out;
-webkit-text-stroke: 2px;
}
.card-header .btn[aria-expanded="true"] .bi {
transform: rotate(90deg);
}
.card-header .collapsed .fa {
.card-header .btn[aria-expanded="false"] .bi,
.card-header .btn.collapsed .bi {
transform: rotate(0deg);
}
.btn.btn-link {
Expand Down Expand Up @@ -136,52 +149,55 @@ ul .dropdown-menu li {
content: '- Read Less';
}
.badge {
color: #222222;
color: #222222 !important;
padding: .1em .4em .2em;
margin-right: .2em;
font-weight: normal;
font-size: 0.9rem;
border-radius: 0;
}
.badge.required-property {
background-color: rgba(255,137,29,0.3);
background-color: rgba(255,137,29,0.3) !important;
border: 1px solid #FF7F0B;
}
.badge.value-type {
background-color: rgba(174,206,229,0.3);
background-color: rgba(174,206,229,0.3) !important;
border: 1px solid #5C9CCB;
}
.badge.default-value {
background-color: rgba(175,228,191,0.3);
background-color: rgba(175,228,191,0.3) !important;
border: 1px solid #73D08F;
}
.badge.example {
background-color: rgba(235,202,255,0.3);
background-color: rgba(235,202,255,0.3) !important;
border: 1px solid #DA9FFF;
}
.badge.deprecated-property {
background-color: rgba(255,95,95,0.3);
background-color: rgba(255,95,95,0.3) !important;
border: 1px solid #FF3333;
}
.badge.no-additional {
background-color: rgba(255,82,174,0.3);
background-color: rgba(255,82,174,0.3) !important;
border: 1px solid #FF33A0;
}
.badge.pattern-property {
background-color: rgba(235,229,168,0.3);
background-color: rgba(235,229,168,0.3) !important;
border: 1px solid #FFEA1C;
}
.accordion div.card:only-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.examples {
padding: 1rem !important;
padding: 0 !important;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.examples pre {
margin-bottom: 0;
padding: 1rem 1.5rem;
}
.highlight.jumbotron {
padding: 1rem !important;
padding: 1rem 1.5rem !important;
}
.generated-by-footer {
margin-top: 1em;
Expand Down
68 changes: 38 additions & 30 deletions docgen/json/templates/cyclonedx/schema_doc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
$(document).on('click', 'a[href^="#"]', function(event) {
event.preventDefault();
history.pushState({}, '', this.href);
document.addEventListener('click', function(event) {
var anchor = event.target.closest('a[href^="#"]');
if (anchor) {
event.preventDefault();
history.pushState({}, '', anchor.href);
}
});

function flashElement(elementId) {
// $( "#" + elementId ).fadeOut(100).fadeIn(200).fadeOut(100).fadeIn(500);
myElement = document.getElementById(elementId);
myElement.classList.add("jsfh-animated-property");
setTimeout(function() {
myElement.classList.remove("jsfh-animated-property");
}, 1000);
var myElement = document.getElementById(elementId);
if (myElement) {
myElement.classList.add("jsfh-animated-property");
setTimeout(function() {
myElement.classList.remove("jsfh-animated-property");
}, 1000);
}
}

function setAnchor(anchorLinkDestination) {
Expand All @@ -19,7 +23,7 @@ function setAnchor(anchorLinkDestination) {

function anchorOnLoad() {
// Added to onload on body, checks if there is an anchor link and if so, expand
let linkTarget = decodeURIComponent(window.location.hash.split("?")[0].split("&")[0]);
var linkTarget = decodeURIComponent(window.location.hash.split("?")[0].split("&")[0]);
if (linkTarget[0] === "#") {
linkTarget = linkTarget.substr(1);
}
Expand All @@ -30,31 +34,35 @@ function anchorOnLoad() {
}

function anchorLink(linkTarget) {
const target = $( "#" + linkTarget );
// Find the targeted element to expand and all its parents that can be expanded
target.parents().addBack().filter(".collapse:not(.show), .tab-pane, [role='tab']").each(
function(index) {
if($( this ).hasClass("collapse")) {
$( this ).collapse("show");
} else if ($( this ).hasClass("tab-pane")) {
// We have the pane and not the tab itself, find the tab
const tabToShow = $( "a[href='#" + $( this ).attr("id") + "']" );
if (tabToShow) {
tabToShow.tab("show");
}
} else if ($( this ).attr("role") === "tab") {
// The tab is not a parent of underlying elements, the tab pane is
// However, it can still be linked directly
$( this ).tab("show");
var target = document.getElementById(linkTarget);
if (!target) return;

// Find the targeted element and all its parents that can be expanded
var element = target;
while (element) {
// Expand collapsed sections
if (element.classList.contains("collapse") && !element.classList.contains("show")) {
var bsCollapse = new bootstrap.Collapse(element, { toggle: true });
}
// Activate tab panes
if (element.classList.contains("tab-pane")) {
var tabTrigger = document.querySelector('a[href="#' + element.id + '"]');
if (tabTrigger) {
var bsTab = new bootstrap.Tab(tabTrigger);
bsTab.show();
}
}
);
// Handle direct tab links
if (element.getAttribute("role") === "tab") {
var bsTab = new bootstrap.Tab(element);
bsTab.show();
}
element = element.parentElement;
}

// Wait a little so the user has time to see the page scroll
// Or maybe it is to be sure everything is expanded before scrolling and I was not able to bind to the bootstrap
// events in a way that works all the time, we may never know
setTimeout(function() {
let targetElement = document.getElementById(linkTarget);
var targetElement = document.getElementById(linkTarget);
if (targetElement) {
targetElement.scrollIntoView({ block: "center", behavior:"smooth" });
// Flash the element so that the user notices where the link points to
Expand Down
10 changes: 9 additions & 1 deletion docgen/json/templates/cyclonedx/schema_doc.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions docgen/json/templates/cyclonedx/section_array.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{{ restriction("All items must be unique", "unique-items", schema.kw_unique_items.html_id) }}
{%- endif -%}
{%- if not schema.array_additional_items -%}
{{ " " }}<span class="badge badge-info no-additional">No Additional Items</span>
{{ " " }}<span class="badge text-bg-info no-additional">No Additional Items</span>
{%- endif -%}
{%- if schema.array_items_def -%}
<h4>Each item of this array must be:</h4>
Expand All @@ -24,7 +24,7 @@ <h4>Tuple Validation</h4>
<h5>Item at {{ loop.index }} must be:</h5>
<div class="card">
<div class="card-body items-definition" id="{{ item.html_id }}">
<i class="fa fa-chevron-down pull-right"></i>
<i class="bi bi-chevron-down float-end"></i>
{{ content(item) }}
</div>
</div>
Expand Down
Loading