[UI] Dynamically adding front-matter to documentation pages

.github/workflows/pricing-list.yml

@@ -0,0 +1,57 @@
+name: Subscriptions Plan
+
+on:
+  workflow_dispatch:
+    inputs:
+      spreadsheet_uri:
+        description: 'Link of the spreadsheet containing subscription details.'
+        type: string
+        required: true
+
+jobs:
+  update-pricing-and-frontmatter:
+    runs-on: ubuntu-latest
+    env:  
+      PRICING_FILE: 'pricing-data.json'  
+
+    steps:
+      - name: Trigger Pricing List workflow and wait for completion
+        id: trigger-workflow
+        run: |
+          WORKFLOW_ID=$(curl -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: token ${{ secrets.GH_ACCESS_TOKEN }}" \
+            https://api.github.com/repos/layer5labs/meshery-extensions-packages/actions/workflows/generate-pricing-list.yml/dispatches \
+            -d '{"ref":"master", "inputs":{"spreadsheet_uri":"${{ inputs.spreadsheet_uri }}"}}' \
+            -s -o /dev/null -w "%{http_code}")
+
+          echo "Triggered workflow, waiting for completion..."
+
+          while true; do
+            STATUS=$(curl -H "Authorization: token ${{ secrets.GH_ACCESS_TOKEN }}" \
+              https://api.github.com/repos/layer5labs/meshery-extensions-packages/actions/runs | jq '.workflow_runs[0].status' -r)
+            if [ "$STATUS" = "completed" ]; then
+              echo "Workflow completed"
+              break
+            fi
+            echo "Waiting for workflow to complete..."
+            sleep 30
+          done
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.21' 
+
+      - name: Run update_frontmatter.go
+        run: go run update_frontmatter.go "${{ env.PRICING_FILE }}" 
+
+      - name: Commit and push if there are changes
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "GitHub Action"
+          git add ${{ env.PRICING_FILE }}
+          git diff --quiet && git diff --staged --quiet || (git commit -m "Update front matter based on new pricing data" && git push)

assets/scss/_styles_project.scss

@@ -37,13 +37,10 @@
 .nav-link.active {
   border-width: 1px;
   border-style: solid;
-  border-image: linear-gradient(
-      to bottom,
+  border-image: linear-gradient(to bottom,
       rgba($dark, 0.2) 30%,
       rgba($primary, 0.3) 60%,
-      $primary 90% 100%
-    )
-    1;
+      $primary 90% 100%) 1;
   padding-bottom: 0.3rem;
   align-items: center;
   justify-content: center;
@@ -83,7 +80,7 @@ body {
 
   // Inline code
   p code,
-  li > code,
+  li>code,
   table code {
     color: inherit;
     padding: 0.2em 0.4em;
@@ -104,7 +101,7 @@ body {
     background-color: $gray-900;
     padding: $spacer;
 
-    > code {
+    >code {
       background-color: inherit !important;
       padding: 0;
       margin: 0;
@@ -205,14 +202,12 @@ a:not([href]):not([class]):hover {
 }
 
 .td-sidebar {
-  background-image: linear-gradient(
-    to top,
-    #1e2117,
-    #1d1912,
-    #18120e,
-    #0f0a09,
-    #000000
-  );
+  background-image: linear-gradient(to top,
+      #1e2117,
+      #1d1912,
+      #18120e,
+      #0f0a09,
+      #000000);
   position: sticky;
   height: calc(100vh - 5.5rem);
   top: 5.5rem;
@@ -282,20 +277,14 @@ a:not([href]):not([class]):hover {
     &.active:not(.tree-root) {
       border-width: 1px;
       border-style: solid;
-      border-image: linear-gradient(
-          to left,
+      border-image: linear-gradient(to left,
           rgba($dark, 0) 30%,
           rgba($primary, 0.3) 60%,
-          $primary 90% 100%
-        )
-        1;
-      background-image: linear-gradient(
-          to left,
+          $primary 90% 100%) 1;
+      background-image: linear-gradient(to left,
           rgba($dark, 0.2) 30%,
           rgba($primary, 0.3) 60%,
-          $primary 90% 100%
-        )
-        1;
+          $primary 90% 100%) 1;
       padding: 0.25rem;
       padding-left: 0.5rem !important;
       // background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f);
@@ -317,14 +306,12 @@ a:not([href]):not([class]):hover {
 .td-sidebar-toc {
   line-height: 1.25rem;
   border-left: 1px solid $border-color;
-  background-image: linear-gradient(
-    to top,
-    #1e2117,
-    #1d1912,
-    #18120e,
-    #0f0a09,
-    #000000
-  );
+  background-image: linear-gradient(to top,
+      #1e2117,
+      #1d1912,
+      #18120e,
+      #0f0a09,
+      #000000);
 
   @supports (position: sticky) {
     position: sticky;
@@ -381,6 +368,50 @@ a:not([href]):not([class]):hover {
   border-color: #00b39f;
 }
 
+// front-matter
+.matterinfo {
+  font-weight: $font-weight-medium;
+  background: $black;
+  font-family: "Open Sans";
+  border-style: solid;
+  margin: 2rem auto;
+  padding: 1rem;
+  border-color: #00b39f;
+  border-radius: 10px;
+}
+
+.heading {
+  font-size: 1.2rem;
+  color: #00b39f;
+}
+
+.matterheader {
+  font-size: 1.2rem;
+  color: #00b39f;
+}
+
+.matterinfo .plan-support {
+  display: flex;
+  align-items: center;
+}
+
+.matterinfo .plan-support .support-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.plan-icon {
+  display: inline-block;
+}
+
+.tier {
+  color: #00b39f;
+  font-weight: bold;
+  padding: 0 5px;
+}
+
+
 // Style alert boxes.
 
 .alert {
@@ -407,12 +438,12 @@ a:not([href]):not([class]):hover {
   transition: color 0.8s;
   transition: background-color 0.8s;
 
-  > img {
+  >img {
     width: 2rem;
     margin-right: 0.5rem;
   }
 
-  > img:hover {
+  >img:hover {
     filter: brightness(0) invert(1);
   }
 
@@ -426,21 +457,15 @@ a:not([href]):not([class]):hover {
   margin-bottom: 4rem;
   font-size: 5rem;
   text-align: left;
-  background: linear-gradient(
-      217deg,
+  background: linear-gradient(217deg,
       rgba(249, 245, 13, 0.26),
-      rgba(223, 255, 219, 0.57) 9.03%
-    ),
-    linear-gradient(
-      127deg,
+      rgba(223, 255, 219, 0.57) 9.03%),
+    linear-gradient(127deg,
       rgba(249, 245, 13, 0.7),
-      rgba(223, 225, 199, 0.1) 41.12%
-    ),
-    linear-gradient(
-      336deg,
+      rgba(223, 225, 199, 0.1) 41.12%),
+    linear-gradient(336deg,
       rgba(249, 245, 13, 0.1),
-      rgba(239, 239, 251, 0.81) 0%
-    );
+      rgba(239, 239, 251, 0.81) 0%);
   background-position:
     0% 0%,
     0% 0%;
@@ -465,11 +490,9 @@ a:not([href]):not([class]):hover {
   transform: rotate(-55.68deg);
   flex-shrink: 0;
   overflow: hidden;
-  background-image: linear-gradient(
-    180deg,
-    rgba(0, 179, 115, 0) 0%,
-    rgba(0, 179, 159, 0.3) 100%
-  );
+  background-image: linear-gradient(180deg,
+      rgba(0, 179, 115, 0) 0%,
+      rgba(0, 179, 159, 0.3) 100%);
   position: absolute;
   top: -18rem;
   right: -32rem;
@@ -498,15 +521,13 @@ a:not([href]):not([class]):hover {
   left: -24rem;
   overflow: hidden;
 
-  > .dash-ircle {
+  >.dash-ircle {
     width: 74.125rem;
     height: 74.125rem;
     flex-shrink: 0;
-    background: radial-gradient(
-      50% 50% at 50% 50%,
-      rgba(0, 179, 159, 0.2) 0%,
-      rgba(0, 179, 159, 0) 100%
-    );
+    background: radial-gradient(50% 50% at 50% 50%,
+        rgba(0, 179, 159, 0.2) 0%,
+        rgba(0, 179, 159, 0) 100%);
     position: absolute;
     overflow: hidden;
     background-clip: border-box;
@@ -643,7 +664,7 @@ a:not([href]):not([class]):hover {
   gap: 3rem;
 }
 
-.tab-content > .active {
+.tab-content>.active {
   display: flex;
 }
 
@@ -653,4 +674,4 @@ a:not([href]):not([class]):hover {
 
 .csvtable {
   width: 100%;
-}
+}

layouts/shortcodes/feature-support.html

@@ -0,0 +1,22 @@
+{{ $feature_name := .Get "feature_name" }}
+{{ $pricingDataJson := getJSON "pricing_data.json" }}
+
+{{ if $pricingDataJson }}
+{{ $feature := index (where $pricingDataJson "entire_row.Feature" $feature_name) 0 }}
+
+<div class="matterinfo">
+    <h4 class="matterheader">Who can use this feature</h4>
+
+    {{ if $feature }}
+    {{ $subscription_tier := index $feature.entire_row "Subscription Tier" }}
+    <div class="plan-support all-plans {{ lower $subscription_tier }}-plan">
+        <img src="../../assets/icons/subscription.svg" alt="Icon" class="support-icon adaptive-icon">
+        Supported on <span class="tier"> {{ $subscription_tier }} </span> Plan
+    </div>
+    {{ else }}
+    <p>Feature information not found</p>
+    {{ end }}
+</div>
+{{ else }}
+<p>Error: Could not load pricing data</p>
+{{ end }}