diff --git a/apps/docs/components/JwtGenerator.js b/apps/docs/components/JwtGenerator.js index 4ac1b05e255..d0dc7a7bf08 100644 --- a/apps/docs/components/JwtGenerator.js +++ b/apps/docs/components/JwtGenerator.js @@ -1,7 +1,6 @@ import React, { useState } from 'react' import KJUR from 'jsrsasign' -import CodeBlock from './CodeBlock/CodeBlock' -import { Button, Select, Input } from 'ui' +import { Button, Select, Input, CodeBlock } from 'ui' const JWT_HEADER = { alg: 'HS256', typ: 'JWT' } const now = new Date() diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx index 2c6de4992b5..8178b4d51f5 100644 --- a/apps/docs/components/index.tsx +++ b/apps/docs/components/index.tsx @@ -1,31 +1,27 @@ -import { Button, Tabs, Alert, GlassPanel } from 'ui' import Link from 'next/link' +import { Alert, Button, CodeBlock, GlassPanel, markdownComponents, Tabs } from 'ui' import StepHikeCompact from '~/components/StepHikeCompact' // Common components import Admonition from './Admonition' import ButtonCard from './ButtonCard' -import CodeBlock from './CodeBlock/CodeBlock' -import { parseNumericRange } from './CodeBlock/CodeBlock.utils' import JwtGenerator from './JwtGenerator' // Page specific components -import Frameworks from './Frameworks' import AuthProviders from './AuthProviders' -import FunctionsExamples from './FunctionsExamples' import Extensions from './Extensions' +import Frameworks from './Frameworks' +import FunctionsExamples from './FunctionsExamples' // Other components -import { Heading } from './CustomHTMLElements' -import QuickstartIntro from './MDX/quickstart_intro.mdx' -import ProjectSetup from './MDX/project_setup.mdx' -import SocialProviderSetup from './MDX/social_provider_setup.mdx' -import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supabase.mdx' -import StorageManagement from './MDX/storage_management.mdx' import { Mermaid } from 'mdx-mermaid/lib/Mermaid' -import InlineCodeTag from './CustomHTMLElements/InlineCode' -import React from 'react' import RefSubLayout from '~/layouts/ref/RefSubLayout' +import { Heading } from './CustomHTMLElements' +import ProjectSetup from './MDX/project_setup.mdx' +import QuickstartIntro from './MDX/quickstart_intro.mdx' +import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supabase.mdx' +import SocialProviderSetup from './MDX/social_provider_setup.mdx' +import StorageManagement from './MDX/storage_management.mdx' // import { CH } from '@code-hike/mdx/components' import RefHeaderSection from './reference/RefHeaderSection' @@ -34,9 +30,9 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo import Options from '~/components/Options' import Param from '~/components/Params' -import Image from 'next/image' const components = { + ...markdownComponents, Admonition, Button, ButtonCard, @@ -72,26 +68,11 @@ const components = { {props.children} ), - // pre: (props: any) => { - // const linesToHighlight = parseNumericRange(props.lines ?? '') - // return - // }, - mono: (props: any) => {props.children}, - // inlineCode: (props: { children: string }) => , RefSubLayout, - // CH, - code: (props: any) => , RefHeaderSection: (props: any) => , CliGlobalFlagsHandler: () => , Options, Param, - img: (props: any) => { - return ( - - - - ) - }, } export default components diff --git a/apps/docs/components/reference/ApiOperationSection.tsx b/apps/docs/components/reference/ApiOperationSection.tsx index f97549b4775..6713809bccf 100644 --- a/apps/docs/components/reference/ApiOperationSection.tsx +++ b/apps/docs/components/reference/ApiOperationSection.tsx @@ -1,5 +1,4 @@ -import { Tabs } from '~/../../packages/ui' -import CodeBlock from '~/components/CodeBlock/CodeBlock' +import { CodeBlock, Tabs } from 'ui' import Param from '~/components/Params' import RefSubLayout from '~/layouts/ref/RefSubLayout' diff --git a/apps/docs/components/reference/CLICommandSection.tsx b/apps/docs/components/reference/CLICommandSection.tsx index 9217dd4980f..d20c1db8086 100644 --- a/apps/docs/components/reference/CLICommandSection.tsx +++ b/apps/docs/components/reference/CLICommandSection.tsx @@ -1,8 +1,7 @@ import ReactMarkdown from 'react-markdown' -import { IconChevronRight, Tabs } from '~/../../packages/ui' +import { CodeBlock, IconChevronRight, Tabs } from 'ui' // @ts-expect-error import spec from '~/../../spec/cli_v1_commands.yaml' assert { type: 'yml' } -import CodeBlock from '~/components/CodeBlock/CodeBlock' import Options from '~/components/Options' import Param from '~/components/Params' import RefSubLayout from '~/layouts/ref/RefSubLayout' diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx index 8b228a6bfa6..ddb35ba930b 100644 --- a/apps/docs/components/reference/RefFunctionSection.tsx +++ b/apps/docs/components/reference/RefFunctionSection.tsx @@ -1,7 +1,6 @@ import ReactMarkdown from 'react-markdown' -import { IconDatabase, Tabs } from 'ui' -import CodeBlock from '~/components/CodeBlock/CodeBlock' +import { CodeBlock, IconDatabase, Tabs } from 'ui' import Options from '~/components/Options' import Param from '~/components/Params' diff --git a/apps/docs/pages/reference/auth/[...slug].tsx b/apps/docs/pages/reference/auth/[...slug].tsx index ad57871576b..68603c86b07 100644 --- a/apps/docs/pages/reference/auth/[...slug].tsx +++ b/apps/docs/pages/reference/auth/[...slug].tsx @@ -1,9 +1,7 @@ +import { CodeBlock, Tabs } from 'ui' import specFile from '~/../../spec/transforms/auth_v1_openapi_deparsed.json' assert { type: 'json' } -import { gen_v3, enrichedOperation } from '~/lib/refGenerator/helpers' -import { Tabs } from '~/../../packages/ui' +import { gen_v3 } from '~/lib/refGenerator/helpers' -// @ts-ignore -import CodeBlock from '~/components/CodeBlock/CodeBlock' import RefSubLayout from '~/layouts/ref/RefSubLayout' export type AcceptedValue = { diff --git a/apps/docs/pages/reference/storage/[...slug].tsx b/apps/docs/pages/reference/storage/[...slug].tsx index 9068c3008c7..bfd42d2719a 100644 --- a/apps/docs/pages/reference/storage/[...slug].tsx +++ b/apps/docs/pages/reference/storage/[...slug].tsx @@ -1,9 +1,7 @@ +import { CodeBlock, Tabs } from 'ui' import specFile from '~/../../spec/transforms/storage_v0_openapi_deparsed.json' assert { type: 'json' } -import { gen_v3, enrichedOperation } from '~/lib/refGenerator/helpers' -import { Tabs } from '~/../../packages/ui' +import { gen_v3 } from '~/lib/refGenerator/helpers' -// @ts-ignore -import CodeBlock from '~/components/CodeBlock/CodeBlock' import RefSubLayout from '~/layouts/ref/RefSubLayout' export type AcceptedValue = { diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml index 598060f55aa..c8b69531b42 100644 --- a/apps/docs/public/sitemap.xml +++ b/apps/docs/public/sitemap.xml @@ -18,6 +18,24 @@ 0.5 + + https://supabase.com/docs/handbook/contributing + weekly + 0.5 + + + + https://supabase.com/docs/handbook/introduction + weekly + 0.5 + + + + https://supabase.com/docs/guides/auth + weekly + 0.5 + + https://supabase.com/docs/guides/cli weekly @@ -78,24 +96,42 @@ 0.5 - - https://supabase.com/docs/handbook/contributing - weekly - 0.5 - - - - https://supabase.com/docs/handbook/introduction - weekly - 0.5 - - https://supabase.com/docs/reference/index weekly 0.5 + + https://supabase.com/docs/learn/auth-deep-dive/auth-deep-dive-jwts + weekly + 0.5 + + + + https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth + weekly + 0.5 + + + + https://supabase.com/docs/learn/auth-deep-dive/auth-gotrue + weekly + 0.5 + + + + https://supabase.com/docs/learn/auth-deep-dive/auth-policies + weekly + 0.5 + + + + https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security + weekly + 0.5 + + https://supabase.com/docs/guides/auth/auth-captcha weekly @@ -133,13 +169,13 @@ - https://supabase.com/docs/guides/auth/managing-user-data + https://supabase.com/docs/guides/auth/enterprise-sso weekly 0.5 - https://supabase.com/docs/guides/auth/overview + https://supabase.com/docs/guides/auth/managing-user-data weekly 0.5 @@ -180,6 +216,84 @@ 0.5 + + https://supabase.com/docs/guides/functions/auth + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/cicd-workflow + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/connect-to-postgres + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/cors + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/debugging + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/global-deployments + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/import-maps + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/local-development + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/quickstart + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/schedule-functions + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/secrets + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/storage-caching + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/typescript-support + weekly + 0.5 + + https://supabase.com/docs/guides/database/api weekly @@ -450,60 +564,6 @@ 0.5 - - https://supabase.com/docs/guides/functions/auth - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/cicd-workflow - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/cors - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/debugging - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/import-maps - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/local-development - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/quickstart - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/schedule-functions - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/secrets - weekly - 0.5 - - https://supabase.com/docs/guides/platform/access-control weekly @@ -582,6 +642,12 @@ 0.5 + + https://supabase.com/docs/guides/platform/spend-cap + weekly + 0.5 + + https://supabase.com/docs/guides/platform/ssl-enforcement weekly @@ -601,19 +667,25 @@ - https://supabase.com/docs/guides/realtime/broadcast + https://supabase.com/docs/guides/realtime/architecture weekly 0.5 - https://supabase.com/docs/guides/realtime/postgres-changes + https://supabase.com/docs/guides/realtime/channels weekly 0.5 - https://supabase.com/docs/guides/realtime/presence + https://supabase.com/docs/guides/realtime/extensions + weekly + 0.5 + + + + https://supabase.com/docs/guides/realtime/protocol weekly 0.5 @@ -630,6 +702,18 @@ 0.5 + + https://supabase.com/docs/guides/realtime/realtime-with-nextjs + weekly + 0.5 + + + + https://supabase.com/docs/guides/realtime/subscribing-to-database-changes + weekly + 0.5 + + https://supabase.com/docs/guides/resources/examples weekly @@ -678,36 +762,6 @@ 0.5 - - https://supabase.com/docs/learn/auth-deep-dive/auth-deep-dive-jwts - weekly - 0.5 - - - - https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth - weekly - 0.5 - - - - https://supabase.com/docs/learn/auth-deep-dive/auth-gotrue - weekly - 0.5 - - - - https://supabase.com/docs/learn/auth-deep-dive/auth-policies - weekly - 0.5 - - - - https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security - weekly - 0.5 - - https://supabase.com/docs/guides/auth/auth-helpers/auth-ui weekly @@ -738,6 +792,24 @@ 0.5 + + https://supabase.com/docs/guides/auth/phone-login/messagebird + weekly + 0.5 + + + + https://supabase.com/docs/guides/auth/phone-login/twilio + weekly + 0.5 + + + + https://supabase.com/docs/guides/auth/phone-login/vonage + weekly + 0.5 + + https://supabase.com/docs/guides/auth/social-login/auth-apple weekly @@ -840,12 +912,102 @@ 0.5 + + https://supabase.com/docs/guides/auth/sso/auth-sso-saml + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/cloudflare-turnstile + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/discord-bot + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/github-actions + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/og-image + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/openai + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/rate-limiting + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/screenshots + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/stripe-webhooks + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/telegram-bot + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples/upstash-redis + weekly + 0.5 + + https://supabase.com/docs/guides/database/api/generating-types weekly 0.5 + + https://supabase.com/docs/guides/database/postgres/dropping-all-tables-in-schema + weekly + 0.5 + + + + https://supabase.com/docs/guides/database/postgres/first-row-in-group + weekly + 0.5 + + + + https://supabase.com/docs/guides/database/postgres/indexes + weekly + 0.5 + + + + https://supabase.com/docs/guides/database/postgres/which-version-of-postgres + weekly + 0.5 + + https://supabase.com/docs/guides/getting-started/quickstarts/flutter weekly @@ -888,186 +1050,6 @@ 0.5 - - https://supabase.com/docs/guides/getting-started/tutorials/with-angular - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-expo - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-flutter - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-angular - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-react - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-vue - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3 - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-react - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-redwoodjs - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-solidjs - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-svelte - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-sveltekit - weekly - 0.5 - - - - https://supabase.com/docs/guides/getting-started/tutorials/with-vue-3 - weekly - 0.5 - - - - https://supabase.com/docs/guides/auth/phone-login/messagebird - weekly - 0.5 - - - - https://supabase.com/docs/guides/auth/phone-login/twilio - weekly - 0.5 - - - - https://supabase.com/docs/guides/auth/phone-login/vonage - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/cloudflare-turnstile - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/connect-to-postgres - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/discord-bot - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/github-actions - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/og-image - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/openai - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/storage-caching - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/stripe-webhooks - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/telegram-bot - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples/upstash-redis - weekly - 0.5 - - - - https://supabase.com/docs/guides/platform/sso/azure - weekly - 0.5 - - - - https://supabase.com/docs/guides/platform/sso/gsuite - weekly - 0.5 - - - - https://supabase.com/docs/guides/platform/sso/okta - weekly - 0.5 - - https://supabase.com/docs/guides/database/extensions/http weekly @@ -1224,6 +1206,126 @@ 0.5 + + https://supabase.com/docs/guides/platform/sso/azure + weekly + 0.5 + + + + https://supabase.com/docs/guides/platform/sso/gsuite + weekly + 0.5 + + + + https://supabase.com/docs/guides/platform/sso/okta + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-angular + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-expo + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-flutter + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-angular + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-react + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-ionic-vue + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3 + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-react + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-redwoodjs + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-solidjs + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-svelte + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-sveltekit + weekly + 0.5 + + + + https://supabase.com/docs/guides/getting-started/tutorials/with-vue-3 + weekly + 0.5 + + + + https://supabase.com/docs/guides/realtime/extensions/broadcast + weekly + 0.5 + + + + https://supabase.com/docs/guides/realtime/extensions/postgres-changes + weekly + 0.5 + + + + https://supabase.com/docs/guides/realtime/extensions/presence + weekly + 0.5 + + https://supabase.com/docs/guides/resources/migrating-to-supabase/firebase-auth weekly @@ -1260,24 +1362,6 @@ 0.5 - - https://supabase.com/docs/guides/resources/postgres/dropping-all-tables-in-schema - weekly - 0.5 - - - - https://supabase.com/docs/guides/resources/postgres/first-row-in-group - weekly - 0.5 - - - - https://supabase.com/docs/guides/resources/postgres/which-version-of-postgres - weekly - 0.5 - - https://supabase.com/docs/guides/self-hosting/realtime/config weekly @@ -3560,6 +3644,24 @@ 0.5 + + https://supabase.com/docs/reference/cli/supabase-ssl-enforcement + weekly + 0.5 + + + + https://supabase.com/docs/reference/cli/supabase-ssl-enforcement-update + weekly + 0.5 + + + + https://supabase.com/docs/reference/cli/supabase-ssl-enforcement-get + weekly + 0.5 + + https://supabase.com/docs/reference/cli/supabase-secrets weekly diff --git a/package-lock.json b/package-lock.json index 30240f367b3..ed9aafaf861 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38341,8 +38341,10 @@ "openai": "^3.2.1", "postcss": "^8.4.5", "prop-types": "^15.7.2", + "react-copy-to-clipboard": "^5.1.0", "react-feather": "^2.0.10", "react-markdown": "^8.0.3", + "react-syntax-highlighter": "^15.5.0", "remark-gfm": "^3.0.1", "sse.js": "^0.6.1", "tailwind-merge": "^1.10.0", @@ -66879,8 +66881,10 @@ "openai": "^3.2.1", "postcss": "^8.4.5", "prop-types": "^15.7.2", + "react-copy-to-clipboard": "^5.1.0", "react-feather": "^2.0.10", "react-markdown": "^8.0.3", + "react-syntax-highlighter": "^15.5.0", "remark-gfm": "^3.0.1", "sse.js": "^0.6.1", "tailwind-merge": "^1.10.0", diff --git a/packages/common/Providers.tsx b/packages/common/Providers.tsx index b32f378b8cb..1e27eb0f948 100644 --- a/packages/common/Providers.tsx +++ b/packages/common/Providers.tsx @@ -1,7 +1,7 @@ import { createContext, useContext, useEffect, useState } from 'react' export interface UseThemeProps { - isDarkMode?: boolean + isDarkMode: boolean /** * Toggle between dark mode and light mode. * diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 8ed9dcc7a4a..b27b03ba9f5 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -4,6 +4,10 @@ import * as React from 'react' export * from './src/providers' +// Markdown components + +export * from './src/lib/Markdown' + // // GENERAL export * from './src/components/Button' @@ -21,6 +25,7 @@ export * from './src/components/Tabs' export * from './src/components/Alert' export * from './src/components/Accordion' export * from './src/components/Collapsible' +export * from './src/components/CodeBlock' // export * from './src/components/Breadcrumb' // NAV diff --git a/packages/ui/package.json b/packages/ui/package.json index 19657ecd01d..f9654a7f834 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -31,7 +31,9 @@ "openai": "^3.2.1", "postcss": "^8.4.5", "prop-types": "^15.7.2", + "react-copy-to-clipboard": "^5.1.0", "react-feather": "^2.0.10", + "react-syntax-highlighter": "^15.5.0", "react-markdown": "^8.0.3", "remark-gfm": "^3.0.1", "sse.js": "^0.6.1", diff --git a/apps/docs/components/CodeBlock/CodeBlock.tsx b/packages/ui/src/components/CodeBlock/CodeBlock.tsx similarity index 95% rename from apps/docs/components/CodeBlock/CodeBlock.tsx rename to packages/ui/src/components/CodeBlock/CodeBlock.tsx index b54e01b699f..b1f443ab128 100644 --- a/apps/docs/components/CodeBlock/CodeBlock.tsx +++ b/packages/ui/src/components/CodeBlock/CodeBlock.tsx @@ -1,7 +1,8 @@ +import * as React from 'react' import { Children, FC } from 'react' -import CopyToClipboard from 'react-copy-to-clipboard' +import * as CopyToClipboard from 'react-copy-to-clipboard' import { Light as SyntaxHighlighter } from 'react-syntax-highlighter' -import monokaiCustomTheme from './CodeBlock.utils' +import { monokaiCustomTheme } from './CodeBlock.utils' import { Button, IconCheck, IconCopy } from 'ui' import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript' @@ -16,7 +17,7 @@ import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json' import { useState } from 'react' import { useTheme } from 'common/Providers' -interface Props { +export interface CodeBlockProps { title?: string language: 'js' | 'jsx' | 'sql' | 'py' | 'bash' | 'ts' | 'dart' | 'json' | 'csharp' linesToHighlight?: number[] @@ -27,7 +28,7 @@ interface Props { children?: string } -const CodeBlock: FC = ({ +export const CodeBlock = ({ title, language, linesToHighlight = [], @@ -36,7 +37,7 @@ const CodeBlock: FC = ({ children, hideCopy = false, hideLineNumbers = false, -}) => { +}: CodeBlockProps) => { const { isDarkMode } = useTheme() const monokaiTheme = monokaiCustomTheme(isDarkMode) @@ -156,5 +157,3 @@ const CodeBlock: FC = ({ ) } - -export default CodeBlock diff --git a/apps/docs/components/CodeBlock/CodeBlock.utils.js b/packages/ui/src/components/CodeBlock/CodeBlock.utils.ts similarity index 69% rename from apps/docs/components/CodeBlock/CodeBlock.utils.js rename to packages/ui/src/components/CodeBlock/CodeBlock.utils.ts index 48b62cffc1e..75e39954778 100644 --- a/apps/docs/components/CodeBlock/CodeBlock.utils.js +++ b/packages/ui/src/components/CodeBlock/CodeBlock.utils.ts @@ -1,33 +1,4 @@ -// https://github.com/euank/node-parse-numeric-range/blob/master/index.js -export function parseNumericRange(string) { - let res = [] - let m - - for (let str of string.split(',').map((str) => str.trim())) { - // just a number - if (/^-?\d+$/.test(str)) { - res.push(parseInt(str, 10)) - } else if ((m = str.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/))) { - // 1-5 or 1..5 (equivalent) or 1...5 (doesn't include 5) - let [_, lhs, sep, rhs] = m - - if (lhs && rhs) { - lhs = parseInt(lhs) - rhs = parseInt(rhs) - const incr = lhs < rhs ? 1 : -1 - - // Make it inclusive by moving the right 'stop-point' away by one. - if (sep === '-' || sep === '..' || sep === '\u2025') rhs += incr - - for (let i = lhs; i !== rhs; i += incr) res.push(i) - } - } - } - - return res -} - -const monokaiCustomTheme = (isDarkMode) => { +export const monokaiCustomTheme = (isDarkMode: boolean) => { return { hljs: { display: 'block', @@ -142,5 +113,3 @@ const monokaiCustomTheme = (isDarkMode) => { }, } } - -export default monokaiCustomTheme diff --git a/packages/ui/src/components/CodeBlock/index.tsx b/packages/ui/src/components/CodeBlock/index.tsx new file mode 100644 index 00000000000..412da3582da --- /dev/null +++ b/packages/ui/src/components/CodeBlock/index.tsx @@ -0,0 +1 @@ +export * from './CodeBlock' diff --git a/packages/ui/src/lib/Markdown/index.tsx b/packages/ui/src/lib/Markdown/index.tsx new file mode 100644 index 00000000000..09274ae7ac9 --- /dev/null +++ b/packages/ui/src/lib/Markdown/index.tsx @@ -0,0 +1,15 @@ +import * as React from 'react' +import { CodeBlock } from '../../components/CodeBlock/CodeBlock' +import Image from 'next/image' + +export const markdownComponents = { + mono: (props: any) => {props.children}, + code: (props: any) => , + img: (props: any) => { + return ( + + + + ) + }, +}