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

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

@ -16,266 +16,30 @@ 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">
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>
</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.
<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-lg lg:text-2xl mt-2">
Apps come and go, but your AI and data should last.{" "}
<p className="text-2xl mt-1">
Jan is an open-source alternative to ChatGPT that runs on your
own computer
</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"
/>
<p>
Jan uses open, standard and non-proprietary files stored
locally on your device.
</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 className="col-span-5">
<p>
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>
</div>

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: [