Feat/prompt hub v2

app/_assets/entrypoints/hub.js

@@ -11,18 +11,19 @@ class Hub {
     this.areFiltersOpen = false;
 
     this.deploymentTopologies = this.filters.querySelectorAll(
-      'input[name="deployment-topology"]'
+      'input[name="deployment-topology"]',
     );
     this.tiers = this.filters.querySelectorAll('input[name="tier"]');
     this.categories = this.filters.querySelectorAll('input[name="category"]');
     this.support = this.filters.querySelectorAll('input[name="support"]');
     this.trustedContent = this.filters.querySelectorAll(
-      'input[name="trusted-content"]'
+      'input[name="trusted-content"]',
     );
     this.phases = this.filters.querySelectorAll('input[name="phase"]');
     this.policyTargets = this.filters.querySelectorAll(
-      'input[name="policy-target"]'
+      'input[name="policy-target"]',
     );
+    this.products = this.filters.querySelectorAll('input[name="product"]');
 
     this.deploymentValues = [];
     this.categoryValues = [];
@@ -31,6 +32,7 @@ class Hub {
     this.tierValues = [];
     this.phaseValues = [];
     this.policyTargetValues = [];
+    this.productValues = [];
 
     this.typingTimer;
     this.typeInterval = 400;
@@ -48,6 +50,7 @@ class Hub {
       ...this.tiers,
       ...this.phases,
       ...this.policyTargets,
+      ...this.products,
     ];
     checkboxes.forEach((checkbox) => {
       checkbox.addEventListener("change", () => this.onChange());
@@ -77,7 +80,7 @@ class Hub {
     this.seeResults.addEventListener("click", () => this.toggleDrawer());
 
     this.toggleFiltersDrawer.addEventListener("click", () =>
-      this.toggleDrawer()
+      this.toggleDrawer(),
     );
   }
 
@@ -95,6 +98,7 @@ class Hub {
     this.trustedContentValues = this.getValues(this.trustedContent);
     this.phaseValues = this.getValues(this.phases);
     this.policyTargetValues = this.getValues(this.policyTargets);
+    this.productValues = this.getValues(this.products);
 
     this.updateURL();
     this.scrollCardsIntoView();
@@ -119,36 +123,42 @@ class Hub {
       const matchesDeploymentTopology = this.matchesFilter(
         plugin,
         this.deploymentTopologies,
-        "deploymentTopology"
+        "deploymentTopology",
       );
       const matchesCategory = this.matchesFilter(
         plugin,
         this.categories,
-        "category"
+        "category",
       );
 
       const matchesSupport = this.matchesFilter(
         plugin,
         this.support,
-        "support"
+        "support",
       );
 
       const matchesTrustedContent = this.matchesFilter(
         plugin,
         this.trustedContent,
-        "trustedContent"
+        "trustedContent",
       );
 
       const matchesPhases = this.matchesFilter(plugin, this.phases, "phases");
 
       const matchesPolicyTarget = this.matchesFilter(
         plugin,
         this.policyTargets,
-        "policyTarget"
+        "policyTarget",
       );
 
       const matchesTier = this.matchesFilter(plugin, this.tiers, "tier");
 
+      const matchesProducts = this.matchesFilter(
+        plugin,
+        this.products,
+        "products",
+      );
+
       const matchesText = this.matchesQuery(plugin);
 
       const showPlugin =
@@ -159,6 +169,7 @@ class Hub {
         matchesTier &&
         matchesPhases &&
         matchesPolicyTarget &&
+        matchesProducts &&
         matchesText;
 
       plugin.classList.toggle("hidden", !showPlugin);
@@ -172,7 +183,7 @@ class Hub {
     this.categories.forEach((cat) => {
       const category = document.getElementById(cat.value);
       const showCategory = category.querySelectorAll(
-        '[data-card="plugin"]:not(.hidden)'
+        '[data-card="plugin"]:not(.hidden)',
       ).length;
 
       category.classList.toggle("hidden", !showCategory);
@@ -183,7 +194,7 @@ class Hub {
     const thirdParty = document.getElementById("third-party");
     if (thirdParty) {
       const showThirdParty = thirdParty.querySelectorAll(
-        '[data-card="plugin"]:not(.hidden)'
+        '[data-card="plugin"]:not(.hidden)',
       ).length;
 
       thirdParty.classList.toggle("hidden", !showThirdParty);
@@ -220,7 +231,7 @@ class Hub {
     params.delete("deployment-topology");
     if (this.deploymentValues.length > 0) {
       this.deploymentValues.forEach((value) =>
-        params.append("deployment-topology", value)
+        params.append("deployment-topology", value),
       );
     }
 
@@ -237,7 +248,7 @@ class Hub {
     params.delete("trusted-content");
     if (this.trustedContentValues.length > 0) {
       this.trustedContentValues.forEach((value) =>
-        params.append("trusted-content", value)
+        params.append("trusted-content", value),
       );
     }
 
@@ -260,10 +271,15 @@ class Hub {
     params.delete("policy-target");
     if (this.policyTargetValues.length > 0) {
       this.policyTargetValues.forEach((value) =>
-        params.append("policy-target", value)
+        params.append("policy-target", value),
       );
     }
 
+    params.delete("product");
+    if (this.productValues.length > 0) {
+      this.productValues.forEach((value) => params.append("product", value));
+    }
+
     let newUrl = window.location.pathname;
     if (params.size > 0) {
       newUrl += "?" + params.toString();
@@ -309,6 +325,11 @@ class Hub {
       checkbox.checked = policyTargetValues.includes(checkbox.value);
     });
 
+    const productValues = params.getAll("product") || [];
+    this.products.forEach((checkbox) => {
+      checkbox.checked = productValues.includes(checkbox.value);
+    });
+
     const termsValue = params.get("terms") || "";
     this.textInput.value = decodeURIComponent(termsValue);
 
@@ -320,6 +341,7 @@ class Hub {
       tierValues.length ||
       phaseValues.length ||
       policyTargetValues.length ||
+      productValues.length ||
       termsValue
     ) {
       this.onChange();

app/_assets/stylesheets/index.css

@@ -834,6 +834,12 @@
     pre {
       @apply whitespace-pre overflow-auto !bg-code-block;
     }
+
+    &[data-ask-kai="true"] {
+      pre {
+        @apply whitespace-pre-wrap break-normal;
+      }
+    }
   }
 
   clipboard-copy {

app/_data/schemas/frontmatter/base.json

@@ -18,7 +18,7 @@
     },
     "content_type": {
       "type": "string",
-      "enum": ["landing_page", "how_to", "reference", "concept", "plugin", "plugin_example", "api", "policy", "support"]
+      "enum": ["landing_page", "how_to", "reference", "concept", "plugin", "plugin_example", "api", "policy", "support", "prompt"]
     },
     "description": {
       "type": "string"

app/_includes/cards/prompt.html

@@ -0,0 +1,22 @@
+{% assign prompt = include.prompt %}
+<div
+  class="card card__bordered min-h-[200px]"
+  data-card="plugin"
+  data-products="{{ prompt.products | join: ',' }}"
+>
+  <a href="{{ prompt.url }}" class="flex flex-col gap-5 hover:no-underline text-secondary w-full p-6">
+    <div class="flex flex-col gap-3 flex-grow">
+      <h4>{{ prompt.title | liquify }}</h4>
+
+      <p class="text-sm line-clamp-3">
+        {{ prompt.description | liquify }}
+      </p>
+
+      <div class="flex flex-wrap gap-2 mt-auto pt-2">
+        {% for product in prompt.products %}
+            {% include_cached product_icon.html product=product %}
+        {% endfor %}
+      </div>
+    </div>
+  </a>
+</div>

app/_includes/checkbox.html

@@ -1,6 +1,9 @@
 <div class="flex">
     <label class="flex gap-2 py-0.5 w-full text-sm text-primary md:pl-1 items-center">
         <input class="checkbox" type="checkbox" value="{{include.value}}" name="{{include.name}}">{{include.label}}
+        {% if include.icon %}
+        {{include.icon}}
+        {% endif %}
         {% if include.tooltip %}
         {% include tooltip.html text=include.tooltip %}
         {% endif %}

app/_includes/product_icon.html

@@ -0,0 +1,6 @@
+{% assign icon = site.data.products[include.product].icon %}
+<span
+class="product-icon product-icon--background {% if include.product == 'kic' or include.product == 'operator' %} product-icon--bordered {% endif %}"
+style="background-color: rgb(var(--color-{{include.product}}-background));">
+{% include_svg icon height="12" width="12" %}
+</span>

app/_includes/prompts/overview.md

@@ -0,0 +1,16 @@
+{% if page.extended_description %}
+{{page.extended_description | liquify }}
+{% else %}
+{{ page.description | liquify }}
+{% endif %}
+
+## Prompts
+
+{% html_tag type="dev" css_classes="grid grid-cols-1 md:grid-cols-2 gap-16" %}
+{% for prompt in page.prompts %}
+```text
+{{ prompt | liquify }}
+```
+{:data-ask-kai="true"}
+{% endfor %}
+{% endhtml_tag %}

app/_includes/syntax_highlighting.html

@@ -14,17 +14,22 @@
   {% for data in codeblock.data %}{{ data[0] }}="{{ data[1] }}" {% endfor %}
 >
     {% if codeblock.render_header %}
+    {% if codeblock.data['data-file'] %}
     <div class="custom-code-block__header grid grid-cols-[1fr_auto]  justify-items-end items-center px-3 py-1 bg-code-block-header rounded-t-lg border border-primary/5">
-        {% if codeblock.data['data-file'] %}
         <div class="text-sm text-white dark:text-primary justify-self-start">{{codeblock.data['data-file']}}</div>
-        {% endif %}
-        {% if codeblock.copy %}
-        <div class="flex items-center gap-2">
-            {{copy}}
-        </div>
-        {% endif %}
     </div>
     {% endif %}
+    {% if codeblock.ask_kai %}
+        <div class="custom-code-block__header grid grid-cols-[1fr_auto]  justify-items-end items-center px-1 py-1 bg-code-block rounded-t-lg border border-primary/5 border-b-0">
+            <a href="{{codeblock.ask_kai}}" class="flex text-white dark:text-primary bg-code-block-header dark:bg-code-block border border-transparent dark:border-brand rounded text-xs p-1 items-center no-icon hover:no-underline" target="_blank">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M20 12.0884V12.4355C15.7128 12.4355 14.5598 16.2296 14.5598 19.3252H14.2229C14.2229 16.2296 12.8732 12.4355 8.78272 12.4355V12.0884C13.497 12.0884 14.2229 8.29432 14.2229 5.19878H14.5598C14.5598 8.29432 15.2977 12.0884 20 12.0884ZM7.28629 11.0361C7.28629 9.27503 7.94267 7.11656 10.3813 7.11656V6.91952C7.70577 6.91952 7.28629 4.76104 7.28629 3H7.09502C7.09502 4.76104 6.68206 6.91952 4 6.91952V7.11656C6.32779 7.11656 7.09502 9.27503 7.09502 11.0361H7.28629ZM9.21089 14.1529H9.04788C9.04788 15.6531 8.69578 17.4925 6.41038 17.4925V17.6604C8.39367 17.6604 9.04788 19.4998 9.04788 21H9.21089C9.21089 19.4998 9.76948 17.6604 11.8484 17.6604V17.4925C9.56843 17.4925 9.21089 15.6531 9.21089 14.1529Z" fill="currentColor"></path>
+                </svg>
+                <span>Run in KAi</span>
+            </a>
+        </div>
+    {% endif %}
+    {% endif %}
     {% assign show_inline_actions = false %}
     {% if codeblock.render_header == false and codeblock.copy %}{% assign show_inline_actions = true %}{% endif %}
     {% if codeblock.render_header == false and codeblock.collapsible %}{% assign show_inline_actions = true %}{% endif %}
@@ -39,15 +44,12 @@
                 </span>
             </button>
             {% endif %}
-            {% if codeblock.copy %}
-            {{copy}}
-            {% endif %}
         </div>
         {% endif %}
     </div>
     {% if codeblock.collapsible %}
     <button class="collapsible-toggle collapsible-toggle--footer w-full py-2 px-3 text-xs text-secondary bg-code-block border border-primary/5 rounded-b-lg flex justify-center cursor-pointer transition-colors" aria-expanded="false" type="button">
         <span>Toggle code</span>
     </button>
-    {% endif %}
+{% endif %}
 </div>

app/_layouts/prompts/overview.html

@@ -0,0 +1,5 @@
+---
+layout: without_aside
+---
+
+{{content}}

app/_plugins/converters/syntax_highlight.rb

@@ -17,13 +17,15 @@ def render_shiki(el, _indent) # rubocop:disable Metrics/AbcSize,Metrics/MethodLe
         id = SecureRandom.uuid
 
         snippet = CodeHighlighter.new.highlight(code, language, id)
+
         Liquid::Template.parse(template, { line_numbers: true }).render(
           {
             'codeblock' => {
               'copy' => copy,
               'css_classes' => el.attr['class'],
               'collapsible' => el.attr.fetch('class', '').include?('collapsible'),
-              'render_header' => !data['data-file'].nil?,
+              'ask_kai' => ask_kai(data, code),
+              'render_header' => !data['data-file'].nil? || !ask_kai(data, code).nil?,
               'id' => id,
               'data' => data,
               'snippet' => snippet
@@ -54,6 +56,12 @@ def data_attributes(attr)
           data[key] = value if key.start_with?('data-')
         end
       end
+
+      def ask_kai(data, code)
+        return nil if data['data-ask-kai'].nil?
+
+        "https://cloud.konghq.com/?agent=true&agent-prompt=#{URI.encode_www_form_component(code)}"
+      end
     end
   end
 end

app/_plugins/generators/data/search_tags/base.rb

@@ -13,7 +13,8 @@ class Base # rubocop:disable Style/Documentation
           'plugin_example' => 'PluginExample',
           'reference' => 'Reference',
           'policy' => 'Policy',
-          'support' => 'Support'
+          'support' => 'Support',
+          'prompt' => 'Prompt'
         }.freeze
 
         def self.make_for(site:, page:)

app/_plugins/generators/data/search_tags/prompt.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require_relative 'base'
+
+module Jekyll
+  module Data
+    module SearchTags
+      class Prompt < Base
+      end
+    end
+  end
+end

app/_plugins/generators/data/title/base.rb

@@ -9,6 +9,8 @@ def self.make_for(page:, site:) # rubocop:disable Metrics/AbcSize,Metrics/Cyclom
             APIPage.new(page:, site:)
           elsif page.url.start_with?('/plugins/')
             Plugin.new(page:, site:)
+          elsif page.url.start_with?('/prompts/')
+            Prompt.new(page:, site:)
           elsif page.url.start_with?('/mesh/policies/') || page.url.start_with?('/event-gateway/policies/')
             Policy.new(page:, site:)
           elsif page.data['content_type'] && page.data['content_type'] == 'reference'