feat(theme): Implement automatic dark/light image switching for ktor #33
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
Open Ai Doc 1.0 Release
…te Vitepress to 2.0.0-alpha.11
Migrating from npm to pnpm and using Rolldown to build and update Vitepress to 2.0.0-alpha.11
Added a new markdown-it plugin that removes unnecessary whitespace after <br/> tags before rendering. This prevents extra blank lines from appearing between steps in tutorials. For example, in docs/kmp/compose-multiplatform-create-first-app.md, extra spaces after the <br/> tag caused step 3 and step 4 to render with an unwanted blank line. The <br/> itself is preserved to keep intended line breaks, but trailing spaces are stripped to ensure consistent formatting.
Introduces a new feature to automatically switch images when the user toggles between light and dark themes, replicating the behavior of JetBrains Writerside. This is achieved through a combination of a server-side build plugin and a client-side script: - A custom `markdown-it` plugin (`markdownItAutoPicture.js`) is added to the VitePress build process. It parses Markdown content and injects `data-light-src` and `data-dark-src` attributes into image tags for theme-aware loading. - The plugin is specifically designed to handle both standard Markdown image syntax (``) and, more importantly, raw `<img>` HTML tags found in the source `.topic` files, which are treated as `html_block` tokens by the parser. - A client-side script (`image-switcher.js`) is added to the theme. It uses a `MutationObserver` to efficiently detect theme changes on the `<html>` element and dynamically swaps the `src` attribute of the themed images. - Both the build plugin and the client script are optimized to only execute on pages under the `/ktor/` path. This improves performance and prevents unintended side-effects on other sections of the documentation.
Refactored the Card component's CSS to ensure proper rendering and readability across all device sizes, specifically addressing issues on mobile. Problem: - On mobile, cards had a fixed height, causing long content (like titles or descriptions) to be clipped and hidden. - Multi-line titles had insufficient line-height, leading to overlapping text. - Large padding and font sizes consumed excessive screen real estate on small devices, harming usability. Solution: - Replaced the fixed `height` on `.card` with `min-height` to allow cards to grow dynamically with their content. - Added a `line-height` to `.cardTitle` to ensure multi-line titles are legible. - Introduced media queries (`@media`) to: - Decrease `padding` within `.cardContent` on smaller screens. - Scale down `font-size` for titles and descriptions on mobile viewports for a more balanced layout.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
1. feat(theme): Implement automatic dark/light image switching for ktor
Introduces a new feature to automatically switch images when the user toggles between light and dark themes, replicating the behavior of JetBrains Writerside.
This is achieved through a combination of a server-side build plugin and a client-side script:
A custom
markdown-itplugin (markdownItAutoPicture.js) is added to the VitePress build process. It parses Markdown content and injectsdata-light-srcanddata-dark-srcattributes into image tags for theme-aware loading.The plugin is specifically designed to handle both standard Markdown image syntax (
) and, more importantly, raw<img>HTML tags found in the source.topicfiles, which are treated ashtml_blocktokens by the parser.A client-side script (
image-switcher.js) is added to the theme. It uses aMutationObserverto efficiently detect theme changes on the<html>element and dynamically swaps thesrcattribute of the themed images.Both the build plugin and the client script are optimized to only execute on pages under the
/ktor/path. This improves performance and prevents unintended side-effects on other sections of the documentation.2. fix: trim redundant spaces after <br/> in Markdown parsing
Added a new markdown-it plugin that removes unnecessary whitespace after <br/> tags before rendering. This prevents extra blank lines from appearing between steps in tutorials.
For example, in docs/kmp/compose-multiplatform-create-first-app.md, extra spaces after the <br/> tag caused step 3 and step 4 to render with an unwanted blank line. The <br/> itself is preserved to keep intended line breaks, but trailing spaces are stripped to ensure consistent formatting.
3. refactor(Component/DocCard): Implement robust responsive design
Refactored the Card component's CSS to ensure proper rendering and readability across all device sizes, specifically addressing issues on mobile.
Problem:
Solution:
heighton.cardwithmin-heightto allow cards to grow dynamically with their content.line-heightto.cardTitleto ensure multi-line titles are legible.@media) to:paddingwithin.cardContenton smaller screens.font-sizefor titles and descriptions on mobile viewports for a more balanced layout.