Template and llm page update

.gitignore

@@ -3,7 +3,5 @@
 _site
 .Rhistory
 site_libs
-.claude
-CLAUDE.md
 /.quarto/
 **/*.quarto_ipynb

CLAUDE.md

@@ -0,0 +1,75 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is the source code for the [surveydown.org](https://surveydown.org/) website, which documents the surveydown R package for creating online surveys. The site is built using **Quarto** and deployed via **Netlify**.
+
+**surveydown** is a platform that combines:
+- **Quarto** for designing surveys using markdown and R code
+- **Shiny** for rendering surveys as interactive web applications  
+- **PostgreSQL/Supabase** for storing survey response data
+
+## Common Commands
+
+### Building and Previewing
+- `quarto render` - Render the entire website to `_site/` directory
+- `quarto preview` - Start local development server (port 5678 by default)
+- `quarto preview --port 5678` - Preview with specific port (as configured in _quarto.yml)
+
+### Development Workflow
+- Edit `.qmd` files in root, `docs/`, `blog/`, or `templates/` directories
+- Use `quarto preview` for live development with auto-refresh
+- The `chunks/` directory contains reusable content snippets included via `{{< include >}}`
+
+## Architecture
+
+### File Structure
+- **_quarto.yml** - Main Quarto project configuration with website structure, navigation, and rendering options
+- **docs/*.qmd** - Documentation pages covering surveydown features and usage
+- **templates/*.qmd** - Live examples and templates for different survey types
+- **blog/*.qmd** - Blog posts and announcements  
+- **css/** - Custom styling (surveydown.css, templates.css, theme.scss)
+- **chunks/** - Reusable content snippets included across pages
+- **images/** - Static assets including logos, screenshots, and diagrams
+- **_site/** - Generated website output (git-ignored)
+
+### Key Architecture Concepts
+- **Documentation structure**: Organized into logical sections (Survey Basics, Question Development, Survey Design Concepts, etc.) as defined in the sidebar navigation
+- **Template system**: Live, interactive examples hosted on shinyapps.io and embedded via iframes
+- **Content reuse**: Common content stored in `chunks/` and included via Quarto's include directive
+- **R dependencies**: Listed in DESCRIPTION file, includes core packages like surveydown, dplyr, leaflet, plotly
+
+### Navigation Structure
+The site uses a two-sidebar approach:
+1. **Documentation sidebar**: Hierarchical navigation for all docs content
+2. **Templates sidebar**: Categorized examples (Basic, Randomization, Reactivity, Conjoint, Custom)
+
+### Styling System
+- Uses Quarto's theme system with Bootstrap 5
+- Light/dark theme support via flatly/darkly themes
+- Custom SCSS in `css/theme.scss`
+- Template-specific styles in `css/templates.css`
+- Documentation styles in `css/surveydown.css`
+
+## Content Development
+
+### Adding Documentation
+1. Create new `.qmd` file in `docs/`
+2. Add navigation entry to `_quarto.yml` sidebar
+3. Use existing content structure and styling patterns
+4. Include reusable chunks from `chunks/` when appropriate
+
+### Adding Templates  
+1. Create new `.qmd` file in `templates/`
+2. Add metadata (title, date, categories, image, description)
+3. Include link to live demo and GitHub repo 
+4. Add iframe embed of live template
+5. Update `_quarto.yml` templates sidebar navigation
+
+### R Code Integration
+- R code blocks are set to `eval: false` by default (see _quarto.yml execute settings)
+- Use `#| eval: true` for blocks that should execute
+- Common R setup in `_common.R` for shared functions
+- Knitr options configured for clean output formatting

_quarto.yml

@@ -10,6 +10,7 @@ project:
 
 website:
   title: surveydown.org
+  llms-txt: true
   image: images/logo.ico
   favicon: images/logo.ico
   site-url: https://www.surveydown.org

css/templates.css

@@ -1,57 +1,47 @@
 /* Import Font Awesome */
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
 
-.template-iframe-container {
+/* Icon-only links appended to the end of the page title (GitHub repo and,
+   when present, the live demo). Soft rounded Lucide tiles, sized relative
+   to the title so they scale across breakpoints. */
+#title-block-header h1.title .title-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.05em;       /* relative to the title; ~ matches cap height */
+    height: 1.05em;
+    margin-left: 0.3em;
+    border-radius: 0.22em;
+    background: rgba(24, 188, 156, 0.13); /* tint of the site accent #18bc9c */
+    color: #18bc9c;
+    vertical-align: middle;
     position: relative;
-    width: 100%;
-    padding-bottom: 75%; /* Default 4:3 ratio for larger screens */
-    margin: 20px 0;
-    border: 1px solid #dee2e6;
-}
-
-.template-iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: none;
+    top: -0.06em;        /* nudge up to optically center against the caps */
+    text-decoration: none;
+    transition: background 0.15s ease, color 0.15s ease;
 }
 
-/* For mobile screens (width less than 768px) */
-@media screen and (max-width: 768px) {
-    .template-iframe-container {
-        padding-bottom: 150%; /* 2:3 vertical ratio for mobile */
-    }
+#title-block-header h1.title .title-icon svg {
+    width: 0.74em;
+    height: 0.74em;
 }
 
-.button-container {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  margin: 1rem 0;
+#title-block-header h1.title .title-icon:hover {
+    background: rgba(24, 188, 156, 0.24);
+    color: #12a589;
 }
 
-.template-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background-color: #4a5568;
-  color: white;
-  text-decoration: none;
-  border-radius: 0.375rem;
-  transition: background-color 0.2s;
-}
-
-.template-button:hover {
-  background-color: #2d3748;
-  color: white;
-  text-decoration: none;
+.template-video {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9; /* match the 16:9 walkthrough recordings */
+    margin: 20px 0;
+    border: 1px solid #dee2e6;
+    background: #000;
 }
 
-.template-button i {
-  font-size: 1rem;
+/* Hide Chrome's central overlay play button, which dims the frame on hover.
+   The bottom controls bar (with its own play button) remains. */
+.template-video::-webkit-media-controls-overlay-play-button {
+    display: none;
 }

templates/_metadata.yml

@@ -8,4 +8,33 @@ include-in-header:
     #title-block-header.quarto-title-block.default .quarto-title-meta {
       display: none;
     }
-    </style>
+    </style>
+include-after-body:
+  text: |
+    <script>
+    // Append icon-only links (GitHub repo, then live demo) to the page title,
+    // using inline Lucide SVGs styled as soft rounded tiles.
+    document.addEventListener('DOMContentLoaded', function () {
+      var data = document.getElementById('template-links');
+      var h1 = document.querySelector('#title-block-header h1.title');
+      if (!data || !h1) return;
+      var SVG = {
+        github: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>',
+        demo: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v4"/><path d="M2 8h20"/><path d="M6 4v4"/></svg>'
+      };
+      function addIcon(href, svg, label) {
+        if (!href) return;
+        var a = document.createElement('a');
+        a.href = href;
+        a.className = 'title-icon';
+        a.target = '_blank';
+        a.rel = 'noopener';
+        a.title = label;
+        a.setAttribute('aria-label', label);
+        a.innerHTML = svg;
+        h1.appendChild(a);
+      }
+      addIcon(data.getAttribute('data-repo'), SVG.github, 'GitHub repository');
+      addIcon(data.getAttribute('data-demo'), SVG.demo, 'Live demo');
+    });
+    </script>

templates/conditional_showing.qmd

@@ -6,7 +6,11 @@ image: banners/conditional_showing.png
 description: "A template for [conditional showing](/docs/conditional-logic.html#conditional-showing)."
 ---
 
-To create this template, run this command in your R console:
+<div id="template-links" data-repo="https://github.com/surveydown-dev/template_conditional_showing" hidden></div>
+
+## Create this template
+
+Run this command in your R console:
 
 ```{r}
 surveydown::sd_create_survey(
@@ -15,16 +19,13 @@ surveydown::sd_create_survey(
 )
 ```
 
-Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details.
-
-::: {.d-flex .justify-content-center .flex-wrap .text-center}
-
-[<i class="fas fa-external-link-alt"></i> Open in New Tab](https://surveydown.shinyapps.io/conditional_showing/){.template-button .m-1 style="width: 200px;"}
+## Video Walkthrough
 
-[<i class="fab fa-github"></i> GitHub Repo](https://github.com/surveydown-dev/template_conditional_showing){.template-button .m-1 style="width: 200px;"}
+<video class="template-video" controls preload="metadata">
+  <source src="https://cdn.jsdelivr.net/gh/surveydown-dev/template_conditional_showing@main/video-recording.mp4#t=0.1" type="video/mp4">
+</video>
 
-:::
+## Learn more
 
-<div class="template-iframe-container">
-<iframe src="https://surveydown.shinyapps.io/conditional_showing/" class="template-iframe"></iframe>
-</div>
+- [Conditional logic: conditional showing](/docs/conditional-logic.html#conditional-showing)
+- [Start with a template](/docs/getting-started.html#start-with-a-template)

templates/conditional_skipping.qmd

@@ -6,7 +6,11 @@ image: banners/conditional_skipping.png
 description: "A template for [conditional skipping](/docs/conditional-logic.html#conditional-skipping)."
 ---
 
-To create this template, run this command in your R console:
+<div id="template-links" data-repo="https://github.com/surveydown-dev/template_conditional_skipping" hidden></div>
+
+## Create this template
+
+Run this command in your R console:
 
 ```{r}
 surveydown::sd_create_survey(
@@ -15,16 +19,13 @@ surveydown::sd_create_survey(
 )
 ```
 
-Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details.
-
-::: {.d-flex .justify-content-center .flex-wrap .text-center}
-
-[<i class="fas fa-external-link-alt"></i> Open in New Tab](https://surveydown.shinyapps.io/conditional_skipping/){.template-button .m-1 style="width: 200px;"}
+## Video Walkthrough
 
-[<i class="fab fa-github"></i> GitHub Repo](https://github.com/surveydown-dev/template_conditional_skipping){.template-button .m-1 style="width: 200px;"}
+<video class="template-video" controls preload="metadata">
+  <source src="https://cdn.jsdelivr.net/gh/surveydown-dev/template_conditional_skipping@main/video-recording.mp4#t=0.1" type="video/mp4">
+</video>
 
-:::
+## Learn more
 
-<div class="template-iframe-container">
-<iframe src="https://surveydown.shinyapps.io/conditional_skipping/" class="template-iframe"></iframe>
-</div>
+- [Conditional logic: conditional skipping](/docs/conditional-logic.html#conditional-skipping)
+- [Start with a template](/docs/getting-started.html#start-with-a-template)

templates/conditional_stopping.qmd

@@ -1,12 +1,16 @@
 ---
 title: "Conditional Stopping"
 date: 2025-01-05
-categories: [Conditions]
+categories: [Conditions, Live Demo]
 image: banners/conditional_stopping.png
 description: "A template for [conditional stopping](/docs/conditional-logic.html#conditional-stopping)."
 ---
 
-To create this template, run this command in your R console:
+<div id="template-links" data-repo="https://github.com/surveydown-dev/template_conditional_stopping" data-demo="https://surveydown-conditional-stopping.share.connect.posit.cloud" hidden></div>
+
+## Create this template
+
+Run this command in your R console:
 
 ```{r}
 surveydown::sd_create_survey(
@@ -15,16 +19,13 @@ surveydown::sd_create_survey(
 )
 ```
 
-Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details.
-
-::: {.d-flex .justify-content-center .flex-wrap .text-center}
-
-[<i class="fas fa-external-link-alt"></i> Open in New Tab](https://surveydown2.shinyapps.io/conditional_stopping/){.template-button .m-1 style="width: 200px;"}
+## Video Walkthrough
 
-[<i class="fab fa-github"></i> GitHub Repo](https://github.com/surveydown-dev/template_conditional_stopping){.template-button .m-1 style="width: 200px;"}
+<video class="template-video" controls preload="metadata">
+  <source src="https://cdn.jsdelivr.net/gh/surveydown-dev/template_conditional_stopping@main/video-recording.mp4#t=0.1" type="video/mp4">
+</video>
 
-:::
+## Learn more
 
-<div class="template-iframe-container">
-<iframe src="https://surveydown2.shinyapps.io/conditional_stopping/" class="template-iframe"></iframe>
-</div>
+- [Conditional logic: conditional stopping](/docs/conditional-logic.html#conditional-stopping)
+- [Start with a template](/docs/getting-started.html#start-with-a-template)

templates/conjoint_buttons.qmd

@@ -6,7 +6,11 @@ image: banners/conjoint_buttons.png
 description: "A conjoint survey template with options shown in buttons."
 ---
 
-To create this template, run this command in your R console:
+<div id="template-links" data-repo="https://github.com/surveydown-dev/template_conjoint_buttons" hidden></div>
+
+## Create this template
+
+Run this command in your R console:
 
 ```{r}
 surveydown::sd_create_survey(
@@ -15,16 +19,12 @@ surveydown::sd_create_survey(
 )
 ```
 
-Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details.
-
-::: {.d-flex .justify-content-center .flex-wrap .text-center}
-
-[<i class="fas fa-external-link-alt"></i> Open in New Tab](https://surveydown3.shinyapps.io/conjoint_buttons/){.template-button .m-1 style="width: 200px;"}
+## Video Walkthrough
 
-[<i class="fab fa-github"></i> GitHub Repo](https://github.com/surveydown-dev/template_conjoint_buttons){.template-button .m-1 style="width: 200px;"}
+<video class="template-video" controls preload="metadata">
+  <source src="https://cdn.jsdelivr.net/gh/surveydown-dev/template_conjoint_buttons@main/video-recording.mp4#t=0.1" type="video/mp4">
+</video>
 
-:::
+## Learn more
 
-<div class="template-iframe-container">
-<iframe src="https://surveydown3.shinyapps.io/conjoint_buttons/" class="template-iframe"></iframe>
-</div>
+- [Start with a template](/docs/getting-started.html#start-with-a-template)