mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
update blocks
This commit is contained in:
Jonathan Summers-Muir committed
1 parent
b308fedfd0
commit
d417850a23
6 files changed
+200
-101
No files matched your search
@@ -468,7 +468,7 @@ export const reference = {
|
||||
items: [
|
||||
{
|
||||
name: 'Supabase CLI',
|
||||
url: '/new/reference/cli',
|
||||
url: '/new/reference/cli/start',
|
||||
items: [],
|
||||
icon: '/img/icons/javascript.svg',
|
||||
},
|
||||
@@ -503,6 +503,26 @@ export const reference_javascript = {
|
||||
],
|
||||
}
|
||||
|
||||
export const reference_cli = {
|
||||
icon: '/img/icons/javascript-icon.svg',
|
||||
title: 'javascript-js',
|
||||
parent: '/reference',
|
||||
items: [
|
||||
{
|
||||
name: 'Getting Started',
|
||||
items: [
|
||||
{
|
||||
name: 'fake link',
|
||||
href: '/reference/javascript/start',
|
||||
level: 'reference_javascript',
|
||||
items: [],
|
||||
icon: '/img/icons/javascript.svg',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
// export const reference: [
|
||||
// {
|
||||
// label: 'Official'
|
||||
|
||||
@@ -53,6 +53,9 @@ const SideNav = () => {
|
||||
case url.includes(`/docs/new/reference/javascript/`) && url:
|
||||
setLevel('reference_javascript')
|
||||
break
|
||||
case url.includes(`/docs/new/reference/cli/`) && url:
|
||||
setLevel('reference_cli')
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
@@ -252,6 +255,7 @@ const SideNav = () => {
|
||||
|
||||
{/* reference level */}
|
||||
<NavigationMenuRefList id={'reference_javascript'} currentLevel={level} setLevel={setLevel} />
|
||||
<NavigationMenuRefList id={'reference_cli'} currentLevel={level} setLevel={setLevel} />
|
||||
|
||||
{/* // ref menu */}
|
||||
{/* <div
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { IconXCircle } from '~/../../packages/ui'
|
||||
import { AcceptedValue } from '~/pages/new/reference/cli/[...slug]'
|
||||
|
||||
interface IOptions {
|
||||
name?: string
|
||||
}
|
||||
|
||||
const Options: FC<IOptions> = (props) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<div className="mt-0">
|
||||
<button
|
||||
className={[
|
||||
'px-5',
|
||||
'border-t border-l border-r border-scale-500',
|
||||
'text-left text-sm text-scale-1100',
|
||||
'hover:bg-scale-300 transition-all',
|
||||
|
||||
'flex items-center gap-2',
|
||||
open ? 'w-full py-1.5 rounded-tl-lg rounded-tr-lg' : 'py-1 border-b rounded-full',
|
||||
].join(' ')}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<div className="">
|
||||
<div className={[!open ? 'rotate-45' : 'rotate-0'].join(' ')}>
|
||||
<IconXCircle size={14} />
|
||||
</div>
|
||||
</div>
|
||||
{`${!open ? `Open` : `Close`} ${props.name ?? 'accepted values'}`}
|
||||
</button>
|
||||
<div
|
||||
className={['transition-all opacity-0', open ? 'opacity-100 h-auto' : 'invisible h-0'].join(
|
||||
' '
|
||||
)}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
type IOption = AcceptedValue | any
|
||||
|
||||
const Option: FC<IOption> = (props) => {
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
px-5 py-3 first:border-t border-b border-l border-r
|
||||
border-scale-500
|
||||
last:rounded-bl-lg last:rounded-br-lg
|
||||
flex flex-col gap-3
|
||||
"
|
||||
>
|
||||
<div className="flex gap-3 items-center">
|
||||
<span className="text-sm text-scale-1200 font-mono font-medium">
|
||||
{props.name ?? 'no-name'}
|
||||
</span>
|
||||
<span>
|
||||
{props.isOptional ? (
|
||||
<div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">Optional</div>
|
||||
) : (
|
||||
<div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
|
||||
REQUIRED
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-scale-900 text-xs">{props.type ?? 'no type'}</span>
|
||||
</div>
|
||||
<p className="text-sm text-scale-1000 m-0">{props.description ?? 'nodescription'}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
Options.Option = Option
|
||||
|
||||
export default Options
|
||||
@@ -0,0 +1,30 @@
|
||||
import { FC } from 'react'
|
||||
import { Flag } from '~/pages/new/reference/cli/[...slug]'
|
||||
|
||||
type IParamProps = Flag | any
|
||||
|
||||
const Param: FC<IParamProps> = (paramItem) => {
|
||||
return (
|
||||
<div className="border-t border-b py-5 flex flex-col gap-3">
|
||||
<div className="flex gap-3 items-center">
|
||||
<span className="text-sm text-scale-1200 font-mono font-medium">
|
||||
{paramItem.name ?? 'no-name'}
|
||||
</span>
|
||||
<span>
|
||||
{paramItem.isOptional ? (
|
||||
<div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">Optional</div>
|
||||
) : (
|
||||
<div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
|
||||
REQUIRED
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-scale-900 text-xs">{paramItem.type ?? 'no type'}</span>
|
||||
</div>
|
||||
<p className="text-sm text-scale-1000 m-0">{paramItem.description ?? 'nodescription'}</p>
|
||||
{paramItem.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Param
|
||||
+40
-20
@@ -1,15 +1,25 @@
|
||||
// @ts-expect-error
|
||||
import cliSpec from '~/../../spec/cli_v1_commands_new_shape.yaml' assert { type: 'yml' }
|
||||
import CodeBlock from '~/components/CodeBlock/CodeBlock'
|
||||
import Options from '~/components/Options'
|
||||
import Param from '~/components/Params'
|
||||
|
||||
type Flag = {
|
||||
export type AcceptedValue = {
|
||||
id: string
|
||||
name: string
|
||||
type: 'string' | 'boolean' | 'object'
|
||||
description?: string
|
||||
}
|
||||
|
||||
export type Flag = {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
default_value: string
|
||||
accepted_values: AcceptedValue[]
|
||||
}
|
||||
|
||||
type Command = {
|
||||
export type Command = {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
@@ -26,25 +36,26 @@ export default function CliUsage() {
|
||||
<article>
|
||||
<div className="flex my-16">
|
||||
<div className="w-full">
|
||||
<h1>Usage</h1>
|
||||
<div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-4"></div>
|
||||
<p className="text-xl max-w-xl">{cliSpec.info.description}</p>
|
||||
<p className="">{cliSpec.info.description}</p>
|
||||
|
||||
<div className="grid gap-32 mx-auto max-w-5xl mt-24">
|
||||
{cliSpec.commands.map((command: Command, commandIndex) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="grid ref-container" id={command.id}>
|
||||
<div className="prose border-b pb-8" key={command.id}>
|
||||
<div className="border-b pb-8" key={command.id}>
|
||||
<header
|
||||
className={[
|
||||
// 'border-b sticky top-16 z-10',
|
||||
' mb-16',
|
||||
].join(' ')}
|
||||
>
|
||||
<h2 className="text-2xl not-prose text-scale-1200 capitalize mb-4 scroll-mt-16 mt-0">
|
||||
{command.summary}
|
||||
<h2 className="mb-4 scroll-mt-16 mt-0 font-mono text-scale-1200">
|
||||
$ {command.title}
|
||||
</h2>
|
||||
<p className="capitalize mb-4 scroll-mt-16 mt-0 text-scale-1100 text-base">
|
||||
{command.summary}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{command.usage && (
|
||||
@@ -54,8 +65,10 @@ export default function CliUsage() {
|
||||
)}
|
||||
|
||||
{command.subcommands.length > 0 && (
|
||||
<>
|
||||
<h3 className="text-sm font-bold">Available Commands</h3>
|
||||
<div className="">
|
||||
<h3 className="text-sm font-bold text-scale-1200 mb-3">
|
||||
Available Commands
|
||||
</h3>
|
||||
<ul>
|
||||
{command.subcommands.map((subcommand) => (
|
||||
<li key={subcommand}>
|
||||
@@ -65,19 +78,26 @@ export default function CliUsage() {
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
{command.flags.length > 0 && (
|
||||
<>
|
||||
<h3 className="text-lg ">Options</h3>
|
||||
<ul className="grid gap-2">
|
||||
{command.flags.map((flag) => (
|
||||
<li className="mt-0">
|
||||
<div>
|
||||
<code className="font-bold">{flag.name}</code>
|
||||
</div>
|
||||
<p className="text-sm">{flag.description}</p>
|
||||
</li>
|
||||
<h3 className="text-lg text-scale-1200 mb-3">Flags</h3>
|
||||
<ul className="">
|
||||
{command.flags.map((flag: Flag) => (
|
||||
<>
|
||||
<li className="mt-0">
|
||||
<Param {...flag}>
|
||||
{flag?.accepted_values && (
|
||||
<Options>
|
||||
{flag?.accepted_values.map((value) => {
|
||||
return <Options.Option {...value} />
|
||||
})}
|
||||
</Options>
|
||||
)}
|
||||
</Param>
|
||||
</li>
|
||||
</>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
@@ -30,6 +30,8 @@ import { useRouter } from 'next/router'
|
||||
import { extractTsDocNode, generateParameters } from '~/lib/refGenerator/helpers'
|
||||
import { ComesFrom } from '~/components/ComesFrom'
|
||||
import Link from 'next/link'
|
||||
import Param from '~/components/Params'
|
||||
import Options from '~/components/Options'
|
||||
|
||||
const marginTop = 256
|
||||
export default function Ref(props) {
|
||||
@@ -228,11 +230,11 @@ export default function Ref(props) {
|
||||
<header
|
||||
className={[
|
||||
// 'border-b sticky top-16 z-10',
|
||||
' mb-16',
|
||||
'mb-16',
|
||||
].join(' ')}
|
||||
>
|
||||
<h2
|
||||
className="text-2xl not-prose text-scale-1200 capitalize mb-4 scroll-mt-16"
|
||||
className="text-2xl text-scale-1200 capitalize mb-4 scroll-mt-16"
|
||||
onClick={() => updateUrl(item.id)}
|
||||
>
|
||||
{examples.functions[itemIndex].title ??
|
||||
@@ -243,54 +245,53 @@ export default function Ref(props) {
|
||||
{shortText && (
|
||||
<>
|
||||
<p
|
||||
className="text-base text-scale-1100 not-prose"
|
||||
className="text-sm text-scale-1100"
|
||||
dangerouslySetInnerHTML={{ __html: shortText }}
|
||||
></p>
|
||||
<ComesFrom
|
||||
{/* <ComesFrom
|
||||
link="https://raw.githubusercontent.com/supabase/supabase/master/spec/enrichments/tsdoc_v2/combined.json"
|
||||
text="combined.json"
|
||||
/>
|
||||
/> */}
|
||||
</>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{item.description && (
|
||||
<>
|
||||
<ComesFrom
|
||||
{/* <ComesFrom
|
||||
link="https://raw.githubusercontent.com/supabase/supabase/master/spec/enrichments/tsdoc_v2/combined.json"
|
||||
text="combined.json"
|
||||
/>
|
||||
<p className="text-lg not-prose">{item.description}</p>
|
||||
/> */}
|
||||
<p className="text-sm">{item.description}</p>
|
||||
</>
|
||||
)}
|
||||
<hr />
|
||||
{functionMarkdownContent && (
|
||||
<>
|
||||
<ComesFrom
|
||||
{/* <ComesFrom
|
||||
link="https://github.com/supabase/supabase/pull/10095/files#diff-bf42aab7d324c5330e4ae65d94803cd6da686d2241015536b0263e7f76aeca35"
|
||||
text="auth.signUp().mdx"
|
||||
/>
|
||||
/> */}
|
||||
<MDXRemote {...functionMarkdownContent} components={components} />
|
||||
</>
|
||||
)}
|
||||
{item.notes && (
|
||||
<div>
|
||||
<ComesFrom
|
||||
{/* <ComesFrom
|
||||
link="https://github.com/supabase/supabase/blob/master/spec/supabase_js_v2.yml#L105"
|
||||
text="supabase_js_v2"
|
||||
/>
|
||||
/> */}
|
||||
<ReactMarkdown className="text-sm">{item.notes}</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
{/* // parameters */}
|
||||
{parameters && (
|
||||
<>
|
||||
<ComesFrom
|
||||
<div className="not-prose mt-12">
|
||||
{/* <ComesFrom
|
||||
link="https://github.com/supabase/supabase/blob/master/spec/enrichments/tsdoc_v2/combined.json"
|
||||
text="combined.json"
|
||||
/>
|
||||
/> */}
|
||||
<h5 className="mb-3 text-base">Parameters</h5>
|
||||
<div className="">
|
||||
<ul className="">
|
||||
{parameters.map((param) => {
|
||||
// grab override params from yaml file
|
||||
const overrideParams = item.overrideParams
|
||||
@@ -303,76 +304,22 @@ export default function Ref(props) {
|
||||
const paramItem = overide?.length > 0 ? overide[0] : param
|
||||
|
||||
return (
|
||||
<div className="border-t border-b py-5 flex flex-col gap-3">
|
||||
<div className="flex gap-3 items-center">
|
||||
<span className="text-sm text-scale-1200 font-mono font-medium">
|
||||
{paramItem.name ?? 'no-name'}
|
||||
</span>
|
||||
<span>
|
||||
{paramItem.isOptional ? (
|
||||
<div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">
|
||||
Optional
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
|
||||
REQUIRED
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-scale-900 text-xs">
|
||||
{paramItem.type ?? 'no type'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-scale-1000 m-0">
|
||||
{paramItem.description ?? 'nodescription'}
|
||||
</p>
|
||||
<Param {...paramItem}>
|
||||
{paramItem.subContent && (
|
||||
<div className="mt-3">
|
||||
{param.subContent.map((param) => {
|
||||
return (
|
||||
<div
|
||||
className="px-5 py-3 first:border-t border-b border-l border-r
|
||||
border-scale-500
|
||||
|
||||
first:rounded-tl-lg first:rounded-tr-lg
|
||||
last:rounded-bl-lg last:rounded-br-lg
|
||||
|
||||
flex flex-col gap-3
|
||||
"
|
||||
>
|
||||
<div className="flex gap-3 items-center">
|
||||
<span className="text-sm text-scale-1200 font-mono font-medium">
|
||||
{param.name ?? 'no-name'}
|
||||
</span>
|
||||
<span>
|
||||
{param.isOptional ? (
|
||||
<div className="text-[10px] px-3 tracking-wide font-mono text-scale-900">
|
||||
Optional
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
|
||||
REQUIRED
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-scale-900 text-xs">
|
||||
{param.type ?? 'no type'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-scale-1000 m-0">
|
||||
{param.description ?? 'nodescription'}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<Options>
|
||||
{param.subContent.map((param) => {
|
||||
return <Options.Option {...param} />
|
||||
})}
|
||||
</Options>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Param>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ul>
|
||||
{/* <div dangerouslySetInnerHTML={{ __html: parameters }}></div> */}
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full">
|
||||
|
||||
Reference in new issue
Block a user