Add vehicle selector and special notes for setup guide

package.json

@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.20",
-    "@fontsource/jetbrains-mono": "^5.0.21"
+    "@fontsource/jetbrains-mono": "^5.0.21",
+    "marked": "^15.0.7"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^17.3.0",

src/lib/components/HarnessSelector/HarnessSelector.svelte

@@ -5,7 +5,7 @@
 
   import { tick } from 'svelte';
   import { clickOutside } from '$lib/utils/clickOutside';
-  import { harnesses } from '$lib/utils/harnesses';
+  import { allHarnesses, vehicleHarnesses, genericHarnesses } from '$lib/utils/harnesses';
 
   import NoteCard from '$lib/components/NoteCard.svelte';
   import DropdownItem from './HarnessDropdownItem.svelte';
@@ -16,22 +16,44 @@
 
   export let onChange;
 
-  export let label = "Select vehicle";
-  export let accessoryLabel = null;
+  export let showPackageSupportCard = true; // If true, shows the note card that shows below with information about how the selected car is supported
+  export let showVehicleHarnesses = true; // If true, includes the harnesses by each vehicle model
+  export let showGenericHarnesses = true; // If true, includes the generic/developer harnesses
+  let showAllHarnesses = showVehicleHarnesses && showGenericHarnesses;
+
+  export let accessoryLabel = null; // Used to show the price of the selected harness when browsing accessories
+
+  const resourceName = {
+    singular: showAllHarnesses ? "vehicle or harness" : showVehicleHarnesses ? "vehicle" : "harness",
+    plural: showAllHarnesses ? "vehicles or harnesses" : showVehicleHarnesses ? "vehicles" : "harnesses",
+  }
+  export let label = `Select ${resourceName.singular}`;
+  export let searchLabel = `Search for a ${resourceName.singular}`;
+  export let noResultsLabel = `No matching ${resourceName.plural}`;
 
   let selection;
 
+  // Load harnesses based on the options
+  $: harnesses = showAllHarnesses ? allHarnesses : showVehicleHarnesses ? vehicleHarnesses : genericHarnesses;
   $: browser && $harnesses.length > 0, setInitialSelection();
   $: if (selection) {
     onChange(selection);
     updateQueryParams(selection);
   }
 
   function updateQueryParams(selectedHarness) {
-    const [make, ...model] = selectedHarness.car.split(' ');
-    const searchParams = new URLSearchParams();
-    searchParams.set("make", encodeURIComponent(make));
-    if (model.length > 0) searchParams.set("model", encodeURIComponent(model.join(' ')));
+    const searchParams = $page.url.searchParams;
+    const [make, ...model] = selectedHarness?.car?.split(' ') || [];
+    if (make) {
+      searchParams.set("make", encodeURIComponent(make));
+    } else {
+      searchParams.delete("make");
+    }
+    if (model?.length > 0) {
+      searchParams.set("model", encodeURIComponent(model.join(' ')));
+    } else {
+      searchParams.delete("model");
+    }
     goto(`?${searchParams.toString()}`, { keepfocus: true, replaceState: true, noScroll: true });
   }
 
@@ -57,13 +79,26 @@
 
   const handleClear = () => {
     // clear search input
-    inputValue = "";
-    handleInput();
-    inputRef?.focus();
-
-     // clear harness selection
-     selection = null;
-     onChange(null);
+    let clearedInput = false;
+    if (inputValue) {
+      inputValue = "";
+      clearedInput = true;
+      handleInput();
+      inputRef?.focus();
+    }
+    // clear harness selection and close if we weren't clearing the search input
+    if (!clearedInput) {
+      // clear harness selection
+      if (selection) {
+        selection = null;
+        onChange(null);
+        updateQueryParams(null); // NOTE: Doing this causes a soft reload which removes the focus from the input
+      }
+      // close the dropdown if it's open
+      if (menuOpen) {
+        menuOpen = false;
+      }
+    }
   }
 
   /* Dropdown Options */
@@ -92,7 +127,7 @@
       <button class="clear" on:click={handleClear}>{@html CloseIcon}</button>
       <input
         type="text"
-        placeholder="Search for a vehicle or harness"
+        placeholder={searchLabel}
         autocomplete="off"
         class="search-input"
         bind:value={inputValue}
@@ -128,7 +163,7 @@
           <DropdownItem value={item} on:click={() => handleOptionClick(item)} on:keydown={(e) => handleOptionKeyDown(e, item)} />
         {/each}
       {:else}
-        <DropdownItem value={{ car: 'No matching vehicles' }} />
+        <DropdownItem value={{ car: noResultsLabel }} />
       {/if}
     {:else}
       {#each $harnesses as item}
@@ -138,7 +173,7 @@
   </div>
 </div>
 
-{#if selection && selection.package}
+{#if showPackageSupportCard && selection && selection.package}
   <NoteCard title="Support" icon={CarIcon}>
     {@html selection.package === 'All' ?
       'openpilot will work with <strong>all packages and trims</strong> of this car.' :
@@ -157,7 +192,7 @@
 }
 
 .dropdown-content {
-  display: none;
+  display: none; /* hidden by default */
   position: absolute;
   border: 1px solid #ddd;
   z-index: 1;
@@ -166,8 +201,8 @@
   overflow-y: auto;
 }
 
-.show {
-  display:block;
+.dropdown-content.show {
+  display:block
 }
 
 .search-input {

src/lib/components/NoteCard.svelte

@@ -9,7 +9,7 @@
 <div class="card" class:elevated={style == "elevated"}>
   <div>{@html icon}</div>
   <hgroup>
-    <span>{title}</span>
+    <span class="title">{title}</span>
     <div>
       <slot></slot>
     </div>
@@ -29,7 +29,7 @@
       margin-left: 1rem;
       display: block !important;
 
-      & span {
+      & .title {
         font-family: JetBrains Mono, monospace;
         font-size: 0.875rem;
         font-weight: 400;
@@ -54,6 +54,44 @@
           opacity: 0.8;
         }
       }
+
+      & h1, & h2, & h3, & h4, & h5, & h6 {
+        margin-block: 1rem;
+      }
+
+      & h1 {
+        font-size: 1.5rem;
+      }
+
+      & h2 {
+        font-size: 1.25rem;
+      }
+
+      & h3 {
+        font-size: 1.125rem;
+      }
+
+      & h4 {
+        font-size: 1rem;
+      }
+
+      & h5 {
+        font-size: 0.875rem;
+      }
+
+      & h6 {
+        font-size: 0.75rem;
+      }
+
+      & li {
+        font-size: 0.875rem;
+        margin-bottom: 0.5rem;
+      }
+
+      & ul, & ol {
+        padding-left: 1.5rem;
+        margin: 0.5rem 0;
+      }
     }
   }
 

src/lib/utils/harnesses.js

@@ -16,16 +16,19 @@ async function fetchHarnessVariants() {
   }, {});
 }
 
-const harnesses = writable([]);
 let initialized = false;
+const vehicleHarnesses = writable([]); // List of vehicle model harnesses, excluding developer and generic make harnesses
+const genericHarnesses = writable([]); // List of developer and generic make harnesses
+const allHarnesses = writable([]); // List of all vehicle model harnesses, including developer and generic make harnesses
 
 async function initializeHarnesses() {
   if (initialized) return;
 
   const harnessInfo = await fetchHarnessVariants();
 
-  let harnessList = Object.values(Vehicles).flatMap(make => {
-    return make.map(model => {
+  // Add harnesses for vehicles
+  let vehiclesHarnessList = Object.entries(Vehicles).flatMap(([make, models]) => {
+    return models.map(model => {
       if (model.name === 'comma body') return false;
       const harness = CarHarnesses.find(harness => harness.title === model.harness_connector);
       if (!harness) {
@@ -34,28 +37,34 @@ async function initializeHarnesses() {
       return {
         ...harnessInfo[harness.id],
         ...harness,
+        make,
         car: model.name,
         package: model.package,
         angledMount: model.angled_mount,
         backordered: harness?.backordered,  // these overrides are only shown if the harness is out of stock in Shopify
       };
     }).filter(Boolean);
   });
+  vehicleHarnesses.set(vehiclesHarnessList);
 
-  // add developer harnesses
-  harnessList.push(...CarHarnesses.map(harness => {
+  // Add developer and generic make harnesses
+  let genericHarnessList = CarHarnesses.map(harness => {
     return {
       ...harnessInfo[harness.id],
       car: harness.title,
       id: harness.id,
       backordered: harness.backordered,
     };
-  }));
+  });
+  genericHarnesses.set(genericHarnessList);
+
+  // Combine the two lists
+  let allHarnessList = vehiclesHarnessList.concat(genericHarnessList);
+  allHarnesses.set(allHarnessList);
 
-  harnesses.set(harnessList);
   initialized = true;
 }
 
 initializeHarnesses();
 
-export { harnesses };
+export { allHarnesses, vehicleHarnesses, genericHarnesses };

src/lib/utils/shopify.js

@@ -137,7 +137,7 @@ export async function getProduct(id) {
               currencyCode
             }
           }
-          variants(first: 100) {
+          variants(first: 250) {
             nodes {
               id
               title

src/lib/vehicles.json

@@ -11,7 +11,8 @@
       "harness_connector": "Honda Nidec",
       "detail_sentence": "openpilot upgrades your <strong>Acura ILX</strong> with automated lane centering and adaptive cruise control <strong>while driving above 26 mph</strong>. This car may not be able to take tight turns on its own. Traffic light and stop sign handling is also available in <a href='https://blog.comma.ai/090release/#experimental-mode' target='_blank' class='highlight'>Experimental mode</a>.",
       "footnotes": [
-      ]
+      ],
+      "setup_notes": "<p>Here's an example of an HTML note with some <strong>bold text</strong> and a <a href='https://comma.ai' target='_blank'>link</a> or a <a href='https://comma.ai' target='_blank' class='highlight'>highlighted link</a>.</p><p>We can even include images:</p><img src='https://blog.comma.ai/img/097_release/cover.jpg' alt='comma logo' width='200' height='100' /><ul><li>And we can use</li><li>bullet points</li><li>to show steps</li></ul></p>"
     },
     {
       "name": "Acura RDX 2016-18",
@@ -24,7 +25,8 @@
       "harness_connector": "Honda Nidec",
       "detail_sentence": "openpilot upgrades your <strong>Acura RDX</strong> with automated lane centering and adaptive cruise control <strong>while driving above 26 mph</strong>. This car may not be able to take tight turns on its own. Traffic light and stop sign handling is also available in <a href='https://blog.comma.ai/090release/#experimental-mode' target='_blank' class='highlight'>Experimental mode</a>.",
       "footnotes": [
-      ]
+      ],
+      "setup_notes": "## Markdown header\n\nRegular text\n\n- Use **bold text** for emphasis\n- Include [links](https://comma.ai.com)\n- Add bullet points as needed\n\nOr include images:\n\n![comma](https://blog.comma.ai/img/097_release/cover.jpg)"
     },
     {
       "name": "Acura RDX 2019-21",
@@ -37,7 +39,8 @@
       "harness_connector": "Honda Bosch A",
       "detail_sentence": "openpilot upgrades your <strong>Acura RDX</strong> with automated lane centering <strong>above 3 mph</strong>, and adaptive cruise control <strong>that automatically resumes from a stop</strong>. This car may not be able to take tight turns on its own.",
       "footnotes": [
-      ]
+      ],
+      "setup_notes": "Here are some shorter demo notes with [a link](https://comma.ai)."
     }
   ],
   "Audi": [

src/routes/setup/(guides)/comma-3x/+page.js

@@ -28,7 +28,7 @@ export async function load() {
     ],
     notes: [
       {
-        title: 'Note: Nissan & GM setup',
+        title: 'Note: Nissan & GM setup', // TODO: This should probably be moved to vehicle specific notes in vehicles.json ("setup_notes" field)
         content: `
           See more setup details:
           <a href="https://github.com/commaai/openpilot/wiki/nissan" target="_blank">Nissan</a> or