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

fix: line height typography blog and docs (#2390)

Browse Source 
* fix: line height typography

* fix: remove all custom line height for paragraph, span and link tag

* fix: apply line height with leading relaxed

* fix: margin bottom paragraph 16px
This commit is contained in:
Faisal Amir 2024-03-16 20:33:58 +07:00 committed by GitHub
parent ed6bd14e02
commit 82a751bdf4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 169 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
docs/docusaurus.config.js
View File

@ -1,36 +1,36 @@
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
require("dotenv").config();
require('dotenv').config()
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
const path = require('path');
const darkCodeTheme = require('prism-react-renderer/themes/dracula')
const path = require('path')
/** @type {import('@docusaurus/types').Config} */
const config = {
title: "Jan",
tagline: "Run your own AI",
favicon: "img/favicon.ico",
title: 'Jan',
tagline: 'Run your own AI',
favicon: 'img/favicon.ico',
// Set the production url of your site here
url: "https://jan.ai",
url: 'https://jan.ai',
// Set the /<baseUrl>/ pathname under which your site is served
// For GitHub pages deployment, it is often '/<projectName>/'
baseUrl: "/",
baseUrl: '/',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: "janhq", // Usually your GitHub org/user name.
projectName: "jan", // Usually your repo name.
organizationName: 'janhq', // Usually your GitHub org/user name.
projectName: 'jan', // Usually your repo name.
onBrokenLinks: "warn",
onBrokenMarkdownLinks: "warn",
onBrokenLinks: 'warn',
onBrokenMarkdownLinks: 'warn',
trailingSlash: true,
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: "en",
locales: ["en"],
defaultLocale: 'en',
locales: ['en'],
},
markdown: {
@ -41,80 +41,81 @@ const config = {
// Plugins we added
plugins: [
"docusaurus-plugin-sass",
'docusaurus-plugin-sass',
async function myPlugin(context, options) {
return {
name: "docusaurus-tailwindcss",
name: 'docusaurus-tailwindcss',
configurePostCss(postcssOptions) {
// Appends TailwindCSS and AutoPrefixer.
postcssOptions.plugins.push(require("tailwindcss"));
postcssOptions.plugins.push(require("autoprefixer"));
return postcssOptions;
postcssOptions.plugins.push(require('tailwindcss'))
postcssOptions.plugins.push(require('autoprefixer'))
return postcssOptions
},
};
}
},
[
"posthog-docusaurus",
'posthog-docusaurus',
{
apiKey: process.env.POSTHOG_PROJECT_API_KEY || "XXX",
appUrl: process.env.POSTHOG_APP_URL || "XXX", // optional
apiKey: process.env.POSTHOG_PROJECT_API_KEY || 'XXX',
appUrl: process.env.POSTHOG_APP_URL || 'XXX', // optional
enableInDevelopment: false, // optional
},
],
[
"@docusaurus/plugin-client-redirects",
'@docusaurus/plugin-client-redirects',
{
redirects: [
{
from: "/troubleshooting/failed-to-fetch",
to: "/guides/error-codes/something-amiss/",
from: '/troubleshooting/failed-to-fetch',
to: '/guides/error-codes/something-amiss/',
},
{
from: "/guides/troubleshooting/gpu-not-used/",
to: "/guides/common-error/not-using-gpu/",
from: '/guides/troubleshooting/gpu-not-used/',
to: '/guides/common-error/not-using-gpu/',
},
{
from: "/guides/troubleshooting/",
to: "/guides/error-codes/",
from: '/guides/troubleshooting/',
to: '/guides/error-codes/',
},
{
from: "/troubleshooting/stuck-on-broken-build/",
to: "/guides/common-error/broken-build/",
from: '/troubleshooting/stuck-on-broken-build/',
to: '/guides/common-error/broken-build/',
},
{
from: "/guides/troubleshooting/",
to: "/guides/error-codes/",
from: '/guides/troubleshooting/',
to: '/guides/error-codes/',
},
{
from: "/troubleshooting/somethings-amiss/",
to: "/guides/error-codes/something-amiss/",
from: '/troubleshooting/somethings-amiss/',
to: '/guides/error-codes/something-amiss/',
},
{
from: "/troubleshooting/how-to-get-error-logs/",
to: "/guides/error-codes/how-to-get-error-logs/",
from: '/troubleshooting/how-to-get-error-logs/',
to: '/guides/error-codes/how-to-get-error-logs/',
},
{
from: "/troubleshooting/permission-denied/",
to: "/guides/error-codes/permission-denied/",
from: '/troubleshooting/permission-denied/',
to: '/guides/error-codes/permission-denied/',
},
{
from: "/troubleshooting/unexpected-token/",
to: "/guides/error-codes/unexpected-token/",
from: '/troubleshooting/unexpected-token/',
to: '/guides/error-codes/unexpected-token/',
},
{
from: "/troubleshooting/undefined-issue/",
to: "/guides/error-codes/undefined-issue/",
}, {
from: "/install/",
to: "/guides/install/",
from: '/troubleshooting/undefined-issue/',
to: '/guides/error-codes/undefined-issue/',
},
{
from: "/guides/using-models/",
to: "/guides/models-setup/",
from: '/install/',
to: '/guides/install/',
},
{
from: "/guides/using-extensions/",
to: "/guides/extensions/",
from: '/guides/using-models/',
to: '/guides/models-setup/',
},
{
from: '/guides/using-extensions/',
to: '/guides/extensions/',
},
],
},
@ -139,35 +140,35 @@ const config = {
// The classic preset will relay each option entry to the respective sub plugin/theme.
presets: [
[
"@docusaurus/preset-classic",
'@docusaurus/preset-classic',
{
// Will be passed to @docusaurus/plugin-content-docs (false to disable)
docs: {
routeBasePath: "/",
sidebarPath: require.resolve("./sidebars.js"),
editUrl: "https://github.com/janhq/jan/tree/dev/docs",
routeBasePath: '/',
sidebarPath: require.resolve('./sidebars.js'),
editUrl: 'https://github.com/janhq/jan/tree/dev/docs',
showLastUpdateAuthor: true,
showLastUpdateTime: true,
},
// Will be passed to @docusaurus/plugin-content-sitemap (false to disable)
sitemap: {
changefreq: "daily",
changefreq: 'daily',
priority: 1.0,
ignorePatterns: ["/tags/**"],
filename: "sitemap.xml",
ignorePatterns: ['/tags/**'],
filename: 'sitemap.xml',
},
// Will be passed to @docusaurus/plugin-content-blog (false to disable)
blog: {
blogSidebarTitle: "All Posts",
blogSidebarCount: "ALL",
blogSidebarTitle: 'All Posts',
blogSidebarCount: 'ALL',
},
// Will be passed to @docusaurus/theme-classic.
theme: {
customCss: require.resolve("./src/styles/main.scss"),
customCss: require.resolve('./src/styles/main.scss'),
},
// GTM is always inactive in development and only active in production to avoid polluting the analytics statistics.
googleTagManager: {
containerId: process.env.GTM_ID || "XXX",
containerId: process.env.GTM_ID || 'XXX',
},
// Will be passed to @docusaurus/plugin-content-pages (false to disable)
// pages: {},
@ -175,17 +176,17 @@ const config = {
],
// Redoc preset
[
"redocusaurus",
'redocusaurus',
{
specs: [
{
spec: "openapi/jan.yaml", // can be local file, url, or parsed json object
route: "/api-reference-1.0/", // path where to render docs
spec: 'openapi/jan.yaml', // can be local file, url, or parsed json object
route: '/api-reference-1.0/', // path where to render docs
},
],
theme: {
primaryColor: "#1a73e8",
primaryColorDark: "#1a73e8",
primaryColor: '#1a73e8',
primaryColorDark: '#1a73e8',
options: {
requiredPropsFirst: true,
noAutoAuth: true,
@ -198,10 +199,10 @@ const config = {
// Docs: https://docusaurus.io/docs/api/themes/configuration
themeConfig: {
image: "img/og-image.png",
image: 'img/og-image.png',
// Only for react live
liveCodeBlock: {
playgroundPosition: "bottom",
playgroundPosition: 'bottom',
},
docs: {
sidebar: {
@ -211,89 +212,89 @@ const config = {
},
// Algolia Search Configuration
algolia: {
appId: process.env.ALGOLIA_APP_ID || "XXX",
apiKey: process.env.ALGOLIA_API_KEY || "XXX",
indexName: "jan_docs",
appId: process.env.ALGOLIA_APP_ID || 'XXX',
apiKey: process.env.ALGOLIA_API_KEY || 'XXX',
indexName: 'jan_docs',
contextualSearch: true,
insights: true,
},
// SEO Docusarus
metadata: [
{
name: "description",
name: 'description',
content:
"Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable.",
'Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable.',
},
{
name: "keywords",
name: 'keywords',
content:
"Jan AI, Jan, ChatGPT alternative, local AI, private AI, conversational AI, no-subscription fee, large language model ",
'Jan AI, Jan, ChatGPT alternative, local AI, private AI, conversational AI, no-subscription fee, large language model ',
},
{ name: "robots", content: "index, follow" },
{ name: 'robots', content: 'index, follow' },
{
property: "og:title",
content: "Jan | Open-source ChatGPT Alternative",
property: 'og:title',
content: 'Jan | Open-source ChatGPT Alternative',
},
{
property: "og:description",
property: 'og:description',
content:
"Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable.",
'Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable.',
},
{
property: "og:image",
content: "https://jan.ai/img/og-image.png",
property: 'og:image',
content: 'https://jan.ai/img/og-image.png',
},
{ property: "og:type", content: "website" },
{ property: "twitter:card", content: "summary_large_image" },
{ property: "twitter:site", content: "@janframework" },
{ property: 'og:type', content: 'website' },
{ property: 'twitter:card', content: 'summary_large_image' },
{ property: 'twitter:site', content: '@janframework' },
{
property: "twitter:title",
content: "Jan | Open-source ChatGPT Alternative",
property: 'twitter:title',
content: 'Jan | Open-source ChatGPT Alternative',
},
{
property: "twitter:description",
property: 'twitter:description',
content:
"Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable.",
'Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable.',
},
{
property: "twitter:image",
content: "https://jan.ai/img/og-image.png",
property: 'twitter:image',
content: 'https://jan.ai/img/og-image.png',
},
],
headTags: [
// Declare a <link> preconnect tag
{
tagName: "link",
tagName: 'link',
attributes: {
rel: "preconnect",
href: "https://jan.ai/",
rel: 'preconnect',
href: 'https://jan.ai/',
},
},
// Declare some json-ld structured data
{
tagName: "script",
tagName: 'script',
attributes: {
type: "application/ld+json",
type: 'application/ld+json',
},
innerHTML: JSON.stringify({
"@context": "https://schema.org/",
"@type": "localAI",
name: "Jan",
description:
"Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable.",
keywords:
"Jan AI, Jan, ChatGPT alternative, local AI, private AI, conversational AI, no-subscription fee, large language model ",
applicationCategory: "BusinessApplication",
operatingSystem: "Multiple",
url: "https://jan.ai/",
'@context': 'https://schema.org/',
'@type': 'localAI',
'name': 'Jan',
'description':
'Jan runs 100% offline on your computer, utilizes open-source AI models, prioritizes privacy, and is highly customizable.',
'keywords':
'Jan AI, Jan, ChatGPT alternative, local AI, private AI, conversational AI, no-subscription fee, large language model ',
'applicationCategory': 'BusinessApplication',
'operatingSystem': 'Multiple',
'url': 'https://jan.ai/',
}),
},
],
navbar: {
title: "Jan",
title: 'Jan',
logo: {
alt: "Jan Logo",
src: "img/logo.svg",
alt: 'Jan Logo',
src: 'img/logo.svg',
},
items: [
// Navbar Left
@ -304,38 +305,38 @@ const config = {
// label: "About",
// },
{
type: "dropdown",
label: "About",
position: "left",
type: 'dropdown',
label: 'About',
position: 'left',
items: [
{
type: "doc",
label: "What is Jan?",
docId: "about/about",
type: 'doc',
label: 'What is Jan?',
docId: 'about/about',
},
{
type: "doc",
label: "Who we are",
docId: "team/team",
type: 'doc',
label: 'Who we are',
docId: 'team/team',
},
{
type: "doc",
label: "Wall of love",
docId: "wall-of-love",
type: 'doc',
label: 'Wall of love',
docId: 'wall-of-love',
},
],
},
{
type: "docSidebar",
sidebarId: "productSidebar",
positionL: "left",
label: "Product",
type: 'docSidebar',
sidebarId: 'productSidebar',
positionL: 'left',
label: 'Product',
},
{
type: "docSidebar",
sidebarId: "ecosystemSidebar",
position: "left",
label: "Ecosystem",
type: 'docSidebar',
sidebarId: 'ecosystemSidebar',
position: 'left',
label: 'Ecosystem',
},
// {
// type: "docSidebar",
@ -345,29 +346,29 @@ const config = {
// },
// Navbar right
{
type: "dropdown",
label: "Docs",
to: "docs",
position: "right",
type: 'dropdown',
label: 'Docs',
to: 'docs',
position: 'right',
items: [
{
type: "docSidebar",
sidebarId: "guidesSidebar",
label: "Guides",
type: 'docSidebar',
sidebarId: 'guidesSidebar',
label: 'Guides',
},
{
type: "docSidebar",
sidebarId: "developerSidebar",
label: "Developer",
type: 'docSidebar',
sidebarId: 'developerSidebar',
label: 'Developer',
},
{
to: "/api-reference",
label: "API Reference",
to: '/api-reference',
label: 'API Reference',
},
{
type: "docSidebar",
sidebarId: "releasesSidebar",
label: "Changelog",
type: 'docSidebar',
sidebarId: 'releasesSidebar',
label: 'Changelog',
},
// {
// type: "docSidebar",
@ -377,9 +378,9 @@ const config = {
],
},
{
to: "blog",
label: "Blog",
position: "right",
to: 'blog',
label: 'Blog',
position: 'right',
},
],
},
@ -387,22 +388,22 @@ const config = {
theme: darkCodeTheme,
darkTheme: darkCodeTheme,
additionalLanguages: [
"python",
"powershell",
"bash",
"json",
"javascript",
"jsx",
'python',
'powershell',
'bash',
'json',
'javascript',
'jsx',
],
},
colorMode: {
defaultMode: "light",
defaultMode: 'light',
disableSwitch: false,
respectPrefersColorScheme: false,
},
},
themes: ["@docusaurus/theme-live-codeblock", "@docusaurus/theme-mermaid"],
};
themes: ['@docusaurus/theme-live-codeblock', '@docusaurus/theme-mermaid'],
}
module.exports = config;
module.exports = config

12
docs/src/styles/components/typography.scss
View File

@ -1,6 +1,5 @@
h1,
.h1 {
line-height: 48px;
font-size: 40px;
@apply font-bold text-black dark:text-white;
}
@ -8,35 +7,24 @@ h2,
.h2 {
font-size: 32px;
@apply font-bold text-black dark:text-white;
line-height: 40px;
}
h3,
.h3 {
font-size: 28px;
@apply font-bold text-black dark:text-white;
line-height: 40px;
}
h4,
.h4 {
font-size: 24px;
@apply font-bold text-black dark:text-white;
line-height: 32px;
}
h5,
.h5 {
font-size: 20px;
@apply font-bold text-black dark:text-white;
line-height: 28px;
}
h6,
.h6 {
font-size: 16px;
@apply font-bold text-black dark:text-white;
line-height: 24px;
}
p {
line-height: 24px;
}
.paragraph {
line-height: 24px;
}

15
docs/src/styles/tweaks/markdown.scss
View File

@ -1,9 +1,10 @@
.theme-doc-markdown {
.theme-doc-markdown,
.markdown {
a,
p,
span,
li {
@apply leading-loose;
@apply leading-relaxed;
}
a {
@apply text-blue-600 dark:text-blue-400;
@ -18,7 +19,6 @@
ol {
padding-left: 28px;
li {
@apply leading-loose;
p {
margin-bottom: 0;
}
@ -34,14 +34,19 @@
}
h1,
h2 {
@apply mb-3;
h2,
h3 {
@apply mb-2;
}
table {
width: 100%;
display: table;
}
p {
margin-bottom: 16px;
}
}
.task-list-item {