Brandmine Jekyll Website Context

Generated: 2025-04-02 09:41

Site Configuration

Configuration Details

title: Brandmine
email: randal@brandmine.io
description: Amplifying leading consumer brands of the BRICS+
# Change this line
baseurl: "" # Empty for local development

...
collections:
  brands:
    output: true
    permalink: /:collection/:path/
...
defaults:
  # Global defaults
  - scope:
      path: ""
    values:
      layout: default
...
# No plugins defined

Site Structure

Directories

- _layouts/ (14 files)
  - attributes.html
  - brand.html
  - brands.html
  - category.html
  - content-type.html
  - default.html
  - discover.html
  - insight.html
  - insights.html
  - markets.html
  - sectors.html
  - signals.html
  - styleguide.html
  - tag.html
- _includes/ (19 files)
  - brand-card.html
  - brand-image.html
  - content-type-indicator.html
  - featured-content.html
  - footer.html
  - google-analytics.html
  - header.html
  - insight-card.html
  - insights-feed.html
  - language-selector.html
  - pagination.html
  - related-brands-list.html
  - responsive-image.html
  - search-filter.html
  - site-image.html
  - styleguide
  - tag-cloud.html
  - tag-list.html
  - tags
- _data/ (7 files)
  - _data/.DS_Store
  - _data/sectors.yml
  - _data/tag_translations.yml
  - _data/translations/en.yml
  - _data/translations/ru.yml
  - _data/translations/zh.yml
  - _data/brands-data.json
- assets/ (110 files total)
  - assets/css/ (35 CSS files)
    - assets/css/debug.css
    - assets/css/layout/panels.css
    - assets/css/main.css
    - assets/css/components/insights-feed.css
    - assets/css/components/search.css
    - assets/css/components/team.css
    - assets/css/components/features.css
    - assets/css/components/insights-grid.css
    - assets/css/components/featured-brand.css
    - assets/css/components/solutions.css
    - assets/css/components/text.css
    - assets/css/components/forms.css
    - assets/css/components/navig
...(truncated)...

## Recent Development Activity
### Recent Commits
- **2025-03-28**: Refactor panel classes for improved styling and update search placeholder for clarity (Randal Eastman)
- **2025-03-28**: Add new JSON history file and update references in discover pages for multilingual support (Randal Eastman)
- **2025-03-28**: Fix CSS navigation issues and improve footer spacing (Randal Eastman)
- **2025-03-28**: Add debug CSS for responsive breakpoint indicators and layout outlines (Randal Eastman)
- **2025-03-28**: revised all css after review by chatgpt for logic and use of semantic variables. (Randal Eastman)
- **2025-03-27**: Add excerpt field to various templates and samples for improved content visibility (Randal Eastman)
- **2025-03-27**: Refactor related brands references to unify terminology across templates and samples (Randal Eastman)
- **2025-03-27**: Update styleguide pages so all previews display correctly. (Randal Eastman)
- **2025-03-27**: Refactor image handling documentation for improved clarity and consistency (Randal Eastman)
- **2025-03-27**: Update context file generation date and adjust multilingual styleguide examples for consistency (Randal Eastman)

### Recently Modified Files
- _archive/breakpoints.css
- _archive/colors.css
- _archive/en/categories/brand-spotlight.md
- _archive/en/categories/cultural-signature.md
- _archive/en/categories/founders-journey.md
- _archive/en/categories/market-milestone.md
- _archive/en/index.html
- _archive/en/index.html.backup
- _archive/en/insights.md
- _archive/en/markets.md
- _archive/en/sectors.md
- _archive/en/signals.md
- _archive/ru/insights/categories/brand-spotlight.md
- _archive/ru/insights/categories/cultural-signature.md
- _archive/ru/insights/categories/founders-journey.md


### Project Log Entries (Last 2)


## Latest Development Journal

# Development Journal: Discovery Panel Tabs Implementation
**Date:** April 1, 2025

## 1. Problem Statement
The discovery panel tabs on the Brandmine homepage were not functioning properly. Users were unable to see a visual change when clicking on the tabs (Markets, Business Sectors, Brand Attributes, Growth Signals). The JavaScript event handlers were being triggered correctly (as shown in console logs), but the visual state change wasn't obvious to users.

## 2. Approach
After investigating the issue through console logs and debugging, we determined that:
- The existing tab implementation had conflicting CSS between different files
- The JavaScript was working correctly but the visual changes weren't apparent
- There were nested DOM content loaded events causing potential issues

Rather than trying to fix the existing implementation, we decided to create a completely fresh implementation with:
- Clean HTML structure with clear namespacing
- Dedicated CSS with no conflicts
- Minimal JavaScript with straightforward logic
- Complete isolation from other components

## 3. Implementation Details

### HTML Structure
```html
<!-- Discovery2 Panel - Clean Implementation -->
<div class="panel panel--discovery2">
  <div class="panel__content">
    <h2 class="panel__heading-secondary">Explore by Discovery Path</h2>
    
    <!-- Tab Navigation -->
    <div class="discovery2-tabs">
      <div class="discovery2-nav">
        <button class="discovery2-tab" data-tab="markets">Markets</button>
        <button class="discovery2-tab active" data-tab="sectors">Business Sectors</button>
        <button class="discovery2-tab" data-tab="attributes">Brand Attributes</button>
        <button class="discovery2-tab" data-tab="signals">Growth Signals</button>
      </div>
      
      <!-- Tab Content -->
      <div class="discovery2-content">
        <!-- Individual tab panes with IDs matching data-tab attributes -->
        <div class="discovery2-pane" id="markets-pane">
          <p class="discovery2-intro">Explore brands by their country of origin within the BRICS+ markets.</p>
          <div class="discovery2-tags">
            <!-- Market tags -->
          </div>
        </div>
        
        <!-- Additional tab panes for sectors, attributes, and signals -->
      </div>
    </div>
  </div>
</div>

CSS Highlights

/* Panel styling */
.panel--discovery2 {
  background-color: var(--secondary-50);
  border-top: 4px solid var(--primary-400);
  border-bottom: 4px solid var(--primary-400);
}

/* Tab container - 80% width as requested */
.discovery2-tabs {
  max-width: 80%;
  margin: 0 auto;
  background-color: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Tab navigation */
.discovery2-nav {
  display: flex;
  width: 100%;
  border-bottom: 2px solid var(--primary-200);
}

/* Tab panes */
.discovery2-pane {
  display: none;
}

.discovery2-pane.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

JavaScript

// Discovery2 Panel Tab Functionality
document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.discovery2-tab');
  const panes = document.querySelectorAll('.discovery2-pane');
  
  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      // Get the tab's data-tab attribute
      const tabId = this.getAttribute('data-tab');
      const targetPane = document.getElementById(tabId + '-pane');
      
      // Deactivate all tabs and panes
      tabs.forEach(t => t.classList.remove('active'));
      panes.forEach(p => p.classList.remove('active'));
      
      // Activate the clicked tab and its corresponding pane
      this.classList.add('active');
      if (targetPane) {
        targetPane.classList.add('active');
      }
    });
  });
});

4. Decisions Made

Clean Slate Approach: Rather than trying to debug the existing implementation, we chose to create a completely fresh component with new class names to avoid any conflicts.
Clear Visual Indicators: Added stronger visual indicators for active tabs through background color, font weight, and a colored border.
Namespace Isolation: Used discovery2- prefix for all classes to avoid conflicts with existing CSS.
Simplified JavaScript: Removed unnecessary animations and complexities, focusing on the core tab switching functionality.
BEM Compatibility: Maintained compatibility with the site’s BEM structure by using appropriate panel classes.

5. Resources

HTML: Complete Discovery2 panel HTML implementation
CSS: Dedicated styling for the Discovery2 panel
JavaScript: Simple tab switching logic
Integration Guide: Step-by-step instructions for adding the component to the site

6. Insights & Learning

Isolation is powerful: Creating a completely isolated component avoided the complexity of debugging CSS conflicts.
Consistent naming matters: Using clear, consistent naming conventions makes code more maintainable.
Visual feedback is crucial: Even when JavaScript is working correctly, users need clear visual feedback to understand that actions have had an effect.
Simplicity wins: A simple, focused implementation is often more robust than a complex one.
Console debugging helps: The console logs revealed that the JavaScript was actually working, which helped narrow down the issue to visual styling.

7. Next Actions

Apply the same clean implementation approach to other problematic interactive components.
Consider adding keyboard navigation to the discovery tabs for accessibility.
Add a hover effect to the tags to improve interactive feedback.
Document the new component in the site’s style guide for future reference.
Consider further visual enhancements to make the selected tab’s content area more distinctive.

Content Summary

Languages: 3 (en ru zh )
- en: 26 pages
- ru: 10 pages
- zh: 10 pages
Brand profiles: 4
Translation files: 3
- Translation coverage:
  - en (primary): 141 keys
  - ru: 141 keys (100% coverage)
  - zh: 141 keys (100% coverage)

Environment & Dependencies

Jekyll version: 3.10.0
Ruby version: 3.4.2
Key dependencies:
- faraday-retry (~> 2.2)
- github-pages
- http_parser.rb (~> 0.6.0)
- jekyll-feed (~> 0.12)
- minima (~> 2.5)
- tzinfo (>= 1, < 3)
- tzinfo-data
- wdm (~> 0.1)
- BUNDLED WITH
- 2.6.6

Working with Claude

When helping with this Jekyll website, please:

Consider the multilingual structure (EN, RU, ZH) in all solutions
Provide complete code when suggesting changes
Maintain the existing file structure and naming conventions
Explain the reasoning behind technical decisions
Consider mobile responsiveness in layout changes
Respect the established color palette and typography system
Consider the tag system architecture when discussing content organization

When writing code, use:

Liquid templating for Jekyll
Modern CSS practices
Vanilla JavaScript where possible