ix icon indicating copy to clipboard operation
ix copied to clipboard

docs: publish component documentation as package

Open danielleroux opened this issue 1 month ago โ€ข 7 comments

๐Ÿ†• What is the new behavior?

Generate single markdowns combine with examples to support code assistants like GitHub Copilot to understand ix.

  • Generate readme markdown files for each component
  • Generate meta file inside html-test-app to detect components used inside examples

๐Ÿ Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

  • [ ] ๐Ÿฆฎ Accessibility (a11y) features were implemented
  • [ ] ๐Ÿ—บ๏ธ Internationalization (i18n) - no hard coded strings
  • [ ] ๐Ÿ“ฒ Responsiveness - components handle viewport changes and content overflow gracefully
  • [ ] ๐Ÿ“• Add or update a Storybook story
  • [ ] ๐Ÿ“„ Documentation was reviewed/updated siemens/ix-docs
  • [ ] ๐Ÿงช Unit tests were added/updated and pass (pnpm test)
  • [ ] ๐Ÿ“ธ Visual regression tests were added/updated and pass (Guide)
  • [ ] ๐Ÿง Static code analysis passes (pnpm lint)
  • [x] ๐Ÿ—๏ธ Successful compilation (pnpm build, changes pushed)

๐Ÿ‘จโ€๐Ÿ’ป Help & support

danielleroux avatar Oct 31 '25 12:10 danielleroux

๐Ÿฆ‹ Changeset detected

Latest commit: 0ad33f08a7956a218ad16157b683c008206655f2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@siemens/ix-docs Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Oct 31 '25 12:10 changeset-bot[bot]

Summary of Changes

Hello @danielleroux, I'm Gemini Code Assist[^1]! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly improves the documentation infrastructure by automating the generation of component README files. The new system combines existing component documentation with live code examples from HTML, React, Vue, and Angular test applications. This enhancement aims to provide more accurate and comprehensive documentation, particularly beneficial for AI-powered code assistants like GitHub Copilot, by offering a unified view of each component's functionality and usage across different frameworks. Additionally, it includes a mechanism to track component usage within examples, which underpins the example collection process.

Highlights

  • Automated Component README Generation: Introduced a new build step to automatically generate comprehensive README files for each component, including properties, dependencies, and code examples from various frameworks (HTML, React, Vue, Angular).
  • Component Usage Detection: Implemented a Vite plugin to detect and map component usage within example files, generating component-usage.json and component-usage-by-component.json files. This meta-information is crucial for the README generation process.
  • Enhanced Documentation Structure: The generated READMEs now include detailed dependency graphs (Mermaid syntax) and categorized code examples (HTML, React, Vue, Angular, Angular Standalone) to provide a richer understanding of each component.
  • Build Process Integration: Integrated the new documentation generation logic into the main build script (packages/documentation/scripts/build.ts) and the Stencil configuration, ensuring that component READMEs are always up-to-date with the latest examples and component metadata.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with :thumbsup: and :thumbsdown: on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

[^1]: Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

gemini-code-assist[bot] avatar Oct 31 '25 12:10 gemini-code-assist[bot]

/release:pr

danielleroux avatar Nov 03 '25 09:11 danielleroux

A new release has been made for this PR. You can install it with:

Core library:

npm i @siemens/[email protected]

Angular:

npm i @siemens/[email protected]

React:

npm i @siemens/[email protected]

Vue:

npm i @siemens/[email protected]

github-actions[bot] avatar Nov 03 '25 09:11 github-actions[bot]

/release:pr

danielleroux avatar Nov 03 '25 10:11 danielleroux

A new release has been made for this PR. You can install it with:

Core library:

npm i @siemens/[email protected]

Angular:

npm i @siemens/[email protected]

React:

npm i @siemens/[email protected]

Vue:

npm i @siemens/[email protected]

github-actions[bot] avatar Nov 03 '25 10:11 github-actions[bot]