Skip to content

Commit bd0b4b1

Browse files
srini047anakin87
srini047
and
anakin87
authored
docs: haystack doc bug fixes (#11078)
* fix: remove video iframe * fix: md table repsonsive * docs: add responsive youtube video * docs: add support for pagination next/prev globally * docs: update contributing readme * Revert "fix: md table repsonsive" This reverts commit 5112f2d. * fix: table css responsiveness --------- Co-authored-by: Stefano Fiorucci <stefanofiorucci@gmail.com>
1 parent 8d22008 commit bd0b4b1

16 files changed

Lines changed: 125 additions & 132 deletions

File tree

‎docs-website/CONTRIBUTING.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,16 @@ For transparent PNGs that need better visibility in dark mode, add a background
389389
</div>
390390
```
391391

392+
**Youtube Embed**
393+
394+
For embedding YouTube videos, use the `YouTubeEmbed` component:
395+
396+
```mdx
397+
import YouTubeEmbed from "@site/src/components/YouTubeEmbed";
398+
399+
<YouTubeEmbed videoId="dQw4w9WgXcQ" title="Example Video" />
400+
```
401+
392402
## Pull Request Process
393403

394404
### Pull Request Checklist

‎docs-website/docs/concepts/pipelines.mdx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
66
---
77

88
import ClickableImage from "@site/src/components/ClickableImage";
9+
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
910

1011
# Pipelines
1112

@@ -68,15 +69,7 @@ These behaviors reduce the need for glue components like `Joiners` and `OutputAd
6869

6970
See [Smart Pipeline Connections](pipelines/smart-pipeline-connections.mdx) for details and examples.
7071

71-
72-
<iframe
73-
width="560"
74-
height="315"
75-
src="https://www.youtube.com/embed/SxAwyeCkguc"
76-
frameBorder="0"
77-
allow="autoplay; encrypted-media"
78-
allowFullScreen
79-
></iframe>
72+
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
8073

8174
## Steps to Create a Pipeline Explained
8275

‎docs-website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "my-website",
2+
"name": "haystack-docs-website",
33
"version": "0.0.0",
44
"private": true,
55
"scripts": {

‎docs-website/src/components/YoutubeEmbed/index.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// SPDX-FileCopyrightText: 2022-present deepset GmbH <info@deepset.ai>
2+
//
3+
// SPDX-License-Identifier: Apache-2.0
4+
5+
import React from "react";
6+
import styles from "./styles.module.css";
7+
8+
interface YouTubeEmbedProps {
9+
videoId: string;
10+
title?: string;
11+
className?: string;
12+
}
13+
14+
export default function YouTubeEmbed({
15+
videoId,
16+
title = "YouTube video",
17+
className,
18+
}: YouTubeEmbedProps) {
19+
return (
20+
<div className={`${styles.wrapper} ${className || ""}`}>
21+
<div className={styles.aspectRatio}>
22+
<iframe
23+
src={`https://www.youtube.com/embed/${videoId}`}
24+
title={title}
25+
frameBorder="0"
26+
allow="autoplay; encrypted-media; picture-in-picture"
27+
allowFullScreen
28+
loading="lazy"
29+
className={styles.iframe}
30+
/>
31+
</div>
32+
</div>
33+
);
34+
}

‎docs-website/src/components/YoutubeEmbed/styles.module.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* SPDX-FileCopyrightText: 2022-present deepset GmbH <info@deepset.ai>
2+
*
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
.wrapper {
7+
width: 100%;
8+
margin: 2rem auto;
9+
display: block;
10+
}
11+
12+
/* 16:9 ratio */
13+
.aspectRatio {
14+
position: relative;
15+
width: 100%;
16+
padding-bottom: 56.25%;
17+
height: 0;
18+
}
19+
20+
/* Responsive iframe */
21+
.iframe {
22+
position: absolute;
23+
top: 0;
24+
left: 0;
25+
width: 100%;
26+
height: 100%;
27+
border: 0;
28+
border-radius: 8px;
29+
}

‎docs-website/src/css/custom.css‎

Lines changed: 26 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -146,11 +146,6 @@ button, .button {
146146
border-radius: 8px;
147147
}
148148

149-
150-
.pagination-nav {
151-
display: none;
152-
}
153-
154149
/* Top Navbar active state styling - using dc-docs approach with haystack-docs colors */
155150
.navbar__item.navbar__link--active,
156151
.navbar__item.navbar__link--active:hover {
@@ -880,65 +875,51 @@ html[data-theme='dark'] .navbar__item.navbar-version-badge-dropdown:hover > .nav
880875
KEY-VALUE TABLE STYLING - Headerless Tables
881876
======================================== */
882877

883-
/* Hide header visually in key-value tables */
878+
.key-value-table {
879+
width: 100%;
880+
overflow-x: auto;
881+
}
882+
884883
.key-value-table thead {
885884
display: none;
886885
}
887886

888-
/* Ensure wrapper doesn't overflow */
889-
.key-value-table {
890-
overflow-x: auto;
891-
max-width: 100%;
887+
.key-value-table table {
888+
width: 100%;
889+
border-collapse: collapse;
890+
table-layout: auto;
892891
}
893892

894-
/* Force table to use full width and fixed layout */
895-
.key-value-table table {
896-
table-layout: fixed !important;
897-
width: 100% !important;
898-
max-width: 100% !important;
893+
.key-value-table td {
894+
padding: 0.6rem 0.75rem;
895+
vertical-align: top;
899896
}
900897

901-
/* Style the first column (keys) as bold and nowrap */
902898
.key-value-table td:first-child {
903899
font-weight: 600;
904-
white-space: nowrap;
900+
width: 1%;
901+
min-width: 180px;
905902
padding-right: 1rem;
906-
width: 30% !important;
907-
min-width: 200px;
908903
}
909904

910-
/* Style the second column (values) to wrap text properly */
911905
.key-value-table td:last-child {
912-
width: 70% !important;
913-
max-width: 0 !important; /* Force wrapping */
914-
white-space: normal !important;
915-
overflow-wrap: break-word !important;
916-
word-wrap: break-word !important;
917-
}
918-
919-
/* Ensure content inside cells wraps properly */
920-
.key-value-table td:last-child * {
921-
white-space: normal !important;
922-
overflow-wrap: break-word !important;
923-
word-wrap: break-word !important;
906+
white-space: normal;
907+
overflow-wrap: break-word;
908+
word-break: break-word;
924909
}
925910

926-
/* Ensure links wrap properly */
927-
.key-value-table td:last-child a {
928-
white-space: normal !important;
929-
word-break: break-all !important;
930-
overflow-wrap: break-word !important;
911+
.key-value-table td a {
912+
word-break: break-word;
931913
}
932914

933-
/* General cell styling */
934-
.key-value-table td {
935-
vertical-align: top;
936-
padding: 0.25rem 0.5rem;
937-
}
915+
@media (max-width: 600px) {
916+
.key-value-table {
917+
overflow-x: auto;
918+
}
938919

939-
/* Add subtle spacing between rows for readability */
940-
.key-value-table tr + tr td {
941-
padding-top: 0.4rem;
920+
.key-value-table table {
921+
min-width: 500px;
922+
}
942923
}
943924

944925
/* ========================================

‎docs-website/versioned_docs/version-2.18/concepts/pipelines.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
---
22
title: "Pipelines"
33
id: pipelines
4+
sidebar_class_name: hidden-sidebar-item
5+
sidebar_position: 0
46
slug: "/pipelines"
57
description: "To build modern search pipelines with LLMs, you need two things: powerful components and an easy way to put them together. The Haystack pipeline is built for this purpose and enables you to design and scale your interactions with LLMs."
68
---
79

810
import ClickableImage from "@site/src/components/ClickableImage";
11+
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
912

1013
# Pipelines
1114

@@ -56,10 +59,7 @@ While the data (the initial query) flows through the entire pipeline, individual
5659

5760
To connect components and integrations in a pipeline, you must know the names of their inputs and outputs. The output of one component must be accepted as input by the following component. When you connect components in a pipeline with `Pipeline.connect()`, it validates if the input and output types match.
5861

59-
<iframe width="560" height="315" src="https://www.youtube.com/embed/SxAwyeCkguc"
60-
title="YouTube video player" frameBorder="0"
61-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
62-
allowFullScreen></iframe>
62+
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
6363

6464
## Steps to Create a Pipeline Explained
6565

‎docs-website/versioned_docs/version-2.19/concepts/pipelines.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
66
---
77

88
import ClickableImage from "@site/src/components/ClickableImage";
9+
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
910

1011
# Pipelines
1112

@@ -56,10 +57,7 @@ While the data (the initial query) flows through the entire pipeline, individual
5657

5758
To connect components and integrations in a pipeline, you must know the names of their inputs and outputs. The output of one component must be accepted as input by the following component. When you connect components in a pipeline with `Pipeline.connect()`, it validates if the input and output types match.
5859

59-
<iframe width="560" height="315" src="https://www.youtube.com/embed/SxAwyeCkguc"
60-
title="YouTube video player" frameBorder="0"
61-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
62-
allowFullScreen></iframe>
60+
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
6361

6462
## Steps to Create a Pipeline Explained
6563

‎docs-website/versioned_docs/version-2.20/concepts/pipelines.mdx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
66
---
77

88
import ClickableImage from "@site/src/components/ClickableImage";
9+
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
910

1011
# Pipelines
1112

@@ -57,14 +58,7 @@ While the data (the initial query) flows through the entire pipeline, individual
5758

5859
To connect components and integrations in a pipeline, you must know the names of their inputs and outputs. The output of one component must be accepted as input by the following component. When you connect components in a pipeline with `Pipeline.connect()`, it validates if the input and output types match.
5960

60-
<iframe
61-
width="560"
62-
height="315"
63-
src="https://www.youtube.com/embed/SxAwyeCkguc"
64-
frameBorder="0"
65-
allow="autoplay; encrypted-media"
66-
allowFullScreen
67-
></iframe>
61+
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
6862

6963
## Steps to Create a Pipeline Explained
7064

‎docs-website/versioned_docs/version-2.21/concepts/pipelines.mdx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
66
---
77

88
import ClickableImage from "@site/src/components/ClickableImage";
9+
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
910

1011
# Pipelines
1112

@@ -57,14 +58,7 @@ While the data (the initial query) flows through the entire pipeline, individual
5758

5859
To connect components and integrations in a pipeline, you must know the names of their inputs and outputs. The output of one component must be accepted as input by the following component. When you connect components in a pipeline with `Pipeline.connect()`, it validates if the input and output types match.
5960

60-
<iframe
61-
width="560"
62-
height="315"
63-
src="https://www.youtube.com/embed/SxAwyeCkguc"
64-
frameBorder="0"
65-
allow="autoplay; encrypted-media"
66-
allowFullScreen
67-
></iframe>
61+
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
6862

6963
## Steps to Create a Pipeline Explained
7064

0 commit comments

Comments
 (0)