Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve structure scss

Browse Source
This commit is contained in:
Faisal Amir 2023-11-28 13:19:45 +07:00
parent d63c9c3d46
commit 8586b3ec9e
14 changed files with 203 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
docs/src/pages/index.js
View File

@ -16,267 +16,31 @@ export default function Home() {
const { siteConfig } = useDocusaurusContext();
return (
<>
<AnnoncementBanner />
{/* <AnnoncementBanner /> */}
<Layout
title={`${siteConfig.tagline}`}
description="Jan is a ChatGPT-alternative that runs on your own computer, with a local API server."
>
<main className="bg-gray-50 dark:bg-gray-950/95 relative">
<div className="relative">
<ThemedImage
alt="App screenshot"
sources={{
light: useBaseUrl("/img/bg-hero-light.svg"),
dark: useBaseUrl("/img/bg-hero-dark.svg"),
}}
className="absolute w-full h-full opacity-10 dark:opacity-20 top-0 object-cover blur-3xl"
/>
<div className="container pt-16">
<div className="grid grid-cols-1 items-center gap-4">
<div className="relative z-10 text-center ">
{/* TODO: Add upcoming events here */}
{/* <div className="bg-red-50 mb-4 inline-flex items-center py-1 rounded-full px-4 gap-x-2">
<span className="font-bold uppercase text-blue-600">
Event
</span>
<a href="/events/nvidia-llm-day-nov-23">
<p className="font-bold">
8 Nov 2023: Nvidia LLM Day (Hanoi)
</p>
</a>
</div> */}
<h1 className="bg-gradient-to-r dark:from-white from-black to-gray-500 dark:to-gray-400 bg-clip-text text-4xl lg:text-6xl font-bold leading-tight text-transparent dark:text-transparent lg:leading-tight">
<main>
<div className="container">
<div className="grid grid-cols-1 lg:grid-cols-12 mt-10 gap-8 items-center">
<div className="col-span-7">
<h1 className="bg-gradient-to-b dark:from-white from-black to-gray-700 dark:to-gray-400 bg-clip-text text-7xl font-semibold leading-tight text-transparent dark:text-transparent lg:leading-tight">
Own your AI
</h1>
<p className="text-xl leading-relaxed lg:text-2xl lg:leading-relaxed text-gray-500 dark:text-gray-400">
A &nbsp;
<span className="dark:text-white text-black">
free, open-source
</span>
&nbsp;alternative to OpenAI
<br />
&nbsp;that runs on your&nbsp;
<span className="dark:text-white text-black">
personal computer
</span>
</p>
<div className="my-6 flex flex-col-reverse md:flex-row items-center justify-center gap-4 relative z-20">
<button
type="button"
className="cursor-pointer relative hidden md:inline-flex items-center px-4 py-2.5 text-base font-semibold rounded-lg border border-gray-400 dark:border-gray-700 text-gray-600 dark:text-white"
onClick={() =>
window.open(
"https://github.com/janhq/jan",
"_blank",
"noreferrer"
)
}
>
View Github
</button>
<Dropdown />
</div>
</div>
<div className="text-center relative ">
<div className="p-3 border dark:border-gray-500 border-gray-400 inline-block rounded-lg">
<ThemedImage
alt="App screenshot"
sources={{
light: useBaseUrl("/img/desktop-llm-chat-light.png"),
dark: useBaseUrl("/img/desktop-llm-chat-dark.png"),
}}
width={1000}
className="rounded-md mx-auto"
/>
</div>
</div>
</div>
</div>
</div>
<div className="container mt-40 text-center">
<h2>AI that you control</h2>
<p className="text-base mt-2 w-full lg:w-2/5 mx-auto leading-relaxed">
Private. Local. Infinitely Customizable.
</p>
<div className="grid text-left lg:grid-cols-2 mt-16 gap-4">
<div className="card relative min-h-[380px] lg:min-h-[460px]">
<img
src="/img/card-element.png"
alt="Element"
className="absolute w-full bottom-0 left-0"
/>
<div className="p-8 relative z-40">
<h5>Personal AI that runs on your computer</h5>
<p className="mt-2">
Jan runs directly on your local machine, offering privacy,
convenience and customizability.
</p>
<ThemedImage
alt="Group Chat"
sources={{
light: useBaseUrl("/img/group-chat-light.png"),
dark: useBaseUrl("/img/group-chat-dark.png"),
}}
className="mt-10"
/>
</div>
</div>
<div className="card relative min-h-[380px] lg:min-h-[460px]">
<div className="p-8">
<h5>Extendable via App and Plugin framework</h5>
<p className="mt-2">
Jan has a versatile app and plugin framework, allowing you
to customize it to your needs.
<p className="text-2xl mt-1">
Jan is an open-source alternative to ChatGPT that runs on your
own computer
</p>
</div>
<ThemedImage
alt="Framework"
sources={{
light: useBaseUrl("/img/card-framework-light.png"),
dark: useBaseUrl("/img/card-framework-dark.png"),
}}
className="w-11/12 ml-auto mt-auto"
/>
</div>
<div className="card relative min-h-[380px] lg:min-h-[460px]">
<div className="p-8">
<h5>
Private and offline, your data never leaves your machine
</h5>
<p className="mt-2">
Your conversations and data are with an AI that runs on your
computer, where only you have access.
</p>
</div>
<ThemedImage
alt="Group Chat"
sources={{
light: useBaseUrl("/img/card-nitro-light.png"),
dark: useBaseUrl("/img/card-nitro-dark.png"),
}}
className="w-3/4 mx-auto mt-auto"
/>
</div>
<div className="card relative min-h-[380px] lg:min-h-[460px]">
<div className="p-8">
<h5>No subscription fees, the AI runs on your computer</h5>
<p className="mt-2">
Say goodbye to monthly subscriptions or usage-based APIs.
Jan runs 100% free on your own hardware.
</p>
</div>
<ThemedImage
alt="Group Chat"
sources={{
light: useBaseUrl("/img/card-free-light.png"),
dark: useBaseUrl("/img/card-free-dark.png"),
}}
className="w-full mt-auto mx-auto"
/>
</div>
</div>
</div>
<div className="container lg:px-20 py-40 lg:py-[200px] text-center lg:text-left">
<div className="flex flex-col lg:flex-row space-y-20 lg:space-y-0">
<div>
<h1 className="bg-gradient-to-r dark:from-white from-black to-gray-500 dark:to-gray-400 bg-clip-text text-4xl lg:text-6xl font-bold leading-tight text-transparent dark:text-transparent lg:leading-tight">
Your AI, forever.
</h1>
<p className="text-lg lg:text-2xl mt-2">
Apps come and go, but your AI and data should last.{" "}
</p>
<div className="w-full lg:w-3/4 mt-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-24">
<div>
<img
src="/img/ic-park-solid-unlock.svg"
alt="Icon - Lock"
className="w-8 mb-4 mx-auto lg:mx-0"
/>
<div className="col-span-5">
<p>
Jan uses open, standard and non-proprietary files stored
locally on your device.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Error explicabo aperiam molestias neque quod ad id dolorum
adipisci dicta magni possimus, tempore temporibus magnam nisi
harum veritatis eaque molestiae suscipit.
</p>
</div>
<div>
<img
src="img/ic-baseline-control-camera.svg"
alt="Icon - Camera"
className="w-8 mb-4 mx-auto lg:mx-0"
/>
<p>
You have total control over your AI, which means you can
use Jan offline and switch to another app easily if you
want.
</p>
</div>
</div>
</div>
</div>
<div className="w-full lg:w-80 text-center">
<ThemedImage
alt="App screenshot"
sources={{
light: useBaseUrl("/img/jan-icon-light.png"),
dark: useBaseUrl("/img/jan-icon-dark.png"),
}}
className="w-40 lg:w-full mx-auto"
/>
<p className="mt-1 font-bold">100% free on your own hardware</p>
<DownloadLink />
</div>
</div>
</div>
<div className="container pb-40 text-center">
<h2>
We are open-source. <br /> Join Jan community.
</h2>
<div className="mt-14">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<a href="https://discord.com/invite/FTk2MvZwJH" target="_blank">
<div className="card h-52 relative flex items-center justify-center">
<div className="relative z-50">
<img
src="/img/discord-logo.png"
alt="Discord logo"
className="w-28"
/>
</div>
<div className="card-link card-link-bg dark:card-link-bg-dark absolute right-4 top-5">
Join our Discord
</div>
<ThemedImage
alt="Discord Element"
sources={{
light: useBaseUrl("/img/discord-element-light.png"),
dark: useBaseUrl("/img/discord-element-dark.png"),
}}
className="absolute"
/>
</div>
</a>
<a href="https://github.com/janhq/jan" target="_blank">
<div className="card h-52 relative flex items-center justify-center">
<div className="relative z-50">
<AiOutlineGithub className="text-8xl dark:text-white text-black" />
</div>
<div className="card-link card-link-bg dark:card-link-bg-dark absolute right-4 top-5">
View Github
</div>
<img
alt="Github Element"
src="/img/github-element-dark.png"
className="absolute left-8"
/>
</div>
</a>
</div>
</div>
</div>
</main>

18
docs/src/styles/components.scss
View File

@ -1,18 +0,0 @@
@layer components {
.el-blur-hero {
height: 200px;
background: linear-gradient(
180deg,
hsl(296, 100%, 67%) 0%,
hsl(253, 100%, 57%) 100%
);
z-index: 2;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
filter: blur(100px);
-webkit-filter: blur(100px);
opacity: 0.5;
}
}

17
docs/src/styles/base.scss → docs/src/styles/components/base.scss
View File

@ -1,7 +1,8 @@
@layer base {
html[data-theme="light"] {
--ifm-background-color: white;
--custom-radial-blur: #e1e7fd;
--ifm-background-color: #fafafa;
--ifm-color-primary: #2563eb; /* New Primary Blue */
--ifm-color-primary-dark: #204fcf; /* Darker Blue */
--ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
@ -13,8 +14,10 @@
--ifm-navbar-link-hover-color: inherit;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
html[data-theme="dark"] {
--ifm-background-color: black;
--custom-radial-blur: #1d1b48;
--ifm-background-color: #18181b;
--ifm-color-primary: #ffffff; /* New Primary Blue */
--ifm-color-primary-dark: #204fcf; /* Darker Blue */
--ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
@ -24,12 +27,18 @@
--ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
pre,
code {
@apply text-sm;
}
body {
@apply text-base;
@apply antialiased;
@apply bg-white dark:bg-black;
@apply text-gray-800 dark:text-gray-300;
@apply bg-[#FAFAFA] dark:bg-[#18181B];
}
img {
pointer-events: none;
}

0
docs/src/styles/card.scss → docs/src/styles/components/card.scss
View File

0
docs/src/styles/typography.scss → docs/src/styles/components/typography.scss
View File

14
docs/src/styles/main.scss
View File

@ -2,8 +2,12 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./typography.scss";
@import "./tweaks.scss";
@import "./base.scss";
@import "./components.scss";
@import "./card.scss";
@import "./components/base.scss";
@import "./components/typography.scss";
@import "./components/card.scss";
@import "./tweaks/navbar.scss";
@import "./tweaks/breadcrumb.scss";
@import "./tweaks/markdown.scss";
@import "./tweaks/redocusaurus.scss";
@import "./tweaks/sidebar.scss";

32
docs/src/styles/tweaks.scss
View File

@ -25,38 +25,6 @@
display: none;
}
.navbar {
@apply px-0 lg:h-16 border-b border-gray-200 dark:border-gray-800 bg-white/50 backdrop-blur-lg dark:bg-black/50 shadow-none;
.navbar__toggle {
width: 24px;
}
.navbar-sidebar__backdrop {
height: 100dvh;
}
.navbar-sidebar {
height: 100dvh;
.navbar-sidebar__close {
width: 14px;
}
}
.navbar__title {
@apply text-lg;
}
.navbar__brand {
margin-right: 24px;
&:hover {
color: inherit;
}
}
.navbar__inner {
@apply container;
}
}
.breadcrumbs__item {
position: relative;
&:first-child {

18
docs/src/styles/tweaks/breadcrumb.scss Normal file
View File

@ -0,0 +1,18 @@
.breadcrumbs {
@apply mb-8;
&__item {
position: relative;
&:first-child {
.breadcrumbs__link {
vertical-align: middle;
margin-top: -2px;
}
}
}
&__link {
padding-top: 2px;
padding-bottom: 2px;
}
}

47
docs/src/styles/tweaks/markdown.scss Normal file
View File

@ -0,0 +1,47 @@
.theme-doc-markdown {
a {
@apply text-blue-600 dark:text-blue-400 underline;
}
ul {
list-style: revert;
}
ol {
list-style: decimal;
}
ul,
ol {
padding-left: 16px;
li {
@apply leading-normal;
p {
margin-bottom: 0;
}
}
}
p {
@apply mb-2;
}
h1 {
&:first-child {
@apply mb-4;
}
}
h1,
h2 {
@apply mb-3;
}
table {
width: 100%;
display: table;
}
}
.task-list-item {
list-style: none;
}
blockquote {
margin-bottom: 12px;
}

34
docs/src/styles/tweaks/navbar.scss Normal file
View File

@ -0,0 +1,34 @@
.navbar {
@apply my-4 bg-transparent py-0 shadow-none top-4;
&:before {
width: 100%;
height: 16px;
top: -16px;
position: absolute;
content: "";
left: 0;
@apply dark:bg-[#09090B]/10 backdrop-blur-md;
}
&__inner {
@apply border border-gray-300 dark:border-gray-800 rounded-lg bg-[#E4E4E7]/50 dark:bg-[#09090B]/50 backdrop-blur-md flex items-center h-14 px-8 relative;
}
&__logo {
@apply flex items-center;
}
&__brand {
&:hover {
@apply dark:text-white text-black;
}
}
&__title {
font-size: 18px;
}
[class*="searchBox_"] {
display: none;
}
}

23
docs/src/styles/tweaks/redocusaurus.scss Normal file
View File

@ -0,0 +1,23 @@
.redocusaurus {
.menu-content {
top: 80px !important;
background-color: transparent;
}
.scrollbar-container {
ul > li > label {
margin-bottom: 4px;
background-color: transparent;
}
ul > li > ul > li > label {
background-color: transparent;
&:hover {
@apply dark:bg-gray-800/50 bg-gray-100;
}
&.active {
@apply dark:bg-gray-800/50 bg-gray-100;
}
}
}
}

41
docs/src/styles/tweaks/sidebar.scss Normal file
View File

@ -0,0 +1,41 @@
// * Classname from Docusaurus template
// * We just overide the styling with applied class from tailwind
[class*="docSidebarContainer_"] {
margin-top: 0 !important;
@apply dark:border-gray-800 border-gray-300;
}
[class*="sidebar_"] {
padding-top: 0 !important;
}
[class*="sidebarViewport_"] {
top: 80px !important;
height: unset !important;
}
[class*="docItemCol_"] {
@apply lg:px-8;
}
// * Including custom sidebar table of content
.table-of-contents {
@apply text-base py-0 dark:border-gray-800 border-gray-300;
}
.menu__caret:before {
background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
}
[class*="codeBlockContainer_"] {
margin: 4px;
}
[class*="codeBlockTitle_"] {
border-bottom: 1px solid #52525a !important;
}
[class*="iconExternalLink_"] {
display: none;
}

2
docs/src/theme/Layout/index.js
View File

@ -47,7 +47,7 @@ export default function Layout(props) {
</ErrorBoundary>
</div>
{!noFooter && <Footer />}
{/* {!noFooter && <Footer />} */}
</LayoutProvider>
);
}

3
docs/tailwind.config.js
View File

@ -7,9 +7,6 @@ module.exports = {
container: {
center: true,
padding: "16px",
screens: {
"2xl": "1400px",
},
},
fontFamily: {
sans: [