-
{%- assign docs_for_release = site.data.documentation[underscored_version].docs | sort: "rank" -%} + + +
{%- for doc in docs_for_release -%} {%- assign first1 = doc.path | slice: 0, 1 -%} {%- assign first7 = doc.path | slice: 0, 7 -%} @@ -49,12 +73,21 @@

{{ version }} Documentation

{%- assign linkTemplate = "/documentation/" | append: version | append: "/" | append: doc.path | absolute_url -%} {%- endif -%}
-
-
-

{{ doc.title }}

+
+
+

+ {{ doc.title }} +

+{%- assign primary_tag = doc.tags[0] -%} +
{{ doc.description }} +
+{%- for tag in doc.tags -%} + {{ tag }} +{%- endfor -%} +
@@ -63,3 +96,4 @@

diff --git a/_sass/kroxylicious.scss b/_sass/kroxylicious.scss index 48e1ddf..88ba940 100644 --- a/_sass/kroxylicious.scss +++ b/_sass/kroxylicious.scss @@ -354,3 +354,87 @@ b.conum * { margin-top: calc(var(--#{$prefix}card-title-spacer-y) / 2); margin-bottom: calc(var(--#{$prefix}card-title-spacer-y) / 2); } + +// Documentation page filtering +.doc-filters { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + padding: 1rem; + background-color: rgba($kroxy-light, 0.3); + border-radius: 0.375rem; + + .btn { + transition: all 0.2s ease-in-out; + + &.active { + background-color: $kroxy-dark-green; + color: $white; + border-color: $kroxy-dark-green; + } + + &:hover:not(.active) { + background-color: rgba($kroxy-light-green, 0.1); + } + + .bi { + font-size: 0.9rem; + } + + .badge { + background-color: rgba($white, 0.3); + color: currentColor; + font-weight: normal; + margin-left: 0.25rem; + } + } +} + +.col.hidden { + display: none; +} + +.doc-card { + transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; + + .card-header { + border-bottom: 3px solid transparent; + } + + // Visual category hints + &.doctag-proxy .card-header { + border-bottom-color: rgba($kroxy-light-green, 0.3); + } + + &.doctag-filter .card-header { + border-bottom-color: rgba($kroxy-mid-green, 0.3); + } + + &.doctag-kubernetes .card-header { + border-bottom-color: rgba($kroxy-dark-green, 0.3); + } + + &.doctag-developer .card-header { + border-bottom-color: rgba($code-color, 0.3); + } + + &.doctag-security .card-header { + border-bottom-color: rgba($kroxy-light-green, 0.3); + } + + &.doctag-governance .card-header { + border-bottom-color: rgba($kroxy-mid-green, 0.3); + } + + .badge { + font-size: 0.7rem; + padding: 0.25rem 0.5rem; + text-transform: lowercase; + } + + // Icon in card header + .card-header .bi { + font-size: 1.5rem; + opacity: 0.4; + } +} diff --git a/assets/scripts/doc-filter.js b/assets/scripts/doc-filter.js new file mode 100644 index 0000000..69ee957 --- /dev/null +++ b/assets/scripts/doc-filter.js @@ -0,0 +1,54 @@ +/** + * Documentation page filter functionality + * Provides client-side filtering of documentation cards by category + */ +(function() { + 'use strict'; + + // Wait for DOM to be ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + + function init() { + const filters = document.querySelectorAll('.doc-filters button[data-filter]'); + const cards = document.querySelectorAll('.doc-card'); + + if (filters.length === 0 || cards.length === 0) { + return; // Not on a documentation page + } + + filters.forEach(button => { + button.addEventListener('click', function() { + const filter = this.getAttribute('data-filter'); + applyFilter(filter, filters, cards); + }); + }); + } + + function applyFilter(filter, filterButtons, cards) { + // Update active button + filterButtons.forEach(btn => { + if (btn.getAttribute('data-filter') === filter) { + btn.classList.add('active'); + } else { + btn.classList.remove('active'); + } + }); + + // Filter cards + cards.forEach(card => { + const categories = card.getAttribute('data-categories') || ''; + const shouldShow = filter === 'all' || categories.includes(filter); + const colWrapper = card.closest('.col'); + + if (shouldShow) { + if (colWrapper) colWrapper.classList.remove('hidden'); + } else { + if (colWrapper) colWrapper.classList.add('hidden'); + } + }); + } +})();