feat: enabled routes to blog page with styles and navigations #709
Conversation
WalkthroughThis change updates the blog navigation in the Vue frontend by switching the About page's blog link from an external Tumblr URL to an internal router-link targeting a new "/blog" route. It introduces a new static Blog.vue page, removes the Help.vue page, and updates the router configuration to reflect these changes, including scroll behavior. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested labels
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
hwakabh
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
web-frontend/src/pages/About.vue (1)
89-91: Consider content alignment with "Blog" label.The technical implementation is correct - the router-link properly navigates to the new "/blog" route with consistent styling. However, the new Blog.vue page appears to be a static elements showcase rather than actual blog content. Consider either:
- Renaming the link to better reflect the content (e.g., "Style Guide" or "Elements")
- Planning to replace the static content with actual blog posts in the future
The TODO comment suggests future Tumblr integration, which would align better with the "Blog" label.
web-frontend/src/pages/Blog.vue (1)
1-4: Consider semantic HTML structure and naming consistency.The template structure is valid, but consider these improvements:
- Semantic HTML: Add
<main>or<article>tags around the content for better accessibility- Naming consistency: The file is named "Blog.vue" but the heading reads "Elements" - this appears to be a style guide rather than a blog
<template> - <section class="wrapper fullscreen"> + <main class="wrapper fullscreen"> <div class="inner"> - <h1 class="major">Elements</h1> + <h1 class="major">Style Guide</h1>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
web-frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
web-frontend/src/pages/About.vue(1 hunks)web-frontend/src/pages/Blog.vue(1 hunks)web-frontend/src/pages/Help.vue(0 hunks)web-frontend/src/router/index.js(1 hunks)
💤 Files with no reviewable changes (1)
- web-frontend/src/pages/Help.vue
🔇 Additional comments (5)
web-frontend/src/router/index.js (3)
7-7: LGTM: Blog component import added correctly.The import statement follows the established pattern and correctly references the new Blog.vue component.
10-14: LGTM: Route definitions are clean and consistent.The single-line format for route objects improves readability and maintains consistency. The new "/blog" route is properly configured to use the Blog component.
20-26: LGTM: Scroll behavior implementation enhances UX.The
scrollBehaviorfunction correctly handles scroll restoration:
- Preserves scroll position when navigating back/forward via
savedPosition- Defaults to top of page for new navigation
- Implementation follows Vue Router best practices
web-frontend/src/pages/Blog.vue (2)
5-29: LGTM: Well-structured content demonstrations.The text formatting examples, headings hierarchy, blockquote, and preformatted code block are all properly implemented. The content effectively demonstrates various HTML elements and text styling options.
31-63: LGTM: Comprehensive list examples with responsive layout.The lists section effectively demonstrates different list types using a responsive grid layout. The use of framework CSS classes (col-4, col-12-medium) ensures proper responsive behavior.
Issue/PR link
N/A
What does this PR do?
Describe what changes you make in your branch:
scrollBehavior()to vue-router for displaying page properly in navigations(Optional) Additional Contexts
Describe additional information for reviewers (i.e. What does not included)
Summary by CodeRabbit
New Features
Improvements
Removals