Re-organizing the component gallery supporting files

.gitignore

@@ -7,7 +7,7 @@
 .DS_Store
 
 /.luarc.json
-/__pycache__/
+__pycache__/
 .Rproj.user
 .Rhistory
 

_extensions/shafayetShafee/line-highlight/line-highlight.lua

@@ -1,15 +1,15 @@
-local PATTERN = "#<<$"
+local PATTERN = "# ?<<$"
 
 local function ensureHtmlDeps()
   quarto.doc.add_html_dependency({
   name = "line-highlight",
   version = "1.0.0",
   scripts = {
-    { 
-      path = "resources/js/line-highlight.js", 
+    {
+      path = "resources/js/line-highlight.js",
       attribs = {defer = "true"},
       afterBody = true
-      
+
     }
   },
   stylesheets = {"resources/css/line-highlight.css"}
@@ -44,7 +44,7 @@ function remove_pattern(lines, pattern)
   end
   return table.concat(code_lines, "\n")
 end
- 
+
 
 -- create escaped highlight_directive_pattern
 function escape_pattern(s)
@@ -154,7 +154,7 @@ end
 if FORMAT == "html" then
   -- ensuring dependencies for line-highlighting
   ensureHtmlDeps()
-  
+
   function Pandoc(doc)
     local doc = doc:walk(add_cb_attrs())
     return doc:walk(highlight_cb())

_quarto.yml

@@ -115,43 +115,43 @@ website:
           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
+            - components/inputs/action-button/index.qmd
+            - components/inputs/action-link/index.qmd
+            - components/inputs/checkbox/index.qmd
+            - components/inputs/checkbox-group/index.qmd
+            - components/inputs/date-range-selector/index.qmd
+            - components/inputs/date-selector/index.qmd
+            - components/inputs/numeric-input/index.qmd
+            - components/inputs/password-field/index.qmd
+            - components/inputs/radio-buttons/index.qmd
+            - components/inputs/select-single/index.qmd
+            - components/inputs/select-multiple/index.qmd
+            - components/inputs/selectize-single/index.qmd
+            - components/inputs/selectize-multiple/index.qmd
+            - components/inputs/slider/index.qmd
+            - components/inputs/slider-range/index.qmd
+            - components/inputs/switch/index.qmd
+            - components/inputs/text-area/index.qmd
+            - components/inputs/text-box/index.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
+            - components/outputs/data-grid/index.qmd
+            - components/outputs/datatable/index.qmd
+            - components/outputs/image/index.qmd
+            - components/outputs/map-ipyleaflet/index.qmd
+            - components/outputs/plot-matplotlib/index.qmd
+            - components/outputs/plot-plotly/index.qmd
+            - components/outputs/plot-seaborn/index.qmd
+            - components/outputs/text/index.qmd
+            - components/outputs/ui/index.qmd
+            - components/outputs/value-box/index.qmd
+            - components/outputs/verbatim-text/index.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
+            - components/display-messages/modal/index.qmd
+            - components/display-messages/notifications/index.qmd
+            - components/display-messages/progress-bar/index.qmd
+            - components/display-messages/tooltips/index.qmd
 
     - id: docs
       style: "floating"

components/_metadata.yml

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

components/_partials/components-detail-example.ejs

@@ -0,0 +1,2 @@
+
+<%= include('shiny-example-panel.ejs', {apps: items, appDir: templateParams.dir}) %>

components/_partials/components-detail-relevant-functions.ejs

@@ -0,0 +1,17 @@
+<!-- relevant functions -->
+
+## Relevant Functions {.mt-5}
+
+```{=html}
+<ul>
+  <% for (const item of items) { %>
+  <li>
+    <p>
+      <a href="<%= item.href %>"><%= item.title %></a>
+      <br>
+      <code style="text-wr"><%= item.signature %></code>
+    </p>
+  </li>
+  <% } %>
+</ul>
+```

components/_partials/components-list.ejs

@@ -22,7 +22,7 @@
 
 
 
-<% if (item.previewapp) { %>
+<% if (item.appPreview) { %>
 <div class="g-col-md-4 g-col-sm-6 g-col-12 component-list-column">
 <div class="component-list-header">
 <a class="component-list-header-text" href="<%= item.path %>">
@@ -43,12 +43,12 @@
 ```{shinylive-python}
 #| standalone: true
 #| components: [viewer]
-<%= item.previewapp %>
+<%= Deno.readTextFileSync(item.appPreview.file) %>
 ```
 </div>
 </div>
 </div>
-<% } %> 
+<% } %>
 
 <% } %>
 

components/_partials/components-variations.ejs

@@ -1,48 +1,15 @@
+::: {.variations}
+
 <% for (const item of items) { %>
 
-<% if (item.variations) { %>
+### <%= item.title %>
 
-:::{.border-bottom .blue .mt-6 .mb-4}
+::: {.variation-description}
+<%= item.description %>
 :::
 
-:::{.pt-1}
-
-## Variations
-
-<% for (const variation of item.variations) { %>
-
-#### <%= variation.title %> {.mb-0 .mt-5}
-
-<p class="mb-0"><%= variation.description %></p>
+<%= include('shiny-example-panel.ejs', {apps: item.apps, appDir: templateParams.dir}) %>
 
-::: {.panel-tabset}
-
-## Preview
-
-<iframe style="height:<% if (variation.height) { %>
-<%= variation.height %>
-<% } else { %>
-150px
-<% } %>;" class="mb-0 w-100 iframe-border" src="<%= variation.preview %>" title="<%= variation.title %>">
-</iframe>
-<% if (variation.shinylive) { %>    
-<p class="text-end my-0 p-90 me-2 pt-2"><a  href="<%= variation.shinylive %>"><i class="bi bi-pencil me-1"></i> Edit in Shinylive</a></p>
 <% } %>
 
-## Code
-
-```{.python filename="app.py" }
-<%= variation.code %>
-```
-<% if (variation.shinylive) { %>    
-<p class="text-end my-0 p-95 me-2"><a  href="<%= variation.shinylive %>"><i class="bi bi-pencil me-1"></i> Edit in Shinylive</a></p>
-<% } %>
 :::
-
-<% } %>
-
-:::
-
-<% } %>
-
-<% } %>

components/_partials/components.css

@@ -113,6 +113,16 @@ a.component-list-header-text:hover ~ div.component-list-icon p a i.component-lin
 }
 
 /* detail page styling */
+.app-preview .sourceCode {
+  padding: 0;
+  box-shadow: none;
+}
+
+.app-preview .shinylive-wrapper {
+  margin: 0;
+  padding: 1em;
+  background-color: var(--bs-body-bg);
+}
 
 .tab-content {
   margin-top: 0px;
@@ -122,6 +132,32 @@ a.component-list-header-text:hover ~ div.component-list-icon p a i.component-lin
   margin-bottom: 1em;
 }
 
+/* improve position of code copy button */
+div.sourceCode > pre.sourceCode {
+  position: static;
+}
+
+.code-with-filename {
+  position: relative;
+}
+
+.code-with-filename .code-copy-button {
+  top: 2em;
+}
+
+.code-with-shinylive-link {
+  position: relative;
+}
+
+.code-with-shinylive-link .edit-shinylive-button {
+  position: absolute;
+  top: 0.35em;
+  right: 2.5em;
+  --bs-btn-color: rgb(94, 94, 94);
+  --bs-btn-padding-x: 0;
+  --bs-btn-padding-y: 0;
+}
+
 code.sourceCode,
 pre.console code {
   padding: 0.25rem 1rem 0.25rem 0.25rem;
@@ -219,3 +255,40 @@ main a.nav-link:hover {
   border: 1px solid #E9ECEF;
   border-radius: 10px;
 }
+
+/* Shiny App Mode Tabset (Express/Core) */
+
+.shiny-mode-tabset > .nav-tabs {
+  padding-inline: 0.5rem;
+  border-start-end-radius: 0.5rem;
+  border-start-start-radius: 0.5rem;
+  border-bottom: 2px solid var(--bs-blue);
+  justify-content: flex-start !important;
+  font-size: 0.95em;
+  line-height: 1.33;
+}
+
+.shiny-mode-tabset > .nav-tabs,
+.shiny-mode-tabset > .nav-tabs > .nav-item > .nav-link,
+.shiny-mode-tabset > .nav-tabs > .nav-item > .nav-link.active {
+  background-color: var(--bs-blue);
+  color: var(--bs-white);
+}
+
+.shiny-mode-tabset > .nav-tabs > .nav-item > .nav-link:hover {
+  border-bottom-color: transparent !important;
+}
+
+.shiny-mode-tabset > .nav-tabs > .nav-item > .nav-link.active {
+  border-bottom-color: var(--bs-white) !important;
+}
+
+.shiny-mode-tabset > .tab-content {
+  padding-top: 0;
+}
+
+.shiny-mode-tabset > .tab-content .sourceCode {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-block-start-width: 0;
+}

components/_partials/componentsjs.html

@@ -3,4 +3,7 @@
 document.querySelectorAll('.tab-pane:first-of-type').forEach((x) => x.classList.add("show"))
 document.querySelectorAll('.tab-pane').forEach((x) => x.classList.add("fade"))
 
-</script>
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+
+</script>