diff --git a/docs/src/containers/Banner/index.js b/docs/src/containers/Banner/index.js index 07622c63d..00d75467e 100644 --- a/docs/src/containers/Banner/index.js +++ b/docs/src/containers/Banner/index.js @@ -1,32 +1,38 @@ -import React from "react"; +import React from 'react' -import { useAppStars } from "@site/src/hooks/useAppStars"; -import { useAppRelease } from "@site/src/hooks/useAppRelease"; +import { useAppStars } from '@site/src/hooks/useAppStars' +import { useAppRelease } from '@site/src/hooks/useAppRelease' -import { AiOutlineGithub, AiOutlineTwitter } from "react-icons/ai"; -import { BiLogoDiscordAlt } from "react-icons/bi"; +import { AiOutlineGithub, AiOutlineTwitter } from 'react-icons/ai' +import { BiLogoDiscordAlt } from 'react-icons/bi' const socials = [ { icon: , - href: "https://twitter.com/janframework", + href: 'https://twitter.com/janframework', }, { icon: , - href: "https://discord.com/invite/FTk2MvZwJH", + href: 'https://discord.com/invite/FTk2MvZwJH', }, { icon: , - href: "https://github.com/janhq/jan", + href: 'https://github.com/janhq/jan', }, -]; +] export default function AnnoncementBanner() { - const { stargazers } = useAppStars(); - const { release } = useAppRelease(); + const { stargazers } = useAppStars() + const { release } = useAppRelease() return ( -
+
{social.icon} - ); + ) })}
- ); + ) } diff --git a/docs/src/containers/Elements/dropdown.js b/docs/src/containers/Elements/dropdown.js index 91115c811..00176fdf2 100644 --- a/docs/src/containers/Elements/dropdown.js +++ b/docs/src/containers/Elements/dropdown.js @@ -1,134 +1,134 @@ -import React, { useState, useEffect } from "react"; -import { Fragment } from "react"; -import { Menu, Transition } from "@headlessui/react"; -import { ChevronDownIcon } from "@heroicons/react/20/solid"; -import axios from "axios"; -import { FaWindows, FaApple, FaLinux } from "react-icons/fa"; +import React, { useState, useEffect } from 'react' +import { Fragment } from 'react' +import { Menu, Transition } from '@headlessui/react' +import { ChevronDownIcon } from '@heroicons/react/20/solid' +import axios from 'axios' +import { FaWindows, FaApple, FaLinux } from 'react-icons/fa' const systemsTemplate = [ { - name: "Download for Mac (M1/M2/M3)", + name: 'Download for Mac (M1/M2/M3)', logo: FaApple, - fileFormat: "{appname}-mac-arm64-{tag}.dmg", + fileFormat: '{appname}-mac-arm64-{tag}.dmg', }, { - name: "Download for Mac (Intel)", + name: 'Download for Mac (Intel)', logo: FaApple, - fileFormat: "{appname}-mac-x64-{tag}.dmg", + fileFormat: '{appname}-mac-x64-{tag}.dmg', }, { - name: "Download for Windows", + name: 'Download for Windows', logo: FaWindows, - fileFormat: "{appname}-win-x64-{tag}.exe", + fileFormat: '{appname}-win-x64-{tag}.exe', }, { - name: "Download for Linux (AppImage)", + name: 'Download for Linux (AppImage)', logo: FaLinux, - fileFormat: "{appname}-linux-x86_64-{tag}.AppImage", + fileFormat: '{appname}-linux-x86_64-{tag}.AppImage', }, { - name: "Download for Linux (deb)", + name: 'Download for Linux (deb)', logo: FaLinux, - fileFormat: "{appname}-linux-amd64-{tag}.deb", - } -]; + fileFormat: '{appname}-linux-amd64-{tag}.deb', + }, +] function classNames(...classes) { - return classes.filter(Boolean).join(" "); + return classes.filter(Boolean).join(' ') } export default function Dropdown() { - const [systems, setSystems] = useState(systemsTemplate); - const [defaultSystem, setDefaultSystem] = useState(systems[0]); + const [systems, setSystems] = useState(systemsTemplate) + const [defaultSystem, setDefaultSystem] = useState(systems[0]) const getLatestReleaseInfo = async (repoOwner, repoName) => { - const url = `https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`; + const url = `https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest` try { - const response = await axios.get(url); - return response.data; + const response = await axios.get(url) + return response.data } catch (error) { - console.error(error); - return null; + console.error(error) + return null } - }; + } const extractAppName = (fileName) => { // Extract appname using a regex that matches the provided file formats - const regex = /^(.*?)-(?:mac|win|linux)-(?:arm64|x64|x86_64|amd64)-.*$/; - const match = fileName.match(regex); - return match ? match[1] : null; - }; + const regex = /^(.*?)-(?:mac|win|linux)-(?:arm64|x64|x86_64|amd64)-.*$/ + const match = fileName.match(regex) + return match ? match[1] : null + } const changeDefaultSystem = async (systems) => { - const userAgent = navigator.userAgent; + const userAgent = navigator.userAgent - if (userAgent.includes("Windows")) { + if (userAgent.includes('Windows')) { // windows user - setDefaultSystem(systems[2]); - } else if (userAgent.includes("Linux")) { + setDefaultSystem(systems[2]) + } else if (userAgent.includes('Linux')) { // linux user - setDefaultSystem(systems[3]); - } else if (userAgent.includes("Mac OS")) { - setDefaultSystem(systems[0]); + setDefaultSystem(systems[3]) + } else if (userAgent.includes('Mac OS')) { + setDefaultSystem(systems[0]) } else { - setDefaultSystem(systems[1]); + setDefaultSystem(systems[1]) } - }; + } useEffect(() => { const updateDownloadLinks = async () => { try { - const releaseInfo = await getLatestReleaseInfo("janhq", "jan"); + const releaseInfo = await getLatestReleaseInfo('janhq', 'jan') // Extract appname from the first asset name - const firstAssetName = releaseInfo.assets[0].name; - const appname = extractAppName(firstAssetName); + const firstAssetName = releaseInfo.assets[0].name + const appname = extractAppName(firstAssetName) if (!appname) { console.error( - "Failed to extract appname from file name:", + 'Failed to extract appname from file name:', firstAssetName - ); - changeDefaultSystem(systems); - return; + ) + changeDefaultSystem(systems) + return } // Remove 'v' at the start of the tag_name - const tag = releaseInfo.tag_name.startsWith("v") + const tag = releaseInfo.tag_name.startsWith('v') ? releaseInfo.tag_name.substring(1) - : releaseInfo.tag_name; + : releaseInfo.tag_name const updatedSystems = systems.map((system) => { const downloadUrl = system.fileFormat - .replace("{appname}", appname) - .replace("{tag}", tag); + .replace('{appname}', appname) + .replace('{tag}', tag) return { ...system, href: `https://github.com/janhq/jan/releases/download/${releaseInfo.tag_name}/${downloadUrl}`, - }; - }); + } + }) - setSystems(updatedSystems); - changeDefaultSystem(updatedSystems); + setSystems(updatedSystems) + changeDefaultSystem(updatedSystems) } catch (error) { - console.error("Failed to update download links:", error); + console.error('Failed to update download links:', error) } - }; + } - updateDownloadLinks(); - }, []); + updateDownloadLinks() + }, []) return (
{defaultSystem.name} - + Open OS options @@ -141,7 +141,7 @@ export default function Dropdown() { leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - +
{systems.map((system) => ( {({ active }) => ( - + {system.name} @@ -171,5 +171,5 @@ export default function Dropdown() {
- ); + ) } diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index b5cd6ee80..1e5add4a6 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -1,31 +1,31 @@ -import React from "react"; -import DownloadApp from "@site/src/containers/DownloadApp"; +import React from 'react' +import DownloadApp from '@site/src/containers/DownloadApp' -import useBaseUrl from "@docusaurus/useBaseUrl"; -import Layout from "@theme/Layout"; -import Banner from "@site/src/containers/Banner"; +import useBaseUrl from '@docusaurus/useBaseUrl' +import Layout from '@theme/Layout' +import Banner from '@site/src/containers/Banner' -import ThemedImage from "@theme/ThemedImage"; +import ThemedImage from '@theme/ThemedImage' -import SocialButton from "@site/src/containers/SocialButton"; +import SocialButton from '@site/src/containers/SocialButton' -import { IoArrowDown } from "react-icons/io5"; +import { IoArrowDown } from 'react-icons/io5' -import Dropdown from "@site/src/containers/Elements/dropdown"; +import Dropdown from '@site/src/containers/Elements/dropdown' -import useIsBrowser from "@docusaurus/useIsBrowser"; +import useIsBrowser from '@docusaurus/useIsBrowser' export default function Home() { - const isBrowser = useIsBrowser(); + const isBrowser = useIsBrowser() const handleAnchorLink = () => { document - .getElementById("download-section") - .scrollIntoView({ behavior: "smooth" }); - }; + .getElementById('download-section') + .scrollIntoView({ behavior: 'smooth' }) + } - const userAgent = isBrowser && navigator.userAgent; - const isBrowserChrome = isBrowser && userAgent.includes("Chrome"); + const userAgent = isBrowser && navigator.userAgent + const isBrowserChrome = isBrowser && userAgent.includes('Chrome') return ( <> @@ -35,78 +35,37 @@ export default function Home() { description="Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable." >
-
-
- Element blur -
- Jan Logo - - Meet Jan - -
-

- Bringing AI to
your Desktop{" "} - - Element hero heading - -

-

- Open-source ChatGPT alternative that runs{" "} -
100% offline on your - computer. -

-
-
- {!isBrowserChrome ? ( -
handleAnchorLink()} - className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white scroll-smooth" - > - Download Jan for PC -
- ) : ( - - )} -
- -
handleAnchorLink()} - className="hidden lg:inline-block cursor-pointer" - > -
-

Find out more

- +
+

+ Rethink the Computer +

+

+ Turn your computer into a{' '} + + AI machine + +

+
+ {!isBrowserChrome ? ( +
handleAnchorLink()} + className="inline-flex px-4 py-3 rounded-lg text-lg font-semibold cursor-pointer justify-center items-center space-x-2 dark:bg-white dark:text-black bg-black text-white dark:hover:text-black hover:text-white scroll-smooth" + > + Download Jan for PC
-
-
- -
-
- -
+ ) : ( + + )}
+

+ + 400K+ + {' '} + downloads | Free & Open Source +

-
@@ -115,9 +74,9 @@ export default function Home() {
-
+
*/} -
+ {/*
-
+
*/} -
+ {/*
@@ -170,8 +129,8 @@ export default function Home() {

10x productivity - {" "} - with customizable AI
{" "} + {' '} + with customizable AI
{' '} assistants, global hotkeys, and in-line AI.

@@ -182,10 +141,10 @@ export default function Home() { alt="App screenshots" sources={{ light: useBaseUrl( - "/img/homepage/desktop-app-light.webp" + '/img/homepage/desktop-app-light.webp' ), dark: useBaseUrl( - "/img/homepage/desktop-app-dark.webp" + '/img/homepage/desktop-app-dark.webp' ), }} /> @@ -194,9 +153,9 @@ export default function Home() {
-
+
*/} -
+ {/*
@@ -210,7 +169,7 @@ export default function Home() {

- Take your AI assistants on the go.{" "} + Take your AI assistants on the go.{' '}
Seamless integration into your  @@ -226,10 +185,10 @@ export default function Home() { alt="App screenshots" sources={{ light: useBaseUrl( - "/img/homepage/mobile-app-light.webp" + '/img/homepage/mobile-app-light.webp' ), dark: useBaseUrl( - "/img/homepage/mobile-app-dark.webp" + '/img/homepage/mobile-app-dark.webp' ), }} /> @@ -238,9 +197,9 @@ export default function Home() {

-
+ */} -
+ {/*
@@ -266,7 +225,7 @@ export default function Home() { Offline and Local First

- Conversations, preferences, and model usage stay on{" "} + Conversations, preferences, and model usage stay on{' '}
your computer—secure, exportable, and can be deleted at any time.

@@ -278,12 +237,12 @@ export default function Home() { OpenAI Compatible

- Jan provides an OpenAI-equivalent API{" "} + Jan provides an OpenAI-equivalent API{' '}
server at  localhost:  1337 - {" "} + {' '} that can be used as a drop-in replacement with compatible apps.

@@ -332,9 +291,16 @@ export default function Home() {
-
+
*/} + + {/*
+
+

Rethink the Computer

+

Turn your computer into a AI machine

+
+
*/} - ); + ) } diff --git a/docs/src/styles/components/base.scss b/docs/src/styles/components/base.scss index 41af09c12..8e1dd3cac 100644 --- a/docs/src/styles/components/base.scss +++ b/docs/src/styles/components/base.scss @@ -1,5 +1,5 @@ @layer base { - html[data-theme="light"] { + html[data-theme='light'] { --custom-radial-blur: #e1e7fd; --ifm-background-color: #fff; --ifm-color-primary: #2563eb; /* New Primary Blue */ @@ -14,7 +14,7 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } - html[data-theme="dark"] { + html[data-theme='dark'] { --custom-radial-blur: #1d1b48; --ifm-background-color: #18181b; --ifm-color-primary: #ffffff; /* New Primary Blue */ @@ -35,7 +35,7 @@ body { @apply text-base; @apply antialiased; - @apply bg-white dark:bg-[#18181B]; + @apply bg-white dark:bg-[#0C0C0C]; } img { diff --git a/docs/src/styles/main.scss b/docs/src/styles/main.scss index 4c6fc7151..3647be1b3 100644 --- a/docs/src/styles/main.scss +++ b/docs/src/styles/main.scss @@ -1,15 +1,17 @@ -@import "tailwindcss/base"; -@import "tailwindcss/components"; -@import "tailwindcss/utilities"; +@import url('https://fonts.googleapis.com/css2?family=Arapey&family=Inter:wght@100..900&display=swap'); -@import "./components/base.scss"; -@import "./components/typography.scss"; -@import "./components/card.scss"; +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; -@import "./tweaks/navbar.scss"; -@import "./tweaks/breadcrumb.scss"; -@import "./tweaks/markdown.scss"; -@import "./tweaks/redocusaurus.scss"; -@import "./tweaks/sidebar.scss"; +@import './components/base.scss'; +@import './components/typography.scss'; +@import './components/card.scss'; -@import "../css/custom.css"; \ No newline at end of file +@import './tweaks/navbar.scss'; +@import './tweaks/breadcrumb.scss'; +@import './tweaks/markdown.scss'; +@import './tweaks/redocusaurus.scss'; +@import './tweaks/sidebar.scss'; + +@import '../css/custom.css'; diff --git a/docs/src/styles/tweaks/navbar.scss b/docs/src/styles/tweaks/navbar.scss index 789c2f48a..385ebb94d 100644 --- a/docs/src/styles/tweaks/navbar.scss +++ b/docs/src/styles/tweaks/navbar.scss @@ -2,7 +2,7 @@ @apply bg-transparent py-0 shadow-none px-0; &__inner { - @apply border border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-[#09090B]/50 backdrop-blur-md flex items-center h-14 px-4 lg:px-8 relative; + @apply border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-[#09090B]/50 backdrop-blur-md flex items-center h-14 px-4 lg:px-8 relative; } &__logo { @@ -19,7 +19,7 @@ font-size: 18px; } - [class*="searchBox_"] { + [class*='searchBox_'] { display: none; } } diff --git a/docs/src/theme/Layout/index.js b/docs/src/theme/Layout/index.js index 9c2ae32db..cb4ff844c 100644 --- a/docs/src/theme/Layout/index.js +++ b/docs/src/theme/Layout/index.js @@ -1,23 +1,33 @@ -import React from "react"; -import clsx from "clsx"; -import ErrorBoundary from "@docusaurus/ErrorBoundary"; +import React from 'react' +import clsx from 'clsx' +import ErrorBoundary from '@docusaurus/ErrorBoundary' import { PageMetadata, SkipToContentFallbackId, ThemeClassNames, -} from "@docusaurus/theme-common"; -import { useKeyboardNavigation } from "@docusaurus/theme-common/internal"; -import SkipToContent from "@theme/SkipToContent"; -import AnnouncementBar from "@theme/AnnouncementBar"; -import Navbar from "@theme/Navbar"; -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"; +} from '@docusaurus/theme-common' +import { useKeyboardNavigation } from '@docusaurus/theme-common/internal' +import SkipToContent from '@theme/SkipToContent' +import AnnouncementBar from '@theme/AnnouncementBar' +import Navbar from '@theme/Navbar' +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", "/changelog"]; +const allowedPaths = [ + '/docs/', + '/developer/', + '/api-reference/', + '/guides/', + '/guides', + '/docs', + '/developer', + '/api-reference', + '/changelog', +] export default function Layout(props) { const { @@ -27,12 +37,14 @@ export default function Layout(props) { // Not really layout-related, but kept for convenience/retro-compatibility title, description, - } = props; - useKeyboardNavigation(); + } = props + useKeyboardNavigation() - const location = useLocation(); + const location = useLocation() - const isAllowedPath = allowedPaths.some(path => location.pathname.startsWith(path)); + const isAllowedPath = allowedPaths.some((path) => + location.pathname.startsWith(path) + ) return ( @@ -42,20 +54,19 @@ export default function Layout(props) { - + - {isAllowedPath ? : ""} + {isAllowedPath ? : ''} {/* {console.log("Is allowed path?", location.pathname)} */} -
}> @@ -65,5 +76,5 @@ export default function Layout(props) { {!noFooter &&