Assets section

Author: picklelo

docs/assets/referencing_assets.md docs/assets/overview.mddocs/assets/referencing_assets.md renamed to docs/assets/overview.md

@@ -4,7 +4,7 @@ import reflex as rx
 
 # Assets
 
-Static files such as images and stylesheets can be placed in `"assets/"` folder of the project. These files can be referenced within your app.
+Static files such as images and stylesheets can be placed in `assets/` folder of the project. These files can be referenced within your app.
 
 ```md alert
 # Assets are copied during the build process.
@@ -15,7 +15,7 @@ when running in production mode. The `assets/` folder should only be used for st
 
 ## Referencing Assets
 
-To reference an image in the `"assets/"` simply pass the relative path as a prop.
+To reference an image in the `assets/` simply pass the relative path as a prop.
 
 For example, you can store your logo in your assets folder:
 
@@ -38,4 +38,4 @@ rx.image(src="/Reflex.svg", width="5em")
 
 The favicon is the small icon that appears in the browser tab.
 
-You can add a `"favicon.ico"` file to the `"assets/"` folder to change the favicon.
+You can add a `favicon.ico` file to the `assets/` folder to change the favicon.

docs/pages/dynamic_routing.md

@@ -12,7 +12,7 @@ and optional catch-all routes, each with detailed examples.
 
 ## Regular Dynamic Routes
 
-Regular dynamic routes in Reflex allow you to match specific segments in a URL dynamically. A regular dynamic route is defined by sqaure brackets in a route string / url pattern. For example `/users/[id]` or `/products/[category]`. These dynamic route arguments can be accesed by as a state var. For the examples above they would be `rx.State.id` and `rx.State.category` respectively. 
+Regular dynamic routes in Reflex allow you to match specific segments in a URL dynamically. A regular dynamic route is defined by sqaure brackets in a route string / url pattern. For example `/users/[id]` or `/products/[category]`. These dynamic route arguments can be accesed through a state var. For the examples above they would be `rx.State.id` and `rx.State.category` respectively. 
 
 ```md alert info
 # Why is the state var accessed as `rx.State.id`?
@@ -37,7 +37,10 @@ The [pid] part in the route is a dynamic segment, meaning it can match any value
 If a user navigates to `/post/5`, `State.post_id` will return `5`, and the page will display `5` as the heading. If the URL is `/post/xyz`, it will display `xyz`. If the URL is `/post/` without any additional parameter, it will display `""`.
 
 
-### Using `app.add_page` Method
+### Adding Dynamic Routes
+
+Adding dynamic routes uses the `add_page` method like any other page. The only difference is that the route string contains dynamic segments enclosed in square brackets.
+
 
 If you are using the `app.add_page` method to define pages, it is necessary to add the dynamic routes first, especially if they use the same function as a non dynamic route.
 

docs/pages/metadata.md

@@ -1,6 +1,7 @@
 ```python exec
 import reflex as rx
 from pcweb import constants, styles
+from pcweb.pages import docs
 from pcweb.pages.docs import api_reference, library
 ```
 
@@ -152,6 +153,52 @@ app = rx.App()
 
 This component will be available at `/nested/page`.
 
+## Page Metadata
+
+```python exec
+
+import reflex as rx
+
+meta_data = (
+"""
+@rx.page(
+    title='My Beautiful App',
+    description='A beautiful app built with Reflex',
+    image='/splash.png',
+    meta=meta,
+)
+def index():
+    return rx.text('A Beautiful App')
+
+@rx.page(title='About Page')
+def about():
+    return rx.text('About Page')
+
+
+meta = [
+    {'name': 'theme_color', 'content': '#FFFFFF'},
+    {'char_set': 'UTF-8'},
+    {'property': 'og:url', 'content': 'url'},
+]
+
+app = rx.App()
+"""  
+
+)
+
+```
+
+You can add page metadata such as:
+
+- The title to be shown in the browser tab
+- The description as shown in search results
+- The preview image to be shown when the page is shared on social media
+- Any additional metadata
+
+```python
+{meta_data}
+```
+
 ## Getting the Current Page
 
 You can access the current page from the `router` attribute in any state. See the [router docs]({docs.utility_methods.router_attributes.path}) for all available attributes.

docs/pages/overview.md

@@ -59,7 +59,6 @@ def get_sidebar_items_frontend():
             children=[
                 pages.overview,
                 pages.dynamic_routing,
-                pages.metadata,
             ],
         ),
         create_item(
@@ -76,7 +75,7 @@ def get_sidebar_items_frontend():
         create_item(
             "Assets",
             children=[
-                assets.referencing_assets,
+                assets.overview,
                 assets.upload_and_download_files,
             ],
         ),

pcweb/components/docpage/sidebar/sidebar_items/learn.py

@@ -138,8 +138,8 @@
     # Redirect any removed pages to their new home.
     ("/docs/components/style-props", "/docs/components/props"),
     ("/docs/components/conditional-props", "/docs/components/conditional-rendering"),
-    ("/docs/pages/routes", "/docs/pages/overview")
-
+    ("/docs/pages/routes", "/docs/pages/overview"),
+    ("/docs/assets/referencing_assets", "/docs/assets/overview"),
 ]
 
 for source, target in redirects:

pcweb/pcweb.py

@@ -9,7 +9,7 @@
 # - Correct: WHITELISTED_PAGES = ["/docs/getting-started/introduction"] 
 # - Incorrect: WHITELISTED_PAGES = ["/docs/getting-started/introduction/"]
 
-WHITELISTED_PAGES = ["/docs/ui", "/docs/components", "/docs/getting-started", "/docs/pages"] 
+WHITELISTED_PAGES = [] 
 
 def _check_whitelisted_path(path):
     if len(WHITELISTED_PAGES) == 0: