prevent-overwriting-of-screenshots

[vishalvivekm]

Proposed fix:

Once this PR is merged, to update the screenshots in How it Works See It in Action section on an Meshery integration's individual page, below steps have to be followed:

1. Get the title from the .mdx file of the integration ( found in src/collections/integrations/) and create a directory in src/collections/integrations/_images/ named after the sluggified version of the title.

For example, if the integration's title is Actions Runner Controller (ARC) the corresponding directory to be created would be named actions-runner-controller-arc.

2. Populate the newly created directory at src/collections/integrations/_images/<sluggified version of title>/ with the latest screenshots.

Description of changes made:

• gatsby-node.js:

Added the name property to the context object to pass it as a variable to the query in the "integration template file" (src/templates/integrations.js)

name variable will have a value like `_images/<sluggified version of the integration's title>".

• src/templates/integrations.js
  Incorporated an additional query within the existing GraphQL query to get all the screenshots from the src/collections/integrations/_images/<sluggified version of the integration's title>/ directory.

• src/sections/Meshery/Meshery-integrations/Individual-Integrations/index.js
  If screenshots are available in the integration's directory inside the src/collections/integrations/_images/ directory, use those screenshots; otherwise, use the default two screenshots ( ../_images/meshmap-visualizer.png and
  ../_images/meshmap-designer.png).
• Moved specific integration's screenshots from the _images directory to their corresponding directories inside _images.

For example, src/collections/integrations/_images/backstage_desgin_dark.png is now located at src/collections/integrations/_images/backstage/backstage_desgin_dark.png

This PR fixes #5127

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

[l5io]

🚀 Preview for commit bc8c529 at: https://655528b07d54b15c479f85d0--layer5.netlify.app

[abhijeetgauravm]

Hey @vishalvivekm Let's discuss this on website call tomorrow at 6:30 PM IST / 7 AM Central time. Please add this as an agenda item in the meeting minutes.