changes for truncating cards on the workflow cards

Author: JohnWeidner

.claude/settings.json

@@ -18,7 +18,10 @@
       "Bash(pkill -f build_daemon)",
       "Bash(pkill -f dart.*build_runner)",
       "Bash(curl -s http://localhost:4000/docs/overview/)",
-      "mcp__plugin_wingspan_dart__dart_fix"
+      "mcp__plugin_wingspan_dart__dart_fix",
+      "Bash(node capture.js --url=\"http://localhost:4000/docs/workflows\" --name=\"docs-workflows\" --width=1200)",
+      "Bash(node capture.mjs --url=\"http://localhost:3000/docs/workflows\" --name=\"docs-workflows\" --width=1200)",
+      "Bash(node capture.mjs --url=\"http://localhost:4000/docs/workflows\" --name=\"docs-workflows\" --width=1200)"
     ]
   }
 }

JASPR_MIGRATION.md

@@ -0,0 +1,70 @@
+# Migrating from Docusaurus to Jaspr
+
+## 1. Scaffold the Jaspr project
+
+```bash
+dart pub global activate jaspr_cli
+jaspr create --template=docs site_jaspr
+```
+
+This gives you a Jaspr static site pre-configured with `jaspr_content`, which includes a `DocsLayout` with sidebar, header, dark/light mode, markdown parsing, and syntax highlighting out of the box.
+
+## 2. Migrate your content
+
+Your current docs are 10 Markdown files in `site/docs/` with YAML frontmatter (`sidebar_position`, `title`, `description`). These can largely be copied over as-is -- `jaspr_content` uses a `FilesystemLoader` that reads `.md` files from a content directory and supports frontmatter.
+
+The current sidebar is auto-generated from the filesystem in Docusaurus. In Jaspr, the sidebar is defined explicitly in Dart code:
+
+```dart
+sidebar: Sidebar(groups: [
+  SidebarGroup(links: [
+    SidebarLink(text: 'Overview', href: '/'),
+  ]),
+  SidebarGroup(title: 'Workflows', links: [
+    SidebarLink(text: 'Dart Package', href: '/workflows/dart_package'),
+    SidebarLink(text: 'Flutter Package', href: '/workflows/flutter_package'),
+    // ... etc
+  ]),
+]),
+```
+
+## 3. Recreate the custom homepage
+
+The current homepage (`site/src/pages/index.tsx`) is a custom React component with a hero banner, CTA button, and blog section. In Jaspr, you'd build this as a `StatelessComponent` using Jaspr's HTML element functions (`div`, `a`, `img`, etc.) with typed `Styles` for CSS.
+
+## 4. Migrate theming
+
+The custom CSS (`site/src/css/custom.css`) defines brand colors, Poppins font, and dark mode overrides. In Jaspr, theming is done via `ContentTheme`:
+
+```dart
+theme: ContentTheme(
+  primary: ThemeColor(Color('#2a48df'), dark: Color('#66fbd1')),
+  background: ThemeColor(Colors.white, dark: Color('#0b0d0e')),
+),
+```
+
+## 5. Update the deployment workflow
+
+Replace the Node/Docusaurus build steps in `.github/workflows/site_deploy.yaml` with Dart/Jaspr:
+
+```yaml
+- uses: dart-lang/setup-dart@v1
+- run: dart pub global activate jaspr_cli
+- run: jaspr build
+# Output goes to build/jaspr/ instead of site/build/
+```
+
+## Key differences to be aware of
+
+| Aspect | Docusaurus (current) | Jaspr |
+|---|---|---|
+| Sidebar | Auto-generated from filesystem | Manual definition in Dart |
+| Custom pages | React/TSX components | Dart `StatelessComponent` |
+| Styling | CSS/CSS Modules | Typed `Styles` in Dart + optional CSS |
+| Markdown extensions | MDX (JSX in Markdown) | Custom components registered in Dart |
+| Search | Algolia integration available | No built-in search |
+| Docs versioning | Built-in | Not available |
+
+## Tradeoffs
+
+The main benefit is staying entirely within the Dart ecosystem. The main costs are losing Docusaurus's auto-generated sidebar, built-in search integration, and the broader plugin ecosystem. The site is relatively straightforward (10 doc pages, one custom homepage), so the migration scope is manageable.

site_jaspr/content/docs/workflows.md

@@ -10,38 +10,38 @@ Learn about all of the workflows that Very Good Workflows supports.
 <div class="workflow-cards">
   <a class="workflow-card" href="/docs/workflows/dart_package">
     <h3>📄 Dart Package</h3>
-    <p>This workflow runs helpful checks on ...</p>
+    <p>This workflow runs helpful checks on a Dart package according to the steps below. As with any workflow, it can be customized.</p>
   </a>
   <a class="workflow-card" href="/docs/workflows/dart_pub_publish">
     <h3>📄 Dart Pub Publish</h3>
-    <p>We use this workflow to publish a Da...</p>
+    <p>We use this workflow to publish a Dart package to pub.dev.</p>
   </a>
   <a class="workflow-card" href="/docs/workflows/flutter_package">
     <h3>📄 Flutter Package</h3>
-    <p>This workflow runs helpful checks on ...</p>
+    <p>This workflow runs helpful checks on a Flutter package according to the steps below. As with any workflow, it can be customized.</p>
   </a>
   <a class="workflow-card" href="/docs/workflows/flutter_pub_publish">
     <h3>📄 Flutter Pub Publish</h3>
-    <p>We use this workflow to publish a Flu...</p>
+    <p>We use this workflow to publish a Flutter package to pub.dev.</p>
   </a>
   <a class="workflow-card" href="/docs/workflows/license_check">
     <h3>📄 License Check</h3>
-    <p>At VGV, we keep track of the rights a...</p>
+    <p>At VGV, we keep track of the rights and restrictions external dependencies might impose on Dart or Flutter projects.</p>
   </a>
   <a class="workflow-card" href="/docs/workflows/mason_publish">
     <h3>📄 Mason Publish</h3>
-    <p>We use this workflow to publish a bri...</p>
+    <p>We use this workflow to publish a brick to brickhub.dev.</p>
   </a>
   <a class="workflow-card" href="/docs/workflows/pana">
     <h3>📄 Pana</h3>
-    <p>We use the Dart tool pana to validat...</p>
+    <p>We use the Dart tool pana to validate that your pub score will be the max possible score before publishing a package to pub.dev.</p>
   </a>
   <a class="workflow-card" href="/docs/workflows/semantic_pull_request">
     <h3>📄 Semantic Pull Request</h3>
-    <p>At VGV, we use conventional commit...</p>
+    <p>At VGV, we use conventional commits. This way, our commit history is clean and useful when we squash and merge — we can easily see the type and brief description of each PR.</p>
   </a>
   <a class="workflow-card" href="/docs/workflows/spell_check">
     <h3>📄 Spell Check</h3>
-    <p>We use cspell for basic spell check o...</p>
+    <p>We use cspell for basic spell check on our projects.</p>
   </a>
 </div>

site_jaspr/lib/styles/site_styles.dart

@@ -282,11 +282,11 @@ List<StyleRule> get siteStyles => [
   // 9. CONTENT AREA LINKS
   //    Primary color, no underline; underline on hover (matching original).
   // ───────────────────────────────────────────────────────────────────────
-  css('.content-container a:not(.breadcrumb-link)').styles(
+  css('.content-container a:not(.breadcrumb-link):not(.workflow-card)').styles(
     color: Color('var(--content-links)'),
     textDecoration: TextDecoration.none,
   ),
-  css('.content-container a:not(.breadcrumb-link):hover').styles(
+  css('.content-container a:not(.breadcrumb-link):not(.workflow-card):hover').styles(
     textDecoration: TextDecoration(line: TextDecorationLine.underline),
   ),
   // Callout links: inherit foreground color + always underlined (Infima alert behavior).
@@ -536,18 +536,28 @@ List<StyleRule> get siteStyles => [
       },
     ),
     css('&:hover').styles(
-      raw: {'border-color': '#2a48df', 'text-decoration': 'none'},
+      textDecoration: TextDecoration.none,
+      raw: {'border-color': '#2a48df'},
     ),
     css('h3').styles(
       margin: Margin.only(bottom: 0.25.rem),
       fontSize: 1.25.rem,
       fontWeight: FontWeight.w700,
+      textDecoration: TextDecoration.none,
       raw: {'margin-top': '0'},
     ),
     css('p').styles(
       margin: Margin.zero,
       opacity: 0.6,
+      overflow: Overflow.hidden,
+      color: Color('#000000'),
       fontSize: 0.875.rem,
+      textDecoration: TextDecoration.none,
+      raw: {
+        'display': '-webkit-box',
+        '-webkit-line-clamp': '2',
+        '-webkit-box-orient': 'vertical',
+      },
     ),
   ]),
   // Dark mode workflow cards
@@ -557,6 +567,9 @@ List<StyleRule> get siteStyles => [
       'border-color': '#444950',
     },
   ),
+  css('[data-theme="dark"] .workflow-card p').styles(
+    color: Color('#ffffff'),
+  ),
   css('[data-theme="dark"] .workflow-card:hover').styles(
     raw: {'border-color': '#66fbd1'},
   ),