[UI] Dynamically adding front-matter to documentation pages

.github/workflows/feature-list.yml

@@ -0,0 +1,92 @@
+name: Feature List
+
+on:
+  workflow_dispatch:
+    inputs:
+      spreadsheet_uri:
+        description: 'Link of the spreadsheet containing subscription details.'
+        type: string
+        required: true
+
+jobs:
+  update-feature-data:
+    runs-on: ubuntu-latest
+    env:  
+      FEATURES_FILE: 'data/features.json'  
+
+    steps:
+      - name: Trigger Feature List workflow and wait for completion
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GH_ACCESS_TOKEN}}
+          script: |
+            const result = await github.rest.actions.createWorkflowDispatch({
+              owner: 'layer5labs',
+              repo: 'meshery-extensions-packages',
+              workflow_id: 'generate-feature-list.yml',
+              ref: 'master',
+              inputs: {
+                spreadsheet_uri: '${{ secrets.INPUT_SPREADSHEET_URI }}'
+              }
+            });
+
+            console.log("Triggered workflow, waiting for completion...");
+
+            while (true) {
+              const runs = await github.rest.actions.listWorkflowRuns({
+                owner: 'layer5labs',
+                repo: 'meshery-extensions-packages',
+                workflow_id: 'generate-feature-list.yml'
+              });
+
+              if (runs.data.workflow_runs[0].status === 'completed') {
+                console.log("Workflow completed");
+                break;
+              }
+
+              console.log("Waiting for workflow to complete...");
+              await new Promise(resolve => setTimeout(resolve, 30000));
+            }
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Create data directory if it doesn't exist
+        run: mkdir -p data
+
+      - name: Download new feature data
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GH_ACCESS_TOKEN}}
+          script: |
+            const fs = require('fs');
+            const path = require('path');
+
+            const { data } = await github.rest.repos.getContent({
+              owner: 'layer5labs',
+              repo: 'meshery-extensions-packages',
+              path: 'feature-data.json'
+            });
+
+            const newContent = Buffer.from(data.content, 'base64').toString('utf-8');
+            fs.writeFileSync('${{ env.FEATURES_FILE }}', newContent);
+
+      - name: Update or create features.json
+        run: |
+          if [ -f "${{ env.FEATURES_FILE }}" ]; then
+            echo "Updating existing features.json"
+          else
+            echo "Creating new features.json"
+            cp "${{ env.FEATURES_FILE }}" data/features.json
+          fi
+
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Updated feature data
+          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>

.github/workflows/new-feature-check.yml

@@ -0,0 +1,71 @@
+name: Nightly Google Sheet Check
+
+on:
+  schedule:
+    - cron: '0 0 * * *'  # Run every day at midnight UTC
+
+jobs:
+  check-for-updates:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for Google Sheet updates
+        id: sheet-check
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GH_ACCESS_TOKEN}}
+          script: |
+            const { GoogleSpreadsheet } = require('google-spreadsheet');
+
+            async function checkForUpdates() {
+              const doc = new GoogleSpreadsheet('${{ secrets.INPUT_SPREADSHEET_URI }}');
+              await doc.useServiceAccountAuth({
+                client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
+                private_key: process.env.GOOGLE_PRIVATE_KEY,
+              });
+
+              await doc.loadInfo();
+              const sheet = doc.sheetsByIndex[0];
+              const lastModified = sheet.lastModified;
+
+              const cache = await github.rest.actions.getActionsCacheList({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+              });
+
+              let lastKnownModified = null;
+              if (cache.data.actions_caches.length > 0) {
+                lastKnownModified = new Date(cache.data.actions_caches[0].last_accessed_at);
+              }
+
+              if (!lastKnownModified || lastModified > lastKnownModified) {
+                await github.rest.actions.createActionsCacheEntry({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  key: 'last-modified-time',
+                  ref: context.ref,
+                  cache_data: lastModified.toISOString(),
+                });
+                return true;
+              }
+
+              return false;
+            }
+
+            const hasUpdates = await checkForUpdates();
+            core.setOutput('has-updates', hasUpdates);
+
+      - name: Trigger Subscriptions Plan workflow
+        if: steps.sheet-check.outputs.has-updates == 'true'
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GH_ACCESS_TOKEN}}
+          script: |
+            github.rest.actions.createWorkflowDispatch({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              workflow_id: 'feature-list.yml',
+              ref: 'main',
+              inputs: {
+                spreadsheet_uri: '${{ secrets.INPUT_SPREADSHEET_URI }}'
+              }
+            });

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 }}