HubSpot Development Helper

Provides code partials to assist when building your Hubspot CMS files.

Designed for use with WebPack, Boostrap 5.1 and HubSpot FieldsJs by iGoMoon

Included

• Build Tools
• Dynamic Loading JS "Fragments"
• Partial Fields Library
• HubL Macros that correspond to the Field Partials

Table of Contents

• Dynamic Loading JS "Fragments"
  • How to use JS fragments
• Partial Fields Library
  • How to use partial fields
• HubL Macros
  • Configure Webpack Config
• Contributing
• License

Dynamic Loading JS "Fragments"

How to use JS fragments

Included

• Video (using the VideoJS library)
• Carousel (using the SwiperJS library)
• Scroll Links (create scrollable links with #hash links)
• Number Animation

FieldJS Tools

• Pulls in default exports from

Partial Fields Library

• setGlobalFieldsDirPath
• setEnablePackageFields
• loadFromFieldsDir
• loadFromPackageFieldsDir

Config

• setConfigSrc
• setEnablePackageConfig
• getConfig
• config

Accessing the Library

• Set your custom library setFieldLibrarySrc
• Enable the included Library setEnablePackageLibrary
• Get the library library
• loadFromLibrary
• LibraryField

Other Helpers

• getOrCreateId

Partial Fields

https://github.com/iGoMoon/hubspot-tools/tree/main/packages/hubspot-fields-js#advanced-usage

How to use partial fields

groups/Button.js groups/Buttons.js groups/Form.js groups/Header.js groups/Icon.js groups/Image.js groups/Layout.js groups/Logos.js groups/Meeting.js groups/Padding.js groups/Settings.js groups/Style.js groups/SwiperJsSettings.js groups/Testimonial.js groups/Testimonials.js groups/Theme.js groups/Video.js

Alignment.js BasicText.js Colors.js Columns.js ColumnWidth.js ContentWidth.js CssClass.js CssId.js FlexDirection.js Heading.js HeadingInherit.js HeadingType.js JustifyContent.js MediaLayout.js Padding.js SubHeading.js

HubL Macros

Configure Webpack Config

patterns: [
	{ from: '@hs-dev-helper/hubl', to: 'hubl' },
	...

/hubl/macros/components

patterns: [
	{ from: '@hs-dev-helper/hubl/macros/components', to: 'my-macros' },
	...

/my-macros/button.html

Available Macros

• button.html
• carousel.html
• form.html
• header.html
• image-icon.html
• link.html
• logos.html
• meeting.html
• testimonial.html
• text.html
• video.html

License

Apache 2.0