dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

restyle admonitions to match alerts and streamline types (#19186)

Browse Source 
* fix: streamline admonition types

Streamline types available for admonitions:

- Remove `info` and replace with `note`
- Add `deprecation`

Display the type on all admonitions, even if they have a label. Makes it
explicit what level of advice you are looking at (since color and icon
are ambiguous).

* change admonition to use alert under the hood
This commit is contained in:
Charis authored and GitHub committed 2023-11-24 10:41:37 -05:00
1 parent afd18c0e81
commit 268c6016ee
12 files changed
+40 -56
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/docs/ref/self-hosting-analytics/introduction.mdx
+1 -1
View File
@@ -19,7 +19,7 @@ The Supabase Analytics server is a Logflare self-hostable instance that manages
When self-hosting the Analytics server, the full logging experience matching that of the Supabase Platform is available in the Studio instance, allowing for an integrated and enhanced development experience.
However, it's important to note that certain [differences](#differences) may arise due to the platform's infrastructure.
<Admonition type="info" label="Logflare Technical Docs">
<Admonition type="note" label="Logflare Technical Docs">
All Logflare technical documentation is available at https://docs.logflare.app.
apps/docs/docs/ref/self-hosting-functions/introduction.mdx
+1 -1
View File
@@ -21,7 +21,7 @@ You can use it to:
- Locally test and self-host Supabase's Edge Functions (or any Deno Edge Function)
- As a programmable HTTP Proxy: You can intercept / route HTTP requests
<Admonition type="info" label="Beta Version">
<Admonition type="note" label="Beta Version">
Self hosted Edge functions are in beta. There will be breaking changes to APIs / Configuration Options.
apps/docs/lib/mdx/plugins/remarkAdmonition.ts
+1 -1
View File
@@ -109,7 +109,7 @@ function mapAdmonitionType(type: string): AdmonitionProps['type'] {
case 'question':
case 'info':
default:
return 'info'
return 'note'
}
}
apps/docs/pages/guides/ai/hugging-face.mdx
+3 -3
View File
@@ -57,7 +57,7 @@ Name your token based on the app its being used for and the environment. For exa
Since we will be using this token for the inference API, choose the `read` role.
<Admonition type="info">
<Admonition type="note">
Though it is possible to use the Hugging Face inference API today without an access token, [you may be rate limited](https://huggingface.co/docs/huggingface.js/inference/README#usage).
@@ -69,7 +69,7 @@ To ensure you don't experience any unexpected downtime or errors, we recommend c
Edge Functions are server-side TypeScript functions that run on-demand. Since Edge Functions run on a server, you can safely give them access to your Hugging Face access token.
<Admonition type="info">
<Admonition type="note">
You will need the `supabase` CLI [installed](/docs/guides/cli) for the following commands to work.
@@ -136,7 +136,7 @@ supabase functions serve --env-file .env.local --no-verify-jwt
Remember to pass in the `.env.local` file using the `--env-file` parameter so that the Edge Function can access the `HUGGING_FACE_ACCESS_TOKEN`.
<Admonition type="info">
<Admonition type="note">
For demo purposes we set `--no-verify-jwt` to make it easy to test the Edge Function without passing in a JWT token. In a real application you will need to pass the JWT as a `Bearer` token in the `Authorization` header.
apps/docs/pages/guides/auth/auth-email.mdx
+1 -1
View File
@@ -12,7 +12,7 @@ Set up Email Logins for your Supabase application.
- Configure the Site URL and any additional redirect URLs in the [authentication management tab](/dashboard/project/_/auth/url-configuration).
- The Site URL represents the default URL that the user will be redirected to after clicking on the email signup confirmation link.
<Admonition type="info" label="Self hosting">
<Admonition type="note" label="Self hosting">
For self-hosting, you can update your project configuration using the files and environment variables provided.
apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
+1 -1
View File
@@ -161,7 +161,7 @@ const App = () => (
)
```
<Admonition type="info">
<Admonition type="note">
Currently there is only one predefined theme available, but we plan to add more.
apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+2 -2
View File
@@ -721,7 +721,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
</TabPanel>
</Tabs>
<Admonition type="info">
<Admonition type="note">
Check out the [Next.js auth example repo](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) for more examples, including [realtime subscriptions](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx).
@@ -802,7 +802,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
</TabPanel>
</Tabs>
<Admonition type="info">
<Admonition type="note">
Check out the [Next.js auth example repo](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) for more examples, including redirecting unauthenticated users - [protected pages](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/[id]/page.tsx).
apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
+3 -3
View File
@@ -122,7 +122,7 @@ export const handle: Handle = async ({ event, resolve }) => {
</TabPanel>
</Tabs>
<Admonition type="info">
<Admonition type="note">
Note that we are specifying filterSerializedResponseHeaders here. We need to tell SvelteKit that supabase needs the content-range header.
@@ -209,7 +209,7 @@ declare global {
Authentication can be initiated [client](/docs/guides/auth/auth-helpers/sveltekit#client-side) or [server-side](/docs/guides/auth/auth-helpers/sveltekit#server-side). All of the [supabase-js authentication strategies](/docs/reference/javascript/auth-api) are supported with the Auth Helpers client.
<Admonition type="info">
<Admonition type="note">
Note: The authentication flow requires the [Code Exchange Route](/docs/guides/auth/auth-helpers/sveltekit#code-exchange-route) to exchange a `code` for the user's `session`.
@@ -318,7 +318,7 @@ export const load = async ({ fetch, data, depends }) => {
}
```
<Admonition type="info">
<Admonition type="note">
TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createSupabaseLoadClient` to add type support to the Supabase client.
apps/docs/pages/guides/auth/phone-login/twilio.mdx
+1 -1
View File
@@ -114,7 +114,7 @@ Note: for "Twilio Message Service SID" you can use the Sender Phone Number gener
Now the backend should be setup, we can proceed to add our client-side code!
<Admonition type="info">
<Admonition type="note">
The `Twilio Content SID` field is specific to Twilio Programmable Messaging (WhatsApp) senders.
Disregard this field if you are only sending SMS messages. Refer to the section on WhatsApp OTP
Logins for further details.
apps/docs/pages/guides/auth/server-side-rendering.mdx
+2 -2
View File
@@ -65,7 +65,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
The client libraries are designed to listen for this type of URL, extract the access token, refresh token and some extra information from it, and finally persist it in local storage for further use by the library and your app.
<Admonition type="info">
<Admonition type="note">
Web browsers do not send the URL fragment to the server they're making the request to. Since you may not be hosting the single-page app on a server under your direct control (such as on GitHub Pages or other freemium hosting providers), we want to prevent hosting services from getting access to your user's authorization credentials by default.
@@ -87,7 +87,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
```
The `code` parameter is commonly known as the Auth Code and can be exchanged for an access token by calling `exchangeCodeForSession(code)`.
<Admonition type="info">
<Admonition type="note">
For security purposes, the code has a validity of 5 minutes and can only be exchanged for an access token once. You will need to restart the authentication flow from scratch if you wish to obtain a new access token.
apps/docs/pages/guides/platform/database-size.mdx
+2 -2
View File
@@ -63,7 +63,7 @@ Disk Storage expands automatically when the database reaches 90% of the disk siz
The Disk Storage Size can also be manually expanded on the [Database settings page](https://supabase.com/dashboard/project/_/settings/database). The maximum default you can expand the Disk Storage to is 200GB. If you wish to manually expand it to any more than 200GB, please [contact us](https://supabase.com/dashboard/support/new) to discuss expanding the 200GB limit.
<Admonition type="info">
<Admonition type="note">
You may want to import a lot of data into your database which requires multiple disk expansions; for example, uploading more than 1.5x the current size of your database storage will put your database into [read-only mode](#read-only-mode). If so, it is highly recommended you increase the Disk Storage Size manually on the [Database settings page](https://supabase.com/dashboard/project/_/settings/database).
@@ -71,7 +71,7 @@ Due to provider restrictions, disk expansions can occur only once every six hour
</Admonition>
<Admonition type="info">
<Admonition type="note">
A Supabase (or Postgres) update will "right-size" your disk based on the current size of the database. For example, if your database is 100GB in size, and you have a 200GB disk, a Supabase update will reduce the disk size to 120GB (1.2x the size of your database).
packages/ui/src/components/Admonition/index.tsx
+22 -38
View File
@@ -1,52 +1,36 @@
import { PropsWithChildren } from 'react'
import { IconAlertTriangle, IconHelpCircle, IconInfo } from 'ui'
import { Alert, AlertVariant } from '../Alert'
export interface AdmonitionProps {
type: 'note' | 'tip' | 'info' | 'caution' | 'danger'
type: 'note' | 'tip' | 'caution' | 'danger' | 'deprecation'
label?: string
}
const admonitionToAlertMapping: Record<AdmonitionProps['type'], AlertVariant> = {
note: 'info',
tip: 'info',
caution: 'warning',
danger: 'danger',
deprecation: 'warning',
}
export const Admonition = ({
type = 'note',
label,
children,
}: PropsWithChildren<AdmonitionProps>) => {
return (
<div
className={[
'shadow p-4 rounded border-l-[5px] space-y-2 my-4',
`${
type === 'note'
? 'bg-surface-200 border-stronger'
: type === 'info'
? 'bg-surface-300 border-stronger'
: type === 'tip'
? 'bg-brand-300 border-brand-300'
: type === 'caution'
? 'bg-yellow-400 border-yellow-800'
: type === 'danger'
? 'bg-red-500 border-red-800'
: 'bg-surface-300 border-stronger'
}`,
].join(' ')}
<Alert
className="not-prose"
variant={admonitionToAlertMapping[type]}
title={
<span className="flex gap-2">
<span className="uppercase">{`${type}${label ? ':' : ''}`}</span>
{label}
</span>
}
withIcon
>
<div className="flex items-center space-x-2">
{type === 'note' ? (
<IconInfo className="text-foreground" size={18} strokeWidth={1.5} />
) : type === 'info' ? (
<IconInfo className="text-foreground" size={18} strokeWidth={1.5} />
) : type === 'tip' ? (
<IconHelpCircle className="text-foreground" size={18} strokeWidth={1.5} />
) : type === 'caution' ? (
<IconAlertTriangle className="text-foreground" size={18} strokeWidth={1.5} />
) : type === 'danger' ? (
<IconAlertTriangle className="text-foreground" size={18} strokeWidth={1.5} />
) : (
<IconInfo className="text-foreground" size={18} strokeWidth={1.5} />
)}
<p className="text-sm text-foreground uppercase my-0 font-bold">{label || type}</p>
</div>
<div className="admonition-content text-foreground text-base space-y-1">{children}</div>
</div>
{children}
</Alert>
)
}