feat(2.0): update minor style nits across docs (#206)

langchain-ai · May 3, 2024 · 1eaa4f3 · 1eaa4f3
2 parents 3e2921a + 019e269
commit 1eaa4f3
Show file tree

Hide file tree

Showing 20 changed files with 227 additions and 37 deletions.
diff --git a/docs/evaluation/migration.mdx b/docs/evaluation/migration.mdx
@@ -175,7 +175,7 @@ def predict(inputs: dict):
     return my_pipeline.invoke(inputs)
 ```
 
-####4. If you were using LangChain evaluators, wrap them with `LangChainStringEvaluator`:
+#### 4. If you were using LangChain evaluators, wrap them with `LangChainStringEvaluator`:
 
 ```python
 from langsmith.evaluation import LangChainStringEvaluator

diff --git a/docs/index.mdx b/docs/index.mdx
@@ -53,7 +53,7 @@ We offer Python and Typescript SDKs for all your LangSmith needs.
 
 ## Create an API key
 
-To create an API key head to the [setting pages](https://smith.langchain.com/settings). Then click **Create API Key.**
+To create an API key head to the [Settings page](https://smith.langchain.com/settings). Then click **Create API Key.**
 
 ## Setup your environment
 

diff --git a/docs/tracing/quick_start.mdx b/docs/tracing/quick_start.mdx
@@ -16,6 +16,7 @@ import {
   ConfigureSDKEnvironmentCodeTabs,
 } from "@site/src/components/QuickStart";
 import { ClientInstallationCodeTabs } from "@site/src/components/ClientInstallation";
+import { CodeTabs, shell } from "@site/src/components/InstructionsWithCode";
 
 # Tracing Quick Start
 
@@ -36,9 +37,7 @@ First, create an API key by navigating to the <a href="https://smith.langchain.c
   <TabItem value="python-sdk">
     <h2>1. Install the LangSmith library</h2>
     <p>Start by installing the Python library.</p>
-    <pre>
-      <code>pip install langsmith</code>
-    </pre>
+    <CodeTabs tabs={[shell`pip install langsmith`]} />
     <h2>2. Configure your environment</h2>
     <ConfigureSDKEnvironmentCodeTabs />
     <h2>3. Log a trace</h2>
@@ -65,13 +64,14 @@ First, create an API key by navigating to the <a href="https://smith.langchain.c
   <TabItem value="typescript-sdk">
     <h2>1. Install the LangSmith library</h2>
     <p>Start by installing the TypeScript library.</p>
-    <pre>
-      <code>npm install langsmith</code>
-    </pre>
-    or
-    <pre>
-      <code>yarn add langsmith</code>
-    </pre>
+    <CodeTabs
+      tabs={[
+        shell({ value: "npm", label: "npm" })`npm install langsmith`,
+        shell({ value: "yarn", label: "yarn" })`yarn add langsmith`,
+        shell({ value: "pnpm", label: "pnpm" })`pnpm add langsmith`,
+        shell({ value: "bun", label: "bun" })`bun add langsmith`,
+      ]}
+    />
     <h2>2. Configure your environment</h2>
     <ConfigureSDKEnvironmentCodeTabs />
     <h2>3. Log a Trace</h2>
@@ -95,6 +95,7 @@ First, create an API key by navigating to the <a href="https://smith.langchain.c
         here
       </a>.
     </p>
+
   </TabItem>
   <TabItem value="langchain">
     <h2>1. Install or upgrade LangChain</h2>

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -68,7 +68,12 @@ const config = {
             defaultSidebarItemsGenerator,
             ...args
           }) {
-            const sidebarItems = await defaultSidebarItemsGenerator(args);
+            let sidebarItems = await defaultSidebarItemsGenerator(args);
+
+            sidebarItems = sidebarItems.filter(
+              (i) => !(i.type === "doc" && i.id.split("/").at(-1) === "index")
+            );
+
             sidebarItems.forEach((subItem) => {
               // This allows breaking long sidebar labels into multiple lines
               // by inserting a zero-width space after each slash.

diff --git a/src/components/InstructionsWithCode.js b/src/components/InstructionsWithCode.js
@@ -61,6 +61,7 @@ export function ShellBlock(content, value = "shell", label = "Shell") {
     value,
     label,
     content,
+    language: "shell",
   };
 }
 
@@ -93,13 +94,14 @@ function formatCode(code, language) {
 
 export function CodeTabs({ tabs, groupId }) {
   return (
-    <Tabs groupId={groupId}>
+    <Tabs groupId={groupId} className="code-tabs">
       {tabs.map((tab, index) => {
         const key = `${groupId}-${index}`;
         return (
           <TabItem key={key} value={tab.value} label={tab.label}>
             {tab.caption && (
               <div
+                className="code-caption"
                 // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{
                   __html: DOMPurify.sanitize(marked.parse(tab.caption)),
@@ -134,3 +136,27 @@ export const python = (strings, ...values) => {
   });
   return PythonBlock(dedent(result));
 };
+
+export const shell = (strings, ...values) => {
+  if (
+    values.length === 0 &&
+    typeof strings === "object" &&
+    strings != null &&
+    !Array.isArray(strings)
+  ) {
+    const { value, label } = strings;
+    return (innerStrings, ...innerValues) => {
+      let result = "";
+      innerStrings.forEach((string, i) => {
+        result += string + String(innerValues[i] ?? "");
+      });
+      return ShellBlock(dedent(result), value ?? undefined, label ?? undefined);
+    };
+  }
+
+  let result = "";
+  strings.forEach((string, i) => {
+    result += string + String(values[i] ?? "");
+  });
+  return ShellBlock(dedent(result));
+};
diff --git a/src/components/QuickStart.js b/src/components/QuickStart.js
@@ -223,7 +223,7 @@ const model = new ChatOpenAI({
 await model.invoke("Hello, world!", { callbacks: [tracer] })`;
 
   return (
-    <Tabs groupId="client-language">
+    <Tabs groupId="client-language" className="code-tabs">
       <TabItem key="python" value="python" label="Python">
         <CodeBlock className="python" language="python">
           {`from langchain_openai import ChatOpenAI

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -14,13 +14,13 @@
  */
 
 @font-face {
-  font-family: 'Manrope';
-  src: url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
+  font-family: "Manrope";
+  src: url("/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'Public Sans';
-  src: url('/fonts/PublicSans-VariableFont_wght.ttf') format('truetype');
+  font-family: "Public Sans";
+  src: url("/fonts/PublicSans-VariableFont_wght.ttf") format("truetype");
 }
 
 /* You can override the default Infima variables here. */
@@ -49,8 +49,12 @@
   --docusaurus-highlighted-code-line-bg: var(--joy-palette-primary-800);
 }
 
-nav, h1, h2, h3, h4 {
-  font-family: 'Manrope';
+nav,
+h1,
+h2,
+h3,
+h4 {
+  font-family: "Manrope";
 }
 
 html[data-theme="dark"] {
@@ -110,10 +114,45 @@ html[data-theme="dark"] {
   z-index: 1;
 }
 
+.menu__list {
+  display: flex !important;
+  flex-direction: column;
+  gap: 0.125rem;
+
+  position: relative;
+}
+
+.menu__list:not(.theme-doc-sidebar-menu) {
+  padding-left: 1.125rem !important;
+}
+
+.menu__list::before {
+  content: "";
+  width: 1px;
+  left: 0.75rem;
+  top: 0.125rem;
+  bottom: 0.125rem;
+
+  position: absolute;
+
+  background-color: var(--joy-palette-divider);
+}
+
+.theme-doc-sidebar-menu.menu__list::before {
+  display: none;
+}
+
+.menu__link {
+  padding-left: 0.5rem;
+}
+
 .theme-doc-sidebar-menu > .theme-doc-sidebar-item-category:not(:first-of-type),
 .theme-doc-sidebar-menu > .theme-doc-sidebar-item-link,
-.theme-doc-sidebar-menu > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-1:not(:first-of-type) {
-  margin-top: .5rem;
+.theme-doc-sidebar-menu
+  > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-1:not(
+    :first-of-type
+  ) {
+  margin-top: 0.125rem;
 }
 
 .theme-doc-sidebar-menu .theme-doc-sidebar-item-link,
@@ -132,8 +171,9 @@ html[data-theme="dark"] {
   margin-top: 0;
 }
 
-.theme-doc-sidebar-item-category, .theme-doc-sidebar-menu > .theme-doc-sidebar-item-link {
-  font-size: 1rem;
+.theme-doc-sidebar-item-category,
+.theme-doc-sidebar-item-link {
+  font-size: 0.9rem !important;
   font-weight: 500;
 }
 
@@ -142,8 +182,9 @@ html[data-theme="dark"] {
   width: 1.25rem;
 }
 
-.theme-doc-sidebar-item-link, .theme-doc-sidebar-item-category .theme-doc-sidebar-item-category {
-  font-size: .9rem;
+.theme-doc-sidebar-item-link,
+.theme-doc-sidebar-item-category .theme-doc-sidebar-item-category {
+  font-size: 0.9rem;
   font-weight: 500;
 }
 
@@ -162,19 +203,25 @@ html[data-theme="dark"] {
   opacity: 0.5;
 }
 
+.markdown > h1 {
+  margin-top: 1rem;
+  margin-bottom: 1rem !important;
+  font-size: 2.5rem !important;
+}
+
 .markdown > h2 {
-  margin-top: 3rem;
+  margin-top: 2.5rem;
   border-bottom-color: var(--ifm-color-primary);
   border-bottom-width: 2px;
-  padding-bottom: 1rem;
+  font-size: 1.8rem !important;
 }
 
 .markdown > :not(h2) + h3 {
-  margin-top: 4rem;
+  margin-top: 2.5rem;
 }
 
 .markdown > h4 {
-  margin-bottom: 0.2rem;
+  margin-bottom: 1rem;
   font-weight: 600;
 }
 
@@ -191,3 +238,76 @@ html[data-theme="dark"] {
 .DocSearch {
   width: 250px;
 }
+
+.card {
+  padding: 1.5rem !important;
+  box-shadow: none !important;
+}
+
+.theme-code-block {
+  border-color: var(--joy-palette-divider) !important;
+  padding-left: 0 !important;
+}
+
+.theme-code-block::before {
+  display: none !important;
+}
+
+.tabs-container > .code-tabs + div {
+  margin-top: 0 !important;
+  box-shadow: none !important;
+}
+
+.tabs-container > .code-tabs {
+  border: 1px solid var(--joy-palette-divider);
+  border-bottom: none;
+  border-top-left-radius: var(--ifm-code-border-radius);
+  border-top-right-radius: var(--ifm-code-border-radius);
+}
+
+.tabs-container > .code-tabs > [role="tab"] {
+  padding: 0.5rem 1rem !important;
+}
+
+.tabs-container > .code-tabs + div .theme-code-block {
+  box-shadow: none !important;
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+}
+
+.tabs-container > .code-tabs + div .code-caption {
+  border: 1px solid var(--joy-palette-divider);
+  border-bottom: none;
+  padding: 1rem;
+}
+
+.tabs-container > .code-tabs + div .code-caption p:last-child {
+  margin-bottom: 0;
+}
+
+.tabs-container:has(> .code-tabs) {
+  box-shadow: var(--ifm-global-shadow-lw);
+  border-radius: var(--ifm-code-border-radius);
+}
+
+.menu__list-item > .menu__list {
+  transition: all 0.2s ease-in-out !important;
+}
+
+.menu__list-item:not(.menu__list-item--collapsed) > .menu__list {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.menu__list-item.menu__list-item--collapsed > .menu__list {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* prefers reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .menu__list-item > .menu__list {
+    transition: none !important;
+    opacity: 1 !important;
+  }
+}
diff --git a/src/theme/Feedback.js b/src/theme/Feedback.js
@@ -178,7 +178,7 @@ export default function Feedback() {
       paddingBottom: "10px",
       paddingLeft: "22px",
       paddingRight: "22px",
-      border: "1px solid gray",
+      border: "1px solid var(--joy-palette-divider)",
       borderRadius: "6px",
       gap: "10px",
       cursor: "pointer",

diff --git a/versioned_docs/version-2.0/how_to_guides/datasets/_category_.json b/versioned_docs/version-2.0/how_to_guides/datasets/_category_.json
@@ -0,0 +1,5 @@
+{
+  "label": "Datasets",
+  "collapsed": true,
+  "collapsible": true
+}
diff --git a/versioned_docs/version-2.0/how_to_guides/evaluation/_category_.json b/versioned_docs/version-2.0/how_to_guides/evaluation/_category_.json
@@ -0,0 +1,5 @@
+{
+  "label": "Evaluation",
+  "collapsed": true,
+  "collapsible": true
+}
diff --git a/versioned_docs/version-2.0/how_to_guides/index.md b/versioned_docs/version-2.0/how_to_guides/index.md
@@ -1,5 +1,6 @@
 ---
-sidebar_position: 1
+sidebar_label: How-to guides
+sidebar_position: 0
 ---
 
 # How-to guides

diff --git a/versioned_docs/version-2.0/how_to_guides/setup/_category_.json b/versioned_docs/version-2.0/how_to_guides/setup/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "Setup",
+  "collapsed": true,
+  "collapsible": true,
+  "position": 1
+}