diff --git a/packages/docusaurus-playground/docs/test/1.md b/packages/docusaurus-playground/docs/test/1.md index ffb0a30..0107a0a 100644 --- a/packages/docusaurus-playground/docs/test/1.md +++ b/packages/docusaurus-playground/docs/test/1.md @@ -4,3 +4,7 @@ sidebar_position: 1 --- # 111 + +```python +print("hello world!") +``` diff --git a/packages/docusaurus-playground/docs/test/2.md b/packages/docusaurus-playground/docs/test/2.md index c066eac..9e9ec0c 100644 --- a/packages/docusaurus-playground/docs/test/2.md +++ b/packages/docusaurus-playground/docs/test/2.md @@ -4,3 +4,7 @@ sidebar_position: 1 --- # 222 + +```python +print("hello world!") +``` diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 8cbe546..0793a48 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -28,13 +28,19 @@ const config = { '@acid-info/logos-docusaurus-preset', /** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */ ({ - businessUnit: 'Codex', + businessUnit: 'Logos', theme: { name: 'default', options: { customCss: [require.resolve('./src/css/custom.scss')], }, }, + versions: { + current: { + label: 'current', + }, + }, + lastVersion: 'current', }), ], ], diff --git a/packages/docusaurus-playground/src/theme/DocPage/Layout/index.js b/packages/docusaurus-playground/src/theme/DocPage/Layout/index.js new file mode 100644 index 0000000..cebbcda --- /dev/null +++ b/packages/docusaurus-playground/src/theme/DocPage/Layout/index.js @@ -0,0 +1,28 @@ +import React, { useState } from 'react' +import { useDocsSidebar } from '@docusaurus/theme-common/internal' +import Layout from '@theme/Layout' +import BackToTopButton from '@theme/BackToTopButton' +import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar' +import DocPageLayoutMain from '@theme/DocPage/Layout/Main' +import styles from './styles.module.css' +export default function DocPageLayout({ children }) { + const sidebar = useDocsSidebar() + const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false) + return ( + + +
+ {sidebar && ( + + )} + + {children} + +
+ + ) +} diff --git a/packages/docusaurus-playground/src/theme/DocPage/Layout/styles.module.css b/packages/docusaurus-playground/src/theme/DocPage/Layout/styles.module.css new file mode 100644 index 0000000..a0ec379 --- /dev/null +++ b/packages/docusaurus-playground/src/theme/DocPage/Layout/styles.module.css @@ -0,0 +1,10 @@ +.docPage { + width: 100%; + display: grid; + grid-template-columns: repeat(24, 1fr); +} + +.docsWrapper { + display: flex; + flex: 1 0 auto; +} diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/index.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/index.md new file mode 100644 index 0000000..e08e8fb --- /dev/null +++ b/packages/docusaurus-playground/versioned_docs/version-1.1.0/index.md @@ -0,0 +1,130 @@ +--- +id: version-1.1.0-intro +title: Intro +sidebar_position: 1 +--- + +# Tutorial Intro + +Let's discover **Docusaurus in less than 5 minutes**. + +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` + +## Getting Started + +Get started by **creating a new site**. + +Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**. + +### What you'll need + +- [Node.js](https://nodejs.org/en/download/) version 16.14 or above: + - When installing Node.js, you are recommended to check all checkboxes related to dependencies. + +## Generate a new site + +Generate a new Docusaurus site using the **classic template**. + +The classic template will automatically be added to your project after you run the command: + +```bash +npm init docusaurus@latest my-website classic +``` + +You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor. + +The command also installs all necessary dependencies you need to run Docusaurus. + +```tsx title="docusaurus.config.js" +module.exports = { + // ... + presets: [ + [ + '@docusaurus/preset-classic', + { + docs: { + sidebarPath: require.resolve('./sidebars.js'), + }, + theme: { + customCss: [require.resolve('./src/css/custom.css')], + }, + }, + ], + ], +} +``` + +```tsx +import React from 'react' +import useDocusaurusContext from '@docusaurus/useDocusaurusContext' + +const Hello = () => { + const { siteConfig } = useDocusaurusContext() + const { title, tagline } = siteConfig + + return
{`${title} ยท ${tagline}`}
+} +``` + +:::note + +The presets: **_ [['classic', {...}]] _** shorthand works as well. + +::: + +:::tip + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +:::info + +The presets: **_ [['classic', {...}]] _** shorthand works as well. + +::: + +:::caution + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +:::danger + +The presets: **_ [['classic', {...}]] _** shorthand works as well. + +::: + +## Start your site + +Run the development server: + +```bash +cd my-website +npm run start +``` + +The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there. + +The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/. + +Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. + +
CLICK ME + +#### yes, even hidden code blocks! + +
+ +```python +print("hello world!") +``` + +
diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/1.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/1.md new file mode 100644 index 0000000..0107a0a --- /dev/null +++ b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/1.md @@ -0,0 +1,10 @@ +--- +title: 1 +sidebar_position: 1 +--- + +# 111 + +```python +print("hello world!") +``` diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/2.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/2.md new file mode 100644 index 0000000..9e9ec0c --- /dev/null +++ b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/2.md @@ -0,0 +1,10 @@ +--- +title: 2 +sidebar_position: 1 +--- + +# 222 + +```python +print("hello world!") +``` diff --git a/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/3/33.md b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/3/33.md new file mode 100644 index 0000000..4b98357 --- /dev/null +++ b/packages/docusaurus-playground/versioned_docs/version-1.1.0/test/3/33.md @@ -0,0 +1,10 @@ +--- +title: 333 +sidebar_position: 1 +--- + +# 333 + +```python +print("hello world!") +``` diff --git a/packages/docusaurus-playground/versioned_sidebars/version-1.1.0-sidebars.json b/packages/docusaurus-playground/versioned_sidebars/version-1.1.0-sidebars.json new file mode 100644 index 0000000..cff0c94 --- /dev/null +++ b/packages/docusaurus-playground/versioned_sidebars/version-1.1.0-sidebars.json @@ -0,0 +1,8 @@ +{ + "defaultSidebar": [ + { + "type": "autogenerated", + "dirName": "." + } + ] +} diff --git a/packages/docusaurus-playground/versions.json b/packages/docusaurus-playground/versions.json new file mode 100644 index 0000000..6c0c4be --- /dev/null +++ b/packages/docusaurus-playground/versions.json @@ -0,0 +1 @@ +["1.1.0"] diff --git a/packages/logos-docusaurus-preset/src/theme-config/base.ts b/packages/logos-docusaurus-preset/src/theme-config/base.ts index e28e66c..baf3296 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/base.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/base.ts @@ -4,7 +4,9 @@ const lightCodeTheme = require('prism-react-renderer/themes/github') const darkCodeTheme = require('prism-react-renderer/themes/dracula') export const baseThemeConfig: ThemeConfig = { - docs: { sidebar: { hideable: true } }, + docs: { + sidebar: { hideable: true }, + }, metadata: [], colorMode: { disableSwitch: true, @@ -13,6 +15,10 @@ export const baseThemeConfig: ThemeConfig = { title: '', logo: {}, items: [ + { + type: 'docsVersionDropdown', + position: 'right', + }, { type: 'localeDropdown', position: 'right', diff --git a/packages/logos-docusaurus-preset/src/theme-config/codex.ts b/packages/logos-docusaurus-preset/src/theme-config/codex.ts index 6be04b8..fb1c4d3 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/codex.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/codex.ts @@ -12,11 +12,11 @@ export const codexThemeConfig: typeof baseThemeConfig = { }, items: [ { - to: 'blog', - label: 'Blog', + type: 'localeDropdown', + position: 'right', }, { - type: 'localeDropdown', + type: 'docsVersionDropdown', position: 'right', }, ], diff --git a/packages/logos-docusaurus-preset/src/theme-config/logos.ts b/packages/logos-docusaurus-preset/src/theme-config/logos.ts index d76a750..ea0053d 100644 --- a/packages/logos-docusaurus-preset/src/theme-config/logos.ts +++ b/packages/logos-docusaurus-preset/src/theme-config/logos.ts @@ -10,6 +10,12 @@ export const logosThemeConfig: typeof baseThemeConfig = { height: 26, }, items: [ + { to: 'docs', label: 'Docs', position: 'left' }, + { to: 'https://logos.co/', label: 'Community', position: 'left' }, + { + type: 'docsVersionDropdown', + position: 'right', + }, { type: 'localeDropdown', position: 'right', diff --git a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx new file mode 100644 index 0000000..2233815 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx @@ -0,0 +1,67 @@ +import styled from '@emotion/styled' + +export const Grid = styled.div` + display: grid; + grid-template-columns: repeat(24, 1fr); + gap: 16px; +` + +export const GridItem = styled.div` + grid-column: span 4; + + &.w-1 { + grid-column: span 1; + } + + &.w-2 { + grid-column: span 2; + } + + &.w-3 { + grid-column: span 3; + } + + &.w-4 { + grid-column: span 4; + } + + &.w-6 { + grid-column: span 6; + } + + &.w-7 { + grid-column: span 7; + } + + &.w-8 { + grid-column: span 8; + } + + &.w-12 { + grid-column: span 12; + } + + &.w-14 { + grid-column: span 14; + } + + &.w-16 { + grid-column: span 16; + } + + &.w-17 { + grid-column: span 17; + } + + &.w-18 { + grid-column: span 18; + } + + &.w-24 { + grid-column: span 24; + } + + @media (max-width: 768px) { + grid-column: span 24 !important; + } +` diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 8de8ded..05a165d 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -10,7 +10,7 @@ :root { --ifm-color-scheme: light; --ifm-navbar-link-color: rgb(var(--lsd-text-primary)); - --ifm-dropdown-link-color: rgb(var(--lsd-text-secondary)); + --ifm-dropdown-link-color: rgb(var(--lsd-text-primary)); --ifm-dropdown-hover-background-color: rgb(var(--lsd-surface-secondary)); /* Colors. */ @@ -330,6 +330,15 @@ small { align-items: center; } +.dropdown__link:hover { + color: rgb(var(--lsd-text-secondary)); +} + +// temporary style fix for the logo +.navbar__logo img { + filter: invert(1); +} + @media (max-width: 576px) { :root { --ifm-global-spacing: 0.5rem; diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Content/index.tsx new file mode 100644 index 0000000..9885168 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Content/index.tsx @@ -0,0 +1,38 @@ +import React from 'react' +import clsx from 'clsx' +import { ThemeClassNames } from '@docusaurus/theme-common' +import { useDoc } from '@docusaurus/theme-common/internal' +import Heading from '@theme/Heading' +import MDXContent from '@theme/MDXContent' +/** + Title can be declared inside md content or declared through + front matter and added manually. To make both cases consistent, + the added title is added under the same div.markdown block + See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120 + + We render a "synthetic title" if: + - user doesn't ask to hide it with front matter + - the markdown content does not already contain a top-level h1 heading +*/ +function useSyntheticTitle() { + const { metadata, frontMatter, contentTitle } = useDoc() + const shouldRender = + !frontMatter.hide_title && typeof contentTitle === 'undefined' + if (!shouldRender) { + return null + } + return metadata.title +} +export default function DocItemContent({ children }) { + const syntheticTitle = useSyntheticTitle() + return ( +
+ {syntheticTitle && ( +
+ {syntheticTitle} +
+ )} + {children} +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx new file mode 100644 index 0000000..e5fb9b2 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/index.tsx @@ -0,0 +1,54 @@ +import React from 'react' +import clsx from 'clsx' +import { useWindowSize } from '@docusaurus/theme-common' +import { useDoc } from '@docusaurus/theme-common/internal' +import DocItemPaginator from '@theme/DocItem/Paginator' +import DocVersionBanner from '@theme/DocVersionBanner' +import DocVersionBadge from '@theme/DocVersionBadge' +import DocItemFooter from '@theme/DocItem/Footer' +import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile' +import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop' +import DocItemContent from '@theme/DocItem/Content' +import DocBreadcrumbs from '@theme/DocBreadcrumbs' +import styles from './styles.module.css' +/** + * Decide if the toc should be rendered, on mobile or desktop viewports + */ +function useDocTOC() { + const { frontMatter, toc } = useDoc() + const windowSize = useWindowSize() + const hidden = frontMatter.hide_table_of_contents + const canRender = !hidden && toc.length > 0 + const mobile = canRender ? : undefined + const desktop = + canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? ( + + ) : undefined + return { + hidden, + mobile, + desktop, + } +} + +export default function DocItemLayout({ children }) { + const docTOC = useDocTOC() + return ( +
+
+ +
+
+ + + {docTOC.mobile} + {children} + +
+ +
+
+ {docTOC.desktop &&
{docTOC.desktop}
} +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css new file mode 100644 index 0000000..d5aaec1 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css @@ -0,0 +1,10 @@ +.docItemContainer header + *, +.docItemContainer article > *:first-child { + margin-top: 0; +} + +@media (min-width: 997px) { + .docItemCol { + max-width: 75% !important; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/index.js b/packages/logos-docusaurus-theme/src/client/theme/DocItem/index.js new file mode 100644 index 0000000..e92734f --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/DocItem/index.js @@ -0,0 +1,19 @@ +import React from 'react' +import { HtmlClassNameProvider } from '@docusaurus/theme-common' +import { DocProvider } from '@docusaurus/theme-common/internal' +import DocItemMetadata from '@theme/DocItem/Metadata' +import DocItemLayout from '@theme/DocItem/Layout' +export default function DocItem(props) { + const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}` + const MDXComponent = props.content + return ( + + + + + + + + + ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx new file mode 100644 index 0000000..9513b5d --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/index.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import clsx from 'clsx' +import { useDocsSidebar } from '@docusaurus/theme-common/internal' +import styles from './styles.module.css' + +export default function DocPageLayoutMain({ + hiddenSidebarContainer, + children, +}) { + const sidebar = useDocsSidebar() + return ( +
+
+ {children} +
+
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css new file mode 100644 index 0000000..db64aad --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css @@ -0,0 +1,26 @@ +.docMainContainer { + display: flex; + width: 100%; + grid-column: span 17 !important; + margin-left: 70px; /* temporary solution */ +} + +.docItemWrapper { + width: 100%; +} + +@media (min-width: 997px) { + .docMainContainer { + max-width: calc(100% - var(--doc-sidebar-width)); + } + + .docMainContainerEnhanced { + max-width: calc(100% - var(--doc-sidebar-hidden-width)); + } + + .docItemWrapperEnhanced { + max-width: calc( + var(--ifm-container-width) + var(--doc-sidebar-width) + ) !important; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx index 87e18c0..380cc25 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Sidebar/index.tsx @@ -35,12 +35,14 @@ export default function DocPageLayoutSidebar({ } setHiddenSidebarContainer((value) => !value) }, [setHiddenSidebarContainer, hiddenSidebar]) + return (