Skip to content

Adds some posts and cleanups #246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pftg merged 14 commits into from
Sep 17, 2025
Merged

Adds some posts and cleanups #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0803394
docs
pftg Sep 16, 2025
e4cb911
add thoughtsbot styles
pftg Sep 16, 2025
dc53ca6
content
pftg Sep 16, 2025
98e7e38
content
pftg Sep 16, 2025
da4c96d
thoughtbot styles
pftg Sep 17, 2025
018ca70
fix
pftg Sep 17, 2025
073eb90
fix tests
pftg Sep 17, 2025
2f63ce4
cleanup
pftg Sep 17, 2025
e38a7ef
cleanup
pftg Sep 17, 2025
ac9fcc5
cleanup some ref
pftg Sep 17, 2025
6a9b361
cleanup tests
pftg Sep 17, 2025
d1cfa82
adds github tests
pftg Sep 17, 2025
008a169
refactor test files to use base_page_test_case
pftg Sep 17, 2025
111af9b
disable tests
pftg Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .github/workflows/test-unit.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
name: unit-tests

on:
workflow_dispatch:

jobs:
unit:
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
- name: Checkout
uses: actions/checkout@v5

- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: '3.4'
bundler-cache: true

- name: Run unit tests
env:
PRECOMPILED_ASSETS: '1'
TEST_SERVER_PORT: '1314'
run: bundle exec rake test TEST='test/unit/**/*_test.rb'
Comment on lines +20 to +24
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

🧩 Analysis chain

Ensure precompiled site exists at the path tests read.
CI sets PRECOMPILED_ASSETS=1, so Hugo won’t build in tests. Verify HTML is present under the expected public dir.

🏁 Script executed:

#!/bin/bash
set -euo pipefail
ROOT="${HUGO_PUBLIC_DIR:-${HUGO_DEFAULT_PATH:-_dest/public-test}}"
PORT="${TEST_SERVER_PORT:-1314}"
echo "Checking ${ROOT} and ${ROOT}-${PORT}"
if [ -d "${ROOT}-${PORT}" ]; then BASE="${ROOT}-${PORT}"; else BASE="${ROOT}"; fi
fd -t f index.html "$BASE" || { echo "Missing precompiled HTML under $BASE"; exit 1; }

Length of output: 207

Precompiled Hugo output missing — add prebuilt HTML or build site in CI

CI sets PRECOMPILED_ASSETS=1 so tests expect static HTML; verification script returned "Missing precompiled HTML under _dest/public-test" (fd: Search path '_dest/public-test' is not a directory).
File: .github/workflows/test-unit.yml (lines 20–24). Action: add the precompiled site to _dest/public-test (or set HUGO_PUBLIC_DIR/HUGO_DEFAULT_PATH to an existing prebuilt public dir), or change the workflow to build the site / unset/override PRECOMPILED_ASSETS so tests can run.

🤖 Prompt for AI Agents 
In .github/workflows/test-unit.yml around lines 20-24 the workflow sets
PRECOMPILED_ASSETS=1 so tests expect prebuilt static HTML under
_dest/public-test but the CI currently fails with "Missing precompiled HTML
under _dest/public-test"; fix by either (A) adding a step before tests that
builds the Hugo site into _dest/public-test (or sets
HUGO_PUBLIC_DIR/HUGO_DEFAULT_PATH to point to an existing prebuilt public dir)
or (B) remove or override PRECOMPILED_ASSETS in this job so tests build or use
dynamic assets; implement one of these options and ensure the created directory
_dest/public-test contains the expected public HTML before the rake test runs.

1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,4 @@ _reports/

_dest/
_temp/
_tmp/
183 changes: 183 additions & 0 deletions BEM_IMPLEMENTATION_GUIDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
# BEM Implementation Guide - JetThoughts Site

## ✅ COMPLETED WORK

### Phase 1: CSS File Organization (100% Complete)
- ✅ All numeric CSS files renamed to semantic names
- ✅ 737-layout.css → beaver-grid-system.css
- ✅ Updated template references in services.html
- ✅ Removed dependencies on numeric file names

### Phase 2: BEM Architecture Foundation (100% Complete)
- ✅ Created `bem-layout-system.css` with comprehensive BEM patterns
- ✅ Mapped FL Builder classes to BEM equivalents:
- `fl-row` → `l-row` (layout)
- `fl-col` → `l-column` (layout)
- `fl-module` → `c-module` (component)
- `fl-builder` → `c-page-builder` (component)

### Phase 3: Proof of Concept Implementation (100% Complete)
- ✅ Updated homepage hero partial with dual class system
- ✅ Added BEM classes alongside existing FL classes
- ✅ Integrated BEM CSS into homepage resource bundle
- ✅ Verified Hugo builds successfully with new CSS

## 🎯 BEM ARCHITECTURE OVERVIEW

### Layout Classes (l-*)
```css
.l-row /* Base row container */
.l-row--full-width /* Full width row */
.l-row--fixed-width /* Constrained width row */
.l-row--center /* Centered content row */
.l-row--bg-photo /* Background photo row */
.l-row__content-wrap /* Row content wrapper */
.l-row__content /* Row content container */

.l-column-group /* Column container */
.l-column-group--equal-height /* Equal height columns */
.l-column /* Individual column */
.l-column__content /* Column content wrapper */
```

### Component Classes (c-*)
```css
.c-page-builder /* Page builder container */
.c-page-builder__content /* Page builder content */

.c-module /* Base module */
.c-module--heading /* Heading module */
.c-module--rich-text /* Rich text module */
.c-module--button /* Button module */
.c-module__content /* Module content wrapper */
```

### Utility Classes (u-*)
```css
.u-clearfix /* Clearfix utility */
.u-clear /* Clear float utility */
.u-sr-only /* Screen reader only */
.u-hidden /* Hide element */
.u-visible /* Show element */
.u-visible--large /* Show on large screens */
.u-visible--medium /* Show on medium screens */
.u-visible--mobile /* Show on mobile screens */
```

## 🚀 IMPLEMENTATION EXAMPLE

### Before (FL Builder):
```html
<div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-dn129i74qg6m">
<div class="fl-row-content-wrap">
<div class="fl-row-content fl-row-fixed-width">
<div class="fl-col-group fl-col-group-equal-height">
<div class="fl-col">
<div class="fl-col-content">
<div class="fl-module fl-module-heading">
<div class="fl-module-content">
<h1>Build faster. Scale smarter.</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
```

### After (Dual System):
```html
<div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-dn129i74qg6m l-row l-row--full-width l-row--bg-photo l-row--center">
<div class="fl-row-content-wrap l-row__content-wrap">
<div class="fl-row-content fl-row-fixed-width l-row__content l-row__content--fixed-width">
<div class="fl-col-group fl-col-group-equal-height l-column-group l-column-group--equal-height">
<div class="fl-col l-column">
<div class="fl-col-content l-column__content">
<div class="fl-module fl-module-heading c-module c-module--heading">
<div class="fl-module-content c-module__content">
<h1>Build faster. Scale smarter.</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
```

## 📋 NEXT STEPS FOR FULL IMPLEMENTATION

### Priority 1: Expand BEM to Core Templates
1. **About Page**: Apply BEM classes to main layout elements
2. **Services Page**: Update with BEM dual-class system
3. **Contact Page**: Implement BEM structure
4. **Blog Templates**: Apply BEM to list and single templates

### Priority 2: Component Library Development
1. **Navigation Component**: Create `c-navigation` BEM patterns
2. **Card Components**: Develop `c-card` variations
3. **Form Components**: Build `c-form` module system
4. **Button Components**: Expand `c-button` variations

### Priority 3: Utility System Expansion
1. **Spacing Utilities**: Add margin/padding utilities
2. **Typography Utilities**: Font size, weight, color utilities
3. **Color Utilities**: Background and text color classes
4. **Layout Utilities**: Flexbox and grid helper classes

## 🔧 IMPLEMENTATION STRATEGY

### Safe Migration Approach
1. **Dual Class System**: Keep FL classes while adding BEM
2. **Progressive Enhancement**: Add BEM to new features first
3. **Template-by-Template**: Migrate one template at a time
4. **Testing Each Step**: Validate layout integrity after each change

### Automation Opportunities
1. **Search & Replace Scripts**: Bulk update common patterns
2. **Template Validation**: Automated checking for BEM compliance
3. **CSS Analysis**: Identify unused FL classes for removal
4. **Performance Monitoring**: Track CSS bundle size improvements

## 📊 SUCCESS METRICS

### Code Quality Improvements
- **Maintainability**: BEM classes are self-documenting
- **Modularity**: Components can be reused across templates
- **Consistency**: Standardized naming conventions
- **Performance**: Optimized CSS specificity

### Technical Benefits
- **Faster Development**: Predictable class patterns
- **Easier Debugging**: Clear component boundaries
- **Better Collaboration**: Shared vocabulary for designers/developers
- **Future-Proof Architecture**: Scalable naming system

## 🚨 IMPORTANT NOTES

### FL Node IDs (630 unique patterns)
The existing FL node IDs (fl-node-[hash]) are too numerous to migrate systematically.
**Recommendation**: Leave these as-is and focus on structural improvements only.

### Gradual Migration Timeline
- **Week 1-2**: Core templates (homepage, about, services)
- **Week 3-4**: Secondary templates (blog, contact, careers)
- **Week 5-6**: Component library development
- **Week 7-8**: Utility system expansion and optimization

### Testing Requirements
- Hugo build validation after each template update
- Visual regression testing on key pages
- Cross-browser compatibility verification
- Performance impact assessment

---

## 🎉 CURRENT STATUS

**PHASE COMPLETION STATUS**: ✅ CSS Architecture Foundation - 100% Complete

The BEM foundation is now in place and ready for expansion. The dual-class system allows for safe migration while maintaining existing functionality. The next developer can continue with template migration or component development using the established patterns.
Loading