More shiki cleanup (#1093)

* More shiki cleanup

* intro page

* use a shiki markdown based wrapper

* fix ref

* minor refactor

Author: ElijahAhianyo

blog/2024-10-8-self-hosting-reflex-with-docker.md

@@ -30,6 +30,10 @@ meta: [
 ]
 ---
 
+```python exec
+from pcweb.flexdown import markdown_with_shiki
+```
+
 Reflex offers a powerful way to build reactive web apps in pure Python, complete with one-line deployment for easy hosting. For those who want to self host on their own infra we'll explore how to leverage Docker to containerize and deploy your app, taking your Reflex app from development to production.
 
 
@@ -100,7 +104,7 @@ import reflex as rx
 rx.accordion.root(
     rx.accordion.item(
         header=rx.text("Explanation of the compose.yml file", color=rx.color("slate", 12), weight="regular"),
-        content=rx.markdown("""Here we define three services: `backend`, `frontend`, and `redis`. The `backend` service will run the Reflex app, the `frontend` service will run the web server, and the `redis` service will run the Redis server. The `depends_on` key specifies the order in which the services will be started.
+        content=markdown_with_shiki("""Here we define three services: `backend`, `frontend`, and `redis`. The `backend` service will run the Reflex app, the `frontend` service will run the web server, and the `redis` service will run the Redis server. The `depends_on` key specifies the order in which the services will be started.
 
 The first to be run is the `redis` service. We use Redis for the state manager and it is good to put in its own container, so that its easy to differenatiate the resource usage from a cache and the actual web server. It pulls the docker image for redis and runs the image as a container. If we wanted a specific tag then we can specify it in the image key, i.e. `image: redis:7.4.0`.
 
@@ -138,7 +142,7 @@ ENTRYPOINT ["reflex", "run", "--env", "prod", "--backend-only", "--loglevel", "d
 rx.accordion.root(
     rx.accordion.item(
         header=rx.text("Explanation of the Dockerfile file", color=rx.color("slate", 12), weight="regular"),
-        content=rx.markdown("""We start from the python image of 3.12. 
+        content=markdown_with_shiki("""We start from the python image of 3.12. 
 
 Docker compose makes all the services accessible to each via their service name. Therefore `redis://` is the protocol, `redis` is the url and is easily accessible to all other services and therefore we access the redis container. If you are using a self hosted redis then you would put the actual url here instead of redis i.e. `REDIS_URL=redis://sjc04rdsdb01.your.cloud.provider.com`. `PYTHONUNBUFFERED=1` ensures that stdout and stderr go to the terminal.
 
@@ -175,7 +179,7 @@ COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 rx.accordion.root(
     rx.accordion.item(
         header=rx.text("Explanation of the web.Dockerfile file", color=rx.color("slate", 12), weight="regular"),
-        content=rx.markdown("""We import `python:3.12` and build on top of it and the name of this build step is `builder` which we can then reference later as needed. The `WORKDIR`, `COPY`, `RUN pip install` commands are the same as in the `Dockerfile`. The `reflex export --frontend-only --no-zip` command exports the frontend assets to the `.web/_static` directory. The `builder` step encompasses all lines until we reach the next `FROM` statement. After this the `builder` step is complete and ready to be used in later steps.
+        content=markdown_with_shiki("""We import `python:3.12` and build on top of it and the name of this build step is `builder` which we can then reference later as needed. The `WORKDIR`, `COPY`, `RUN pip install` commands are the same as in the `Dockerfile`. The `reflex export --frontend-only --no-zip` command exports the frontend assets to the `.web/_static` directory. The `builder` step encompasses all lines until we reach the next `FROM` statement. After this the `builder` step is complete and ready to be used in later steps.
 
 `nginx` is an image that we import and there is no need for an entrypoint as we plan to utilize the existing one that comes with the image.
 
@@ -234,7 +238,7 @@ server {
 rx.accordion.root(
     rx.accordion.item(
         header=rx.heading("Explanation of the nginx.conf file", color=rx.color("slate", 12), weight="regular", size='5'),
-        content=rx.markdown("""The `listen 80;` and `listen  [::]:80;` lines specify that the server should listen on port 80 ([::] is for ipv6).
+        content=markdown_with_shiki("""The `listen 80;` and `listen  [::]:80;` lines specify that the server should listen on port 80 ([::] is for ipv6).
 
 The `location /_event` block is used to proxy websocket connections to the backend server. The `proxy_pass http://backend:8000;` line specifies that the requests should be forwarded to the `backend` service on port 8000. Anything that hits the frontend on the 3 pages (`/_event`, `/ping`, `/_upload`) are passed on to the backend and then the backend will respond and the front end will pass that straight back to the user. 
 

docs/custom-components/command-reference.md

@@ -61,7 +61,7 @@ The `init` command uses the current enclosing folder name to construct a python
 The `init` command creates a set of files and folders prefilled with the package name and other details. During the init, the `custom_component` folder is installed locally in editable mode, so a developer can incrementally develop and test with ease. The changes in component implementation is automatically reflected where it is used. Below is the folder structure after the `init` command.
 
 ```python eval
-rx.code_block("""
+rx._x.code_block("""
 google_auth/
 ├── pyproject.toml
 ├── README.md

docs/getting_started/introduction.md

@@ -4,10 +4,11 @@ from pcweb import constants, styles
 from pcweb.pages.docs import getting_started
 from pcweb.pages.docs import wrapping_react
 from pcweb.pages.docs.library import library
-from pcweb.pages.docs import  pages
+from pcweb.pages.docs import pages
 from pcweb.pages.docs import vars
 from pcweb.styles.colors import c_color
 from pcweb.styles.fonts import base
+from pcweb.flexdown import markdown_with_shiki
 ```
 
 <!-- TODO how do we consistently rename page title? -->
@@ -79,7 +80,7 @@ def tabs():
             ),
         ),
         rx.tabs.content(
-            rx.markdown(
+            markdown_with_shiki(
                 """The frontend is built declaratively using Reflex components. Components are compiled down to JS and served to the users browser, therefore:
 
 - Only use Reflex components, vars, and var operations when building your UI. Any other logic should be put in your `State` (backend).
@@ -91,15 +92,15 @@ def tabs():
             class_name="pt-4"
         ),
         rx.tabs.content(
-            rx.markdown(
+            markdown_with_shiki(
                 """Write your backend in the `State` class. Here you can define functions and variables that can be referenced in the frontend. This code runs directly on the server and is not compiled, so there are no special caveats. Here you can use any Python external library and call any method/function.
                 """,
             ),
             value="tab2",
             class_name="pt-4"
         ),
         rx.tabs.content(
-            rx.markdown(
+            markdown_with_shiki(
                 f"""Each page is a Python function that returns a Reflex component. You can define multiple pages and navigate between them, see the [Routing]({pages.routes.path}) section for more information.
 
 - Start with a single page and scale to 100s of pages.
@@ -142,11 +143,11 @@ tabs()
 
 ```python demo box
 rx.box(
-    rx.code_block(
+    rx._x.code_block(
         """import reflex as rx """,
         class_name="code-block !bg-transparent !border-none",
     ),
-    rx.code_block(
+    rx._x.code_block(
         """class State(rx.State):
     count: int = 0
 
@@ -167,7 +168,7 @@ rx.box(
         ),
         class_name="code-block",
     ),
-    rx.code_block(
+    rx._x.code_block(
         """def index():
     return rx.hstack(
         rx.button(
@@ -195,7 +196,7 @@ rx.box(
         ),
         class_name="code-block",
     ),
-    rx.code_block(
+    rx._x.code_block(
         """app = rx.App()
 app.add_page(index)""",
         background=rx.cond(

docs/library/forms/form-ll.md

@@ -143,7 +143,7 @@ In this example, the `rx.input` has an attribute `type="email"` and the `form.me
 ## Form Anatomy
 
 ```python eval
-rx.code_block(
+rx._x.code_block(
     """form.root(
     form.field(
         form.label(...),

errors.md

@@ -1,5 +1,6 @@
 ```python exec
 import reflex as rx
+from pcweb.flexdown import markdown_with_shiki
 ```
 
 ```python exec
@@ -20,7 +21,7 @@ def h4_comp_error(text: rx.Var[str]) -> rx.Component:
 @rx.memo
 def code_block_error(code: str):
     return rx.box(
-        rx.code_block(
+        rx._x.code_block(
             code,
             language="python",
             class_name="code-block !bg-slate-1",
@@ -30,7 +31,7 @@ def code_block_error(code: str):
 
 @rx.memo
 def markdown_error(text: str):
-    return rx.markdown(
+    return markdown_with_shiki(
         text,
         class_name="font-small text-slate-11 text-start markdown-code",
     )

pcweb/flexdown.py

@@ -111,7 +111,7 @@ def render(self, env) -> rx.Component:
                                 color=f"{rx.color(color, 11)}",
                             ),
                             (
-                                rx.markdown(
+                                markdown_with_shiki(
                                     title, margin_y="0px", style=get_code_style(color)
                                 )
                                 if title
@@ -171,7 +171,7 @@ def render(self, env) -> rx.Component:
                         ),
                         color=f"{rx.color(color, 11)}",
                     ),
-                    rx.markdown(
+                    markdown_with_shiki(
                         title,
                         color=f"{rx.color(color, 11)}",
                         margin_y="0px",
@@ -369,13 +369,13 @@ def render(self, env) -> rx.Component:
                 rc.accordion_button(
                     rx.hstack(
                         (
-                            rx.markdown(
+                            markdown_with_shiki(
                                 title,
                                 margin_y="0px",
                                 style=get_code_style(color),
                             )
                             if title
-                            else rx.markdown("Video Description")
+                            else markdown_with_shiki("Video Description")
                         ),
                         rx.spacer(),
                         rc.accordion_icon(color=f"{rx.color(color, 11)}"),
@@ -534,3 +534,21 @@ def render(self, env) -> rx.Component:
 
 def markdown(text):
     return xd.get_default_block().render_fn(content=text)
+
+
+def markdown_with_shiki(*args, **kwargs):
+    """
+    Wrapper for the markdown component with a customized component map.
+    Uses the experimental Shiki-based code block (rx._x.code_block)
+    instead of the default CodeBlock component for code blocks.
+
+    Note: This wrapper should be removed once the default codeblock
+    in rx.markdown component map is updated to the Shiki-based code block.
+    """
+    return rx.markdown(
+        *args,
+        component_map={
+            "codeblock": lambda value, **props: rx._x.code_block(value, **props)
+        },
+        **kwargs
+    )

pcweb/pages/changelog.py

@@ -3,7 +3,7 @@
 from pcweb.templates.webpage import webpage
 from pcweb.components.icons.icons import get_icon
 from pcweb.components.webpage.comps import h1_title
-
+from pcweb.flexdown import markdown_with_shiki
 
 def change(
     date: str, version: str, description: str, points: list[str], link: str
@@ -33,7 +33,7 @@ def change(
         rx.el.ul(
             *[
                 rx.el.li(
-                    rx.markdown(d, class_name="markdown-code"),
+                    markdown_with_shiki(d, class_name="markdown-code"),
                     class_name="font-small text-slate-11",
                 )
                 for d in points

pcweb/pages/faq.py

@@ -5,6 +5,7 @@
 from pcweb.templates.webpage import webpage
 from pcweb.constants import DISCORD_URL, CONTRIBUTING_URL
 from pcweb.components.webpage.comps import h1_title
+from pcweb.flexdown import markdown_with_shiki
 import reflex_chakra as rc
 
 faq_items = [
@@ -75,7 +76,7 @@
     },
     {
         "Q": "What usage data is collected?",
-        "A": rx.markdown(
+        "A": markdown_with_shiki(
             """
 Anonymous usage data allows us to understand how Reflex is used and how we can improve the product.
 

pcweb/pages/page404.py

@@ -1,5 +1,6 @@
 import reflex as rx
 from pcweb.templates.webpage import webpage
+from pcweb.flexdown import markdown_with_shiki
 
 contents = f"""
 # Page Not Found
@@ -12,7 +13,7 @@
 def page404():
     return rx.center(
         rx.vstack(
-            rx.markdown(contents),
+            markdown_with_shiki(contents),
             rx.spacer(),
         ),
         class_name="h-[80vh] w-full",