From 9d1028fa62feab4b3724286cf0df084ef69138e3 Mon Sep 17 00:00:00 2001
From: Sean Holung <sean.holung@gmail.com>
Date: Thu, 8 Jun 2023 16:38:34 -0700
Subject: [PATCH] refactor

---
 .../partials/docs/pulumi-quickstart.html      | 60 +------------------
 themes/default/theme/src/ts/get-started.ts    | 57 ++++++++++++++++++
 themes/default/theme/src/ts/main.ts           |  1 +
 3 files changed, 59 insertions(+), 59 deletions(-)
 create mode 100644 themes/default/theme/src/ts/get-started.ts

diff --git a/themes/default/layouts/partials/docs/pulumi-quickstart.html b/themes/default/layouts/partials/docs/pulumi-quickstart.html
index 3e19e1f4ac8..17c064ef36a 100644
--- a/themes/default/layouts/partials/docs/pulumi-quickstart.html
+++ b/themes/default/layouts/partials/docs/pulumi-quickstart.html
@@ -4,7 +4,7 @@
 {{ $customize := .Params.customize }}
 
 
-<section class="content pulumi-quickstart">
+<section id="pulumi-quickstart" class="content pulumi-quickstart">
     <p class="intro">{{ .Params.intro }}</p>
 
     <div id="accordion-quickstart-customize">
@@ -124,64 +124,6 @@ <h2 id="step-four" class="step-heading">{{ $template.heading }}</h2>
                 {{ end }}
 
 
-                <!-- controls code rendering based on the selected combination of cloud, language, and template. -->
-                <script>
-                    $(document).ready(function () {
-                        $('input[name="language-radio"], input[name="credentials-radio"], input[name="templates-radio"]').change(function () {
-                            if ($(this).is(":checked")) {
-                                const selectedValue = $(this).val();
-                                const cloud = $('input[name="credentials-radio"]:checked').val();
-                                const language = $('input[name="language-radio"]:checked').val();
-                                const template = $('input[name="templates-radio"]:checked').val();
-                                $("#template-command").html(`pulumi new ${template ? template + "-" : ""}${cloud}-${language}`);
-                                $("[id^=template-content]").css("display", "none");
-                                $(`#template-content-${language}`).css("display", "block");
-                                $("[id^=next-steps-]").css("display", "none");
-                                $(`#next-steps-${cloud}`).css("display", "block");
-                            }
-                        });
-
-                        const labelGroups = ["os", "cloud", "language", "template"];
-                        labelGroups.forEach(labelGroup => {
-                            $(`label[for^="${labelGroup}-"]`).click(function () {
-                                $(`label[for^="${labelGroup}-"]`).removeClass("selected");
-                                $(this).addClass("selected");
-                            });
-                        });
-
-                        $('input[id="credentials-checkbox"').change(function () {
-                            console.log("credentials checkbox changed");
-                            if ($(this).is(":checked")) {
-                                $("#credentials-step").css("display", "flex");
-                            } else {
-                                $("#credentials-step").css("display", "none");
-                            }
-                        });
-
-                        function setOS() {
-                            const userAgent = navigator.userAgent;
-                            let os = "osx";
-                            if (userAgent.indexOf("Win") !== -1) {
-                                os = "windows";
-                            } else if (userAgent.indexOf("Mac") !== -1) {
-                                os = "osx";
-                            } else if (userAgent.indexOf("Linux") !== -1) {
-                                os = "linux";
-                            }
-                            $(`#os-${os}-radio`).prop("checked", true);
-                            $(`label[for^="os-"]`).removeClass("selected");
-                            $(`label[for="os-${os}-radio"]`).addClass("selected");
-                        }
-
-                        function initQuickStart() {
-                            $("[id^=template-content]").css("display", "none");
-                            $("#template-content-typescript").css("display", "block");
-                            setOS();
-                        }
-
-                        initQuickStart();
-                    });
-                </script>
                 <div class="content code-block template highlight">
                     <pre class="chroma"><code id="template-command">pulumi new aws-typescript</code></pre>
                 </div>
diff --git a/themes/default/theme/src/ts/get-started.ts b/themes/default/theme/src/ts/get-started.ts
new file mode 100644
index 00000000000..35f82c5e4a8
--- /dev/null
+++ b/themes/default/theme/src/ts/get-started.ts
@@ -0,0 +1,57 @@
+// controls code rendering of quickstart based on the selected 
+// combination of cloud, language, and template.
+(function ($) {
+    $('input[name="language-radio"], input[name="credentials-radio"], input[name="templates-radio"]').change(function () {
+        if ($(this).is(":checked")) {
+            const selectedValue = $(this).val();
+            const cloud = $('input[name="credentials-radio"]:checked').val();
+            const language = $('input[name="language-radio"]:checked').val();
+            const template = $('input[name="templates-radio"]:checked').val();
+            $("#template-command").html(`pulumi new ${template ? template + "-" : ""}${cloud}-${language}`);
+            $("[id^=template-content]").css("display", "none");
+            $(`#template-content-${language}`).css("display", "block");
+            $("[id^=next-steps-]").css("display", "none");
+            $(`#next-steps-${cloud}`).css("display", "block");
+        }
+    });
+
+    const labelGroups = ["os", "cloud", "language", "template"];
+    labelGroups.forEach(labelGroup => {
+        $(`label[for^="${labelGroup}-"]`).click(function () {
+            $(`label[for^="${labelGroup}-"]`).removeClass("selected");
+            $(this).addClass("selected");
+        });
+    });
+
+    $('input[id="credentials-checkbox"').change(function () {
+        console.log("credentials checkbox changed");
+        if ($(this).is(":checked")) {
+            $("#credentials-step").css("display", "flex");
+        } else {
+            $("#credentials-step").css("display", "none");
+        }
+    });
+
+    function setOS() {
+        const userAgent = navigator.userAgent;
+        let os = "osx";
+        if (userAgent.indexOf("Win") !== -1) {
+            os = "windows";
+        } else if (userAgent.indexOf("Mac") !== -1) {
+            os = "osx";
+        } else if (userAgent.indexOf("Linux") !== -1) {
+            os = "linux";
+        }
+        $(`#os-${os}-radio`).prop("checked", true);
+        $(`label[for^="os-"]`).removeClass("selected");
+        $(`label[for="os-${os}-radio"]`).addClass("selected");
+    }
+
+    function initQuickStart() {
+        $("[id^=template-content]").css("display", "none");
+        $("#template-content-typescript").css("display", "block");
+        setOS();
+    }
+
+    initQuickStart();
+})((args) => jQuery(args, jQuery("#pulumi-quickstart"))); //scope this to the quickstart section of the site
diff --git a/themes/default/theme/src/ts/main.ts b/themes/default/theme/src/ts/main.ts
index 29ec0dbcf7e..f8d16fdcc1e 100644
--- a/themes/default/theme/src/ts/main.ts
+++ b/themes/default/theme/src/ts/main.ts
@@ -21,6 +21,7 @@ import "./developer-advocates";
 import "./toc";
 import "./ai";
 import "./docs-main";
+import "./get-started";
 
 // Register all Stencil components.
 defineCustomElements();