Launch new docs site (pluralsh#61)

* NextJS / Markdoc boilerplate install update .gitignore Re-org markdown files * Basic site working * Enable video embeds, including from loom * temp commit * temp commit * move table of contents * Rename READMEs to index * copy tsconfig from app.plural.sh * Builds without errors * Better embeds * Very basic theming enabled Still crashes when adding theme to honorable them provider * Fixed issue with missing String.prototype.replaceAll() Force usage of node 16+ to ensure replaceAll() exists * Remove logging * Slightly style topnav * Update design system Fixes bug with importing ListBox * Lint fix * Add styling for Headings * Move page titles to frontmatter and show title/description at top of each page * try to get emotion and styled-components working better with SSR * Get autocomplete working for styled-components theme * Fix build errors * Specify node version for netlify * Fix broken components * Add Tabs * Add page grid system * Fix overflowing layout * Add react-aria SSRProvider * Fix SSR for styled-components And fix hydration error in SideNav.tsx * Make sure anchor links don’t scroll behind the header * Basic search working * Add typography styling (pluralsh#30) * Move gitbook assets into public folder * Upgrade design system * Implemented styling for several md nodes/tags - paragraphs - lists - headings - images * move non-page file out of ‘pages’ * Restructure app (pluralsh#31) * Side Navigation (pluralsh#32) * Fix hydration error * Add hr node nodes * Add blockquote * Add stub for table nodes * Fix broken image url * Styled sidenav Still needs open/close support * Added favicons * Navbar animations work now * Lint * Sidenav Improvements (pluralsh#34) * Auto-open current side nav sections on initial page load * Add util for check if url is relative * Fix links using relative paths * Open subsections in Side Nav when navigating to paths inside * Scroll nav items into view on route change * Fix color of some bold links * Open external links in new tab * Side nav is fully keyboard navigable * Better focus state for nav links (pluralsh#35) * Sidecar (pluralsh#36) * Add text highlight styles * Style sidecar * * Add Sidecar + Breadcrumbs + Desktop header (pluralsh#37) * Removed emojis from titles * Sidecar styled + Breadcrumbs added * Fix grid * Upgrade design system * Add new Side Nav icons * Prevent scrollIntoView from being interrupted by page transitions * Fix focus styles on sidecar table of content * Fix internal links another link fix * Remove superfluous <summary> tag * Add some margins to <hr> tags * correct favicons * Finished desktop header nav * Fix scrolling issues (pluralsh#39) Allow scrolling in left margin of SideNav Replace wonky behavior of scrollIntoView() with custom version: - Allows explicitly specifying scroll container to avoid unpredictable scrolling of ancestors - Adds offsetBlock and offsetInline options for giving some padding around the scroll * Add Callout component + VQA Fixes (pluralsh#40) * Added Callout component * VQA fixes * Better prevention of auto-scrolling if nav item is already visible (pluralsh#41) * Fix grid layout when main content is wider than the available space (pluralsh#42) * Add styling for code blocks inside links (pluralsh#43) * Use design system callouts and add Hubspot tracking (pluralsh#44) * Added hubspot and hotjar tracking Also cleaned up <head> tags * Use Callout component from design library * Add CTA button functionality to Callouts * Remove debug stuff * Style Improvements (pluralsh#46) * Re-org * Make sure navdata is immutable * Update header logo sizes (and make responsive) * Polish * working rotation on thing * Add footer content (pluralsh#47) * Implement page footer content * Change up side nav arrow hover animations * lint * Create Nav for narrow widths (pluralsh#48) * Prettier * Hide test pages from sidenav * Desktop header style improvements + Breakpoint management in js * Basic Mobile Nav working Still needs “Plural” menu * Add Plural menu * Small visual adjustments (pluralsh#50) * Review adjustments * Remove twitter link from mobile menu * lint * Better SideNav at very narrow widths (pluralsh#51) * Add blockquote test page * Enable touch scrolling for mobile menu * Fix cookie settings button * Add extra padding to bottom of mobile menus to accomodate shifting browser chrome Should investigate better way to handle this later * Adjust bottom padding on mobile menu * fix scrolling on Plural Menu * Add “Articles in this Section” component * OpenGraph additions/updates * lint fix * Blockquote style fix * Upgrade design system * Proper styling for “Articles in this section” buttons * Add Tables from design system Lint * Use InlineCode component from design system * NavData cleanup * Change menu icon when menu is open * Auto set sidecar tabs on user scroll (pluralsh#53) * Add transitions to selected ToC item (pluralsh#54) * Update Code Fences (pluralsh#55) * Add transitions to selected ToC item * Upgrade packages * Update code fence to use new features of pluralsh-design-system Code component * Automatically hide header for ‘shell’, ‘sh’ and ‘bash’ code fences (pluralsh#56) * Implement new docs-specific Tabs style (pluralsh#59) * Restyle tabs * Replace bullets with numbers in ordered lists * Fix react warning * lint * Docs polish (pluralsh#60) * Quickstart and introduction polish * Gitops polish * more polish * more polish * fix runbooks * alice and bob * final polish Co-authored-by: Abhi Vaidyanatha <[email protected]>
asmallberg · Oct 21, 2022 · 11a97f3 · 11a97f3
1 parent cf9c0ee
commit 11a97f3
Show file tree

Hide file tree

Showing 203 changed files with 16,104 additions and 486 deletions.
diff --git a/.env.local b/.env.local
@@ -0,0 +1,5 @@
+NEXT_PUBLIC_ALGOLIA_APP_ID=YTTFBOBVDJ
+NEXT_PUBLIC_ALGOLIA_INDEX_NAME=plural
+NEXT_PUBLIC_ALGOLIA_APP_ID_KEY=7a4dbe4b26eb19140c283ff40ff536b5
+NEXT_PUBLIC_GITHUB_BRANCH_NAME=nextjs-markdoc
+NEXT_PUBLIC_ROOT_URL="https://docs.plural.sh"
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+  extends: [
+    '@pluralsh/eslint-config-typescript',
+  ],
+  globals: {
+    JSX: true,
+  },
+}
diff --git a/.gitbook/assets/Screen Shot 2021-07-23 at 5.47.19 PM.png b/.gitbook/assets/Screen Shot 2021-07-23 at 5.47.19 PM.png
diff --git a/.gitbook/assets/Screen Shot 2021-07-23 at 6.34.53 PM.png b/.gitbook/assets/Screen Shot 2021-07-23 at 6.34.53 PM.png
diff --git a/.gitbook/assets/Screen Shot 2022-07-27 at 5.11.01 PM.png b/.gitbook/assets/Screen Shot 2022-07-27 at 5.11.01 PM.png
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,10 @@
-# Ignore IDE settings.
-
-.idea
+# IDE settings.
+.idea
+.vscode
+#
+node_modules/
+.DS_Store
+.next/
+.vercel
+yalc.lock
+.yalc/
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+18.9.0
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}
diff --git a/README.md b/README.md
@@ -4,17 +4,15 @@ description: >-
   Kubernetes in minutes with no management overhead.
 ---
 
-# 👋 Introduction
-
 ## What is Plural?
 
 Plural is an open-source, unified, application deployment platform that makes it easy to run open-source software on Kubernetes. Our marketplace has dozens of top tier applications ready to deploy.
 
-![](<.gitbook/assets/image (1).png>)
+![](</assets/introduction/introduction-marketplace.png>)
 
 We aim to make applications as portable as possible, without sacrificing the ability for the users to own the applications they desire to use.
 
-Some key features of the platform include:
+**Some key features of the platform include:**
 
 * Automated Upgrades
 * Cross-tool dependency management
@@ -27,13 +25,13 @@ Some key features of the platform include:
 
 This is the current standard deployment method. Click below for a quickstart to managing configuration locally.
 
-* [Quickstart: Using the Plural CLI on your Machine](getting-started/getting-started.md)
+* [Quickstart: Using the Plural CLI on your Machine](/getting-started/getting-started)
 
 ### Plural Cloud Shell
 
 We have created a Cloud Shell with all of the tools and dependencies needed to run Plural. This is available [here](https://app.plural.sh/shell) to try out. If you want to **try out Plural without entering cloud credentials**, we offer a Kubernetes deployment and Cloud Shell deployment on the house that lasts for 6 hours.
 
-* [Using our in-browser Cloud Shell](basic-setup-and-deployment/cloud-shell-quickstart.md)
+* [Using our in-browser Cloud Shell](/basic-setup-and-deployment/cloud-shell-quickstart)
 
 If you need support getting your Plural deployment up and running, join the [Plural Discord here!](https://discord.gg/pluralsh)
 

diff --git a/adding-new-application/module-library.md b/adding-new-application/module-library.md
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// eslint-disable-next-line function-paren-newline
+const withMarkdoc = require('@markdoc/next.js')(
+  /* config: https://markdoc.io/docs/nextjs#options */ {
+    schemaPath: './src/markdoc',
+  })
+const withTM = require('next-transpile-modules')(['pluralsh-design-system', 'honorable', 'honorable-theme-default'],
+  {
+    debug: false,
+  })
+
+module.exports = () => {
+  const plugins = [withMarkdoc, withTM]
+
+  return plugins.reduce((acc, next) => next(acc), {
+    reactStrictMode: true,
+    compiler: {
+      // https://nextjs.org/docs/advanced-features/compiler#styled-components
+      styledComponents: true,
+      emotion: true,
+    },
+    i18n: {
+      locales: ['en-US'],
+      defaultLocale: 'en-US',
+    },
+    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdoc'],
+    async redirects() {
+      return [
+        {
+          source: '/getting-started/readme',
+          destination: '/',
+          permanent: false,
+        },
+      ]
+    },
+    // webpack: (config) => {
+    //   config.module.rules.push({
+    //     test: /\.md$/,
+    //     use: 'raw-loader',
+    //   });
+    //   return config;
+    // },
+  })
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,53 @@
+{
+  "private": true,
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint {src,pages} --ext ts,tsx,js,jsx",
+    "fix": "eslint {src,pages} --ext ts,tsx,js,jsx --fix"
+  },
+  "dependencies": {
+    "@docsearch/react": "3.2.2",
+    "@emotion/react": "11.10.4",
+    "@emotion/styled": "11.10.4",
+    "@loomhq/loom-embed": "1.5.0",
+    "@markdoc/markdoc": "0.1.13",
+    "@markdoc/next.js": "0.1.10",
+    "@react-aria/ssr": "3.3.0",
+    "algoliasearch": "4.14.2",
+    "classnames": "2.3.2",
+    "deep-freeze": "^0.0.1",
+    "honorable": "0.142.0",
+    "honorable-theme-default": "0.65.0",
+    "lodash": "^4.17.21",
+    "next": "12.3.1",
+    "next-compose-plugins": "2.2.1",
+    "next-transpile-modules": "9.1.0",
+    "pluralsh-design-system": "1.238.0",
+    "qs": "6.11.0",
+    "raw-loader": "4.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-embed": "3.6.0",
+    "react-github-btn": "1.4.0",
+    "react-scrolllock": "5.0.1",
+    "react-spring": "9.5.5",
+    "react-use-measure": "2.1.1",
+    "rooks": "7.4.0",
+    "styled-components": "5.3.6",
+    "swr": "1.3.0"
+  },
+  "devDependencies": {
+    "@pluralsh/eslint-config-typescript": "2.3.0",
+    "@types/node": "18.11.3",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
+    "@types/styled-components": "5.1.26",
+    "@typescript-eslint/eslint-plugin": "5.40.1",
+    "typescript": "4.8.4"
+  }
+}
diff --git a/pages/.gitignore b/pages/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+.DS_Store
+.next/
+.vercel
+package-lock.json
+yarn.lock
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,144 @@
+import { MarkdocNextJsPageProps } from '@markdoc/next.js'
+import styled, { ThemeProvider as StyledThemeProvider } from 'styled-components'
+import {
+  GlobalStyle as PluralGlobalStyle,
+  theme as honorableTheme,
+  styledTheme,
+} from 'pluralsh-design-system'
+import { CssBaseline, ThemeProvider } from 'honorable'
+import { SSRProvider } from '@react-aria/ssr'
+import '../src/styles/globals.css'
+import type { AppProps } from 'next/app'
+import { useRouter } from 'next/router'
+
+import { BreakpointProvider } from '../src/components/Breakpoints'
+import PageFooter from '../src/components/PageFooter'
+import HtmlHead from '../src/components/HtmlHead'
+import { NavPositionWrapper, SideNav } from '../src/components/SideNav'
+import ExternalScripts from '../src/components/ExternalScripts'
+import { TableOfContents } from '../src/components/TableOfContents'
+import { PageHeader } from '../src/components/PageHeader'
+import {
+  ContentContainer,
+  PageGrid,
+  SideCarContainer,
+  SideNavContainer,
+} from '../src/components/PageGrid'
+import GlobalStyles from '../src/components/GlobalStyles'
+import DocSearchStyles from '../src/components/DocSearchStyles'
+import MainContent from '../src/components/MainContent'
+import {
+  DESCRIPTION,
+  PAGE_TITLE_PREFIX,
+  PAGE_TITLE_SUFFIX,
+  ROOT_TITLE,
+} from '../src/consts'
+
+import { PagePropsContext } from '../src/components/PagePropsContext'
+import navData from '../src/NavData'
+
+type AppPropsPlusMd = AppProps & { pageProps: MarkdocNextJsPageProps }
+
+export type MarkdocHeading = {
+  id?: string
+  level?: number
+  title?: string
+}
+
+const docsStyledTheme = { ...styledTheme, ...{ docs: { topNavHeight: 72 } } }
+
+function collectHeadings(node, sections: MarkdocHeading[] = []) {
+  if (node) {
+    if (node.name === 'Heading') {
+      const title = node.children[0]
+
+      if (typeof title === 'string') {
+        sections.push({
+          ...node.attributes,
+          title,
+        })
+      }
+    }
+
+    if (node.children) {
+      for (const child of node.children) {
+        collectHeadings(child, sections)
+      }
+    }
+  }
+
+  return sections as MarkdocHeading[]
+}
+
+const Page = styled.div(() => ({}))
+
+function MyApp({ Component, pageProps }: AppPropsPlusMd) {
+  const router = useRouter()
+
+  const { markdoc } = pageProps
+
+  const title = markdoc?.frontmatter?.title
+    ? `${PAGE_TITLE_PREFIX}${markdoc?.frontmatter?.title}${PAGE_TITLE_SUFFIX}`
+    : ROOT_TITLE
+  const description
+    = router.pathname === '/'
+      ? DESCRIPTION
+      : markdoc?.frontmatter?.description || DESCRIPTION
+
+  const toc = pageProps.markdoc?.content
+    ? collectHeadings(pageProps.markdoc.content)
+    : []
+
+  const app = (
+    <>
+      <CssBaseline />
+      <PluralGlobalStyle />
+      <GlobalStyles />
+      <DocSearchStyles />
+      <PagePropsContext.Provider value={pageProps}>
+        <HtmlHead
+          title={title}
+          description={description}
+        />
+        <PageHeader />
+        <Page>
+          <PageGrid>
+            <SideNavContainer>
+              <NavPositionWrapper
+                role="navigation"
+                aria-label="Main"
+              >
+                <SideNav
+                  navData={navData}
+                  desktop
+                />
+              </NavPositionWrapper>
+            </SideNavContainer>
+            <ContentContainer>
+              <MainContent Component={Component} />
+              <PageFooter />
+            </ContentContainer>
+            <SideCarContainer>
+              <TableOfContents toc={toc} />
+            </SideCarContainer>
+          </PageGrid>
+        </Page>
+        <ExternalScripts />
+      </PagePropsContext.Provider>
+    </>
+  )
+
+  return (
+    <SSRProvider>
+      <BreakpointProvider>
+        <ThemeProvider theme={honorableTheme}>
+          <StyledThemeProvider theme={docsStyledTheme}>
+            {app}
+          </StyledThemeProvider>
+        </ThemeProvider>
+      </BreakpointProvider>
+    </SSRProvider>
+  )
+}
+
+export default MyApp
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,51 @@
+// pages/_document.js
+import Document, {
+  Head, Html, Main, NextScript,
+} from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () => originalRenderPage({
+        enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
+      })
+
+      const initialProps = await Document.getInitialProps(ctx)
+
+      return {
+        ...initialProps,
+        styles: [initialProps.styles, sheet.getStyleElement()],
+      }
+    }
+    finally {
+      sheet.seal()
+    }
+  }
+
+  render() {
+    return (
+      <Html data-theme="dark">
+        <Head>
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+            rel="stylesheet"
+          />
+          <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument