Skip to content

Commit 2742da7

Browse files
marcklingenmarcklingen
authored
docs: add llamaindex video and guides nav (langfuse#438)
1 parent 64e98f1 commit 2742da7

15 files changed

+121
-28
lines changed

‎components/VideoIndex.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { getPagesUnderRoute } from "nextra/context";
2+
import { type Page } from "nextra";
3+
import { Card, Cards } from "nextra-theme-docs";
4+
import { Video } from "lucide-react";
5+
6+
export const VideoIndex = () => (
7+
<Cards num={2}>
8+
{(
9+
getPagesUnderRoute("/guides/videos") as Array<Page & { frontMatter: any }>
10+
).map((page, i) => (
11+
<Card
12+
href={page.route}
13+
key={page.route}
14+
title={page.meta?.title || page.frontMatter?.title || page.name}
15+
icon={<Video />}
16+
arrow
17+
>
18+
{""}
19+
</Card>
20+
))}
21+
</Cards>
22+
);

‎cookbook/integration_llama-index.ipynb

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"cell_type": "markdown",
2121
"metadata": {},
2222
"source": [
23-
"This is a simple cookbook that demonstrates how to use the [LlamaIndex Langfuse integration](https://langfuse.com/docs/integrations/llama-index/get-started). It uses a very simple Index and Query."
23+
"This is a simple cookbook that demonstrates how to use the [LlamaIndex Langfuse integration](https://langfuse.com/docs/integrations/llama-index/get-started). It uses a very simple Index and Query. We've recorded a short [video](https://langfuse.com/guides/videos/llama-index) to show you how to use this cookbook."
2424
]
2525
},
2626
{

‎next.config.mjs

+3-2
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ const nonPermanentRedirects = [
5454
["/analytics", "https://docs.google.com/document/d/1PEFSqn-VWjNXOZZ1U7FC0oH-spDdkKJxLwgp15iK7zY"],
5555
["/discord", "https://discord.gg/7NXusRtqYU"],
5656
["/demo", "/docs/demo"],
57-
["/video", "/docs/video"],
57+
["/video", "/guides/videos/2-min"],
58+
["/docs/video", "/guides/videos/2-min"],
59+
["/roadmap", "/docs/roadmap"],
5860
["/ph", "https://www.producthunt.com/posts/langfuse"],
5961
["/loom-gpt4-PR", "https://www.loom.com/share/5c044ca77be44ff7821967834dd70cba"],
6062
["/issue", "https://github.com/langfuse/langfuse/issues/new/choose"],
@@ -120,7 +122,6 @@ const nonPermanentRedirects = [
120122
["/docs/schedule-demo", "/schedule-demo"],
121123
["/docs/project-sharing", "/docs/rbac"],
122124
["/docs/prompts", "/docs/prompts/get-started"],
123-
["/roadmap", "/docs/roadmap"],
124125
];
125126

126127
const permanentRedirects = []

‎pages/_meta.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
},
7171
"video": {
7272
"title": "Video (2 min)",
73-
"href": "/docs/video"
73+
"href": "/guides/videos/2-min"
7474
},
7575
"schedule-demo": {
7676
"title": "Schedule demo",

‎pages/blog/llama-index-integration.mdx

+13-7
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,17 @@ We want to thank the team at Llama Index for their guidance which helped make th
3838

3939
## Integrating Langfuse with Llama Index
4040

41-
<Frame>
42-
![Usage reporting in
43-
Langfuse](https://static.langfuse.com/llamaindex-langfuse-docs.gif)
44-
</Frame>
45-
_Integrating llama index with Langfuse observability - more info in [cookbook](/docs/integrations/llama-index/example-python)_
41+
import { CloudflareVideo } from "@/components/Video";
42+
43+
<CloudflareVideo
44+
videoId="0e68136ab943055101e74f1433ade583"
45+
aspectRatio={16 / 9.39}
46+
title="LlamaIndex Integration"
47+
/>
48+
<span>
49+
_Based on the [LlamaIndex
50+
Cookbook](/docs/integrations/llama-index/example-python)._
51+
</span>
4652

4753
Langfuse integrates with Llama Index via its **callback handler**. This makes getting set up as easy as:
4854

@@ -76,12 +82,12 @@ import { FileCode, BookOpen } from "lucide-react";
7682

7783
<Cards num={2}>
7884
<Card
79-
title="Coookbook: Llama Index"
85+
title="Coookbook: LlamaIndex Integration"
8086
href="/docs/integrations/llama-index/example-python"
8187
icon={<FileCode />}
8288
/>
8389
<Card
84-
title="Docs: Llama Index"
90+
title="Docs: LlamaIndex Integration"
8591
href="/docs/integrations/llama-index/get-started"
8692
icon={<BookOpen />}
8793
/>

‎pages/changelog/2024-02-27-llama-index-integration.mdx

+8-4
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,17 @@ import GetStartedLlamaindexPythonArgs from "@/components-mdx/get-started-llamain
2727

2828
Done! ✨ Traces and metrics from your LlamaIndex application are now automatically tracked in Langfuse.
2929

30-
### 🪢 LlamaIndex Trace in Langfuse
30+
### Tutorial
3131

3232
<CloudflareVideo
33-
videoId="590b7c143b13a0f4e40bd181175f1a00"
34-
aspectRatio={16 / 9.86}
35-
gifStyle
33+
videoId="0e68136ab943055101e74f1433ade583"
34+
aspectRatio={16 / 9.39}
35+
title="LlamaIndex Integration"
3636
/>
37+
<span>
38+
_Based on the [LlamaIndex
39+
Cookbook](/docs/integrations/llama-index/example-python)._
40+
</span>
3741

3842
### 📚 More details
3943

‎pages/docs/_meta.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"-- Docs": {
2+
"-- Switcher": {
33
"type": "separator",
4-
"title": "Docs"
4+
"title": "Switcher"
55
},
66
"index": "Overview",
77
"get-started": "Quickstart",

‎pages/docs/integrations/llama-index/example-python.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Example cookbook for the LlamaIndex Langfuse integration.
44

55
# Cookbook LlamaIndex Integration
66

7-
This is a simple cookbook that demonstrates how to use the [LlamaIndex Langfuse integration](https://langfuse.com/docs/integrations/llama-index/get-started). It uses a very simple Index and Query.
7+
This is a simple cookbook that demonstrates how to use the [LlamaIndex Langfuse integration](https://langfuse.com/docs/integrations/llama-index/get-started). It uses a very simple Index and Query. We've recorded a short [video](https://langfuse.com/guides/videos/llama-index) to show you how to use this cookbook.
88

99
**Any feedback?** Let us know on Discord or GitHub. This is a new integration, and we'd love to hear your thoughts.
1010

‎pages/docs/integrations/llama-index/get-started.mdx

+4-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ import { CloudflareVideo } from "@/components/Video";
2525
aspectRatio={16 / 9.86}
2626
gifStyle
2727
/>
28-
<span>_Example LlamaIndex trace in Langfuse_</span>
28+
<span>
29+
_Example LlamaIndex trace in Langfuse. See a full video demo
30+
[here](/guides/videos/llama-index)._
31+
</span>
2932

3033
## Add Langfuse to your LlamaIndex application
3134

‎pages/guides/_meta.json

+4-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
{
2-
"docs": {
3-
"title": "Docs ↗",
4-
"href": "/docs"
5-
},
6-
"-- Guides": {
2+
"-- Switcher": {
73
"type": "separator",
8-
"title": "Guides"
4+
"title": "Switcher"
95
},
106
"index": "Overview",
11-
"cookbook": "Cookbooks"
7+
"cookbook": "Cookbooks",
8+
"videos": "Videos"
129
}

‎pages/guides/cookbook/integration_llama-index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Example cookbook for the LlamaIndex Langfuse integration.
44

55
# Cookbook LlamaIndex Integration
66

7-
This is a simple cookbook that demonstrates how to use the [LlamaIndex Langfuse integration](https://langfuse.com/docs/integrations/llama-index/get-started). It uses a very simple Index and Query.
7+
This is a simple cookbook that demonstrates how to use the [LlamaIndex Langfuse integration](https://langfuse.com/docs/integrations/llama-index/get-started). It uses a very simple Index and Query. We've recorded a short [video](https://langfuse.com/guides/videos/llama-index) to show you how to use this cookbook.
88

99
**Any feedback?** Let us know on Discord or GitHub. This is a new integration, and we'd love to hear your thoughts.
1010

‎pages/guides/index.mdx

+6
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,9 @@ You can find the `ipynb` files in the [`cookbook`](https://github.com/langfuse/l
1919
import { CookbookIndex } from "@/components/CookbookIndex";
2020

2121
<CookbookIndex />
22+
23+
## Video Tutorials
24+
25+
import { VideoIndex } from "@/components/VideoIndex";
26+
27+
<VideoIndex />

‎pages/docs/video.mdx renamed to ‎pages/guides/videos/2-min.mdx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
title: Langfuse in 2 Minutes
23
description: Walkthrough of the Langfuse platform in 2 minutes
34
---
45

@@ -11,4 +12,4 @@ import { CloudflareVideo } from "@/components/Video";
1112
aspectRatio={1.71}
1213
/>
1314

14-
_Want to explore the UI? [Try it yourself](/docs/demo). More questions? [Schedule a demo](/schedule-demo) with one of the founders._
15+
<span>_Want to explore the UI? [Try it yourself](/docs/demo)._</span>

‎pages/guides/videos/llama-index.mdx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: LlamaIndex Integration
3+
description: Video walkthrough of integrating LlamaIndex with Langfuse Tracing
4+
---
5+
6+
# Tutorial: LlamaIndex Integration
7+
8+
import { CloudflareVideo } from "@/components/Video";
9+
10+
<CloudflareVideo
11+
videoId="0e68136ab943055101e74f1433ade583"
12+
aspectRatio={16 / 9.39}
13+
title="LlamaIndex Integration"
14+
/>
15+
<span>
16+
_Based on the [LlamaIndex
17+
Cookbook](/docs/integrations/llama-index/example-python)._
18+
</span>

‎theme.config.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import { COOKBOOK_ROUTE_MAPPING } from "./lib/cookbook_route_mapping";
1818
import { GeistSans } from "geist/font/sans";
1919
import IconDiscord from "./components/icons/discord";
2020
import FooterMenu from "./components/FooterMenu";
21+
import Link from "next/link";
22+
import { FileCode, LibraryBig } from "lucide-react";
2123

2224
const config: DocsThemeConfig = {
2325
logo: <Logo />,
@@ -65,6 +67,39 @@ const config: DocsThemeConfig = {
6567
sidebar: {
6668
defaultMenuCollapseLevel: 1,
6769
toggleButton: true,
70+
titleComponent: ({ type, title, route }) => {
71+
const { asPath } = useRouter();
72+
if (type === "separator" && title === "Switcher") {
73+
return (
74+
<div className="-mx-2">
75+
{[
76+
{ title: "Docs", path: "/docs", Icon: LibraryBig },
77+
{ title: "Guides", path: "/guides", Icon: FileCode },
78+
].map((item) =>
79+
asPath.startsWith(item.path) ? (
80+
<div
81+
key={item.path}
82+
className="group mb-3 flex flex-row items-center gap-3 nx-text-primary-800 dark:nx-text-primary-600"
83+
>
84+
<item.Icon className="w-7 h-7 p-1 border rounded nx-bg-primary-100 dark:nx-bg-primary-400/10" />
85+
{item.title}
86+
</div>
87+
) : (
88+
<Link
89+
href={item.path}
90+
key={item.path}
91+
className="group mb-3 flex flex-row items-center gap-3 text-gray-500 hover:text-primary/100"
92+
>
93+
<item.Icon className="w-7 h-7 p-1 border rounded group-hover:bg-border/30" />
94+
{item.title}
95+
</Link>
96+
)
97+
)}
98+
</div>
99+
);
100+
}
101+
return title;
102+
},
68103
},
69104
editLink: {
70105
text: "Edit this page on GitHub",

0 commit comments

Comments
 (0)