# Code

Prerequisites:

{% content-ref url="../initial-setup/setup-hubl-local-server" %}
[setup-hubl-local-server](https://sprocket-rocket.gitbook.io/project/initial-setup/setup-hubl-local-server)
{% endcontent-ref %}

### 1. Start from LaunchPad Starter

LaunchPad Starter is your main project repo but all our modules are shared between projects, and that's why we use a submodule (sub repo) called `launchpad-modules`

### 2. Create a New Module Branch (e.g. sr-module-name-01) in launchpad-modules

### 3. Build the Module (html / css / js)

All modules are in `launchpad-starter/custom/page/sr-templates` \
Modules consist of a template and a JSON, both having the same name. To get started you can clone `SR Demo` or any existing module.

{% hint style="info" %}
If your module has any external dependencies (JS / CSS) please add them to `launchpad-starter/custom/page/sr-templates/sr-assets/pattern-library/[module-name]` and reference them in your JSON.
{% endhint %}

### 4. Create JSON

At this point we only need a basic JSON file so that we can deploy the module (next step). You can use this as a starting point for you JSON:

```javascript
{
	"custom_module": {
		"author": "YOUR_EMAIL@lean-labs.com",
		"name": "MODULE NAME",
		"css_assets": [],
		"editable_contexts": [],
		"external_js": [],
		"icon" : "https://www.lean-labs.com/hubfs/srco-assets/sr-logo-icon.svg",
		"purchased": true,
		"hostTemplateTypes": ["PAGE", "BLOG_POST", "BLOG_LISTING"],
		"js_assets": [],
		"other_assets": [],
		"fields": [{
				"default": true,
				"label": "Enabled",
				"name": "enabled",
				"type": "boolean"
			},
			{
				"type": "group",
				"name": "design_settings",
				"label": "Design Settings",
				"children": [
					
							{
								"default": null,
								"label": "ID",
								"name": "sr_module_id",
								"type": "text"
							},
							{
								"default": null,
								"label": "Class",
								"name": "class",
								"type": "text"
							},
							{
								"choices": [
									[
										"container", "Page"
									],
									[
										"container-fluid", "Full Width"
									]
								],
								"default": "container",
								"display": "select",
								"label": "Layout",
								"name": "layout",
								"type": "choice",
								"required": true
							},
							{
								"choices": [
									[
										"min", "Minimum"
									],
									[
										"narrow", "Narrow"
									],
									[
										"wide", "Wide"
									],
									[
										"max", "Maximum"
									]
								],
								"default": "max",
								"display": "select",
								"label": "Container Width",
								"name": "container_width",
								"type": "choice",
								"required": true
							},
							{
								"choices": [
									[
										"auto", "Use default values"
									],
									[
										"zero", "No Padding"
									],
									[
										"half", "Small padding"
									],
									[
										"full", "Large padding"
									],
									[
										"custom", "Custom padding"
									]
								],
								"id": "top_bottom_padding",
								"default": "full",
								"display": "select",
								"label": "Top Bottom Padding",
								"name": "top_bottom_padding",
								"type": "choice",
								"required": true
							},
							{
								"name": "custom_padding",
								"type": "text",
								"label": "Custom Padding",
								"help_text": "Top, Right, Bottom, Left",
								"visibility": {
									"controlling_field": "top_bottom_padding",
									"controlling_value_regex": "custom",
									"operator": "EQUAL",
									"access": null
								},
								"default": "1rem 0rem 1rem 0rem"
							},
							{
								"default": false,
								"label": "Border Top",
								"name": "border_top",
								"type": "boolean"
							},
							{
								"default": false,
								"label": "Border Bottom",
								"name": "border_bottom",
								"type": "boolean"
							},
							{
								"choices": [
									[
										"image", "Image"
									],
									[
										"color", "Color"
									],
									[
										"custom", "Custom"
									]
								],
								"id": "background_option",
								"default": "color",
								"display": "select",
								"label": "Background Option",
								"name": "background_option",
								"type": "choice",
								"required": true
							},
							{
								"default": {
									"src": "",
									"alt": ""
								},
								"label": "Background Image",
								"name": "background_image",
								"visibility": {
									"controlling_field": "background_option",
									"controlling_value_regex": "image",
									"operator": "EQUAL"
								},
								"type": "image"
							},
							{
								"default": {
									"color": "#343a40",
									"opacity": 30
								},
								"label": "Background Overlay Color",
								"name": "background_overlay_color",
								"visibility": {
									"controlling_field": "background_option",
									"controlling_value_regex": "image",
									"operator": "EQUAL"
								},
								"help_text": "Recommended Width: 2880x1920px",
								"type": "color"
							},
							{
								"choices": [
									[
										"primary", "Primary"
									],
									[
										"secondary", "Secondary"
									],
									[
										"tertiary", "Tertiary"
									],
									[
										"white", "White"
									],
									[
										"black", "Black"
									],
									[
										"dark", "Dark"
									],
									[
										"light", "Light"
									],
									[
										"success", "Success"
									],
									[
										"info", "Info"
									],
									[
										"warning", "Warning"
									],
									[
										"danger", "Danger"
									],
									[
										"none", "None"
									]
								],
								"default": "white",
								"display": "select",
								"label": "Background Color",
								"name": "background_color",
								"type": "choice",
								"visibility": {
									"controlling_field": "background_option",
									"controlling_value_regex": "color",
									"operator": "EQUAL"
								},
								"required": true
							},
							{
								"default": {
									"color": "#fff"
								},
								"label": "Background Custom",
								"name": "background_custom",
								"visibility": {
									"controlling_field": "background_option",
									"controlling_value_regex": "custom",
									"operator": "EQUAL"
								},
								"type": "color"
							}
			]},
			{
				"default": "",
				"label": "Heading",
				"name": "heading",
				"type": "text"
			},
			{
				"choices": [
					[
						"1", "H1"
					],
					[
						"2", "H2"
					],
					[
						"3", "H3"
					],
					[
						"4", "H4"
					],
					[
						"5", "H5"
					],
					[
						"6", "H6"
					]
				],
				"default": "2",
				"display": "select",
				"label": "Heading Size",
				"name": "heading_size",
				"visibility" : {
					"controlling_field" : "heading",
					"controlling_value_regex" : null,
					"operator" : null,
					"access" : null
				},
				"type": "choice",
				"required": true
			},
			{
				"name": "heading_display_size",
				"label": "Heading Display Size",
				"required": true,
				"locked": false,
				"display": "select",
				"visibility": {
					"controlling_field": "heading",
					"controlling_value_regex": null,
					"operator": null,
					"access": null
				},
				"choices": [
					[
						"auto",
						"Auto"
					],
					[
						"h1",
						"H1"
					],
					[
						"h2",
						"H2"
					],
					[
						"h3",
						"H3"
					],
					[
						"h4",
						"H4"
					],
					[
						"h5",
						"H5"
					],
					[
						"h6",
						"H6"
					],
					[
						"display-4",
						"L"
					],
					[
						"display-3",
						"XL"
					],
					[
						"display-2",
						"XXL"
					],
					[
						"display-1",
						"XXXL"
					]
				],
				"type": "choice",
				"default": "auto"
			},
			{
				"default": "",
				"label": "Description",
				"name": "description",
				"type": "richtext"
			},
			{
				"choices": [
					[
						"auto", "Auto"
					],
					[
						"left", "Left"
					],
					[
						"center", "Center"
					],
					[
						"right", "Right"
					]
				],
				"default": "auto",
				"display": "select",
				"label": "Text Align",
				"name": "text_align",
				"type": "choice",
				"required": true
			},
			{
				"choices": [
					[
						"auto", "Auto"
					],
					[
						"primary", "Primary"
					],
					[
						"secondary", "Secondary"
					],
					[
						"tertiary", "Tertiary"
					],
					[
						"white", "White"
					],
					[
						"black", "Black"
					],
					[
						"dark", "Dark"
					],
					[
						"light", "Light"
					],
					[
						"success", "Success"
					],
					[
						"info", "Info"
					],
					[
						"warning", "Warning"
					],
					[
						"danger", "Danger"
					]
				],
				"default": "auto",
				"display": "select",
				"label": "Text Color",
				"name": "text_color",
				"type": "choice",
				"required": true
			}
		],
		"source": "",
		"widgetLabel": "1.0.0"
	},
	"custom_module_template": "MODULE_NAME.html",
	"available_builder": true,
	"category": 0,
	"files": []
}
```

Replace `YOUR_EMAIL`, `MODULE_NAME`, `MODULE_VERSION`, and `MODULE_TEMPLATE`.

`MODULE_VERSION` should be 1.0.0 if this is a new module and `MODULE_TEMPLATE` should be your module template (e.g. sr-new-module-01.html).

For available fields see [here](https://sprocket-rocket.gitbook.io/project/new-module/custom-modules-json#available-fields).

### 4. Deploy Module to HubSpot

Use SR App to deploy your module to a test portal and add it to a new page. We will use the preview link for the Code Review (next step)

{% content-ref url="../initial-setup/deploy-using-sr-app-locally" %}
[deploy-using-sr-app-locally](https://sprocket-rocket.gitbook.io/project/initial-setup/deploy-using-sr-app-locally)
{% endcontent-ref %}

### 5. Browser + Mobile Responsiveness Test

We need to make sure that our module works well on the latest 2 versions of each browser including mobile and also test different screen sizes. 

{% hint style="info" %}
We have a [Browser Stack](http://browserstack.com/) account. Ping Miles or Stephen for details.
{% endhint %}

Once the module has been tested and is ready for implementation, set your Liquid Planner task in Review, assign Giles and provide him with the preview link.

Giles to test as well as insert multiple stylesheets & content variations to evaluate the module. Live Slack Review for Giles to present all areas for revision. Revise and repeat review with Giles until approved for HS Implementation.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sprocket-rocket.gitbook.io/project/new-module/code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.