openai · dkundel-openai · Jun 9, 2025 · Jun 9, 2025 · Jun 9, 2025 · Jun 9, 2025
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -317,6 +317,10 @@ export default defineConfig({
       title: 'OpenAI Agents SDK',
       components: {
         SiteTitle: './src/components/Title.astro',
+        PageTitle: './src/components/PageTitle.astro',
+        SocialIcons: './src/components/SocialIcons.astro',
+        Sidebar: './src/components/Sidebar.astro',
+        MobileMenuFooter: './src/components/MobileFooter.astro',
       },
       //   defaultLocale: 'root',
       locales: {
@@ -330,20 +334,10 @@ export default defineConfig({
         },
       },
       social: [
-        {
-          icon: 'x.com',
-          href: 'https://x.com/OpenAIDevs',
-          label: 'OpenAI on X',
-        },
-        {
-          icon: 'github',
-          href: 'https://github.com/openai/openai-agents-js',
-          label: 'Agents SDK on GitHub',
-        },
         {
           icon: 'seti:python',
           href: 'https://github.com/openai/openai-agents-python',
-          label: 'Agents SDK for Python',
+          label: 'Python SDK',
         },
       ],
       editLink: {
@@ -352,7 +346,7 @@ export default defineConfig({
       plugins,
       sidebar,
       expressiveCode: {
-        themes: ['dracula', 'one-light'],
+        themes: ['houston', 'one-light'],
       },
       customCss: ['./src/styles/global.css'],
     }),

diff --git a/docs/src/components/MobileFooter.astro b/docs/src/components/MobileFooter.astro
@@ -0,0 +1,80 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro';
+import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';
+import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro';
+import { ParseStatus } from 'astro:schema';
+
+const additionalLinks = [
+  {
+    label: 'View on GitHub',
+    href: 'https://github.com/openai/openai-agents-js',
+    icon: 'github' as const,
+  },
+  {
+    label: 'View on npm',
+    href: 'https://www.npmjs.com/package/@openai/agents',
+    icon: 'npm' as const,
+  },
+];
+---
+
+<div class="mobile-preferences sl-flex">
+  <div class="social-icons">
+    <SocialIcons />
+    {
+      additionalLinks.map(({ label, href, icon }) => (
+        <a {href} target="_blank" rel="noopener noreferrer" class="sl-flex">
+          <Icon name={icon as any} />
+          <span>{label}</span>
+        </a>
+      ))
+    }
+  </div>
+  <ThemeSelect />
+  <LanguageSelect />
+</div>
+
+<style>
+  @layer starlight.core {
+    .social-icons {
+      display: flex;
+      margin-inline-end: auto;
+      gap: 1rem;
+      align-items: center;
+      padding-block: 1rem;
+    }
+    .social-icons:empty {
+      display: none;
+    }
+    .mobile-preferences {
+      justify-content: space-between;
+      flex-wrap: wrap;
+      border-top: 1px solid var(--sl-color-gray-6);
+      column-gap: 1rem;
+      padding: 0.5rem 0;
+    }
+
+    .social-icons a {
+      color: var(--sl-color-text-accent);
+      padding: 0.5em;
+      margin: -0.5em;
+      text-decoration: none;
+      align-items: center;
+
+      span {
+        font-size: var(--sl-text-sm);
+        margin-inline-start: 0.3rem;
+      }
+
+      @media (max-width: 72rem) {
+        span {
+          @apply sr-only;
+        }
+      }
+    }
+    a:hover {
+      opacity: 0.66;
+    }
+  }
+</style>
diff --git a/docs/src/components/PageTitle.astro b/docs/src/components/PageTitle.astro
@@ -0,0 +1,47 @@
+---
+import Default from '@astrojs/starlight/components/PageTitle.astro';
+
+const isHomepage =
+  Astro.locals.starlightRoute.id === '' ||
+  Astro.locals.starlightRoute.id === Astro.locals.starlightRoute.lang;
+const rawTitle = Astro.locals.starlightRoute.entry.data.title;
+const keyword = 'TypeScript';
+const idx = rawTitle.indexOf(keyword);
+let beforeKeyword = rawTitle;
+let afterKeyword = '';
+let hasKeyword = false;
+
+if (isHomepage && idx !== -1) {
+  beforeKeyword = rawTitle.slice(0, idx);
+  afterKeyword = rawTitle.slice(idx + keyword.length);
+  hasKeyword = true;
+}
+---
+
+{
+  isHomepage ? (
+    <h1 id="_top" class="sr-only">
+      {beforeKeyword}
+      {hasKeyword ? <span class="keyword">{keyword}</span> : ''}
+      {afterKeyword}
+    </h1>
+  ) : (
+    <Default />
+  )
+}
+
+<style>
+  @layer starlight.core {
+    h1 {
+      margin-top: 1rem;
+      font-size: var(--sl-text-h1);
+      line-height: var(--sl-line-height-headings);
+      font-weight: 600;
+      color: var(--sl-color-white);
+    }
+
+    .keyword {
+      color: var(--openai-primary);
+    }
+  }
+</style>
diff --git a/docs/src/components/Sidebar.astro b/docs/src/components/Sidebar.astro
@@ -0,0 +1,26 @@
+---
+import { Icon } from '@astrojs/starlight/components';
+import Default from '@astrojs/starlight/components/Sidebar.astro';
+// const { sidebar } = Astro.locals.starlightRoute;
+---
+
+<Default />
+
+<div class="openai-github-link sl-hidden md:sl-flex flex-col gap-5">
+  <a
+    href="https://github.com/openai/openai-agents-js"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <Icon name="github" />
+    <span>View on GitHub</span>
+  </a>
+  <a
+    href="https://www.npmjs.com/package/@openai/agents"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <Icon name="npm" />
+    <span>View on npm</span>
+  </a>
+</div>
diff --git a/docs/src/components/SocialIcons.astro b/docs/src/components/SocialIcons.astro
@@ -0,0 +1,45 @@
+---
+import config from 'virtual:starlight/user-config';
+import { Icon } from '@astrojs/starlight/components';
+
+const links = config.social || [];
+---
+
+{
+  links.length > 0 && (
+    <>
+      {links.map(({ label, href, icon }) => (
+        <a {href} target="_blank" rel="noopener noreferrer" class="sl-flex">
+          <Icon name={icon} />
+          <span>{label}</span>
+        </a>
+      ))}
+    </>
+  )
+}
+
+<style>
+  @layer starlight.core {
+    a {
+      color: var(--sl-color-text-accent);
+      padding: 0.5em;
+      margin: -0.5em;
+      text-decoration: none;
+      align-items: center;
+
+      span {
+        font-size: var(--sl-text-sm);
+        margin-inline-start: 0.3rem;
+      }
+
+      @media (max-width: 72rem) {
+        span {
+          @apply sr-only;
+        }
+      }
+    }
+    a:hover {
+      opacity: 0.66;
+    }
+  }
+</style>
diff --git a/docs/src/components/Title.astro b/docs/src/components/Title.astro
@@ -1,5 +1,8 @@
 ---
 import Logo from './Logo.astro';
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
 ---
 
-<Logo height="24" alt="OpenAI Agents SDK" />
+<a href={siteTitleHref} class="site-title sl-flex">
+  <Logo height="24" alt={siteTitle} />
+</a>
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: OpenAI Agents SDK for TypeScript
+title: OpenAI Agents SDK TypeScript
 description: The OpenAI Agents SDK for TypeScript enables you to build agentic AI apps in a lightweight, easy-to-use package with very few abstractions.
 ---
 
@@ -15,6 +15,8 @@ import helloWorldExample from '../../../../examples/docs/hello-world.ts?raw';
   <Fragment slot="cta">Let's build</Fragment>
 </Hero>
 
+## Overview
+
 The [OpenAI Agents SDK for TypeScript](https://github.com/openai/openai-agents-js)
 enables you to build agentic AI apps in a lightweight, easy-to-use package with
 very few abstractions. It's a production-ready upgrade of our previous

diff --git a/docs/src/content/docs/ja/index.mdx b/docs/src/content/docs/ja/index.mdx
@@ -1,5 +1,5 @@
 ---
-title: OpenAI Agents SDK for TypeScript
+title: OpenAI Agents SDK TypeScript
 description: The OpenAI Agents SDK for TypeScript enables you to build agentic AI apps in a lightweight, easy-to-use package with very few abstractions.
 ---