docs: further design revisions

Author: dkundel-openai

docs/astro.config.mjs

@@ -332,11 +332,6 @@ export default defineConfig({
         },
       },
       social: [
-        {
-          icon: 'github',
-          href: 'https://github.com/openai/openai-agents-js',
-          label: 'openai-agents-js',
-        },
         {
           icon: 'seti:python',
           href: 'https://github.com/openai/openai-agents-python',
@@ -349,7 +344,7 @@ export default defineConfig({
       plugins,
       sidebar,
       expressiveCode: {
-        themes: ['dracula', 'one-light'],
+        themes: ['houston', 'one-light'],
       },
       customCss: ['./src/styles/global.css'],
     }),

docs/src/components/PageTitle.astro

@@ -20,7 +20,7 @@ if (isHomepage && idx !== -1) {
 
 {
   isHomepage ? (
-    <h1 id="_top">
+    <h1 id="_top" class="sr-only">
       {beforeKeyword}
       {hasKeyword ? <span class="keyword">{keyword}</span> : ''}
       {afterKeyword}

docs/src/components/SocialIcons.astro

@@ -9,7 +9,7 @@ const links = config.social || [];
   links.length > 0 && (
     <>
       {links.map(({ label, href, icon }) => (
-        <a {href} rel="me" class="sl-flex">
+        <a {href} target="_blank" rel="noopener noreferrer" class="sl-flex">
           <Icon name={icon} />
           <span>{label}</span>
         </a>

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

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.
 ---
 

docs/src/styles/global.css

@@ -183,7 +183,8 @@
   }
 
   .content-panel:first-of-type {
-    padding-top: var(--sl-content-pad-x) !important;
+    /* padding-top: var(--sl-content-pad-x) !important; */
+    padding-top: 1.5rem !important;
   }
 
   .content-panel {
@@ -205,6 +206,10 @@
     color: var(--openai-title-color) !important;
   }
 
+  .social-icons::after {
+    border: none !important;
+  }
+
   .main-pane {
     background-color: var(--openai-background);
     border-top-left-radius: 8px;
@@ -292,7 +297,8 @@
   }
 
   .right-sidebar-panel {
-    padding-top: var(--sl-content-pad-x) !important;
+    /* padding-top: var(--sl-content-pad-x) !important; */
+    padding-top: 2.5rem !important;
   }
 
   starlight-toc {
@@ -326,6 +332,11 @@
 
   .sidebar {
     --sl-color-hairline-shade: rgba(0, 0, 0, 0) !important;
+
+    .sidebar-content {
+      padding-top: 2rem;
+    }
+
     a[aria-current='page'] {
       color: var(--openai-primary) !important;
       font-weight: 500 !important;
@@ -357,8 +368,11 @@
     }
 
     ul.top-level > li > details > summary {
+      justify-content: flex-start !important;
+
       svg {
         color: var(--openai-nav-category-text) !important;
+        align-self: flex-end;
       }
 
       span {
@@ -414,7 +428,11 @@
 
   .sl-markdown-content {
     .expressive-code .ec-line {
-      line-height: 1.2rem;
+      line-height: 0.5rem;
+
+      &:has(.code *:is(span)) {
+        line-height: 1.2rem;
+      }
     }
   }
 
@@ -442,7 +460,6 @@
     .openai-hero-code {
       margin-bottom: var(--hero-padding);
       margin-inline-start: calc(var(--hero-padding) - 1rem);
-      margin-inline-end: var(--hero-padding);
 
       @media (min-width: 72rem) {
         margin-bottom: 0rem;
@@ -456,7 +473,8 @@
       font-size: var(--sl-text-xs);
       border-radius: 0;
       &[aria-selected='true'] {
-        color: var(--openai-primary);
+        color: var(--openai-text-primary);
+        /* color: var(--openai-primary); */
         font-weight: 500;
         border-bottom: 0;
       }
@@ -476,6 +494,7 @@
       min-width: 15rem;
 
       @media (min-width: 72rem) {
+        padding-inline-end: 0;
         max-width: 20rem;
       }
       color: var(--openai-title-color) !important;

examples/docs/toppage/textAgent.ts

@@ -9,4 +9,5 @@ const result = await run(
   agent,
   'Write a haiku about recursion in programming.',
 );
+
 console.log(result.finalOutput);