#21997·meshery

[Docs] Fix broken mobile responsiveness CSS selector and parameter naming in 'extension-guide' shortcode

Author: Dotify71Created Sep 17, 2026Updated Sep 18, 2026
Labelshelp wantedarea/docslanguage/markdownframework/hugo

Current State

While inspecting the Hugo shortcode templates for Meshery documentation, two issues were identified in docs/layouts/shortcodes/extension-guide.html:

  1. Broken Responsive Mobile CSS Layout: Under @media (max-width: 767px) in extension-guide.html:47, there is a CSS selector class typo .extenion-guide-card (missing the 's' in extension). Because of this typo, the responsive mobile card layout styles (max-width: 30rem; flex-direction: column;) fail to apply on mobile screen sizes (< 767px).

    css
    /* docs/layouts/shortcodes/extension-guide.html:47 */
    @media (max-width: 767px) {
      /* Typo: .extenion-guide-card should be .extension-guide-card */
      .extenion-guide-card {
        max-width: 30rem;
        flex-direction: column;
      }
    }
  2. Parameter Naming Typo (guide_assests_folder): Line 59 reads {{ $guideAssetsFolder := .Get "guide_assests_folder" }} containing a spelling typo (assests instead of assets).


Desired State

  1. Fix the CSS selector in docs/layouts/shortcodes/extension-guide.html from .extenion-guide-card to .extension-guide-card so mobile screen responsiveness works as expected.
  2. Update extension-guide.html to support guide_assets_folder while maintaining backward compatibility for guide_assests_folder:
    hugo
    {{ $guideAssetsFolder := or (.Get "guide_assets_folder") (.Get "guide_assests_folder") }}
  3. Update parameter usage across callers:
    • docs/content/en/guides/configuration-management/edges-guide.md
    • docs/content/en/guides/configuration-management/identifying-components/index.md
    • docs/content/en/project/contributing/contributing-docs/shortcode-examples.md

Contributor Guides and Handbook