update blank template (#3219)

* update blank template

* update CONTRIBUTING.md

* adjust min_height of main stack

* simplify stuff

* fix import order for blank template and tell ruff to ignore it

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.

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"]

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(),
     )