The repository for the website hosted at https://www.codurance.com/.

The Codurance HubSpot account for managing content is here.

The IDE that we recommend to use with this repository for ease of use is VS Code, since we already have defined on the .vscode folder of the workspace some general settings for this IDE's editor along with the following recommended extensions:

• Hubspot VS Code Extension: Introduces new file languages to integrate the Hubspot CMS specific language (HubL) with HTML and CSS (HTML + HUBL and CSS + HUBL), enabling syntax highlighting and some format options.
• ESLint: Linter for the JavaScript files. Helps to debug errors on any JS code.
• Prettier: Code formatter. We only have it enabled for the JS files for now, since at this moment it doesn't work well with HubL syntax. The corresponding configuration file is called .prettierrc and can be found at the root of the project.

1. Have a developer sandbox account on HubSpot.
2. Have installed Node.js and npm

After cloning this repository, install dependencies and Hubspot CLI using npm install.

1. Run npx hs init to start the setup prompt.
2. On the prompt press enter, it opens the HubSpot Personal Access Key page in a new browser window.
   • If the "Design Manager" permissions checkbox is disabled on this page, this means the page has loaded for your primary Codurance account and not your developer account.
   • If this happens, this page will allow you to select which account you would like to use, and will redirect you to the correct Personal Access Key page.
3. Make sure that all permissions are selected, and click "Generate personal access key".
4. Click Show and then Copy to copy the personal access key. Paste it into your terminal and press enter.
5. Enter a name that references your sandbox account and press enter again. This name will be only visible by you - it can be useful to give it the same name as your developer account.
6. Check the file hubspot.config.yml has been created.
7. Upload Hubspot code to your developer sandbox with npx hs upload version_control version_control.

⚠️ If you see errors or warnings at this stage, don't worry.

• Any errors relating to the videos table will be fixed when importing the data in this table from the live version of the site. This step is not mandatory unless you're working with videos specifically. More information can be found in the Importing the Videos HubDB table section of this README.

For more information on developer setup and the HubSpot CLI, see the HubSpot documentation: getting started with local development and hubspot CLI reference.

HubSpot code is stored within the version_control folder.

In order to make use of some global styles and utilities that use HUBL, we need to structure our codebase differently than the HubSpot default.

You will notice some css files are prefixed with an underscore (_colors.css). These files are partial css files, which means they are not loaded themselved into pages or modules. They are instead imported into another file.

Files that are not prefixed with an underscore are files that will be loaded in by modules or pages.

|-📁 version_control
  |- 📁 Codurance_September2020
      |-🗂 css
          |-📁 base
          |-📁 modules
          |-📁 pages
          |-📁 partials
          |-📁 utils

This folder contains all of styles for the base, and global styling of our website. This is where we set up our variables and styles for colours, layout, typography, buttons etc.

Traditionally, modules within Hubspot are created as folders that contain their own js, css and html files, as well as some additional json files for metadata and data regarding input fields for the Hubspot UI. Since HUBL does not work within the css files of modules, we have to take a different approach to where we locate the styles.

To be able to use HUBL within our module's styles, we create a stylesheet with the same name as the module here. We then link to that file by using the following snippet at the top of our module's html file.

{{ require_css(get_asset_url("relative-path-to-css")) }}

Only the styles that are relevant to the internals of the module will be placed in the modules.css file. Any styling relating to the layout of the module on the page should be done through the page's stylesheet. This allows us to encapsulate styles to modules and pages.

When a page or template is created, a stylesheet for it is created with the same name as the page here. The styles relating to laying out modules within the page are kept here. Any styling relating to the internals of a module should be within the module's stylesheet.

The page or template can load these specfifc style's in the head of the html, again using

{{ require_css(get_asset_url("relative-path-to-css")) }}.

Any styles relating to a partial within the [...]/templates/partials folder will be kept here. Similar to modules, we create a stylesheet with the same name as the partial and then link to the stylesheet from the partial's html using

{{ require_css(get_asset_url("relative-path-to-css")) }}.

This folder contains partial utility files, which get combined into a single stylesheet called utils.css. This stylesheet can get imported into others to be able to access utility macros for development.

More information on Macros and how to use them.

All fonts are linked to through the head of the base.html file. This includes the Proxima Nova font, and the LineAwesome icon library. This will be enough moving forward to complete pages.

As we develop on the site we want to look at cutting out everything that is no longer being used.

This folder ws created post migration by Hubspot to hold certain images used within the website.

As we use more images in the site, we can upload them to a relevent folder within Hubspot and link to them within our code. This provides us with then benefit of not having to store them within our Theme and in our version control system. It also allows the image to be served through the CDN that Hubspot uses - automatically compressing and serving a better optimised image.

As images are not used anymore, we can look to tidy up this folder.

Here we keep all the js files that we create or use for the website, with teh exception of the javascript specific to modules. A module's js can be located within the module's module.js file.

If you need to write a script that will be present in multiple modules, pages or templates, then it is to be located here.

HubSpot - Information about modules.

This folder contains all the modules used within the site.

To create a module, you can use the following command hs create module <name> [dest] or create one using the UI within the Design Tools of Hubspot and pull the module down to your local codebase.

This folder holds html snippets which help keep content aligned to the design system, and make it easier for developers to work with.

This folder holds the template html files for web pages. See HubSpot documentation for more information.

|-📁 version_control
  |- 📁 Codurance_September2020
      |- 🗂 templates
          |-📁 layouts
          |-📁 partials
          |-📁 sections
          |-📁 system

Layouts are to be extended by templates. A layout will template out things like the meta information within <head> tags, and baisc page structure. The content of a page template will be inserted where the {% block body %} tag is featured.

The partials folder holds html files that isolate or capture re-usable sections within templates or layouts. An example of these would be a header or a footer.

Sections are reusable drag and drop sections meant to be inserted on drag and drop areas. They can be found when adding a new section to a drag and drop area under the menu "Theme sections", and the main difference between these and the "Saved sections" is that the former don't have a maximum limitation.

These files are templates for a specific purpose within the site, such as 404 pages. They are set through the settings within Hubspot. More information can be found here under System Pages.

When you want to test a change made to any hubspot code you have to upload it to your developer sandbox using Hubspot CLI:

hs upload version_control/Codurance_September2020 Codurance_September2020

or if would like to watch for changes and re-upload automatically:

hs watch --portal=<portal name> version_control/Codurance_September2020 Codurance_September2020 --initial-upload --remove

The script should run on your sandbox portal by default, but to be sure you can include the name you gave your sandbox portal after --portal=. You can find your sandbox portal name by looking at the hubspot.config.yml file.

You can see your changes if you connect to your sandbox : https://app.hubspot.com/portal-recommend by previewing or creating a page using the template you modified. The hubspot code is visible in Marketing -> Files and Templates -> Design Tool

⚠️ For now we cannot propagate a file deletion from local environment to Hubspot account. Any deleted file must also be deleted from the Design Tools. ⚠️

Code is automatically deployed in the staging account when a pull request to master is opened

link of staging account

Once pull request is accepted pushing to master triggers a git action that uploads changes to the hubspot production account and makes the changes live.

1. Go to the sandbox creation page
2. Sign in with your Google account
3. Click on 'Create a new developer account'

1. Ensure you're logged in on your primary Codurance account and not your developer sandbox account. This can be done by clicking the account menu in the top right corner on HubSpot and then hovering over the account name in the dropdown to reveal other accounts.
2. In the top navigation menu, click Marketing, then Files and Templates, and then HubDB.
3. Click on Videos to access the table settings.
4. In the top right corner, click the button marked Actions, then go to Export then CSV
5. Save this file somewhere.
6. Switch back to your developer account, and again navigate to Marketing -> Files and Templates -> HubDB.
7. Click Create Table and label it Videos, with the name videos and click Create.
8. Click Actions -> Import, and choose the CSV file you saved earlier, click Next.
9. On this screen, we need to create columns in the Videos table, and map them to columns from the CSV file.
10. We can ignore any rows with a CSV COLUMN name starting with hs_
11. We can also ignore the name column, as it's already mapped correctly.
12. To map a column:
    1. Click the dropdown at the end of the row.
    2. Click Add Column
    3. Set the Column label, Column name and Column type fields (see Column Mappings).
    4. If the Column type field is Select, add each of the options here as well.
    5. Once all columns are mapped correctly, click Import