Skip to content

Commit

Permalink
Merge branch 'main' into event-hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
fabianrbz authored Dec 19, 2024
2 parents a6f29e0 + f09ea30 commit aa63e2a
Show file tree
Hide file tree
Showing 621 changed files with 7,967 additions and 933 deletions.
3 changes: 3 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "app/.repos/kong-plugins"]
path = app/.repos/kong-plugins
url = https://github.com/Kong/docs-plugin-toolkit.git
14 changes: 7 additions & 7 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
GEM
remote: https://rubygems.org/
specs:
activesupport (8.0.0)
activesupport (8.0.1)
base64
benchmark (>= 0.3)
bigdecimal
Expand Down Expand Up @@ -80,13 +80,13 @@ GEM
listen (3.9.0)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
logger (1.6.1)
logger (1.6.3)
mercenary (0.4.0)
method_source (1.1.0)
mini_portile2 (2.8.8)
minitest (5.25.1)
minitest (5.25.4)
nio4r (2.7.4)
nokogiri (1.17.0)
nokogiri (1.17.2)
mini_portile2 (~> 2.8.2)
racc (~> 1.4)
parallel (1.26.3)
Expand Down Expand Up @@ -116,7 +116,7 @@ GEM
regexp_parser (2.9.3)
rexml (3.3.9)
rouge (4.5.1)
rubocop (1.69.1)
rubocop (1.69.2)
json (~> 2.3)
language_server-protocol (>= 3.17.0)
parallel (~> 1.10)
Expand All @@ -133,13 +133,13 @@ GEM
sass-embedded (1.75.0)
google-protobuf (>= 3.25, < 5.0)
rake (>= 13.0.0)
securerandom (0.3.1)
securerandom (0.3.2)
terminal-table (3.0.2)
unicode-display_width (>= 1.1.1, < 3)
tzinfo (2.0.6)
concurrent-ruby (~> 1.0)
unicode-display_width (2.6.0)
uri (1.0.1)
uri (1.0.2)
vite_ruby (3.5.0)
dry-cli (>= 0.7, < 2)
rack-proxy (~> 0.6, >= 0.6.1)
Expand Down
9 changes: 8 additions & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ RUBY_VERSION := "$(shell ruby -v)"
RUBY_VERSION_REQUIRED := "$(shell cat .ruby-version)"
RUBY_MATCH := $(shell [[ "$(shell ruby -v)" =~ "ruby $(shell cat .ruby-version)" ]] && echo matched)

.PHONY: ruby-version-check
.PHONY: ruby-version-check scaffold-plugin
ruby-version-check:
ifndef RUBY_MATCH
$(error ruby $(RUBY_VERSION_REQUIRED) is required. Found $(RUBY_VERSION). $(newline)Run `rbenv install $(RUBY_VERSION_REQUIRED)`)$(newline)
Expand Down Expand Up @@ -48,3 +48,10 @@ kill-ports:
vale:
-git diff --name-only --diff-filter=d HEAD | grep '\.md$$' | xargs vale

scaffold-plugin:
@if [ -z "$(PLUGIN)" ]; then \
echo "Error: Plugin name is required. Usage: make scaffold-plugin PLUGIN=<plugin-name>"; \
exit 1; \
fi
cd tools/scaffold-plugin && npm ci
node tools/scaffold-plugin/index.js $(PLUGIN)
1 change: 1 addition & 0 deletions app/.repos/kong-plugins
Submodule kong-plugins added at 0000e4
2 changes: 0 additions & 2 deletions app/_assets/entrypoints/api_spec.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { createApp } from "vue";
import APISpec from "~/javascripts/apps/APISpec.vue";
import { BindOncePlugin } from "vue-bind-once";
import "@kong/spec-renderer-dev/dist/style.css";

if (document.getElementById("api-spec") !== null) {
const app = createApp(APISpec);
app.use(BindOncePlugin);
app.mount("#api-spec");
}
26 changes: 13 additions & 13 deletions app/_assets/entrypoints/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@
// and link to the scripts and stylesheets, and let Vite transform it.

// Example: Import a stylesheet in <sourceCodeDir>/index.css
import '~/stylesheets/index.css'
import "~/stylesheets/index.css";

import EntityExample from '@/javascripts/components/entity_example';
import PluginConfigExample from '@/javascripts/components/plugin_config_example';
import Tabs from '@/javascripts/components/tabs';
import '@/javascripts/accordion';
import '@/javascripts/anchor_links';
import '@/javascripts/copy_code_snippet';
import '@/javascripts/how_to';
import '@/javascripts/mode';
import '@/javascripts/releases_dropdown';
import '@/javascripts/toc';
import EntityExample from "@/javascripts/components/entity_example";
import PluginConfigExample from "@/javascripts/components/plugin_config_example";
import Tabs from "@/javascripts/components/tabs";
import "@/javascripts/accordion";
import "@/javascripts/anchor_links";
import "@/javascripts/copy_code_snippet";
import "@/javascripts/how_to";
import "@/javascripts/mode";
import "@/javascripts/releases_dropdown";
import "@/javascripts/toc";

document.addEventListener('DOMContentLoaded', function () {
document.addEventListener("DOMContentLoaded", function () {
new EntityExample();
new PluginConfigExample();
new Tabs();
});
});
83 changes: 83 additions & 0 deletions app/_assets/entrypoints/hub.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
class Hub {
constructor() {
this.filters = document.getElementById("filters");
this.plugins = document.querySelectorAll("[data-card='plugin']");

this.deploymentTopologies = this.filters.querySelectorAll(
'input[name="deployment-topology"]'
);
this.categories = this.filters.querySelectorAll('input[name="category"]');

this.deploymentValues = [];
this.categoryValues = [];

this.addEventListeners();
}

addEventListeners() {
const checkboxes = [...this.deploymentTopologies, ...this.categories];
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => this.onChange());
});
}

onChange() {
this.deploymentValues = this.getValues(this.deploymentTopologies);
this.categoryValues = this.getValues(this.categories);

this.filterPlugins();
}

getValues(filterGroup) {
return Array.from(filterGroup)
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.value);
}

filterPlugins() {
this.plugins.forEach((plugin) => {
const matchesDeploymentTopology = this.filterBy(
plugin,
this.deploymentTopologies,
"deploymentTopology"
);
const matchesCategory = this.filterBy(
plugin,
this.categories,
"category"
);

const showPlugin = matchesDeploymentTopology && matchesCategory;

plugin.classList.toggle("hidden", !showPlugin);
});

this.toggleCategoriesIfEmpty();
}

toggleCategoriesIfEmpty() {
this.categories.forEach((cat) => {
const category = document.getElementById(cat.value);
const showCategory = category.querySelectorAll(
'[data-card="plugin"]:not(.hidden)'
).length;

category.classList.toggle("hidden", !showCategory);
});
}

filterBy(plugin, filterGroup, dataAttribute) {
const checkedValues = Array.from(filterGroup)
.filter((checkbox) => checkbox.checked)
.map((checkbox) => checkbox.value);

const dataValues = plugin.dataset[dataAttribute]?.split(",") || [];
return (
checkedValues.length === 0 ||
checkedValues.some((value) => dataValues.includes(value))
);
}
}

// Initialize the Hub once the DOM is fully loaded
document.addEventListener("DOMContentLoaded", () => new Hub());
8 changes: 8 additions & 0 deletions app/_assets/entrypoints/plugin_schema.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { createApp } from "vue";
import PluginSchema from "~/javascripts/apps/PluginSchema.vue";
import "@kong/spec-renderer-dev/dist/style.css";

if (document.getElementById("schema") !== null) {
const app = createApp(PluginSchema);
app.mount("#schema");
}
16 changes: 16 additions & 0 deletions app/_assets/javascripts/apps/PluginSchema.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<div>
<SchemaRenderer
v-if="schema"
:schema="schema"
:exampleVisible="false"
:headerVisible="false"
/>
</div>
</template>

<script setup>
import { SchemaRenderer } from '@kong/spec-renderer-dev'
const schema = window.schema;
</script>
53 changes: 26 additions & 27 deletions app/_assets/javascripts/components/tabs.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
class TabsComponent {
constructor(elem) {
this.elem = elem;
this.tablistNode = this.elem.querySelector('[role=tablist]');
this.activeTabClasses = ['text-primary', 'font-semibold', 'border-brand'];
this.inactiveTabClasses = ['border-transparent'];
this.tablistNode = this.elem.querySelector("[role=tablist]");
this.activeTabClasses = ["tab-button__horizontal--active"];

this.tabs = Array.from(this.tablistNode.querySelectorAll('[role=tab]'));
this.tabs = Array.from(this.tablistNode.querySelectorAll("[role=tab]"));
this.firstTab = this.tabs[0];
this.lastTab = this.tabs[this.tabs.length - 1];

this.tabs.forEach((tab) => {
tab.addEventListener('keydown', this.onKeydown.bind(this));
tab.addEventListener('click', this.onClick.bind(this));
tab.addEventListener("keydown", this.onKeydown.bind(this));
tab.addEventListener("click", this.onClick.bind(this));
});
// Listen for the custom event to update tabs
document.addEventListener('tabSelected', this.onTabSelected.bind(this));
document.addEventListener("tabSelected", this.onTabSelected.bind(this));

this.setSelectedTab(this.firstTab, false);
}
Expand All @@ -25,22 +24,22 @@ class TabsComponent {
let flag = false;

switch (event.key) {
case 'ArrowLeft':
selectedTab = this.getPreviousTab(tgt)
case "ArrowLeft":
selectedTab = this.getPreviousTab(tgt);
flag = true;
break;

case 'ArrowRight':
selectedTab = this.getNextTab(tgt)
case "ArrowRight":
selectedTab = this.getNextTab(tgt);
flag = true;
break;

case 'Home':
case "Home":
selectedTab = this.firstTab;
flag = true;
break;

case 'End':
case "End":
selectedTab = this.lastTab;
flag = true;
break;
Expand All @@ -67,24 +66,26 @@ class TabsComponent {
}

setSelectedTab(currentTab, setFocus) {
if (typeof setFocus !== 'boolean') {
if (typeof setFocus !== "boolean") {
setFocus = true;
}
this.tabs.forEach((tab) => {
const tabPanel = document.getElementById(tab.getAttribute('aria-controls'));
const tabPanel = document.getElementById(
tab.getAttribute("aria-controls")
);
if (currentTab === tab) {
tab.setAttribute('aria-selected', 'true');
tab.setAttribute("aria-selected", "true");
tab.tabIndex = 0;
this.toggleTabClasses(tab, true);
tabPanel.classList.remove('hidden');
tabPanel.classList.remove("hidden");
if (setFocus) {
tab.focus();
}
} else {
tab.setAttribute('aria-selected', 'false');
tab.setAttribute("aria-selected", "false");
tab.tabIndex = -1;
this.toggleTabClasses(tab, false);
tabPanel.classList.add('hidden');
tabPanel.classList.add("hidden");
}
});
}
Expand All @@ -108,14 +109,14 @@ class TabsComponent {
}

setSelectedTabBySlug(slug, setFocus = true) {
const tab = this.tabs.find(tab => tab.dataset.slug === slug);
const tab = this.tabs.find((tab) => tab.dataset.slug === slug);
if (tab) {
this.setSelectedTab(tab, setFocus);
}
}

dispatchTabSelectedEvent(tabSlug) {
const event = new CustomEvent('tabSelected', { detail: { tabSlug } });
const event = new CustomEvent("tabSelected", { detail: { tabSlug } });
document.dispatchEvent(event);
}

Expand All @@ -127,24 +128,22 @@ class TabsComponent {
toggleTabClasses(tab, isActive) {
if (isActive) {
tab.classList.add(...this.activeTabClasses);
tab.classList.remove(...this.inactiveTabClasses);
} else {
tab.classList.add(...this.inactiveTabClasses);
tab.classList.remove(...this.activeTabClasses);
}
}
}

export default class Tabs {
constructor() {
document.querySelectorAll('.tabs').forEach((elem) => {
document.querySelectorAll(".tabs").forEach((elem) => {
new TabsComponent(elem);
});

// Check if a tab query param exists in the URL
const urlParams = new URLSearchParams(window.location.search);
const tabSlug = urlParams.get('tab');
const formatSlug = urlParams.get('format');
const tabSlug = urlParams.get("tab");
const formatSlug = urlParams.get("format");
if (tabSlug) {
this.selectTabBySlug(tabSlug);
} else if (formatSlug) {
Expand All @@ -153,7 +152,7 @@ export default class Tabs {
}

selectTabBySlug(tabSlug) {
const event = new CustomEvent('tabSelected', { detail: { tabSlug } });
const event = new CustomEvent("tabSelected", { detail: { tabSlug } });
document.dispatchEvent(event);
}
}
Loading

0 comments on commit aa63e2a

Please sign in to comment.