Merge branch 'master' into feature/koppeks/687

Author: Namanv0509

.github/ISSUE_TEMPLATE/question.md renamed to .github/ISSUE_TEMPLATE/config.yml

@@ -32,7 +32,7 @@ jobs:
           export PRERELEASE=$( cat latest_release.json | jq '.["prerelease"]' | tr -d '"')
           export RELEASE_BODY=$( cat latest_release.json | jq '.["body"]' | tr -d '"')
           export DATE=$( cat latest_release.json | jq '.["published_at"]' | tr -d '"')
-          printf '%b\n' "---\ntitle: $RELEASE_TAG\ndate: $DATE\ntag: $RELEASE_TAG\nprerelease: $PRERELEASE\n---\n\n$RELEASE_BODY" > ./content/en/cloud/reference/releases/$RELEASE_TAG.md
+          printf '%b\n' "---\ntitle: $RELEASE_TAG\ndate: $DATE\ntag: $RELEASE_TAG\nprerelease: $PRERELEASE\ntoc_hide: true\n---\n\n$RELEASE_BODY" > ./content/en/cloud/reference/releases/$RELEASE_TAG.md
       - name: Update current release version
         if: steps.meshery-cloud.outputs.current_tag != steps.meshery-cloud.outputs.release_tag
         run: |

.github/workflows/cloud-release-docs.yml

@@ -32,7 +32,7 @@ jobs:
           export PRERELEASE=$( cat latest_release.json | jq '.["prerelease"]' | tr -d '"')
           export RELEASE_BODY=$( cat latest_release.json | jq '.["body"]' | tr -d '"')
           export DATE=$( cat latest_release.json | jq '.["published_at"]' | tr -d '"')
-          printf '%b\n' "---\ntitle: $RELEASE_TAG\ndate: $DATE\ntag: $RELEASE_TAG\nprerelease: $PRERELEASE\n---\n\n$RELEASE_BODY" > ./content/en/kanvas/reference/releases/$RELEASE_TAG.md
+          printf '%b\n' "---\ntitle: $RELEASE_TAG\ndate: $DATE\ntag: $RELEASE_TAG\nprerelease: $PRERELEASE\ntoc_hide: true\n---\n\n$RELEASE_BODY" > ./content/en/kanvas/reference/releases/$RELEASE_TAG.md
       - name: Update current release version
         if: steps.meshery-extensions.outputs.current_tag != steps.meshery-extensions.outputs.release_tag
         run: |

.github/workflows/meshery-extension-release-docs.yml

@@ -15,22 +15,27 @@ jobs:
       - name: Get current star count
         run: |
           echo "STARS=$(curl --silent 'https://api.github.com/repos/${{ github.repository }}' -H 'Accept: application/vnd.github.preview' | jq '.stargazers_count')" >> $GITHUB_ENV
+
       - name: Notify Slack
-        env:
-          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
-        uses: pullreminders/slack-action@master
+        uses: slackapi/slack-github-action@v2.1.1
         with:
-          args: '{\"channel\":\"CSK7N9TGX\",\"text\":\"${{ github.actor }} just starred ${{ github.repository }}! (https://github.com/${{ github.repository }}/stargazers) Total ⭐️: ${{ env.STARS }}\"}'
+          method: chat.postMessage
+          token: ${{ secrets.SLACK_BOT_TOKEN }}
+          payload: |
+            channel: CSK7N9TGX
+            type: "mrkdwn"
+            text: "<https://github.com/${{ github.actor }}|${{ github.actor }}> just starred <https://github.com/${{ github.repository }}/stargazers|${{ github.repository }}> bringing the total ⭐️ count up to: ${{ env.STARS }}"
 
   good-first-issue-notify:
     if: github.event_name == 'issues' && (github.event.label.name == 'good first issue' || github.event.label.name == 'first-timers-only')
     name: Notify Slack for new good-first-issue
     runs-on: ubuntu-latest
     steps:
       - name: Notify Slack
-        env:
-          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
-        uses: pullreminders/slack-action@master
+        uses: slackapi/slack-github-action@v2.1.1
         with:
-          args: '{\"channel\":\"C019426UBNY\",\"type\":\"section\",\"text\":\":new: Good first issue up for grabs: ${{ github.event.issue.title }} - ${{ github.event.issue.html_url }} \"}'
-                                                                            
+          method: chat.postMessage
+          token: ${{ secrets.SLACK_BOT_TOKEN }}
+          payload: |
+            channel: C019426UBNY
+            text: ":new: Good first issue up for grabs: <${{ github.event.issue.html_url }}|${{ github.event.issue.title }}>"

.github/workflows/slack.yml

@@ -41,18 +41,6 @@ Explore tutorials and documentation by product in the https://docs.layer5.io web
 
 If you find a typo or you feel like you can improve the HTML, CSS, or JavaScript, we welcome contributions. Feel free to open issues or pull requests like any normal GitHub project, and we'll merge it in 🚀
 
-### Running the Site Locally
-
-The website can be run locally through Golang (Hugo) or Docker. If you choose to run through Docker, everything will be a little bit slower due to the additional overhead, so for frequent contributors it may be worth it to use Golang.
-
-### With Docker
-
-Running the site locally is simple. Provided you have Docker installed, clone this repo, run `make docker`, and then visit <http://localhost:1313>.
-
-> [!IMPORTANT]  
-> This requires Docker Desktop version **4.24** or later, or Docker Engine with Docker
-> Compose version [**2.22**](https://docs.docker.com/compose/file-watch/) or later.
-
 ### With Golang
 
 If your local development environment has a supported version (v1.21.0+) of Golang installed, next you'll need to install extended Hugo version as it has necessary SCSS/SASS support. Find all the Hugo packages here: <https://github.com/gohugoio/hugo/releases/tag/v0.120.4>
@@ -65,6 +53,15 @@ Now to setup and run the site locally run:
 
 If you pull down new code from GitHub, you will occasionally need to run `make setup` again. Otherwise, there's no need to re-run `make setup` each time the site is run, you can just run `make site` to get it going and have it automatically reload as you make and save site edits.
 
+### With Docker
+
+Running the site locally is simple. Provided you have Docker installed, clone this repo, run `make docker`, and then visit <http://localhost:1313>.
+
+> [!IMPORTANT]  
+> This requires Docker Desktop version **4.24** or later, or Docker Engine with Docker
+> Compose version [**2.22**](https://docs.docker.com/compose/file-watch/) or later.
+
+
 ## Layer5 Documentation Structure
 
 ## High-Level Outline & Information Architecture for Layer5 Documentation
@@ -76,7 +73,8 @@ If you pull down new code from GitHub, you will occasionally need to run `make s
 - **Personas:** Beginners, developers, admins, operators, security specialists, contributors, users of all experience levels.
 - **Needs:** Varied - learning fundamentals, managing tasks, understanding advanced concepts, contributing code.
 
-## Cloud Docs
+<details>
+  <summary><h2>Cloud Docs</h2></summary>
 
 ### Getting Started
 
@@ -122,7 +120,9 @@ Keep your Kanvas designs internal to your workplace. Get remote support from Lay
 
 Low-level ReST API reference for extending Layer5 Cloud.
 
-## Kanvas Docs
+</details>
+<details>
+  <summary><h2>Kanvas Docs</h2>
 
 ### Getting Started with Designs
 
@@ -148,15 +148,15 @@ Operator mode is for operating your Kubernetes clusters and cloud native infrast
 ### Core Tasks
 
 - **Whiteboarding:** Kanvas Designer supports freestyle design, meaning that you can customize the appearance and layout of your diagrams without any constraints.
-
 - **Deploying Designs:** Validating Designs, Undeploying Designs, Deploying Designs, Cloning a Design
 
 ### Reference
 
 - **Keyboard Shortcuts:** Learn the keyboard shortcuts for Kanvas to enhance your designing experience.
-
 - **Troubleshooting Kanvas:** Learn to Troubleshoot the Kanvas
 
+</details>
+
 ### Contribution Guidelines
 
 A detailed contribution guide for Layer5 Docs.

README.md

@@ -151,6 +151,7 @@ h6 {
   >ol,
   >p,
   >pre,
+  >details,
   >ul {
     @extend .td-max-width-on-larger-screens;
   }

assets/scss/_content_project.scss

@@ -104,13 +104,13 @@
   &.catalog-logo {
     background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/catalog.svg");
   }
-  &.learning-path-logo{
-    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/learning-path.svg");
+  &.academy-logo{
+    background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/academy.svg");
   }
   &.recognition-program-logo{
     background-image: url("/images/logos/black-semi-opaque.svg"), url("/images/logos/recognition-program.png");
   }
-  &.catalog-logo, &.learning-path-logo , &.recognition-program-logo {
+  &.catalog-logo, &.academy-logo , &.recognition-program-logo {
     background-repeat: no-repeat;
     background-position: center;
     background-size: 50%;
@@ -196,7 +196,7 @@
   }
 }
 
-.playground-card {
+.academy-card {
   max-width: 351.88px;
   @media (max-width:768px){
     max-width: 100%;

assets/scss/_landing_project.scss

@@ -12,6 +12,7 @@
 @import "subscription.scss";
 @import "_video-landing_project.scss";
 @import "elements_project";
+@import "summary.scss";
 
 .navbar-dark {
   min-height: 5rem;
@@ -138,6 +139,9 @@ body {
 
   overflow-x: hidden;
 }
+.td-content .card img {
+  width: 100% ;
+}
 
 // Links
 
@@ -712,78 +716,54 @@ a:not([href]):not([class]):hover {
   color: $body-color;
 }
 
-.tab-body {
-  overflow-x: scroll;
-  background: transparent;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.tab-content>.active {
+.nav-tabs {
+  border: none;
   display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
 }
 
-.nav-tabs .nav-link.active {
-  color: #00d3a9;
+.nav-tabs::-webkit-scrollbar {
+  display: none; /* Chrome, Safari and Opera */
 }
 
-.csvtable {
-  width: 100%;
+.nav-tabs .nav-item {
+  margin-bottom: 0;
+  margin-right: 0;
 }
-// Only target the tabbed panels using ID naming convention
 
-[id^="tabs-"] {
-  border: 1px solid rgba($light, 0.1);
-  border-radius: 0.5rem;
-  padding: .5rem;
-  margin-bottom: 1rem;
-  background-color: rgba($light, 0.02);
-  box-shadow: 0 0 8px rgba($dark, 0.2);
-
-  .nav-link {
-    color: $light;
-    background-color: rgba($light, 0.3); // 🆕 consistent visible bg for inactive tabs
-    border: 2px solid rgba($light, 0.15);
-    border-radius: 0.5rem 0.5rem 0 0;
-    margin: 2px;
-    padding: 0.5rem 1rem;
-    font-weight: 500;
-    line-height: 1.5rem;
-    display: inline-block;
-    transition: background-color 0.2s ease, color 0.2s ease;
-    white-space: nowrap;
-    box-shadow: 0 0 4px rgba($dark, 0.05); // 🆕 soft shadow for depth
-
-    &:hover {
-      background-color: rgba($light, 0.5);
-      color: $white;
-    }
+.nav-tabs .nav-link {
+  position: relative;
+  border: 1px solid transparent;
+  border-bottom: 1px solid $lightslategray;
+  border-radius: 5px 5px 0 0;
+  color: $primary;
+  padding: 0.6rem 1.2rem;
+  white-space: nowrap;
+}
 
-    &.active {
-      background-color: $primary;
-      color: #fff;
-      border-color: $primary $primary transparent;
-      font-weight: 600;
-      position: relative;
-      z-index: 2;
-      box-shadow: none; // remove shadow from active to flatten it into content
-    }
-  }
+.nav-tabs .nav-link:not(.active):hover {
+  background-color: lighten($dark, 10%);
+  color: lighten($primary, 15%);
+  border-bottom-color: lighten($lightslategray, 20%);
+}
 
-   .nav-link.disabled {
-    background: transparent;
-    border: none;
-    color: rgba($light, 0.5);
-    font-weight: 400;
-    cursor: default;
-    box-shadow: none;
-    pointer-events: none;
-    padding-left: 0;
-    padding-right: 0;
-    margin-right: 0.5rem;
-    margin-left: 0.25rem;
-    letter-spacing: 0.03em;
-  }
+.nav-tabs .nav-link.active {
+  background-color: $body-bg;
+  font-weight: 500;
+  border-color: $lightslategray $lightslategray;
+  border-bottom: 1px solid $body-bg;
+  z-index: 1;
+}
+
+.tab-content .tab-pane {
+  border: 1px solid $lightslategray;
+  margin-top: -1px;
+  padding: 1.5rem;
+  border-radius: 0 0 5px 5px;
+  background-color: $body-bg;
 }
 
 html {

assets/scss/_styles_project.scss

@@ -0,0 +1,66 @@
+
+details {    
+    width: 100%;
+    margin: 0 ;
+    background-color: lighten($dark, 5%);
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    box-shadow: 0 .1rem 1rem -.5rem rgba($dark, 0.4);
+    border-radius: 5px;
+    overflow: hidden;
+    font-size: 1rem;
+    padding: 0rem 1.5rem 0rem 1.5rem;
+    & > h6 { color: $blonde};
+    & > p {
+      color: $body-color;
+      margin-top: 1rem;
+    }
+  }
+  
+  summary {
+    padding: .25rem 0rem;
+    margin-right: -1.5rem;
+    margin-left: -1.5rem;  
+    display: block;
+    background-color: lighten($dark, 10%); 
+    color: $navbar-dark-color;
+    padding-left: 2.2rem;
+    position: relative;
+    cursor: pointer;
+    font-size: 1.1rem;
+    font-weight: normal;
+  }
+  
+  summary:before {
+    content: '';
+    border-width: .4rem;
+    border-style: solid;
+    border-color: transparent transparent transparent $body-color;
+    position: absolute;
+    left: 1rem;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: .02rem;
+    margin: auto;
+    transform: rotate(0);
+    transform-origin: .2rem 50%;
+    transition: .25s transform ease;
+  }
+
+  details[open] {
+    padding-bottom: 0.5rem;
+  }
+  
+  details[open] > summary:before {
+    transform: rotate(90deg);
+  }
+  
+  details summary::-webkit-details-marker {
+    display:none;
+  }
+  
+  details > ul {
+    padding: 1rem auto;
+    margin-bottom: 0;
+  }

assets/scss/_summary.scss

@@ -1 +1 @@
-v0.8.309
+v0.8.490