[UI] Dynamically adding front-matter to documentation pages

.github/workflows/feature-list.yml

@@ -0,0 +1,84 @@
+name: Feature List Update
+
+on:
+  schedule:
+    - cron: '0 0 * * *'  # Run every night at midnight UTC
+  workflow_dispatch:  
+
+permissions:
+  contents: write
+  actions: write
+
+jobs:
+  check-and-update-features:
+    runs-on: ubuntu-latest
+    env:
+      FEATURES_FILE: 'data/features.json'
+
+    steps:
+      - name: Checkout current repository
+        uses: actions/checkout@v4
+
+      - name: Check for updates in source repository
+        id: check-updates
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: sourceFile } = await github.rest.repos.getContent({
+              owner: 'layer5labs',
+              repo: 'meshery-extensions-packages',
+              path: 'feature-data.json',
+              ref: 'master'
+            });
+
+            // Store the latest commit SHA
+            const latestSHA = sourceFile.sha;
+
+            // Try to get the previously stored SHA from cache
+            const cache = await github.rest.actions.getActionsCacheList({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+            });
+
+            let hasUpdates = true;
+            if (cache.data.actions_caches.length > 0) {
+              const lastSHA = cache.data.actions_caches[0].key.split('-').pop();
+              hasUpdates = lastSHA !== latestSHA;
+            }
+
+            if (hasUpdates) {
+              // Update the cache with new SHA
+              await github.rest.actions.createActionsCacheEntry({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                key: `feature-data-sha-${latestSHA}`,
+                ref: context.ref,
+                cache_data: latestSHA
+              });
+
+              // Decode and save the content
+              const content = Buffer.from(sourceFile.content, 'base64').toString('utf-8');
+              const fs = require('fs');
+
+              // Create data directory if it doesn't exist
+              fs.mkdirSync('data', { recursive: true });
+
+              // Write the new content
+              fs.writeFileSync('${{ env.FEATURES_FILE }}', content);
+
+              core.setOutput('has-updates', 'true');
+            } else {
+              core.setOutput('has-updates', 'false');
+            }
+
+      - name: Commit changes
+        if: steps.check-updates.outputs.has-updates == 'true'
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "Updated feature data from source repository"
+          file_pattern: ${{ env.FEATURES_FILE }}
+          branch: master
+          commit_options: "--signoff"
+          commit_user_name: l5io
+          commit_user_email: [email protected]
+          commit_author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>

assets/scss/_styles_project.scss

@@ -372,7 +372,7 @@ a:not([href]):not([class]):hover {
 .matterinfo {
   font-weight: $font-weight-medium;
   background: $black;
-  font-family: "Open Sans";
+  font-family: "Qanelas Soft";
   border-style: solid;
   margin: 2rem auto;
   padding: 1rem;

layouts/partials/feature-info.html

@@ -2,24 +2,56 @@
 {{ $features := .Site.Data.features }}
 
 {{ if not $features }}
-  {{ $features = getJSON "features.json" }}
+{{ $features = getJSON "features.json" }}
 {{ end }}
 
 {{ if $features }}
+{{ $groupedFeatures := dict }}
 {{ range $features }}
-  {{ $docUrl := .documentation | default "" }}
-  {{ $cleanDocUrl := (index (split $docUrl "#") 0) }} <!-- Remove the # fragment if it exists -->
-  {{ if eq $cleanDocUrl $currentPage }}
-    <div class="matterinfo">
-        <h4 class="matterheader">Who can use this feature</h4>
-        {{ $subscription_tier := index .entire_row "Subscription Tier" }}
-        <div class="plan-support all-plans {{ lower $subscription_tier }}-plan">
-            <img src="/images/subscription.svg" alt="Icon" class="support-icon adaptive-icon">
-            Supported on <span class="tier">{{ $subscription_tier }}</span> Plan
-        </div>
-    </div>
-    {{ break }} 
-  {{ end }}
+{{ $docUrl := .documentation | default "" }}
+{{ $cleanDocUrl := (index (split $docUrl "#") 0) }}
+{{ if eq $cleanDocUrl $currentPage }}
+{{ $tier := index .entire_row "Subscription Tier" }}
+{{ $feature := index .entire_row "Feature" }}
+{{ $currentFeatures := index $groupedFeatures $tier | default "" }}
+{{ $groupedFeatures = merge $groupedFeatures (dict $tier (printf "%s%s%s" $currentFeatures (cond (eq $currentFeatures
+"") "" ", ") $feature)) }}
+{{ end }}
+{{ end }}
+
+{{ if ne (len $groupedFeatures) 0 }}
+{{ $maxTier := "" }}
+{{ $maxLength := 0 }}
+{{ range $tier, $features := $groupedFeatures }}
+{{ $length := len (split $features ", ") }}
+{{ if gt $length $maxLength }}
+{{ $maxTier = $tier }}
+{{ $maxLength = $length }}
 {{ end }}
 {{ end }}
 
+<div class="matterinfo">
+  <h4 class="matterheader">Who can use this feature</h4>
+  <div class="plan-support all-plans {{ lower $maxTier }}-plan">
+    <img src="/images/subscription.svg" alt="Icon" class="support-icon adaptive-icon">
+    Supported on <a href="https://layer5.io/pricing" class="tier-link" target="_blank"><span class="tier">{{ $maxTier
+        }}</span> </a>Plan
+  </div>
+
+  {{ if gt (len $groupedFeatures) 1 }}
+  <div class="add-ons">
+    <strong>Add-ons:</strong>
+    {{ $first := true }}
+    {{ range $tier, $features := $groupedFeatures }}
+    {{ if ne $tier $maxTier }}
+    {{ if not $first }}, {{ end }}
+    {{ $first = false }}
+    {{ $features }} [<a href="https://layer5.io/pricing" class="tier-link" target="_blank"><span class="tier">{{ $tier
+        }}</span></a>]
+    {{ end }}
+    {{ end }}
+  </div>
+  {{ end }}
+</div>
+{{ end }}
+{{ end }}