docs: examples page

.vscode/settings.json

@@ -19,5 +19,8 @@
             "source.organizeImports": "explicit"
         },
     },
+    "[quarto]": {
+        "editor.formatOnSave": false
+    },
     "python.analysis.typeCheckingMode": "standard",
 }

docs/.gitignore

@@ -5,3 +5,6 @@ reference
 _site
 _sidebar.yml
 objects.json
+
+#embedding
+*.embed.ipynb

docs/_quarto.yml

@@ -17,8 +17,8 @@ website:
     left:
       - text: Intro
         file: articles/intro.qmd
-      # - text: Get Started
-      #   file: get-started/index.qmd
+      - text: Examples
+        file: examples/index.qmd
       - reference/index.qmd
     right:
       - icon: github

docs/examples/before-after.qmd

@@ -0,0 +1,69 @@
+---
+title: Before and After
+jupyter: python3
+---
+
+
+<style>
+h4 a {
+    text-decoration: none;
+    font-size: 20px;
+
+}
+</style>
+
+::: {.callout-tip collapse="false"}
+On this page you will find on the left, basic tables created with **great-tables**, and on the right, the same tables styled with one or more **gt-extras** functions.
+:::
+
+## Formatting and HTML
+
+### Two Column Layout
+
+::::: {.grid}
+
+:::{.g-col-lg-6 .g-col-12 .shrink-example}
+#### [Before: Large Landmasses](./raw.qmd#large-landmasses)
+{{< embed raw.qmd#large-landmasses >}}
+
+:::
+
+:::{.g-col-lg-6 .g-col-12 .shrink-example}
+#### [After: gt_two_column_layout](./raw.qmd#two-column-layout)
+{{< embed raw.qmd#two-column-layout >}}
+
+:::
+
+:::::
+
+
+
+
+<!-- ```{python}
+from great_tables.data import airquality
+
+airquality_mini = airquality.head(10).assign(Year = 1973)
+
+(
+    GT(airquality_mini)
+    .tab_header(
+        title="New York Air Quality Measurements",
+        subtitle="Daily measurements in New York City (May 1-10, 1973)"
+    )
+    .tab_spanner(
+        label="Time",
+        columns=["Year", "Month", "Day"]
+    )
+    .tab_spanner(
+        label="Measurement",
+        columns=["Ozone", "Solar_R", "Wind", "Temp"]
+    )
+    .cols_move_to_start(columns=["Year", "Month", "Day"])
+    .cols_label(
+        Ozone = html("Ozone,<br>ppbV"),
+        Solar_R = html("Solar R.,<br>cal/m<sup>2</sup>"),
+        Wind = html("Wind,<br>mph"),
+        Temp = html("Temp,<br>&deg;F")
+    )
+)
+``` -->

docs/examples/index.qmd

@@ -0,0 +1,287 @@
+---
+title: Examples
+notebook-links: false
+---
+
+<style>
+iframe {
+    overflow: hidden;
+}
+
+h3 {
+    text-align: center;
+}
+
+h3 a {
+    text-decoration: none;
+    font-size: 20px;
+}
+
+/* Turn off weird quarto whitespace behavior */
+.masonry-item > p {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.masonry-container {
+  column-count: auto;
+  /* Effectively determines number of columns (wider = fewer cols) */
+  column-width: 11rem;
+  column-gap: 1em;
+}
+
+.masonry-item {
+  display: inline-block;
+  width: 100%;
+  margin-bottom: 1em;
+  position: relative;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.embed-hover-overlay {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.6);
+    color: #fff;
+    font-size: 1.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    z-index: 2;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 1em;
+}
+
+.masonry-item:hover .embed-hover-overlay {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.masonry-item .cell-output table {
+  zoom: calc(260/var(--width) * var(--dynamic-factor));
+}
+</style>
+
+<script>
+function updateZoom() {
+  const container = document.querySelector('.masonry-item');
+  if (!container) return;
+
+  const width = container.offsetWidth;
+  const factor = Math.max(0.3, Math.min(2.5, width / 300));
+
+  document.documentElement.style.setProperty('--dynamic-factor', factor);
+}
+
+addEventListener('DOMContentLoaded', updateZoom);
+addEventListener('resize', updateZoom);
+
+function setTableWidths() {
+    document.querySelectorAll('.masonry-item').forEach(item => {
+        // Skip fixed width for gt_two_column_layout
+        if (
+            item.querySelector('[href*="with-code.html#gt_two_column_layout"]') ||
+            item.querySelector('#cell-gt_two_column_layout')
+        ) {
+            item.style.setProperty('--width', 631);
+            return;
+        }
+        const table = item.querySelector('.cell-output table');
+        if (table) {
+            // Set the --width CSS variable on the masonry item to the rendered width
+            const tableWidth = table.offsetWidth;
+            item.style.setProperty('--width', tableWidth);
+        }
+    });
+}
+
+addEventListener('DOMContentLoaded', setTableWidths);
+addEventListener('resize', setTableWidths);
+</script>
+
+<!-- ::::: {.grid}
+
+:::{.g-col-lg-5 .g-col-12 .example .shrink-example}
+### [Two Column Layout](./before-after.qmd#two-column-layout)
+{{< embed raw.qmd#two-column-layout >}}
+:::
+
+::::: -->
+
+::::{.masonry-container}
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_plt_bar >}}
+[gt_plt_bar](./with-code.html#gt_plt_bar){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_plt_bar_pct >}}
+[gt_plt_bar_pct](./with-code.html#gt_plt_bar_pct){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_plt_bar_stack >}}
+[gt_plt_bar_stack](./with-code.html#gt_plt_bar_stack){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_plt_conf_int >}}
+[gt_plt_conf_int](./with-code.html#gt_plt_conf_int){.embed-hover-overlay}
+:::
+
+<!-- Override width on some of the slower rendering ones -->
+:::{.masonry-item style="--width: 292;"}
+{{< embed with-code.qmd#gt_plt_dot >}}
+[gt_plt_dot](./with-code.html#gt_plt_dot){.embed-hover-overlay}
+:::
+
+<!-- Override width on some of the slower rendering ones -->
+:::{.masonry-item style="--width: 359;"}
+{{< embed with-code.qmd#gt_plt_dumbbell >}}
+[gt_plt_dumbbell](./with-code.html#gt_plt_dumbbell){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_plt_winloss >}}
+[gt_plt_winloss](./with-code.html#gt_plt_winloss){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 209;"}
+{{< embed with-code.qmd#gt_color_box >}}
+[gt_color_box](./with-code.html#gt_color_box){.embed-hover-overlay}
+:::
+
+<!-- Override width on some of the slower rendering ones -->
+:::{.masonry-item style="--width: 322;"}
+{{< embed with-code.qmd#gt_data_color_by_group >}}
+[gt_data_color_by_group](./with-code.html#gt_data_color_by_group){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_highlight_cols >}}
+[gt_highlight_cols](./with-code.html#gt_highlight_cols){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_highlight_rows >}}
+[gt_highlight_rows](./with-code.html#gt_highlight_rows){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_hulk_col_numeric >}}
+[gt_hulk_col_numeric](./with-code.html#gt_hulk_col_numeric){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 380;"}
+{{< embed with-code.qmd#gt_theme_538 >}}
+[gt_theme_538](./with-code.html#gt_theme_538){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 395;"}
+{{< embed with-code.qmd#gt_theme_espn >}}
+[gt_theme_espn](./with-code.html#gt_theme_espn){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 417;"}
+{{< embed with-code.qmd#gt_theme_guardian >}}
+[gt_theme_guardian](./with-code.html#gt_theme_guardian){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 334;"}
+{{< embed with-code.qmd#gt_theme_nytimes >}}
+[gt_theme_nytimes](./with-code.html#gt_theme_nytimes){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 365;"}
+{{< embed with-code.qmd#gt_theme_excel >}}
+[gt_theme_excel](./with-code.html#gt_theme_excel){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 411;"}
+{{< embed with-code.qmd#gt_theme_dot_matrix >}}
+[gt_theme_dot_matrix](./with-code.html#gt_theme_dot_matrix){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 379;"}
+{{< embed with-code.qmd#gt_theme_dark >}}
+[gt_theme_dark](./with-code.html#gt_theme_dark){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 488;"}
+{{< embed with-code.qmd#gt_theme_pff >}}
+[gt_theme_pff](./with-code.html#gt_theme_pff){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 274;"}
+{{< embed with-code.qmd#add_text_img >}}
+[add_text_img](./with-code.html#add_text_img){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#fa_icon_repeat >}}
+[fa_icon_repeat](./with-code.html#fa_icon_repeat){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_fa_rank_change >}}
+[gt_fa_rank_change](./with-code.html#gt_fa_rank_change){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 525;"}
+{{< embed with-code.qmd#gt_fa_rating >}}
+[gt_fa_rating](./with-code.html#gt_fa_rating){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#img_header >}}
+[img_header](./with-code.html#img_header){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 369;"}
+{{< embed with-code.qmd#fmt_pct_extra >}}
+[fmt_pct_extra](./with-code.html#fmt_pct_extra){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 745;"}
+{{< embed with-code.qmd#gt_add_divider >}}
+[gt_add_divider](./with-code.html#gt_add_divider){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 338;"}
+{{< embed with-code.qmd#gt_duplicate_column >}}
+[gt_duplicate_column](./with-code.html#gt_duplicate_column){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#gt_merge_stack >}}
+[gt_merge_stack](./with-code.html#gt_merge_stack){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="padding-top: 15px;"}
+{{< embed with-code.qmd#gt_two_column_layout >}}
+[gt_two_column_layout](./with-code.html#gt_two_column_layout){.embed-hover-overlay}
+:::
+
+:::{.masonry-item style="--width: 201;"}
+{{< embed with-code.qmd#with_hyperlink >}}
+[with_hyperlink](./with-code.html#with_hyperlink){.embed-hover-overlay}
+:::
+
+:::{.masonry-item}
+{{< embed with-code.qmd#with_tooltip >}}
+[with_tooltip](./with-code.html#with_tooltip){.embed-hover-overlay}
+:::
+
+::::