feat: simplify project config#79
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThe changes centralize all project-specific configuration, branding, and metadata into a new TypeScript configuration module ( Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant VueComponent
participant ProjectConfig (config/project.ts)
User->>VueComponent: Loads page/component
VueComponent->>ProjectConfig: Import project config
VueComponent->>VueComponent: Use project.name, project.urls, etc.
VueComponent-->>User: Rendered with dynamic branding, URLs, and metadata
sequenceDiagram
participant NuxtApp
participant ProjectConfig
participant NuxtConfig
NuxtApp->>NuxtConfig: Load configuration (nuxt.config.js)
NuxtConfig->>ProjectConfig: Import project config object
NuxtConfig->>NuxtConfig: Set PWA, analytics, theme, URLs from project config
NuxtConfig-->>NuxtApp: Export configured Nuxt app
Possibly related PRs
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
✨ Finishing Touches
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🔭 Outside diff range comments (1)
assets/js/sidebarLinks.ts (1)
44-44: 🧹 Nitpick (assertive)Consider making F.A.Q. link consistent with centralization.
The F.A.Q. link still uses a hardcoded URL while other links have been updated to use the project configuration. This creates inconsistency in the codebase.
Consider whether this should also use the project configuration or if there's a specific reason it remains hardcoded.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (32)
.env.example(0 hunks).example.env(1 hunks)app.vue(4 hunks)assets/js/promotions.ts(2 hunks)assets/js/proxy.ts(1 hunks)assets/js/sidebarLinks.ts(3 hunks)components/layout/FeedbackButton.vue(2 hunks)components/layout/modal/FeedbackPrompt.vue(4 hunks)components/layout/modal/PwaPrompt.vue(2 hunks)components/layout/modal/ReviewPrompt.vue(3 hunks)components/layout/navigation/Sidebar.vue(5 hunks)components/pages/home/News.vue(1 hunks)components/pages/posts/PostsPageFooter.vue(3 hunks)components/pages/posts/navigation/DomainSelectorFallback.vue(4 hunks)components/pages/posts/post/PostComponent.vue(2 hunks)config/project.ts(1 hunks)nuxt.config.js(6 hunks)pages/cookie-policy.vue(8 hunks)pages/dmca.vue(2 hunks)pages/index.vue(3 hunks)pages/legal.vue(2 hunks)pages/other-sites.vue(3 hunks)pages/posts/[domain].vue(4 hunks)pages/premium/backup.vue(2 hunks)pages/premium/dashboard.vue(4 hunks)pages/premium/forgot-password.vue(6 hunks)pages/premium/index.vue(6 hunks)pages/premium/saved-posts/[domain].vue(8 hunks)pages/premium/sign-in.vue(2 hunks)pages/privacy-policy.vue(8 hunks)pages/settings.vue(3 hunks)pages/terms-of-service.vue(5 hunks)
💤 Files with no reviewable changes (1)
- .env.example
🧰 Additional context used
🧬 Code Graph Analysis (4)
assets/js/proxy.ts (1)
config/project.ts (1)
project(68-105)
assets/js/promotions.ts (1)
config/project.ts (1)
project(68-105)
assets/js/sidebarLinks.ts (1)
config/project.ts (1)
project(68-105)
nuxt.config.js (1)
config/project.ts (1)
project(68-105)
🔇 Additional comments (69)
.example.env (1)
1-19: Well-structured environment configuration template.The file provides a clear template for environment variables with good organization and helpful comments. The empty values for sensitive data (API keys, Sentry credentials) are appropriate for a template file.
config/project.ts (2)
5-59: Well-structured TypeScript interfaces for configuration.The interface definitions provide excellent type safety and clear structure for the project configuration. The separation of concerns (URLs, branding, analytics, etc.) is well-designed.
76-77:Details
✅ Verification successful
Verify URL construction safety.
The URL constructor will throw an error if invalid URLs are provided. Consider adding error handling or validation to ensure the application doesn't crash during initialization.
🏁 Script executed:
#!/bin/bash # Check if there are any error handling patterns for URL construction in the codebase rg -A 5 -B 5 "new URL\("Length of output: 6286
Skip error handling for static config URLs
The URLs in config/project.ts are static literals ('https://r34.app'and'http://localhost:3000'). Any typo would be caught immediately at build/startup rather than at runtime, so wrapping these in try/catch isn’t needed. Dynamic URL parsing elsewhere (e.g. in getFaviconUrl and isSourceAnUrl) already includes error handling where user input is involved.pages/posts/[domain].vue (2)
16-16: Good adoption of centralized configuration.The import of the project configuration aligns well with the centralization effort.
735-735: Proper usage of centralized configuration.The replacement of hardcoded app names with
project.shortNameandproject.nameis implemented correctly and maintains consistency with the centralization effort.Also applies to: 958-959
components/pages/posts/post/PostComponent.vue (2)
5-5: Consistent adoption of centralized configuration.The import follows the established pattern for using the centralized project configuration.
140-140: Proper replacement of hardcoded app name.The change from the hardcoded string to
project.namemaintains functionality while enabling centralized configuration management. This aligns well with the overall refactoring effort.pages/premium/sign-in.vue (2)
4-4: Good addition of centralized config import.The import follows a clean pattern for accessing centralized project configuration.
56-56: Excellent use of dynamic project name in SEO meta.This change improves maintainability by removing hardcoded app names and allows for environment-specific branding.
pages/premium/backup.vue (1)
49-49: Smart improvement to backup filename generation.Using the hostname from the project config makes backup files more environment-specific and easier to identify. This is a great improvement over the hardcoded "R34App_" prefix.
components/pages/home/News.vue (3)
2-2: Good import of centralized config.Consistent with the standardization effort using the
@/alias.
7-7: Excellent dynamic text generation.The use of template literals with
project.namemakes the content adaptable across different project configurations while maintaining readability.Also applies to: 18-18
10-11:Details
✅ Verification successful
Smart dynamic URL construction.
Using
project.urls.production.hostnamefor subdomain generation is a clean approach that maintains the URL structure while making it configurable.However, ensure that the config structure includes proper validation for the hostname property:
Also applies to: 21-22
🏁 Script executed:
#!/bin/bash # Description: Verify the project config structure includes the expected properties # Expected: Find the config file and check for hostname property definition fd -t f "project.ts" config/ --exec cat {}Length of output: 2521
Approved: Dynamic subdomain generation with built-in URL validation
Using
project.urls.production.hostnameto buildfeedback.<hostname>is a solid, configurable approach—and sinceurls.productionis stored as a nativeURLobject (vianew URL(...)), invalid hostnames will throw at initialization. No further validation changes are needed.pages/settings.vue (3)
5-5: Consistent import pattern.Good use of the standardized
@/config/projectimport path.
10-10: Excellent centralization of app name references.Both the SEO meta description and template text now dynamically reference the project name, improving consistency and maintainability across different environments.
Also applies to: 116-116
205-208: Improved code formatting.The multi-line formatting of the
ExclamationTriangleIconenhances readability without affecting functionality.components/pages/posts/navigation/DomainSelectorFallback.vue (3)
3-3: LGTM! Clean import of centralized configuration.The import follows the established pattern for accessing the centralized project configuration.
24-24: LGTM! Correct usage of dynamic hostname configuration.The favicon URL construction and hostname display text now correctly use the centralized configuration. This improves maintainability by eliminating hardcoded domain references.
Also applies to: 37-37
46-49: LGTM! Formatting change with no functional impact.The JSX syntax expansion from self-closing to multi-line format is purely stylistic and doesn't affect component behavior.
assets/js/proxy.ts (2)
1-1: LGTM! Proper import of centralized configuration.The import statement correctly brings in the project configuration for dynamic URL construction.
4-4: LGTM! Correct URL construction with centralized configuration.Using
project.urls.production.toString()properly converts the URL object to a string and correctly constructs the proxy endpoint URL. This maintains the same functionality while using the centralized configuration.components/layout/modal/PwaPrompt.vue (2)
4-4: LGTM! Consistent import of centralized configuration.The import statement properly brings in the project configuration for dynamic URL construction.
52-52: LGTM! Correct dynamic URL construction for PWA installer.The iframe source URL correctly uses the centralized hostname configuration in the template literal. This maintains the same functionality while eliminating hardcoded domain references.
assets/js/promotions.ts (2)
1-1: LGTM! Proper import of centralized configuration.The import statement correctly brings in the project configuration for dynamic URL parameter construction.
84-84: LGTM! Correct dynamic utm_source parameter construction.The template literal correctly uses the centralized hostname configuration for the utm_source tracking parameter. This ensures the tracking reflects the actual domain being used and eliminates hardcoded domain references.
components/layout/FeedbackButton.vue (1)
3-3: LGTM! Excellent centralization of configuration.The replacement of hardcoded URLs with dynamic configuration references is well implemented. Both the click handler and NuxtLink use consistent URL construction with the project config.
Also applies to: 6-6, 19-19
components/pages/posts/PostsPageFooter.vue (3)
6-6: LGTM! Good addition of project configuration import.
82-82: LGTM! Proper replacement of hardcoded app name.Using
project.shortNameinstead of hardcoded "R34.app" improves maintainability and centralization.
136-140: LGTM! Consistent use of project configuration.All instances of the hardcoded app name have been properly replaced with
project.shortName, maintaining consistency throughout the component.pages/legal.vue (2)
2-2: LGTM! Proper centralization of project metadata.The import and usage of
project.namein the SEO meta description correctly replaces hardcoded values with centralized configuration.Also applies to: 7-7
79-80: LGTM! Consistent email configuration usage.Both the link text and mailto href properly use
project.email, ensuring consistency and maintainability for contact information.components/layout/modal/ReviewPrompt.vue (1)
3-3:Details
✅ Verification successful
LGTM! Consistent implementation of centralized configuration.
The changes properly replace hardcoded values with project config references. The URL construction for Trustpilot follows the same pattern used across other components.
Let me verify that the project configuration structure supports all the properties being used across these files:
Also applies to: 25-25, 38-38
🏁 Script executed:
#!/bin/bash # Description: Verify the project configuration structure contains all required properties # Expected: project config should have urls.production.hostname, shortName, name, and email properties # Check if project config file exists and examine its structure if [ -f "config/project.ts" ]; then echo "=== Project config file contents ===" cat config/project.ts echo -e "\n=== Checking for required properties ===" # Check for required properties echo "Checking for urls.production.hostname..." rg "urls.*production.*hostname" config/project.ts || echo "❌ urls.production.hostname not found" echo "Checking for shortName..." rg "shortName" config/project.ts || echo "❌ shortName not found" echo "Checking for name property..." rg "name.*:" config/project.ts || echo "❌ name property not found" echo "Checking for email property..." rg "email.*:" config/project.ts || echo "❌ email property not found" else echo "❌ Project config file not found at config/project.ts" fi # Check for any remaining hardcoded values that might have been missed echo -e "\n=== Checking for any remaining hardcoded values ===" echo "Checking for 'R34.app' references..." rg "R34\.app" --type vue --type ts --type js || echo "✅ No hardcoded R34.app found" echo "Checking for 'r34.app' references..." rg "r34\.app" --type vue --type ts --type js || echo "✅ No hardcoded r34.app found"Length of output: 3945
Approved: Project configuration verified
All required properties (
name,shortName,config/project.tsandurls.productionis defined as aURL(providing.hostnameat runtime). No hardcodedR34.apporr34.appreferences remain.pages/premium/forgot-password.vue (1)
3-3: Good addition of centralized config import.The import follows the consistent pattern established across the codebase for the centralization effort.
pages/index.vue (2)
9-9: Consistent config import pattern.Good adherence to the established import pattern for the centralization effort.
428-459: Excellent centralization of schema.org structured data.Replacing hardcoded values with dynamic project configuration ensures:
- Consistent branding across all structured data
- Easier maintenance when URLs or social links change
- Better SEO consistency
The implementation properly uses
project.name,project.urls.production.toString(), andproject.social.*properties, which will improve maintainability significantly.pages/premium/dashboard.vue (3)
14-14: Consistent config import added.Follows the established pattern for the centralization effort.
221-221: Proper centralization of feedback URL.Dynamic feedback URL construction improves maintainability and ensures consistency with project configuration.
240-240: Good centralization of contact email.Using
project.emailinstead of hardcoded email ensures consistency and easier maintenance.pages/terms-of-service.vue (4)
2-2: Consistent config import pattern.Good adherence to the established centralization approach.
7-7: Proper centralization of SEO metadata.Dynamic description ensures consistency with the project branding across all pages.
19-32: Excellent systematic replacement in legal content.This comprehensive update to replace hardcoded references with dynamic config is particularly important for legal documents where accuracy and consistency are critical. Using
project.nameandproject.urls.production.toString()ensures that:
- Legal documents automatically reflect current branding
- URL references remain accurate if the domain changes
- Terms are consistent across the entire application
The systematic approach throughout the document maintains legal document integrity.
61-128: Comprehensive centralization throughout terms content.The systematic replacement of hardcoded app names and URLs with project config references throughout the terms text ensures legal document accuracy and maintainability. This is a critical improvement for legal documents that need to stay consistent with the application branding.
pages/other-sites.vue (3)
2-2: LGTM: Clean import of centralized config.Good practice to import the centralized project configuration for dynamic branding.
19-19: LGTM: Consistent dynamic branding implementation.The replacement of hardcoded "Rule 34 App" with
project.nameensures consistent branding across the application and makes the codebase more maintainable.Also applies to: 27-27, 40-40
36-36: LGTM: Proper URL construction with hostname extraction.Using
project.urls.production.hostnamecorrectly extracts just the domain name for the UTM source parameter, which is the appropriate approach for tracking.components/layout/modal/FeedbackPrompt.vue (3)
3-3: LGTM: Proper import of centralized configuration.Clean import following the established pattern for configuration centralization.
30-30: LGTM: Appropriate use of shortName for UI text.Using
project.shortNameis perfect for user-facing text where a concise app name is preferred.
41-41: LGTM: Consistent dynamic URL construction.The feedback URL construction using
project.urls.production.hostnamefollows the established pattern and correctly builds subdomain URLs.Also applies to: 59-59
pages/dmca.vue (3)
2-3: LGTM: Clean import and configuration usage.Proper import of the centralized project configuration following the established pattern.
7-7: LGTM: Dynamic SEO description.Using
project.namein the SEO meta description ensures consistent branding and eliminates hardcoded references.
19-22: LGTM: Comprehensive dynamic content implementation.Excellent use of the project configuration for app name, URL, and email. This centralizes all project-specific information and makes the content truly dynamic and maintainable.
Also applies to: 37-39
assets/js/sidebarLinks.ts (2)
10-10: LGTM: Proper import of centralized configuration.Clean import following the established pattern for configuration centralization.
35-35: LGTM: Correct hostname usage for subdomain construction.Using
project.urls.production.hostnameis the right approach for extracting just the domain name for the install PWA service.pages/premium/index.vue (1)
16-16: LGTM! Excellent centralization of project configuration.The systematic replacement of hardcoded strings with dynamic references to the centralized
projectconfiguration is a great improvement for maintainability. All usage patterns are consistent and the changes preserve the original functionality while making the codebase more configurable.Also applies to: 158-158, 205-205, 263-263, 299-299, 415-415
pages/premium/saved-posts/[domain].vue (2)
17-17: LGTM! Consistent use of centralized configuration.The changes properly replace hardcoded domain references with the centralized project configuration. The error message using
project.shortNameis a nice touch for user-facing text consistency.Also applies to: 39-39, 320-320, 764-764
668-671: Good formatting improvement for icon components.The multiline JSX-style formatting for icon components improves readability and consistency.
Also applies to: 736-739, 748-751, 799-802
components/layout/navigation/Sidebar.vue (1)
4-4: LGTM! Perfect centralization of branding and URLs.All changes consistently use the centralized project configuration for app name, URLs, and social media links. This makes the sidebar component fully configurable and maintainable.
Also applies to: 21-21, 66-66, 98-98, 119-119
pages/cookie-policy.vue (1)
2-2: LGTM! Comprehensive centralization of project information.Excellent work centralizing all project-specific information including name, email, and URLs throughout the cookie policy. This makes the content maintainable and consistent.
Also applies to: 7-7, 22-22, 97-97, 129-129, 176-176, 319-321
pages/privacy-policy.vue (2)
2-2: LGTM: Centralized configuration importGood practice importing the centralized project configuration. This supports the broader refactoring effort to eliminate hardcoded values.
6-6: LGTM: Dynamic SEO descriptionThe SEO meta description now properly uses the project name dynamically, improving maintainability.
app.vue (4)
2-2: LGTM: Centralized configuration importGood practice importing the centralized project configuration with proper TypeScript extension.
7-7: LGTM: Clear variable namingRenaming
configtoruntimeConfigimproves clarity and distinguishes it from the static project configuration.
10-10: LGTM: Dynamic hostname usageUsing
project.urls.production.hostnamefor canonical URL construction is appropriate and maintains flexibility.
27-27: LGTM: Dynamic title templateThe title template properly uses both
project.nameandproject.seo.title, providing good fallback behavior.nuxt.config.js (5)
2-2: LGTM: Centralized configuration importGood practice importing the centralized project configuration with proper TypeScript extension.
38-47: LGTM: Conditional analytics configurationGood practice using conditional loading for Formbricks analytics. The script injection properly uses the project configuration values.
289-289: LGTM: Dynamic imgproxy URL constructionUsing
project.urls.production.hostnamefor the imgproxy base URL is appropriate and maintains consistency with the centralized configuration approach.
309-311: LGTM: PWA manifest configurationThe PWA manifest properly uses project configuration for name, description, and theme colors, ensuring consistency across the application.
Also applies to: 318-319
353-353: LGTM: Dynamic shortcut URLUsing
project.urls.production.hostnamein the PWA shortcut URL maintains consistency with the centralized configuration approach.
1 participant
Summary by CodeRabbit
New Features
Refactor
Chores