docs: sync docs hub fixes from dev to docs branch (#2247)
docs: sync docs hub fixes from dev to docs branch
This commit is contained in:
Henry
GitHub
commit
862e2d05a2
10
README.md
10
README.md
@ -76,31 +76,31 @@ Jan is an open-source ChatGPT alternative that runs 100% offline on your compute
|
||||
<tr style="text-align:center">
|
||||
<td style="text-align:center"><b>Experimental (Nightly Build)</b></td>
|
||||
<td style="text-align:center">
|
||||
<a href='https://delta.jan.ai/latest/jan-win-x64-0.4.7-295.exe'>
|
||||
<a href='https://delta.jan.ai/latest/jan-win-x64-0.4.7-297.exe'>
|
||||
<img src='./docs/static/img/windows.png' style="height:14px; width: 14px" />
|
||||
<b>jan.exe</b>
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align:center">
|
||||
<a href='https://delta.jan.ai/latest/jan-mac-x64-0.4.7-295.dmg'>
|
||||
<a href='https://delta.jan.ai/latest/jan-mac-x64-0.4.7-297.dmg'>
|
||||
<img src='./docs/static/img/mac.png' style="height:15px; width: 15px" />
|
||||
<b>Intel</b>
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align:center">
|
||||
<a href='https://delta.jan.ai/latest/jan-mac-arm64-0.4.7-295.dmg'>
|
||||
<a href='https://delta.jan.ai/latest/jan-mac-arm64-0.4.7-297.dmg'>
|
||||
<img src='./docs/static/img/mac.png' style="height:15px; width: 15px" />
|
||||
<b>M1/M2</b>
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align:center">
|
||||
<a href='https://delta.jan.ai/latest/jan-linux-amd64-0.4.7-295.deb'>
|
||||
<a href='https://delta.jan.ai/latest/jan-linux-amd64-0.4.7-297.deb'>
|
||||
<img src='./docs/static/img/linux.png' style="height:14px; width: 14px" />
|
||||
<b>jan.deb</b>
|
||||
</a>
|
||||
</td>
|
||||
<td style="text-align:center">
|
||||
<a href='https://delta.jan.ai/latest/jan-linux-x86_64-0.4.7-295.AppImage'>
|
||||
<a href='https://delta.jan.ai/latest/jan-linux-x86_64-0.4.7-297.AppImage'>
|
||||
<img src='./docs/static/img/linux.png' style="height:14px; width: 14px" />
|
||||
<b>jan.AppImage</b>
|
||||
</a>
|
||||
|
||||
@ -53,24 +53,40 @@ Here are some of the keyboard shortcuts that you can use in Jan.
|
||||
| `⌘ ,` | Navigate to setting page |
|
||||
| `Enter` | Send a message |
|
||||
| `Shift + Enter` | Insert new line in input box |
|
||||
| `Arrow Up` | Navigate to previous option (within search dialog) |
|
||||
| `Arrow Down` | Navigate to next option (within search dialog) |
|
||||
| `Arrow Up` | Navigate to the previous option (within the search dialog) |
|
||||
| `Arrow Down` | Navigate to the next option (within the search dialog) |
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="windows" label = "Windows" default>
|
||||
| Combination | Description |
|
||||
| --------------- | -------------------------------------------------- |
|
||||
| `Ctrl E` | Show list your models |
|
||||
| `Ctrl K` | Show list navigation pages |
|
||||
| `Ctrl B` | Toggle collapsible left panel |
|
||||
| `Ctrl ,` | Navigate to setting page |
|
||||
| `Ctrl E` | Show list your models |
|
||||
| `Ctrl K` | Show list navigation pages |
|
||||
| `Ctrl B` | Toggle collapsible left panel |
|
||||
| `Ctrl ,` | Navigate to setting page |
|
||||
| `Enter` | Send a message |
|
||||
| `Shift + Enter` | Insert new line in input box |
|
||||
| `Arrow Up` | Navigate to previous option (within search dialog) |
|
||||
| `Arrow Down` | Navigate to next option (within search dialog) |
|
||||
| `Arrow Up` | Navigate to the previous option (within the search dialog) |
|
||||
| `Arrow Down` | Navigate to the next option (within the search dialog) |
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="linux" label = "Linux" default>
|
||||
| Combination | Description |
|
||||
| --------------- | -------------------------------------------------- |
|
||||
| `Ctrl E` | Show list your models |
|
||||
| `Ctrl K` | Show list navigation pages |
|
||||
| `Ctrl B` | Toggle collapsible left panel |
|
||||
| `Ctrl ,` | Navigate to setting page |
|
||||
| `Enter` | Send a message |
|
||||
| `Shift + Enter` | Insert new line in input box |
|
||||
| `Arrow Up` | Navigate to the previous option (within the search dialog) |
|
||||
| `Arrow Down` | Navigate to the next option (within the search dialog) |
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
:::note
|
||||
The keyboard shortcuts are customizable.
|
||||
:::
|
||||
|
||||
## Enable the Experimental Mode
|
||||
To try out new fetures that are still in testing phase, follow the steps below:
|
||||
@ -91,7 +107,7 @@ Ensure that you have read the [troubleshooting guide](/docs/guides/common-error/
|
||||
4. On the **GPU Acceleration** click the slider to enable.
|
||||
|
||||
## Access the Jan Data Folder
|
||||
To access the folder where messages, model configurtions and user data stored follow the steps below:
|
||||
To access the folder where messages, model configurations and user data are stored, follow the steps below:
|
||||
1. Navigate to the main dashboard.
|
||||
2. Click the **gear icon (⚙️)** on the bottom left of your screen.
|
||||
3. Under the **Settings screen**, click the **Advanced Settings**.
|
||||
@ -115,6 +131,9 @@ To Allow self-signed or unverified certificates, follow the steps below:
|
||||
|
||||
## Clear Logs
|
||||
To clear all logs on your Jan app, follow the steps below:
|
||||
:::warning
|
||||
This feature clears all the data in your **Jan Data Folder**.
|
||||
:::
|
||||
1. Navigate to the main dashboard.
|
||||
2. Click the **gear icon (⚙️)** on the bottom left of your screen.
|
||||
3. Under the **Settings screen**, click the **Advanced Settings**.
|
||||
@ -122,6 +141,9 @@ To clear all logs on your Jan app, follow the steps below:
|
||||
|
||||
## Reset To Factory Default
|
||||
To reset the Jan app to its original state, follow the steps below:
|
||||
:::danger[Remember!]
|
||||
This irreversible action is only recommended if the application is corrupted.
|
||||
:::
|
||||
1. Navigate to the main dashboard.
|
||||
2. Click the **gear icon (⚙️)** on the bottom left of your screen.
|
||||
3. Under the **Settings screen**, click the **Advanced Settings**.
|
||||
|
||||
@ -21,6 +21,12 @@ keywords:
|
||||
|
||||
HTTPS Proxy encrypts data between your browser and the internet, making it hard for outsiders to intercept or read. It also helps you to maintain your privacy and security while being able to bypass regional restrictions on internet.
|
||||
|
||||
:::note
|
||||
|
||||
When configuring Jan using an HTTPS proxy, the speed of the downloading model may be affected due to the encryption and decryption process. It also depends on the networking of the cloud service provider.
|
||||
|
||||
:::
|
||||
|
||||
## Setting Up Your Own HTTPS Proxy Server
|
||||
This guide provides a simple overview of setting up an HTTPS proxy server using **Squid**, a widely used open-source proxy software.
|
||||
|
||||
@ -31,8 +37,13 @@ Other software options are also available depending on your requirements.
|
||||
### Step 1: Choosing a Server
|
||||
1. Firstly, you need to choose a server to host your proxy server.
|
||||
:::note
|
||||
We recommend using a cloud provider like Amazon AWS, Google Cloud, Microsoft Azure, Digital Ocean, etc.
|
||||
We recommend using a well-known cloud provider service like:
|
||||
- Amazon AWS
|
||||
- Google Cloud
|
||||
- Microsoft Azure
|
||||
- Digital Ocean
|
||||
:::
|
||||
|
||||
2. Ensure that your server has a public IP address and is accessible from the internet.
|
||||
|
||||
### Step 2: Installing Squid
|
||||
|
||||
48
docs/docs/guides/best-practices.mdx
Normal file
48
docs/docs/guides/best-practices.mdx
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Best Practices
|
||||
sidebar_position: 3
|
||||
description: Comprehensive set of best practices.
|
||||
keywords:
|
||||
[
|
||||
Jan AI,
|
||||
Jan,
|
||||
ChatGPT alternative,
|
||||
local AI,
|
||||
private AI,
|
||||
conversational AI,
|
||||
no-subscription fee,
|
||||
large language model,
|
||||
acknowledgements,
|
||||
third-party libraries,
|
||||
]
|
||||
---
|
||||
|
||||
Jan is a versatile platform offering solutions for integrating AI locally across various platforms. This guide outlines best practices for developers, analysts, and AI enthusiasts to enhance their experience with Jan when adding AI locally to their computers. Implementing these practices will optimize the performance of AI models.
|
||||
|
||||
## Follow the Quickstart Guide
|
||||
The [quickstart guide](quickstart.mdx) is designed to facilitate a quick setup process. It provides a clear instruction and simple steps to get you up and running with Jan.ai quickly. Even, if you are inexperienced in AI, the quickstart can offer valuable insights and tips to help you get started quickly.
|
||||
|
||||
## Setting up the Right Models
|
||||
Jan offers a range of pre-configured AI models that is tailored to different tasks and industries. You should indentify which on that aligns with your objectives. There are model's factors to be considered:
|
||||
- Capabilities
|
||||
- Accuracy
|
||||
- Processing Speed
|
||||
|
||||
:::note
|
||||
Some of these factors also depends on your hardware, please see [Hardware Requirement](hardware-requiement.mdx).
|
||||
:::
|
||||
Choosing the right model is important to achieve the best performance.
|
||||
|
||||
## Setting up Jan
|
||||
Ensure that you familiarize yourself with the Jan application. Jan offers advanced settings that you can adjust. These settings may influence how your AI behaves locally. Please see the [Advanced Settings](./advanced-settings/advanced-settings.mdx) article for a complete list of Jan's configurations and instructions on how to configure them.
|
||||
|
||||
## Integrations
|
||||
One of Jan.ai key features is its ability to integrate with many FileSystemWritableFileStream. Whether you are incorporating Jan.ai with any open-source LLM provider or other WebTransportBidirectionalStream, it is important to understand the integration capabilities and limitations.
|
||||
|
||||
## Mastering the Prompt Engineering
|
||||
Prompt engineering is an important aspect when dealing with AI models to generate the desired outputs. Mastering this skill can significantly enhance the performance and the responses of the AI. Below are some tips that you can do for promptengineering:
|
||||
- Ask the model to adopt a persona
|
||||
- Be specific and details get a more specific answers
|
||||
- Provide examples or preference text or context at the beginning
|
||||
- Use a clear and concise language
|
||||
- Use a certain keywords and phrases
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Jan not using GPU
|
||||
title: Troubleshooting NVIDIA GPU
|
||||
sidebar_position: 2
|
||||
description: A step-by-step guide to enable Jan to properly leverage GPU resources, avoiding performance issues.
|
||||
description: A step-by-step guide to enable Jan to properly leverage NVIDIA GPU resources, avoiding performance issues.
|
||||
keywords: [
|
||||
Jan AI,
|
||||
Jan,
|
||||
@ -21,7 +21,7 @@ import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
|
||||
|
||||
This guide provides steps to troubleshoot and resolve issues when the Jan app does not utilize the GPU on Windows and Linux systems.
|
||||
This guide provides steps to troubleshoot and resolve issues when the Jan app does not utilize the NVIDIA GPU on Windows and Linux systems.
|
||||
|
||||
### 1. Ensure GPU Mode Requirements
|
||||
|
||||
@ -30,7 +30,7 @@ This guide provides steps to troubleshoot and resolve issues when the Jan app do
|
||||
|
||||
#### NVIDIA Driver
|
||||
|
||||
- Install an NVIDIA driver supporting CUDA 11.7 or higher.
|
||||
- Install an [NVIDIA Driver](https://www.nvidia.com/Download/index.aspx) supporting CUDA 11.7 or higher.
|
||||
- Use the following command to verify the installation:
|
||||
|
||||
```sh
|
||||
@ -39,7 +39,7 @@ This guide provides steps to troubleshoot and resolve issues when the Jan app do
|
||||
|
||||
#### CUDA Toolkit
|
||||
|
||||
- Install a CUDA toolkit compatible with your NVIDIA driver.
|
||||
- Install a [CUDA toolkit](https://developer.nvidia.com/cuda-downloads) compatible with your NVIDIA driver.
|
||||
- Use the following command to verify the installation:
|
||||
|
||||
```sh
|
||||
@ -51,7 +51,7 @@ This guide provides steps to troubleshoot and resolve issues when the Jan app do
|
||||
|
||||
#### NVIDIA Driver
|
||||
|
||||
- Install an NVIDIA driver supporting CUDA 11.7 or higher.
|
||||
- Install an [NVIDIA Driver](https://www.nvidia.com/Download/index.aspx) supporting CUDA 11.7 or higher.
|
||||
- Use the following command to verify the installation:
|
||||
|
||||
```sh
|
||||
@ -60,7 +60,7 @@ This guide provides steps to troubleshoot and resolve issues when the Jan app do
|
||||
|
||||
#### CUDA Toolkit
|
||||
|
||||
- Install a CUDA toolkit compatible with your NVIDIA driver.
|
||||
- Install a [CUDA toolkit](https://developer.nvidia.com/cuda-downloads) compatible with your NVIDIA driver.
|
||||
- Use the following command to verify the installation:
|
||||
|
||||
```sh
|
||||
@ -123,6 +123,8 @@ If GPU mode isn't enabled by default:
|
||||
"gpu_highest_vram": "0"
|
||||
}
|
||||
```
|
||||
### 4. Restart Jan
|
||||
Restart Jan application to make sure it works.
|
||||
|
||||
#### Troubleshooting Tips
|
||||
|
||||
|
||||
@ -1,37 +1,34 @@
|
||||
import styles from "../HomepagePrimaryFeatures/styles.module.css";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function HomepagePrimaryFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<section className="py-8 md:py-16 lg:py-20 flex items-center">
|
||||
<div className="container">
|
||||
<div className={clsx(styles.cards)}>
|
||||
<div className={clsx(styles.card, styles.cardBluish)}>
|
||||
<div className="flex flex-col md:flex-row justify-between md:gap-8">
|
||||
<div className="w-full md:w-1/2 h-72 md:h-84 flex-1 rounded-lg p-8 relative bg-gradient-to-r from-gray-100 to-blue-400 dark:from-gray-700 dark:to-blue-800 mb-8 md:mb-0">
|
||||
<div className="mb-16">
|
||||
<p className="text-lg mb-4">Installation</p>
|
||||
<h3 className="text-1xl md:text-2xl lg:text-3xl font-semibold">Install Jan across multiple platforms.</h3>
|
||||
</div>
|
||||
<div>
|
||||
<p>Installation</p>
|
||||
<h3>Set up Jan with our guide to install across multiple platform.</h3>
|
||||
<a href={"/guides/install"} className="btn bg-black hover:bg-gray-600 dark:bg-blue-500 text-normal md:text-xl text-white font-normal py-2 px-4 rounded-xl">Get Started</a>
|
||||
</div>
|
||||
<div >
|
||||
<a href={"/guides/install"}>Get Started</a>
|
||||
</div>
|
||||
<div className={styles.cardImage}>
|
||||
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} />
|
||||
<div className="absolute right-4 bottom-4">
|
||||
<img alt={"Card Image"} src={"/img/homepage-new/rocket.png"} className="h-16 md:h-24" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card, styles.cardPinkish)}>
|
||||
<div className="w-full md:w-1/2 h-72 md:h-84 flex-1 rounded-lg p-8 relative bg-gradient-to-r from-gray-100 to-purple-400 dark:from-gray-700 dark:to-purple-800">
|
||||
<div className="mb-8">
|
||||
<p className="text-lg mb-4">Models</p>
|
||||
<h3 className="text-1xl md:text-2xl lg:text-3xl font-semibold">Discover the pre-configured AI models available for use. </h3>
|
||||
</div>
|
||||
<div>
|
||||
<p>Models</p>
|
||||
<h3>Explore the available pre-configured AI models. </h3>
|
||||
<a href={"/guides/models-list"} className="btn bg-black hover:bg-gray-600 dark:bg-blue-500 text-normal md:text-xl text-white font-normal py-2 px-4 rounded-xl">Support</a>
|
||||
</div>
|
||||
<div >
|
||||
<a href={"/guides/models-list"}>Support</a>
|
||||
</div>
|
||||
<div className={styles.cardImage}>
|
||||
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} />
|
||||
<div className="absolute right-4 bottom-4">
|
||||
<img alt={"Card Image"} src={"/img/homepage-new/chat.png"} className="h-16 md:h-24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,77 +0,0 @@
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.cards {
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
min-width: 250px;
|
||||
min-height: 275px;
|
||||
max-height: 325px;
|
||||
flex: 1;
|
||||
border-radius: 15px;
|
||||
padding: 2rem 1.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.cardImage {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.cardImage img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.cardImage {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cardBluish {
|
||||
background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(185,202,237,1) 100%);
|
||||
}
|
||||
|
||||
.cardPinkish {
|
||||
background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(215,194,238,1) 100%);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.card a {
|
||||
all: unset;
|
||||
color: white;
|
||||
background-color: #1C1E21;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,67 +1,54 @@
|
||||
import styles from "../HomepageSecondaryFeatures/styles.module.css";
|
||||
import clsx from "clsx";
|
||||
import React from 'react'
|
||||
|
||||
export default function HomepageSecondaryFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<section className="py-8 md:py-16 bg-gray-100 dark:bg-gray-800 flex items-center">
|
||||
<div className="container">
|
||||
<div className={clsx(styles.cards)}>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div>
|
||||
<div className={styles.cardLogo}>
|
||||
<img alt={"Feature logo"} src={"/img/homepage-new/bg-rocket.png"}/>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<h3>Quickstart</h3>
|
||||
<p>Jump right in with our Quickstart guide, designed to get you going with simple steps and clear instructions for a smooth setup.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardFooter}>
|
||||
<a href={"/guides/"}>Learn Here
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||
</svg> */}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div>
|
||||
<div className={styles.cardLogo}>
|
||||
<img alt={"Feature logo"} src={"/img/homepage-new/bg-wrench.png"}/>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<h3>Integrations</h3>
|
||||
<p>Discover how Jan seamlessly integrates with 9 different system, streamlining your application for maximum efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardFooter}>
|
||||
<a href={"/guides/integrations/"}>Learn Here
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||
</svg> */}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div>
|
||||
<div className={styles.cardLogo}>
|
||||
<img alt={"Feature logo"} src={"/img/homepage-new/bg-book.png"}/>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<h3>Error Codes</h3>
|
||||
<p>Navigate through common error codes with explanations and solutions to resolve them quickly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.cardFooter}>
|
||||
<a href={"/guides/error-codes/"}>Learn Here
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill={"currentColor"}>
|
||||
<path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>
|
||||
</svg> */}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row justify-center gap-8">
|
||||
<FeatureCard
|
||||
imgSrc="/img/homepage-new/bg-rocket.png"
|
||||
title="Quickstart"
|
||||
description="Get started quickly with our Quickstart guide, offering simple steps for a smooth setup."
|
||||
href="/guides/"
|
||||
/>
|
||||
<FeatureCard
|
||||
imgSrc="/img/homepage-new/bg-wrench.png"
|
||||
title="Integrations"
|
||||
description="Learn how Jan can integrates seamlessly."
|
||||
href="/guides/integrations/"
|
||||
/>
|
||||
<FeatureCard
|
||||
imgSrc="/img/homepage-new/bg-book.png"
|
||||
title="Error Codes"
|
||||
description="Find solutions for common error codes to resolve them quickly."
|
||||
href="/guides/error-codes/"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
function FeatureCard({ imgSrc, title, description, href }) {
|
||||
return (
|
||||
<div className="bg-gray-200 dark:bg-gray-700 w-full rounded-lg relative flex flex-col justify-between mb-8 md:mb-0 md:mr-8 p-2">
|
||||
<div>
|
||||
<div className="h-32 w-full">
|
||||
<img alt={'Feature logo'} src={imgSrc} />
|
||||
</div>
|
||||
<div className="mt-12 p-8">
|
||||
<h3 className="text-lg font-semibold">{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8 mb-2 pt-0">
|
||||
<a
|
||||
href={href}
|
||||
className="btn bg-black hover:bg-gray-600 dark:bg-blue-500 text-white font-normal py-2 px-4 rounded-xl"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
.features {
|
||||
padding-top: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center; /* Center align the cards */
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #ECECEF;
|
||||
width: calc(33.33% - 2rem); /* Adjust width for responsiveness */
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem; /* Add margin between cards */
|
||||
padding: 1rem; /* Add padding to cards */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.card {
|
||||
width: calc(50% - 2rem); /* Adjust width for smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.card {
|
||||
width: calc(100% - 2rem); /* Adjust width for mobile screens */
|
||||
}
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
margin-top: 3rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.cardLogo {
|
||||
height: 130px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cardFooter {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cardLogo img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 1rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card a {
|
||||
all: unset;
|
||||
color: white;
|
||||
background-color: #1C1E21;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card a svg {
|
||||
padding-top: 12px;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,109 +1,106 @@
|
||||
import styles from "../HomepageTerinaryFeatures/styles.module.css";
|
||||
import clsx from "clsx";
|
||||
|
||||
export default function HomepageTerinaryFeatures() {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<section className="py-20 flex items-center">
|
||||
<div className="container">
|
||||
<div className={clsx(styles.cards)}>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div className={styles.cardHeader}>
|
||||
<div className="flex justify-center flex-wrap gap-8">
|
||||
<div className="bg-gray-200 dark:bg-gray-800 w-72 rounded-lg relative flex flex-col p-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<img alt={"Icon"} src={"/img/homepage-new/roket.png"} />
|
||||
<h3>Get Started</h3>
|
||||
<h5 className="text-gray-700 dark:text-gray-200">Get Started</h5>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p>Kick off your journey with Jan easily and install your AI locally.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={"/guides/"}>
|
||||
<div className="mt-5 justify-center">
|
||||
<p className="text-gray-700 dark:text-gray-200">Easily kick off your journey with Jan by installing your AI locally.</p>
|
||||
<ul className="mt-5">
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/"} className=" dark:text-blue-400">
|
||||
Quickstart
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/guides/install/"}>
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/install/"} className="dark:text-blue-400">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/guides/models-list/"}>
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/models-list/"} className="dark:text-blue-400">
|
||||
Pre-configured Models
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div className={styles.cardHeader}>
|
||||
<div className="bg-gray-200 dark:bg-gray-800 w-72 rounded-lg relative flex flex-col p-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<img alt={"Icon"} src={"/img/homepage-new/buku.png"} />
|
||||
<h3>Settings</h3>
|
||||
<h5 className="text-gray-700 dark:text-gray-200">Settings</h5>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p>Learn how to manage the thread history and configure your installed AI.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={"/guides/thread/"}>
|
||||
<div className="mt-5 justify-center">
|
||||
<p className="text-gray-700 dark:text-gray-200">Discover how to manage Jan and configure your installed AI.</p>
|
||||
<ul className="mt-5">
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/thread/"} className="dark:text-blue-400">
|
||||
Thread Management
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/guides/start-server/"}>
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/start-server/"} className="dark:text-blue-400">
|
||||
Local Server
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/guides/advanced-settings/"}>
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/advanced-settings/"} className="dark:text-blue-400">
|
||||
Advanced Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div className={styles.cardHeader}>
|
||||
<div className="bg-gray-200 dark:bg-gray-800 w-72 rounded-lg relative flex flex-col p-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<img alt={"Icon"} src={"/img/homepage-new/setting.png"} />
|
||||
<h3>Features</h3>
|
||||
<h5 className="text-gray-700 dark:text-gray-200">Features</h5>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p>Explore our key features designed to enhance your experience.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={"/guides/models-setup/"}>
|
||||
<div className="mt-5 justify-center">
|
||||
<p className="text-gray-700 dark:text-gray-200">Explore key features designed to enhance your experience with Jan.</p>
|
||||
<ul className="mt-5">
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/models-setup/"} className="dark:text-blue-400">
|
||||
Models Setup
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/guides/extensions/"}>
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/extensions/"} className="dark:text-blue-400">
|
||||
Extensions
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/guides/integrations/"}>
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/integrations/"} className="dark:text-blue-400">
|
||||
Integrations
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(styles.card)}>
|
||||
<div className={styles.cardHeader}>
|
||||
<div className="bg-gray-200 dark:bg-gray-800 w-72 rounded-lg relative flex flex-col p-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<img alt={"Icon"} src={"/img/homepage-new/doa.png"} />
|
||||
<h3>Troubleshooting</h3>
|
||||
<h5 className="text-gray-700 dark:text-gray-200">Troubleshooting</h5>
|
||||
</div>
|
||||
<div className={styles.cardContent}>
|
||||
<p>Find solutions to common issues, including error codes, and FAQs.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={"/guides/error-codes/"}>
|
||||
<div className="mt-5 justify-center">
|
||||
<p className="text-gray-700 dark:text-gray-200">Find solutions to common issues, including error codes, and FAQs.</p>
|
||||
<ul className="mt-5">
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/error-codes/"} className="dark:text-blue-400">
|
||||
Error Codes
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/guides/common-error/"}>
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/common-error/"} className="dark:text-blue-400">
|
||||
Common Errors
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={"/guides/faqs/"}>
|
||||
<li className="font-semibold list-disc mb-4">
|
||||
<a href={"/guides/faqs/"} className="dark:text-blue-400">
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
.features {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.cards {
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #ECECEF;
|
||||
width: 275px;
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* justify-content: space-between; */
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
margin-top: 1rem;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.cardContent li {
|
||||
font-weight: 600;
|
||||
list-style: circle;
|
||||
margin: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cardContent li::marker {
|
||||
color: #2563EB;
|
||||
}
|
||||
|
||||
.cardHeader {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cardHeader img {
|
||||
/*width: 40px;*/
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -1,22 +1,22 @@
|
||||
import clsx from 'clsx'
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
import Layout from '@theme/Layout'
|
||||
import Heading from '@theme/Heading'
|
||||
import React from 'react';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Layout from '@theme/Layout';
|
||||
import Heading from '@theme/Heading';
|
||||
import { DocSearch } from '@docsearch/react';
|
||||
import HomepagePrimaryFeatures from '../components/HomepagePrimaryFeatures';
|
||||
import HomepageSecondaryFeatures from '../components/HomepageSecondaryFeatures';
|
||||
import HomepageTerinaryFeatures from '../components/HomepageTerinaryFeatures';
|
||||
|
||||
import styles from './docs.module.css'
|
||||
import HomepagePrimaryFeatures from '../components/HomepagePrimaryFeatures'
|
||||
import HomepageSecondaryFeatures from '../components/HomepageSecondaryFeatures'
|
||||
import HomepageTerinaryFeatures from '../components/HomepageTerinaryFeatures'
|
||||
import { DocSearch } from '@docsearch/react'
|
||||
import NavbarExtended from '../theme/NavbarExtension'
|
||||
|
||||
function HomepageHeader() {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
|
||||
return (
|
||||
<header className={clsx(styles.heroBanner)}>
|
||||
<NavbarExtended />
|
||||
<div className="container">
|
||||
<Heading as="h1" className={clsx(styles.heroTitle)}>
|
||||
<header className="bg-white dark:bg-gray-800 py-16 h-[60vh] text-center relative overflow-hidden">
|
||||
<div className="bg-custom-img w-full h-full absolute top-0 left-0 bg-cover bg-center"></div>
|
||||
<div className="container relative z-10">
|
||||
<Heading as="h1" className="text-2xl md:text-3xl lg:text-5xl font-semibold text-white dark:text-gray-200 mb-8 mt-8">
|
||||
Hello, how can we help?
|
||||
</Heading>
|
||||
<div className={styles.searchBar}>
|
||||
@ -28,30 +28,30 @@ function HomepageHeader() {
|
||||
insight={true}
|
||||
/>
|
||||
</div>
|
||||
<p className={clsx(styles.heroSubtitle)}>
|
||||
Open-source ChatGPT alternative that runs 100% offline on your
|
||||
computer.
|
||||
|
||||
<p className="text-lg md:text-xl lg:text-2xl text-white dark:text-gray-200 mt-8">
|
||||
Open-source ChatGPT alternative that runs 100% offline on your computer.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title={`Docs`}
|
||||
title="Docs"
|
||||
description="Description will go into a meta tag in <head />"
|
||||
>
|
||||
<div className={clsx(styles.homeBg)}>
|
||||
<div className="bg-white dark:bg-gray-800">
|
||||
<HomepageHeader />
|
||||
<main style={{ backgroundColor: 'whitesmoke' }}>
|
||||
<main className="bg-whitesmoke dark:bg-gray-900">
|
||||
<HomepagePrimaryFeatures />
|
||||
<HomepageSecondaryFeatures />
|
||||
<HomepageTerinaryFeatures />
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,47 +1,3 @@
|
||||
/**
|
||||
* CSS files with the .module.css suffix will be treated as CSS modules
|
||||
* and scoped locally.
|
||||
*/
|
||||
|
||||
.heroBanner {
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 996px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.homeBg {
|
||||
background-size: auto 600px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.homeBg {
|
||||
background-image: url('/img/homepage-new/bg.png') !important;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.heroTitle {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.searchBar {
|
||||
background-color: white;
|
||||
max-width: 580px;
|
||||
@ -88,8 +44,3 @@
|
||||
padding: 0px 5px;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
font-size: 1.25rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -14,6 +14,11 @@ import Footer from "@site/src/containers/Footer";
|
||||
import LayoutProvider from "@theme/Layout/Provider";
|
||||
import ErrorPageContent from "@theme/ErrorPageContent";
|
||||
import styles from "./styles.module.scss";
|
||||
import NavBarExtension from "../NavbarExtension";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
const allowedPaths = ["/docs/", "/developer/", "/api-reference/", "/guides/", "/guides", "/docs", "/developer", "/api-reference", "/guides/changelog"];
|
||||
|
||||
export default function Layout(props) {
|
||||
const {
|
||||
children,
|
||||
@ -24,6 +29,10 @@ export default function Layout(props) {
|
||||
description,
|
||||
} = props;
|
||||
useKeyboardNavigation();
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
const isAllowedPath = allowedPaths.includes(location.pathname);
|
||||
return (
|
||||
<LayoutProvider>
|
||||
<PageMetadata title={title} description={description} />
|
||||
@ -32,14 +41,20 @@ export default function Layout(props) {
|
||||
|
||||
<AnnouncementBar />
|
||||
|
||||
<Navbar />
|
||||
<Navbar/>
|
||||
|
||||
{isAllowedPath ? <NavBarExtension /> : ""}
|
||||
|
||||
{/* {console.log("Is allowed path?", location.pathname)} */}
|
||||
|
||||
|
||||
<div
|
||||
id={SkipToContentFallbackId}
|
||||
className={clsx(
|
||||
ThemeClassNames.wrapper.main,
|
||||
styles.mainWrapper,
|
||||
wrapperClassName
|
||||
wrapperClassName,
|
||||
isAllowedPath && "mt-0 md:mt-11"
|
||||
)}
|
||||
>
|
||||
<ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from '@docusaurus/Link';
|
||||
import css from "./NavPageContainer.module.css";
|
||||
|
||||
export default function NavPageContainer() {
|
||||
return (
|
||||
<div className={css.NavPageContainer}>
|
||||
<Link to="/guides" className={css.NavPageItem}>
|
||||
Guide
|
||||
</Link>
|
||||
<Link
|
||||
to="/developer"
|
||||
className={css.NavPageItem}
|
||||
>
|
||||
Developer
|
||||
</Link>
|
||||
<Link
|
||||
to="/api-reference"
|
||||
className={css.NavPageItem}
|
||||
>
|
||||
API Reference
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
.NavPageContainer {
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
align-items: right;
|
||||
}
|
||||
|
||||
.NavPageItem {
|
||||
margin: 0 30px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #262a2f;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -1,13 +1,48 @@
|
||||
import React from "react";
|
||||
import css from "./index.module.css";
|
||||
import NavPageContainer from "./NavPageContainer";
|
||||
import { NavLink, useLocation } from "react-router-dom";
|
||||
|
||||
export default function NavBarExtension() {
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
export default function NavBar() {
|
||||
return (
|
||||
<div className={css.NavBar}>
|
||||
<NavPageContainer />
|
||||
</div>
|
||||
<nav className="bg-white dark:bg-gray-800 h-12 px-10 pt-3 flex items-center justify-between fixed top-14 left-0 w-full z-50 hidden md:block">
|
||||
<div className="flex items-center space-x-16">
|
||||
<NavLink
|
||||
to="/docs"
|
||||
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
|
||||
activeClassName="text-gray-900 dark:text-gray-100 font-bold border-b-2 border-gray-900 dark:border-gray-100"
|
||||
>
|
||||
Docs
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/guides"
|
||||
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
|
||||
activeClassName={location.pathname !== "/guides/changelog" && location.pathname === "/guides" ? "text-gray-900 dark:text-gray-100 font-semibold border-b-2 border-gray-900 dark:border-gray-100" : ""}
|
||||
>
|
||||
Guide
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/developer"
|
||||
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
|
||||
activeClassName="text-gray-900 dark:text-gray-100 font-semibold border-b-2 border-gray-900 dark:border-gray-100"
|
||||
>
|
||||
Developer
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/api-reference"
|
||||
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
|
||||
activeClassName="text-gray-900 dark:text-gray-100 font-semibold border-b-2 border-gray-900 dark:border-gray-100"
|
||||
>
|
||||
API Reference
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/guides/changelog"
|
||||
className="text-gray-700 font-medium hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-200"
|
||||
activeClassName={location.pathname === "/guides/changelog" ? "text-gray-900 dark:text-gray-100 font-semibold border-b-2 border-gray-900 dark:border-gray-100" : ""}
|
||||
>
|
||||
Changelog
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
.NavBar {
|
||||
height: 3rem; /* Adjust height as needed */
|
||||
background-color: #fff;
|
||||
padding: 0.5rem 0.8rem; /* Adjust padding as needed */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* Align items to the start and end of the container */
|
||||
position: fixed; /* Fixed position to keep it on top */
|
||||
top: 55px; /* Position it at the top */
|
||||
left: 0; /* Position it at the left */
|
||||
width: 100%; /* Occupy full width of the viewport */
|
||||
z-index: 5; /* Ensure it's above other elements */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.NavBar {
|
||||
display: none; /* Hide the NavBar on mobile devices */
|
||||
}
|
||||
}
|
||||
@ -57,7 +57,11 @@ module.exports = {
|
||||
"sans-serif",
|
||||
],
|
||||
},
|
||||
extend: {},
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'custom-img': "url('/img/homepage-new/bg.png')",
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user