docs: kaizen fixes to QuickStarts - #47481
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
github-actions
Bot
added
the
documentation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR updates docs component spacing, guide layout spacing, and quickstart onboarding content across multiple framework guides. ChangesDocs component spacing
Quickstart guide content updates
Guide layout and header spacing
Estimated code review effort: 3 (Moderate) | ~25 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (4)
apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx (1)
158-163: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueRemoved error handling from
getInstruments.The query no longer destructures/checks
error, silently falling back to[]on failure. Acceptable simplification for a quickstart, but worth confirming this doesn't hide errors users would want to know about while getting started.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx` around lines 158 - 163, The getInstruments fetch in reactjs.mdx no longer checks the Supabase query error and now silently falls back to an empty list. Update the getInstruments logic to either destructure and handle error from supabase.from("instruments").select() or explicitly surface/log failures instead of only using data ?? [] so users can tell when the query fails.apps/docs/features/docs/GuidesMdx.template.tsx (2)
94-109: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftHeader/article markup duplicates
GuideHeader/GuideArticlecomponents.This inline breadcrumbs/header/article structure (mb-6 breadcrumb spacing, header wrapper, h1/h2 classes) closely mirrors the newly updated
GuideHeader.tsxandGuideArticle.tsxcomponents in the same cohort. Since this template appears to be an alternate rendering path, duplicating the markup means future spacing/style tweaks (like this PR's) need to be applied in two places.Consider reusing
GuideHeader/GuideArticle/Guidehere if their APIs (e.g.,meta,editLink,children) can accommodate this template's needs, to avoid the two implementations diverging over time.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/features/docs/GuidesMdx.template.tsx` around lines 94 - 109, The docs template is duplicating the header/article layout already handled by GuideHeader and GuideArticle, which will cause the two implementations to drift. Update GuidesMdx.template.tsx to compose the existing Guide, GuideHeader, and GuideArticle components instead of inlining the breadcrumbs/header/article markup, and pass through the needed meta, editLink, and children props so this rendering path stays aligned with the shared styling and spacing behavior.
85-86: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winSticky TOC offset/duplication with
Guide.tsx.The sticky offset math (
top-[calc(var(--header-height)+1px+3rem)],max-h-[calc(100vh-var(--header-height)-4rem)]) and its accompanying comments are duplicated verbatim inapps/docs/features/ui/guide/Guide.tsx(lines 54-61). If the header height or padding assumptions change, both copies must be updated in lockstep or they'll silently drift.Consider extracting these into a shared constant/utility (e.g. a
TOC_STICKY_CLASSNAMEstring or small helper) used by bothGuidesMdx.template.tsxandGuide.tsx.Also applies to: 135-152
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/features/docs/GuidesMdx.template.tsx` around lines 85 - 86, The sticky TOC offset/class logic is duplicated between GuidesMdx.template.tsx and Guide.tsx, so update the shared TOC styling by extracting the repeated sticky offset/max-height classes and comments into a common constant or helper (for example a TOC_STICKY_CLASSNAME), then have both templates reference it instead of maintaining separate copies. Use the existing TOC/sidebar rendering in GuidesMdx.template.tsx and Guide.tsx as the integration points so the offset math stays in sync.apps/docs/features/ui/guide/Guide.tsx (1)
51-62: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueGrid math checks out.
col-span-8(cols 1-8) +col-start-10 col-span-3(cols 10-12) leaves column 9 as a gap, which combined withgap-4gives the extra breathing room implied by the PR objective. The updatedtop/max-hcalc comments correctly reflect the new 3rem padding introduced inDefaultLayout.tsx'spt-12.One minor nit: the
3remvalue is now duplicated as a magic number across this file andDefaultLayout.tsx. Not urgent, but a shared CSS custom property (e.g.--content-padding-top) would prevent future drift if either value changes independently.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/features/ui/guide/Guide.tsx` around lines 51 - 62, The guide layout uses the same 3rem top padding value in multiple places, so the padding can drift between this component and DefaultLayout. Update Guide and the related layout styling to read that spacing from a shared CSS custom property instead of hardcoding 3rem, and keep the sticky top/max-height calc comments aligned with the shared value.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx`:
- Around line 158-163: The getInstruments fetch in reactjs.mdx no longer checks
the Supabase query error and now silently falls back to an empty list. Update
the getInstruments logic to either destructure and handle error from
supabase.from("instruments").select() or explicitly surface/log failures instead
of only using data ?? [] so users can tell when the query fails.
In `@apps/docs/features/docs/GuidesMdx.template.tsx`:
- Around line 94-109: The docs template is duplicating the header/article layout
already handled by GuideHeader and GuideArticle, which will cause the two
implementations to drift. Update GuidesMdx.template.tsx to compose the existing
Guide, GuideHeader, and GuideArticle components instead of inlining the
breadcrumbs/header/article markup, and pass through the needed meta, editLink,
and children props so this rendering path stays aligned with the shared styling
and spacing behavior.
- Around line 85-86: The sticky TOC offset/class logic is duplicated between
GuidesMdx.template.tsx and Guide.tsx, so update the shared TOC styling by
extracting the repeated sticky offset/max-height classes and comments into a
common constant or helper (for example a TOC_STICKY_CLASSNAME), then have both
templates reference it instead of maintaining separate copies. Use the existing
TOC/sidebar rendering in GuidesMdx.template.tsx and Guide.tsx as the integration
points so the offset math stays in sync.
In `@apps/docs/features/ui/guide/Guide.tsx`:
- Around line 51-62: The guide layout uses the same 3rem top padding value in
multiple places, so the padding can drift between this component and
DefaultLayout. Update Guide and the related layout styling to read that spacing
from a shared CSS custom property instead of hardcoding 3rem, and keep the
sticky top/max-height calc comments aligned with the shared value.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 922ee465-008a-4763-bc31-330ed897efd0
📒 Files selected for processing (8)
apps/docs/components/StepHikeCompact/index.tsxapps/docs/content/guides/getting-started/quickstarts/nextjs.mdxapps/docs/content/guides/getting-started/quickstarts/reactjs.mdxapps/docs/features/docs/GuidesMdx.template.tsxapps/docs/features/ui/guide/Guide.tsxapps/docs/features/ui/guide/GuideArticle.tsxapps/docs/features/ui/guide/GuideHeader.tsxapps/docs/layouts/DefaultLayout.tsx
|
Handle after #47398 |
# Conflicts: # apps/docs/components/StepHikeCompact/index.tsx # apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx # apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx # apps/docs/features/docs/GuidesMdx.template.tsx # apps/docs/features/ui/guide/GuideHeader.tsx
|
@SaxonF Some nice stuff here! Took your changes, my changes, and some other design changes recently with fonts, etc., and I think I manually solved all the merge issues, but worth taking a look in case I did some things wrong. I also think that some of the recent font changes may clash with some of the changes here. A few things have become a little more squashed. Are you able to take a quick look and let me know what you think? For example, some of the other "overview pages" may have been affected by broader changes in this PR: https://docs-git-chore-quickstart-kaizen-supabase.vercel.app/docs/guides/getting-started I also applied the suggestions to the project creation partial and the rest of the quickstarts |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx (1)
44-53: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winUse
connectTab=frameworkshere, or remove the duplicate link.This inline URL still uses
tab=frameworks; the Connect sheet readsconnectTab, so it won’t open the frameworks tab. The new button already covers the same action.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx` around lines 44 - 53, The Astro quickstart’s Connect panel link is using the wrong query parameter, so update the inline project link in the guide to use connectTab=frameworks instead of tab=frameworks, or remove that duplicated link since the Open Connect panel button already points to the correct frameworks tab. Use the existing markdown link and Button anchor in the Astro quickstart content to locate and fix the outdated URL.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx`:
- Around line 44-53: The Astro quickstart’s Connect panel link is using the
wrong query parameter, so update the inline project link in the guide to use
connectTab=frameworks instead of tab=frameworks, or remove that duplicated link
since the Open Connect panel button already points to the correct frameworks
tab. Use the existing markdown link and Button anchor in the Astro quickstart
content to locate and fix the outdated URL.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 02c300e9-6b13-4cd9-9aa6-4f3560aae2a4
📒 Files selected for processing (12)
apps/docs/content/guides/getting-started/quickstarts/astrojs.mdxapps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdxapps/docs/content/guides/getting-started/quickstarts/flask.mdxapps/docs/content/guides/getting-started/quickstarts/flutter.mdxapps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdxapps/docs/content/guides/getting-started/quickstarts/kotlin.mdxapps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdxapps/docs/content/guides/getting-started/quickstarts/refine.mdxapps/docs/content/guides/getting-started/quickstarts/solidjs.mdxapps/docs/content/guides/getting-started/quickstarts/sveltekit.mdxapps/docs/content/guides/getting-started/quickstarts/tanstack.mdxapps/docs/content/guides/getting-started/quickstarts/vue.mdx
✅ Files skipped from review due to trivial changes (11)
- apps/docs/content/guides/getting-started/quickstarts/flutter.mdx
- apps/docs/content/guides/getting-started/quickstarts/flask.mdx
- apps/docs/content/guides/getting-started/quickstarts/refine.mdx
- apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx
- apps/docs/content/guides/getting-started/quickstarts/vue.mdx
- apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx
- apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
- apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx
- apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx
- apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx
- apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx
|
I seem to have replied to the Linear agent instead 😄 |
|
@SaxonF I am working on ideas for the project, etc., steps ideas right now but were still in this PR. My comments were mostly around that the fonts and layout changes from different sources over the past few days have clashed somewhat. See: https://docs-git-chore-quickstart-kaizen-supabase.vercel.app/docs/guides/getting-started compared to https://supabase.com/docs/guides/getting-started We can take over fixing that up if you want, but I wondered if you might have some thoughts or opinions. And will fix the duplicate point 3s, there were a lot of merge issues to resolve. 😅 |
|
@SaxonF Another thought, when I overhauled them, I stripped out all the stephike components completely for simplicity, but it does look a little nicer with them in and just removing the dual panel. Could restore that? What do you think? |
|
ah gotcha, from a layout perspective I reduced the main content width with more spacing . In some index like pages it may look a little off . In that particular one I think we can reduce padding on those boxes to p-6 instead of p-8 . That particular page could probably also use a refresh to act more like a summary / one click setup for agent skills etc. |
Fortunately, we currently have an overhaul of the overview pages in progress :) |
|
@SaxonF OK, fixed up and did some other small tweaks. There's a padding issue between the connect panel button and the codetabs component, but that's only in one guide, so let's fix it later. And if you feel we should bring back stephikes, let's do that |
d2f2b82 to
7804810
Compare
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx (1)
29-44: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winInline link should use
connectTab=frameworks.The prose link uses
tab=frameworks, but the Connect sheet only readsconnectTab, so that link won’t open the frameworks tab like the adjacent button does.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx` around lines 29 - 44, The prose link in the SvelteKit quickstart is using the wrong query parameter for the Connect panel, so it won’t open the frameworks tab. Update the inline link in the getting-started guide to use the same Connect URL shape as the adjacent button, keeping the `connectTab=frameworks` parameter consistent with the existing `Open Connect panel` anchor and the surrounding `Connect panel` reference.apps/docs/content/guides/getting-started/quickstarts/vue.mdx (1)
29-44: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winFix the Connect link query param
apps/docs/content/guides/getting-started/quickstarts/vue.mdx:8still usestab=frameworks; the Connect sheet readsconnectTab, so this text link won’t preselect the frameworks tab. The Button below already uses the right param.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/docs/content/guides/getting-started/quickstarts/vue.mdx` around lines 29 - 44, The Connect panel link in the Vue quickstart still uses the wrong query parameter, so it won’t preselect the frameworks tab. Update the markdown link in the “Declare Supabase environment variables” section to match the Button’s URL by using connectTab instead of tab, keeping the rest of the href unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx`:
- Around line 29-44: The prose link in the SvelteKit quickstart is using the
wrong query parameter for the Connect panel, so it won’t open the frameworks
tab. Update the inline link in the getting-started guide to use the same Connect
URL shape as the adjacent button, keeping the `connectTab=frameworks` parameter
consistent with the existing `Open Connect panel` anchor and the surrounding
`Connect panel` reference.
In `@apps/docs/content/guides/getting-started/quickstarts/vue.mdx`:
- Around line 29-44: The Connect panel link in the Vue quickstart still uses the
wrong query parameter, so it won’t preselect the frameworks tab. Update the
markdown link in the “Declare Supabase environment variables” section to match
the Button’s URL by using connectTab instead of tab, keeping the rest of the
href unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 7a48a237-c9de-44e0-a201-aa966c2beb2c
📒 Files selected for processing (17)
apps/docs/content/guides/getting-started/quickstarts/astrojs.mdxapps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdxapps/docs/content/guides/getting-started/quickstarts/flask.mdxapps/docs/content/guides/getting-started/quickstarts/flutter.mdxapps/docs/content/guides/getting-started/quickstarts/hono.mdxapps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdxapps/docs/content/guides/getting-started/quickstarts/kotlin.mdxapps/docs/content/guides/getting-started/quickstarts/laravel.mdxapps/docs/content/guides/getting-started/quickstarts/nextjs.mdxapps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdxapps/docs/content/guides/getting-started/quickstarts/reactjs.mdxapps/docs/content/guides/getting-started/quickstarts/refine.mdxapps/docs/content/guides/getting-started/quickstarts/solidjs.mdxapps/docs/content/guides/getting-started/quickstarts/sveltekit.mdxapps/docs/content/guides/getting-started/quickstarts/tanstack.mdxapps/docs/content/guides/getting-started/quickstarts/vue.mdxapps/docs/layouts/DefaultLayout.tsx
✅ Files skipped from review due to trivial changes (8)
- apps/docs/layouts/DefaultLayout.tsx
- apps/docs/content/guides/getting-started/quickstarts/refine.mdx
- apps/docs/content/guides/getting-started/quickstarts/laravel.mdx
- apps/docs/content/guides/getting-started/quickstarts/hono.mdx
- apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
- apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
- apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx
- apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx
🚧 Files skipped from review as they are similar to previous changes (6)
- apps/docs/content/guides/getting-started/quickstarts/flutter.mdx
- apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx
- apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx
- apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx
- apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx
- apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
Merging this, and building on it in https://github.com/supabase/supabase/tree/chrischinchilla/rework-quickstarts-project-creation |
Braintrust eval report
|
2 participants
kaizen.mp4
Makes a few style and content changes focused on our quickstarts, starting with
Changes
Summary by CodeRabbit
Documentation
UI / Guide Layout