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

@@ -1,5 +1,6 @@
 ---
 import { Links } from "@site/src/constants";
+import { Icon } from "@astrojs/starlight/components";
 import ThemePicker from "@typespec/astro-utils/components/theme-picker.astro";
 import Link from "@typespec/astro-utils/components/link.astro";
 import MicrosoftLogo from "./microsoft-logo.astro";
@@ -100,19 +101,33 @@ const { class: className } = Astro.props;
     background-color: var(--colorBrandForeground1);
     border-radius: 50%;
   }
+
+  .icon {
+    color: var(--colorNeutralForeground1); /* Set icon color to black */
+  }
+
+  .icon:hover {
+    color: var(--colorNeutralForeground2); /* Set icon hover color to white */
+  }
 </style>
 <footer class:list={["footer", className]} data-theme="dark">
   <div class="top">
     <div class="main">
       <div class="main-title">TypeSpec</div>
       <div class="main-description">Follow us for latest updates, contributions, and more.</div>
       <div>
-        <a
+        <Link
+          class="item icon link"
           href="https://github.com/microsoft/typespec"
           target="_blank"
-          rel="noopener noreferrer"
-          class="header-github-link"
-          aria-label="Github repository"></a>
+          rel="noopener noreferrer"><Icon name="github" label="github" /></Link
+        >
+        <Link
+          class="item icon link"
+          href="https://aka.ms/typespec/discord"
+          target="_blank"
+          rel="noopener noreferrer"><Icon name="discord" label="discord" /></Link
+        >
       </div>
     </div>
     <div class="top-separator"></div>

website/src/components/header/header.astro

@@ -195,6 +195,7 @@ const { noDrawer } = Astro.props;
         </ul>
       </details>
       <Link class="item link" href="/docs">Docs</Link>
+      <Link class="item link" href="/videos">Videos</Link>
       <Link class="item link" href="/playground">Playground</Link>
       <Link class="item link" href="/blog">Blog</Link>
       <Link class="item link" href="/community">Community</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

@@ -10,7 +10,6 @@ import HeroIllustration from "./hero-illustration.astro";
     background-repeat: no-repeat;
     width: 100%;
     background-size: 100vw 94%;
-
     display: flex;
     padding: 120px 80px 52px 80px;
     flex-direction: column;
@@ -60,10 +59,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%;
     letter-spacing: -0.24px;
   }
 
@@ -72,10 +71,9 @@ import HeroIllustration from "./hero-illustration.astro";
     font-size: 96px;
     font-style: normal;
     font-weight: 600;
-    line-height: 100%; /* 96px */
+    line-height: 1.5;
     letter-spacing: -1px;
     color: transparent;
-
     background: linear-gradient(
       127deg,
       #6dc2b1 -17.91%,
@@ -89,12 +87,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 +130,7 @@ import HeroIllustration from "./hero-illustration.astro";
     gap: 10px;
     flex: 1 0 0;
     align-self: stretch;
+    height: 100vh; /* Ensure full visibility on 1080p monitor */
   }
 
   @media only screen and (max-width: 728px) {
@@ -142,15 +143,25 @@ 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-buttons">
+      <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 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>
-    </div>
   </div>
   <div class="hero-demo">
     <HeroIllustration />

website/src/components/release-notification.astro

@@ -29,19 +29,6 @@ if (!last.data.version) {
 import Link from "@typespec/astro-utils/components/link.astro";
 ---
 
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const els = document.querySelectorAll(".new-version-banner") as any as HTMLElement[];
-    const today = new Date();
-    els.forEach((el) => {
-      const releaseDate = new Date(el.dataset.releasedate!);
-      if (today.getTime() - releaseDate.getTime() > 7 * 86400000 /* 7 days */) {
-        els.forEach((x) => x.classList.add("hide"));
-      }
-    });
-  });
-</script>
-
 <style>
   .new-version-banner {
     border: 1px solid var(--colorBrandBackground);

website/src/components/video-data.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/pages/blog/index.astro

@@ -4,6 +4,9 @@ import BaseLayout from "@site/src/layouts/base-layout.astro";
 import BlogPostPreview from "./_BlogPostPreview.astro";
 
 const posts = await getCollection("blog");
+
+// Sort posts by date in descending order
+posts.sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());
 ---
 
 <style>

website/src/pages/community.astro

@@ -0,0 +1,37 @@
+---
+import BaseLayout from "../layouts/base-layout.astro";
+---
+
+<BaseLayout>
+  <div class="community" style="padding: 20px; margin: 0 auto; max-width: 800px;">
+    <h1 style="color: #4A90E2;">Welcome</h1>
+    <p>Welcome to the TypeSpec community! We're glad you're here.</p>
+
+    <h2 style="color: #4A90E2;">GitHub</h2>
+    <p>
+      We love stars so make sure you <a href="https://github.com/microsoft/typespec"
+        >star us on GitHub</a
+      >.
+    </p>
+
+    <h2 style="color: #4A90E2;">Contributing</h2>
+    <p>
+      Check out our <a href="https://github.com/microsoft/typespec/blob/main/CONTRIBUTING.md"
+        >contributing guide</a
+      > if you would like to contribute to TypeSpec.
+    </p>
+
+    <h2 style="color: #4A90E2;">Community Discord</h2>
+    <p>
+      Join our community <a href="https://aka.ms/typespec/discord">Discord Server</a> to connect with
+      other developers using TypeSpec.
+    </p>
+
+    <h2 style="color: #4A90E2;">Discussion</h2>
+    <p>
+      Ask questions on <a href="https://github.com/microsoft/typespec/discussions"
+        >Github Discussion</a
+      >.
+    </p>
+  </div>
+</BaseLayout>

website/src/pages/index.astro

@@ -7,7 +7,7 @@ import OverviewIllustration from "../components/homepage/overview-illustration.a
 import { Links } from "../constants";
 import Section from "../components/section.astro";
 import FeatureList from "../components/feature-list.astro";
-import { link } from "@typespec/astro-utils/utils/link";
+import { link } from "../utils/index";
 import ExtensibilityIllustration from "../components/homepage/extensibility-illustration.astro";
 import LightDarkImg from "../components/light-dark-img.astro";
 import OpenAPI3HeroIllustration from "@site/src/components/homepage/openapi3-hero-illustration.astro";
@@ -53,6 +53,14 @@ import Button from "../components/button.astro";
     align-self: stretch;
   }
 
+  .overview-summary .primary-text {
+    font-size: 2em; /* Make the text 2x larger */
+  }
+
+  .overview-description {
+    text-align: center; /* Center the paragraph */
+  }
+
   .closing {
     display: flex;
     padding: 80px 60px;
@@ -88,7 +96,7 @@ import Button from "../components/button.astro";
   <SectionedLayout>
     <div class="overview">
       <div class="overview-summary">
-        <PrimaryText>Why TypeSpec</PrimaryText>
+        <PrimaryText className="primary-text">Why TypeSpec</PrimaryText>
         <div class="overview-subtitle">API-First for developers</div>
         <DescriptionText size="large" className="overview-description">
           With TypeSpec, remove the handwritten files that slow you down, and generate