chore(deps): Add configuration to make website PWA-ready #326
Conversation
yamadashy
force-pushed
the
feat/website-pwa
branch
from
c23ccc9 to
a5523b3
Compare
Deploying repomix with
|
| Latest commit: |
a5523b3
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d0cf35c3.repomix.pages.dev |
| Branch Preview URL: | https://feat-website-pwa.repomix.pages.dev |
📝 WalkthroughWalkthroughThe pull request introduces Progressive Web App (PWA) configuration to the VitePress project. This is accomplished by adding the Sequence DiagramsequenceDiagram
participant Browser
participant PWA Plugin
participant Service Worker
participant Cache
Browser->>PWA Plugin: Initialize PWA
PWA Plugin->>Service Worker: Register Service Worker
Service Worker->>Cache: Set up caching strategies
Browser->>Service Worker: Request resources
Service Worker->>Cache: Check cached resources
alt Resource in cache
Cache-->>Browser: Return cached resource
else Resource not in cache
Service Worker->>Browser: Fetch from network
Browser-->>Service Worker: Store in cache
end
Possibly related PRs
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #326 +/- ##
=======================================
Coverage 90.19% 90.19%
=======================================
Files 48 48
Lines 2488 2488
Branches 514 514
=======================================
Hits 2244 2244
Misses 244 244 ☔ View full report in Codecov by Sentry. |
![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)
website/client/.vitepress/config/configShard.ts (2)
13-38: Enhance PWA manifest configuration.While the basic manifest configuration is good, consider adding these essential PWA properties:
start_url: Define the starting URL of the applicationscope: Specify the navigation scopeorientation: Set preferred orientation for optimal mobile experienceAlso, consider creating a dedicated maskable icon instead of reusing the regular icon, as maskable icons should be designed with safe zones in mind.
const manifest: Partial<ManifestOptions> = { name: 'Repomix', short_name: 'Repomix', description: 'Pack your codebase into AI-friendly formats', theme_color: '#f97316', background_color: '#ffffff', display: 'standalone', + start_url: '/', + scope: '/', + orientation: 'any', icons: [ { src: '/images/pwa/repomix-192x192.png', sizes: '192x192', type: 'image/png', }, { src: '/images/pwa/repomix-512x512.png', sizes: '512x512', type: 'image/png', }, { - src: '/images/pwa/repomix-512x512.png', + src: '/images/pwa/repomix-maskable-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable', }, ], };
141-173: Consider adding caching strategies for other static assets.While the Google Fonts caching is well configured, consider adding specific caching strategies for:
- Images (png, svg)
- JavaScript and CSS files
- API responses (if any)
This would improve offline capabilities and performance.
workbox: { globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2}'], runtimeCaching: [ + { + urlPattern: /\.(png|svg|ico)$/i, + handler: 'CacheFirst', + options: { + cacheName: 'images-cache', + expiration: { + maxEntries: 50, + maxAgeSeconds: 60 * 60 * 24 * 30, // 30 days + }, + }, + }, + { + urlPattern: /\.(js|css)$/i, + handler: 'StaleWhileRevalidate', + options: { + cacheName: 'static-resources-cache', + expiration: { + maxEntries: 30, + maxAgeSeconds: 60 * 60 * 24, // 1 day + }, + }, + }, // Existing Google Fonts caching configurations... ], },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
website/client/package-lock.jsonis excluded by!**/package-lock.jsonwebsite/client/src/public/images/pwa/repomix-192x192.pngis excluded by!**/*.pngwebsite/client/src/public/images/pwa/repomix-512x512.pngis excluded by!**/*.pngwebsite/client/src/public/images/repomix-logo.pngis excluded by!**/*.pngwebsite/server/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
website/client/.vitepress/config/configShard.ts(4 hunks)website/client/package.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Test (windows-latest, 23.x)
- GitHub Check: Test (windows-latest, 22.x)
- GitHub Check: Test (windows-latest, 21.x)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (4)
website/client/package.json (1)
11-11: Verify the vite-plugin-pwa version compatibility.The specified version
^0.21.1seems unusual as it's higher than the current latest stable version. Let's verify the version compatibility with VitePress.✅ Verification successful
Version ^0.21.1 is correct and up-to-date
The specified version is the latest available release and has proper peer dependency compatibility with Vite and related packages.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check latest version and compatibility npm view vite-plugin-pwa versions --json | jq -r '.[]' | sort -V | tail -n 5 npm view vite-plugin-pwa@0.21.1 peerDependencies --jsonLength of output: 325
website/client/.vitepress/config/configShard.ts (3)
107-111: LGTM! PWA meta tags are well configured.The Apple-specific meta tags and icons are properly set up and consistent with the manifest configuration.
138-141: LGTM! VitePWA plugin configuration is well structured.The auto-update registration strategy and static asset patterns are appropriately configured.
22-35: Verify that all PWA assets exist in the correct location.Let's ensure all required PWA assets are present in the repository.
✅ Verification successful
PWA assets are present and properly configured ✅
The required PWA assets exist in the correct location:
/images/pwa/repomix-192x192.png/images/pwa/repomix-512x512.png🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if PWA assets exist echo "Checking PWA assets..." fd -t f "repomix-.*\.(png|svg)" "website/client/public/images/pwa" # Verify image dimensions echo -e "\nVerifying image dimensions..." find website/client/public/images/pwa -name "repomix-*.png" -exec sh -c ' for img; do dimensions=$(identify -format "%wx%h" "$img" 2>/dev/null) echo "$img: $dimensions" done ' sh {} +Length of output: 584
Script:
#!/bin/bash # First, let's understand the repository structure echo "Repository structure:" ls -la website/client/public || ls -la website/client || ls -la website # Then search for PWA assets anywhere in the repository echo -e "\nSearching for PWA assets:" fd -t f "repomix.*\.(png|svg)"Length of output: 1421
Script:
#!/bin/bash echo "Checking PWA image properties:" for img in website/client/src/public/images/pwa/repomix-*.png; do echo -n "$img: " file "$img" | grep -o "[0-9]* x [0-9]*" doneLength of output: 830
Checklist
npm run testnpm run lint