feat: add new template and module for service catalog

rollup.config.mjs

@@ -35,6 +35,7 @@ export default defineConfig([
     input: {
       "new-request-form": "src/modules/new-request-form/index.tsx",
       "flash-notifications": "src/modules/flash-notifications/index.ts",
+      "service-catalog": "src/modules/service-catalog/index.tsx",
     },
     output: {
       dir: "assets",

src/modules/service-catalog/ServiceCatalog.tsx

@@ -0,0 +1,5 @@
+import { Span } from "@zendeskgarden/react-typography";
+
+export function ServiceCatalog() {
+  return <Span>Hello from module</Span>;
+}

src/modules/service-catalog/index.tsx

@@ -0,0 +1 @@
+export { renderServiceCatalog } from "./renderServiceCatalog";

src/modules/service-catalog/renderServiceCatalog.tsx

@@ -0,0 +1,7 @@
+import { render } from "react-dom";
+
+import { ServiceCatalog } from "./ServiceCatalog";
+
+export async function renderServiceCatalog(container: HTMLElement) {
+  render(<ServiceCatalog />, container);
+}

templates/custom_pages/service_catalog.hbs

@@ -0,0 +1,20 @@
+<div class="container-divider"></div>
+<div class="container">
+  <div class="sub-nav">
+  </div>
+
+  <h1>Service Catalog</h1>
+
+  <div id="main-content">
+     <div id="service-catalog"></div>
+    <div>Hello from template</div>
+  </div>
+</div>
+
+<script type="module">
+  import { renderServiceCatalog } from "service-catalog";
+
+  const container = document.getElementById("service-catalog");
+
+  renderServiceCatalog(container);
+</script>

templates/document_head.hbs

@@ -13,6 +13,7 @@
   "imports": {
     "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
     "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
+    "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
     "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
     "shared": "{{asset 'shared-bundle.js'}}",
     "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"

templates/home_page.hbs

@@ -37,6 +37,13 @@
             {{/each}}
           {{/if}}
         {{/each}}
+              <li class="blocks-item">
+                <a href="/hc/en-us/p/service_catalog" class="blocks-item-link">
+                  <span class="blocks-item-title">
+                    Service Catalog
+                  </span>
+                </a>
+              </li>
       </ul>
       {{pagination}}
     </section>