Map category names to their respective icons for tutorial bullet points#11091
Map category names to their respective icons for tutorial bullet points#11091
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request adds support for mapping block category names (like "variables", "sprites", "logic") to their corresponding Semantic UI icons in tutorial bullet points. This enhancement allows tutorial authors to use category names directly (e.g., :variables:) instead of having to remember specific icon names (e.g., :align justify:), making tutorial markdown more intuitive and maintainable.
Changes:
- Added a
categoryIconMapproperty to map category names to Semantic UI icon class names - Updated the
renderBulletsmethod to check category mappings before falling back to standard icon resolution - Maintains backward compatibility with existing icon syntax
| if (iconClasses.length) { | ||
| icon.className = `ui icon ${iconClasses.join(" ")}`; | ||
| // Check if there's a category icon mapping first | ||
| const categoryIcon = this.categoryIconMap[iconNameString]; |
There was a problem hiding this comment.
The categoryIconMap lookup is case-sensitive, but the bulletRegex is case-insensitive. This means that if a tutorial author writes :Variables: or :SPRITES: instead of :variables: or :sprites:, the category mapping will not be found and the code will fall back to checking individual words against semanticIconNames. Consider normalizing the iconNameString to lowercase before the categoryIconMap lookup to make the feature more robust and user-friendly. For example: const categoryIcon = this.categoryIconMap[iconNameString.toLowerCase()];
| // Map of block categories to their Semantic UI icon names for use in tutorial bullets | ||
| protected readonly categoryIconMap: pxt.Map<string> = { | ||
| "variables": "align justify", | ||
| "loops": "redo", | ||
| "logic": "random", | ||
| "math": "calculator", | ||
| "arrays": "list ol", | ||
| "text": "text width", | ||
| "controller": "game", | ||
| "sprites": "paper plane", | ||
| "scene": "tree", | ||
| "info": "id card", | ||
| "music": "headphones", | ||
| "animation": "sync", | ||
| "images": "image", | ||
| "console": "terminal", | ||
| }; |
There was a problem hiding this comment.
Consider adding a JSDoc comment above the categoryIconMap property to document its purpose, expected usage, and format. This would help future developers understand what category names are expected and how the icon mappings work. For example, documenting that keys should be lowercase category names and values should be valid Semantic UI icon class names.
1 participant
Closes microsoft/pxt-arcade#7373
Here's a preview:
