diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c2f4a1079..ff669c625 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -96,6 +96,15 @@ pre-commit install That's it you can now submit your PR. Thanks for contributing to Reflex! +## Editing Templates + +To edit the templates in Reflex you can do so in two way. + +Change to the basic `blank` template can be done in the `reflex/.templates/apps/blank` directory. + +Others templates can be edited in their own repository. For example the `sidebar` template can be found in the [`reflex-sidebar`](https://github.com/reflex-dev/sidebar-template) repository. + + ## Other Notes For some pull requests when adding new components you will have to generate a pyi file for the new component. This is done by running the following command in the `reflex` directory. diff --git a/pyproject.toml b/pyproject.toml index 0b75903cc..3fce10c01 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -106,3 +106,4 @@ lint.ignore = ["B008", "D203", "D205", "D213", "D401", "D406", "D407", "E501", " "tests/*.py" = ["D100", "D103", "D104", "B018"] "reflex/.templates/*.py" = ["D100", "D103", "D104"] "*.pyi" = ["ALL"] +"*/blank.py" = ["I001"] diff --git a/reflex/.templates/apps/blank/code/blank.py b/reflex/.templates/apps/blank/code/blank.py index 3ab5aca8d..c0de6e44f 100644 --- a/reflex/.templates/apps/blank/code/blank.py +++ b/reflex/.templates/apps/blank/code/blank.py @@ -1,34 +1,37 @@ """Welcome to Reflex! This file outlines the steps to create a basic app.""" -from rxconfig import config - import reflex as rx -docs_url = "https://reflex.dev/docs/getting-started/introduction/" -filename = f"{config.app_name}/{config.app_name}.py" +from rxconfig import config class State(rx.State): """The app state.""" + ... + def index() -> rx.Component: - return rx.center( - rx.theme_panel(), + # Welcome Page (Index) + return rx.container( + rx.color_mode.button(position="top-right"), rx.vstack( rx.heading("Welcome to Reflex!", size="9"), - rx.text("Get started by editing ", rx.code(filename)), - rx.button( - "Check out our docs!", - on_click=lambda: rx.redirect(docs_url), - size="4", + rx.text( + "Get started by editing ", + rx.code(f"{config.app_name}/{config.app_name}.py"), + size="5", ), - rx.logo(), - align="center", - spacing="7", - font_size="2em", + rx.link( + rx.button("Check out our docs!"), + href="https://reflex.dev/docs/getting-started/introduction/", + is_external=True, + ), + spacing="5", + justify="center", + min_height="85vh", ), - height="100vh", + rx.logo(), )