Add polyglot AppHost documentation for TypeScript, Python, Go, Rust, … (#277)

* Add polyglot AppHost documentation for TypeScript, Python, Go, Rust, and Java

* feat: enhance PivotSelector component with marginTop prop for better layout control (#302)

docs: update Polyglot AppHost documentation with new features and usage examples

docs: add link to Polyglot AppHost in resource model documentation

docs: include Polyglot AppHost reference in get-started guide for broader language support

style: import utility classes for padding and margin in site CSS

style: create utils.css for reusable padding and margin utility classes

* fix: format project structure in polyglot AppHost documentation for clarity

---------

Co-authored-by: David Pine <david.pine@microsoft.com>

Author: sebastienros

src/frontend/config/sidebar/docs.topics.ts

@@ -746,6 +746,10 @@ export const docsTopics: StarlightSidebarTopicsUserConfig = {
           label: 'Configuration',
           slug: 'app-host/configuration',
         },
+        {
+          label: 'Polyglot AppHost',
+          slug: 'app-host/polyglot-apphost',
+        },
         {
           label: 'Certificate configuration',
           slug: 'app-host/certificate-configuration',

src/frontend/src/components/PivotSelector.astro

@@ -9,9 +9,10 @@ type Props = {
   options: Option[];
   key: string;
   title?: string;
+  marginTop?: number | null;
 };
 
-const { options, key, title } = Astro.props;
+const { options, key, title, marginTop } = Astro.props;
 ---
 
 <div class="pivot-container not-content">
@@ -58,14 +59,14 @@ const { options, key, title } = Astro.props;
   </button>
 </div>
 
-<style>
+<style define:vars={{ marginTop: marginTop !== null && marginTop !== undefined ? `${marginTop}rem` : '0rem' }}>
   .pivot-container {
     background: var(--sl-color-bg-nav);
     border: 1px solid var(--sl-color-gray-5);
     border-radius: 0.5rem;
     padding: 1rem;
     box-shadow: var(--sl-shadow-sm);
-    margin-top: 0;
+    margin-top: var(--marginTop);
     margin-bottom: 1.5rem;
     --pivot-float-x: -50%;
   }
@@ -79,6 +80,7 @@ const { options, key, title } = Astro.props;
     box-shadow: var(--sl-shadow-md);
     border-color: var(--sl-color-gray-4);
     max-width: min(calc(100vw - 2rem), 800px);
+    margin-top: 0;
     width: auto;
     opacity: 1;
     animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);