Commit Graph

24 Commits

Author SHA1 Message Date
Anthony Lio
085d218bff fix(docs): button a11y enhancements (#49952)
## What kind of change does this PR introduce?

bug fix for accessibility, fixes
[docs-1265](https://linear.app/supabase/issue/DOCS-1365/add-aria-label-to-icon-only-buttons-button-name)

## What is the current behavior?

some controles in the docs app have no accessible name, so screen
readers announce them as an unlabelled "button"

## What is the new behavior?

- adds each control a name the way its neighbours already do
- adds menu toggle a state-dependent `aria-label` and `aria-expanded`
- adds `button-name` to `enforced_rules`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Accessibility**
- Added descriptive labels to configuration selectors and mobile menu
controls.
- Mobile menu controls now announce whether the menu is open or closed.
- Expanded accessibility validation to check button names across
documentation pages.

- **UI Improvements**
- Updated the raw throughput table control with a clearer button
appearance and expandable chevron indicator.
  - Replaced a schema-migration tooltip with a direct in-page link.

- **Documentation**
- Removed the Info Tooltip component guidance from the contributing
documentation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-04 10:32:57 +03:00
Anthony Lio
27a4421d6e fix(docs): stop sidebar from jumping on scroll (#49807)
## What kind of change does this PR introduce?

bug fix to stop sidebar jump on scroll within docs

## What is the current behavior?

the docs sidebar shifts up by 1px as soon as scrolling start as the top
bar height include bottom border causing the jump as height token differ
from the whole height

## What is the new behavior?

favor box shadow instead of a border for the bottom line, so height
matches the token and nothing needs to compensate any more which allows
to remove some `+1px` elsewhere

+ also drops a nested `lg:sticky` in the sidebar that did nothing inside
an already-sticky parent

| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/b4bbfa2d-6595-4711-bb2b-bd2bf3aded8a"
/> |
| after | <video
src="https://github.com/user-attachments/assets/f044aebc-ef14-42c1-8564-3b290399d00b"
/> |

## Additional context

- header now uses the existing `subhighlight-border` utility, which was
not used anywhere else it seems, could also be renamed?
- could be down the other way by keeping border and fixing the jump

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved documentation navigation alignment by removing unnecessary
spacing from sticky sidebars, table of contents, and section headings.
* Updated desktop navigation behavior for more consistent scrolling and
viewport layout.
* Refined the top navigation bar’s border styling for a cleaner
appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-01 22:04:41 +03:00
Miranda Limonczenko
0d465e7b5f chore(ui): Remove 'tip' from Admonition (#48419)
Closes FE-3966

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## Problem

- The admonition uses both 'tip' and 'note', but the visual distinction
has long-ago collapsed.
- 'Note' is used far more frequently than 'tip'
- The two are very similar and it is confusing to know which one to use
when they are visually identical

## Solution

Collapse 'tip' and 'note' into one by removing all places where there is
'tip' and updating all references to 'tip' into 'note'.

**Note:** This PR also resolves new broken links flagged by the E2E docs
checker. It may move to another PR since E2Es keep erroring.

### Specific changes

See below for an AI-generated list of changes:

- **Type system** — removed `'tip'` from `AdmonitionType`, its
`TYPE_TO_VARIANT`/`TYPE_LABEL` entries, and the test case in
[`packages/ui-patterns/src/Admonition/](packages/ui-patterns/src/Admonition/)
- **Remark plugin** —
[remarkAdmonition.ts](apps/docs/lib/mdx/plugins/remarkAdmonition.ts) now
maps mkdocs `tip` → `note`
- **Lint allowlist** — `tip` dropped from `supa-mdx-lint.config.toml`
- **Content migration** — all 109 files with `type="tip"` (across
`apps/docs`, `apps/www`, `apps/studio`) converted to `type="note"`; zero
remaining hits confirmed by repo-wide grep
- **Style guide** — `CONTRIBUTING.md` and `contributing/content.mdx`
updated to describe 4 admonition types instead of 5

### Usage before implementation

See the usage table that points toward 'note' as being dominant across
all apps:

Here's the usage table:

| Location | `note` | `tip` |
|---|---|---|
| apps/docs | ~480 | ~143 |
| apps/studio | 34 | 6 |
| apps/www (blog) | 19 | 3 |
| packages/ui-patterns (tests) | 3 | 1 (parametrized) |
| design-system / ui-library / packages/ui / packages/common | 0–1 (test
fixture only) | 0 |

## Preview links


| App | Page | Search text (Ctrl+F) | Verify |
|---|---|---|---|
| docs |
[/docs/guides/ai-tools/byo-mcp](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/ai-tools/byo-mcp)
| official MCP TypeScript SDK | callout's aria-label="Note" |
| docs |
[/docs/guides/ai-tools/mcp](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/ai-tools/mcp)
| MCP server is available at | callout's aria-label="Note" |
| docs |
[/docs/guides/ai/python-clients](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/ai/python-clients)
| Click Connect at the top of any project page | callout's
aria-label="Note" |
| docs |
[/docs/guides/auth/audit-logs](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/auth/audit-logs)
| Disabling Postgres storage reduces your database storage costs |
callout's aria-label="Note" |
| docs |
[/docs/guides/database/tables](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/database/tables)
| access a custom schema through the Supabase Data API | callout's
aria-label="Note" |
| docs |
[/docs/guides/troubleshooting/edge-function-404-error-response](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/troubleshooting/edge-function-404-error-response)
| Always configure an appropriate time frame | callout's
aria-label="Note" (was single-quoted type='tip') |
| www | [blog:
cli-v2-config-as-code](https://zone-www-dot-com-git-admonition-collapse-note-tip-supabase.vercel.app/blog/cli-v2-config-as-code)
| Detecting config drift | callout's aria-label="Note" |
| www | [blog:
cli-v2-config-as-code](https://zone-www-dot-com-git-admonition-collapse-note-tip-supabase.vercel.app/blog/cli-v2-config-as-code)
| Setting Edge Function secrets | callout's aria-label="Note" |
| www | [blog:
nosql-mongodb-compatibility-with-ferretdb-and-flydotio](https://zone-www-dot-com-git-admonition-collapse-note-tip-supabase.vercel.app/blog/nosql-mongodb-compatibility-with-ferretdb-and-flydotio)
| If your network supports IPv6 connections | callout's
aria-label="Note" |

Note: the `www` rows use the `zone-www-dot-com` preview host, not the
`docs` one you gave — since blog pages are served from the www app, not
docs.


## Manual testing

1. Open preview links for affected pages.
2. Inspect. Open console.
3. Paste the following in and see there is no 'Tip' on the page:
```
document.querySelectorAll('[role="alert"]').forEach(el => console.log(el.getAttribute('aria-label'), el.textContent.slice(0,60)))
```



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Standardized informational callouts across docs and tutorials from
**“Tip”** to **“Note”**, updating multiple examples and guidance blocks.
* Updated a few related doc references/links and conditional “Next
steps” content.
* **UI Updates**
* Switched various in-app banners and notices to the **“Note”** style
variant.
* **Bug Fixes / Improvements**
* Removed support for the retired **“Tip”** callout type and aligned
docs linting, component behavior, and aria labeling to the remaining
admonition types.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-29 09:26:50 -07:00
Jeremias Menichelli
689b6991f0 fix: Remove always-open Accordion behavior (#47638) 2026-07-07 11:51:13 +02:00
Miranda Limonczenko
ea539b4f83 fix(docs) Remove unneeded double border on docs Accordion (#47202)
Closes DOCS-974

<img width="891" height="328" alt="Screenshot 2026-06-22 at 3 11 13 PM"
src="https://github.com/user-attachments/assets/d7b49d56-cf77-4c1d-a933-7cbeab3168c2"
/>


## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## Problem

From Linear:

Accordion usage in the docs is inconsistent and can render with double
lines instead of single lines.

The current docs contribution guidance appears to recommend wrapping
accordions with an extra div, which seems to be the cause of the extra
divider in some pages.

## Solution

This PR:
- Removes all wrapping `divs` to AccordionItems that adds an extra
border
- For a11y, adds a cursor pointer and a slight bg color change on hover
to make the clickable area more obvious
- For a11y, adds reduce-motion option for animation and `aria-hidden` on
the chevron

**Note:** It is good for a11y to have more than one hover-state
indicator. For example, color-change and an underline.

## Tophatting

To review changes on the preview environment:
1. Go to `/docs/guides/platform/backups` and
`/docs/guides/platform/migrating-to-supabase/auth0#frequently-asked-questions-faq`.
2. Expand accordion.
3. See nothing visually odd such as strange spacing or double borders.

**Note:** To be exhaustive in your review, view all affected URLs and
scan the docs for `border-b` to see if there are any stragglers.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Enhanced accordion components with improved hover state styling for
better visual feedback.

* **Refactor**
* Simplified accordion markup across documentation pages for cleaner,
more consistent layout and improved component nesting structure.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-23 17:38:47 +00:00
Chris Chinchilla
ddba257686 docs: Couple of random anon leftovers (#46732)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Documentation

* Updated project variables guidance to include publishable and secret
keys alongside existing options.
* Updated code examples across multiple frameworks to use publishable
keys instead of anon keys.
* Updated tool descriptions to reflect publishable key terminology.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-08 13:55:57 +00:00
Chris Chinchilla
a725766e6a docs: Update key usage in QuickStarts (#44434)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Documentation**
* Updated all quickstart guides and tutorials to reference publishable
keys instead of anon keys for Supabase client initialization.
* Simplified environment variable setup instructions across multiple
framework guides by removing anon key configuration requirements.
* Clarified usage of publishable keys in step-by-step setup
documentation for various frameworks and platforms.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: fadymak <dev@fadymak.com>
2026-04-02 15:53:26 +00:00
Jeremias Menichelli
f6ec43a9ed [DOCS-454] fix(Docs): Fix images from causing CLS on pages (#43026) 2026-02-23 19:02:31 +01:00
Marouane Souda
84126faa0a fix: tailwind xl breakpoint mismatch (#39814)
* fix: tailwind xl breakpoint mismatch

* fix: use lg breakpoint for ContributingToC

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2025-11-04 10:24:45 -07:00
Chris Chinchilla
671c109fa0 docs: update key dropdowns to use new key values (#39428)
* Draft

* Draft

* Draft

* fix: wrong query key

* Final tweaks

* Add to other pages

* Update apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/content/guides/getting-started/quickstarts/vue.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/content/guides/getting-started/quickstarts/refine.mdx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Prettier

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2025-10-16 15:48:57 +02:00
Chris Chinchilla
9795b76431 docs: Add further toggles to content (#38870)
* Implement futher changes for Nimbus

* fixes

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2025-09-19 16:53:20 +00:00
Chris Chinchilla
58100a0121 docs: Change key name for dynamic loading docs (#38011)
Change key name for dynamic loading docs
2025-09-09 09:28:49 +02:00
Charis
ef93da79b0 feat(docs): code samples with ts type stripping (#37695)
* feat(docs): code samples with ts type stripping

Introduce a new option to `$CodeSample`, `convertToJs`, which takes a
code sample written in TypeScript and strips the types to produce a
JavaScript version.

Adds tests for type stripping.

* Clarify instructions

---------

Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>
2025-08-06 10:21:51 -04:00
Francesco Sansalvadore
69ce2d8004 update www content (#36191)
change positioning
2025-06-10 12:40:55 +02:00
Charis
cf3ecc93eb chore(docs): turn on strictNullChecks (#36180)
strictNullChecks was off for docs, which lets errors slip through and
leads to incorrect required/optional typing on Zod-inferred types. This
PR enables strictNullChecks and fixes all the existing violations.
2025-06-04 17:05:37 -04:00
Charis
258bc37919 docs: add type hints (#34678) 2025-04-08 13:25:46 -04:00
Charis
311232b3e1 feat(docs): ts hover annotations on code blocks (#34327) 2025-03-21 15:48:32 -04:00
Charis
2709fa4a3e feat: pre-compile-time partials (#34028)
Partials are currently defined via MDX includes. This PR switches to pre-compile-time partials, which have a new syntax:

```
<$Partial path="path/to/file.mdx" />
```

## Rationale

This produces two improvements:

1. Partial substitution can occur in pipelines that don't use MDX compilation. For example, we can now do partial substitution before building the search index, so partial content will also be indexed.
2. After the App Router migration, the MDXProviders should've been deprecated, but were kept around for the sole reason of making partials work, and leading to us shipping unnecessary client-side code. We get a minor decrease in overall client bundle size (5.74 MB to 5.6 MB) by getting rid of the Providers.

## Breaking changes

Besides the change to partial syntax, the arguments are also less powerful than before because we are doing string substitution and don't have the full power of JS. Defining string variables is still possible (documented in the Contributing guide), and since that's all we actually do in practice, this shouldn't be too cumbersome. There is always the escape hatch of making a custom component for more complex content reuse cases.
2025-03-18 10:37:39 -04:00
Francesco Sansalvadore
64ad37a09b docs contributing layout (#33833)
* contributing layout

* contributing layout mobile

* gap

* Update apps/docs/app/contributing/ContributingToC.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* Update apps/docs/app/contributing/ContributingToC.tsx

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

* add missing menu entry

* remove feedback anchor from toc

* cleanup

* sheet height

* sheet height

* breadcrumb

---------

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>
2025-02-26 14:03:16 +00:00
Francesco Sansalvadore
5f4e5e5626 feat: docs InfoTooltip (#33654)
* docs InfoPopUp

* docs InfoTooltip

* Add mobile sheet for InfoTooltip

* add InfoTooltip to Info Tooltip contributing guide

* keyboard and screen reader behavior

* remove example

* remove hover trigger on mobile

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
2025-02-21 12:12:28 +01:00
Charis
dbbbc20d63 enh(docs): more checks for external CodeSample (#29799)
We allow fetching external data in CodeSamples into a MDX environment, so we have to be careful about preventing code execution.

Current checks:

- External data is inserted as a code block (via the AST, not direct string manipulation), so it is escaped.

Added two new layers of checks:

- Allow-list of organizations, currently set to Supabase-only
- Only allow immutable commit references
2024-11-22 14:17:15 -05:00
Charis
41d924b074 feat: new docs ia (#29364)
New Docs IA, mainly splitting up the miscellaneous bucket that is Platform into multiple sections
2024-10-09 12:38:34 -04:00
Charis
c2fe11850d feat: embed code samples from github (#29519)
Add the ability to embed code samples from GitHub into tutorials, so we can have a single source of truth for the source code.

Introduces the <$CodeSample /> syntax, which is a special syntax and not a real React component (see the directives/README.md for why on earth I did it this way -- in this specific case, CodeHike adjusts the MDX syntax tree before it gets compiled, and we need to adjust it ourselves before CodeHike sees it, so we need to get down to the level of manipulating the AST in order to make this work with CodeHike).

Adjusted one of the example tutorials to use this new feature as a test.
2024-09-26 15:54:57 -04:00
Charis
837e314088 feat(docs): add visual contributing guide (#28214)
Add a contributing guide to docs, which links to resources for contributors
and includes examples of usable components when writing docs content.
2024-07-26 15:54:20 -04:00