Fix blog code blocks and syntax highlighting #8
Conversation
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
- Add syntax-highlighted code blocks with copy button functionality - Improve code block color contrast with better Shiki themes (github-light/github-dark-dimmed) - Add support for Docusaurus-style admonitions (:::tip:::, :::warning:::, etc.) - Replace emoji icons with professional SVG icons from simple-icons for social share buttons - Add hover effects and visual feedback for copy buttons - Improve accessibility with proper aria-labels Technical changes: - Install remark-directive and remark-admonitions for MDX admonition support - Add custom remark plugin to handle admonition rendering - Add CSS styles for 5 admonition types (tip, warning, danger, note, info) - Implement JavaScript code block copy functionality - Update BlogPostLayout to use SocialIcon component for Twitter/LinkedIn
- Create new FlagIcon component with SVG-based US and Vietnam flags - Update LanguageBadge to use SVG flags instead of Unicode emoji (🇺🇸, 🇻🇳) - Update LanguageSwitcher to display flag icons instead of text (EN/VI) - SVG flags render consistently across all browsers and operating systems - Improves accessibility and visual consistency This fixes the issue where Unicode emoji flags don't render properly on some browsers and operating systems.
- Remove language text label from switcher button - Display only the flag icon for cleaner UI - Increase flag size from w-5 to w-6 for better visibility - Keep aria-label and title for accessibility
- Add Japan flag (jp) support to FlagIcon component - Update blog index pages to use FlagIcon component instead of emoji - Remove all Unicode emoji flags (🇺🇸, 🇻🇳, 🇯🇵) from codebase - Update i18n translation files (en.ts, vi.ts) to remove emoji flags - Update constants.ts to remove emoji flags from tagline and country Benefits: - Consistent rendering across all browsers and operating systems - No more missing/broken emoji flags on older systems - Better accessibility with SVG icons - Cleaner, more professional appearance Files modified: - src/components/FlagIcon.astro (added Japan flag) - src/pages/blog/index.astro (use FlagIcon component) - src/pages/vi/blog/index.astro (use FlagIcon component) - src/i18n/en.ts (removed emoji from bio, location, language labels) - src/i18n/vi.ts (removed emoji from bio, location, language labels) - src/utils/constants.ts (removed emoji from tagline and education country)
- Change flag icons from square (24x24) to rectangular (30x20) viewBox - Use 3:2 aspect ratio which matches standard country flag proportions - Update default class from w-4 h-4 to w-6 h-4 for better visibility - Adjust star positions and counts for US flag to fit new dimensions - Make flags look more natural and recognizable
- Change from w-6 h-6 (square) to w-9 h-6 (rectangular) - Maintains 3:2 aspect ratio to match flag icon viewBox - Prevents flag from being cropped in language switcher
- Revert from 30x20 rectangular to 24x24 square viewBox - Change LanguageSwitcher from w-9 h-6 back to w-6 h-6 - Change default flag size from w-6 h-4 back to w-5 h-5 - Square format works better for consistent display
- Remove flag icon from language switcher - Show simple 'EN' or 'VI' text instead - Simpler, cleaner, and more reliable than flag icons - Adjust padding from p-2 to px-3 py-2 for better text spacing
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Technical changes: