diff --git a/examples/getting-started-project-theme/src/getting-started-theme/layouts/base.hubl.html b/examples/getting-started-project-theme/src/getting-started-theme/layouts/base.hubl.html
index 60515dc..51b7055 100644
--- a/examples/getting-started-project-theme/src/getting-started-theme/layouts/base.hubl.html
+++ b/examples/getting-started-project-theme/src/getting-started-theme/layouts/base.hubl.html
@@ -17,7 +17,7 @@
{% block header %}
- {% module 'main header' path="@projects/getting-started-project/getting-started-theme/components/modules/Header" %}
+ {% module 'main header' path="@projects/getting-started-project/getting-started-app/components/modules/Header" %}
{% endblock header %}
{# The main-content ID is used for the navigation skipper in the header.html file. More information on the navigation skipper can be found here: https://github.com/HubSpot/cms-theme-boilerplate/wiki/Accessibility #}
@@ -26,7 +26,7 @@
{% endblock body %}
{% block footer %}
- {% module 'footer' path="@projects/getting-started-project/getting-started-theme/components/modules/Footer" %}
+ {% module 'footer' path="@projects/getting-started-project/getting-started-app/components/modules/Footer" %}
{% endblock footer %}
diff --git a/examples/getting-started-project-theme/src/getting-started-theme/weather.hubl.html b/examples/getting-started-project-theme/src/getting-started-theme/weather.hubl.html
index 4eaf6b6..bc9150e 100644
--- a/examples/getting-started-project-theme/src/getting-started-theme/weather.hubl.html
+++ b/examples/getting-started-project-theme/src/getting-started-theme/weather.hubl.html
@@ -9,7 +9,7 @@
{% module
"weather"
- path="@projects/getting-started-project/getting-started-theme/components/modules/Weather",
+ path="@projects/getting-started-project/getting-started-app/components/modules/Weather",
%}
{% endblock body %}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/Globals.d.ts b/examples/getting-started/getting-started-project/getting-started-app/Globals.d.ts
new file mode 100644
index 0000000..60260a3
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/Globals.d.ts
@@ -0,0 +1 @@
+declare module '*.module.css';
diff --git a/examples/getting-started/getting-started-project/getting-started-app/assets/clear.svg b/examples/getting-started/getting-started-project/getting-started-app/assets/clear.svg
new file mode 100644
index 0000000..d192b7f
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/assets/clear.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/getting-started/getting-started-project/getting-started-app/assets/cloudy.svg b/examples/getting-started/getting-started-project/getting-started-app/assets/cloudy.svg
new file mode 100644
index 0000000..283e3cc
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/assets/cloudy.svg
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/getting-started/getting-started-project/getting-started-app/assets/fog.svg b/examples/getting-started/getting-started-project/getting-started-app/assets/fog.svg
new file mode 100644
index 0000000..8431c61
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/assets/fog.svg
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/getting-started/getting-started-project/getting-started-app/assets/rain.svg b/examples/getting-started/getting-started-project/getting-started-app/assets/rain.svg
new file mode 100644
index 0000000..d96ac2f
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/assets/rain.svg
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/getting-started/getting-started-project/getting-started-app/assets/snow.svg b/examples/getting-started/getting-started-project/getting-started-app/assets/snow.svg
new file mode 100644
index 0000000..baf2f5f
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/assets/snow.svg
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/getting-started/getting-started-project/getting-started-app/assets/sprocket.svg b/examples/getting-started/getting-started-project/getting-started-app/assets/sprocket.svg
new file mode 100644
index 0000000..cb945b6
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/assets/sprocket.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/getting-started/getting-started-project/getting-started-app/assets/thunderstorm.svg b/examples/getting-started/getting-started-project/getting-started-app/assets/thunderstorm.svg
new file mode 100644
index 0000000..0f09655
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/assets/thunderstorm.svg
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/getting-started/getting-started-project/getting-started-app/cms-assets.json b/examples/getting-started/getting-started-project/getting-started-app/cms-assets.json
new file mode 100644
index 0000000..f7037b1
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/cms-assets.json
@@ -0,0 +1,4 @@
+{
+ "label": "Getting started",
+ "outputPath": ""
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/components/WeatherCards.tsx b/examples/getting-started/getting-started-project/getting-started-app/components/WeatherCards.tsx
new file mode 100644
index 0000000..5f27ed8
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/components/WeatherCards.tsx
@@ -0,0 +1,63 @@
+import dayjs from 'dayjs';
+import weatherStyles from '../styles/weather.module.css';
+import { getWeatherIcon } from '../utils.ts';
+import { ForecastData } from '../constants.ts';
+
+interface WeatherProps {
+ city: string;
+ forecast: ForecastData[];
+}
+interface CurrentWeatherCardProps {
+ weatherData: WeatherProps;
+}
+
+export function CurrentWeatherCard({ weatherData }: CurrentWeatherCardProps) {
+ const { forecast, city } = weatherData;
+ const currentDay = forecast[0];
+
+ return (
+
+
+
+
+ {currentDay.apparent_temperature_max}°
+ F
+
+
+
{city}
+
+ );
+}
+
+interface UpcomingWeatherCardProps {
+ weatherData: WeatherProps;
+}
+
+export function UpcomingWeatherCard({ weatherData }: UpcomingWeatherCardProps) {
+ const { city, forecast } = weatherData;
+
+ return (
+ <>
+ {forecast?.map((weather, index: number) => {
+ if (index === 0) return null;
+
+ return (
+
+
{dayjs(weather.time).format('dddd')}
+
+
+ {weather.apparent_temperature_max}°
+ F
+
+
+ );
+ })}
+ >
+ );
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/components/islands/WeatherForecast.tsx b/examples/getting-started/getting-started-project/getting-started-app/components/islands/WeatherForecast.tsx
new file mode 100644
index 0000000..4536166
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/components/islands/WeatherForecast.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import weatherStyles from '../../styles/weather.module.css';
+import { getWeatherForecast } from '../../utils.ts';
+import { WeatherForecast as WeatherForecastType } from '../../constants.ts';
+import { CurrentWeatherCard, UpcomingWeatherCard } from '../WeatherCards.tsx';
+
+interface WeatherForecastProps {
+ headline: string;
+}
+
+export default function WeatherForecast({ headline }: WeatherForecastProps) {
+ const [city, setCity] = useState('');
+ const [weatherData, setWeatherData] = useState();
+
+ const handleFetchWeather = () => {
+ getWeatherForecast(city).then((data) => {
+ setWeatherData(data);
+ });
+ };
+
+ const isFetching: boolean = !weatherData;
+ const hasError: boolean = !isFetching && !!weatherData.error;
+ const hasWeatherData: boolean =
+ !isFetching && !hasError && !!weatherData.forecast;
+ const missingData = !isFetching && !hasWeatherData && !hasError;
+
+ function WeatherForecast({ weatherData }) {
+ return (
+ <>
+
+
+
+
+
+
+ >
+ );
+ }
+
+ return (
+
+
{headline}
+
+ setCity(event.target.value)}
+ />
+ Update Forecast
+
+
+ {isFetching &&
Search for a city to see the weather forecast }
+ {hasError && Error occurred when fetching weather forecast }
+ {hasWeatherData && }
+ {missingData && (
+ No results found for "{city}", please search another location
+ )}
+
+
+ );
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/components/modules/Footer/index.tsx b/examples/getting-started/getting-started-project/getting-started-app/components/modules/Footer/index.tsx
new file mode 100644
index 0000000..3f1ee0c
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/components/modules/Footer/index.tsx
@@ -0,0 +1,20 @@
+import { ModuleFields, TextField } from '@hubspot/cms-components/fields';
+import footerStyles from '../../../styles/footer.module.css';
+
+export function Component({ fieldValues }: any) {
+ return (
+
+ {fieldValues.footerText}
+
+ );
+}
+
+export const fields = (
+
+
+
+);
+
+export const meta = {
+ label: 'Footer Module',
+};
diff --git a/examples/getting-started/getting-started-project/getting-started-app/components/modules/Header/index.tsx b/examples/getting-started/getting-started-project/getting-started-app/components/modules/Header/index.tsx
new file mode 100644
index 0000000..2d99c37
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/components/modules/Header/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Menu, logInfo } from '@hubspot/cms-components';
+import {
+ ImageField,
+ MenuField,
+ ModuleFields,
+} from '@hubspot/cms-components/fields';
+import logo from '../../../assets/sprocket.svg';
+import headerStyles from '../../../styles/header.module.css';
+
+export function Component({ fieldValues }: any) {
+ const { src, alt, width, height } = fieldValues.logo;
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const DEFAULT_MENU_ID = '
+
+
+
+);
+
+export const meta = {
+ label: 'Header Module',
+};
diff --git a/examples/getting-started/getting-started-project/getting-started-app/components/modules/Weather/index.tsx b/examples/getting-started/getting-started-project/getting-started-app/components/modules/Weather/index.tsx
new file mode 100644
index 0000000..3478a4d
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/components/modules/Weather/index.tsx
@@ -0,0 +1,22 @@
+import { Island } from '@hubspot/cms-components';
+import WeatherForecast from '../../islands/WeatherForecast.tsx?island';
+import { ModuleFields, TextField } from '@hubspot/cms-components/fields';
+
+export function Component({ fieldValues }: any) {
+ const { headline } = fieldValues;
+ return ;
+}
+
+export const fields = (
+
+
+
+);
+
+export const meta = {
+ label: 'Weather Module',
+};
diff --git a/examples/getting-started/getting-started-project/getting-started-app/constants.ts b/examples/getting-started/getting-started-project/getting-started-app/constants.ts
new file mode 100644
index 0000000..5bcbf02
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/constants.ts
@@ -0,0 +1,68 @@
+import CLEAR from './assets/clear.svg';
+import RAIN from './assets/rain.svg';
+import SNOW from './assets/snow.svg';
+import THUNDERSTORM from './assets/thunderstorm.svg';
+import FOG from './assets/fog.svg';
+import CLOUDY from './assets/cloudy.svg';
+
+export const ICON_MAP = {
+ CLEAR,
+ RAIN,
+ SNOW,
+ THUNDERSTORM,
+ FOG,
+ CLOUDY,
+};
+
+export const FORECAST_BASE_URL = 'https://api.open-meteo.com/v1/forecast'; // https://open-meteo.com/en/docs
+export const LAT_LNG_BASE_URL =
+ 'https://geocoding-api.open-meteo.com/v1/search';
+
+export interface Forecast {
+ time: string[];
+ apparent_temperature_max: number[];
+ weather_code: number[];
+}
+
+export interface ForecastData {
+ time: string;
+ apparent_temperature_max: number;
+ weather_code: number;
+}
+
+interface LocationResult {
+ latitude: number;
+ longitude: number;
+}
+
+export interface LocationResponse {
+ results: LocationResult[];
+}
+
+export interface ForecastResponse {
+ daily: Forecast;
+}
+
+export interface WeatherForecast {
+ city: string;
+ forecast: ForecastData[];
+ error?: string;
+}
+
+interface DailyUnits {
+ time: string;
+ apparent_temperature_max: string;
+ weather_code: string;
+}
+
+export interface ApiResponse {
+ latitude: number;
+ longitude: number;
+ generationtime_ms: number;
+ utc_offset_seconds: number;
+ timezone: string;
+ timezone_abbreviation: string;
+ elevation: number;
+ daily_units: DailyUnits;
+ daily: Forecast;
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/package.json b/examples/getting-started/getting-started-project/getting-started-app/package.json
new file mode 100644
index 0000000..826edda
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "getting-started-example-app",
+ "version": "0.1.0",
+ "type": "module",
+ "dependencies": {
+ "@hubspot/cms-components": "latest",
+ "dayjs": "^1.11.11",
+ "prop-types": "^15.8.1",
+ "react": "^18.1.0"
+ },
+ "devDependencies": {
+ "@hubspot/cms-dev-server": "latest",
+ "@testing-library/react": "^13.4.0",
+ "@vitejs/plugin-react": "^2.1.0",
+ "jsdom": "^20.0.1",
+ "vitest": "^0.24.3"
+ },
+ "scripts": {
+ "start": "hs-cms-dev-server .",
+ "test": "vitest"
+ }
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/styles/footer.module.css b/examples/getting-started/getting-started-project/getting-started-app/styles/footer.module.css
new file mode 100644
index 0000000..43dd42c
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/styles/footer.module.css
@@ -0,0 +1,5 @@
+.footer {
+ text-align: center;
+ font-weight: bold;
+ font-size: 2em;
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/styles/header.module.css b/examples/getting-started/getting-started-project/getting-started-app/styles/header.module.css
new file mode 100644
index 0000000..584e8f9
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/styles/header.module.css
@@ -0,0 +1,30 @@
+.wrapper {
+ width: 100%;
+ background-color: transparent;
+
+ & nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-direction: row;
+ padding: 15px 25px;
+
+ & ul {
+ gap: 20px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+
+ & li {
+ & a {
+ text-decoration: none;
+ color: #ff7a59;
+ &:hover {
+ color: #2d3e50;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/styles/weather.module.css b/examples/getting-started/getting-started-project/getting-started-app/styles/weather.module.css
new file mode 100644
index 0000000..7cef0a0
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/styles/weather.module.css
@@ -0,0 +1,152 @@
+:root {
+ --primary-color: #ff7a59;
+ --primary-color-dark: #e66e50;
+ --primary-color-med: #ffbcac;
+ --secondary-color: #dfe3eb;
+ --accent-color: #2d3e50;
+ --light-accent-color: #eaf0f6;
+}
+
+.wrapper {
+ background-color: var(--accent-color);
+ min-height: 40vh;
+ padding: 50px;
+ font-family: sans-serif;
+
+ & .currentWeather {
+ min-height: 670px;
+ }
+
+ & h1 {
+ text-align: center;
+ margin-bottom: 50px;
+ color: white;
+ font-size: 3rem;
+ }
+
+ & h2 {
+ text-align: center;
+ font-size: 2rem;
+ color: white;
+ }
+
+ & input[type="text"] {
+ border-radius: 5px;
+ border: none;
+ padding: 10px 15px;
+ font-size: 16px;
+ background-color: var(--light-accent-color);
+ }
+
+ & button {
+ border-radius: 5px;
+ border:none;
+ background-color: var(--primary-color);
+ color: white;
+ padding: 10px 12px;
+ transition: background-color 0.3s;
+ cursor: pointer;
+ font-size: 14px;
+
+ &:hover {
+ background-color: var(--primary-color-dark);
+ transition: background-color 0.3s;
+ }
+ }
+
+ & .form {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 50px;
+ }
+
+ & .cardContainer {
+ display: flex;
+ gap: 20px;
+ justify-content: center;
+ align-items: flex-start;
+ max-width: 300px;
+ margin: auto;
+ }
+
+ & .card {
+ background-color: var(--secondary-color);
+ padding: 10px;
+ border-radius: 5px;
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+ min-width: 165px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ & img {
+ height: 100px;
+ }
+
+ & h3 {
+ margin: 0 auto 10px auto;
+ }
+ }
+
+ & .current {
+ background-color: var(--primary-color);
+ padding: 0px 25px 25px;
+ border-radius: 5px;
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+ max-width: 350px;
+ margin:auto;
+ min-height: 400px;
+ margin-bottom: 50px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+
+ & h2 {
+ margin: 0 auto 10px auto;
+ }
+
+ & .city {
+ text-align: center;
+ color: white;
+ }
+
+ & .country {
+ text-align: center;
+ color: var(--primary-color-med);
+ }
+
+ & h3 {
+ text-align: center;
+ color: white;
+ font-size: 3.5rem;
+ margin: 0;
+ position: relative;
+
+ & .unit {
+ font-size: 22px;
+ position: absolute;
+ right: 4px;
+ top: 31px;
+ color: var(--primary-color-med);
+ }
+ }
+
+ & .condition {
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ margin-bottom: 25px;
+
+ & img {
+ width:200px
+ }
+ }
+ }
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/tsconfig.json b/examples/getting-started/getting-started-project/getting-started-app/tsconfig.json
new file mode 100644
index 0000000..49cf7c7
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "module": "Node16",
+ "moduleResolution": "Node16",
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "forceConsistentCasingInFileNames": true,
+ "allowImportingTsExtensions": true,
+ "noEmit": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "skipLibCheck": true,
+ "types": ["vite/client", "vitest/globals"]
+ },
+ "include": ["components/**/*"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/getting-started/getting-started-project/getting-started-app/utils.ts b/examples/getting-started/getting-started-project/getting-started-app/utils.ts
new file mode 100644
index 0000000..a72f47d
--- /dev/null
+++ b/examples/getting-started/getting-started-project/getting-started-app/utils.ts
@@ -0,0 +1,100 @@
+import { logInfo } from '@hubspot/cms-components';
+import {
+ ApiResponse,
+ FORECAST_BASE_URL,
+ Forecast,
+ ForecastData,
+ ICON_MAP,
+ LAT_LNG_BASE_URL,
+ LocationResponse,
+ WeatherForecast,
+} from './constants.ts';
+
+// weatherCode's are pulled from the "WMO Weather interpretation codes" section
+// of the open-meteo docs: https://open-meteo.com/en/docs
+export function getWeatherIcon(weatherCode: string) {
+ switch (weatherCode) {
+ case '0':
+ case '1':
+ case 'Clear':
+ return ICON_MAP.CLEAR;
+
+ case '2':
+ case '3':
+ return ICON_MAP.CLOUDY;
+
+ case '51':
+ case '53':
+ case '55':
+ case '56':
+ case '57':
+ case '61':
+ case '63':
+ case '65':
+ case '66':
+ case '67':
+ case '80':
+ case '81':
+ case '82':
+ return ICON_MAP.RAIN;
+
+ case '71':
+ case '73':
+ case '75':
+ case '77':
+ case '85':
+ case '86':
+ return ICON_MAP.SNOW;
+
+ case '95':
+ case '96':
+ case '99':
+ return ICON_MAP.THUNDERSTORM;
+
+ case '45':
+ case '48':
+ return ICON_MAP.FOG;
+
+ default:
+ return '';
+ }
+}
+
+function transformResponseData(data: Forecast): ForecastData[] {
+ const { time, apparent_temperature_max, weather_code } = data;
+ const transformedData = time.map((day: string, index: number) => ({
+ time: day,
+ apparent_temperature_max: apparent_temperature_max[index],
+ weather_code: weather_code[index],
+ }));
+
+ return transformedData;
+}
+
+export async function getWeatherForecast(
+ city: string,
+): Promise {
+ try {
+ const fetchLocationData = await fetch(
+ `${LAT_LNG_BASE_URL}?name=${city}&count=1&language=en&format=json`,
+ );
+
+ const locationData: LocationResponse = await fetchLocationData.json();
+
+ if (fetchLocationData.status === 200 && !locationData.results) {
+ return { city, forecast: undefined };
+ }
+
+ const { longitude, latitude } = locationData.results[0];
+ const forecastResponse = await fetch(
+ `${FORECAST_BASE_URL}?latitude=${latitude}&longitude=${longitude}&temperature_unit=fahrenheit&forecast_days=3&daily=apparent_temperature_max,weather_code`,
+ );
+
+ const forecast: ApiResponse = await forecastResponse.json();
+ const transformedForecast = transformResponseData(forecast.daily);
+
+ return { city, forecast: transformedForecast };
+ } catch (error) {
+ return { city, error, forecast: undefined };
+ }
+}
diff --git a/examples/getting-started/hsproject.json b/examples/getting-started/getting-started-project/hsproject.json
similarity index 78%
rename from examples/getting-started/hsproject.json
rename to examples/getting-started/getting-started-project/hsproject.json
index f38bacf..7de2a73 100644
--- a/examples/getting-started/hsproject.json
+++ b/examples/getting-started/getting-started-project/hsproject.json
@@ -1,5 +1,5 @@
{
"name": "getting-started-project",
- "srcDir": "src",
+ "srcDir": ".",
"platformVersion": "2023.2"
}
diff --git a/examples/getting-started/getting-started-theme/fields.json b/examples/getting-started/getting-started-theme/fields.json
new file mode 100644
index 0000000..fe51488
--- /dev/null
+++ b/examples/getting-started/getting-started-theme/fields.json
@@ -0,0 +1 @@
+[]
diff --git a/examples/getting-started/getting-started-theme/layouts/base.hubl.html b/examples/getting-started/getting-started-theme/layouts/base.hubl.html
new file mode 100644
index 0000000..51b7055
--- /dev/null
+++ b/examples/getting-started/getting-started-theme/layouts/base.hubl.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ {% if page_meta.html_title or pageTitle %}
+ {{ page_meta.html_title or pageTitle }}
+ {% endif %}
+ {% if brand_settings.primaryFavicon.src %}
+
+ {% endif %}
+
+ {{ standard_header_includes }}
+
+
+
+ {% block header %}
+ {% module 'main header' path="@projects/getting-started-project/getting-started-app/components/modules/Header" %}
+ {% endblock header %}
+
+ {# The main-content ID is used for the navigation skipper in the header.html file. More information on the navigation skipper can be found here: https://github.com/HubSpot/cms-theme-boilerplate/wiki/Accessibility #}
+
+ {% block body %}
+ {% endblock body %}
+
+ {% block footer %}
+ {% module 'footer' path="@projects/getting-started-project/getting-started-app/components/modules/Footer" %}
+ {% endblock footer %}
+
+
+ {# To see a full list of what is included via standard_footer_includes please reference this article: https://developers.hubspot.com/docs/cms/hubl/variables#required-page-template-variables #}
+ {{ standard_footer_includes }}
+
+
diff --git a/examples/getting-started/getting-started-theme/theme.json b/examples/getting-started/getting-started-theme/theme.json
new file mode 100644
index 0000000..3e4f466
--- /dev/null
+++ b/examples/getting-started/getting-started-theme/theme.json
@@ -0,0 +1,3 @@
+{
+ "label": "CMS React - Getting Started Theme"
+}
diff --git a/examples/getting-started/getting-started-theme/weather.hubl.html b/examples/getting-started/getting-started-theme/weather.hubl.html
new file mode 100644
index 0000000..bc9150e
--- /dev/null
+++ b/examples/getting-started/getting-started-theme/weather.hubl.html
@@ -0,0 +1,15 @@
+
+{% extends "./layouts/base.hubl.html" %}
+
+{% block body %}
+
+ {% module
+ "weather"
+ path="@projects/getting-started-project/getting-started-app/components/modules/Weather",
+ %}
+
+{% endblock body %}
diff --git a/examples/getting-started/package.json b/examples/getting-started/package.json
index 9365759..59c2455 100644
--- a/examples/getting-started/package.json
+++ b/examples/getting-started/package.json
@@ -18,7 +18,7 @@
"prettier": "prettier . --check",
"watch:hubl": "hs watch getting-started-theme getting-started-theme",
"upload:hubl": "hs upload getting-started-theme getting-started-theme",
- "deploy": "hs project upload ."
+ "deploy": "hs project upload getting-started-project"
},
"engines": {
"node": ">=16.0.0"