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