implement grid

packages/docusaurus-playground/docs/test/1.md

@@ -4,3 +4,7 @@ sidebar_position: 1
 ---
 
 # 111
+
+```python
+print("hello world!")
+```

packages/docusaurus-playground/docs/test/2.md

@@ -4,3 +4,7 @@ sidebar_position: 1
 ---
 
 # 222
+
+```python
+print("hello world!")
+```

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',
       }),
     ],
   ],

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 (
+    <Layout wrapperClassName={styles.docsWrapper}>
+      <BackToTopButton />
+      <div className={styles.docPage}>
+        {sidebar && (
+          <DocPageLayoutSidebar
+            sidebar={sidebar.items}
+            hiddenSidebarContainer={hiddenSidebarContainer}
+            setHiddenSidebarContainer={setHiddenSidebarContainer}
+          />
+        )}
+        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
+          {children}
+        </DocPageLayoutMain>
+      </div>
+    </Layout>
+  )
+}

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;
+}

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 <div>{`${title} · ${tagline}`}</div>
+}
+```
+
+:::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.
+
+<details><summary>CLICK ME</summary>
+
+#### yes, even hidden code blocks!
+
+<br/>
+
+```python
+print("hello world!")
+```
+
+</details>

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!")
+```

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!")
+```

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!")
+```

packages/docusaurus-playground/versioned_sidebars/version-1.1.0-sidebars.json

@@ -0,0 +1,8 @@
+{
+  "defaultSidebar": [
+    {
+      "type": "autogenerated",
+      "dirName": "."
+    }
+  ]
+}

packages/docusaurus-playground/versions.json

@@ -0,0 +1 @@
+["1.1.0"]

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',

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',
       },
     ],

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',

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;
+  }
+`

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;

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 (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+      {syntheticTitle && (
+        <header>
+          <Heading as="h1">{syntheticTitle}</Heading>
+        </header>
+      )}
+      <MDXContent>{children}</MDXContent>
+    </div>
+  )
+}

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 ? <DocItemTOCMobile /> : undefined
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined
+  return {
+    hidden,
+    mobile,
+    desktop,
+  }
+}
+
+export default function DocItemLayout({ children }) {
+  const docTOC = useDocTOC()
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  )
+}

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;
+  }
+}

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 (
+    <DocProvider content={props.content}>
+      <HtmlClassNameProvider className={docHtmlClassName}>
+        <DocItemMetadata />
+        <DocItemLayout>
+          <MDXComponent />
+        </DocItemLayout>
+      </HtmlClassNameProvider>
+    </DocProvider>
+  )
+}