feat: migrate article content to Markdown and implement custom Vue transformers#180
feat: migrate article content to Markdown and implement custom Vue transformers#180ImadSaddik wants to merge 103 commits intomasterfrom
Conversation
…and scroll offset in TableOfContents component
…y on content.md files
Summary of ChangesHello @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
🧠 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
Using Gemini Code AssistThe 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
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 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
|
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
.vueformat to structured.mdfiles 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.
frontend/src/views/ArticlePage.vue
Outdated
| required: true, | ||
| }, | ||
| }, | ||
| emits: ["article-read"], |
There was a problem hiding this comment.
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.
… and codeSnippets.js
Pull request
Description
This PR transitions the codebase from writing articles using
.vuecomponents toMarkdown. In this PR:.vueandcodeSnippets.jsfiles into structured.mdfiles..mdto be able to use my custom components. Read about that in this README.ArticlePage.vuecomponent, replacing separate implementations forBlogPage.vue,CoursePage.vue, andAstronomyPage.vue.unplugin-vue-markdownandunplugin-vue-componentsfor automatic component imports and markdown processing.This refactoring significantly reduces the codebase size and provides a much more scalable foundation for future content.
Closes #171
Checklist
Check what applies: