Files
supabase/apps/docs/pages/reference/analytics/config.tsx
2024-01-03 18:54:23 +01:00

115 lines
4.1 KiB
TypeScript

import fs from 'fs'
import matter from 'gray-matter'
import components from '~/components/index'
import { MDXRemote } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'
import specFile from '~/spec/analytics_v0_config.yaml' assert { type: 'yml' }
import { Parameter } from '~/lib/refGenerator/refTypes'
import ReactMarkdown from 'react-markdown'
// Parameters are grouped on the page by tag
const TAGS = ['general', 'database']
export default function Config(props) {
return (
<div>
<div className="flex my-16">
<div className="w-full prose">
<h1 className="text-4xl mb-16">{specFile.info.title} Configuration</h1>
<ReactMarkdown>{specFile.info.description}</ReactMarkdown>
<div>
<div>
{props.docs
.filter((doc) => doc.introPage)
.map((item) => (
<MDXRemote {...item.content} components={components} />
))}
</div>
{TAGS.map((tag) =>
specFile.parameters
.filter((param: Parameter) => param.tags[0] === tag)
.map((parameter: Parameter, index) => (
<div>
{index === 0 && <h2 className="text-xl capitalize">{tag} Settings</h2>}
<div className="mt-8">
<div>
<h2 className="text-xl font-medium text-foreground font-mono">
<span className="mr-2">$</span>
{parameter.title}
</h2>
<div className="grid" id={parameter.id}>
<div className="border-b pb-8" key={parameter.id}>
<div className=" mb-16">
<p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
<ReactMarkdown>{parameter.description}</ReactMarkdown>
</p>
<div className="grid gap-2">
<div className="flex gap-2">
Required: <code>{parameter.required.toString()}</code>
</div>
<div className="flex gap-2">
Default:
<code>
{parameter.default ? parameter.default.toString() : 'None'}
</code>
</div>
</div>
</div>
{parameter.links &&
parameter.links.map((link) => (
<div>
<h3>See also:</h3>
<li>
<a href={link.link}>{link.name}</a>
</li>
</div>
))}
</div>
</div>
</div>
</div>
</div>
))
)}
</div>
</div>
</div>
</div>
)
}
export async function getServerSideProps() {
// an array of ids of the intro sections for this library
const introPages = ['analytics']
const pages = [...introPages]
// Grab custom markdown intro page files
const allMarkdownDocs = await Promise.all(
pages.map(async (x: any, i) => {
const pathName = `docs/ref/analytics/${x}.mdx`
const markdownExists = fs.existsSync(pathName)
const fileContents = markdownExists ? fs.readFileSync(pathName, 'utf8') : ''
const { data, content } = matter(fileContents)
return {
id: x,
title: x,
// ...content,
meta: data,
introPage: introPages.includes(x),
content: content ? await serialize(content || '') : null,
}
})
)
return {
props: {
docs: allMarkdownDocs,
},
}
}