Add example projects and manifest entries for remaining PR #1815 screenshots

cderv · cderv · commit da15b6e21091 · 2026-03-06T20:48:14.000+01:00
Refactor about-pages to use Quarto profiles (one shared about.qmd,
five _quarto-&lt;template&gt;.yml configs). Add sidebar-tools and myblog
example projects. Add manifest entries for about-trestles, about-solana,
about-marquee, about-broadside, sidebar-tools, and myblog.
diff --git a/tools/screenshots/examples/about-pages/_quarto-broadside.yml b/tools/screenshots/examples/about-pages/_quarto-broadside.yml
@@ -0,0 +1,2 @@
+about:
+  template: broadside
diff --git a/tools/screenshots/examples/about-pages/_quarto-jolla.yml b/tools/screenshots/examples/about-pages/_quarto-jolla.yml
@@ -0,0 +1,2 @@
+about:
+  template: jolla
diff --git a/tools/screenshots/examples/about-pages/_quarto-marquee.yml b/tools/screenshots/examples/about-pages/_quarto-marquee.yml
@@ -0,0 +1,2 @@
+about:
+  template: marquee
diff --git a/tools/screenshots/examples/about-pages/_quarto-solana.yml b/tools/screenshots/examples/about-pages/_quarto-solana.yml
@@ -0,0 +1,2 @@
+about:
+  template: solana
diff --git a/tools/screenshots/examples/about-pages/_quarto-trestles.yml b/tools/screenshots/examples/about-pages/_quarto-trestles.yml
@@ -0,0 +1,2 @@
+about:
+  template: trestles
diff --git a/tools/screenshots/examples/about-pages/_quarto.yml b/tools/screenshots/examples/about-pages/_quarto.yml
@@ -1,8 +1,7 @@
 project:
   type: website
   render:
-    - index.qmd
-    - jolla.qmd
+    - about.qmd
 
 website:
   title: "About Pages"
diff --git a/tools/screenshots/examples/about-pages/about.qmd b/tools/screenshots/examples/about-pages/about.qmd
@@ -0,0 +1,29 @@
+---
+title: "Finley Malloc"
+image: profile.jpg
+about:
+  template: jolla
+  links:
+    - icon: bluesky
+      text: Bluesky
+      href: https://bsky.app
+    - icon: github
+      text: Github
+      href: https://github.com
+---
+
+Finley Malloc is the Chief Data Scientist at Wengo Analytics. When not innovating on data platforms, Finley enjoys spending time unicycling and playing with her pet iguana.
+
+## Education
+
+University of California, San Diego | San Diego, CA
+PhD in Mathematics | Sept 2011 - June 2015
+
+Macalester College | St. Paul, MN
+B.A in Economics | Sept 2007 - June 2011
+
+## Experience
+
+Wengo Analytics | Head Data Scientist | April 2018 - present
+
+GeoScynce | Chief Analyst | Sept 2012 - April 2018
diff --git a/tools/screenshots/examples/myblog/.gitignore b/tools/screenshots/examples/myblog/.gitignore
@@ -0,0 +1,2 @@
+/.quarto/
+**/*.quarto_ipynb
diff --git a/tools/screenshots/examples/myblog/_quarto.yml b/tools/screenshots/examples/myblog/_quarto.yml
@@ -0,0 +1,23 @@
+project:
+  type: website
+  render:
+    - index.qmd
+    - about.qmd
+    - posts/first-post/index.qmd
+    - posts/welcome/index.qmd
+
+format:
+  html:
+    theme:
+      light: cosmo
+      dark: darkly
+
+website:
+  title: "myblog"
+  navbar:
+    right:
+      - about.qmd
+      - icon: github
+        href: https://github.com
+      - icon: bluesky
+        href: https://bsky.app
diff --git a/tools/screenshots/examples/myblog/about.qmd b/tools/screenshots/examples/myblog/about.qmd
@@ -0,0 +1,5 @@
+---
+title: "About"
+---
+
+About this blog.
diff --git a/tools/screenshots/examples/myblog/index.qmd b/tools/screenshots/examples/myblog/index.qmd
@@ -0,0 +1,8 @@
+---
+title: "myblog"
+listing:
+  contents: posts
+  sort: "date desc"
+  type: default
+  categories: true
+---
diff --git a/tools/screenshots/examples/myblog/posts/first-post/index.qmd b/tools/screenshots/examples/myblog/posts/first-post/index.qmd
@@ -0,0 +1,8 @@
+---
+title: "Post With Code"
+author: "Finley Malloc"
+date: "2024-09-10"
+categories: [news, code, analysis]
+---
+
+A short post with some content to demonstrate the blog listing.
diff --git a/tools/screenshots/examples/myblog/posts/welcome/index.qmd b/tools/screenshots/examples/myblog/posts/welcome/index.qmd
@@ -0,0 +1,8 @@
+---
+title: "Welcome To My Blog"
+author: "Finley Malloc"
+date: "2024-09-12"
+categories: [news]
+---
+
+This is the first post in a Quarto blog. Welcome!
diff --git a/tools/screenshots/examples/sidebar-tools/.gitignore b/tools/screenshots/examples/sidebar-tools/.gitignore
@@ -0,0 +1,2 @@
+/.quarto/
+**/*.quarto_ipynb
diff --git a/tools/screenshots/examples/sidebar-tools/_quarto.yml b/tools/screenshots/examples/sidebar-tools/_quarto.yml
@@ -0,0 +1,28 @@
+project:
+  type: website
+  render:
+    - index.qmd
+
+format:
+  html:
+    theme:
+      light: cosmo
+      dark: darkly
+
+website:
+  title: "ProjectX"
+  sidebar:
+    contents:
+      - text: Overview
+        href: "#"
+      - text: Getting Started
+        href: "#"
+    tools:
+      - icon: bluesky
+        href: https://bsky.app
+      - icon: github
+        menu:
+          - text: Source Code
+            href: https://code.com
+          - text: Report a Bug
+            href: https://bugs.com
diff --git a/tools/screenshots/examples/sidebar-tools/index.qmd b/tools/screenshots/examples/sidebar-tools/index.qmd
@@ -0,0 +1,5 @@
+---
+title: "ProjectX Overview"
+---
+
+ProjectX is a data science toolkit for collaborative research.
diff --git a/tools/screenshots/manifest.json b/tools/screenshots/manifest.json
@@ -18,16 +18,72 @@
       "name": "about-jolla",
       "output": "docs/websites/images/about-jolla.png",
       "dark": true,
-      "source": { "type": "example", "project": "examples/about-pages", "page": "jolla.html" },
+      "source": { "type": "example", "project": "examples/about-pages", "profile": "jolla", "page": "about.html" },
       "capture": {
-        "viewport": { "width": 1200, "height": 650 },
+        "viewport": { "width": 1200, "height": 900 },
         "clip": [".quarto-about-jolla"]
       },
       "doc": {
         "file": "docs/websites/website-about.qmd",
         "alt": "Screenshot of an About page using the jolla template. It has a round headshot of the author in the center with the name, a description, and icons for Email, Bluesky, GitHub below."
       }
     },
+    {
+      "name": "about-trestles",
+      "output": "docs/websites/images/about-trestles.png",
+      "dark": true,
+      "source": { "type": "example", "project": "examples/about-pages", "profile": "trestles", "page": "about.html" },
+      "capture": {
+        "viewport": { "width": 1200, "height": 900 },
+        "clip": [".quarto-about-trestles"]
+      },
+      "doc": {
+        "file": "docs/websites/website-about.qmd",
+        "alt": "Screenshot of an About page using the trestles template. It has a headshot of the author and links on the left and the body of the about page on the right."
+      }
+    },
+    {
+      "name": "about-solana",
+      "output": "docs/websites/images/about-solana.png",
+      "dark": true,
+      "source": { "type": "example", "project": "examples/about-pages", "profile": "solana", "page": "about.html" },
+      "capture": {
+        "viewport": { "width": 1200, "height": 900 },
+        "clip": [".quarto-about-solana"]
+      },
+      "doc": {
+        "file": "docs/websites/website-about.qmd",
+        "alt": "Screenshot of an About page using the solana template. It has the author name, links, and body on the left and a rectangular headshot on the right."
+      }
+    },
+    {
+      "name": "about-marquee",
+      "output": "docs/websites/images/about-marquee.png",
+      "dark": true,
+      "source": { "type": "example", "project": "examples/about-pages", "profile": "marquee", "page": "about.html" },
+      "capture": {
+        "viewport": { "width": 1200, "height": 900 },
+        "clip": [".quarto-about-marquee"]
+      },
+      "doc": {
+        "file": "docs/websites/website-about.qmd",
+        "alt": "Screenshot of an About page using the marquee template. It has a large image at the top, followed by the author name, body, and links below."
+      }
+    },
+    {
+      "name": "about-broadside",
+      "output": "docs/websites/images/about-broadside.png",
+      "dark": true,
+      "source": { "type": "example", "project": "examples/about-pages", "profile": "broadside", "page": "about.html" },
+      "capture": {
+        "viewport": { "width": 1200, "height": 900 },
+        "clip": [".quarto-about-broadside"]
+      },
+      "doc": {
+        "file": "docs/websites/website-about.qmd",
+        "alt": "Screenshot of an About page using the broadside template. It has the author image on the left and the name, body, and links on the right."
+      }
+    },
     {
       "name": "navbar-tools",
       "output": "docs/websites/images/navbar-tools.png",
@@ -44,6 +100,36 @@
         "file": "docs/websites/website-navigation.qmd",
         "alt": "The right section of a Quarto navbar containing a Bluesky and Github logo. The Github logo is selected and a menu is underneath it with two items: 'Source Code' and 'Report a Bug'"
       }
+    },
+    {
+      "name": "sidebar-tools",
+      "output": "docs/websites/images/tools.png",
+      "dark": true,
+      "source": { "type": "example", "project": "examples/sidebar-tools", "page": "index.html" },
+      "capture": {
+        "viewport": { "width": 400, "height": 300 },
+        "interaction": [
+          { "action": "click", "selector": ".bi-github", "wait": ".dropdown-menu.show" }
+        ],
+        "clip": [".sidebar-tools-main", ".dropdown-menu.show"]
+      },
+      "doc": {
+        "file": "docs/websites/website-navigation.qmd",
+        "alt": "The bottom of a Quarto sidebar containing a Bluesky and Github logo. The Github logo is selected and a menu is underneath it with two items: 'Source Code' and 'Report a Bug'"
+      }
+    },
+    {
+      "name": "myblog",
+      "output": "docs/websites/images/myblog.png",
+      "dark": true,
+      "source": { "type": "example", "project": "examples/myblog", "page": "index.html" },
+      "capture": {
+        "viewport": { "width": 1440, "height": 900 }
+      },
+      "doc": {
+        "file": "docs/websites/website-blog.qmd",
+        "alt": "Screenshot of a blog listing page with a navbar showing the blog name, About link, GitHub and Bluesky icons, and two blog posts with categories."
+      }
     }
   ]
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +title: "About"
 +---
++
 +About this blog.