Skip to content

fix(website): correct docs edit links, API source links, and UI polish#82

Merged
PrzemyslawKlys merged 1 commit intomasterfrom
fix/website-editlinks-apidocs-source-ux-20260206
Feb 6, 2026
Merged

fix(website): correct docs edit links, API source links, and UI polish#82
PrzemyslawKlys merged 1 commit intomasterfrom
fix/website-editlinks-apidocs-source-ux-20260206

Conversation

@PrzemyslawKlys
Copy link
Member

Summary

  • fix docs Edit on GitHub to point to EvotecIT/CodeGlyphX (Website/...) instead of PSPublishModule/Samples/...
  • enable API source mapping in pipeline (sourceRoot + sourceUrl) so API pages link to exact .cs lines
  • improve API type page UX for new source action button and styled inherited-members checkbox
  • add explicit width/height metadata to style-board dataset and apply dimensions when runtime images are created
  • add decoding="async" for style-board runtime images

Validation

  • ./build.ps1 (Website)
  • optimize + audit steps completed successfully

Copilot AI review requested due to automatic review settings February 6, 2026 12:49
@claude
Copy link

claude bot commented Feb 6, 2026

Claude finished @PrzemyslawKlys's task —— View job


Code Review Complete ✅

Todo List:

  • Read and analyze all changed files
  • Review code quality and best practices
  • Check for potential bugs or issues
  • Assess performance considerations
  • Review security implications
  • Provide comprehensive feedback

Review Findings

This PR makes several focused improvements to the website documentation and API integration. Overall, the changes are well-implemented and align with the stated objectives. Here's my detailed analysis:

Positive Aspects

1. Documentation Link Fixes (Website/site.json:50-51)

"Template": "https://github.com/EvotecIT/CodeGlyphX/edit/master/{path}",
"PathBase": "Website"
  • Correctly fixes the "Edit on GitHub" links to point to the proper repository
  • Uses proper templating with {path} placeholder
  • Clean implementation following established patterns

2. API Source Mapping (Website/pipeline.json:73-74)

"sourceRoot": "../CodeGlyphX",
"sourceUrl": "https://github.com/EvotecIT/CodeGlyphX/blob/master/{path}#L{line}",
  • Enables direct linking from API documentation to source code
  • Proper path templating with both {path} and {line} placeholders
  • Will significantly improve developer experience

3. Enhanced Image Loading (Website/content/pages/index.scripts.html:210-218)

img.decoding = 'async';
if (item.width && item.height) {
  img.width = item.width;
  img.height = item.height;
} else {
  img.width = 400;
  img.height = 400;
}
  • Proper async decoding for better performance
  • Smart fallback to default dimensions when metadata unavailable
  • Prevents layout shifts during image loading

4. Comprehensive Style Board Metadata

  • All 41 style board entries now include explicit width and height properties
  • Consistent approach with proper fallbacks
  • Maintains data integrity

🎨 CSS Improvements (Website/static/css/api.css)

Enhanced UX Elements:

  • New .type-source-action styles (lines 444-461) for source code links
  • Better visual hierarchy and hover states
  • Consistent color theming with API accent colors

Responsive Design:

  • Proper styling for different screen sizes
  • Mobile-friendly interactions
  • Maintains accessibility standards

🔍 Potential Areas for Improvement

1. Minor Performance Consideration

  • The style board script loads all image metadata upfront. For 41 items, this is fine, but consider lazy loading strategies if the collection grows significantly.

2. Error Handling Enhancement

// Current fallback in lines 216-218 could be more robust
} else {
  img.width = 400;
  img.height = 400;
}
  • Consider logging when fallback dimensions are used for debugging
  • Could validate that width/height are reasonable values

3. Code Style

  • JavaScript formatting is consistent and follows established patterns
  • CSS follows the existing style guide well
  • JSON data is properly formatted

🛡️ Security Assessment

  • No security concerns identified
  • All external links use proper protocols
  • No injection vulnerabilities in the dynamic content generation
  • API source links are properly templated and escaped

🚀 Performance Considerations

  • decoding="async" is correctly implemented for non-blocking image rendering
  • Explicit image dimensions prevent layout shifts (CLS improvement)
  • CSS changes don't introduce performance regressions
  • JSON data size increase is minimal and acceptable

🧪 Test Coverage

  • Changes are primarily configuration and styling
  • Build validation passed successfully (as mentioned in PR description)
  • No breaking changes to existing functionality

Summary

This is a high-quality PR that makes targeted improvements to documentation UX and API integration. The implementation follows best practices, maintains consistency with the existing codebase, and delivers tangible user experience improvements.

Recommendation: ✅ Approve

The changes are focused, well-implemented, and provide clear value to users navigating the documentation and API reference.

@sonarqubecloud
Copy link

sonarqubecloud bot commented Feb 6, 2026

@PrzemyslawKlys PrzemyslawKlys merged commit 4e0d3ad into master Feb 6, 2026
13 checks passed
@PrzemyslawKlys PrzemyslawKlys deleted the fix/website-editlinks-apidocs-source-ux-20260206 branch February 6, 2026 12:52
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request fixes several website configuration and UI polish issues. It corrects the "Edit on GitHub" links to point to the correct CodeGlyphX repository instead of the PSPublishModule samples, enables API source mapping so API documentation pages can link to exact source code lines, improves the visual styling of API type pages with a new source action button and custom checkbox styling, and enhances the style-board image rendering by adding explicit width/height metadata and the decoding="async" attribute for better performance.

Changes:

  • Fixed Edit on GitHub links to use EvotecIT/CodeGlyphX repository with Website path base
  • Added API source mapping configuration (sourceRoot and sourceUrl) to enable links to source code
  • Added CSS styling for new API type page elements (source action button, custom checkbox styling)
  • Added explicit width/height dimensions to all 42 style-board JSON entries
  • Enhanced style-board image rendering with decoding="async" and dimension attributes

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
Website/site.json Updated EditLinks configuration to point to correct repository (EvotecIT/CodeGlyphX) and path base (Website)
Website/pipeline.json Added sourceRoot and sourceUrl for API documentation source mapping to GitHub
Website/static/data/style-board.json Added width and height metadata to all 42 style entries for better image rendering
Website/content/pages/index.scripts.html Added decoding="async" attribute and applied width/height dimensions to dynamically created images
Website/static/css/api.css Added styling for type-source-action button and custom checkbox styling for member-toggle, including light theme overrides

border-color: color-mix(in srgb, var(--border) 80%, #fff);
background: #fff;
}

Copy link

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The custom checkbox styling for .member-toggle input includes styles for the default theme and [data-theme="light"], but is missing corresponding styles for [data-theme="auto"] when prefers-color-scheme: light. This creates an inconsistency where the checkbox will not have the correct light theme styling when users have their theme set to "auto" and their system preference is light mode. You should add a matching rule within the @media (prefers-color-scheme: light) block similar to the [data-theme="light"] rule on line 1260-1262.

Suggested change
[data-theme="auto"] .member-toggle input {
border-color: color-mix(in srgb, var(--border) 80%, #fff);
background: #fff;
}

Copilot uses AI. Check for mistakes.
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f757307701

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines 853 to +855
.member-toggle input {
accent-color: var(--primary);
-webkit-appearance: none;
appearance: none;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Add visible focus state for custom member toggle

Replacing the native checkbox with appearance: none removes the browser’s default keyboard focus ring, but the new styles only define :hover and :checked states. On API type pages, keyboard users can tab to the inherited-members toggle without any visible focus indicator, which is an accessibility regression introduced by this change.

Useful? React with 👍 / 👎.

@codecov
Copy link

codecov bot commented Feb 6, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.74%. Comparing base (dc70533) to head (f757307).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master      #82      +/-   ##
==========================================
- Coverage   59.75%   59.74%   -0.01%     
==========================================
  Files         448      448              
  Lines       57814    57814              
  Branches    16563    16563              
==========================================
- Hits        34544    34543       -1     
  Misses      17565    17565              
- Partials     5705     5706       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants