From 6f4629a7dae9dd58bd440d97a7845afd6b382be2 Mon Sep 17 00:00:00 2001
From: Nicholas Brown <znicholasbrown@gmail.com>
Date: Fri, 7 Aug 2026 12:40:09 -0400
Subject: [PATCH] add dropdown to ts docs

---
 docs/css/language-dropdown.css | 31 ++++++++++++++++++++++++++++++-
 docs/language-dropdown.js      |  8 ++++----
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/docs/css/language-dropdown.css b/docs/css/language-dropdown.css
index 0eb810545..4ea9a8613 100644
--- a/docs/css/language-dropdown.css
+++ b/docs/css/language-dropdown.css
@@ -7,6 +7,7 @@
   margin-left: auto;
   display: inline-flex;
   align-items: center;
+  position: relative;
 }
 
 #language-switch select {
@@ -20,7 +21,7 @@
   font-size: 0.75rem;
   line-height: 1rem;
   height: 2.375rem;
-  padding: 0 1.375rem 0 0.75rem;
+  padding: 0 1.375rem 0 2rem;
   /* Chevron, drawn in the same gray as the label text. */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -55,3 +56,31 @@
   color: rgb(209 213 219);
   border-color: rgb(255 255 255 / 0.1);
 }
+
+/* Colored language mark on the visible trigger; the native <option>s stay
+   plain. language-dropdown.js mirrors the current selection onto data-lang,
+   so the icon always matches the selected value. Brand colors carry their
+   own contrast (the TS mark keeps a white plate behind the letters), so the
+   same artwork works in both themes. */
+#language-switch::before {
+  content: "";
+  position: absolute;
+  left: 0.625rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.875rem;
+  height: 0.875rem;
+  background: center / contain no-repeat;
+  pointer-events: none;
+}
+
+/* Two-tone Python mark (#3776AB / #FFD43B). */
+#language-switch[data-lang="python"]::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%233776AB' d='M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037 9.557c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z'/%3E%3Cpath fill='%23FFD43B' d='M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z'/%3E%3C/svg%3E");
+}
+
+/* TypeScript mark: #3178C6 rounded square, white TS (white plate under the
+   letter knockouts keeps them white in dark mode). */
+#language-switch[data-lang="typescript"]::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' fill='%23fff'/%3E%3Cpath fill='%233178C6' d='M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z'/%3E%3C/svg%3E");
+}
diff --git a/docs/language-dropdown.js b/docs/language-dropdown.js
index 4eb5131f6..f1ec748bc 100644
--- a/docs/language-dropdown.js
+++ b/docs/language-dropdown.js
@@ -7,10 +7,7 @@
 
   var CURRENT_LANGUAGE = "python";
 
-  // TODO: fastmcp-ts has no public docs site URL discoverable in either repo
-  // yet. Until it exists, point at the repo README (the same cross-link the
-  // welcome page uses), then replace with the real docs URL.
-  var TYPESCRIPT_DOCS_URL = "https://github.com/PrefectHQ/fastmcp-ts";
+  var TYPESCRIPT_DOCS_URL = "https://fastmcp-ts.docs.prefect.io/";
   var PYTHON_DOCS_URL = "https://gofastmcp.com";
 
   var URLS = { python: PYTHON_DOCS_URL, typescript: TYPESCRIPT_DOCS_URL };
@@ -27,6 +24,8 @@
   function buildDropdown() {
     var label = document.createElement("label");
     label.id = "language-switch";
+    // The CSS keys the trigger's language icon off this attribute.
+    label.dataset.lang = CURRENT_LANGUAGE;
 
     var select = document.createElement("select");
     select.setAttribute("aria-label", "Switch documentation language");
@@ -43,6 +42,7 @@
     });
 
     select.addEventListener("change", function () {
+      label.dataset.lang = select.value;
       if (select.value === CURRENT_LANGUAGE) return;
       window.location.href = URLS[select.value];
     });