Expressify Layout Gallery

_quarto.yml

@@ -159,47 +159,47 @@ website:
         - section: "![](/images/navbars-blue.svg){.sidebar-icon .sidebar-subtitle}__Navbars__"
           contents:
             - text: "Navbar at Top"
-              href: "/layouts/navbars.html#navbar-at-top"
+              href: "/layouts/navbars/index.html#navbar-at-top"
             - text: "Navbar at Bottom"
-              href: "/layouts/navbars.html#navbar-at-bottom"
+              href: "/layouts/navbars/index.html#navbar-at-bottom"
         - section: "![](/images/sidebars-blue.svg){.sidebar-icon .sidebar-subtitle}__Sidebars__"
           contents:
             - text: "Sidebar on Left"
-              href: "/layouts/sidebars.html#sidebar-on-the-left"
+              href: "/layouts/sidebars/index.html#sidebar-on-the-left"
             - text: "Sidebar on Right"
-              href: "/layouts/sidebars.html#sidebar-on-the-right"
+              href: "/layouts/sidebars/index.html#sidebar-on-the-right"
             - text: "Sidebar Within a Card"
-              href: "/layouts/sidebars.html#sidebar-within-a-card"
+              href: "/layouts/sidebars/index.html#sidebar-within-a-card"
             - text: "Collapsed Sidebar"
-              href: "/layouts/sidebars.html#collapsed-sidebar"
+              href: "/layouts/sidebars/index.html#collapsed-sidebar"
         - section: "![](/images/tabs-blue.svg){.sidebar-icon .sidebar-subtitle}__Tabs__"
           contents:
             - text: "Tabset with Pill Navigation"
-              href: "/layouts/tabs.html#tabset-with-pill-navigation"
+              href: "/layouts/tabs/index.html#tabset-with-pill-navigation"
             - text: "Tabset with Pill List Navigation"
-              href: "/layouts/tabs.html#tabset-with-pill-list-navigation"
+              href: "/layouts/tabs/index.html#tabset-with-pill-list-navigation"
             - text: "Tabset with Tab Navigation"
-              href: "/layouts/tabs.html#tabset-with-tab-navigation"
+              href: "/layouts/tabs/index.html#tabset-with-tab-navigation"
             - text: "Card with a Tabbed Tabset"
-              href: "/layouts/tabs.html#card-with-a-tabbed-tabset"
+              href: "/layouts/tabs/index.html#card-with-a-tabbed-tabset"
             - text: "Card with a Pill Tabset"
-              href: "/layouts/tabs.html#card-with-a-pill-tabset"
+              href: "/layouts/tabs/index.html#card-with-a-pill-tabset"
             - text: "Vertically Collapsing Accordions"
-              href: "/layouts/tabs.html#vertically-collapsing-accordion-panels"
+              href: "/layouts/tabs/index.html#vertically-collapsing-accordion-panels"
         - section: "![](/images/cards-blue.svg){.sidebar-icon .sidebar-subtitle}__Panels & Cards__"
           contents:
             - text: "Main Image w/ Floating Panel"
-              href: "/layouts/panels-cards.html#main-image-with-panel-floating-above"
+              href: "/layouts/panels-cards/index.html#main-image-with-panel-floating-above"
             - text: "Content Divided by Cards"
-              href: "/layouts/panels-cards.html#content-divided-by-cards"
+              href: "/layouts/panels-cards/index.html#content-divided-by-cards"
         - section: "![](/images/arrange-blue.svg){.sidebar-icon .sidebar-subtitle}__Arrange Elements__"
           contents:
             - text: "Grid Layouts"
-              href: "/layouts/arrange.html#grid-layouts"
+              href: "/layouts/arrange/index.html#grid-layouts"
             - text: "Column Nesting"
-              href: "/layouts/arrange.html#column-nesting"
+              href: "/layouts/arrange/index.html#column-nesting"
             - text: "Controlling for Page Size"
-              href: "/layouts/arrange.html#controlling-for-page-width-and-height"
+              href: "/layouts/arrange/index.html#controlling-for-page-width-and-height"
 
     - id: docs
       style: "floating"

docs/helpers.py

@@ -1,6 +1,8 @@
 import glob
 from pathlib import Path
-from typing import Any, Iterable, List, Optional, Sequence
+from typing import Any, Iterable, List, Literal, Optional, Sequence
+
+from shinylive import ShinyliveApp
 
 
 class QuartoPrint(List[str]):
@@ -18,6 +20,48 @@ def append_file(self, file_path: str, file_name: Optional[str] = None):
             app_contents = app_file.read()
             self.append(app_contents)
 
+    def append_shinylive_chunk(
+        self,
+        files: list[str] | str,
+        language: str = "py",
+        **kwargs,
+    ):
+        if isinstance(files, str):
+            app_file = files
+            files = []
+        else:
+            app_file = files.pop(0)
+
+        app = ShinyliveApp.from_local(app_file, files, language)
+
+        self.append(app.to_chunk(**kwargs))
+
+
+def shinylive_chunk(
+    contents: list[str] | str,
+    components: Sequence[str] = ("editor", "viewer"),
+    viewer_height: str = "400",
+    layout: Literal["horizontal", "vertical"] = "horizontal",
+):
+    block = QuartoPrint(
+        [
+            "```{shinylive-python}",
+            "#| standalone: true",
+            f"#| components: [{', '.join(components)}]",
+            f"#| layout: {layout}",
+            f"#| viewerHeight: {viewer_height}",
+            "",
+        ]
+    )
+
+    if isinstance(contents, str):
+        block.append(contents.strip())
+    else:
+        block.extend(contents)
+
+    block.append("```")
+    return block
+
 
 def list_files(path: str) -> List[str]:
     files = glob.glob(path + "/**", recursive=True)
@@ -135,3 +179,64 @@ def express_editor_tabs(path: str, viewer_height: str = "400px") -> None:
 
     block.append(":::")
     print(block)
+
+
+def shinylive_app_preview(
+    files: list[str] | str,
+    viewer_height: str | int = 400,
+    div_attrs="",
+    **kwargs,
+) -> None:
+    block = QuartoPrint([f"::: {{.app-preview {div_attrs}}}"])
+
+    block.append_shinylive_chunk(
+        files,
+        viewer_height=str(viewer_height),
+        components=["viewer"],
+        **kwargs,
+    )
+
+    block.append(":::")
+    print(block)
+
+
+def express_core_preview(
+    app_express: str | None = None,
+    app_core: str | None = None,
+    files: list[str] | str | None = None,
+    div_attrs=".shiny-mode-tabset",
+    group="shiny-app-mode",
+    language="py",
+    **kwargs,
+) -> None:
+    if app_express is None and app_core is None:
+        return
+
+    if files is None:
+        files = []
+    elif isinstance(files, str):
+        files = [files]
+
+    header_attrs = ".panel-tabset"
+    header_attrs += " " + div_attrs if div_attrs else ""
+    header_attrs += f" group='{group}'" if group else ""
+
+    block = QuartoPrint(["::: {" + header_attrs + "}"])
+
+    apps = zip([app_express, app_core], ["Express", "Core"])
+
+    for app_file, tab_name in apps:
+        if app_file is None:
+            continue
+
+        sl_app = ShinyliveApp.from_local(app_file, files, language)
+
+        block.append("### " + tab_name)
+        block.append(
+            '```{.python .code-overflow-scroll shinylive="' + sl_app.to_url() + '"}'
+        )
+        block.append_file(app_file)
+        block.extend(["```", ""])
+
+    block.append(":::")
+    print(block)

layouts/_partials/layouts.css

@@ -43,7 +43,7 @@
 .component-list-header {
   display:flex;
   justify-content: space-between;
-  align-items: center; 
+  align-items: center;
   margin-bottom: 0px;
 }
 
@@ -81,7 +81,7 @@ a .component-link-icon:after  {
   transition: all 0.3s !important;
 }
 
-a:hover .component-link-icon:after, 
+a:hover .component-link-icon:after,
 a.component-list-header-text:hover ~ div.component-list-icon p a i.component-link-icon:after {
   content: "\F133";
   font-family: "bootstrap-icons";
@@ -214,7 +214,7 @@ pre.console code {
 
 /* Tab styling */
 
-.panel-tabset .nav-tabs {
+.panel-tabset:not(.shiny-mode-tabset) .nav-tabs {
   display: flex !important;
   align-items: flex-end !important;
   justify-content: flex-end !important;