Skip to content

Commit 1a64caa

Browse files
Alek99claude
Alek99
and
claude
authored
Refine Getting Started docs: typography, preview styling, content polish (#6340)
* Refine Getting Started docs: typography, preview styling, content polish Port reflex-web PR #1818 plus content polish across all Getting Started pages. Typography & preview styling (docs/app + packages/reflex-ui-shared): - Tighter headings (smaller, semibold) and lighter body weight - Wider content column (42rem→52rem / 56rem→64rem); right sidebar moved from xl: to 2xl: so mid-width screens have more room - Navbar tabs visible from md: (was xl:) so they don't collapse to a burger at medium widths - Pill-style tabs (pill-tab / pill-tab-list); slate-tinted inline rt-Code; hover-reveal copy button with "Copy" label; softer borders - docgen_pipeline: cleaner rx.el.div section/tabs renderers with consistent gap and padding Getting Started content: - Introduction: new tagline, pill tabs, slate highlight (was violet), tightened walkthrough, added "Keep learning" / "Ship faster with AI" CTA cards - Installation: added ~3 min estimate, removed embedded video, rewrote as a single uv-based flow with <your-app> placeholder, promoted Rosetta + bun.exe notes to md alert blocks, added "Next" CTA - Basics: added ~10 min estimate, flattened Prerequisites wrapper, consolidated four single-line setup steps, fixed `rx.app` typo, fixed three broken [`code`](link) markdown links (rx.el / rx.cond / rx.foreach were rendering empty), added two CTA cards - Dashboard tutorial: added ~20 min estimate, trimmed ~180-line finished-app dump at top down to a one-sentence roadmap + link to #full-app, numbered Setup steps, promoted "What are you building?" from H3 to H2, renamed Conclusion → Full app + Recap, dropped Advanced Section stub, unified all 10 preview boxes (slate border, 12px radius, 2em padding, spacing="4", rx.box wrap) Sidebar order: - Getting Started now lists Installation before Introduction Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Restore original Backend tab copy in introduction The tightened version lost nuance; the original phrasing about State being uncompiled server code with no special caveats reads better. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add H1 headings, neutral info alerts, dashboard preview up top - Add H1 headings to introduction and installation pages. - Info alerts now use the neutral --c-slate-* scale to match codeblock styling (border + background) instead of the blue-tinted default. - Promote the Rosetta 2 macOS note from info to warning. - Show the finished dashboard app preview at the top of the tutorial (no code) so readers see the end result before walking through it. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Polish getting-started tutorials - Dashboard tutorial: collapse list-of-lists → dataclass churn, introduce `@dataclass User` up front, reduce from 4 to 2 table previews. - Dashboard tutorial: restyle the hero + full-app previews with a header row (title + subtitle + Add User button), compact table, polished bar chart (rounded bars, clean axes, dashed gridlines, slate-1 frame bg). - Dashboard tutorial: rename "Cleanup" → "Customize", "Full app" → "Full app styled", shorten titles to ≤4 words, fix framing bugs around the graph-empty messaging and "last part" claim. - Chat tutorial: shorten H1 to "AI Chat App", add meta line, add a live hero preview styled like the finished app, drop the hardcoded-API-key section, switch setup to uv-first, convert Note blockquote to alert. - Chat tutorial style: modernize bubbles — 18px rounded with tail corners, slate-3 questions with border, accent-9 answers with white text, drop heavy shadows. - Introduction / Basics: add `as_="h3"` to demo `rx.heading` calls so they don't render as additional `<h1>` on the page. - Code blocks: add expand/collapse toggle on code blocks over 20 lines, using native `<details>` + `has-[details[open]]:` CSS so no Reflex state is needed. - Shiki copy button: halve the animation timings so the copy feedback feels snappier. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add Copy page dropdown button to docpage breadcrumb A segmented button on the right side of the breadcrumb: - Clicking the copy icon fetches the current page's `.md` URL and copies the markdown to the clipboard, with a clipboard-API fallback to `document.execCommand('copy')` for permission-blocked contexts. - Clicking the chevron opens a popover with two items: "Copy page" and a link to "llms-full.txt" for full-site markdown. - Icon pops to a green checkmark for ~1.5s as click feedback. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add GitHub button to the docs navbar Mirrors the marketing site's GitHub button — icon plus star count, linking to the reflex repo. Placed before the search bar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add Open in ChatGPT / Claude items to copy-page dropdown Two new menu items below the existing copy/llms-full options open the page in ChatGPT or Claude with a prefilled prompt referencing the page's `.md` URL: "Read from <url> so I can ask questions about its contents". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add Build this with AI item to copy-page dropdown Highlighted item at the top of the dropdown opens build.reflex.dev with the page's `.md` URL prefilled into the prompt. Visual treatment uses a violet gradient icon tile and gradient hover background to stand out from the other items. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Open Build / ChatGPT / Claude items via anchor tags Switching from `run_script` + `window.open` (which got blocked as a popup since it ran after a server roundtrip) to real `<a target="_blank">` elements. Hrefs are constructed server-side using a hardcoded prod docs origin so the prefilled prompt references a fetchable URL. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Drop as_=h3 from demo headings, fix definition box at the source Revert the as_="h3" additions on demo `rx.heading` calls in basics.md and introduction.md — clutter in example code. The single-H1 guarantee is now enforced at the source: the `md definition` block's title `rx.heading` defaults to `as_="h3"` so directives no longer emit extra `<h1>` elements. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add missing Returns docstring to _plain_code_block Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Guard code_block against Var input during import introspection `add_imports` calls `code_block_markdown(_MOCK_ARG)` to walk the component tree for imports, which passed a `Var[str]` rather than a real string. The expand-threshold check `code.count('\n')` raised `VarAttributeError`. Fall back to the plain block when `code` isn't a real `str`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Sync Full app styled source with rendered preview The python source block in the dashboard tutorial's Full app styled section was the old layout (plain index, basic bar chart). Update it to match the rendered eval block: nested rx.box + rx.vstack with the header row, compact table, and polished bar chart. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 8430f30 commit 1a64caa

16 files changed

Lines changed: 1056 additions & 785 deletions

File tree

‎docs/app/assets/tailwind-theme.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1699,6 +1699,14 @@
16991699
/* padding: 0rem 0.125rem 0rem 0.125rem; */
17001700
}
17011701

1702+
/* Override Radix Code (rt-Code) accent coloring so inline code matches slate theme */
1703+
code.rt-Code,
1704+
code.rt-Code.rt-variant-soft,
1705+
.rt-Code.rt-variant-soft {
1706+
color: var(--c-slate-11) !important;
1707+
background-color: var(--c-slate-3) !important;
1708+
}
1709+
17021710
.code-error-style {
17031711
font-family: var(--font-jetbrains);
17041712
font-size: 0.835rem;
@@ -1803,6 +1811,44 @@
18031811
}
18041812
}
18051813

1814+
.code-block button,
1815+
.code-block > button {
1816+
border: none !important;
1817+
border-width: 0 !important;
1818+
background: transparent !important;
1819+
background-color: transparent !important;
1820+
opacity: 0 !important;
1821+
transition: opacity 0.15s ease-out !important;
1822+
pointer-events: none;
1823+
display: inline-flex !important;
1824+
align-items: center !important;
1825+
gap: 0.375rem !important;
1826+
font-size: 0.8125rem !important;
1827+
font-weight: 500 !important;
1828+
color: var(--c-slate-11) !important;
1829+
top: 8px !important;
1830+
right: 12px !important;
1831+
padding: 6px 8px !important;
1832+
}
1833+
1834+
.code-block button::after,
1835+
.code-block > button::after {
1836+
content: "Copy";
1837+
}
1838+
1839+
.code-block:hover button,
1840+
.code-block:hover > button,
1841+
.code-block button:focus-visible {
1842+
opacity: 1 !important;
1843+
pointer-events: auto;
1844+
}
1845+
1846+
.code-block button:hover,
1847+
.code-block > button:hover {
1848+
background: var(--c-slate-3) !important;
1849+
background-color: var(--c-slate-3) !important;
1850+
}
1851+
18061852

18071853
.tab-style {
18081854
color: var(--c-slate-9);
@@ -1814,6 +1860,89 @@
18141860
letter-spacing: -0.01094rem;
18151861
}
18161862

1863+
.pill-tab-list {
1864+
display: inline-flex !important;
1865+
gap: 2px !important;
1866+
padding: 4px !important;
1867+
background: var(--c-slate-3) !important;
1868+
border-radius: 10px !important;
1869+
border-bottom: none !important;
1870+
box-shadow: none !important;
1871+
width: fit-content !important;
1872+
max-width: 100%;
1873+
overflow-x: auto;
1874+
}
1875+
1876+
.pill-tab-list::before,
1877+
.pill-tab-list::after {
1878+
display: none !important;
1879+
content: none !important;
1880+
}
1881+
1882+
.pill-tab {
1883+
appearance: none !important;
1884+
background: transparent !important;
1885+
background-color: transparent !important;
1886+
border: none !important;
1887+
padding: 8px 16px !important;
1888+
font-size: 0.9375rem !important;
1889+
font-weight: 450 !important;
1890+
color: var(--c-slate-11) !important;
1891+
border-radius: 7px !important;
1892+
cursor: pointer;
1893+
white-space: nowrap;
1894+
transition: color 0.12s, background-color 0.12s, box-shadow 0.12s;
1895+
letter-spacing: 0 !important;
1896+
line-height: 1.25rem !important;
1897+
box-shadow: none !important;
1898+
}
1899+
1900+
.pill-tab::before,
1901+
.pill-tab::after,
1902+
.pill-tab:hover::before,
1903+
.pill-tab:hover::after,
1904+
.pill-tab[data-state='active']::before,
1905+
.pill-tab[data-state='active']::after,
1906+
.pill-tab[data-state='active']:hover::before,
1907+
.pill-tab[data-state='active']:hover::after {
1908+
background: transparent !important;
1909+
background-color: transparent !important;
1910+
box-shadow: none !important;
1911+
content: none !important;
1912+
display: none !important;
1913+
}
1914+
1915+
.pill-tab:hover {
1916+
color: var(--c-slate-11) !important;
1917+
background: transparent !important;
1918+
}
1919+
1920+
.pill-tab .rt-BaseTabListTriggerInner,
1921+
.pill-tab:hover .rt-BaseTabListTriggerInner,
1922+
.pill-tab:focus-visible .rt-BaseTabListTriggerInner,
1923+
.pill-tab:focus-visible:hover .rt-BaseTabListTriggerInner {
1924+
background-color: transparent !important;
1925+
background: transparent !important;
1926+
}
1927+
1928+
.pill-tab[data-state='active'],
1929+
.pill-tab[data-state='active']:hover {
1930+
color: var(--c-slate-12) !important;
1931+
font-weight: 500 !important;
1932+
background: var(--c-slate-1) !important;
1933+
background-color: var(--c-slate-1) !important;
1934+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
1935+
}
1936+
1937+
:where(.dark, .dark *) .pill-tab[data-state='active'] {
1938+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
1939+
}
1940+
1941+
.tab-style:hover:not([data-state='active'])::before {
1942+
background: transparent !important;
1943+
background-color: transparent !important;
1944+
}
1945+
18171946
.tab-style:hover {
18181947
color: var(--c-slate-11);
18191948
}

‎docs/app/reflex_docs/docgen_pipeline.py‎

Lines changed: 55 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -516,12 +516,18 @@ def _render_alert(self, block: DirectiveBlock) -> rx.Component:
516516
"""Render a ``md alert`` directive."""
517517
status = block.args[0] if block.args else "info"
518518
colors: dict[str, ColorType] = {
519-
"info": "accent",
519+
"info": "slate",
520520
"success": "grass",
521521
"warning": "amber",
522522
"error": "red",
523523
}
524-
color: ColorType = colors.get(status, "blue")
524+
color: ColorType = colors.get(status, "slate")
525+
background_shade = 2 if status == "info" else 3
526+
# For "info" alerts, use the neutral custom slate scale (--c-slate-*)
527+
# so the card matches the codeblock styling instead of the blue-tinted
528+
# default --slate-* scale that rx.color() produces.
529+
bg_override = "var(--c-slate-2)" if status == "info" else None
530+
border_override = "var(--c-slate-4)" if status == "info" else None
525531

526532
# First child may be a heading used as the alert title.
527533
children = block.children
@@ -560,7 +566,14 @@ def title_comp() -> rx.Component:
560566
padding="0px",
561567
margin_top="16px",
562568
)
563-
return collapsible_box(trigger, body, color)
569+
return collapsible_box(
570+
trigger,
571+
body,
572+
color,
573+
background_shade=background_shade,
574+
background_override=bg_override,
575+
border_override=border_override,
576+
)
564577

565578
# Title only, or text-only (no heading) — simple non-collapsible box.
566579
if title_spans:
@@ -588,8 +601,8 @@ def title_comp() -> rx.Component:
588601
spacing="1",
589602
padding=["16px", "24px"],
590603
),
591-
border=f"1px solid {rx.color(color, 4)}",
592-
background_color=f"{rx.color(color, 3)}",
604+
border=f"1px solid {border_override or rx.color(color, 4)}",
605+
background_color=f"{bg_override or rx.color(color, background_shade)}",
593606
border_radius="12px",
594607
margin_bottom="16px",
595608
margin_top="16px",
@@ -666,15 +679,19 @@ def _render_tabs(self, block: DirectiveBlock) -> rx.Component:
666679
rx.tabs.trigger(
667680
title,
668681
value=value,
669-
class_name="tab-style font-base font-semibold text-[1.25rem]",
682+
class_name="pill-tab",
670683
)
671684
)
672685
contents.append(
673-
rx.tabs.content(self._render_children(body_blocks), value=value),
686+
rx.tabs.content(
687+
self._render_children(body_blocks),
688+
value=value,
689+
class_name="pt-6",
690+
),
674691
)
675692

676693
return rx.tabs.root(
677-
rx.tabs.list(*triggers, class_name="mt-4"),
694+
rx.tabs.list(*triggers, class_name="pill-tab-list mt-2"),
678695
*contents,
679696
default_value="tab1",
680697
)
@@ -702,29 +719,43 @@ def _render_definition(self, block: DirectiveBlock) -> rx.Component:
702719

703720
def _render_section(self, block: DirectiveBlock) -> rx.Component:
704721
"""Render a ``md section`` directive."""
705-
from reflex_site_shared.styles.colors import c_color
706-
707722
sections = self._split_children_by_heading(block.children)
708-
return rx.box(
709-
rx.vstack(
723+
return rx.el.div(
724+
rx.el.div(
710725
*[
711-
rx.fragment(
712-
rx.text(
713-
rx.text.span(header, font_weight="bold"),
714-
width="100%",
726+
rx.el.div(
727+
rx.el.div(
728+
header,
729+
style={
730+
"fontWeight": "600",
731+
"color": "var(--c-slate-12)",
732+
"fontSize": "1rem",
733+
"lineHeight": "1.5",
734+
},
735+
),
736+
rx.el.div(
737+
self._render_children(body),
738+
style={"width": "100%"},
715739
),
716-
rx.box(self._render_children(body), width="100%"),
740+
style={
741+
"display": "flex",
742+
"flexDirection": "column",
743+
"gap": "0.25rem",
744+
"width": "100%",
745+
},
717746
)
718747
for header, body in sections
719748
],
720-
text_align="left",
721-
margin_y="1em",
722-
width="100%",
749+
style={
750+
"display": "flex",
751+
"flexDirection": "column",
752+
"gap": "1.25rem",
753+
"width": "100%",
754+
"paddingLeft": "1.5rem",
755+
"borderLeft": "1.5px solid var(--c-slate-4)",
756+
},
723757
),
724-
border_left=f"1.5px {c_color('slate', 4)} solid",
725-
padding_left="1em",
726-
width="100%",
727-
align_items="center",
758+
style={"width": "100%", "margin": "1.5rem 0"},
728759
)
729760

730761

0 commit comments

Comments
 (0)