enhancement(docs): Improve landing page experience #398
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
- Create new AnimatedConsole.astro component with typing animation - Display actual pathfinder scan output with command and results - Start with command being typed, then stream output quickly - Use terminal-style colors (Catppuccin-inspired) - Remove borders for authentic terminal experience - Add blinking cursor that disappears when animation completes - Use IntersectionObserver to trigger animation on scroll - Update index.mdx to use AnimatedConsole instead of static code block 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Update command to use rules directory instead of specific file - Apply critical-label color to entire heading line (through A03:2021) - Adjust code color to lighter shade for better readability - Improve spacing: larger padding (28px 32px), wider container (920px) - Increase font size to 14px and line height to 1.6 - Enhance border radius to 12px for smoother appearance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add proper line break after command execution - Improve visual separation between input and output sections 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Set max-height to 500px with vertical scrolling - Auto-scroll to bottom as animation progresses - Creates a more compact, terminal-like experience 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Animation restarts automatically after completion - 5-second pause between loops - Clears output and scrolls to top before restarting - Creates continuous demo effect for homepage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add terminal header with red, yellow, green buttons (macOS style) - Set fixed height of 500px for terminal container - Terminal body uses flexbox to fill remaining space - Content scrolls within fixed terminal window - More authentic macOS terminal appearance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Reduce line-height from 1.6 to 1.4 for tighter vertical spacing - Fix command-output alignment with proper line breaks - Speed up animation: char delays reduced to 1-3ms (from 3-8ms) - Reduce section pauses to 50ms (from 100-200ms) - Faster, more natural terminal output experience 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
SafeDep Report Summary
No dependency changes detected. Nothing to scan. This report is generated by SafeDep Github App |
shivasurya
added
enhancement
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #398 +/- ##
=======================================
Coverage 80.70% 80.70%
=======================================
Files 77 77
Lines 7736 7736
=======================================
Hits 6243 6243
Misses 1248 1248
Partials 245 245 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- Create pool of 10 different vulnerability types - Randomly select 2 vulnerabilities each animation loop - Update project name to flask_webapp (clearer than python_cpf_app) - Update rules to owasp_ruleset (clearer than cpf_rules) - Green color for rule names for better visual hierarchy - Reduced line-height to 1.25 for tighter spacing - Faster animation (1ms delays for most content) - Added left margin to scan output only
shivasurya
force-pushed
the
feat/animated-console-output
branch
from
6fad2c8 to
a777f05
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
Replace static code block on documentation homepage with dynamic animated terminal console showing realistic Code Pathfinder security scan output.
Changes
AnimatedConsole.astrocomponent with character-by-character typing animationflask_webappproject withowasp_rulesetrulesVisual Improvements
Test Plan
🤖 Generated with Claude Code