Fix: Improve documentation image viewing with glightbox overlay [Resolves #2067]#2068
Open
Tharindu-Senanayake12 wants to merge 1 commit intowso2:mainfrom
Open
Fix: Improve documentation image viewing with glightbox overlay [Resolves #2067]#2068Tharindu-Senanayake12 wants to merge 1 commit intowso2:mainfrom
Tharindu-Senanayake12 wants to merge 1 commit intowso2:mainfrom
Conversation
Added mkdocs-glightbox to requirements.txt and mkdocs.yml. Applied the glightbox class to HTML image tags across the documentation to enable touch-friendly, full-screen image viewing.
Tharindu-Senanayake12
requested review from
GDLMadushanka,
SanojPunchihewa,
anupama-pathirage,
arunans23,
chanikag,
malakaganga,
rosensilva and
sajinieKavindya
as code owners
Contributor
WalkthroughThis pull request adds glightbox image lightbox functionality to the documentation. It modifies approximately 100+ documentation markdown files to include a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip CodeRabbit can generate a title for your PR based on the changes.Add |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 8
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
en/docs/learn/integration-tutorials/service-catalog-tutorial-for-data-services.md (1)
223-271:⚠️ Potential issue | 🟡 MinorAdd missing
alttext on several updated tutorial images.
imgtags on Line 223, Line 236, Line 240, Line 251, and Line 271 are missingalt, which hurts accessibility and may trigger markdown lint warnings.♿ Suggested patch
-<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-publish.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-publish.png"></a> +<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-publish.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-publish.png" alt="Publish data service API"></a> - <a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-api-overview.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-api-overview.png"></a> + <a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-api-overview.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-api-overview.png" alt="Data service API overview"></a> - <a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-developer-portal.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-developer-portal.png"></a> + <a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-developer-portal.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-developer-portal.png" alt="Developer portal API view"></a> - <a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-try-it.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-try-it.png"></a> + <a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-try-it.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-try-it.png" alt="Try out data service API"></a> - <a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-soap-request.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-soap-request.png"></a> + <a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-soap-request.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/data-service-soap-request.png" alt="SOAP request execution for data service"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/service-catalog-tutorial-for-data-services.md` around lines 223 - 271, Several tutorial images (data-service-publish.png, data-service-api-overview.png, data-service-developer-portal.png, data-service-try-it.png, data-service-soap-request.png) are missing alt attributes; add meaningful alt text to each <img> tag so they are accessible and pass markdown linting (e.g., alt="RDBMS data service publish screen", alt="RDBMS API overview in Developer portal", alt="Developer portal API console for RDBMSDataService", alt="Try it out response for Employee/{EmployeeNumber}", alt="SOAP request payload for RDBMSDataService"). Ensure the alt text describes the image purpose and update the img tags in the document accordingly.
🟡 Minor comments (20)
en/docs/learn/integration-tutorials/service-catalog-tutorial.md-394-394 (1)
394-394:⚠️ Potential issue | 🟡 MinorAdd alt text to improve accessibility.
The image is missing the
altattribute. This impacts accessibility for screen reader users.🔧 Proposed fix
-<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/api-overview-publish.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/api-overview-publish.png"></a> +<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/api-overview-publish.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/api-overview-publish.png" alt="API overview publish"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/service-catalog-tutorial.md` at line 394, The img tag for the api-overview-publish.png is missing an alt attribute; update the <img> element (the image inside the <a> link that references api-overview-publish.png) to include a concise, descriptive alt text (e.g., "API publishing overview diagram" or similar) that conveys the image's content for screen readers so accessibility is improved.en/docs/learn/integration-tutorials/service-catalog-tutorial.md-423-423 (1)
423-423:⚠️ Potential issue | 🟡 MinorAdd alt text to improve accessibility.
The image is missing the
altattribute.🔧 Proposed fix
-<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-overview.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-overview.png"></a> +<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-overview.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-overview.png" alt="Developer portal API overview"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/service-catalog-tutorial.md` at line 423, The <img> tag for developer-portal-api-overview.png inside the anchor (<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-overview.png" class="glightbox">) is missing an alt attribute; add a meaningful alt="" value (e.g., alt="Developer portal API overview diagram") to the <img> element to improve accessibility and screen-reader support.en/docs/learn/integration-tutorials/service-catalog-tutorial.md-419-419 (1)
419-419:⚠️ Potential issue | 🟡 MinorAdd alt text to improve accessibility.
The image is missing the
altattribute.🔧 Proposed fix
-<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-list.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-list.png"></a> +<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-list.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-list.png" alt="Developer portal API list"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/service-catalog-tutorial.md` at line 419, The <img> element for developer-portal-api-list.png is missing an alt attribute; add a concise, descriptive alt text to the <img> tag (e.g., alt="Developer portal API list screenshot") so the image inside the <a> remains accessible to screen readers and improves accessibility for the element referencing "{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-list.png".en/docs/learn/integration-tutorials/service-catalog-tutorial.md-427-427 (1)
427-427:⚠️ Potential issue | 🟡 MinorAdd alt text to improve accessibility.
The image is missing the
altattribute.🔧 Proposed fix
-<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-healthcare-api-try-it.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-healthcare-api-try-it.png"></a> +<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-healthcare-api-try-it.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-healthcare-api-try-it.png" alt="Developer portal Healthcare API try it"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/service-catalog-tutorial.md` at line 427, The <a class="glightbox"> anchor contains an <img> tag missing an alt attribute; update the <img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-healthcare-api-try-it.png"> element to include a meaningful alt text (e.g., "Developer portal: Healthcare API try-it interface") so the image is accessible to screen readers and improves SEO.en/docs/learn/integration-tutorials/service-catalog-tutorial.md-438-438 (1)
438-438:⚠️ Potential issue | 🟡 MinorAdd alt text to improve accessibility.
The image is missing the
altattribute.🔧 Proposed fix
-<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-try-it-execute.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-try-it-execute.png"></a> +<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-try-it-execute.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-try-it-execute.png" alt="Developer portal API try it execute"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/service-catalog-tutorial.md` at line 438, The img tag rendering the developer portal "try-it-execute" screenshot lacks an alt attribute which harms accessibility; update the HTML snippet containing the <img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-try-it-execute.png"> (inside the <a> anchor) to include a meaningful alt text (for example: alt="Developer portal API Try It Execute screenshot") so screen readers and accessibility tools can describe the image.en/docs/learn/integration-tutorials/sending-a-simple-message-to-a-datasource.md-230-230 (1)
230-230:⚠️ Potential issue | 🟡 MinorFix mismatched image link target.
At Line 230, the anchor points to.../c.pngbut the displayed image is.../input-mapping.png. This likely opens the wrong (or missing) asset in the lightbox.Suggested fix
-<a href="{{base_path}}/assets/img/learn/tutorials/data-service/c.png" class="glightbox"><img src="{{base_path}}/assets/img/learn/tutorials/data-service/input-mapping.png" width="80%"></a> +<a href="{{base_path}}/assets/img/learn/tutorials/data-service/input-mapping.png" class="glightbox"><img src="{{base_path}}/assets/img/learn/tutorials/data-service/input-mapping.png" alt="Input mapping view" width="80%"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/sending-a-simple-message-to-a-datasource.md` at line 230, The anchor href for the lightbox is pointing to "c.png" while the img src displays "input-mapping.png", causing a mismatched/lightbox to open the wrong asset; update the anchor href in the snippet (the <a> tag wrapping the image used for the lightbox) to reference the same file as the img src ("input-mapping.png") so the lightbox opens the displayed image.en/docs/learn/integration-tutorials/exposing-several-services-as-a-single-service.md-400-400 (1)
400-400:⚠️ Potential issue | 🟡 MinorLine 400 links to a different image than the one displayed.
hrefpoints toadd_http_post.png, but the embedded image isadd_http_get.png. This causes the lightbox to open a different screenshot than the visible one.Suggested fix
- <a href="{{base_path}}/assets/img/learn/tutorials/exposing-several-services/add_http_post.png" class="glightbox"><img src="{{base_path}}/assets/img/learn/tutorials/exposing-several-services/add_http_get.png" alt="Add HTTP GET" width="80%"></a> + <a href="{{base_path}}/assets/img/learn/tutorials/exposing-several-services/add_http_get.png" class="glightbox"><img src="{{base_path}}/assets/img/learn/tutorials/exposing-several-services/add_http_get.png" alt="Add HTTP GET" width="80%"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/exposing-several-services-as-a-single-service.md` at line 400, The anchor tag's href and the embedded img src are mismatched: href points to add_http_post.png while the img displays add_http_get.png; update the anchor's href in the anchor/img pair so both reference the same image filename (either change href to add_http_get.png or img src to add_http_post.png) in the anchor element containing the image to ensure the lightbox opens the visible screenshot.en/docs/reference/connectors/salesforce-connectors/sf-inbound-endpoint-example-cdc.md-22-22 (1)
22-22:⚠️ Potential issue | 🟡 MinorAnchor target and displayed image are inconsistent.
On Line 22, the thumbnail uses
diagram-cdc.pngbut lightbox opensdiagram.png. If this isn’t intentional, alignhrefwith the displayed CDC image to avoid opening the wrong diagram.Suggested fix
-<a href="{{base_path}}/assets/img/integrate/connectors/salesforce-inbound/diagram.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforce-inbound/diagram-cdc.png" title="Salesforce CDC Integration" alt="Salesforce CDC Integration"/></a> +<a href="{{base_path}}/assets/img/integrate/connectors/salesforce-inbound/diagram-cdc.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforce-inbound/diagram-cdc.png" title="Salesforce CDC Integration" alt="Salesforce CDC Integration"/></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/reference/connectors/salesforce-connectors/sf-inbound-endpoint-example-cdc.md` at line 22, The anchor's href and the img src are inconsistent: the <a> tag uses "diagram.png" while the <img> uses "diagram-cdc.png"; update the anchor href to point to "diagram-cdc.png" (so the glightbox opens the CDC thumbnail image) by changing the href value to match the img src, ensuring the lightbox and displayed thumbnail are the same resource.en/docs/reference/connectors/salesforce-connectors/3.x/sf-bulk-v2-connector-example.md-99-99 (1)
99-99:⚠️ Potential issue | 🟡 MinorAdd alt text to images for accessibility.
While the glightbox class has been correctly added, these images are missing alt text attributes, which is required for accessibility compliance (WCAG 2.1 Level A). Although this is a pre-existing issue, it should be addressed to ensure screen reader users can understand the image content.
♿ Proposed fix to add alt text
-<a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" width="800" /></a> +<a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" alt="Create job and upload file integration flow" width="800" /></a>-<a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/get-job-info.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/get-job-info.png" width="600" /></a> +<a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/get-job-info.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/get-job-info.png" alt="Get job info integration flow" width="600" /></a>-<a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/get-successful-results.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/get-successful-results.png" width="600" /></a> +<a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/get-successful-results.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/get-successful-results.png" alt="Get successful results integration flow" width="600" /></a>Also applies to: 110-110, 122-122
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/reference/connectors/salesforce-connectors/3.x/sf-bulk-v2-connector-example.md` at line 99, Add descriptive alt text attributes to the img elements used with the glightbox anchors in this document (e.g., the <img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" ... /> occurrences) so screen readers can convey the image content; update each <img> tag at the referenced spots (including the other two occurrences noted) to include an appropriate alt="..." value that succinctly describes the image (for example "Create job and upload file screenshot" or a context-specific description).en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/maven-archiver/pom.properties-1-3 (1)
1-3:⚠️ Potential issue | 🟡 MinorRemove the target/ directories from all custom inbound endpoint examples.
These are Maven build artifacts that should be generated by users when they build the projects locally. The documentation explicitly instructs users to run
mvn clean installand copy the generated zip file from/target, which means users are expected to build these projects themselves, not use pre-built artifacts.Build artifacts should not be committed to the repository. Either:
- Remove all
target/directories from these example projects (recommended), or- Add
target/to.gitignoreto prevent future commits of build artifactsThis applies to all three inbound endpoint examples:
custom_inbound_event_based/target/custom_inbound_listening/target/custom_inbound_polling/target/🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/maven-archiver/pom.properties` around lines 1 - 3, Remove committed Maven build artifacts by deleting the target/ directories under the three example projects (custom_inbound_event_based/target, custom_inbound_listening/target, custom_inbound_polling/target) and ensure future artifacts are ignored by adding target/ to the repository .gitignore; locate the example projects (where pom.properties contains artifactId=custom-event-based-inbound-consumer, groupId=org.apache.synapse.inbound, version=1.0.0 and the analogous poms for the other two examples), remove their target directories and commit the deletions, and add or update .gitignore to include the target/ pattern so build outputs are not re-committed.en/docs/reference/connectors/salesforce-connectors/2.x/salesforcebulk-v2-connector-example.md-159-159 (1)
159-159:⚠️ Potential issue | 🟡 MinorAdd
alttext for newly wrapped images.
These changed<img>tags are missingalt, which impacts accessibility and matches the MD045 warnings.✅ Suggested fix pattern
- <a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-data.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-data.png" width="800"/></a> + <a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-data.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-data.png" alt="Create job and upload data flow" width="800"/></a> -<a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" width="800" /></a> +<a href="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png" alt="Create job and upload file flow" width="800" /></a>Apply the same pattern to the other affected lines.
Also applies to: 203-203, 226-226, 252-252, 283-283, 306-306, 331-331, 354-354, 380-380
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/reference/connectors/salesforce-connectors/2.x/salesforcebulk-v2-connector-example.md` at line 159, The images wrapped by <a class="glightbox"> are missing alt attributes which breaks accessibility; update each <img> inside those anchors (e.g., the one with src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-data.png" and the other affected src paths at lines 203, 226, 252, 283, 306, 331, 354, 380) to include concise, descriptive alt text (for example "Create Job — upload data screenshot") so every <img> tag inside the glightbox anchors has an appropriate alt string.en/docs/develop/deploy-artifacts.md-48-48 (1)
48-48:⚠️ Potential issue | 🟡 MinorFix typo in image alt text (
dokcer→docker).
Small accessibility/documentation text quality fix.✅ Suggested fix
- <a href="{{base_path}}/assets/img/develop/build-docker.png" class="glightbox"><img src="{{base_path}}/assets/img/develop/build-docker.png" alt="dokcer" width="700"></a> + <a href="{{base_path}}/assets/img/develop/build-docker.png" class="glightbox"><img src="{{base_path}}/assets/img/develop/build-docker.png" alt="docker" width="700"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/develop/deploy-artifacts.md` at line 48, Update the image alt text that currently reads "dokcer" to the correct "docker" by editing the img tag's alt attribute value (look for the <img ... alt="dokcer" ...> occurrence) so the markup uses alt="docker" for improved accessibility and documentation quality.en/docs/get-started/quick-start-guide.md-25-25 (1)
25-25:⚠️ Potential issue | 🟡 MinorAdd missing
alttext for the quick-start GIF.
The image at Line 25 has noalt, which reduces accessibility and triggers markdown lint checks.✅ Suggested fix
-<a href="{{base_path}}/assets/img/integrate/quick-start-guide/mi-quick-start-guide.gif" class="glightbox"><img src="{{base_path}}/assets/img/integrate/quick-start-guide/mi-quick-start-guide.gif"></a> +<a href="{{base_path}}/assets/img/integrate/quick-start-guide/mi-quick-start-guide.gif" class="glightbox"><img src="{{base_path}}/assets/img/integrate/quick-start-guide/mi-quick-start-guide.gif" alt="Quick start integration flow"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/get-started/quick-start-guide.md` at line 25, The GIF anchor/img element lacks alt text; update the <a ...><img ...></a> fragment by adding a descriptive alt attribute to the <img> tag (e.g., alt="Quick Start Guide demo" or a brief description relevant to the GIF) so the <img> element inside the GLightbox anchor includes meaningful alt text for accessibility and linting.en/docs/reference/connectors/connector-tools/grpc/grpc-examples.md-25-25 (1)
25-25:⚠️ Potential issue | 🟡 MinorFix invalid image attribute on Line 25 (
hight→height).
hightis ignored by browsers, so the intended image sizing won’t apply.💡 Suggested fix
-<a href="{{base_path}}/assets/img/integrate/connectors/grpc-tool/1_seq_grpc.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/grpc-tool/1_seq_grpc.png" alt="generated connector" width="20%" hight="40%" ></a> +<a href="{{base_path}}/assets/img/integrate/connectors/grpc-tool/1_seq_grpc.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/grpc-tool/1_seq_grpc.png" alt="generated connector" width="20%" height="40%" ></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/reference/connectors/connector-tools/grpc/grpc-examples.md` at line 25, The img tag in the g-lightbox anchor uses an invalid attribute name "hight" which browsers ignore; update the <img> element (the tag that includes src="{{base_path}}/assets/img/integrate/connectors/grpc-tool/1_seq_grpc.png") to replace the "hight" attribute with the correct "height" attribute and keep the intended numeric value so the image sizing (width="20%" height="40%") is applied properly.en/docs/get-started/build-first-ai-integration/first-integration-ai-chatbot.md-89-89 (1)
89-89:⚠️ Potential issue | 🟡 MinorAlign thumbnail and lightbox target on Line 89.
The anchor
hrefand<img src>point to different files, so clicking opens a different image than the inline preview.💡 Suggested fix
-<a href="{{base_path}}/assets/img/get-started/build-first-integration/create_bank_api.png" class="glightbox"><img src="{{base_path}}/assets/img/get-started/build-first-ai-integration/chatbot/create_chat_api.png" alt="Create Chat API" width="80%"></a> +<a href="{{base_path}}/assets/img/get-started/build-first-ai-integration/chatbot/create_chat_api.png" class="glightbox"><img src="{{base_path}}/assets/img/get-started/build-first-ai-integration/chatbot/create_chat_api.png" alt="Create Chat API" width="80%"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/get-started/build-first-ai-integration/first-integration-ai-chatbot.md` at line 89, The anchor's href and the nested img src point to different images (href="create_bank_api.png" vs src="create_chat_api.png"); update one so both reference the same filename (either change the href to create_chat_api.png or the img src to create_bank_api.png) so the lightbox target matches the inline thumbnail (adjust the anchor's href or the img's src in the <a> href and <img src> elements accordingly).en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_polling/target/classes/uischema.json-52-53 (1)
52-53:⚠️ Potential issue | 🟡 MinorFix polling UI text copied from listener/SMS context.
For a polling inbound schema, Line 52 (“SMS message”) and Lines 133/143 (“Sample Listener Inbound configuration”) are misleading and should be renamed to polling-appropriate text.
Suggested wording update
- "helpTip": "Sequence to inject the SMS message" + "helpTip": "Sequence used to inject polled messages" - "displayName": "Sample Listener Inbound configuration 1", + "displayName": "Sample Polling Inbound configuration 1", - "helpTip": "Unique identifier for the Sample listener configuration." + "helpTip": "Unique identifier for the sample polling configuration." - "displayName": "Sample Listener Inbound configuration 2", + "displayName": "Sample Polling Inbound configuration 2", - "helpTip": "Unique identifier for the Sample listener configuration." + "helpTip": "Unique identifier for the sample polling configuration."Also applies to: 133-147
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_polling/target/classes/uischema.json` around lines 52 - 53, The UI text strings in uischema.json are copied from an SMS/listener context and need polling-appropriate wording: replace the helpTip value "Sequence to inject the SMS message" with something like "Sequence to inject the inbound polling message" (or "Sequence to inject the inbound message") and rename any headings labeled "Sample Listener Inbound configuration" to "Sample Polling Inbound configuration" (these occur elsewhere in the same uischema.json); update any other occurrences of "SMS" or "Listener" in that file to equivalent polling-specific terms to keep the schema consistent.en/docs/develop/advanced-development/applying-security-to-a-proxy-service.md-180-180 (1)
180-180:⚠️ Potential issue | 🟡 MinorAdd missing
alttext for accessibility (Line 180).The updated image tag at Line 180 has no
alt, which reduces screen-reader usability.Suggested fix
- <a href="{{base_path}}/assets/img/integrate/apply-security/soapui/invoking-username-token.jpg" class="glightbox"><img src="{{base_path}}/assets/img/integrate/apply-security/soapui/invoking-username-token.jpg"></a> + <a href="{{base_path}}/assets/img/integrate/apply-security/soapui/invoking-username-token.jpg" class="glightbox"><img src="{{base_path}}/assets/img/integrate/apply-security/soapui/invoking-username-token.jpg" alt="Invoke proxy service using username token security"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/develop/advanced-development/applying-security-to-a-proxy-service.md` at line 180, The image element in the documentation (the <img> tag inside the anchor linking to invoking-username-token.jpg) is missing an alt attribute; update that <img> element to include a concise, descriptive alt text (e.g., alt="Invoking Username Token in SOAPUI") to improve accessibility and screen-reader support, ensuring the text describes the image's content or purpose.en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/classes/uischema.json-20-20 (1)
20-20:⚠️ Potential issue | 🟡 MinorFix inconsistent UI/help text for event-based inbound fields.
Line 20/Line 52/Line 133/Line 143 still reference “Polling”, “SMS”, and “Listener” terminology in an event-based inbound schema. Please align wording to avoid operator confusion.
Also applies to: 52-52, 133-137, 143-147
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/classes/uischema.json` at line 20, Replace inconsistent UI/help text that references "Polling", "SMS", and "Listener" in the event-based inbound uischema: update the helpTip string "Unique identifier for the Polling event integration." (and the other occurrences at the same file) to an event-appropriate phrasing such as "Unique identifier for the event-based inbound integration."; likewise replace any occurrences of "SMS" in help text to "SMS inbound" or "SMS channel" and replace "Listener" to "Handler" (or "event handler") so all helpTip entries are consistent with the event-based inbound terminology (search for the exact helpTip strings shown in the diff to locate each field and update the text).en/docs/observe-and-manage/working-with-integration-control-plane.md-250-250 (1)
250-250:⚠️ Potential issue | 🟡 MinorAdd alt text for newly wrapped images (accessibility).
At Line 250, Line 258, Line 264, and Line 268, the
<img>tags are missingaltattributes (MD045). Please add descriptive alt text.Suggested patch
-<a href="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-home.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-home.png" width="1000"></a> +<a href="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-home.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-home.png" alt="Integration Control Plane home view" width="1000"></a> - <a href="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-select-group.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-select-group.png" width="1000"></a> + <a href="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-select-group.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-select-group.png" alt="Select MI server group in Integration Control Plane" width="1000"></a> - <a href="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-server-sidepanal.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-server-sidepanal.png" width="1000"></a> + <a href="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-server-sidepanal.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-server-sidepanal.png" alt="Server side panel details in Integration Control Plane" width="1000"></a> -<a href="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-list.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-list.png" width="300"></a> +<a href="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-list.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-list.png" alt="Artifact list in Integration Control Plane" width="300"></a>Also applies to: 258-258, 264-264, 268-268
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/observe-and-manage/working-with-integration-control-plane.md` at line 250, Add descriptive alt attributes to each newly wrapped <img> tag that lacks one: for images with src "{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-home.png" and the other three images referenced at the same section (lines showing <a ...><img src="{{base_path}}/assets/img/integrate/monitoring-dashboard/..."></a>), update the <img> elements to include meaningful alt text (e.g., "Monitoring dashboard artifact home view" or similar descriptions matching the image content) so each <img src="..."> has an appropriate alt attribute for accessibility compliance (MD045).en/docs/learn/integration-tutorials/service-catalog-tutorial-for-proxy-services.md-196-196 (1)
196-196:⚠️ Potential issue | 🟡 MinorAdd missing alt text on the newly wrapped image.
At Line 196, the
<img>has noaltattribute. Please add descriptive alt text to keep accessibility consistent with the rest of the page.Suggested patch
-<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/proxy-publish.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/proxy-publish.png"></a> +<a href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/proxy-publish.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/proxy-publish.png" alt="Publish API in the Publisher portal"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/learn/integration-tutorials/service-catalog-tutorial-for-proxy-services.md` at line 196, The <img> element wrapping proxy-publish.png (inside the <a class="glightbox">) is missing an alt attribute; update the <img src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/proxy-publish.png"> to include a concise, descriptive alt text (for example: alt="Proxy service publish dialog screenshot") so the image is accessible and consistent with other images on the page.
🧹 Nitpick comments (1)
en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_listening/target/classes/descriptor.yml (1)
1-12: Prefer not versioning generatedtarget/classesdescriptors.This looks like build output and can drift from the source descriptor. Consider keeping
src/main/resources/descriptor.ymlas the source of truth and generatingtarget/classesduring build instead.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_listening/target/classes/descriptor.yml` around lines 1 - 12, This generated descriptor.yml under target/classes should not be versioned; remove the committed target/classes/descriptor.yml, add target/classes/ to .gitignore (or explicitly ignore target/classes/descriptor.yml), and ensure the canonical descriptor remains at src/main/resources/descriptor.yml so the build copies/generates it into target/classes during the build (verify the build/copy task that produces descriptor.yml is present and functioning).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/classes/connector.xml`:
- Around line 1-23: Delete the built artifact under target (the committed
connector.xml from the build output) and remove the entire target/ directory
from version control, then add a rule to the repository .gitignore to exclude
target/ (so future Maven outputs like target/classes/connector.xml are not
committed); verify the canonical connector definition remains in
src/main/resources/connector.xml (referenced by zip-assembly.xml) and commit
only the source file changes.
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/classes/uischema.json`:
- Around line 1-153: The PR incorrectly adds an unrelated inbound artifact
schema (uischema.json containing id
"org.wso2.carbon.inbound.custom.event.SampleEventBasedInboundConsumer" and name
"SampleEventBasedInboundConsumer") into target/classes; remove or revert that
addition from this PR and move it into a separate, dedicated PR for the
SampleEventBasedInboundConsumer artifact. Specifically, delete the added JSON
for the artifact (the whole object with id/name above) from uischema.json in
this branch (or restore the file to its prior state) so this PR only includes
the image-lightbox changes, then create a follow-up PR that contains the
artifact schema addition.
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_listening/target/maven-archiver/pom.properties`:
- Around line 1-3: Remove the generated Maven artifact file pom.properties from
the commit and ensure it is not tracked going forward: delete the file from the
PR (use git rm --cached pom.properties if already committed) and add an
appropriate ignore rule for the target/ directory (e.g., add /target/ to
.gitignore) so Maven build outputs like target/pom.properties are excluded from
source control.
In
`@en/docs/get-started/build-first-ai-integration/first-integration-rag-chat.md`:
- Line 33: The anchor href and img src paths in first-integration-rag.md are
inconsistent (href uses build-ai-first-integration while src uses
build-first-ai-integration), breaking the glightbox; update the href to match
the img src (or vice versa) so both point to the same directory for
create_new_api.png (ensure the <a> tag's href and the <img> tag's src use the
identical path segment, e.g., build-first-ai-integration).
In `@en/docs/includes/reference/connectors/exporting-artifacts.md`:
- Around line 22-23: The anchor tag opened before the image (the <a> surrounding
the <img> in the snippet that links to the lightbox image) is not closed,
causing malformed HTML; fix it by adding the closing </a> tag immediately after
the <img ... /> element so the anchor properly wraps the image (locate the
anchor that begins with <a
href="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg"
class="glightbox"> and append the corresponding </a> after the image tag).
In
`@en/docs/learn/integration-tutorials/sending-a-simple-message-to-a-datasource.md`:
- Line 73: Several <img> tags (e.g., the image with filename
select_dataservice_artifact.png and the other updated images referenced around
lines 73, 79, 152, 162, 168, 176, 180, 218, 230, 262, 277, 283, 305, 316) are
missing alt attributes; update each <img> element in the markdown to include a
concise, descriptive alt="..." value that describes the image content (for
example "Select data service artifact screenshot") so accessibility and MD045
linting pass—locate each <img
src="{{base_path}}/assets/img/learn/tutorials/..."> and add an appropriate alt
string.
In `@en/docs/reference/connectors/file-connector/5.x/file-connector-example.md`:
- Line 212: The anchor element linking to
"{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" is
missing the <img> tag; move the alt and width attributes into an <img> inside
the <a> so the image displays (i.e., replace the empty <a ... alt="..."
width="..."></a> with <a href="..."><img src="..." alt="Test Create Operation"
width="900" /></a>), ensuring the href remains on the <a> and src/alt/width are
on the <img> so the file-con-execute.png image is visible and accessible.
In `@en/docs/reference/connectors/file-connector/6.x/file-connector-example.md`:
- Line 209: The anchor tag at the snippet is empty so the screenshot doesn't
render; place an <img> element inside the existing anchor (the <a
href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png"
class="glightbox" ...> tag) using the same path for src and include a
descriptive alt and width attribute (e.g.,
src="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png",
alt="Test Create Operation", width="900") so the image displays and the
glightbox lightbox functionality works.
---
Outside diff comments:
In
`@en/docs/learn/integration-tutorials/service-catalog-tutorial-for-data-services.md`:
- Around line 223-271: Several tutorial images (data-service-publish.png,
data-service-api-overview.png, data-service-developer-portal.png,
data-service-try-it.png, data-service-soap-request.png) are missing alt
attributes; add meaningful alt text to each <img> tag so they are accessible and
pass markdown linting (e.g., alt="RDBMS data service publish screen", alt="RDBMS
API overview in Developer portal", alt="Developer portal API console for
RDBMSDataService", alt="Try it out response for Employee/{EmployeeNumber}",
alt="SOAP request payload for RDBMSDataService"). Ensure the alt text describes
the image purpose and update the img tags in the document accordingly.
---
Minor comments:
In
`@en/docs/develop/advanced-development/applying-security-to-a-proxy-service.md`:
- Line 180: The image element in the documentation (the <img> tag inside the
anchor linking to invoking-username-token.jpg) is missing an alt attribute;
update that <img> element to include a concise, descriptive alt text (e.g.,
alt="Invoking Username Token in SOAPUI") to improve accessibility and
screen-reader support, ensuring the text describes the image's content or
purpose.
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/classes/uischema.json`:
- Line 20: Replace inconsistent UI/help text that references "Polling", "SMS",
and "Listener" in the event-based inbound uischema: update the helpTip string
"Unique identifier for the Polling event integration." (and the other
occurrences at the same file) to an event-appropriate phrasing such as "Unique
identifier for the event-based inbound integration."; likewise replace any
occurrences of "SMS" in help text to "SMS inbound" or "SMS channel" and replace
"Listener" to "Handler" (or "event handler") so all helpTip entries are
consistent with the event-based inbound terminology (search for the exact
helpTip strings shown in the diff to locate each field and update the text).
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/maven-archiver/pom.properties`:
- Around line 1-3: Remove committed Maven build artifacts by deleting the
target/ directories under the three example projects
(custom_inbound_event_based/target, custom_inbound_listening/target,
custom_inbound_polling/target) and ensure future artifacts are ignored by adding
target/ to the repository .gitignore; locate the example projects (where
pom.properties contains artifactId=custom-event-based-inbound-consumer,
groupId=org.apache.synapse.inbound, version=1.0.0 and the analogous poms for the
other two examples), remove their target directories and commit the deletions,
and add or update .gitignore to include the target/ pattern so build outputs are
not re-committed.
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_polling/target/classes/uischema.json`:
- Around line 52-53: The UI text strings in uischema.json are copied from an
SMS/listener context and need polling-appropriate wording: replace the helpTip
value "Sequence to inject the SMS message" with something like "Sequence to
inject the inbound polling message" (or "Sequence to inject the inbound
message") and rename any headings labeled "Sample Listener Inbound
configuration" to "Sample Polling Inbound configuration" (these occur elsewhere
in the same uischema.json); update any other occurrences of "SMS" or "Listener"
in that file to equivalent polling-specific terms to keep the schema consistent.
In `@en/docs/develop/deploy-artifacts.md`:
- Line 48: Update the image alt text that currently reads "dokcer" to the
correct "docker" by editing the img tag's alt attribute value (look for the <img
... alt="dokcer" ...> occurrence) so the markup uses alt="docker" for improved
accessibility and documentation quality.
In
`@en/docs/get-started/build-first-ai-integration/first-integration-ai-chatbot.md`:
- Line 89: The anchor's href and the nested img src point to different images
(href="create_bank_api.png" vs src="create_chat_api.png"); update one so both
reference the same filename (either change the href to create_chat_api.png or
the img src to create_bank_api.png) so the lightbox target matches the inline
thumbnail (adjust the anchor's href or the img's src in the <a> href and <img
src> elements accordingly).
In `@en/docs/get-started/quick-start-guide.md`:
- Line 25: The GIF anchor/img element lacks alt text; update the <a ...><img
...></a> fragment by adding a descriptive alt attribute to the <img> tag (e.g.,
alt="Quick Start Guide demo" or a brief description relevant to the GIF) so the
<img> element inside the GLightbox anchor includes meaningful alt text for
accessibility and linting.
In
`@en/docs/learn/integration-tutorials/exposing-several-services-as-a-single-service.md`:
- Line 400: The anchor tag's href and the embedded img src are mismatched: href
points to add_http_post.png while the img displays add_http_get.png; update the
anchor's href in the anchor/img pair so both reference the same image filename
(either change href to add_http_get.png or img src to add_http_post.png) in the
anchor element containing the image to ensure the lightbox opens the visible
screenshot.
In
`@en/docs/learn/integration-tutorials/sending-a-simple-message-to-a-datasource.md`:
- Line 230: The anchor href for the lightbox is pointing to "c.png" while the
img src displays "input-mapping.png", causing a mismatched/lightbox to open the
wrong asset; update the anchor href in the snippet (the <a> tag wrapping the
image used for the lightbox) to reference the same file as the img src
("input-mapping.png") so the lightbox opens the displayed image.
In
`@en/docs/learn/integration-tutorials/service-catalog-tutorial-for-proxy-services.md`:
- Line 196: The <img> element wrapping proxy-publish.png (inside the <a
class="glightbox">) is missing an alt attribute; update the <img
src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/proxy-publish.png">
to include a concise, descriptive alt text (for example: alt="Proxy service
publish dialog screenshot") so the image is accessible and consistent with other
images on the page.
In `@en/docs/learn/integration-tutorials/service-catalog-tutorial.md`:
- Line 394: The img tag for the api-overview-publish.png is missing an alt
attribute; update the <img> element (the image inside the <a> link that
references api-overview-publish.png) to include a concise, descriptive alt text
(e.g., "API publishing overview diagram" or similar) that conveys the image's
content for screen readers so accessibility is improved.
- Line 423: The <img> tag for developer-portal-api-overview.png inside the
anchor (<a
href="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-overview.png"
class="glightbox">) is missing an alt attribute; add a meaningful alt="" value
(e.g., alt="Developer portal API overview diagram") to the <img> element to
improve accessibility and screen-reader support.
- Line 419: The <img> element for developer-portal-api-list.png is missing an
alt attribute; add a concise, descriptive alt text to the <img> tag (e.g.,
alt="Developer portal API list screenshot") so the image inside the <a> remains
accessible to screen readers and improves accessibility for the element
referencing
"{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-list.png".
- Line 427: The <a class="glightbox"> anchor contains an <img> tag missing an
alt attribute; update the <img
src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-healthcare-api-try-it.png">
element to include a meaningful alt text (e.g., "Developer portal: Healthcare
API try-it interface") so the image is accessible to screen readers and improves
SEO.
- Line 438: The img tag rendering the developer portal "try-it-execute"
screenshot lacks an alt attribute which harms accessibility; update the HTML
snippet containing the <img
src="{{base_path}}/assets/img/integrate/tutorials/service-catalog/developer-portal-api-try-it-execute.png">
(inside the <a> anchor) to include a meaningful alt text (for example:
alt="Developer portal API Try It Execute screenshot") so screen readers and
accessibility tools can describe the image.
In `@en/docs/observe-and-manage/working-with-integration-control-plane.md`:
- Line 250: Add descriptive alt attributes to each newly wrapped <img> tag that
lacks one: for images with src
"{{base_path}}/assets/img/integrate/monitoring-dashboard/dashboard-artifact-home.png"
and the other three images referenced at the same section (lines showing <a
...><img
src="{{base_path}}/assets/img/integrate/monitoring-dashboard/..."></a>), update
the <img> elements to include meaningful alt text (e.g., "Monitoring dashboard
artifact home view" or similar descriptions matching the image content) so each
<img src="..."> has an appropriate alt attribute for accessibility compliance
(MD045).
In `@en/docs/reference/connectors/connector-tools/grpc/grpc-examples.md`:
- Line 25: The img tag in the g-lightbox anchor uses an invalid attribute name
"hight" which browsers ignore; update the <img> element (the tag that includes
src="{{base_path}}/assets/img/integrate/connectors/grpc-tool/1_seq_grpc.png") to
replace the "hight" attribute with the correct "height" attribute and keep the
intended numeric value so the image sizing (width="20%" height="40%") is applied
properly.
In
`@en/docs/reference/connectors/salesforce-connectors/2.x/salesforcebulk-v2-connector-example.md`:
- Line 159: The images wrapped by <a class="glightbox"> are missing alt
attributes which breaks accessibility; update each <img> inside those anchors
(e.g., the one with
src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-data.png"
and the other affected src paths at lines 203, 226, 252, 283, 306, 331, 354,
380) to include concise, descriptive alt text (for example "Create Job — upload
data screenshot") so every <img> tag inside the glightbox anchors has an
appropriate alt string.
In
`@en/docs/reference/connectors/salesforce-connectors/3.x/sf-bulk-v2-connector-example.md`:
- Line 99: Add descriptive alt text attributes to the img elements used with the
glightbox anchors in this document (e.g., the <img
src="{{base_path}}/assets/img/integrate/connectors/salesforcebulk-v2/create-job-upload-file.png"
... /> occurrences) so screen readers can convey the image content; update each
<img> tag at the referenced spots (including the other two occurrences noted) to
include an appropriate alt="..." value that succinctly describes the image (for
example "Create job and upload file screenshot" or a context-specific
description).
In
`@en/docs/reference/connectors/salesforce-connectors/sf-inbound-endpoint-example-cdc.md`:
- Line 22: The anchor's href and the img src are inconsistent: the <a> tag uses
"diagram.png" while the <img> uses "diagram-cdc.png"; update the anchor href to
point to "diagram-cdc.png" (so the glightbox opens the CDC thumbnail image) by
changing the href value to match the img src, ensuring the lightbox and
displayed thumbnail are the same resource.
---
Nitpick comments:
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_listening/target/classes/descriptor.yml`:
- Around line 1-12: This generated descriptor.yml under target/classes should
not be versioned; remove the committed target/classes/descriptor.yml, add
target/classes/ to .gitignore (or explicitly ignore
target/classes/descriptor.yml), and ensure the canonical descriptor remains at
src/main/resources/descriptor.yml so the build copies/generates it into
target/classes during the build (verify the build/copy task that produces
descriptor.yml is present and functioning).
Comment on lines
+1
to
+23
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <!-- | ||
| Copyright (c) 2025, WSO2 LLC. (http://www.wso2.org) All Rights Reserved. | ||
|
|
||
| WSO2 LLC. licenses this file to you under the Apache License, | ||
| Version 2.0 (the "License"); you may not use this file except | ||
| in compliance with the License. | ||
| You may obtain a copy of the License at | ||
|
|
||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| Unless required by applicable law or agreed to in writing, | ||
| software distributed under the License is distributed on an | ||
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | ||
| KIND, either express or implied. See the License for the | ||
| specific language governing permissions and limitations | ||
| under the License. | ||
| --> | ||
| <connector> | ||
| <component name="SampleEventBasedInboundConsumer" package="org.wso2.integration.inbound" > | ||
| <description>WSO2 Sample Event-based Inbound Endpoint</description> | ||
| </component> | ||
| </connector> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== References to this target artifact/path =="
rg -n 'custom_inbound_event_based/target|SampleEventBasedInboundConsumer|connector.xml'
echo
echo "== target-related ignore rules in repository =="
fd '^\.gitignore$' -x rg -n '(^|/)target/?$|/target/' {}
echo
echo "== Files currently committed under the custom inbound target tree =="
fd . en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/targetRepository: wso2/docs-mi
Length of output: 3872
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Searching .gitignore files with hidden files included =="
fd -H '^\.gitignore$' -x cat {} \;
echo
echo "== Directory structure around the custom_inbound_event_based path =="
ls -la en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/ | head -20
echo
echo "== Check if target directory itself is ignored in git status =="
git status --porcelain en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/ 2>&1 | head -20Repository: wso2/docs-mi
Length of output: 928
Remove target/ directory from version control and add it to .gitignore.
This file is under target/classes/, which is a standard Maven build-output directory that should never be committed to git. The source of truth is in src/main/resources/connector.xml (referenced explicitly in zip-assembly.xml). The repository's .gitignore is missing a rule to exclude target/ directories, which is standard practice for Maven projects.
Remove the committed target/ artifacts and add target/ to .gitignore.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/classes/connector.xml`
around lines 1 - 23, Delete the built artifact under target (the committed
connector.xml from the build output) and remove the entire target/ directory
from version control, then add a rule to the repository .gitignore to exclude
target/ (so future Maven outputs like target/classes/connector.xml are not
committed); verify the canonical connector definition remains in
src/main/resources/connector.xml (referenced by zip-assembly.xml) and commit
only the source file changes.
Comment on lines
+1
to
+153
| { | ||
| "id": "org.wso2.carbon.inbound.custom.event.SampleEventBasedInboundConsumer", | ||
| "name": "SampleEventBasedInboundConsumer", | ||
| "type": "event-integration", | ||
| "title": "SampleEventBasedInboundConsumer", | ||
| "help": "Configuration of Sample Event Based Inbound Endpoint", | ||
| "elements": [ | ||
| { | ||
| "type": "attributeGroup", | ||
| "value": { | ||
| "groupName": "Generic", | ||
| "elements": [ | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "name", | ||
| "displayName": "Event Integration Name", | ||
| "inputType": "string", | ||
| "required": true, | ||
| "helpTip": "Unique identifier for the Polling event integration." | ||
| } | ||
| }, | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "class", | ||
| "displayName": "Class Name", | ||
| "inputType": "string", | ||
| "required": true, | ||
| "hidden": true, | ||
| "defaultValue": "org.wso2.carbon.inbound.custom.event.SampleEventBasedInboundConsumer" | ||
| } | ||
| }, | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "generateSequences", | ||
| "displayName": "Automatically generate sequences", | ||
| "inputType": "checkbox", | ||
| "defaultValue": true | ||
| } | ||
| }, | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "sequence", | ||
| "displayName": "Injecting Sequence Name", | ||
| "inputType": "keyOrExpression", | ||
| "keyType": "sequence", | ||
| "required": true, | ||
| "enableCondition": [{"generateSequences":false}], | ||
| "helpTip": "Sequence to inject the SMS message" | ||
| } | ||
| }, | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "onError", | ||
| "displayName": "Error Sequence Name", | ||
| "inputType": "keyOrExpression", | ||
| "keyType": "sequence", | ||
| "required": false, | ||
| "enableCondition": [{"generateSequences":false}], | ||
| "helpTip": "Error sequence to invoke on fault" | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "type": "attributeGroup", | ||
| "value": { | ||
| "groupName": "Inbound Functional", | ||
| "elements": [ | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "inbound.behavior", | ||
| "displayName": "Inbound behavior", | ||
| "hidden": true, | ||
| "inputType": "string", | ||
| "defaultValue": "eventBased", | ||
| "required": true, | ||
| "helpTip": "Inbound behavior" | ||
| } | ||
| }, | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "sequential", | ||
| "displayName": "Execute sequentially", | ||
| "inputType": "checkbox", | ||
| "defaultValue": true, | ||
| "required": false, | ||
| "helpTip": "The behaviour when executing the given sequence." | ||
| } | ||
| }, | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "coordination", | ||
| "displayName": "Coordination", | ||
| "inputType": "checkbox", | ||
| "defaultValue": true, | ||
| "required": false, | ||
| "helpTip": "In a clustered setup, this will run the inbound only in a single worker node." | ||
| } | ||
| }, | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "suspend", | ||
| "displayName": "Suspend Inbound", | ||
| "inputType": "checkbox", | ||
| "defaultValue": false, | ||
| "hidden": false, | ||
| "required": false, | ||
| "helpTip": "Enable this option to suspend the inbound endpoint immediately after deployment." | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "type": "attributeGroup", | ||
| "value": { | ||
| "groupName": "Configuration Group 01", | ||
| "elements": [ | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "config1", | ||
| "displayName": "Sample Listener Inbound configuration 1", | ||
| "inputType": "string", | ||
| "required": true, | ||
| "helpTip": "Unique identifier for the Sample listener configuration." | ||
| } | ||
| }, | ||
| { | ||
| "type": "attribute", | ||
| "value": { | ||
| "name": "config2", | ||
| "displayName": "Sample Listener Inbound configuration 2", | ||
| "inputType": "string", | ||
| "required": false, | ||
| "helpTip": "Unique identifier for the Sample listener configuration." | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| ] | ||
| } |
Contributor
There was a problem hiding this comment.
Please split unrelated inbound artifact schema from this lightbox PR.
Line 1 adds a full new artifact schema under .../target/classes/..., which is outside the stated image-lightbox objective. This significantly broadens review/release scope; please move it to a separate PR.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_event_based/target/classes/uischema.json`
around lines 1 - 153, The PR incorrectly adds an unrelated inbound artifact
schema (uischema.json containing id
"org.wso2.carbon.inbound.custom.event.SampleEventBasedInboundConsumer" and name
"SampleEventBasedInboundConsumer") into target/classes; remove or revert that
addition from this PR and move it into a separate, dedicated PR for the
SampleEventBasedInboundConsumer artifact. Specifically, delete the added JSON
for the artifact (the whole object with id/name above) from uischema.json in
this branch (or restore the file to its prior state) so this PR only includes
the image-lightbox changes, then create a follow-up PR that contains the
artifact schema addition.
Comment on lines
+1
to
+3
| artifactId=custom-listening-inbound-endpoint | ||
| groupId=org.apache.synapse.inbound | ||
| version=1.0.0 |
Contributor
There was a problem hiding this comment.
Do not commit generated target/ build artifacts.
This file is Maven-generated metadata under a target/ path and should be excluded from source control. Please remove it from the PR (and ensure ignore rules cover this path).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@en/docs/develop/customizations/custom-artifacts/inbound-endpoint/custom_inbound_listening/target/maven-archiver/pom.properties`
around lines 1 - 3, Remove the generated Maven artifact file pom.properties from
the commit and ensure it is not tracked going forward: delete the file from the
PR (use git rm --cached pom.properties if already committed) and add an
appropriate ignore rule for the target/ directory (e.g., add /target/ to
.gitignore) so Maven build outputs like target/pom.properties are excluded from
source control.
| 1. Click on the add new API (`+`) icon in the `APIs` in the **WSO2 Integrator: MI Project Explorer** to create a new API. | ||
|
|
||
| <a href="{{base_path}}/assets/img/get-started/build-ai-first-integration/rag/create_new_api.png"><img src="{{base_path}}/assets/img/get-started/build-first-ai-integration/rag/create_new_api.png" alt="Create New Project" width="80%"></a> | ||
| <a href="{{base_path}}/assets/img/get-started/build-ai-first-integration/rag/create_new_api.png" class="glightbox"><img src="{{base_path}}/assets/img/get-started/build-first-ai-integration/rag/create_new_api.png" alt="Create New Project" width="80%"></a> |
Contributor
There was a problem hiding this comment.
Path mismatch between href and src will break lightbox.
The href uses build-ai-first-integration but src uses build-first-ai-integration. The lightbox will attempt to load a non-existent image.
🐛 Proposed fix
-<a href="{{base_path}}/assets/img/get-started/build-ai-first-integration/rag/create_new_api.png" class="glightbox"><img src="{{base_path}}/assets/img/get-started/build-first-ai-integration/rag/create_new_api.png" alt="Create New Project" width="80%"></a>
+<a href="{{base_path}}/assets/img/get-started/build-first-ai-integration/rag/create_new_api.png" class="glightbox"><img src="{{base_path}}/assets/img/get-started/build-first-ai-integration/rag/create_new_api.png" alt="Create New Project" width="80%"></a>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <a href="{{base_path}}/assets/img/get-started/build-ai-first-integration/rag/create_new_api.png" class="glightbox"><img src="{{base_path}}/assets/img/get-started/build-first-ai-integration/rag/create_new_api.png" alt="Create New Project" width="80%"></a> | |
| <a href="{{base_path}}/assets/img/get-started/build-first-ai-integration/rag/create_new_api.png" class="glightbox"><img src="{{base_path}}/assets/img/get-started/build-first-ai-integration/rag/create_new_api.png" alt="Create New Project" width="80%"></a> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@en/docs/get-started/build-first-ai-integration/first-integration-rag-chat.md`
at line 33, The anchor href and img src paths in first-integration-rag.md are
inconsistent (href uses build-ai-first-integration while src uses
build-first-ai-integration), breaking the glightbox; update the href to match
the img src (or vice versa) so both point to the same directory for
create_new_api.png (ensure the <a> tag's href and the <img> tag's src use the
identical path segment, e.g., build-first-ai-integration).
Comment on lines
+22
to
23
| <a href="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" class="glightbox"><img src="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" title="Selecting Connector from Workspace" width="60%" alt="Selecting Connector from Workspace" /> | ||
|
|
Contributor
There was a problem hiding this comment.
Close the anchor tag to avoid malformed markup.
Line 22 opens an <a> but does not close it. This can break rendering/lightbox behavior for subsequent content.
💡 Suggested fix
- <a href="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" class="glightbox"><img src="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" title="Selecting Connector from Workspace" width="60%" alt="Selecting Connector from Workspace" />
+ <a href="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" class="glightbox"><img src="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" title="Selecting Connector from Workspace" width="60%" alt="Selecting Connector from Workspace" /></a>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <a href="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" class="glightbox"><img src="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" title="Selecting Connector from Workspace" width="60%" alt="Selecting Connector from Workspace" /> | |
| <a href="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" class="glightbox"><img src="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg" title="Selecting Connector from Workspace" width="60%" alt="Selecting Connector from Workspace" /></a> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@en/docs/includes/reference/connectors/exporting-artifacts.md` around lines 22
- 23, The anchor tag opened before the image (the <a> surrounding the <img> in
the snippet that links to the lightbox image) is not closed, causing malformed
HTML; fix it by adding the closing </a> tag immediately after the <img ... />
element so the anchor properly wraps the image (locate the anchor that begins
with <a
href="https://apim.docs.wso2.com/en/4.1.0/assets/img/integrate/connectors/adding-connector-to-exporter-project-3.jpg"
class="glightbox"> and append the corresponding </a> after the image tag).
| 2. Select **Data Service** under **Other Artifacts** to open the **Data Service Form**. | ||
|
|
||
| <a href="{{base_path}}/assets/img/learn/tutorials/data-service/select_dataservice_artifact.png"><img src="{{base_path}}/assets/img/learn/tutorials/data-service/select_dataservice_artifact.png" width="80%"></a> | ||
| <a href="{{base_path}}/assets/img/learn/tutorials/data-service/select_dataservice_artifact.png" class="glightbox"><img src="{{base_path}}/assets/img/learn/tutorials/data-service/select_dataservice_artifact.png" width="80%"></a> |
Contributor
There was a problem hiding this comment.
Add missing alt text to updated images.
The changed <img> tags at Line 73, Line 79, Line 152, Line 162, Line 168, Line 176, Line 180, Line 218, Line 230, Line 262, Line 277, Line 283, Line 305, and Line 316 are missing alt, which hurts accessibility and fails markdown lint (MD045).
Suggested fix pattern
-<a href="{{base_path}}/assets/img/learn/tutorials/data-service/select_dataservice_artifact.png" class="glightbox"><img src="{{base_path}}/assets/img/learn/tutorials/data-service/select_dataservice_artifact.png" width="80%"></a>
+<a href="{{base_path}}/assets/img/learn/tutorials/data-service/select_dataservice_artifact.png" class="glightbox"><img src="{{base_path}}/assets/img/learn/tutorials/data-service/select_dataservice_artifact.png" alt="Select Data Service artifact" width="80%"></a>Also applies to: 79-79, 152-152, 162-162, 168-168, 176-176, 180-180, 218-218, 230-230, 262-262, 277-277, 283-283, 305-305, 316-316
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 73-73: Images should have alternate text (alt text)
(MD045, no-alt-text)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@en/docs/learn/integration-tutorials/sending-a-simple-message-to-a-datasource.md`
at line 73, Several <img> tags (e.g., the image with filename
select_dataservice_artifact.png and the other updated images referenced around
lines 73, 79, 152, 162, 168, 176, 180, 218, 230, 262, 277, 283, 305, 316) are
missing alt attributes; update each <img> element in the markdown to include a
concise, descriptive alt="..." value that describes the image content (for
example "Select data service artifact screenshot") so accessibility and MD045
linting pass—locate each <img
src="{{base_path}}/assets/img/learn/tutorials/..."> and add an appropriate alt
string.
| ``` | ||
|
|
||
| <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" alt="Test Create Operation" width="900"></a> | ||
| <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox" alt="Test Create Operation" width="900"></a> |
Contributor
There was a problem hiding this comment.
Fix malformed HTML - missing <img> tag.
The anchor tag at line 212 is missing the <img> element. The alt and width attributes are incorrectly placed on the <a> tag instead of being part of an <img> tag.
Current (broken):
<a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox" alt="Test Create Operation" width="900"></a>This will render as an empty link with no visible image.
🐛 Proposed fix
- <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox" alt="Test Create Operation" width="900"></a>
+ <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox"><img src="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" alt="Test Create Operation" width="900"></a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@en/docs/reference/connectors/file-connector/5.x/file-connector-example.md` at
line 212, The anchor element linking to
"{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" is
missing the <img> tag; move the alt and width attributes into an <img> inside
the <a> so the image displays (i.e., replace the empty <a ... alt="..."
width="..."></a> with <a href="..."><img src="..." alt="Test Create Operation"
width="900" /></a>), ensuring the href remains on the <a> and src/alt/width are
on the <img> so the file-con-execute.png image is visible and accessible.
| ``` | ||
|
|
||
| <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" alt="Test Create Operation" width="900"></a> | ||
| <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox" alt="Test Create Operation" width="900"></a> |
Contributor
There was a problem hiding this comment.
Broken image markup at Line 209 (empty anchor).
The changed tag no longer renders the screenshot because the <img> element is missing. This also undermines lightbox usability.
✅ Suggested fix
- <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox" alt="Test Create Operation" width="900"></a>
+ <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox">
+ <img src="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" alt="Test Create Operation" width="900"/>
+ </a>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox" alt="Test Create Operation" width="900"></a> | |
| <a href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" class="glightbox"> | |
| <img src="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png" alt="Test Create Operation" width="900"/> | |
| </a> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@en/docs/reference/connectors/file-connector/6.x/file-connector-example.md` at
line 209, The anchor tag at the snippet is empty so the screenshot doesn't
render; place an <img> element inside the existing anchor (the <a
href="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png"
class="glightbox" ...> tag) using the same path for src and include a
descriptive alt and width attribute (e.g.,
src="{{base_path}}/assets/img/integrate/connectors/file-5.x/file-con-execute.png",
alt="Test Create Operation", width="900") so the image displays and the
glightbox lightbox functionality works.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
Resolves #2067
The current documentation opens images directly in a browser tab when clicked, forcing users to manually navigate back to continue reading. This interrupts the reading flow, especially when viewing complex architecture diagrams.
Goals
Add a lightbox feature to enlarge documentation images without navigating away from the page and improve the UX.
Approach
Added mkdocs-glightbox==0.3.1 to en/requirements.txt.
Configured the glightbox plugin in en/mkdocs.yml.
Many images in the repository use custom HTML tags instead of Markdown. To support the plugin, a global regex replacement was performed:
This safely injects the class="glightbox" attribute so the plugin can detect and render images in the lightbox without breaking the existing HTML structure.
User stories
As a documentation reader, I want to click complex architecture diagrams and view them in a larger format without leaving the current page, so I can close the diagram and continue reading easily.
Release note
Added an interactive full screen lightbox feature to documentation images to improve readability and diagram inspection.
Documentation
N/A. This PR enhances the documentation site's UI/UX behavior.
Training
N/A. Documentation UI enhancement only.
Certification
N/A. This change does not affect certification exams.
Marketing
N/A
Automation tests
Security checks
Related PRs
Migrations (if applicable)
Test environment
Tested locally using mkdocs serve to verify that standardizing the image syntax successfully triggers the lightbox overlay without causing build warnings.
Learning
Explored MkDocs Material community plugins for image zoom functionality and selected mkdocs-glightbox due to its clean UI and touch support. Regex based refactoring was used to update existing HTML anchor tags across the repository so the plugin can detect and render images properly.
Summary by CodeRabbit
Documentation
Chores