feat: setup biome and formatting #47
Conversation
WalkthroughThis update adds tooling and configuration to improve code quality and developer workflow. A Husky pre-commit hook is introduced to run formatting, linting, and checks before commits. The Biome toolchain is configured via a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Git
participant Husky Pre-commit Hook
participant NPM Scripts (format/lint/check)
User->>Git: git commit
Git->>Husky Pre-commit Hook: Trigger pre-commit
Husky Pre-commit Hook->>NPM Scripts (format): Run format
NPM Scripts (format)-->>Husky Pre-commit Hook: Success/Fail
alt Format success
Husky Pre-commit Hook->>NPM Scripts (lint): Run lint
NPM Scripts (lint)-->>Husky Pre-commit Hook: Success/Fail
alt Lint success
Husky Pre-commit Hook->>NPM Scripts (check): Run check
NPM Scripts (check)-->>Husky Pre-commit Hook: Success/Fail
alt Check success
Husky Pre-commit Hook->>Git: Allow commit
else Check fail
Husky Pre-commit Hook-->>User: Abort commit
end
else Lint fail
Husky Pre-commit Hook-->>User: Abort commit
end
else Format fail
Husky Pre-commit Hook-->>User: Abort commit
end
Possibly related PRs
Poem
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 (
|
zhravan
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: 1
🧹 Nitpick comments (7)
index.html (7)
10-19: Secure external resource loading with SRI and crossorigin.
The CDN imports for Font Awesome, Faker, Marked, Toast UI Editor, and SweetAlert2 currently lack Subresource Integrity (integrityattribute) and thecrossoriginsetting, which helps prevent tampering and MITM attacks.Example diff for Font Awesome:
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" /> +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" + integrity="sha384-…" + crossorigin="anonymous" />
11-15: Consolidate Faker imports to a single module.
You load Faker via<script src="…/faker@8.4.0/+esm" type="module">and immediately re-import it in the next<script type="module">. Consider dropping the first<script src>or merging into one import that assignswindow.faker.
26-31: Move inline event handlers to JavaScript.
Inlineonclickattributes on buttons (dark-mode toggle, shortcut modal, mode selectors) scatter behavior across markup. For cleaner separation of concerns and easier testing, bind these event listeners inindex.jsusingaddEventListener.Also applies to: 37-60
24-24: Extract inline styles into CSS classes.
Multiple elements usestyle="display: flex;…"orstyle="display: none". Define utility classes (e.g.,.hidden,.flex-center) in your stylesheet and toggle those classes via JS or by default in markup.Also applies to: 77-77, 89-89, 101-101, 173-178
26-28: Specifytype="button"on non-submit buttons.
Buttons default totype="submit"in form contexts. Even if not inside a form today, it's safer to declare<button type="button">explicitly to guard against future refactoring into a form.Also applies to: 37-39
189-195: Enhance modal accessibility with ARIA attributes.
The shortcut modal uses a<div>and<span>without ARIA roles. Addrole="dialog",aria-modal="true", and link the close button witharia-labeloraria-labelledby. Replace the<span>close icon with a<button type="button">for better keyboard support.
153-154: Use a descriptive ID for the file-name input.
The download name<input id="userInput">is generic and may collide elsewhere. Rename to something likemockgen-filenameto clarify its purpose and avoid potential conflicts.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
.husky/pre-commit(1 hunks)biome.json(1 hunks)index.css(1 hunks)index.html(1 hunks)package.json(2 hunks)
🔇 Additional comments (8)
package.json (2)
7-11: Well-structured npm scripts for code quality enforcement.The added scripts properly integrate the Biome toolchain and Husky for enforcing code quality standards. The sequential execution in the pre-commit hook will ensure all code meets formatting and linting standards before being committed.
24-26: Appropriate dependencies with proper versioning.The added development dependencies use caret versioning (^) which allows for compatibility with minor and patch updates while maintaining major version stability. Both tools are industry-standard choices for code quality maintenance.
.husky/pre-commit (1)
1-4: Well-configured pre-commit hook.The hook is correctly set up to source Husky's environment and execute the code quality scripts in the right order.
biome.json (1)
1-32: Comprehensive Biome configuration with well-considered rule selections.The configuration establishes a solid foundation for code quality with:
- Automatic import organization
- Recommended linting rules with sensible exceptions (
noForEachanduseTemplatedisabled)- Consistent formatting settings (2-space indentation, 100 character line width)
- JavaScript-specific rules that align with industry practices
This configuration will help maintain consistent code style across the project.
index.css (3)
453-466: Well-designed language-specific code output styling.The distinct styling for different languages (Python, Go, TypeScript) provides good visual differentiation while maintaining a consistent theme. This enhances usability when working with multiple language outputs.
623-673: Comprehensive dark mode styling for Toast UI Editor.The dark mode implementation for the editor is thorough, applying appropriate styling to all editor components including toolbar, content areas, and code blocks. The use of
!importantis justified here to override the editor's default styling.
582-616: Clean tab management styling for editor section.The styling for the editor section's tab navigation is well-organized and consistent with the overall UI design. The active tab states and content visibility rules are properly implemented.
index.html (1)
178-184: Verify Markdown Editor initialization.
Theeditor-sectiononly provides an empty tabs container and a content placeholder. Confirm thataddEditorTab()inindex.jscorrectly instantiates Toast UI Editor instances, attaches them to the DOM, and applies the intended themes.
| .tree-children { | ||
| margin-left: 20px; | ||
| overflow: hidden; | ||
| transition: max-height 0.3s ease, opacity 0.3s ease; | ||
| max-height: 1000px; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .tree-children.collapsed { | ||
| max-height: 0; | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .tree-key { | ||
| position: relative; | ||
| cursor: pointer; | ||
| padding: 4px 6px; | ||
| display: inline-block; | ||
| border-radius: 3px; | ||
| transition: background-color 0.2s ease, box-shadow 0.2s ease; | ||
| outline: none; | ||
| } | ||
|
|
||
| .tree-key:hover, | ||
| .tree-key:focus { | ||
| background-color: rgba(0, 123, 255, 0.12); | ||
| box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); | ||
| } | ||
|
|
||
| .tree-key:active { | ||
| background-color: rgba(0, 123, 255, 0.25); | ||
| } | ||
|
|
||
| .tree-key::before { | ||
| content: "\25B6"; | ||
| display: inline-block; | ||
| transition: transform 0.2s ease; | ||
| margin-right: 6px; | ||
| font-size: 0.8em; | ||
| color: #555; | ||
| } | ||
|
|
||
| .tree-key.expanded::before { | ||
| transform: rotate(90deg); | ||
| color: #007bff; | ||
| } | ||
|
|
||
| .tree-key .node-info { | ||
| font-size: 0.8em; | ||
| color: #999; | ||
| margin-left: 6px; | ||
| } | ||
|
|
||
| .tree-key[title] { | ||
| position: relative; | ||
| } | ||
|
|
||
| .tree-key[title]:hover::after { | ||
| content: attr(title); | ||
| position: absolute; | ||
| top: 100%; | ||
| left: 0; | ||
| background: rgba(0, 0, 0, 0.75); | ||
| color: #fff; | ||
| font-size: 12px; | ||
| padding: 4px 6px; | ||
| border-radius: 4px; | ||
| white-space: nowrap; | ||
| margin-top: 4px; | ||
| z-index: 10; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| body.dark-mode .tree-key[title]:hover::after { | ||
| background: rgba(255, 255, 255, 0.1); | ||
| color: #e0e0e0; | ||
| border: 1px solid #666; | ||
| } | ||
|
|
||
| /* Accessibility: keyboard focus outline */ | ||
| .tree-key:focus-visible { | ||
| outline: 2px solid #007bff; | ||
| outline-offset: 2px; | ||
| } | ||
|
|
||
| /* Shift-click recursive expand/collapse (JS logic must add 'recursive' class to target for styling if needed) */ | ||
| .tree-key.shift-toggle { | ||
| background-color: rgba(0, 123, 255, 0.08); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove duplicated CSS code for tree components.
There's significant code duplication between lines 345-423 and 491-580, both containing nearly identical CSS rules for tree view components. This duplication makes maintenance difficult and increases the file size unnecessarily.
Remove the duplicated section:
-
-.tree-children {
- margin-left: 20px;
- overflow: hidden;
- transition: max-height 0.3s ease, opacity 0.3s ease;
- max-height: 1000px;
- opacity: 1;
-}
-
-.tree-children.collapsed {
- max-height: 0;
- opacity: 0;
- pointer-events: none;
-}
-
-.tree-key {
- position: relative;
- cursor: pointer;
- padding: 4px 6px;
- display: inline-block;
- border-radius: 3px;
- transition: background-color 0.2s ease, box-shadow 0.2s ease;
- outline: none;
-}
-
-.tree-key:hover,
-.tree-key:focus {
- background-color: rgba(0, 123, 255, 0.12);
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-}
-
-.tree-key:active {
- background-color: rgba(0, 123, 255, 0.25);
-}
-
-.tree-key::before {
- content: "\25B6";
- display: inline-block;
- transition: transform 0.2s ease;
- margin-right: 6px;
- font-size: 0.8em;
- color: #555;
-}
-
-.tree-key.expanded::before {
- transform: rotate(90deg);
- color: #007bff;
-}
-
-.tree-key .node-info {
- font-size: 0.8em;
- color: #999;
- margin-left: 6px;
-}
-
-.tree-key[title] {
- position: relative;
-}
-
-.tree-key[title]:hover::after {
- content: attr(title);
- position: absolute;
- top: 100%;
- left: 0;
- background: rgba(0, 0, 0, 0.75);
- color: #fff;
- font-size: 12px;
- padding: 4px 6px;
- border-radius: 4px;
- white-space: nowrap;
- margin-top: 4px;
- z-index: 10;
- pointer-events: none;
-}
-
-body.dark-mode .tree-key[title]:hover::after {
- background: rgba(255, 255, 255, 0.1);
- color: #e0e0e0;
- border: 1px solid #666;
-}
-
-/* Accessibility: keyboard focus outline */
-.tree-key:focus-visible {
- outline: 2px solid #007bff;
- outline-offset: 2px;
-}
-
-/* Shift-click recursive expand/collapse (JS logic must add 'recursive' class to target for styling if needed) */
-.tree-key.shift-toggle {
- background-color: rgba(0, 123, 255, 0.08);
-}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .tree-children { | |
| margin-left: 20px; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease, opacity 0.3s ease; | |
| max-height: 1000px; | |
| opacity: 1; | |
| } | |
| .tree-children.collapsed { | |
| max-height: 0; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .tree-key { | |
| position: relative; | |
| cursor: pointer; | |
| padding: 4px 6px; | |
| display: inline-block; | |
| border-radius: 3px; | |
| transition: background-color 0.2s ease, box-shadow 0.2s ease; | |
| outline: none; | |
| } | |
| .tree-key:hover, | |
| .tree-key:focus { | |
| background-color: rgba(0, 123, 255, 0.12); | |
| box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); | |
| } | |
| .tree-key:active { | |
| background-color: rgba(0, 123, 255, 0.25); | |
| } | |
| .tree-key::before { | |
| content: "\25B6"; | |
| display: inline-block; | |
| transition: transform 0.2s ease; | |
| margin-right: 6px; | |
| font-size: 0.8em; | |
| color: #555; | |
| } | |
| .tree-key.expanded::before { | |
| transform: rotate(90deg); | |
| color: #007bff; | |
| } | |
| .tree-key .node-info { | |
| font-size: 0.8em; | |
| color: #999; | |
| margin-left: 6px; | |
| } | |
| .tree-key[title] { | |
| position: relative; | |
| } | |
| .tree-key[title]:hover::after { | |
| content: attr(title); | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| background: rgba(0, 0, 0, 0.75); | |
| color: #fff; | |
| font-size: 12px; | |
| padding: 4px 6px; | |
| border-radius: 4px; | |
| white-space: nowrap; | |
| margin-top: 4px; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| body.dark-mode .tree-key[title]:hover::after { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: #e0e0e0; | |
| border: 1px solid #666; | |
| } | |
| /* Accessibility: keyboard focus outline */ | |
| .tree-key:focus-visible { | |
| outline: 2px solid #007bff; | |
| outline-offset: 2px; | |
| } | |
| /* Shift-click recursive expand/collapse (JS logic must add 'recursive' class to target for styling if needed) */ | |
| .tree-key.shift-toggle { | |
| background-color: rgba(0, 123, 255, 0.08); | |
| } |
🤖 Prompt for AI Agents (early access)
In index.css between lines 491 and 580, there is a duplicated set of CSS rules for tree view components that also appear between lines 345 and 423. To fix this, remove the entire duplicated block from lines 491 to 580, keeping only the first occurrence to reduce redundancy and improve maintainability.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
index.css (1)
347-420: Remove duplicated CSS code for tree view components.The entire
.tree-childrenand.tree-keyblocks are repeated between lines 347–420 and again at 493–580. This duplication makes maintenance error-prone and bloats the stylesheet. Consolidate into one definition.Also applies to: 493-580
🧹 Nitpick comments (2)
index.css (2)
5-11: Suggest using CSS variables for theme colors.You’ve hard-coded light theme colors (
#f0f0f0,#333,#007bff, etc.) throughout. Defining them as CSS custom properties in:root(and overriding inbody.dark-mode) will make future theme tweaks far easier and ensure consistency.For example:
:root { --bg-color: #f0f0f0; --text-color: #333; --primary-color: #007bff; --secondary-bg: #ffffff; /* … */ } body.dark-mode { --bg-color: #121212; --text-color: #e0e0e0; --secondary-bg: #2e2e2e; } body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; }Then reuse
var(--primary-color)etc. across all selectors.
753-768: New App Layout styling looks solid.The
.app-containerflex layout and.sidebarstyling correctly implement the sidebar-driven design as per the HTML changes.Consider whether both
bodyand.app-containerneed the samebackground-coloror if inheritance suffices.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
index.css(1 hunks)index.html(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- index.html
Summary by CodeRabbit
New Features
Improvements
Style
Chores