feat: Enhanced pipeline example with educational text markers #425
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Configure comprehensive style overrides to match site's clean, minimal aesthetic - Use pure white backgrounds and site's CSS variables (--nextflow-green colors) - Set proper text marker highlighting with site's light green accent color - Remove frame titles and switch to 'nextflow' language for syntax highlighting - Maintain advanced highlighting functionality while achieving visual integration - Result: Code blocks now blend seamlessly with site design while providing enhanced educational features The example pages now have clean, professional code blocks that match the site's design system perfectly, with clearly visible line highlighting using the site's signature green color scheme.
- Create separate ec.config.mjs for Expressive Code plugin configuration - Install @expressive-code/plugin-line-numbers plugin - Enable line numbers by default with showLineNumbers: true - Set optimal font size (1.5rem/24px) for better code readability - Simplify astro.config.mjs to use basic expressiveCode() integration - Maintain all existing styling and text marker functionality - Fix MDX Code component compatibility with plugin-based configuration - Support external file imports with ?raw suffix for clean separation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Restructure pipeline examples from flat files to organized subdirectories under /examples/, with colocated docs and code files. - Move examples.astro → examples/index.astro - Create subdirs: basic-pipeline/, blast-pipeline/, rna-seq-pipeline/, machine-learning-pipeline/, mixing-scripting-languages/ - Extract embedded Nextflow code from .md to separate main.nf files - Convert .md to .mdx with Expressive Code imports - Clean URLs without trailing slashes (/examples/basic-pipeline) - Update all navigation and links to new structure - Fix active page highlighting in side navigation - Add backward compatibility redirects Better organization, consistent patterns, maintainable structure.
- Configure codePaddingInline: 3rem in ec.config.mjs to provide space for labels - Add working text markers to basic-pipeline example with numbered labels - Remove unused custom CodeBlock components and CSS - Update example imports to use _main.nf files (fixes Astro warnings) - Clean up ExampleLayout to remove unused CSS imports The text markers now display correctly with labels in the left margin, highlighting key sections: shebang, params, processes, and workflow.
Removes the overly broad .code-examples pre margin rule that was creating gaps between Expressive Code component headers and content.
- Increase code font size to 1.5rem for better readability - Use site's color variables for text markers and focus states - Clean, minimal frame styling matching site containers - Remove shadows and heavy styling for cleaner appearance - Disable copy button and ensure line numbers are enabled
Move inline terminal output template literal to a reusable terminalOutput constant for better code organization.
- Create sample FASTA input data for basic pipeline example - Generate actual pipeline execution output in _nextflow_run_output.log - Update index.mdx to import real terminal output instead of hardcoded - Add comprehensive _README.md explaining examples directory structure and conventions
- Fix ANSI escape sequences to use actual binary characters instead of text representations - Use printf to generate proper escape sequences that render with lang="ansi" - Update README with comprehensive ANSI color support documentation - Terminal output now displays authentic Nextflow colors (green header, colored hashes, success indicators)
- Increase UI font size to 1.2rem for more prominent frame titles - Reduce code font size to 1.25rem for better balance and readability - Creates better visual hierarchy between headers and code content
- Add empty lines in strategic positions for label placement - Implement working labeled text markers for key pipeline components - Add custom CSS styling for labels with green background and dark text - Clean structure highlights shebang, parameters, processes, and workflow feat: Improve text markers with detailed educational labels - Replace shebang marker with more focused dataflow concepts - Add descriptive labels explaining key Nextflow paradigms - Target strategic lines that demonstrate core concepts: - Pipeline parameters for configurability - Process definitions for computational steps - Parallel processing for independent execution - Data input patterns - Dataflow programming with pipe operators 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add required script: labels to both processes to fix linting errors
- Improve string interpolation with proper ${} syntax
- Clean up indentation and remove unnecessary backslashes
- Format workflow pipe operators for better readability
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
fix: Add script labels and improve Nextflow code formatting
- Add required script: labels to both processes to fix linting errors
- Improve string interpolation with proper curly brace syntax
- Clean up indentation and remove unnecessary backslashes
- Format workflow pipe operators for better readability
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove .nextflow logs and runtime directories - Clean up work directory and lineage files - Remove development artifacts like playwright cache 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
❌ Deploy Preview for nextflow-staging failed. Why did it fail? →
|
- Add lineMarkerLabelColor: #0dc09d to textMarkers config - Ensures label styling uses the site's bright green color - Improves visibility and consistency with design system 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
edmundmiller
force-pushed
the
examples-update-workflow
branch
from
6ccd5ce to
8d3eced
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Enhanced the basic pipeline example with educational text markers and improved styling.
Note: This is a stacked PR on top of previous Expressive Code implementations.
Changes
🤖 Generated with Claude Code