diff --git a/docs/app/reflex_docs/pages/docs/__init__.py b/docs/app/reflex_docs/pages/docs/__init__.py index d02729d78d3..37b124e0308 100644 --- a/docs/app/reflex_docs/pages/docs/__init__.py +++ b/docs/app/reflex_docs/pages/docs/__init__.py @@ -357,14 +357,33 @@ def handle_library_doc( graphing_components[resolved.category].append(clist) else: component_list[resolved.category].append(clist) + # Library docs render via multi_docs (not make_docpage), so without this + # they'd inherit the generic site-wide meta description. Derive a + # page-specific meta description from the doc's frontmatter/body prose, and + # prefer an explicit frontmatter `title:` for the page title. + try: + source: str | None = Path(actual_path).read_text(encoding="utf-8") + document = parse_document(source) + except Exception: + source, document = None, None + frontmatter = document.frontmatter if document is not None else None + metadata = dict(frontmatter.metadata) if frontmatter is not None else None + description = extract_doc_description(source, metadata) if source else None + display_title = ( + frontmatter.title + if frontmatter is not None and frontmatter.title + else resolved.display_title + ) return multi_docs( path=resolved.route, virtual_path=doc, actual_path=actual_path, previews=previews, component_list=clist, - title=resolved.display_title, + title=display_title, ll_component_list=ll_clist, + description=description, + source=source, ) diff --git a/docs/app/reflex_docs/pages/docs/component.py b/docs/app/reflex_docs/pages/docs/component.py index 59d1b46459a..229b7d0536c 100644 --- a/docs/app/reflex_docs/pages/docs/component.py +++ b/docs/app/reflex_docs/pages/docs/component.py @@ -930,6 +930,8 @@ def multi_docs( component_list: list, title: str, ll_component_list: list | None = None, + description: str | None = None, + source: str | None = None, ): components = [ component_docs(component_tuple, previews) @@ -990,10 +992,15 @@ def links(current_page, ll_doc_exists, path): ) return rx.fragment() - @docpage(set_path=path, t=title) + @docpage(set_path=path, t=title, description=description) def out(): toc = get_docgen_toc(actual_path) - doc_content = Path(actual_path).read_text(encoding="utf-8") + # Reuse the source already read by the caller to avoid a second read. + doc_content = ( + source + if source is not None + else Path(actual_path).read_text(encoding="utf-8") + ) # Append API Reference headings for the component list if components: toc.append((1, "API Reference")) @@ -1018,7 +1025,13 @@ def out(): class_name="flex flex-col w-full", ) - @docpage(set_path=path + "low", t=title + " (Low Level)") + # Differentiate the low-level page's meta description so search engines + # don't see it as a duplicate of the high-level page's description. + ll_description = f"{description} (low-level API reference)" if description else None + + @docpage( + set_path=path + "low", t=title + " (Low Level)", description=ll_description + ) def ll(): ll_virtual = virtual_path.replace(".md", "-ll.md") toc = get_docgen_toc(ll_actual_path) diff --git a/docs/app/reflex_docs/pages/library_previews.py b/docs/app/reflex_docs/pages/library_previews.py index 773d7a87f31..c577c879074 100644 --- a/docs/app/reflex_docs/pages/library_previews.py +++ b/docs/app/reflex_docs/pages/library_previews.py @@ -103,7 +103,8 @@ def create_previews( @docpage( right_sidebar=False, set_path=f"/library{prefix.rstrip('/')}/" + path.strip("/") + "/", - page_title=component_category + " Component Library · Reflex Docs", + page_title=f"{get_display_name(component_category)} Component Library · Reflex Docs", + description=description, ) def page() -> rx.Component: from reflex_docs.templates.docpage.sidebar.sidebar_items import ( @@ -195,7 +196,7 @@ def page() -> rx.Component: }, "tables_and_data_grids": { "path": "tables-and-data-grids", - "description": "Powerful table components for organizing and displaying data efficiently. Includes versatile options like standard tables, interactive datatables, and editable data grids. Perfect for creating responsive, user-friendly interfaces that present information clearly and allow for easy data manipulation.", + "description": "Build tables and data grids in Python with Reflex. Includes a composable table, a searchable and sortable data table for pandas DataFrames, and an editable data grid — perfect for dashboards and data apps, all in pure Python.", "component_category": "Tables-And-Data-Grids", }, "typography": { diff --git a/docs/library/tables-and-data-grids/data_editor.md b/docs/library/tables-and-data-grids/data_editor.md index a8258a0537a..b589d0bd6ff 100644 --- a/docs/library/tables-and-data-grids/data_editor.md +++ b/docs/library/tables-and-data-grids/data_editor.md @@ -1,11 +1,12 @@ --- components: - rx.data_editor +meta_description: "Build an editable data grid in Python with Reflex. The rx.data_editor component is a fast, spreadsheet-like data grid based on Glide Data Grid for editing tabular data — all in pure Python." --- # Data Editor -A datagrid editor based on [Glide Data Grid](https://grid.glideapps.com/) +The Reflex data editor (`rx.data_editor`) is a fast, editable data grid based on [Glide Data Grid](https://grid.glideapps.com/). Use it for spreadsheet-like editing of tabular data in pure Python — add, edit, and format cells across many rows and columns. ```python exec import reflex as rx @@ -453,3 +454,11 @@ rx.data_editor( height="30vh", ) ``` + +## Related + +Explore the other ways to work with tabular data in Reflex, all in pure Python: + +- [Data Table](/docs/library/tables-and-data-grids/data-table) +- [Table](/docs/library/tables-and-data-grids/table) +- [Tables and Data Grids](/docs/library/tables-and-data-grids/) diff --git a/docs/library/tables-and-data-grids/data_table.md b/docs/library/tables-and-data-grids/data_table.md index 95fa4b94d3d..96c23bf0b58 100644 --- a/docs/library/tables-and-data-grids/data_table.md +++ b/docs/library/tables-and-data-grids/data_table.md @@ -1,6 +1,7 @@ --- components: - rx.data_table +meta_description: "Display data in an interactive table in Python with Reflex. The rx.data_table component turns a pandas DataFrame into a searchable, sortable, paginated data table — all in pure Python." --- ```python exec @@ -9,8 +10,8 @@ import reflex as rx # Data Table -The data table component is a great way to display static data in a table format. -You can pass in a pandas dataframe to the data prop to create the table. +Reflex's data table component (`rx.data_table`) is a great way to display static data — such as a pandas DataFrame — as an interactive table in pure Python. +You can pass a pandas dataframe to the data prop to create the table, with built-in search, sorting, and pagination. In this example we will read data from a csv file, convert it to a pandas dataframe and display it in a data_table. @@ -68,3 +69,11 @@ def index(): columns=State.columns, ) ``` + +## Related + +Explore the other ways to work with tabular data in Reflex, all in pure Python: + +- [Table](/docs/library/tables-and-data-grids/table) +- [Data Editor](/docs/library/tables-and-data-grids/data-editor) +- [Tables and Data Grids](/docs/library/tables-and-data-grids/) diff --git a/docs/library/tables-and-data-grids/table.md b/docs/library/tables-and-data-grids/table.md index 5e43294f733..45d3a40dd7b 100644 --- a/docs/library/tables-and-data-grids/table.md +++ b/docs/library/tables-and-data-grids/table.md @@ -1,4 +1,5 @@ --- +meta_description: "Build tables in Python with Reflex. The rx.table component is a semantic, composable React table for presenting tabular data with headers, rows, and cells — all in pure Python, no JavaScript." components: - rx.table.root - rx.table.header @@ -149,7 +150,7 @@ class Customer(rx.Model, table=True): # Table -A semantic table for presenting tabular data. +The Reflex table component (`rx.table`) is a semantic, composable table for presenting tabular data in pure Python. It renders a standard React/HTML table with headers, rows, and cells that you compose yourself. If you just want to [represent static data](/docs/library/tables-and-data-grids/data-table) then the [`rx.data_table`](/docs/library/tables-and-data-grids/data-table) might be a better fit for your use case as it comes with in-built pagination, search and sorting. @@ -1303,3 +1304,11 @@ rx.flex( spacing="2", ) ``` + +## Related + +Explore the other ways to work with tabular data in Reflex, all in pure Python: + +- [Data Table](/docs/library/tables-and-data-grids/data-table) +- [Data Editor](/docs/library/tables-and-data-grids/data-editor) +- [Tables and Data Grids](/docs/library/tables-and-data-grids/) diff --git a/packages/reflex-docgen/news/6704.bugfix.md b/packages/reflex-docgen/news/6704.bugfix.md new file mode 100644 index 00000000000..d458c6caa7b --- /dev/null +++ b/packages/reflex-docgen/news/6704.bugfix.md @@ -0,0 +1 @@ +Fixed `meta_description` and `description` frontmatter keys being misinterpreted as component preview lambdas. diff --git a/packages/reflex-docgen/src/reflex_docgen/markdown/_parser.py b/packages/reflex-docgen/src/reflex_docgen/markdown/_parser.py index 0cfc6a836e7..66e87bf9c53 100644 --- a/packages/reflex-docgen/src/reflex_docgen/markdown/_parser.py +++ b/packages/reflex-docgen/src/reflex_docgen/markdown/_parser.py @@ -40,7 +40,13 @@ #: Known frontmatter keys that are not component preview lambdas. -_KNOWN_KEYS = frozenset({"components", "only_low_level", "title"}) +_KNOWN_KEYS = frozenset({ + "components", + "only_low_level", + "title", + "meta_description", + "description", +}) def _extract_frontmatter(source: str) -> tuple[FrontMatter | None, str]: