Mini website refresh

website/src/components/Video.astro

@@ -0,0 +1,29 @@
+---
+const { url } = Astro.props;
+---
+
+<div class="video-container">
+  <iframe
+    width="100%"
+    height="100%"
+    src={url}
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen></iframe>
+</div>
+<style>
+  .video-container {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio */
+  }
+  .video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>

website/src/components/footer/footer.astro

@@ -112,7 +112,10 @@ const { class: className } = Astro.props;
           target="_blank"
           rel="noopener noreferrer"
           class="header-github-link"
-          aria-label="Github repository"></a>
+          aria-label="Github repository"
+        >
+          GitHub
+        </a>
       </div>
     </div>
     <div class="top-separator"></div>

website/src/components/header/header.astro

@@ -194,6 +194,7 @@ const { noDrawer } = Astro.props;
           <li><Link class="item link" href="/tooling">Tooling support</Link></li>
         </ul>
       </details>
+      <Link class="item link" href="/videos">Videos</Link>
       <Link class="item link" href="/docs">Docs</Link>
       <Link class="item link" href="/playground">Playground</Link>
       <Link class="item link" href="/blog">Blog</Link>

website/src/components/homepage/hero-illustration.astro

@@ -14,7 +14,7 @@ import clsx from "clsx";
   /* Patch starlight tabs to look like fluent design */
   .hero-illustration > :global(starlight-tabs) {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column; /* Ensure tabs are above the content */
 
     .tablist-wrapper {
       align-self: center;
@@ -59,6 +59,7 @@ import clsx from "clsx";
     font-size: 90%;
   }
 </style>
+
 <div class="hero-illustration">
   <Tabs>
     <TabItem label="Http">

website/src/components/homepage/hero.astro

@@ -60,10 +60,10 @@ import HeroIllustration from "./hero-illustration.astro";
 
   .hero-title {
     text-align: center;
-    font-size: 24px;
+    font-size: 48px;
     font-style: normal;
-    font-weight: 600;
-    line-height: 100%; /* 24px */
+    font-weight: 800;
+    line-height: 100%; /* 48px */
     letter-spacing: -0.24px;
   }
 
@@ -72,7 +72,7 @@ import HeroIllustration from "./hero-illustration.astro";
     font-size: 96px;
     font-style: normal;
     font-weight: 600;
-    line-height: 100%; /* 96px */
+    line-height: 1.5; /* 96px */
     letter-spacing: -1px;
     color: transparent;
 
@@ -89,12 +89,14 @@ import HeroIllustration from "./hero-illustration.astro";
   @media only screen and (max-width: 1024px) {
     .hero-subtitle {
       font-size: 68px;
+      line-height: 1.5;
     }
   }
 
   @media only screen and (max-width: 728px) {
     .hero-subtitle {
       font-size: 48px;
+      line-height: 1.5;
     }
   }
 
@@ -130,6 +132,16 @@ import HeroIllustration from "./hero-illustration.astro";
     gap: 10px;
     flex: 1 0 0;
     align-self: stretch;
+    height: 100vh; /* Ensure full visibility on 1080p monitor */
+  }
+
+  .hero-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    align-self: stretch;
+    flex-wrap: wrap;
+    order: -1; /* Move buttons to the top */
   }
 
   @media only screen and (max-width: 728px) {
@@ -142,14 +154,24 @@ import HeroIllustration from "./hero-illustration.astro";
 <div class="hero-container">
   <div class="hero-content">
     <h1 class="hero-title">TypeSpec</h1>
-    <div class="hero-subtitle">Describe APIs</div>
+    <div class="hero-subtitle">Design APIs</div>
     <DescriptionText size="large" className="hero-description">
-      Describe your data up front and generate schemas, API specifications, client / server code,
+      Design your data up front and generate schemas, API specifications, client / server code,
       docs, and more.
     </DescriptionText>
     <div class="hero-buttons">
-      <Button as="a" appearance="primary" href={Links.docs}> Get Started </Button>
-      <Button as="a" appearance="outline" href={Links.playground}> Try it out </Button>
+      <Button as="a" appearance="primary" href={Links.docs} title="Install TypeSpec">
+        Install
+      </Button>
+      <Button
+        as="a"
+        appearance="outline"
+        class="highlight"
+        href={Links.playground}
+        title="Try the Playground"
+      >
+        Playground
+      </Button>
     </div>
   </div>
   <div class="hero-demo">

website/src/components/videoData.ts

@@ -0,0 +1,38 @@
+export const videoData = [
+  {
+    url: "https://www.youtube.com/embed/yfCYrKaojDo",
+    featured: true,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/y0LOXYklsMg",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/F8a6qOpMpcM",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/3Q6xWbWTSaU",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/EINevYeNosc",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/xDbC7Mhi9wM",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/cuYWVKa79IQ",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  // Add more videos here
+];

website/src/content/current-sidebar.ts

@@ -57,7 +57,6 @@ const sidebar: SidebarItem[] = [
         label: "Configuration",
         items: ["handbook/configuration/configuration", "handbook/configuration/tracing"],
       },
-      "handbook/releases",
       "handbook/faq",
     ],
   },

website/src/content/docs/docs/emitters/clients/introduction.mdx

@@ -34,7 +34,7 @@ Below is an example of the `package.json` snippet where client emitters are defi
     "@typespec/http-client-csharp": "^0.1.9-alpha.20250113.2",
     "@typespec/http-client-java": "^0.1.9",
     "@typespec/http-client-python": "^0.6.6",
-    "@typespec/http-client-js": "^0.1.0",
+    "@typespec/http-client-js": "^0.38.1",
   }
 ```
 
@@ -86,6 +86,161 @@ Before using the Java client emitter, ensure the following dependencies are inst
 Before using the C# client emitter, ensure that the [.NET 8.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) (or higher) is installed.
 Full configuration options can be found in the [C# Client Emitter README](https://github.com/microsoft/typespec/blob/main/packages/http-client-csharp/readme.md#configuration)
 
+## JavaScript Client Emitter Example
+
+### Step 1: Install Dependencies
+
+Add the following dependencies to your `package.json` file:
+
+```json
+"dependencies": {
+  "@typespec/http-client-js": "^0.38.1"
+}
+```
+
+Run the following command to install the dependencies:
+
+```bash
+tsp install
+```
+
+### Step 2: Update Configuration
+
+Update your `tspconfig.yaml` file with the following configuration:
+
+```yaml
+emit:
+  - "@typespec/http-client-js"
+options:
+  "@typespec/http-client-js":
+    emitter-output-dir: "{project-root}/clients/javascript"
+    packageDetails:
+      name: "your_package_name"
+      version: 1.0.0
+```
+
+### Step 3: Generate Client
+
+Run the following command to generate the JavaScript client:
+
+```bash
+tsp compile {path to main.tsp}/main.tsp
+```
+
+## Python Client Emitter Example
+
+### Step 1: Install Dependencies
+
+Add the following dependencies to your `package.json` file:
+
+```json
+"dependencies": {
+  "@typespec/http-client-python": "^0.6.6"
+}
+```
+
+Run the following command to install the dependencies:
+
+```bash
+tsp install
+```
+
+### Step 2: Update Configuration
+
+Update your `tspconfig.yaml` file with the following configuration:
+
+```yaml
+emit:
+  - "@typespec/http-client-python"
+options:
+  "@typespec/http-client-python":
+    emitter-output-dir: "{project-root}/clients/python"
+```
+
+### Step 3: Generate Client
+
+Run the following command to generate the Python client:
+
+```bash
+tsp compile {path to main.tsp}/main.tsp
+```
+
+## Java Client Emitter Example
+
+### Step 1: Install Dependencies
+
+Add the following dependencies to your `package.json` file:
+
+```json
+"dependencies": {
+  "@typespec/http-client-java": "^0.1.9"
+}
+```
+
+Run the following command to install the dependencies:
+
+```bash
+tsp install
+```
+
+### Step 2: Update Configuration
+
+Update your `tspconfig.yaml` file with the following configuration:
+
+```yaml
+emit:
+  - "@typespec/http-client-java"
+options:
+  "@typespec/http-client-java":
+    emitter-output-dir: "{project-root}/clients/java"
+```
+
+### Step 3: Generate Client
+
+Run the following command to generate the Java client:
+
+```bash
+tsp compile {path to main.tsp}/main.tsp
+```
+
+## C# Client Emitter Example
+
+### Step 1: Install Dependencies
+
+Add the following dependencies to your `package.json` file:
+
+```json
+"dependencies": {
+  "@typespec/http-client-csharp": "^0.1.9-alpha.20250113.2"
+}
+```
+
+Run the following command to install the dependencies:
+
+```bash
+tsp install
+```
+
+### Step 2: Update Configuration
+
+Update your `tspconfig.yaml` file with the following configuration:
+
+```yaml
+emit:
+  - "@typespec/http-client-csharp"
+options:
+  "@typespec/http-client-csharp":
+    emitter-output-dir: "{project-root}/clients/dotnet"
+```
+
+### Step 3: Generate Client
+
+Run the following command to generate the C# client:
+
+```bash
+tsp compile {path to main.tsp}/main.tsp
+```
+
 ## Running Language-Specific Emitters in CLI
 
 <Steps>