From 82a751bdf4f62bae8bfe0a3a390e2dec9598f3f7 Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Sat, 16 Mar 2024 20:33:58 +0700 Subject: [PATCH] fix: line height typography blog and docs (#2390) * 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 --- docs/docusaurus.config.js | 317 +++++++++++---------- docs/src/styles/components/typography.scss | 12 - docs/src/styles/tweaks/markdown.scss | 15 +- 3 files changed, 169 insertions(+), 175 deletions(-) diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index bb39dcd1c..4e7e91baf 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -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 // pathname under which your site is served // For GitHub pages deployment, it is often '//' - 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 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 diff --git a/docs/src/styles/components/typography.scss b/docs/src/styles/components/typography.scss index 42953ac2b..c8b85a3fb 100644 --- a/docs/src/styles/components/typography.scss +++ b/docs/src/styles/components/typography.scss @@ -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; } diff --git a/docs/src/styles/tweaks/markdown.scss b/docs/src/styles/tweaks/markdown.scss index ade07e35b..7ae2772d2 100644 --- a/docs/src/styles/tweaks/markdown.scss +++ b/docs/src/styles/tweaks/markdown.scss @@ -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 {