implement ssg config for blog posts in project ,

2026-08-17 05:24:30 +03:30 · 2025-11-10 18:09:18 +03:30
parent d2333d3db2
commit 713bb83981
37 changed files with 5505 additions and 297 deletions
@@ -0,0 +1,97 @@
+# Implementation Plan
+
+- [x] 1. Enable Nuxt 4 View Transitions and configure global page transitions
+
+
+  - Enable `experimental.viewTransition` flag in `nuxt.config.ts`
+  - Configure `pageTransition` and `layoutTransition` settings
+  - Add View Transitions API polyfill detection
+  - _Requirements: 1.1, 1.2, 1.3, 1.4, 5.5_
+
+
+
+- [ ] 2. Create global transition CSS styles
+  - Create `app/assets/css/transitions.css` file
+  - Define CSS custom properties for transition timing and durations
+  - Implement page transition classes (`.page-enter-active`, `.page-leave-active`, etc.)
+  - Add layout transition classes
+  - Implement `prefers-reduced-motion` media query support
+
+  - Import transitions.css in `app/assets/css/main.css`
+  - _Requirements: 1.1, 1.2, 1.4, 5.3, 5.4_
+
+- [x] 3. Enhance NuxtLoadingIndicator and add loading states
+
+  - Review current `NuxtLoadingIndicator` configuration in `app.vue`
+  - Add custom loading spinner component for long operations
+  - Create skeleton loader component for blog posts
+  - Add loading state transitions with fade effects
+  - _Requirements: 2.1, 2.2, 2.3, 2.4_
+
+- [x] 4. Add component-level animations to BlogCard
+
+
+  - Add hover state with lift effect and shadow to `app/components/blog/BlogCard.vue`
+  - Implement staggered fade-in animation for blog card list
+  - Use CSS transforms for hardware acceleration
+  - Add transition classes using Tailwind CSS 4 utilities
+  - _Requirements: 3.1, 3.2, 3.3, 3.4_
+
+
+
+- [ ] 5. Enhance BlogNavigation with smooth animations
+  - Add smooth hover states to prev/next buttons in `app/components/blog/BlogNavigation.vue`
+  - Implement icon animations on hover
+  - Add transition effects for button states
+
+
+  - _Requirements: 3.1, 3.3_
+
+- [ ] 6. Improve LanguageSwitcher transitions
+  - Add dropdown animation with scale and fade to `app/components/LanguageSwitcher.vue`
+  - Implement smooth active state transitions
+
+
+  - Preserve scroll position during language switch
+  - Add crossfade transition for content
+  - _Requirements: 4.1, 4.2, 4.3, 4.4_
+
+
+
+- [ ] 7. Add TopNav scroll-based animations
+  - Implement smooth scroll-based appearance/disappearance in `app/components/common/TopNav.vue`
+  - Add mobile menu slide-in animation
+  - Use CSS transforms for smooth transitions
+  - _Requirements: 3.1, 3.3, 3.4_
+
+
+
+
+- [ ] 8. Create View Transitions API composable
+  - Create `app/composables/useViewTransition.ts`
+  - Implement browser support detection
+  - Add manual transition control function
+  - Provide fallback for unsupported browsers
+  - _Requirements: 5.1, 5.2, 5.5_
+
+- [ ] 9. Add View Transitions API custom animations
+  - Define custom view transition names for specific elements
+  - Add CSS for view transition animations
+  - Implement cross-fade effects for content areas
+  - Add slide animations for navigation elements
+  - _Requirements: 5.5_
+
+- [ ]* 10. Test transitions across browsers and devices
+  - Test on Chrome/Edge (with View Transitions API)
+  - Test on Firefox and Safari (CSS fallback)
+  - Test on mobile browsers (iOS Safari, Chrome Mobile)
+  - Verify reduced motion preferences are respected
+  - Test keyboard navigation during transitions
+  - _Requirements: 5.4_
+
+- [ ]* 11. Performance testing and optimization
+  - Measure FCP, LCP, CLS, and TTI metrics
+  - Use Chrome DevTools Performance tab to verify 60fps
+  - Monitor paint and composite operations
+  - Optimize animation complexity for mobile devices
+  - _Requirements: 3.4, 5.3_