Skip to content

Comments

feat: migrate article content to Markdown and implement custom Vue transformers#180

Open
ImadSaddik wants to merge 103 commits intomasterfrom
feat/transform_md_to_vue
Open

feat: migrate article content to Markdown and implement custom Vue transformers#180
ImadSaddik wants to merge 103 commits intomasterfrom
feat/transform_md_to_vue

Conversation

@ImadSaddik
Copy link
Owner

@ImadSaddik ImadSaddik commented Feb 21, 2026

Pull request

Description

This PR transitions the codebase from writing articles using .vue components to Markdown. In this PR:

  • All articles are migrated from .vue and codeSnippets.js files into structured .md files.
  • New syntax was introduced to .md to be able to use my custom components. Read about that in this README.
  • The frontend uses a single, reusable ArticlePage.vue component, replacing separate implementations for BlogPage.vue, CoursePage.vue, and AstronomyPage.vue.
  • Used unplugin-vue-markdown and unplugin-vue-components for automatic component imports and markdown processing.
  • Added a comprehensive suite of unit tests for all new Markdown transformers and updated existing component tests to match the new architecture.

This refactoring significantly reduces the codebase size and provides a much more scalable foundation for future content.

Closes #171

Checklist

Check what applies:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have used LLMs responsibly to assist in writing code
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have performed linting and formatting checks
  • I have updated the documentation accordingly

…and scroll offset in TableOfContents component
@ImadSaddik ImadSaddik self-assigned this Feb 21, 2026
@ImadSaddik ImadSaddik added enhancement New feature or request Refactor Pull requests that refactor code developer experience Improvements to the developer experience Frontend Pull requests that change something in the frontend labels Feb 21, 2026
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @ImadSaddik, I'm Gemini Code Assist1! 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 introduces a fundamental shift in how articles are managed and rendered on the frontend. By transitioning from individual Vue components to a unified Markdown-based system, the codebase is simplified, making content creation and maintenance more efficient. The new architecture leverages custom Markdown transformers to seamlessly integrate rich, interactive Vue components directly into static Markdown files, enhancing the flexibility and scalability of content presentation.

Highlights

  • Markdown Migration for Articles: All article content has been migrated from dedicated Vue components and JavaScript code snippet files to structured Markdown (.md) files, significantly streamlining content management.
  • Custom Markdown Transformation Pipeline: A custom Markdown transformation pipeline has been implemented using unplugin-vue-markdown and markdown-it plugins, allowing for the use of custom Vue components directly within Markdown content.
  • Consolidated Article Rendering: The separate BlogPage.vue, CoursePage.vue, and AstronomyPage.vue components have been replaced by a single, reusable ArticlePage.vue component, which dynamically renders Markdown content.
  • Enhanced Component Integration: New custom components like AdmonitionBlock, ImageWithCaption, VideoWithCaption, CodeBlock, CodeOutput, InlineCode, InlineIcon, SuperscriptText, DataTable, UnorderedList, UnorderedItem, OrderedList, and OrderedItem are now rendered directly from Markdown syntax.
  • Dependency Updates and Type Generation: New dependencies for Markdown processing have been added, and unplugin-vue-components is used to automatically generate component type declarations in components.d.ts.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • frontend/components.d.ts
    • Added auto-generated type declarations for global Vue components, including newly integrated Markdown-rendered components.
  • frontend/jsconfig.json
    • Updated include paths to recognize the new components.d.ts file for improved type checking.
  • frontend/package.json
    • Added markdown-it-attrs, markdown-it-container, unplugin-vue-components, and unplugin-vue-markdown dependencies to support Markdown processing and component auto-import.
  • frontend/pnpm-lock.yaml
    • Updated the pnpm lockfile to reflect the newly added dependencies and their transitive dependencies.
  • frontend/public/sitemap.xml
    • Updated lastmod timestamps for various URLs, likely due to content changes or regeneration.
  • frontend/src/App.vue
    • Removed show-toast event emission from RouterView as toast handling is now provided globally.
    • Added ImageEnlarger component for image modal functionality.
    • Injected showToast and openImageModal methods via Vue's provide mechanism for global access.
  • frontend/src/astronomy/free-planetarium-apps/content.md
    • Refactored article frontmatter to a YAML block.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Replaced manual InlineCode components with ::fa{} syntax for Font Awesome icons.
  • frontend/src/astronomy/free-planetarium-apps/index.vue
    • Removed the dedicated Vue component for this article, as content is now rendered from Markdown.
  • frontend/src/astronomy/python-star-trails/codeSnippets.js
    • Removed the JavaScript file containing code snippets, as these are now handled directly within Markdown.
  • frontend/src/astronomy/python-star-trails/content.md
    • Refactored article frontmatter to a YAML block.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Replaced VideoWithCaption component usage with ::: video container syntax.
  • frontend/src/astronomy/python-star-trails/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/astronomy/star-trails-with-smartphone/codeSnippets.js
    • Removed the JavaScript file containing code snippets.
  • frontend/src/astronomy/star-trails-with-smartphone/content.md
    • Refactored article frontmatter to a YAML block.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Replaced VideoWithCaption component usage with ::: video container syntax.
  • frontend/src/astronomy/star-trails-with-smartphone/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/elasticsearch-change-heap-size/codeSnippets.js
    • Removed the JavaScript file containing code snippets.
  • frontend/src/blogs/elasticsearch-change-heap-size/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
    • Updated admonition syntax to ::: info and ::: warning containers.
    • Replaced InlineCode components with Markdown inline code syntax.
    • Updated code output blocks to ````output` fenced code blocks.
  • frontend/src/blogs/elasticsearch-change-heap-size/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/elasticsearch-collapse-search-results/codeSnippets.js
    • Removed the JavaScript file containing code snippets.
  • frontend/src/blogs/elasticsearch-collapse-search-results/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
    • Updated admonition syntax to ::: info containers.
    • Replaced InlineCode components with Markdown inline code syntax.
    • Updated code output blocks to ````output` fenced code blocks.
  • frontend/src/blogs/elasticsearch-collapse-search-results/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/elasticsearch-pre-filtering-with-knn-search/codeSnippets.js
    • Removed the JavaScript file containing code snippets.
  • frontend/src/blogs/elasticsearch-pre-filtering-with-knn-search/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
    • Updated admonition syntax to ::: info containers.
    • Replaced InlineCode components with Markdown inline code syntax.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Updated code output blocks to ````output` fenced code blocks.
  • frontend/src/blogs/elasticsearch-pre-filtering-with-knn-search/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/fix-kernel-panic-linux/codeSnippets.js
    • Removed the JavaScript file containing code snippets.
  • frontend/src/blogs/fix-kernel-panic-linux/content.md
    • Refactored article frontmatter to a YAML block.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Replaced InlineCode components with Markdown inline code syntax.
    • Updated admonition syntax to ::: warning containers.
    • Updated code output blocks to ````output` fenced code blocks.
  • frontend/src/blogs/fix-kernel-panic-linux/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/how-to-configure-firewall-ufw-fail2ban-ubuntu/codeSnippets.js
    • Removed the JavaScript file containing code snippets.
  • frontend/src/blogs/how-to-configure-firewall-ufw-fail2ban-ubuntu/content.md
    • Refactored article frontmatter to a YAML block.
    • Updated admonition syntax to ::: warning and ::: info containers.
    • Replaced InlineCode components with Markdown inline code syntax.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Updated code output blocks to ````output` fenced code blocks.
  • frontend/src/blogs/how-to-configure-firewall-ufw-fail2ban-ubuntu/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/how-to-set-up-a-secure-cloud-server-with-ubuntu-and-ssh/codeSnippets.js
    • Removed the JavaScript file containing code snippets.
  • frontend/src/blogs/how-to-set-up-a-secure-cloud-server-with-ubuntu-and-ssh/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
    • Updated admonition syntax to ::: warning and ::: info containers.
    • Replaced InlineCode components with Markdown inline code syntax.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Updated code output blocks to ````output` fenced code blocks.
  • frontend/src/blogs/how-to-set-up-a-secure-cloud-server-with-ubuntu-and-ssh/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/how-to-warp-and-angle-your-designs-in-inkscape/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
    • Updated admonition syntax to ::: warning and ::: info containers.
    • Replaced InlineCode components with Markdown inline code syntax.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Replaced InlineIcon component usage with ::icon{} syntax.
  • frontend/src/blogs/how-to-warp-and-angle-your-designs-in-inkscape/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/inkscape-clean-up-document/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced InlineCode components with Markdown inline code syntax.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
  • frontend/src/blogs/inkscape-clean-up-document/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/blogs/local-ai-stack-on-linux/codeSnippets.js
    • Removed the JavaScript file containing code snippets.
  • frontend/src/blogs/local-ai-stack-on-linux/content.md
    • Refactored article frontmatter to a YAML block.
    • Updated admonition syntax to ::: warning and ::: info containers.
    • Updated image syntax from _caption_ to ![alt text](path "caption").
    • Updated code output blocks to ````output` fenced code blocks.
    • Replaced Markdown table syntax with DataTable component rendering.
  • frontend/src/blogs/local-ai-stack-on-linux/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/components/AdmonitionBlock.vue
    • Updated type prop validation to use the ADMONITION_TYPES constant.
  • frontend/src/components/ArticleHeader.vue
    • Removed show-toast emit declaration.
    • Injected showToast method from the parent context.
    • Updated calls from $emit('show-toast') to this.showToast().
  • frontend/src/components/ArticleLayout.vue
    • Removed show-toast emit declaration.
    • Injected showToast method from the parent context.
    • Updated calls from $emit('show-toast') to this.showToast().
  • frontend/src/components/BulletPoint.vue
    • Renamed to UnorderedItem.vue to better reflect its role as a generic list item.
  • frontend/src/components/CodeBlock.vue
    • Removed show-toast emit declaration.
    • Injected showToast method from the parent context.
    • Updated calls from $emit('show-toast') to this.showToast().
  • frontend/src/components/DataTable.vue
    • Modified <th> and <td> elements to use v-html for rendering content, allowing for rich text within table cells.
  • frontend/src/components/ImageWithCaption.vue
    • Removed open-image-modal emit declaration.
    • Injected openImageModal method from the parent context.
    • Updated calls from $emit('open-image-modal') to this.openImageModal().
  • frontend/src/components/TableOfContents.vue
    • Imported and utilized THROTTLE_WAIT_TIME_MILLISECONDS and SCROLL_OFFSET_PIXELS constants for scroll behavior.
  • frontend/src/components/UnorderedList.vue
    • Added a new Vue component for rendering unordered lists.
  • frontend/src/composables/useArticleContent.js
    • Removed the composable, as its logic is now integrated into ArticlePage.vue and the Markdown processing pipeline.
  • frontend/src/composables/useHubPage.js
    • Removed the composable.
  • frontend/src/constants/content.js
    • Added ARTICLE_READ_THRESHOLD and MILLISECONDS_PER_MINUTE constants for reading time calculation.
    • Defined ADMONITION_TYPES constant for supported admonition block types.
  • frontend/src/constants/index.js
    • Exported all constants from the new markdown.js file.
  • frontend/src/constants/markdown.js
    • Added new constants for Markdown-it token types and regex capture groups.
  • frontend/src/constants/ui.js
    • Added THROTTLE_WAIT_TIME_MILLISECONDS and SCROLL_OFFSET_PIXELS constants for UI interactions.
  • frontend/src/courses/benchmark-embedding-models/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
  • frontend/src/courses/benchmark-embedding-models/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/courses/elasticsearch-for-beginners/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
  • frontend/src/courses/elasticsearch-for-beginners/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/courses/evolution-of-the-transformer/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
  • frontend/src/courses/evolution-of-the-transformer/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/courses/osrm-for-beginners/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
  • frontend/src/courses/osrm-for-beginners/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/courses/train-your-own-language-model/content.md
    • Refactored article frontmatter to a YAML block.
    • Replaced YouTube video links with ::: youtube container syntax.
  • frontend/src/courses/train-your-own-language-model/index.vue
    • Removed the dedicated Vue component for this article.
  • frontend/src/registries/articles.js
    • Refactored article registry to ARTICLE_MARKDOWN_REGISTRY, using import.meta.glob for Markdown files instead of Vue components.
  • frontend/src/registries/images.js
    • Refactored image registry to ARTICLE_COVER_IMAGE_REGISTRY for better organization and dynamic loading.
  • frontend/src/router/index.js
    • Updated routes for blog, course, and astronomy pages to use the new generic ArticlePage.vue component.
    • Configured routes to pass slug, folder, and articleType as props to ArticlePage.vue.
  • frontend/src/utils/search.js
    • Updated getCardsDataFromDocumentHits to use the new ARTICLE_COVER_IMAGE_REGISTRY for retrieving cover images.
  • frontend/src/views/ArticlePage.vue
    • Added a new generic Vue component responsible for loading and rendering Markdown articles dynamically.
  • frontend/src/views/AstronomyPage.vue
    • Removed the dedicated Vue component for astronomy articles.
  • frontend/src/views/BlogPage.vue
    • Removed the dedicated Vue component for blog articles.
  • frontend/src/views/CoursePage.vue
    • Removed the dedicated Vue component for course articles.
  • frontend/tests/unit/components/ArticleHeader.test.js
    • Updated tests to reflect the removal of show-toast emit and the addition of showToast injection.
  • frontend/tests/unit/components/BulletPoint.test.js
    • Removed unit tests for the BulletPoint component due to its renaming and replacement.
  • frontend/tests/unit/components/ImageWithCaption.test.js
    • Updated tests to reflect the removal of open-image-modal emit and the addition of openImageModal injection.
  • frontend/tests/unit/components/TableOfContents.test.js
    • Updated tests to use new constants for scroll offsets.
  • frontend/tests/unit/components/UnorderedItem.test.js
    • Added unit tests for the new UnorderedItem component.
  • frontend/tests/unit/components/UnorderedList.test.js
    • Added unit tests for the new UnorderedList component.
  • frontend/tests/unit/composables/useArticleContent.test.js
    • Removed unit tests for the useArticleContent composable.
  • frontend/tests/unit/composables/useArticleLoader.test.js
    • Removed unit tests for the useArticleLoader composable.
  • frontend/tests/unit/composables/useHubPage.test.js
    • Removed unit tests for the useHubPage composable.
  • frontend/tests/unit/markdown/transformer-admonition.test.js
    • Added unit tests for the admonitionTransformer.
  • frontend/tests/unit/markdown/transformer-code.test.js
    • Added unit tests for the codeTransformer.
  • frontend/tests/unit/markdown/transformer-font-awesome.test.js
    • Added unit tests for the fontAwesomeTransformer.
  • frontend/tests/unit/markdown/transformer-header.test.js
    • Added unit tests for the headerTransformer.
  • frontend/tests/unit/markdown/transformer-image.test.js
    • Added unit tests for the imageTransformer.
  • frontend/tests/unit/markdown/transformer-inline-code.test.js
    • Added unit tests for the inlineCodeTransformer.
  • frontend/tests/unit/markdown/transformer-inline-icon.test.js
    • Added unit tests for the inlineIconTransformer.
  • frontend/tests/unit/markdown/transformer-link.test.js
    • Added unit tests for the linkTransformer.
  • frontend/tests/unit/markdown/transformer-list.test.js
    • Added unit tests for the listTransformer.
  • frontend/tests/unit/markdown/transformer-superscript.test.js
    • Added unit tests for the superscriptTransformer.
  • frontend/tests/unit/markdown/transformer-table.test.js
    • Added unit tests for the tableTransformer.
  • frontend/tests/unit/markdown/transformer-video.test.js
    • Added unit tests for the videoTransformer.
  • frontend/tests/unit/markdown/transformer-youtube.test.js
    • Added unit tests for the youtubeTransformer.
  • frontend/vite.config.js
    • Integrated unplugin-vue-markdown and unplugin-vue-components for Markdown processing and component auto-import.
    • Configured vue plugin to include .md files and transformAssetUrls for custom components.
    • Set up markdownItSetup to apply custom Markdown transformers.
  • frontend/vite/markdown/README.md
    • Added documentation detailing the custom Markdown transformation pipeline and new syntax.
  • frontend/vite/markdown/index.js
    • Added a central file to import and export all custom Markdown transformers.
  • frontend/vite/markdown/transformers/admonition.js
    • Added a new Markdown-it plugin to transform ::: admonition blocks into <AdmonitionBlock> Vue components.
  • frontend/vite/markdown/transformers/code.js
    • Added a new Markdown-it plugin to transform fenced code blocks into <CodeBlock> or <CodeOutput> Vue components.
  • frontend/vite/markdown/transformers/fontAwesome.js
    • Added a new Markdown-it plugin to transform ::fa{} syntax into Font Awesome <i> tags.
  • frontend/vite/markdown/transformers/header.js
    • Added a new Markdown-it plugin to transform H2, H3, and H4 headers into custom Vue-friendly HTML with unique IDs and classes.
  • frontend/vite/markdown/transformers/image.js
    • Added a new Markdown-it plugin to transform standard Markdown image syntax into <ImageWithCaption> Vue components.
  • frontend/vite/markdown/transformers/inlineCode.js
    • Added a new Markdown-it plugin to transform inline code blocks into <InlineCode> Vue components.
  • frontend/vite/markdown/transformers/inlineIcon.js
    • Added a new Markdown-it plugin to transform ::icon{} syntax into <InlineIcon> Vue components.
  • frontend/vite/markdown/transformers/link.js
    • Added a new Markdown-it plugin to automatically add target="_blank" and rel="noopener noreferrer" to external links.
  • frontend/vite/markdown/transformers/list.js
    • Added a new Markdown-it plugin to transform Markdown lists into <UnorderedList>, <UnorderedItem>, <OrderedList>, and <OrderedItem> Vue components.
  • frontend/vite/markdown/transformers/superscript.js
    • Added a new Markdown-it plugin to transform ^text^ syntax into <SuperscriptText> Vue components.
  • frontend/vite/markdown/transformers/table.js
    • Added a new Markdown-it plugin to transform Markdown tables into <DataTable> Vue components.
  • frontend/vite/markdown/transformers/video.js
    • Added a new Markdown-it plugin to transform ::: video container syntax into <VideoWithCaption> Vue components.
  • frontend/vite/markdown/transformers/youtube.js
    • Added a new Markdown-it plugin to transform ::: youtube container syntax into <YouTubePlayer> Vue components.
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 👍 and 👎 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.

Footnotes

  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.

@codecov
Copy link

codecov bot commented Feb 21, 2026

Codecov Report

❌ Patch coverage is 98.29060% with 4 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
frontend/src/components/ArticleHeader.vue 50.00% 2 Missing ⚠️
frontend/vite/markdown/transformers/image.js 81.81% 2 Missing ⚠️

📢 Thoughts on this report? Let us know!

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This is an excellent and comprehensive refactoring that migrates article content from Vue components to a more scalable Markdown-based system. The introduction of custom markdown-it transformers is well-executed and allows for rich, custom components within the articles, which is a great feature. The new architecture with a single ArticlePage.vue component simplifies the codebase significantly. The addition of extensive unit tests for the new transformers demonstrates a strong commitment to quality.

I've added a couple of suggestions for minor improvements regarding the implementation of one of the transformers and a small simplification in the new ArticlePage component. Overall, this is a very impressive pull request that greatly improves the content authoring experience and maintainability of the project.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR transitions article authoring from .vue components to Markdown files with custom Vue transformers, significantly reducing codebase size and improving maintainability.

Changes:

  • Introduces 13 custom markdown transformers to convert markdown syntax to Vue components
  • Migrates all articles from .vue format to structured .md files with YAML frontmatter
  • Consolidates BlogPage, CoursePage, and AstronomyPage into a single ArticlePage component
  • Adds comprehensive test suite for markdown transformers (13 test files)
  • Updates infrastructure (registries, router, constants) to support markdown-first workflow

Reviewed changes

Copilot reviewed 109 out of 112 changed files in this pull request and generated 8 comments.

Show a summary per file
File Description
frontend/vite/markdown/transformers/*.js 13 new transformer modules converting markdown to Vue components
frontend/vite.config.js Configures unplugin-vue-markdown and automatic component imports
frontend/src/views/ArticlePage.vue New unified article page replacing 3 separate page components
frontend/src/router/index.js Updated to use ArticlePage with folder/type props
frontend/src/registries/*.js Refactored to use markdown registry structure
frontend/src/constants/*.js Added markdown and content constants
frontend/src/components/*.vue Updated inject/provide pattern for toast and modal
frontend/tests/unit/markdown/*.test.js 13 new comprehensive test files for transformers
frontend/src/**/content.md Migrated article content with YAML frontmatter
Files not reviewed (1)
  • frontend/pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

required: true,
},
},
emits: ["article-read"],
Copy link

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ArticlePage component is missing the 'article-read' event handler connection. The component emits 'article-read' at line 144, but the router configuration doesn't connect this event to the parent ArticleLayout or App component for tracking article read analytics. This means article read tracking may not be functional.

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

developer experience Improvements to the developer experience enhancement New feature or request Frontend Pull requests that change something in the frontend Refactor Pull requests that refactor code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Implement "Markdown-First" workflow to fix DRY violation

1 participant