Shiny Components

_quarto.yml

@@ -1,10 +1,16 @@
 project:
   type: website
+  preview:
+    port: 1414
   output-dir: _build
   render:
     # List index.qmd first so that / redirects to it instead of components.html.
     - /index.qmd
     - /*.qmd
+    - components
+    - inputs
+    - outputs
+    - display-messages
     - docs
     - in-depth
     - development
@@ -51,6 +57,8 @@ website:
     card-style: "summary_large_image"
 
   navbar:
+    background: primary
+    foreground: light
     logo: shiny-for-python.svg
     logo-alt: The logo for Shiny for Python
     search: true
@@ -64,10 +72,13 @@ website:
           - docs/deploy-cloud.qmd
           - docs/deploy-on-prem.qmd
           - docs/shinylive.qmd
+      - text: "Components"
+        file: components/index.qmd
       - text: "Gallery"
         file: gallery/index.qmd
       - text: "Examples"
         href: https://shinylive.io/py/examples/
+        target: _blank
       - text: "Function Reference"
         href: api/index.qmd
       - text: "Help"
@@ -95,7 +106,53 @@ website:
       - icon: youtube
         href: https://www.youtube.com/playlist?list=PL9HYL-VRX0oRbLoj3FyL5zeASU5FMDgVe
         aria-label: Shiny YouTube Playlist
+
   sidebar:
+    - id: components
+      collapse-level: 2
+      contents:
+        - text: "![](/images/blank-pixel.png){.sidebar-title}__COMPONENTS__"
+          href: components/
+        - section: "![](/images/sliders.svg){.sidebar-icon .sidebar-subtitle}__Inputs__"
+          contents:
+            - components/inputs/action-button.qmd
+            - components/inputs/action-link.qmd
+            - components/inputs/checkbox.qmd
+            - components/inputs/checkbox-group.qmd
+            - components/inputs/date-range-selector.qmd
+            - components/inputs/date-selector.qmd
+            - components/inputs/numeric-input.qmd
+            - components/inputs/password-field.qmd
+            - components/inputs/radio-buttons.qmd
+            - components/inputs/select-single.qmd
+            - components/inputs/select-multiple.qmd
+            - components/inputs/selectize-single.qmd
+            - components/inputs/selectize-multiple.qmd
+            - components/inputs/slider.qmd
+            - components/inputs/slider-range.qmd
+            - components/inputs/switch.qmd
+            - components/inputs/text-area.qmd
+            - components/inputs/text-box.qmd
+        - section: "![](/images/bar-chart-line-fill.svg){.sidebar-icon .sidebar-subtitle}__Outputs__"
+          contents:
+            - components/outputs/data-grid.qmd
+            - components/outputs/datatable.qmd
+            - components/outputs/image.qmd
+            - components/outputs/map-ipyleaflet.qmd
+            - components/outputs/plot-matplotlib.qmd
+            - components/outputs/plot-plotly.qmd
+            - components/outputs/plot-seaborn.qmd
+            - components/outputs/text.qmd
+            - components/outputs/ui.qmd
+            - components/outputs/value-box.qmd
+            - components/outputs/verbatim-text.qmd
+        - section: "![](/images/chat-dots-fill.svg){.sidebar-icon .sidebar-subtitle}__Display Messages__"
+          contents:
+            - components/display-messages/modal.qmd
+            - components/display-messages/notifications.qmd
+            - components/display-messages/progress-bar.qmd
+            - components/display-messages/tooltips.qmd
+
     - id: docs
       style: "floating"
       collapse-level: 2
@@ -151,7 +208,9 @@ format:
     include-in-header: include-in-header.html
     code-copy: true
     link-external-newwindow: true
-
+    grid:
+      sidebar-width: 300px
+      gutter-width: 2.5rem
 
 editor:
   markdown:

components/_metadata.yml

@@ -0,0 +1,12 @@
+sidebar: components 
+format:
+  html:
+    css: _partials/components.css
+    toc: false
+    code-line-numbers: true
+    include-after-body: _partials/componentsjs.html
+filters:
+  - quarto
+  - line-highlight
+  - shinylive 
+