mirror of
https://github.com/deepset-ai/haystack.git
synced 2026-10-12 02:12:50 +00:00
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 5112f2da06.
* fix: table css responsiveness
---------
Co-authored-by: Stefano Fiorucci <[email protected]>
This commit is contained in:
Sriniketh J
co-authored by
Stefano Fiorucci
Stefano Fiorucci
parent
8d22008fd1
commit
bd0b4b1aa2
@@ -389,6 +389,16 @@ For transparent PNGs that need better visibility in dark mode, add a background
|
||||
</div>
|
||||
```
|
||||
|
||||
**Youtube Embed**
|
||||
|
||||
For embedding YouTube videos, use the `YouTubeEmbed` component:
|
||||
|
||||
```mdx
|
||||
import YouTubeEmbed from "@site/src/components/YouTubeEmbed";
|
||||
|
||||
<YouTubeEmbed videoId="dQw4w9WgXcQ" title="Example Video" />
|
||||
```
|
||||
|
||||
## Pull Request Process
|
||||
|
||||
### Pull Request Checklist
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -68,15 +69,7 @@ These behaviors reduce the need for glue components like `Joiners` and `OutputAd
|
||||
|
||||
See [Smart Pipeline Connections](pipelines/smart-pipeline-connections.mdx) for details and examples.
|
||||
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "my-website",
|
||||
"name": "haystack-docs-website",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
// SPDX-FileCopyrightText: 2022-present deepset GmbH <[email protected]>
|
||||
//
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import React from "react";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
interface YouTubeEmbedProps {
|
||||
videoId: string;
|
||||
title?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function YouTubeEmbed({
|
||||
videoId,
|
||||
title = "YouTube video",
|
||||
className,
|
||||
}: YouTubeEmbedProps) {
|
||||
return (
|
||||
<div className={`${styles.wrapper} ${className || ""}`}>
|
||||
<div className={styles.aspectRatio}>
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
title={title}
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media; picture-in-picture"
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
className={styles.iframe}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* SPDX-FileCopyrightText: 2022-present deepset GmbH <[email protected]>
|
||||
*
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 16:9 ratio */
|
||||
.aspectRatio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Responsive iframe */
|
||||
.iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -146,11 +146,6 @@ button, .button {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
.pagination-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Top Navbar active state styling - using dc-docs approach with haystack-docs colors */
|
||||
.navbar__item.navbar__link--active,
|
||||
.navbar__item.navbar__link--active:hover {
|
||||
@@ -880,65 +875,51 @@ html[data-theme='dark'] .navbar__item.navbar-version-badge-dropdown:hover > .nav
|
||||
KEY-VALUE TABLE STYLING - Headerless Tables
|
||||
======================================== */
|
||||
|
||||
/* Hide header visually in key-value tables */
|
||||
.key-value-table {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.key-value-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Ensure wrapper doesn't overflow */
|
||||
.key-value-table {
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Force table to use full width and fixed layout */
|
||||
.key-value-table table {
|
||||
table-layout: fixed !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.key-value-table td {
|
||||
padding: 0.6rem 0.75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Style the first column (keys) as bold and nowrap */
|
||||
.key-value-table td:first-child {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
min-width: 180px;
|
||||
padding-right: 1rem;
|
||||
width: 30% !important;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* Style the second column (values) to wrap text properly */
|
||||
.key-value-table td:last-child {
|
||||
width: 70% !important;
|
||||
max-width: 0 !important; /* Force wrapping */
|
||||
white-space: normal !important;
|
||||
overflow-wrap: break-word !important;
|
||||
word-wrap: break-word !important;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Ensure content inside cells wraps properly */
|
||||
.key-value-table td:last-child * {
|
||||
white-space: normal !important;
|
||||
overflow-wrap: break-word !important;
|
||||
word-wrap: break-word !important;
|
||||
.key-value-table td a {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Ensure links wrap properly */
|
||||
.key-value-table td:last-child a {
|
||||
white-space: normal !important;
|
||||
word-break: break-all !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.key-value-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* General cell styling */
|
||||
.key-value-table td {
|
||||
vertical-align: top;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
/* Add subtle spacing between rows for readability */
|
||||
.key-value-table tr + tr td {
|
||||
padding-top: 0.4rem;
|
||||
.key-value-table table {
|
||||
min-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
---
|
||||
title: "Pipelines"
|
||||
id: pipelines
|
||||
sidebar_class_name: hidden-sidebar-item
|
||||
sidebar_position: 0
|
||||
slug: "/pipelines"
|
||||
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."
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -56,10 +59,7 @@ While the data (the initial query) flows through the entire pipeline, individual
|
||||
|
||||
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.
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
title="YouTube video player" frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -56,10 +57,7 @@ While the data (the initial query) flows through the entire pipeline, individual
|
||||
|
||||
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.
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
title="YouTube video player" frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -57,14 +58,7 @@ While the data (the initial query) flows through the entire pipeline, individual
|
||||
|
||||
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.
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -57,14 +58,7 @@ While the data (the initial query) flows through the entire pipeline, individual
|
||||
|
||||
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.
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -57,14 +58,7 @@ While the data (the initial query) flows through the entire pipeline, individual
|
||||
|
||||
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.
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -57,14 +58,7 @@ While the data (the initial query) flows through the entire pipeline, individual
|
||||
|
||||
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.
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -68,15 +69,7 @@ These behaviors reduce the need for glue components like `Joiners` and `OutputAd
|
||||
|
||||
See [Smart Pipeline Connections](pipelines/smart-pipeline-connections.mdx) for details and examples.
|
||||
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -68,15 +69,7 @@ These behaviors reduce the need for glue components like `Joiners` and `OutputAd
|
||||
|
||||
See [Smart Pipeline Connections](pipelines/smart-pipeline-connections.mdx) for details and examples.
|
||||
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -5,7 +5,8 @@ slug: "/pipelines"
|
||||
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."
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import ClickableImage from "@site/src/components/ClickableImage"
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -68,15 +69,7 @@ These behaviors reduce the need for glue components like `Joiners` and `OutputAd
|
||||
|
||||
See [Smart Pipeline Connections](pipelines/smart-pipeline-connections.mdx) for details and examples.
|
||||
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: "To build modern search pipelines with LLMs, you need two things: p
|
||||
---
|
||||
|
||||
import ClickableImage from "@site/src/components/ClickableImage";
|
||||
import YoutubeEmbed from "@site/src/components/YoutubeEmbed";
|
||||
|
||||
# Pipelines
|
||||
|
||||
@@ -68,15 +69,7 @@ These behaviors reduce the need for glue components like `Joiners` and `OutputAd
|
||||
|
||||
See [Smart Pipeline Connections](pipelines/smart-pipeline-connections.mdx) for details and examples.
|
||||
|
||||
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/SxAwyeCkguc"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
<YoutubeEmbed videoId="SxAwyeCkguc" title="Introduction to Haystack Pipelines" />
|
||||
|
||||
## Steps to Create a Pipeline Explained
|
||||
|
||||
|
||||
Reference in New Issue
Block a user