feat: add Prettier integration (config only)#207
Conversation
Ultra-granular split for Sourcery compatibility (30k chars < 150k limit): - favicon.ico: Professional website favicon - css/comprehensive-demo.css: Advanced demo styling with CSS variables Part 3/4 of website files from feat/clean-demo-website. Completes the website assets for visual branding and styling. Original work attribution: PR #169 feat/clean-demo-website 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Consolidate duplicate CSS rules (.demo-container, .feature-card, #textInput) - Fix aggressive universal selector in prefers-reduced-motion with specific classes - Make .step-label selector more specific to avoid conflicts - Merge duplicate @media (max-width: 768px) blocks for better maintainability
- Add variables.css with design system variables - Add base.css with typography and global styles - Add main.css as entry point for component imports
- Add buttons.css for button styles and interactions - Add forms.css for form controls and input styling - Add navigation.css for navbar and menu components - Add cards.css for feature cards and content containers
- Add containers.css for layout containers and hero sections - Add progress.css for progress indicators and pipeline components - Add charts.css for data visualization and chart components - Add animations.css for transitions and animation effects
- Add messages.css for error and success message styling - Add responsive.css for media queries and responsive design - Add comprehensive README.md explaining the modular CSS architecture
- Merge feat/website-assets branch with comprehensive improvements - Resolve merge conflicts between main and website-assets branches - Keep improved modular CSS architecture and code review fixes - Include proper binary favicon.ico and component-based CSS structure - Address all code review issues: mobile performance, duplicate rules, selectors
- Add .prettierrc configuration for code formatting - Add package.json with Prettier dependencies and scripts - Include eslint-config-prettier and eslint-plugin-prettier for integration - NO formatting of existing files - pure configuration addition 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Reviewer's GuideIntroduces Prettier integration by adding a .prettierrc configuration file and updating package.json with formatting scripts and necessary devDependencies for Prettier and ESLint integration, without formatting any existing files. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a Prettier configuration file at Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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. Comment |
Summary of ChangesHello @uelkerd, 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 establishes a foundational setup for consistent code formatting within the Highlights
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
|
|
Here's the code health analysis summary for commits Analysis Summary
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds Prettier configuration to establish consistent code formatting standards for the project without modifying any existing code files. The changes focus purely on setup and tooling configuration.
- Adds Prettier configuration with standard formatting rules
- Includes package.json with Prettier dependencies and formatting scripts
- Sets up ESLint integration packages for seamless workflow
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| website/package.json | Package configuration with Prettier dependencies and formatting scripts |
| website/.prettierrc | Prettier formatting configuration with standard rules |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `website/package.json:4-6` </location>
<code_context>
+ "name": "samo-dl-website",
+ "version": "1.0.0",
+ "description": "SAMO-DL emotion detection platform frontend",
+ "main": "index.html",
+ "scripts": {
+ "format": "prettier --write .",
</code_context>
<issue_to_address>
**suggestion:** The 'main' field is typically used for Node.js entry points, not static sites.
Consider removing the 'main' field from package.json to prevent confusion, as it is not needed for static sites.
```suggestion
"description": "SAMO-DL emotion detection platform frontend",
"scripts": {
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| "description": "SAMO-DL emotion detection platform frontend", | ||
| "main": "index.html", | ||
| "scripts": { |
There was a problem hiding this comment.
suggestion: The 'main' field is typically used for Node.js entry points, not static sites.
Consider removing the 'main' field from package.json to prevent confusion, as it is not needed for static sites.
| "description": "SAMO-DL emotion detection platform frontend", | |
| "main": "index.html", | |
| "scripts": { | |
| "description": "SAMO-DL emotion detection platform frontend", | |
| "scripts": { |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request is a great initiative to enforce consistent code formatting by integrating Prettier. The configuration in .prettierrc is solid and follows common practices. However, I've identified a few areas for improvement in package.json. The ESLint integration is currently incomplete as it's missing the core eslint dependency and a configuration file. Additionally, the main field is used unconventionally, and the format scripts could be more specific to avoid accidentally formatting unintended files. Addressing these points will ensure a robust and correct setup.
| "devDependencies": { | ||
| "prettier": "^3.0.0", | ||
| "eslint-config-prettier": "^9.0.0", | ||
| "eslint-plugin-prettier": "^5.0.0" | ||
| }, |
There was a problem hiding this comment.
The ESLint integration is incomplete. You've added eslint-config-prettier and eslint-plugin-prettier, which is great for making ESLint and Prettier work together, but the main eslint package is missing from devDependencies. Without it, these packages have no effect.
Additionally, an ESLint configuration file (e.g., .eslintrc.json) is needed to configure ESLint and use these plugins.
I suggest adding eslint to the dependencies. You will also need to add an ESLint configuration file to the project.
"devDependencies": {
"eslint": "^8.57.0",
"prettier": "^3.0.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0"
},| "name": "samo-dl-website", | ||
| "version": "1.0.0", | ||
| "description": "SAMO-DL emotion detection platform frontend", | ||
| "main": "index.html", |
There was a problem hiding this comment.
The main field in package.json is typically used to define the entry point for a Node.js module, usually a JavaScript file. For a static website project where npm is used only for development tooling, this field is not necessary and can be misleading. It's better to remove it for clarity.
| "format": "prettier --write .", | ||
| "format:check": "prettier --check .", |
There was a problem hiding this comment.
The Prettier scripts are currently targeting . which will attempt to format every file in the directory. While Prettier ignores some files by default (like node_modules), this is very broad and could format unintended files in the future (e.g., build artifacts, logs). It's better practice to use a more specific glob pattern to target only the files you intend to format.
"format": "prettier --write \"**/*.{html,css,js,json,md}\"",
"format:check": "prettier --check \"**/*.{html,css,js,json,md}\""- Add Prettier formatting scripts (format, format:check) - Keep all test-related scripts and dependencies - Maintain unified package.json with both capabilities - Merge contains previously approved changes from main 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Summary
Changes
website/.prettierrc- Prettier configuration filewebsite/package.json- Package configuration with Prettier dependenciesFortress Compliance
✅ 2 files (under 5-file limit)
✅ Configuration focused - no formatting changes to existing code
✅ Small and reviewable - focused on setup only
Dependencies
prettier- Core formatting tooleslint-config-prettier- Disable ESLint rules that conflict with Prettiereslint-plugin-prettier- Run Prettier as ESLint ruleScripts Added
format- Format all files with Prettierformat:check- Check if files are formatted correctlyNext Steps
After this PR merges, a separate PR can be created to apply Prettier formatting to existing files if desired.
🤖 Generated with Claude Code
Summary by Sourcery
Add Prettier integration to the website project, including configuration, dependencies, and formatting scripts
New Features:
Summary by CodeRabbit