feat/specify cardstack tags order and colour #2794
Conversation
Allow users to define tag order and custom colors using a <tags> element inside <cardstack>. Tags can be assigned hex colors and will appear in the specified order. Features: - Parse <tags> element containing <tag> definitions with name and color attributes - Support custom hex colors (e.g., #28a745) for tag badges - Automatically calculate text color (black/white) based on background luminance - Apply custom tag ordering - defined tags appear first, undefined tags follow with default colors - Escape JSON in HTML attributes using HTML entities to prevent SSR warnings Implementation: - MdAttributeRenderer: Extract tag configs from <tags> element, store as data-tag-configs attribute with HTML entity escaping - NodeProcessor: Process cardstack nodes to extract tag configurations - CardStack.vue: Parse tag configs, apply custom ordering and colors to filter badges - Card.vue: Apply matching custom colors to card tags Backward compatible: CardStacks without <tags> element continue to use default Bootstrap color cycling.
Document the new <tags> element feature that allows users to: - Define custom tag order within cardstacks - Assign custom hex colors to tags - Have undefined tags appear with default colors after custom tags Includes: - New documentation section "Custom Tag Order and Colors" - Example demonstrating <tags> and <tag> usage with hex colors - Updated options table documenting <tags> and <tag> elements with their attributes
Rebuild minified CSS and JavaScript bundles to include: - CardStack and Card component changes for custom tag ordering and colors - HTML entity escaping for tag configurations - Text color calculation for custom hex color backgrounds
Update expected test outputs to include new CSS and JS bundles with CardStack custom tag ordering and color features. Test snapshots updated for all test sites: - test_site - test_site_algolia_plugin - test_site_convert (basic and navigation) - test_site_special_tags - test_site_table_plugin - test_site_templates (default, minimal, portfolio, project) Changes include updated markbind.min.css and markbind.min.js files with the new CardStack component code.
- Add component reference to cardStackRef object - Fix updateTagMapping to access props via component reference instead of this.$parent - Ensure custom tag configs are properly accessible during tag mapping updates
- Update all test snapshots with rebuilt dist files - Reflects changes from component reference fix in CardStack.vue
|
Thanks for taking this up, @yihao03 |
- Update to vfmPlugin API (was createVfm) in index.js - Remove unused import of vue-final-modal CSS (not exported in new version) - Use inject() for $vfm in Trigger component (was useVfm composable) - Change vfm.open() to vfm.show() per new API in Trigger component - Update Modal tests to manually provide $vfm instead of using plugin - Remove unused vfmPlugin import from Modal tests - Rebuild dist files with new API - Update functional test snapshots - Update Modal test snapshots All tests passing after vue-final-modal library update.
|
Need to settle conflicts and update branch to latest https://markbind.org/devdocs/devGuide/development/workflow.html#editing-frontend-features
Bc of the commit 9f123c1 , and the subsequent snapshot update that committed all changes of binaries to test sites, the PR is quite polluted, and it is quite hard to review or merge. Additionally, if no changes to font files shouldn't commit as per dev docs It might be easier for you to close this PR, understand the changes made by AI for the cardstack, and open a new unpolluted PR synced with the current master (remember to update your fork) |
There was a problem hiding this comment.
- Need to settle conflicts and update branch to latest
- Also if possible revert committed binaries and snapshots
- Might be better to open a fresh new PR with targeted changes
- Also the PR description try not to include the commit messages at the top, duplicate info
You also need to verify the AI output before opening a PR... otherwise at least keep it as a draft PR
- E.g. Testing instructions:
npm run setupinstead ofnpm run build:web markbind serve -dinstead of manually calling the entry binary js file
etc etc.
Cheers!
|
Noted the changes required, will study the changes made by AI and manually implement them in a separate PR |
3 participants
What is the purpose of this pull request?
Overview of changes:
Add functionality to allow users to specify tags order and colour mentioned in issue #2783
<tags>element that can be nested inside<cardstack>to define custom tag configurations<tag>element supportsname(required) andcolor(optional, hex format) attributes<tags>element<tags>appear after custom tags with default Bootstrap colors<tags>continue to work as beforeAnything you'd like to highlight/discuss:
This PR is done for the CS3281 Week 2 activity: Creating a PR with AI Assistance.
Following the recent controversies around ClaudeCode and OpenCode, I have decided to push OpenCode
and see how far it could go. Specifically, I have used OpenCode with Claude Sonnet 4.5 through GitHub Copilot.
All code changes is almost entirely generated by the AI, with minimal human intervention.
Testing instructions:
npm run build:webcd docs && ../packages/cli/index.js servehttp://localhost:8080/userGuide/syntaxReference.htmlin your browserProposed commit message: (wrap lines at 72 characters)
Add custom tag order and colors for CardStack component
Allow users to customize the order and colors of tags in CardStack
components using a new element with nested elements.
Users can now specify tag order and colors like:
...Fixes #2783
Checklist: ☑️
Reviewer checklist:
Indicate the SEMVER impact of the PR:
At the end of the review, please label the PR with the appropriate label:
r.Major,r.Minor,r.Patch.Breaking change release note preparation (if applicable):