mirror of
https://github.com/open-webui/docs
synced 2025-06-16 11:28:36 +00:00
chore: consistent formatting using prettier
This commit is contained in:
Hichem Fantar
@@ -1,64 +1,64 @@
|
||||
import clsx from 'clsx';
|
||||
import Heading from '@theme/Heading';
|
||||
import styles from './styles.module.css';
|
||||
import clsx from "clsx";
|
||||
import Heading from "@theme/Heading";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
const FeatureList = [
|
||||
{
|
||||
title: 'Easy to Use',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus was designed from the ground up to be easily installed and
|
||||
used to get your website up and running quickly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Focus on What Matters',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus lets you focus on your docs, and we'll do the chores. Go
|
||||
ahead and move your docs into the <code>docs</code> directory.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Powered by React',
|
||||
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
|
||||
description: (
|
||||
<>
|
||||
Extend or customize your website layout by reusing React. Docusaurus can
|
||||
be extended while reusing the same header and footer.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Easy to Use",
|
||||
Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus was designed from the ground up to be easily installed and
|
||||
used to get your website up and running quickly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Focus on What Matters",
|
||||
Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
|
||||
description: (
|
||||
<>
|
||||
Docusaurus lets you focus on your docs, and we'll do the chores. Go
|
||||
ahead and move your docs into the <code>docs</code> directory.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Powered by React",
|
||||
Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
|
||||
description: (
|
||||
<>
|
||||
Extend or customize your website layout by reusing React. Docusaurus can
|
||||
be extended while reusing the same header and footer.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({Svg, title, description}) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} role="img" />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<Heading as="h3">{title}</Heading>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
function Feature({ Svg, title, description }) {
|
||||
return (
|
||||
<div className={clsx("col col--4")}>
|
||||
<div className="text--center">
|
||||
<Svg className={styles.featureSvg} role="img" />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<Heading as="h3">{title}</Heading>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featureSvg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import { Sponsor } from "@site/src/components/Sponsors/Sponsor";
|
||||
|
||||
export const SponsorList = () => {
|
||||
const sponsors = [
|
||||
{
|
||||
imgSrc: "/sponsors/sponsor.png",
|
||||
url: "https://openwebui.com",
|
||||
name: "Open WebUI",
|
||||
description:
|
||||
"On a mission to build the best open-source AI user interface.",
|
||||
},
|
||||
];
|
||||
const sponsors = [
|
||||
{
|
||||
imgSrc: "/sponsors/sponsor.png",
|
||||
url: "https://openwebui.com",
|
||||
name: "Open WebUI",
|
||||
description:
|
||||
"On a mission to build the best open-source AI user interface.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className=" flex gap-5 flex-wrap items-center justify-center">
|
||||
{sponsors.map((sponsor) => (
|
||||
<Sponsor sponsor={sponsor} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className=" flex gap-5 flex-wrap items-center justify-center">
|
||||
{sponsors.map((sponsor) => (
|
||||
<Sponsor sponsor={sponsor} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
export const Sponsor = ({ sponsor }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col mb-2 ">
|
||||
<div className="text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold underline mb-1.5">
|
||||
<a href={sponsor.url} target="_blank">
|
||||
{sponsor.name}
|
||||
</a>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col mb-2 ">
|
||||
<div className="text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold underline mb-1.5">
|
||||
<a href={sponsor.url} target="_blank">
|
||||
{sponsor.name}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a a href={sponsor.url} target="_blank">
|
||||
<div className="flex w-32 md:w-48 gap-2.5 items-start">
|
||||
<div className=" basis-1/2">
|
||||
<img
|
||||
className="rounded-xl "
|
||||
loading="lazy"
|
||||
alt={sponsor.name}
|
||||
src={sponsor.imgSrc}
|
||||
/>
|
||||
</div>
|
||||
<a a href={sponsor.url} target="_blank">
|
||||
<div className="flex w-32 md:w-48 gap-2.5 items-start">
|
||||
<div className=" basis-1/2">
|
||||
<img
|
||||
className="rounded-xl "
|
||||
loading="lazy"
|
||||
alt={sponsor.name}
|
||||
src={sponsor.imgSrc}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className=" basis-1/2 flex">
|
||||
<div className=" text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-4 md:line-clamp-5 no-underline">
|
||||
{sponsor.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
<div className=" basis-1/2 flex">
|
||||
<div className=" text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-4 md:line-clamp-5 no-underline">
|
||||
{sponsor.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
export const TopBanner = ({ items }) => {
|
||||
return (
|
||||
<div className="pb-4">
|
||||
{items.map((item) => (
|
||||
<>
|
||||
<div className="mb-2">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 font-bold underline mb-1">
|
||||
Sponsored by {item.name}
|
||||
</div>
|
||||
return (
|
||||
<div className="pb-4">
|
||||
{items.map((item) => (
|
||||
<>
|
||||
<div className="mb-2">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 font-bold underline mb-1">
|
||||
Sponsored by {item.name}
|
||||
</div>
|
||||
|
||||
<a href={item.url} target="_blank">
|
||||
<img
|
||||
className="w-full rounded-xl hidden md:block"
|
||||
loading="lazy"
|
||||
alt={item.name}
|
||||
src={item.imgSrc}
|
||||
/>
|
||||
<a href={item.url} target="_blank">
|
||||
<img
|
||||
className="w-full rounded-xl hidden md:block"
|
||||
loading="lazy"
|
||||
alt={item.name}
|
||||
src={item.imgSrc}
|
||||
/>
|
||||
|
||||
<img
|
||||
className="w-full rounded-xl block md:hidden"
|
||||
loading="lazy"
|
||||
alt={item.name}
|
||||
src={item?.mobileImgSrc || item.imgSrc}
|
||||
/>
|
||||
</a>
|
||||
<img
|
||||
className="w-full rounded-xl block md:hidden"
|
||||
loading="lazy"
|
||||
alt={item.name}
|
||||
src={item?.mobileImgSrc || item.imgSrc}
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div className="text-right text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-1">
|
||||
{item.description}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
<div className="text-right text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-1">
|
||||
{item.description}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
import { TopBanner } from "@site/src/components/Sponsors/TopBanner";
|
||||
|
||||
export const TopBanners = () => {
|
||||
const items = [
|
||||
{
|
||||
imgSrc: "/ads/pipelines-banner.png",
|
||||
mobileImgSrc: "/ads/pipelines-banner-mobile.png",
|
||||
url: "https://github.com/open-webui/pipelines",
|
||||
name: "Open WebUI Pipelines",
|
||||
description:
|
||||
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
|
||||
},
|
||||
{
|
||||
imgSrc: "/ads/pipelines-banner.png",
|
||||
mobileImgSrc: "/ads/pipelines-banner-mobile.png",
|
||||
url: "https://github.com/open-webui/pipelines",
|
||||
name: "Open WebUI Pipelines",
|
||||
description:
|
||||
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
|
||||
},
|
||||
{
|
||||
imgSrc: "/ads/pipelines-banner.png",
|
||||
mobileImgSrc: "/ads/pipelines-banner-mobile.png",
|
||||
url: "https://github.com/open-webui/pipelines",
|
||||
name: "Open WebUI Pipelines",
|
||||
description:
|
||||
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
|
||||
},
|
||||
{
|
||||
imgSrc: "/ads/placeholder.png",
|
||||
mobileImgSrc: "/ads/placeholder-mobile.png",
|
||||
url: "https://github.com/sponsors/tjbck",
|
||||
name: "Open WebUI",
|
||||
description:
|
||||
"The top banner spot is reserved for only two Enterprise Diamond sponsors on a first-come, first-served basis",
|
||||
},
|
||||
];
|
||||
const items = [
|
||||
{
|
||||
imgSrc: "/ads/pipelines-banner.png",
|
||||
mobileImgSrc: "/ads/pipelines-banner-mobile.png",
|
||||
url: "https://github.com/open-webui/pipelines",
|
||||
name: "Open WebUI Pipelines",
|
||||
description:
|
||||
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
|
||||
},
|
||||
{
|
||||
imgSrc: "/ads/pipelines-banner.png",
|
||||
mobileImgSrc: "/ads/pipelines-banner-mobile.png",
|
||||
url: "https://github.com/open-webui/pipelines",
|
||||
name: "Open WebUI Pipelines",
|
||||
description:
|
||||
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
|
||||
},
|
||||
{
|
||||
imgSrc: "/ads/pipelines-banner.png",
|
||||
mobileImgSrc: "/ads/pipelines-banner-mobile.png",
|
||||
url: "https://github.com/open-webui/pipelines",
|
||||
name: "Open WebUI Pipelines",
|
||||
description:
|
||||
"Pipelines: Versatile, UI-Agnostic OpenAI-Compatible Plugin Framework",
|
||||
},
|
||||
{
|
||||
imgSrc: "/ads/placeholder.png",
|
||||
mobileImgSrc: "/ads/placeholder-mobile.png",
|
||||
url: "https://github.com/sponsors/tjbck",
|
||||
name: "Open WebUI",
|
||||
description:
|
||||
"The top banner spot is reserved for only two Enterprise Diamond sponsors on a first-come, first-served basis",
|
||||
},
|
||||
];
|
||||
|
||||
// Randomly select an item to display
|
||||
let selectedItemIdx = Math.floor(Math.random() * items.length);
|
||||
// Randomly select an item to display
|
||||
let selectedItemIdx = Math.floor(Math.random() * items.length);
|
||||
|
||||
return <TopBanner items={[items[selectedItemIdx]]} />;
|
||||
return <TopBanner items={[items[selectedItemIdx]]} />;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user