Modular Sidebar Usage Guide

Overview

The blog sidebar has been refactored to be fully modular and configurable. This allows for:

• Easy reuse of sidebar components across different pages
• Central configuration of sidebar section content
• Per-page control of which sidebar sections appear and in what order
• Custom sidebar sections without modifying the layout template
• HubSpot integration for form submissions

How It Works

The system consists of three main components:

1. _data/sidebar-sections.yml: Central configuration for all sidebar sections
2. _includes/sidebar-section.html: Reusable template for individual sidebar sections
3. _includes/blog-sidebar.html: Wrapper that includes and renders sidebar sections

Adding a New Sidebar Section

1. Add a new entry to _data/sidebar-sections.yml:

my_new_section:
  title: "My New Section"
  description: "Description of the new section."
  # For traditional form:
  form_action: "/some-action" # Optional: include only if the section has a form
  form_method: "POST" # Optional
  button_text: "Submit" # Optional
  input_id: "email-new" # Optional
  consent_id: "consent-new" # Optional
  input_placeholder: "Enter your email" # Optional
  consent_text: "I agree to terms." # Optional
  # For Hubspot form:
  hubspot_form_id: "YOUR_FORM_ID" # Optional: use for Hubspot integration
  hubspot_portal_id: "YOUR_PORTAL_ID" # Optional: use for Hubspot integration
  # For content-only section:
  additional_content: "<p>Any additional HTML content</p>" # Optional

1. Use it in your page front matter:

---
layout: blog-style
title: My Page
sidebar_sections: newsletter,my_new_section
---

Customizing Sidebar Sections Per Page

In any page that uses the blog-style layout, you can control which sidebar sections appear and their order by adding a sidebar_sections parameter to the page’s front matter:

---
layout: blog-style
title: My Page
# Show only the newsletter section
sidebar_sections: newsletter
---

---
layout: blog-style
title: Another Page
# Show both the newsletter and FTX whitepaper sections in reverse order
sidebar_sections: ftx_whitepaper,newsletter
---

If no sidebar_sections parameter is provided, the default sections will be displayed (newsletter and FTX whitepaper).

HubSpot Integration

To use HubSpot forms in sidebar sections:

1. Make sure the HubSpot forms script is included in _includes/head.html (already added)
2. Configure your sidebar section in _data/sidebar-sections.yml:

my_hubspot_section:
  title: "Subscribe via HubSpot"
  description: "Sign up for updates via our HubSpot form"
  hubspot_form_id: "YOUR_HUBSPOT_FORM_ID"  # Get this from your HubSpot form
  hubspot_portal_id: "YOUR_HUBSPOT_PORTAL_ID"  # Get this from your HubSpot account

1. The form styling will use HubSpot’s default styles. You can customize the form styling in your HubSpot account.

The sidebar system detects whether to use a HubSpot form or traditional form based on whether hubspot_form_id and hubspot_portal_id are provided.

Creating Sidebar Sections Without Forms

Not all sidebar sections need forms. You can create content-only sections:

resources:
  title: "Helpful Resources"
  description: "Check out these resources for more information:"
  additional_content: |
    <ul>
      <li><a href="/guide">Entity Management Guide</a></li>
      <li><a href="/checklist">Compliance Checklist</a></li>
    </ul>

The additional_content field allows you to include any custom HTML content in the sidebar section.

Technical Details

• The main blog-style layout uses `

`

• The sidebar-section.html template checks for HubSpot form IDs first, then falls back to traditional forms
• All parameters are passed through from the YAML config to the template
• HubSpot forms are rendered using the HubSpot JavaScript API