chroma

1
import React, { createContext, useContext, useState } from 'react';
2
import Head from 'next/head';
3
import Link from 'next/link';
4
import { GlobalStateContext, GlobalStateProvider } from '../components/layout/state';
5

6
import {TopNav} from '../components/layout/TopNav';
7
import {SideNav} from '../components/layout/SideNav';
8
import {TableOfContents} from '../components/layout/TableOfContents';
9

10
import { ThemeProvider } from 'next-themes'
11

12
import '../public/globals.css'
13
import 'katex/dist/katex.min.css';
14

15
import type { AppProps } from 'next/app'
16
import type { MarkdocNextJsPageProps } from '@markdoc/next.js'
17

18
import { Inter, IBM_Plex_Mono } from 'next/font/google'
19
// import IBM Plex Mono
20
import { Toaster } from "../components/ui/toaster"
21
import { Icons } from '../components/ui/icons';
22
import { ThemeToggle } from '../components/ui/toggle-theme';
23
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '../components/ui/breadcrumb';
24
import { useRouter } from 'next/router';
25

26
const inter = Inter({
27
  subsets: ['latin'],
28
  display: 'swap',
29
  variable: '--font-inter',
30
})
31

32
const ibmPlexMono = IBM_Plex_Mono({
33
  subsets: ['latin'],
34
  display: 'swap',
35
  weight: "400",
36
  variable: '--font-ibm-plex-mono',
37
})
38

39
const TITLE = 'Markdoc';
40
const DESCRIPTION = 'A powerful, flexible, Markdown-based authoring framework';
41

42
function collectHeadings(node, sections = []) {
43
  if (node) {
44
    if (node.name === 'Heading') {
45
      const title = node.children[0];
46

47
      if (typeof title === 'string') {
48
        sections.push({
49
          ...node.attributes,
50
          title
51
        });
52
      }
53
    }
54

55
    if (node.children) {
56
      for (const child of node.children) {
57
        collectHeadings(child, sections);
58
      }
59
    }
60
  }
61

62
  return sections;
63
}
64

65
const ROOT_ITEMS = require(`./_sidenav.js`).items;
66

67
export type ChromaDocsProps = MarkdocNextJsPageProps
68

69
export default function ChromaDocs({ Component, pageProps }: AppProps<ChromaDocsProps>) {
70
  const { markdoc } = pageProps;
71

72
  let title = TITLE;
73
  let description = DESCRIPTION;
74
  if (markdoc && (markdoc.frontmatter !== undefined)) {
75
    if (markdoc.frontmatter.title) {
76
      title = markdoc.frontmatter.title;
77
    }
78
    if (markdoc.frontmatter.description) {
79
      description = markdoc.frontmatter.description;
80
    }
81
  }
82

83
  const toc = pageProps.markdoc?.content
84
    ? collectHeadings(pageProps.markdoc.content)
85
    : [];
86

87
  const router = useRouter()
88

89
  // get the pathname and figure out if we are in a group or not
90
  // this requires iterating through ROOT_ITEMS
91
  const pathname = router.pathname;
92
  let pathVar = router.asPath.split('/')[1] !== undefined ? router.asPath.split('/')[1] : '';
93
  let inGroup = false
94
  let groupObject = null
95
  // iterate through ROOT_ITEMS to see if pathVar is a group or not
96
  ROOT_ITEMS.map((item: any) => {
97
    if (item.href === `/${pathVar}` && item.type === 'group') {
98
      inGroup = true
99
      groupObject = item
100
    }
101
  })
102

103
  // if inGroup is true, then we need to build the breadcrumbs
104
  let breadcrumbs = []
105
  if (inGroup) {
106
    breadcrumbs.push({href: `/${pathVar}`, name: groupObject.title})
107
  }
108
  // if markdoc.frontmatter.title does not equal the groupObject.title, then we need to add it to our breadcrumbs
109
  // if the route is more than 1 level deep
110
  if (router.pathname.split('/').length > 2) {
111
    if (inGroup && (markdoc.frontmatter !== undefined) && markdoc.frontmatter.title !== groupObject.title) {
112
      breadcrumbs.push({href: `/${pathVar}/${markdoc.frontmatter.title}`, name: markdoc.frontmatter.title})
113
    }
114
  }
115

116
  const pageTitle = `${title}${title !== "Chroma" ? " | Chroma Docs": " Docs" }`
117

118
  return (
119
    <ThemeProvider>
120
    <main className={`${inter.variable} font-sans ${ibmPlexMono.variable}`} style={{paddingBottom: '200px'}}>
121
      <GlobalStateProvider>
122
        <Head>
123
          <title>{pageTitle}</title>
124
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
125
          <meta name="referrer" content="strict-origin" />
126
          <meta name="title" content={title} />
127
          <meta name="description" content={description} />
128
          <link rel="shortcut icon" href="/img/favicon.ico" />
129
          <link rel="icon" href="/img/favicon.ico" />
130
          <link
131
            rel="preconnect"
132
            href={`https://${process.env.NEXT_PUBLIC_ALGOLIA_APP_ID}-dsn.algolia.net`}
133
            crossOrigin=""
134
          />
135
        </Head>
136
        <TopNav>
137
          <Link href="https://discord.gg/MMeYNTmh3x" className='hidden sm:block'>
138
            <img src="https://img.shields.io/discord/1073293645303795742"/>
139
          </Link>
140
          <Link href="https://github.com/chroma-core/chroma">
141
            <img src="https://img.shields.io/github/stars/chroma-core/chroma.svg?style=social&label=Star&maxAge=2400"/>
142
          </Link>
143
          <Link href="https://twitter.com/trychroma" className='hidden sm:block'>
144
            <img src="https://img.shields.io/twitter/follow/trychroma"/>
145
          </Link>
146
        <ThemeToggle/>
147
        </TopNav>
148
        <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0 justify-between max-w-screen">
149
          <div className="block mt-[calc(var(--ifm-navbar-height)*-1)] transition-width  w-[var(--doc-sidebar-width)] will-change-width clip-path-[inset(0)]">
150
            <div className="h-full overflow-y-scroll max-h-screen sticky top-0">
151
              <SideNav  />
152
            </div>
153
          </div>
154

155
          <main className="max-w-screen-md article grow p-5 md:p-0 md:pt-8">
156

157
          {inGroup? (
158
          <Breadcrumb className='mb-8'>
159
            <BreadcrumbList>
160
              <BreadcrumbItem>
161
                <BreadcrumbLink href="/">Home</BreadcrumbLink>
162
              </BreadcrumbItem>
163
              <BreadcrumbSeparator />
164
              {breadcrumbs.map((item, index) => {
165
                return (
166
                  <>
167
                  <BreadcrumbItem key={index}>
168
                    <BreadcrumbLink href={item.href}>{item.name}</BreadcrumbLink>
169
                  </BreadcrumbItem>
170
                  {/* if not the last item, add a BreadcrumbSeparator */}
171
                  {index !== breadcrumbs.length - 1 ? (
172
                    <BreadcrumbSeparator />
173
                  ) : (
174
                    <></>
175
                  )}
176
                  </>
177
                )
178
              })}
179

180
            </BreadcrumbList>
181
          </Breadcrumb>
182
          ) : <> </>}
183

184
            <div className='text-3xl mb-6 font-semibold'>{title}</div>
185
            <Component {...pageProps} />
186
            {/* <div className="mt-20">
187
              <a
188
                href={``}
189
                target="_blank"
190
                rel="noopener noreferrer"
191
                className="underline font-semibold"
192
                style={{textUnderlinePosition: 'under', textUnderlineOffset: '0.2em', textDecorationColor: '#bfbfbf'}}
193
              >
194
                <Icons.gitHub className="inline-block w-6 h-6 mr-2" />
195
                Edit this page on GitHub
196
              </a>
197
            </div> */}
198
          </main>
199

200
          <div className="block mt-[calc(var(--ifm-navbar-height)*-1)] transition-width  w-[var(--doc-sidebar-width)] will-change-width clip-path-[inset(0)]"
201
          style={{margin: '0 !important'}}
202
          >
203
            <div className="h-full overflow-y-scroll max-h-screen sticky top-0">
204
              <TableOfContents toc={toc} />
205
            </div>
206
          </div>
207

208
        </div>
209
        <Toaster />
210
      </GlobalStateProvider>
211

212
    </main>
213
    </ThemeProvider>
214
  );
215
}
216