From 57dcde2a70768579fc52b05a18ba1c8a60f23a76 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Wed, 18 Oct 2023 00:53:21 +0700 Subject: [PATCH 1/6] Improving interfaces landing page --- docs/docusaurus.config.js | 89 +-------- docs/package.json | 3 + docs/src/components/Announcement/index.js | 78 ++++++++ docs/src/components/Elements/dropdown.js | 37 ++-- docs/src/components/Footer/index.js | 123 +++++++++++++ docs/src/components/Homepage/banner.js | 32 ---- docs/src/components/Homepage/downloads.js | 77 -------- docs/src/components/Homepage/hero.js | 102 ---------- docs/src/components/Homepage/index.js | 6 - docs/src/components/Homepage/sectionOne.js | 86 --------- docs/src/components/Homepage/sectionThree.js | 174 ------------------ docs/src/components/Homepage/sectionTwo.js | 82 --------- .../src/components/Homepage/styles.module.css | 11 -- docs/src/css/custom.css | 46 ----- docs/src/hooks/useAppRelease.js | 34 ++++ docs/src/hooks/useAppStars.js | 30 +++ docs/src/pages/index.js | 170 ++++++++++++++--- docs/src/pages/index.module.css | 23 --- docs/src/styles/base.scss | 45 +++++ docs/src/styles/components.scss | 18 ++ docs/src/styles/main.scss | 8 + docs/src/styles/tweaks.scss | 86 +++++++++ docs/src/styles/typography.scss | 42 +++++ docs/src/theme/Layout/Provider/index.js | 21 +++ docs/src/theme/Layout/index.js | 53 ++++++ docs/src/theme/Layout/styles.module.scss | 21 +++ docs/static/img/bg-hero-dark.svg | 167 +++++++++++++++++ docs/static/img/bg-hero-light.svg | 136 ++++++++++++++ docs/tailwind.config.js | 30 ++- docs/yarn.lock | 46 ++++- 30 files changed, 1107 insertions(+), 769 deletions(-) create mode 100644 docs/src/components/Announcement/index.js create mode 100644 docs/src/components/Footer/index.js delete mode 100644 docs/src/components/Homepage/banner.js delete mode 100644 docs/src/components/Homepage/downloads.js delete mode 100644 docs/src/components/Homepage/hero.js delete mode 100644 docs/src/components/Homepage/index.js delete mode 100644 docs/src/components/Homepage/sectionOne.js delete mode 100644 docs/src/components/Homepage/sectionThree.js delete mode 100644 docs/src/components/Homepage/sectionTwo.js delete mode 100644 docs/src/components/Homepage/styles.module.css delete mode 100644 docs/src/css/custom.css create mode 100644 docs/src/hooks/useAppRelease.js create mode 100644 docs/src/hooks/useAppStars.js delete mode 100644 docs/src/pages/index.module.css create mode 100644 docs/src/styles/base.scss create mode 100644 docs/src/styles/components.scss create mode 100644 docs/src/styles/main.scss create mode 100644 docs/src/styles/tweaks.scss create mode 100644 docs/src/styles/typography.scss create mode 100644 docs/src/theme/Layout/Provider/index.js create mode 100644 docs/src/theme/Layout/index.js create mode 100644 docs/src/theme/Layout/styles.module.scss create mode 100644 docs/static/img/bg-hero-dark.svg create mode 100644 docs/static/img/bg-hero-light.svg diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 61c46c04f5..1c32f901e4 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -34,6 +34,7 @@ const config = { // Plugins we added plugins: [ + "docusaurus-plugin-sass", async function myPlugin(context, options) { return { name: "docusaurus-tailwindcss", @@ -75,7 +76,7 @@ const config = { blog: false, // Will be passed to @docusaurus/theme-classic. theme: { - customCss: require.resolve("./src/css/custom.css"), + customCss: require.resolve("./src/styles/main.scss"), }, // Will be passed to @docusaurus/plugin-content-pages (false to disable) // pages: {}, @@ -153,86 +154,12 @@ const config = { // label: "API", // to: "/api", // }, - { - href: "https://github.com/janhq/jan", - label: "GitHub", - position: "right", - }, - ], - }, - footer: { - style: "dark", - links: [ - { - title: "Jan", - items: [ - { - label: "Home", - to: "/", - }, - { - label: "Platform", - to: "/platform", - }, - { - label: "Solutions", - to: "/solutions", - }, - ], - }, - { - title: "Docs", - items: [ - { - label: "Docs", - to: "/docs", - }, - { - label: "Hardware", - to: "/hardware", - }, - { - label: "API", - to: "/api", - }, - { - label: "Changelog", - to: "/changelog", - }, - ], - }, - { - title: "Community", - items: [ - { - label: "Discord", - href: "https://discord.gg/FTk2MvZwJH", - }, - { - label: "Twitter", - href: "https://twitter.com/jan_dotai", - }, - ], - }, - { - title: "Company", - items: [ - { - label: "About", - to: "/about", - }, - { - label: "Careers", - href: "https://janai.bamboohr.com/careers", - }, - { - label: "GitHub", - href: "https://github.com/janhq/jan", - }, - ], - }, + // { + // href: "https://github.com/janhq/jan", + // label: "GitHub", + // position: "right", + // }, ], - copyright: `Copyright © ${new Date().getFullYear()} Jan AI Pte Ltd.`, }, prism: { theme: lightCodeTheme, @@ -241,7 +168,7 @@ const config = { }, colorMode: { disableSwitch: false, - respectPrefersColorScheme: false, + respectPrefersColorScheme: true, }, }), }; diff --git a/docs/package.json b/docs/package.json index f69007ce20..709133d6a1 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,12 +23,15 @@ "autoprefixer": "^10.4.16", "axios": "^1.5.1", "clsx": "^1.2.1", + "docusaurus-plugin-sass": "^0.2.5", "js-yaml": "^4.1.0", "postcss": "^8.4.30", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.11.0", "redocusaurus": "^1.6.3", + "sass": "^1.69.3", "tailwindcss": "^3.3.3" }, "devDependencies": { diff --git a/docs/src/components/Announcement/index.js b/docs/src/components/Announcement/index.js new file mode 100644 index 0000000000..4e32a362c4 --- /dev/null +++ b/docs/src/components/Announcement/index.js @@ -0,0 +1,78 @@ +import React from "react"; + +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"; + +const socials = [ + { + icon: , + href: "https://twitter.com/jan_dotai", + }, + { + icon: , + href: "https://discord.com/invite/FTk2MvZwJH", + }, + { + icon: , + href: "https://github.com/janhq/jan", + }, +]; + +export default function AnnoncementBanner() { + const { stargazers } = useAppStars(); + const { release } = useAppRelease(); + + return ( +
+ +
+ ); +} diff --git a/docs/src/components/Elements/dropdown.js b/docs/src/components/Elements/dropdown.js index 3fcb39f84f..9800386e32 100644 --- a/docs/src/components/Elements/dropdown.js +++ b/docs/src/components/Elements/dropdown.js @@ -57,21 +57,24 @@ export default function Dropdown() { const updateDownloadLinks = async () => { try { const releaseInfo = await getLatestReleaseInfo("janhq", "jan"); - + // Extract appname from the first asset name const firstAssetName = releaseInfo.assets[0].name; const appname = extractAppName(firstAssetName); - + if (!appname) { - console.error("Failed to extract appname from file name:", firstAssetName); + console.error( + "Failed to extract appname from file name:", + firstAssetName + ); return; } - + // Remove 'v' at the start of the tag_name const tag = releaseInfo.tag_name.startsWith("v") ? releaseInfo.tag_name.substring(1) : releaseInfo.tag_name; - + const updatedSystems = systems.map((system) => { const downloadUrl = system.fileFormat .replace("{appname}", appname) @@ -81,21 +84,21 @@ export default function Dropdown() { href: `https://github.com/janhq/jan/releases/download/${releaseInfo.tag_name}/${downloadUrl}`, }; }); - + setSystems(updatedSystems); setDefaultSystem(updatedSystems[0]); } catch (error) { console.error("Failed to update download links:", error); } }; - + updateDownloadLinks(); }, []); return (
- + Open OS options - - -
+ +
{systems.map((system) => ( {({ active }) => ( Logo - {system.name} + {system.name} )} diff --git a/docs/src/components/Footer/index.js b/docs/src/components/Footer/index.js new file mode 100644 index 0000000000..f52dd919d9 --- /dev/null +++ b/docs/src/components/Footer/index.js @@ -0,0 +1,123 @@ +import React from "react"; + +const menus = [ + { + name: "Resources", + child: [ + { + menu: "Home", + path: "/", + }, + { + menu: "Platform", + path: "/platform", + }, + { + menu: "Solutions", + path: "/solutions", + }, + ], + }, + { + name: "For Developers", + child: [ + { + menu: "Documentations", + path: "/docs", + }, + { + menu: "Hardware", + path: "/hardware", + }, + { + menu: "API", + path: "/api", + }, + { + menu: "Changelog", + path: "/changelog", + }, + ], + }, + { + name: "Community", + child: [ + { + menu: "Github", + path: "https://github.com/janhq/jan", + external: true, + }, + { + menu: "Discord", + path: "https://discord.gg/FTk2MvZwJH", + external: true, + }, + { + menu: "Twitter", + path: "https://twitter.com/jan_dotai", + external: true, + }, + ], + }, + { + name: "Company", + child: [ + { + menu: "About", + path: "/about", + }, + { + menu: "Careers", + path: "https://janai.bamboohr.com/careers", + external: true, + }, + ], + }, +]; + +const getCurrentYear = new Date().getFullYear(); + +export default function Footer() { + return ( +
+
+
+
+
Jan
+

+ is a source-available, cross device, and privacy focused AI engine + and Desktop app that runs locally on your machine. +

+
+ {menus.map((menu, i) => { + return ( +
+
{menu.name}
+ +
+ ); + })} +
+
+
+ + ©{getCurrentYear} Jan AI Pte Ltd. + +
+
+ ); +} diff --git a/docs/src/components/Homepage/banner.js b/docs/src/components/Homepage/banner.js deleted file mode 100644 index 24520e7473..0000000000 --- a/docs/src/components/Homepage/banner.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; -import { XMarkIcon } from "@heroicons/react/20/solid"; -import { useColorMode } from "@docusaurus/theme-common"; - -export default function HomepageBanner() { - const { colorMode } = useColorMode(); - const bannerText = - "🚧 This site is under construction - expect breaking changes! 🚧"; - return colorMode === "dark" ? ( -
- {bannerText} -
- ) : ( -
- - ); -} diff --git a/docs/src/components/Homepage/downloads.js b/docs/src/components/Homepage/downloads.js deleted file mode 100644 index f14ebf8f63..0000000000 --- a/docs/src/components/Homepage/downloads.js +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; -import { - ArrowPathIcon, - CloudArrowUpIcon, - LockClosedIcon, -} from "@heroicons/react/20/solid"; - -const systems = [ - { - name: "Mac", - description: - "Commodo nec sagittis tortor mauris sed. Turpis tortor quis scelerisque diam id accumsan nullam tempus. Pulvinar etiam lacus volutpat eu. Phasellus praesent ligula sit faucibus.", - href: "#", - icon: CloudArrowUpIcon, - }, - { - name: "Windows", - description: - "Pellentesque enim a commodo malesuada turpis eleifend risus. Facilisis donec placerat sapien consequat tempor fermentum nibh.", - href: "#", - icon: LockClosedIcon, - }, - { - name: "Linux", - description: - "Pellentesque sit elit congue ante nec amet. Dolor aenean curabitur viverra suspendisse iaculis eget. Nec mollis placerat ultricies euismod ut condimentum.", - href: "#", - icon: ArrowPathIcon, - }, -]; - -export default function HomepageDownloads() { - return ( -
-
-
-

- Run AI on any OS -

-

- Downloads -

-

- Jan is compatible with all major operating systems. Download the - latest stable versions here. -

-
-
-
- {systems.map((system) => ( -
-
-
-
-

{system.description}

-

- - Learn more - -

-
-
- ))} -
-
-
-
- ); -} diff --git a/docs/src/components/Homepage/hero.js b/docs/src/components/Homepage/hero.js deleted file mode 100644 index da3fa8e933..0000000000 --- a/docs/src/components/Homepage/hero.js +++ /dev/null @@ -1,102 +0,0 @@ -import React from "react"; -import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid"; -import { useColorMode } from "@docusaurus/theme-common"; -import Dropdown from "@site/src/components/Elements/dropdown"; - -export default function HomepageHero() { - const { colorMode } = useColorMode(); - - return ( -
-
- {/* Background top gradient styling */} - {colorMode === "dark" ? ( -

{release.tagVersion} -  is now live on GitHub. Check it out +  is now live on GitHub. Check it out!

diff --git a/docs/src/components/Footer/index.js b/docs/src/components/Footer/index.js index f52dd919d9..6405fc4126 100644 --- a/docs/src/components/Footer/index.js +++ b/docs/src/components/Footer/index.js @@ -85,8 +85,8 @@ export default function Footer() {
Jan

- is a source-available, cross device, and privacy focused AI engine - and Desktop app that runs locally on your machine. + Run Large Language Models locally on Windows, Mac and Linux. + Available on Desktop and Cloud-Native.

{menus.map((menu, i) => { diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 64bd340609..f2af390816 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -54,10 +54,7 @@ export default function Home() { return ( <> - +
@@ -86,8 +83,8 @@ export default function Home() { Run Your Own AI

- Run large Language Models locally on  - Macbook + Run Large Language Models locally on  + Mac ,  Windows  or  @@ -133,8 +130,8 @@ export default function Home() {

AI that you control

- Jan is a source-available, cross device, and privacy focused AI - engine and Desktop app that runs locally on your machine. + Jan runs Large Language Models locally on Windows, Mac and Linux. + Available on Desktop and Cloud-Native.

{features.map((feat, i) => { From dd7819e0f6cc0a3830520bb8b3356b61cae7ed86 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Wed, 18 Oct 2023 10:04:11 +0700 Subject: [PATCH 3/6] Missing release tag --- docs/src/hooks/useAppRelease.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/src/hooks/useAppRelease.js b/docs/src/hooks/useAppRelease.js index a75d6f0164..2a02ea00ac 100644 --- a/docs/src/hooks/useAppRelease.js +++ b/docs/src/hooks/useAppRelease.js @@ -12,12 +12,9 @@ export const useAppRelease = () => { useEffect(() => { const updateStargazers = async () => { try { - const { data } = - (await axios.get) < - { - tag_name: string, - } > - "https://api.github.com/repos/janhq/jan/releases/latest"; + const { data } = await axios.get( + "https://api.github.com/repos/janhq/jan/releases/latest" + ); setRelease({ tagVersion: data.tag_name, }); From 0533a57a6a6d82e5aa5e96e27191625ea42201ea Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Wed, 18 Oct 2023 10:07:10 +0700 Subject: [PATCH 4/6] Set default theme into dark mode --- docs/docusaurus.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 1c32f901e4..8ffebf68b2 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -167,8 +167,9 @@ const config = { additionalLanguages: ["python"], }, colorMode: { + defaultMode: "dark", disableSwitch: false, - respectPrefersColorScheme: true, + respectPrefersColorScheme: false, }, }), }; From 2b42efc346fa9d25e484a4305e2b1555047ee780 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Wed, 18 Oct 2023 10:12:59 +0700 Subject: [PATCH 5/6] Make url in docusaurus documentation more visible --- docs/src/styles/tweaks.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/src/styles/tweaks.scss b/docs/src/styles/tweaks.scss index a1158b8309..08c49d9fd2 100644 --- a/docs/src/styles/tweaks.scss +++ b/docs/src/styles/tweaks.scss @@ -84,3 +84,12 @@ .table-of-contents__left-border { @apply border-gray-200 dark:border-gray-800; } + +.docMainContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Main-styles-module, +.docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { + table { + a { + @apply text-blue-600 dark:text-blue-400; + } + } +} From 1534a82224a37936f84bbbab2c03c6aa8794f9fc Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Wed, 18 Oct 2023 10:21:17 +0700 Subject: [PATCH 6/6] Make hero section into single column --- docs/src/pages/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index f2af390816..de49d2b7e6 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -66,8 +66,8 @@ export default function Home() { className="absolute w-full h-full opacity-30 dark:opacity-20 top-0 object-cover blur-3xl" />
-
-
+
+
Event @@ -91,7 +91,7 @@ export default function Home() { Linux.

-
+
-
+