convert streamlit app

Author: MarcSkovMadsen

docs/assets/images/examples/stock-peer-analysis-panel-summary.png

@@ -24,7 +24,7 @@ Please implement the plan.
 
 ## Result
 
-Not perfect, but a really good starting point.
+The result is a solid foundation that can be further refined as needed.
 
 ![Distribution of Electricity Plot - Output](../assets/images/examples/distribution-of-electricity-output.png)
 

docs/assets/images/examples/stock-peer-analysis-panel.gif

@@ -108,6 +108,7 @@ nav:
         - examples/index.md
         - Plot from Picture: examples/generate-plot-from-picture.md
         - Dashboard from Picture: examples/generate-dashboard-from-picture.md
+        - Convert Streamlit App: examples/convert-streamlit-app.md
     - How-To Guides:
         - Installation:
             - uv (recommended): how-to/install-uv.md

docs/assets/images/examples/stock-peer-analysis-streamlit-claude.png

@@ -173,6 +173,10 @@ filterwarnings = [
 ]
 testpaths = ["tests"]
 
+[tool.codespell]
+ignore-words-list = "acn"
+skip = "*.js,*.css,*.svg,*.json"
+
 [tool.mypy]
 python_version = '3.11'
 no_implicit_optional = true

docs/assets/images/examples/stock-peer-analysis-streamlit.png

@@ -135,7 +135,6 @@ elif pn.state.served:
 
 DO always create test in separate test files and DO run test via pytest:
 
-
 ```python
 import ...
 
@@ -165,12 +164,14 @@ def test_characters_reactivity():
 - DO use Material UI `sx` parameter for all css styling over `styles` and `stylesheets`
 - DO use panel-material-ui components instead of panel components for projects already using panel-material-ui and for new projects
 - DON'T configure the `design`, i.e. DO NOT `pn.extension(design='material')`.
+- DO prefer professional Material UI icons over emojies
 
 ## Component Instructions
 
 ### Page
 
 - DO provide the title to the `Page.title` argument. DON'T provide it in the `Page.main` area.
+- DO make sure components in the `sidebar` stretch width.
 - DO provide an optional image, description, navigation menu to the `Page.sidebar` argument. Normally DON't put them in the `header` or `main` areas.
 - DO provide the input widgets as children to the `Page.sidebar` argument
 - DO not add advanced or high components to the `Page.header` as it is only 100px high by default. Normally only buttons, indicators, text and navigation links go into the header.

docs/examples/convert-streamlit-app.md

@@ -339,6 +339,7 @@ template = pn.template.FastListTemplate(
 ```
 
 - In the `sidebar`, DO use the order: 1) optional logo, 2) description, 3) input widgets, 4) documentation
+- In the `sidebar`, DO make sure components stretch width.
 - Do set `main_layout=None` for a modern styling.
 
 ### Responsive Design