OpenWebUI/docs
1
0
Fork 0
mirror of https://github.com/open-webui/docs synced 2025-06-14 18:40:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #122 from hichemfantar/main

Browse Source 
setup prettier and local search
This commit is contained in:
Timothy Jaeryang Baek 2024-06-16 21:50:38 -07:00 committed by GitHub
commit 66a65b1510
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 17754 additions and 17042 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierignore Normal file
View File

@ -0,0 +1,2 @@
**/*.md
**/*.mdx

12
.prettierrc.json Normal file
View File

@ -0,0 +1,12 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"useTabs": true,
"singleQuote": false,
"semi": true,
"bracketSameLine": false,
"bracketSpacing": true,
"jsxSingleQuote": false,
"quoteProps": "as-needed",
"endOfLine": "lf"
}

8
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,8 @@
{
"recommendations": [
"esbenp.prettier-vscode",
"davidanson.vscode-markdownlint",
"unifiedjs.vscode-mdx",
"dbaeumer.vscode-eslint"
]
}

7
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,7 @@
{
"markdownlint.config": {
"no-inline-html": false,
"link-image-reference-definitions": false,
"fenced-code-language": false
}
}

28
README.md
View File

@ -2,40 +2,40 @@
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
### Installation ## Installation
``` ```sh
$ yarn npm i
``` ```
### Local Development ## Local Development
``` ```sh
$ yarn start npm start
``` ```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
### Build ## Build
``` ```sh
$ yarn build npm run build
``` ```
This command generates static content into the `build` directory and can be served using any static contents hosting service. This command generates static content into the `build` directory and can be served using any static contents hosting service.
### Deployment ## Deployment
Using SSH: Using SSH:
``` ```sh
$ USE_SSH=true yarn deploy USE_SSH=true npm run deploy
``` ```
Not using SSH: Not using SSH:
``` ```sh
$ GIT_USER=<Your GitHub username> yarn deploy GIT_USER=<Your GitHub username> npm run deploy
``` ```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

2
babel.config.js
View File

@ -1,3 +1,3 @@
module.exports = { module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')], presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
}; };

1
docusaurus.config.js
View File

@ -160,6 +160,7 @@ const config = {
darkTheme: prismThemes.dracula, darkTheme: prismThemes.dracula,
}, },
}), }),
plugins: [require.resolve("docusaurus-lunr-search")],
}; };
export default config; export default config;

2303
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -11,7 +11,9 @@
"clear": "docusaurus clear", "clear": "docusaurus clear",
"serve": "docusaurus serve", "serve": "docusaurus serve",
"write-translations": "docusaurus write-translations", "write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids" "write-heading-ids": "docusaurus write-heading-ids",
"prettier": "npx prettier . --write",
"mdx-check": "npx docusaurus-mdx-checker"
}, },
"dependencies": { "dependencies": {
"@docusaurus/core": "^3.2.0", "@docusaurus/core": "^3.2.0",
@ -19,6 +21,7 @@
"@docusaurus/theme-mermaid": "^3.2.0", "@docusaurus/theme-mermaid": "^3.2.0",
"@mdx-js/react": "^3.0.0", "@mdx-js/react": "^3.0.0",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"docusaurus-lunr-search": "^3.4.0",
"prism-react-renderer": "^2.3.0", "prism-react-renderer": "^2.3.0",
"react": "^18.0.0", "react": "^18.0.0",
"react-dom": "^18.0.0" "react-dom": "^18.0.0"

2
postcss.config.js
View File

@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

2
sidebars.js
View File

@ -14,7 +14,7 @@
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = { const sidebars = {
// By default, Docusaurus generates a sidebar from the docs folder structure // By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
// But you can create a sidebar manually // But you can create a sidebar manually
/* /*

64
src/components/HomepageFeatures/index.js
View File

@ -1,64 +0,0 @@
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&apos;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>
);
}
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>
);
}

64
src/components/HomepageFeatures/index.jsx Normal file
View File

@ -0,0 +1,64 @@
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&apos;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>
);
}
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>
);
}

21
src/components/SponsorList.js
View File

@ -1,21 +0,0 @@
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.",
},
];
return (
<div className=" flex gap-5 flex-wrap items-center justify-center">
{sponsors.map((sponsor) => (
<Sponsor sponsor={sponsor} />
))}
</div>
);
};

21
src/components/SponsorList.jsx Normal file
View File

@ -0,0 +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.",
},
];
return (
<div className=" flex gap-5 flex-wrap items-center justify-center">
{sponsors.map((sponsor) => (
<Sponsor sponsor={sponsor} />
))}
</div>
);
};

32
src/components/Sponsors/Sponsor.js
View File

@ -1,32 +0,0 @@
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>
<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>
</>
);
};

32
src/components/Sponsors/Sponsor.jsx Normal file
View File

@ -0,0 +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>
<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>
</>
);
};

35
src/components/Sponsors/TopBanner.js
View File

@ -1,35 +0,0 @@
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>
<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>
<div className="text-right text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-1">
{item.description}
</div>
</div>
</>
))}
</div>
);
};

35
src/components/Sponsors/TopBanner.jsx Normal file
View File

@ -0,0 +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>
<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>
<div className="text-right text-[0.6rem] text-gray-500 dark:text-gray-400 font-bold line-clamp-1">
{item.description}
</div>
</div>
</>
))}
</div>
);
};

43
src/components/TopBanners.js
View File

@ -1,43 +0,0 @@
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",
},
];
// Randomly select an item to display
let selectedItemIdx = Math.floor(Math.random() * items.length);
return <TopBanner items={[items[selectedItemIdx]]} />;
};

43
src/components/TopBanners.jsx Normal file
View File

@ -0,0 +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",
},
];
// Randomly select an item to display
let selectedItemIdx = Math.floor(Math.random() * items.length);
return <TopBanner items={[items[selectedItemIdx]]} />;
};