Implement conservative CSS refactoring with dual-class BEM approach f… #247
Conversation
|
Warning Rate limit exceeded@pftg has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 7 minutes and 47 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (3)
📒 Files selected for processing (37)
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. WalkthroughUpdates Hugo dev/test config and helpers, swaps dynamic CSS inputs across many templates, adds BEM/component CSS and homepage/404 BEM classes, modifies several page-specific CSS bundles, expands multiple blog posts, adds three docs, and deletes two playground markdowns. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev as Test Runner (bin/dtest)
participant Helper as Hugo::Helper
participant Hugo as Hugo CLI
participant FS as Dest Dir (_dest/public-dtest-<k>)
Note over Dev,Helper: PRECOMPILED_ASSETS=true, TEST_SERVER_PORT=1314
Dev->>Helper: precompile(port: nil)
Note right of Helper: Compute base path with suffix -(<port>%5) if port present
Helper->>Hugo: hugo --destination=_dest/public-dtest [...] --baseURL http://localhost:<@port?>
Hugo-->>FS: Write site assets (no clean)
FS-->>Dev: Built artifacts available
Note over Dev: Runs tests against fixed port 1314
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 |
pftg
force-pushed
the
refactor/non-semantic-classes-cleanup
branch
4 times, most recently
from
570748c to
e19999c
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR implements a comprehensive CSS refactoring strategy with dual-class BEM approach for the 404 page while systematically renaming FL-Builder CSS files from numeric to semantic names across the entire site. The migration maintains backward compatibility during transition and establishes clean component architecture patterns.
- Create semantic BEM classes alongside existing FL-node classes for safe migration
- Rename 24+ FL-Builder CSS files from cryptic numbers to meaningful semantic names
- Add new component library with standardized BEM methodology and responsive design patterns
Reviewed Changes
Copilot reviewed 35 out of 52 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| themes/beaver/layouts/404.html | Add BEM error-page classes alongside fl-node classes for dual-class approach |
| themes/beaver/assets/css/bem-404-conversion.css | New BEM mapping documentation for 404 page conversion |
| themes/beaver/layouts/home.html | Add semantic BEM classes (c-why-us, c-feature-card, etc.) maintaining FL-node compatibility |
| Multiple layout templates | Update CSS references from numeric names (586-dynamic.css) to semantic names (dynamic-icons.css) |
| themes/beaver/assets/css/components.css | New component library with BEM button, card, and grid components |
| themes/beaver/assets/css/bem-home-page-minimal.css | Comprehensive BEM implementation for homepage with 745 lines of semantic CSS |
| Documentation files | Add comprehensive CSS file mapping, component library docs, and BEM migration strategy |
| Test files | Remove large playground documentation files and update blog content formatting |
Comments suppressed due to low confidence (1)
themes/beaver/assets/css/fl-contact-layout.css:1
- Large block of FL-button styles removed without replacement. Ensure these button animation styles aren't needed elsewhere or provide equivalent component styles.
.fl-builder-content *, .fl-builder-content *:before, .fl-builder-content *:after {
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| @@ -1,3 +1,3 @@ | |||
| .fl-node-jucnbqyew63f > .fl-col-content, .fl-node-04h8akisgvow > .fl-col-content { | |||
| .fl-node-jucnbqyew63f > .fl-col-content, .fl-node-04h8akisgvow > .fl-col-content, .c-cta-section__content-column > .fl-col-content { | |||
There was a problem hiding this comment.
Mixing FL-node classes with BEM classes in selectors creates dependency on both naming systems. Consider creating a pure BEM version to eventually replace FL-node dependencies.
| .fl-node-jucnbqyew63f > .fl-col-content, .fl-node-04h8akisgvow > .fl-col-content, .c-cta-section__content-column > .fl-col-content { | |
| .c-cta-section__content-column > .fl-col-content { |
| # Build hugo command using argv array to avoid shell quoting issues | ||
| args = HUGO_OPTIONS.dup | ||
| args += %W[--baseURL http://localhost:#{port}] if port | ||
| args += %W[--baseURL http://localhost:#{@port}] if port |
There was a problem hiding this comment.
The condition if port uses the parameter, but the URL uses @port instance variable. This inconsistency could cause issues when port parameter is nil but @port is set.
| args += %W[--baseURL http://localhost:#{@port}] if port | |
| effective_port = port || @port | |
| args += %W[--baseURL http://localhost:#{effective_port}] if effective_port |
| data-post-id="590"> | ||
| {{ partial "homepage/hero.html" . }} | ||
| {{ partial "homepage/stats.html" . }} | ||
| {{ partial "homepage/services.html" . }} |
There was a problem hiding this comment.
While the dual-class approach maintains compatibility, the class lists are becoming very long. Consider documenting the migration timeline to eventually remove fl-* classes for cleaner markup.
| {{ partial "homepage/services.html" . }} | |
| {{ partial "homepage/services.html" . }} | |
| <!-- | |
| Migration note: | |
| The following element uses both legacy 'fl-*' classes and newer 'c-*' classes for compatibility. | |
| Plan: Gradually migrate styles to use only the new class system (e.g., 'c-*'), and remove 'fl-*' classes once all dependencies and templates are updated. | |
| Target timeline: [Insert expected migration completion date or criteria here]. | |
| See: [link to migration documentation or issue tracker] | |
| --> |
| .c-why-us { | ||
| /* Migrated styles from FL-node-pym08gf9wr2o */ | ||
| } |
There was a problem hiding this comment.
Empty CSS block with only comments could be confusing. Either add the actual migrated styles or remove the empty block to avoid confusion about which styles are applied where.
| .c-why-us { | |
| /* Migrated styles from FL-node-pym08gf9wr2o */ | |
| } |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
test/support/hugo_helpers.rb (1)
97-103: Directory index path bug: absolute request path breaks File.join base.File.join(@public_path, "/foo/", "index.html") ignores @public_path. Use delete_prefix.
- index_file = File.join(@public_path, path, "index.html") + index_file = File.join(@public_path, path.delete_prefix("/"), "index.html")content/blog/building-scalable-rails-apis-architecture-design-patterns.md (2)
146-163: JWT.decode should verify with explicit algorithmDecode is called without verification options. Pass the algorithm and enable verification to prevent alg confusion and related issues.
Apply:
- decoded_token = JWT.decode(token, Rails.application.secret_key_base)[0] + decoded_token = JWT.decode( + token, + Rails.application.secret_key_base, + true, + { algorithm: 'HS256' } + ).firstRepeat the same in other decode sites in this article.
474-481: Rate limiter’s JWT decode also needs verificationSame concern as above: add algorithm and verification flags.
Provide the same fix pattern as suggested earlier.
♻️ Duplicate comments (4)
themes/beaver/assets/css/cta-backgrounds.css (1)
1-1: Phase-1 dual-class selector is fine; prep a pure-BEM rule for Phase 2.Keeps BC while migrating. Plan to split a BEM-only rule when FL-node classes are removed.
test/support/hugo_helpers.rb (1)
26-33: Port handling bug: condition checks param, URL uses @PORT.If precompile(port: X) while @PORT is nil, baseURL is wrong.
- args += %W[--baseURL http://localhost:#{@port}] if port + effective_port = port || @port + args += %W[--baseURL http://localhost:#{effective_port}] if effective_portthemes/beaver/assets/css/bem-home-page-minimal.css (1)
13-16: Empty semantic hooks: add explicit intentEmpty blocks like .c-why-us {} can be kept, but note they are intentionally empty to pass stylelint and guide Phase 2.
Apply:
.c-why-us { - /* Migrated styles from FL-node-pym08gf9wr2o */ + /* intentionally empty: BEM hook for Phase 1 */ }themes/beaver/layouts/home.html (1)
46-66: Document the migration window for dual-class markup.Class lists are getting long. Add a brief HTML comment with the planned cutoff date/criteria for removing
fl-*classes, per earlier feedback.Example:
<!-- Migration note: Dual-class (fl-* + c-*) for BEM rollout. Remove fl-* after [criteria/date]. Ref: PR-247 migration plan. -->Also applies to: 73-86, 97-106, 140-146, 180-186, 220-226, 265-271, 323-361
🧹 Nitpick comments (26)
test/support/hugo_helpers.rb (4)
8-11: Destination suffix via port % 5 risks collisions; also duplicate path logic.Use the full port (or hash) and centralize with build_destination_path.
- base_path = "#{base_path}-#{port % 5}" if !ENV["PRECOMPILED_ASSETS"] && port - - @destination = Pathname.new(base_path).expand_path + @destination = build_destination_path(base_path, port)
66-71: Update build_destination_path to avoid suffix collisions and honor PRECOMPILED_ASSETS.Current modulo can collide across ports; also align with initialize.
- def build_destination_path(base_path, port) - if port - Pathname.new("#{base_path}-#{port % 5}").expand_path - else - Pathname.new(base_path).expand_path - end - end + def build_destination_path(base_path, port) + if port && !ENV["PRECOMPILED_ASSETS"] + Pathname.new("#{base_path}-#{port}").expand_path + else + Pathname.new(base_path).expand_path + end + end
7-11: Prefer ENV.fetch with HUGO_PUBLIC_DIR fallback for consistency.Aligns with repo/env naming.
- base_path = path || ENV.fetch("HUGO_DEFAULT_PATH", "_dest/public-test") + base_path = path || ENV.fetch("HUGO_PUBLIC_DIR", ENV.fetch("HUGO_DEFAULT_PATH", "_dest/public-test"))
26-35: Smoke-test precompile; fix port usage in --baseURLprecompile correctly short-circuits when PRECOMPILED_ASSETS is set (confirmed), but it tests the port parameter and interpolates @PORT — make the method use the passed port (or remove the unused param) to avoid mismatches, then smoke-test that HUGO_DEFAULT_PATH suffixing (port % 5) and TEST_SERVER_PORT produce the expected --destination and --baseURL in both precompiled and dynamic runs.
Locations: test/support/hugo_helpers.rb (initialize + precompile), test/application_system_test_case.rb (Hugo.new / precompile call)
content/blog/ruby-on-rails-testing-strategy-unit-tests-integration.md (1)
699-704: Avoid using secret_key_base directly for JWTs in examplesPrefer a dedicated test secret (e.g., Rails.application.credentials.jwt_secret or ENV['JWT_SECRET']) and specify algorithm to avoid insecure decoder defaults in copy‑pasted code.
Apply:
- JWT.encode(payload, Rails.application.secret_key_base) + JWT.encode(payload, Rails.application.credentials.jwt_secret || 'test-secret', 'HS256')content/blog/building-scalable-rails-apis-architecture-design-patterns.md (1)
336-338: Reading time returns 0 for <200 wordsThis yields 0 minutes for short posts. Consider ceil with a minimum of 1 to match expectations and your earlier guide.
Apply:
- (post.content&.split&.size || 0) / 200 # Rough reading time in minutes + [(post.content&.split&.size || 0) / 200.0, 1].max.ceilthemes/beaver/assets/css/components.css (2)
101-121: Mobile-first grid currently forces multi-column on small screensSetting grid-template-columns on modifiers at base scope makes 2/3/4 columns apply on mobile. Move column counts into media queries so base remains single-column.
Apply:
-.c-grid--2-col { grid-template-columns: repeat(2, 1fr); } -.c-grid--3-col { grid-template-columns: repeat(3, 1fr); } -.c-grid--4-col { grid-template-columns: repeat(4, 1fr); } +/* Columns only above tablet; mobile stays single column */ +@media (min-width: 768px) { + .c-grid--2-col { grid-template-columns: repeat(2, 1fr); } + .c-grid--3-col { grid-template-columns: repeat(2, 1fr); } + .c-grid--4-col { grid-template-columns: repeat(2, 1fr); } +} + +@media (min-width: 1024px) { + .c-grid--3-col { grid-template-columns: repeat(3, 1fr); } + .c-grid--4-col { grid-template-columns: repeat(4, 1fr); } +}
7-12: Add pointer cursor and focus-visible for accessibilityImprove affordance and keyboard UX.
Apply:
.c-button { border-radius: 4px; display: inline-block; text-decoration: none; + cursor: pointer; } +.c-button:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; +}themes/beaver/assets/css/bem-404-conversion.css (1)
8-13: Clarify intentionally-empty scaffoldingEmpty blocks can confuse future maintainers and linters. Add an explicit note or disable block-no-empty per section.
Apply:
.error-page { - /* BEM class for main 404 page container */ - /* Semantic: Main error page wrapper */ + /* intentionally empty: Phase 1 BEM hook for 404 wrapper */ + /* stylelint-disable-next-line block-no-empty */ }Repeat for other empty selectors in this file.
docs/bem-migration-implementation-plan.md (1)
25-34: Tables need blank lines and code fences need languages (markdownlint)Add blank lines around the table and specify a language for fenced blocks flagged by MD040/MD058.
Example:
-### Naming Convention Strategy - -| Legacy Class Pattern | BEM Replacement | Purpose | +### Naming Convention Strategy + +| Legacy Class Pattern | BEM Replacement | Purpose | ... -``` +```text (architecture diagram)</blockquote></details> <details> <summary>docs/component-library-documentation.md (1)</summary><blockquote> `136-146`: **Fix headings with trailing colons (markdownlint MD026)** Remove trailing punctuation in headings “Templates Migrated:”, “Layouts Updated with Component CSS:”, “CSS Cleanup:”. </blockquote></details> <details> <summary>themes/beaver/assets/css/bem-home-page-minimal.css (3)</summary><blockquote> `70-90`: **Fix flex shorthand overriding warnings** Shorthand flex declared after flex-shrink triggers lint warning and overrides earlier values. Define flex once or place it before individual properties. Apply: ```diff - flex-direction: column; - flex-shrink: 1; - min-width: 1px; - max-width: 100%; - -webkit-box-flex: 1 1 auto; - -moz-box-flex: 1 1 auto; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + flex-direction: column; + min-width: 1px; + max-width: 100%; + flex: 1 1 auto; /* sets grow, shrink, basis */(Remove redundant vendor-prefixed flex where possible unless required for target browsers.)
1-11: Header claims “hooks only” but file contains visual overridesThis file applies paddings, margins, colors, etc. Update the header comment to reflect “safe‑migration mirror styles” to avoid misleading future refactors.
Apply:
- * Only semantic class hooks without visual changes - * These classes provide semantic naming without altering existing FL-builder styles + * Semantic classes plus mirrored FL-builder styles to maintain visual parity during migration
34-42: Simplify calc centeringleft: calc(50% - 50%) is equivalent to 0; if no transform context needed, simplify.
Apply:
- left: calc(50% - 50%); + left: 0;Ensure no visual change across breakpoints.
CLAUDE.md (2)
1257-1338: Scope and placement of “99 Bottles” section — consider relocating to docs/This large methodology block expands CLAUDE.md significantly. To keep this file actionable and high‑signal, suggest moving the detailed guidance to docs (e.g., docs/60.03-tdd-quality-standards.md) and leaving a short summary + links here.
4794-5109: Markdown lint violations: duplicate heading and missing reference labels
- MD024: duplicate/near‑duplicate heading around “Claude Code Configuration – JT Site” reappears here.
- MD036: emphasis used in place of a heading (“Optimized for XP…”).
- MD052: footnote/grid references like [1], [5], [16], [32] have no definitions.
Please normalize headings and either add link definitions or replace bracketed references with inline links/text.
Apply minimal fixes:
-# Claude Code Configuration - JT Site (Hugo-based Static Site) -*Optimized for XP, TDD, and Refactoring Practices* +## Appendix: XP/TDD Optimizations +This appendix is optimized for XP, TDD, and refactoring practices. -This configuration file has been **optimized for Extreme Programming (XP), Test-Driven Development (TDD), and systematic refactoring practices**[1][2][3][4][5]. +This configuration file has been optimized for Extreme Programming (XP), Test-Driven Development (TDD), and systematic refactoring practices.If you prefer to keep numeric references, add a “References” list with definitions at the end.
themes/beaver/layouts/page/services.html (1)
5-5: CSS order: double-check cascade does not regress page styles.Base CSS comes after section-specific CSS here. If base-layout.css contains broad selectors, it can override fl-services-layout.css. Consider moving base earlier if any regressions show up.
Apply only if needed:
- (resources.Get "css/fl-services-layout.css") (resources.Get "css/component-bundle.css") (resources.Get "css/services-layout.css") (resources.Get "css/base-layout.css") ... + (resources.Get "css/base-layout.css") (resources.Get "css/fl-services-layout.css") (resources.Get "css/component-bundle.css") (resources.Get "css/services-layout.css") ...themes/beaver/layouts/page/use-cases.html (1)
5-5: Confirm CSS cascade after renaming to fl-use-cases-layout.css.Name is clearer; just ensure loading order relative to base-layout.css doesn’t alter specificity outcomes.
themes/beaver/layouts/careers/single.html (1)
151-154: Typo: “Linkedin” → “LinkedIn”.Update the visible label.
- <span class="pp-share-button-title">Linkedin</span> + <span class="pp-share-button-title">LinkedIn</span>themes/beaver/layouts/page/careers.html (1)
5-5: Static CSS: confirm fl-careers-layout.css parity and ordering.Renamed layout file looks good; ensure loading order vs base-layout.css doesn’t change specificity unexpectedly.
themes/beaver/layouts/clients/single.html (4)
88-90: Suspicious class list: unintended classes “Case”, “Details”, “-”, “Dark”.Spaces split classes. If this is meant to be a single modifier, use hyphens or BEM.
Apply:
-<div - class="fl-row fl-row-full-width fl-row-bg-photo fl-node-xaj4396uy5vp fl-row-default-height fl-row-align-center Case Details - Dark" - data-node="xaj4396uy5vp"> +<div + class="fl-row fl-row-full-width fl-row-bg-photo fl-node-xaj4396uy5vp fl-row-default-height fl-row-align-center case-details case-details--dark" + data-node="xaj4396uy5vp">
200-206: Redundant/invalid meta tags for image dimensions.
<meta content="...">without name/property is ignored; width/height are already on<img>. Remove the metas to reduce noise.-{{ if $imageItemW1024 }} - <meta content="{{ $imageItemW1024.Width }}" /> - <meta - content="{{ $imageItemW1024.Height }}" /> -{{ end }}Also applies to: 282-286
263-271: Mixed lazy-load signals.
loading="lazy"conflicts with classesno-lazyload/skip-lazy. Pick one strategy (browser-native or plugin) to avoid double-handling.- class="pp-gallery-img no-lazyload skip-lazy" + class="pp-gallery-img"
408-411: Use relURL for internal links.Avoid hardcoded “/contact-us/” to keep i18n/baseURL-safe.
-<a href="/contact-us/" target="_self" class="fl-button"> +<a href="{{ relURL "contact-us/" }}" target="_self" class="fl-button">themes/beaver/layouts/home.html (2)
265-271: Inline style and section classes.Move
style="margin-bottom: 130px"into CSS (prefer the new BEM blocks/modifiers) to keep templates presentationally clean.-<div id="cta" class="fl-col-group c-cta-section fl-col-group-custom-width" ... style="margin-bottom: 130px"> +<div id="cta" class="fl-col-group c-cta-section c-cta-section--mb-130 fl-col-group-custom-width" ...>And define
.c-cta-section--mb-130in CSS (or better, a tokenized spacing utility).Also applies to: 298-313, 323-361
371-376: Use relURL for internal CTA link.-<a - href="/contact-us/" +<a + href="{{ relURL "contact-us/" }}" target="_self" class="fl-button">
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
test/fixtures/screenshots/linux/desktop/homepage/_cta-contact_us.pngis excluded by!**/*.pngtest/fixtures/screenshots/macos/desktop/homepage/_cta-contact_us.pngis excluded by!**/*.pngtest/fixtures/screenshots/macos/mobile/clients.pngis excluded by!**/*.png
📒 Files selected for processing (36)
.dev/compose.yml(1 hunks)CLAUDE.md(5 hunks)_playground/20250914_jt_site_onboarding_report.md(0 hunks)_playground/20250914_spawning_tests.md(0 hunks)bin/dtest(1 hunks)content/blog/building-scalable-rails-apis-architecture-design-patterns.md(9 hunks)content/blog/how-to-manage-developers-when-you-cant-code.md(6 hunks)content/blog/internal-product-teams-cost-center-to-profit-driver.md(9 hunks)content/blog/rails-7-upgrade-guide-step-by-step-migration.md(7 hunks)content/blog/ruby-on-rails-testing-strategy-unit-tests-integration.md(6 hunks)docs/bem-migration-implementation-plan.md(1 hunks)docs/component-library-documentation.md(1 hunks)docs/css-file-mapping.md(1 hunks)test/support/hugo_helpers.rb(3 hunks)themes/beaver/assets/css/bem-404-conversion.css(1 hunks)themes/beaver/assets/css/bem-home-page-minimal.css(1 hunks)themes/beaver/assets/css/components.css(1 hunks)themes/beaver/assets/css/cta-backgrounds.css(1 hunks)themes/beaver/assets/css/fl-contact-layout.css(0 hunks)themes/beaver/layouts/404.html(6 hunks)themes/beaver/layouts/blog/list.html(1 hunks)themes/beaver/layouts/careers/single.html(1 hunks)themes/beaver/layouts/clients/single.html(1 hunks)themes/beaver/layouts/home.html(15 hunks)themes/beaver/layouts/list.html(1 hunks)themes/beaver/layouts/page/about.html(1 hunks)themes/beaver/layouts/page/careers.html(1 hunks)themes/beaver/layouts/page/clients.html(1 hunks)themes/beaver/layouts/page/contact-us.html(1 hunks)themes/beaver/layouts/page/free-consultation.html(1 hunks)themes/beaver/layouts/page/services.html(1 hunks)themes/beaver/layouts/page/single.html(1 hunks)themes/beaver/layouts/page/use-cases.html(1 hunks)themes/beaver/layouts/services/single.html(1 hunks)themes/beaver/layouts/single.html(1 hunks)themes/beaver/layouts/use-cases/single.html(1 hunks)
💤 Files with no reviewable changes (3)
- _playground/20250914_spawning_tests.md
- _playground/20250914_jt_site_onboarding_report.md
- themes/beaver/assets/css/fl-contact-layout.css
🧰 Additional context used
📓 Path-based instructions (4)
{layouts,themes/**/layouts}/**/*.html
📄 CodeRabbit inference engine (CLAUDE.md)
{layouts,themes/**/layouts}/**/*.html: Use Hugo Go template syntax in templates; do not embed PHP or JSX/React in layout files
Do not include raw PHP snippets () in Hugo templates
Do not include React/JSX components in Hugo templates (e.g., )
Files:
themes/beaver/layouts/page/free-consultation.htmlthemes/beaver/layouts/404.htmlthemes/beaver/layouts/careers/single.htmlthemes/beaver/layouts/page/use-cases.htmlthemes/beaver/layouts/use-cases/single.htmlthemes/beaver/layouts/page/clients.htmlthemes/beaver/layouts/single.htmlthemes/beaver/layouts/blog/list.htmlthemes/beaver/layouts/list.htmlthemes/beaver/layouts/page/services.htmlthemes/beaver/layouts/page/about.htmlthemes/beaver/layouts/services/single.htmlthemes/beaver/layouts/page/careers.htmlthemes/beaver/layouts/page/contact-us.htmlthemes/beaver/layouts/clients/single.htmlthemes/beaver/layouts/page/single.htmlthemes/beaver/layouts/home.html
content/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
content/**/*.md: Content must be authored as Markdown files following Hugo front matter conventions
Apply markdownlint to Markdown content for style and quality
Files:
content/blog/rails-7-upgrade-guide-step-by-step-migration.mdcontent/blog/internal-product-teams-cost-center-to-profit-driver.mdcontent/blog/building-scalable-rails-apis-architecture-design-patterns.mdcontent/blog/how-to-manage-developers-when-you-cant-code.mdcontent/blog/ruby-on-rails-testing-strategy-unit-tests-integration.md
{**/*.rb,Rakefile,**/*.rake}
📄 CodeRabbit inference engine (CLAUDE.md)
Use ENV.fetch for configurable values in Ruby (e.g., TEST_SERVER_PORT, HUGO_PUBLIC_DIR) and avoid hardcoded ports/paths
Files:
test/support/hugo_helpers.rb
**/*.rb
📄 CodeRabbit inference engine (CLAUDE.md)
Follow Standard Ruby style (bundle exec standardrb) for all Ruby code
Files:
test/support/hugo_helpers.rb
🧠 Learnings (7)
📚 Learning: 2024-11-08T06:10:55.003Z
Learnt from: AucT
PR: jetthoughts/jetthoughts.github.io#200
File: themes/beaver/assets/css/use-cases-dynamic.css:86-102
Timestamp: 2024-11-08T06:10:55.003Z
Learning: In `themes/beaver/assets/css/use-cases-dynamic.css`, the user prefers to use absolute units (e.g., `px`) over relative units (e.g., `rem`), and considers it acceptable to omit semicolons at the end of CSS declarations.
Applied to files:
themes/beaver/layouts/page/use-cases.html
📚 Learning: 2024-11-08T06:11:04.017Z
Learnt from: AucT
PR: jetthoughts/jetthoughts.github.io#200
File: themes/beaver/assets/css/use-cases-dynamic.css:117-134
Timestamp: 2024-11-08T06:11:04.017Z
Learning: In `themes/beaver/assets/css/use-cases-dynamic.css`, duplicate declarations of `.use-cases .tab-panel .item` are acceptable and should not be flagged.
Applied to files:
themes/beaver/layouts/page/use-cases.htmlthemes/beaver/layouts/use-cases/single.html
📚 Learning: 2024-11-08T06:11:04.017Z
Learnt from: AucT
PR: jetthoughts/jetthoughts.github.io#200
File: themes/beaver/assets/css/use-cases-dynamic.css:117-134
Timestamp: 2024-11-08T06:11:04.017Z
Learning: In `themes/beaver/assets/css/use-cases-dynamic.css`, using Hugo template syntax within the `background-image` property is acceptable and should not be flagged as parsing errors.
Applied to files:
themes/beaver/layouts/page/use-cases.html
📚 Learning: 2025-09-17T11:37:44.338Z
Learnt from: CR
PR: jetthoughts/jetthoughts.github.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-17T11:37:44.338Z
Learning: All file modifications require pre-review approval (Four-Eyes principle) before implementation or commit
Applied to files:
CLAUDE.md
📚 Learning: 2025-09-17T11:37:44.337Z
Learnt from: CR
PR: jetthoughts/jetthoughts.github.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-17T11:37:44.337Z
Learning: Applies to {**/*.rb,Rakefile,**/*.rake} : Use ENV.fetch for configurable values in Ruby (e.g., TEST_SERVER_PORT, HUGO_PUBLIC_DIR) and avoid hardcoded ports/paths
Applied to files:
test/support/hugo_helpers.rb
📚 Learning: 2025-09-17T11:37:44.337Z
Learnt from: CR
PR: jetthoughts/jetthoughts.github.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-17T11:37:44.337Z
Learning: Applies to test/**/*_test.rb : Each Ruby test method must include at least one assertion (assert_*, refute_*, or flunk) and validate behavior, not just run code
Applied to files:
content/blog/ruby-on-rails-testing-strategy-unit-tests-integration.md
📚 Learning: 2025-09-17T11:37:44.338Z
Learnt from: CR
PR: jetthoughts/jetthoughts.github.io#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-17T11:37:44.338Z
Learning: Maintain TDD discipline: write a failing test before production code, keep cycles small, and only write minimal code to pass
Applied to files:
content/blog/ruby-on-rails-testing-strategy-unit-tests-integration.md
🪛 markdownlint-cli2 (0.17.2)
docs/component-library-documentation.md
136-136: Trailing punctuation in heading
Punctuation: ':'
(MD026, no-trailing-punctuation)
141-141: Trailing punctuation in heading
Punctuation: ':'
(MD026, no-trailing-punctuation)
146-146: Trailing punctuation in heading
Punctuation: ':'
(MD026, no-trailing-punctuation)
CLAUDE.md
4795-4795: Multiple headings with the same content
(MD024, no-duplicate-heading)
4796-4796: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
4800-4800: Reference links and images should use a label that is defined
Missing link or image reference definition: "5"
(MD052, reference-links-images)
4802-4802: Reference links and images should use a label that is defined
Missing link or image reference definition: "16"
(MD052, reference-links-images)
4807-4807: Reference links and images should use a label that is defined
Missing link or image reference definition: "32"
(MD052, reference-links-images)
4815-4815: Reference links and images should use a label that is defined
Missing link or image reference definition: "19"
(MD052, reference-links-images)
4840-4840: Reference links and images should use a label that is defined
Missing link or image reference definition: "24"
(MD052, reference-links-images)
4864-4864: Reference links and images should use a label that is defined
Missing link or image reference definition: "30"
(MD052, reference-links-images)
4888-4888: Reference links and images should use a label that is defined
Missing link or image reference definition: "8"
(MD052, reference-links-images)
4910-4910: Reference links and images should use a label that is defined
Missing link or image reference definition: "11"
(MD052, reference-links-images)
4924-4924: Reference links and images should use a label that is defined
Missing link or image reference definition: "8"
(MD052, reference-links-images)
4940-4940: Reference links and images should use a label that is defined
Missing link or image reference definition: "16"
(MD052, reference-links-images)
4960-4960: Reference links and images should use a label that is defined
Missing link or image reference definition: "8"
(MD052, reference-links-images)
5099-5099: Reference links and images should use a label that is defined
Missing link or image reference definition: "6"
(MD052, reference-links-images)
5101-5101: Reference links and images should use a label that is defined
Missing link or image reference definition: "28"
(MD052, reference-links-images)
5102-5102: Reference links and images should use a label that is defined
Missing link or image reference definition: "24"
(MD052, reference-links-images)
5102-5102: Reference links and images should use a label that is defined
Missing link or image reference definition: "25"
(MD052, reference-links-images)
5103-5103: Reference links and images should use a label that is defined
Missing link or image reference definition: "8"
(MD052, reference-links-images)
5104-5104: Reference links and images should use a label that is defined
Missing link or image reference definition: "32"
(MD052, reference-links-images)
5105-5105: Reference links and images should use a label that is defined
Missing link or image reference definition: "5"
(MD052, reference-links-images)
docs/bem-migration-implementation-plan.md
10-10: Spaces inside emphasis markers
(MD037, no-space-in-emphasis)
37-37: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
250-250: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
257-257: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
322-322: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
328-328: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
336-336: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🪛 Biome (2.1.2)
themes/beaver/assets/css/bem-home-page-minimal.css
[error] 89-89: Unexpected shorthand property flex after flex-shrink
(lint/suspicious/noShorthandPropertyOverrides)
🔇 Additional comments (34)
content/blog/how-to-manage-developers-when-you-cant-code.md (1)
250-255: No change needed — CTA usesbutton-url.
Shortcode usage and the template (.Get "button-url") confirmbutton-urlis the expected param; the suggestion to usebutton-linkis incorrect.Likely an incorrect or invalid review comment.
themes/beaver/assets/css/cta-backgrounds.css (1)
1-3: No action needed — cta-backgrounds.css is already executed as a Hugo template.
It’s passed through resources.ExecuteAsTemplate in themes/beaver/layouts/home.html (line 17) and themes/beaver/layouts/404.html (line 3).content/blog/internal-product-teams-cost-center-to-profit-driver.md (1)
20-21: Formatting-only separators OK — Mermaid support confirmedTheme (themes/beaver) includes the Mermaid CDN + mermaid.initialize in layouts/baseof.html and a render-codeblock-mermaid partial that sets features.mermaid and emits
; no changes required.themes/beaver/layouts/list.html (1)
7-7: Switch to dynamic-icons.css — no dynamic.css rules needed on list pages.
dynamic.css is only referenced in themes/beaver/layouts/home.html; list pages (themes/beaver/layouts/list.html, themes/beaver/layouts/blog/list.html) use dynamic-icons.css/dynamic586.css.content/blog/ruby-on-rails-testing-strategy-unit-tests-integration.md (2)
166-314: Model spec block looks solidGood coverage across associations, validations, scopes, methods, and callbacks. Nicely scoped examples.
1238-1336: CI snippet: use setup-chrome instead of apt-get ChromeInstalling Chrome via apt in GitHub Actions is flaky; use browser-actions/setup-chrome for stability and cacheable installs.
[ suggest_optional_refactor ]
Apply:- - name: Install dependencies - run: | - npm install - sudo apt-get update - sudo apt-get install -y google-chrome-stable + - name: Install dependencies + run: npm install + + - name: Setup Chrome + uses: browser-actions/setup-chrome@v1themes/beaver/assets/css/bem-404-conversion.css (1)
55-65: Useful mapping reference — keep it synced with template changesThe mapping looks good. Please keep IDs/classes in sync with themes/beaver/layouts/404.html during Phase 2 removal.
docs/css-file-mapping.md (1)
9-25: Mapping table reads wellClear, actionable mapping with template references.
docs/component-library-documentation.md (1)
86-95: Hugo snippet is correctUsing minify | fingerprint is the right pattern.
CLAUDE.md (1)
1984-2068: Policy assertions vs. project rules — align with Four‑Eyes learningThese mandates look compatible with the repo’s Four‑Eyes principle (pre‑review before edits). Confirm this document was itself pre‑approved per that rule before merge.
Also applies to: 2074-2104
themes/beaver/layouts/page/single.html (1)
3-3: Dynamic CSS + layout CSS swap — watch for order‑dependent regressions
- dynamic-icons.css input: OK.
- fl-component-layout-alt.css replaces the previous layout CSS; keep an eye on specificity/order impacts versus component-bundle/theme-main.
Run a quick visual check on the affected page template in CI screenshots.
Also applies to: 5-5
themes/beaver/layouts/page/free-consultation.html (1)
3-3: Dynamic CSS input changed — build sanity checkChange aligns with the standardization. Please confirm production build artifacts include css/dynamic586.css as expected.
themes/beaver/layouts/services/single.html (1)
3-3: Services detail CSS updated — confirm layout replacement impact
- dynamic-icons.css input: OK.
- fl-service-detail-layout.css replaces prior layout CSS; validate spacing/typography on service pages across breakpoints.
Also applies to: 5-5
themes/beaver/layouts/single.html (1)
8-8: Consistent dynamic CSS migration — verifiedMatches other templates; search found 0 references to "586-dynamic.css".
themes/beaver/layouts/blog/list.html (1)
7-7: Switched dynamic CSS input to dynamic-icons.css — asset present; verify site buildthemes/beaver/assets/css/dynamic-icons.css exists and is referenced by multiple templates (e.g. themes/beaver/layouts/blog/list.html, single.html, 404.html, home.html, page/*). Run a Hugo build to confirm resources.ExecuteAsTemplate produces css/dynamic586.css with no errors.
themes/beaver/layouts/page/about.html (1)
3-3: Updated CSS stack for About page — order verified
- components.css and fl-about-layout.css are present and listed before theme-main.css in themes/beaver/layouts/page/about.html ($aboutResources slice).
- dynamic-icons.css is processed via resources.ExecuteAsTemplate (assigned to $dynamicCSS586) and included in the bundle.
themes/beaver/layouts/page/services.html (1)
3-3: Dynamic CSS source switch looks good; confirm asset presence and parity.Switching to css/dynamic-icons.css while keeping the output at css/dynamic586.css matches the PR plan. Please verify the new input exists and produces identical icon rules to the previous 586-dynamic.css on this page.
themes/beaver/layouts/page/use-cases.html (1)
3-3: Dynamic CSS migration approved.Input moved to css/dynamic-icons.css with the same css/dynamic586.css output. Consistent with other templates.
themes/beaver/layouts/use-cases/single.html (2)
3-3: Dynamic icons pipeline change is consistent.No issues; keep an eye on cache keys for the generated css/dynamic586.css across pages.
5-13: Resource rename to fl-component-layout.css: verify 1:1 rules coverage.Ensure fl-component-layout.css fully replaces 3027-layout.css without omissions that this page relied on.
themes/beaver/layouts/page/clients.html (2)
3-3: Static bundle rename LGTM.fl-clients-layout.css and fl-clients-bundle.css improve clarity. Confirm both files are present in the assets pipeline.
4-4: Dynamic CSS input unified to dynamic-icons.css — OK.Output remains css/dynamic586.css; consistent with the repo-wide approach.
bin/dtest (2)
10-11: Hugo flag syntax changes: verify version compatibility.Using equals form (e.g., --destination=…, --logLevel=warn) requires a Hugo version that supports it. Please confirm the CI/runtime Hugo version.
16-16: No changes required — PRECOMPILED_ASSETS & TEST_SERVER_PORT verifiedHelpers, tests, and CI already read PRECOMPILED_ASSETS and honor TEST_SERVER_PORT (bin/dtest, test/application_system_test_case.rb, test/support/hugo_helpers.rb, .github/workflows/test-unit.yml).
themes/beaver/layouts/careers/single.html (1)
1-16: Header pipeline update approved.Switched to css/dynamic-icons.css and bundled via css-processor with bundleName=single-careers — consistent with the PR.
themes/beaver/layouts/page/careers.html (1)
3-3: Dynamic CSS input switch is consistent.Keeps output css/dynamic586.css; aligns with other pages.
themes/beaver/layouts/404.html (3)
3-12: 404 bundle: BEM conversion and dynamic sources — good; validate order.Adding bem-404-conversion.css and switching dynamic sources is on-spec. Please confirm cascade order (404.css before bem-404-conversion.css) yields intended overrides and no duplication with services/mobile/footer CSS.
19-20: Dual-class BEM wrapper applied correctly.error-page on the main container enables scoped overrides without breaking legacy classes.
25-26: BEM sub-blocks added alongside legacy classes — LGTM.error-page__hero, __main-section, __message-col, __image-col, __spacer-section, __cta-section follow the dual-class strategy. Ensure bem-404-conversion.css includes these selectors.
Also applies to: 48-52, 93-95, 114-116, 128-131
themes/beaver/layouts/clients/single.html (2)
114-119: External link security: LGTM.
target="_blank"is paired withrel="noopener noreferrer". Good.
1-16: CSS pipeline changes look reasonable — validate bundle precedenceAll referenced CSS files exist in themes/beaver/assets/css; confirm client-specific overrides still win with the new include order and scan for duplicate selectors between fl-* and non-fl-* files (fl-homepage-layout.css, fl-services-layout.css present).
themes/beaver/layouts/home.html (2)
46-101: Dual-class BEM adoption reads clean.Using
c-…alongside existingfl-…classes aligns with the stated migration strategy and preserves layout. Nice incremental change.Also applies to: 97-106, 140-146, 180-186, 220-226
11-19: Resource additions verified; duplicate ExecuteAsTemplate outputs found — confirm scoping or rename
- Assets present: themes/beaver/assets/css/fl-homepage-layout.css, bem-home-page-minimal.css, cta-backgrounds.css, dynamic-icons.css.
- ExecuteAsTemplate collisions detected: css/dynamic.css is produced by themes/beaver/layouts/home.html (ln 17) and themes/beaver/layouts/404.html (ln 3); css/dynamic586.css is produced by many layouts (e.g. themes/beaver/layouts/single.html, list.html, blog/list.html and multiple themes/beaver/layouts/page/* templates).
- Action: If the generated CSS differs per page, make the ExecuteAsTemplate targets page-scoped or fingerprinted (e.g., include a page identifier or fingerprint in the filename); if the output is identical across pages, document that and leave as-is.
themes/beaver/layouts/page/contact-us.html (1)
3-12: Dynamic CSS swap and bundle order — verified
- Confirmed assets exist: themes/beaver/assets/css/dynamic-icons.css and themes/beaver/assets/css/fl-contact-layout.css.
- resources.ExecuteAsTemplate "css/dynamic586.css" is intentionally reused across multiple layouts (themes/beaver/layouts/*); docs/css-file-mapping.md documents dynamic-icons.css → dynamic586.css and the repo's build/test checklist shows dynamic templates processed correctly. No change required.
| - bundle:/opt/bundle | ||
| - hugo_cache_dtest:/tmp/hugo_cache_dtest | ||
| environment: | ||
| HUGO_PUBLIC_DIR: "_dest/public-dtest" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
🧩 Analysis chain
HUGO_PUBLIC_DIR added — align with helpers and CI
LGTM. Please confirm test/support/hugo_helpers.rb and bin/dtest prefer HUGO_PUBLIC_DIR over HUGO_DEFAULT_PATH to avoid divergence.
🏁 Script executed:
#!/bin/bash
# Verify env usage alignment
rg -n "HUGO_PUBLIC_DIR|HUGO_DEFAULT_PATH" -C2 test/support bin | sed -n '1,120p'Length of output: 352
Switch tests/scripts to HUGO_PUBLIC_DIR
LGTM. test/support/hugo_helpers.rb still falls back to HUGO_DEFAULT_PATH — replace with ENV.fetch("HUGO_PUBLIC_DIR", "_dest/public-test") (test/support/hugo_helpers.rb:7). Verify bin/dtest also uses HUGO_PUBLIC_DIR.
🤖 Prompt for AI Agents
In test/support/hugo_helpers.rb around line 7, replace the current fallback to
HUGO_DEFAULT_PATH with ENV.fetch("HUGO_PUBLIC_DIR", "_dest/public-test") so
tests use the same environment variable as compose; update any references in
that file to use this fetched value instead of HUGO_DEFAULT_PATH. Also inspect
bin/dtest and ensure it reads and exports/uses ENV["HUGO_PUBLIC_DIR"] (with the
same default "_dest/public-test" if needed) so the script and tests are
consistent with .dev/compose.yml.
| --- | ||
|
|
There was a problem hiding this comment.
❓ Verification inconclusive
Section separators look good; keep markdownlint happy.
You’ve added HRs with surrounding blank lines—OK. Run markdownlint to confirm no style regressions.
Also applies to: 113-114, 226-227, 276-277, 332-333, 389-390
🏁 Script executed:
#!/bin/bash
npx -y markdownlint-cli "content/blog/rails-7-upgrade-guide-step-by-step-migration.md"Length of output: 12508
Fix markdownlint violations in content/blog/rails-7-upgrade-guide-step-by-step-migration.md
Ran: npx -y markdownlint-cli "content/blog/rails-7-upgrade-guide-step-by-step-migration.md" — linter reports multiple violations. Fix headings (MD022), fenced-code spacing (MD031), emphasis-used-as-heading (MD036), lists spacing (MD032), line-lengths (MD013), extra blank lines (MD012), and add single trailing newline (MD047). Examples: MD022 @14,17; MD013 @20,22,26; MD036 @53,57,68; MD031 @58,73,89; MD032 @29,34,39,176; MD012 @427; MD047 @444. Re-run markdownlint until clean.
🤖 Prompt for AI Agents
In content/blog/rails-7-upgrade-guide-step-by-step-migration.md around lines
45-46 and throughout the file, fix multiple markdownlint violations: ensure
headings use proper leading/trailing hashes and spacing (MD022), wrap long lines
to respect line-length (MD013), avoid using emphasis as headings (MD036) by
converting to proper heading syntax, add a single space inside fenced code block
delimiters and ensure correct fencing (MD031), normalize list indentation and
blank lines between list items (MD032), remove extra consecutive blank lines
(MD012), and ensure the file ends with exactly one trailing newline (MD047);
apply these fixes at the specific reported lines (e.g., MD022 @14,17; MD013
@20,22,26; MD036 @53,57,68; MD031 @58,73,89; MD032 @29,34,39,176; MD012 @427;
MD047 @444), then re-run npx -y markdownlint-cli until no violations remain.
| - **New CSS File**: `themes/beaver/assets/css/bem-home-page.css` (completed) | ||
| - **Visual Parity**: 100% identical appearance maintained | ||
| - **Performance**: Optimized CSS with modern techniques |
There was a problem hiding this comment.
File name mismatch: bem-home-page.css vs bem-home-page-minimal.css
Docs claim “bem-home-page.css (completed)” but repo ships themes/beaver/assets/css/bem-home-page-minimal.css. Align naming or add both if intentional.
Apply:
- **New CSS File**: `themes/beaver/assets/css/bem-home-page.css` (completed)
+ **New CSS File**: `themes/beaver/assets/css/bem-home-page-minimal.css` (completed)And update the File Inventory section accordingly.
📝 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.
| - **New CSS File**: `themes/beaver/assets/css/bem-home-page.css` (completed) | |
| - **Visual Parity**: 100% identical appearance maintained | |
| - **Performance**: Optimized CSS with modern techniques | |
| - **New CSS File**: `themes/beaver/assets/css/bem-home-page-minimal.css` (completed) | |
| - **Visual Parity**: 100% identical appearance maintained | |
| - **Performance**: Optimized CSS with modern techniques |
🤖 Prompt for AI Agents
In docs/bem-migration-implementation-plan.md around lines 17 to 19, the
documentation references themes/beaver/assets/css/bem-home-page.css but the
repository contains themes/beaver/assets/css/bem-home-page-minimal.css; update
the docs to reference the actual filename (bem-home-page-minimal.css) or add the
missing bem-home-page.css to the repo if both are intended, and then update the
File Inventory section to reflect the chosen change (either replace the entry
with bem-home-page-minimal.css and note why “-minimal” is used, or list both
files and their purposes).
|
|
||
| **Grid System:** | ||
| - `.fl-row` → `.c-grid` | ||
| - `.fl-col-group` → `.c-grid` with appropriate column modifier | ||
| - `.fl-col` → Direct children of `.c-grid` (no wrapper needed) | ||
|
|
There was a problem hiding this comment.
Grid migration guidance conflicts with BEM layer naming elsewhere
This doc maps fl-row → .c-grid, while the migration plan uses l-* for layout (e.g., l-section/l-grid). Pick one convention and update both docs to avoid confusion.
Suggested: keep .c-grid if that’s what components.css implements, and remove l-* references from other docs or add a rationale for dual “layout vs component” layers.
🤖 Prompt for AI Agents
In docs/component-library-documentation.md around lines 121 to 126, the grid
migration guidance conflicts with other docs that use l-* layer names (e.g.,
l-section/l-grid); pick and standardize one convention across docs (preferably
keep .c-grid if components.css implements it) or explicitly document a two-layer
convention (components vs layout) with a short rationale; update all references
in this file and any other docs to either replace l-* with .c-* usages or add a
clear note explaining when to use l-* vs .c- and adjust examples accordingly so
the migration plan and component docs are consistent.
…or 404 page - Create bem-404-conversion.css with semantic BEM class mappings - Add dual-class approach: maintain fl-node classes while introducing BEM - Map semantic BEM classes: error-page, error-page__hero, error-page__main-section, etc. - Preserve backward compatibility during transition period - All tests pass, visual consistency maintained - Conservative micro-refactoring: ≤3 lines per step with immediate test validation Phase 1 complete: BEM classes added alongside legacy fl-node classes Phase 2 planned: Remove fl-node classes after full validation
pftg
force-pushed
the
refactor/non-semantic-classes-cleanup
branch
from
e19999c to
9dd30a1
Compare
#247) Implement conservative CSS refactoring with dual-class BEM approach for 404 page - Create bem-404-conversion.css with semantic BEM class mappings - Add dual-class approach: maintain fl-node classes while introducing BEM - Map semantic BEM classes: error-page, error-page__hero, error-page__main-section, etc. - Preserve backward compatibility during transition period - All tests pass, visual consistency maintained - Conservative micro-refactoring: ≤3 lines per step with immediate test validation Phase 1 complete: BEM classes added alongside legacy fl-node classes Phase 2 planned: Remove fl-node classes after full validation
…or 404 page
Phase 1 complete: BEM classes added alongside legacy fl-node classes
Phase 2 planned: Remove fl-node classes after full validation
Summary by CodeRabbit
New Features
Style
Documentation
Chores