Skip to content

Replaced the docs hero with a value-led marketing diagram and narrowed demo videos to 80 columns.#2769

Merged
AlexSkrypnyk merged 2 commits into
mainfrom
feature/diagram-hero
Jul 5, 2026
Merged

Replaced the docs hero with a value-led marketing diagram and narrowed demo videos to 80 columns.#2769
AlexSkrypnyk merged 2 commits into
mainfrom
feature/diagram-hero

Conversation

@AlexSkrypnyk

@AlexSkrypnyk AlexSkrypnyk commented Jul 5, 2026

Copy link
Copy Markdown
Member

Summary

Replaces the docs and README hero image with a value-led marketing diagram that communicates what Vortex offers (standardize every project, set up in minutes, effortless upgrades, centralized documentation) instead of showing internal system architecture, and keeps the former technical diagram available under new filenames linked from the Architecture page. Because the hero file also drives the site-wide og:image, social-share previews of the docs site (LinkedIn, Slack, etc.) will show the new marketing diagram once this is deployed. Separately, all six terminal demo videos are re-recorded at 80 columns (down from 140) so they read more legibly on docs pages and on mobile.

Changes

New marketing hero (.vortex/docs/static/img/)

  • diagram-dark.png and diagram-light.png (2880x1800) now render a value-proposition diagram: eyebrow "One foundation for every project", headline "Install once. Stay current for years.", four value cards (Standardize every Drupal project / Set up in minutes / Effortless upgrades / Centralized documentation), a trust bar (AI-agent ready, Free & open source, A tested toolchain, A new release every month), and a footer about portfolio consistency.
  • Adds diagram.html, the self-contained source used to render both PNGs - open the file for the dark variant, append #light to the URL for the light variant, and screenshot at 2x per the file's own header comment.

Preserved technical diagram

  • The original "System components" diagram is kept, moved to the new filenames diagram-components-dark.png and diagram-components-light.png.
  • .vortex/docs/content/architecture.mdx repoints its <img> sources to those new filenames so the Architecture page still shows the technical diagram.

Social-share side effect

  • .vortex/docs/docusaurus.config.js already sets the site-wide image: 'img/diagram-dark.png' used for og:image link previews - no code change was required, but this PR changes what that file contains, so previews now surface the new marketing diagram instead of the old technical one.

Demo video terminal width (.vortex/docs/.utils/update-videos.php)

  • Narrows cols from 140 to 80 for all six recordings (installer, build, provision, lint, test, test-bdd).
  • Regenerates all eighteen recording assets (the .json asciicast, .svg, and .png poster for each of the six videos) at the new width.

Screenshots

New docs hero diagram

The six demo-video poster frames were also regenerated at the new 80-column width - see the .png files under .vortex/docs/static/img/ in the diff.

Before / After

Docs hero (.vortex/docs/static/img/diagram-{dark,light}.png)

  Before                                       After
  ──────────────────────────────────────       ──────────────────────────────────────
  "System components" technical diagram        Value-prop marketing diagram (eyebrow +
  (architecture callouts)                       headline + 4 value cards + trust bar +
                                                 footer)
         │                                             │
         ▼                                             ▼
  docusaurus.config.js og:image          ───►   same file now shows the new
  (img/diagram-dark.png)                         marketing diagram in link previews

  Technical diagram preserved as:
  diagram-components-{dark,light}.png    ◄───   linked from architecture.mdx

Demo-video terminal width (.utils/update-videos.php)

  Before: cols = 140                            After: cols = 80
  wide, cramped on docs pages / mobile           narrow, legible on docs pages / mobile

  installer, build, provision, lint, test, test-bdd  -->  all 6 re-recorded

Summary by CodeRabbit

  • New Features
    • Added a new standalone diagram page for the docs, with built-in light/dark theme switching and a polished layout.
  • Documentation
    • Updated architecture docs to use the latest component diagram images.
  • Chores
    • Refreshed several recorded demo and test artifacts so the displayed terminal captures match the latest runs and timings.
    • Standardized some recorded output dimensions for better consistency in generated media.

The README and social preview image now use a value and outcome-led hero. The architecture page keeps its original 'system components' diagram, restored under 'diagram-components-dark.png' and 'diagram-components-light.png'. The self-contained HTML source lives at '.vortex/docs/static/img/diagram.html' for future edits.
@coderabbitai

coderabbitai Bot commented Jul 5, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

This PR reduces terminal recording width from 140 to 80 columns for build, provision, lint, test, and test-bdd videos, regenerates the corresponding static JSON transcripts, updates architecture diagram image references, and adds a new standalone diagram.html page with theme toggling.

Changes

Docs assets and recording width update

Layer / File(s) Summary
Video recording width configuration
.vortex/docs/.utils/update-videos.php
Reduces cols from 140 to 80 for build, provision, lint, test, and test-bdd video entries.
Regenerated console transcript artifacts
.vortex/docs/static/img/lint.json, provision.json, test.json, test-bdd.json
Regenerates recorded metadata, timestamps, and output content reflecting the new 80-column width and new run timings.
Architecture diagram assets and new HTML page
.vortex/docs/content/architecture.mdx, .vortex/docs/static/img/diagram.html
Updates dark/light diagram image sources to new component PNG files and adds a new self-contained diagram HTML page with inline styles, SVG mark, feature cards, trust bar, and a light/dark theme toggle script.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

  • drevops/vortex#2525: Introduces the video orchestrator/recorder pipeline that generates the same demo recordings whose width and transcripts this PR updates.
  • drevops/vortex#2753: Also regenerates the same set of demo-video JSON artifacts (lint, provision, test, test-bdd).

Suggested labels: Needs review

Poem

A rabbit tweaked the terminal's frame,
Eighty columns, trim and tame,
New diagrams glow, dark and light,
Transcripts refreshed, timings just right,
Hop along, docs looking fine! 🐇✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the two main changes: the new marketing hero diagram and the 80-column demo video refresh.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/diagram-hero

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Biome (2.5.1)
.vortex/docs/static/img/lint.json

File contains syntax errors that prevent linting: Line 2: End of file expected; Line 3: End of file expected; Line 4: End of file expected; Line 5: End of file expected; Line 6: End of file expected; Line 7: End of file expected; Line 8: End of file expected; Line 9: End of file expected; Line 10: End of file expected; Line 11: End of file expected; Line 12: End of file expected; Line 13: End of file expected; Line 14: End of file expected; Line 15: End of file expected; Line 16: End of file expected; Line 17: End of file expected; Line 18: End of file expected; Line 19: End of file expected; Line 20: End of file expected; Line 21: End of file expected; Line 22: End of file expected; Line 23: End of file expected; Line 24: End of file expected; Line 25: End of file expected; Line 26: End of file expected; Line 27: End of file expected; Line 28: End of file expected; Line 29: End of file expected; Line 30: End of file expected; Line 31: End of file expected; Line 32: End of file expected; Line 33: End of file expected; Line 34: End of file expected; Line 35: End of file expected; Line 36: End of file expected; Line 37: End of file expected; Line 38: End of file expected; Line 39: End of file expected; Line 40: End of file expected; Line 41: End of file expected; Line 42: End of file expected; Line 43: End of file expected; Line 44: End of file expected; Line 45: End of file expected; Line 46: End of file expected; Line 47: End of file expected; Line 48: End of file expected; Line 49: End of file expected; Line 50: End of file expected; Line 51: End of file expected; Line 52: End of file expected; Line 53: End of file expected; Line 54: End of file expected; Line 55: End of file expected; Line 56: End of file expected; Line 57: End of file expected

.vortex/docs/static/img/provision.json

File contains syntax errors that prevent linting: Line 2: End of file expected; Line 3: End of file expected; Line 4: End of file expected; Line 5: End of file expected; Line 6: End of file expected; Line 7: End of file expected; Line 8: End of file expected; Line 9: End of file expected; Line 10: End of file expected; Line 11: End of file expected; Line 12: End of file expected; Line 13: End of file expected; Line 14: End of file expected; Line 15: End of file expected; Line 16: End of file expected; Line 17: End of file expected; Line 18: End of file expected; Line 19: End of file expected; Line 20: End of file expected; Line 21: End of file expected; Line 22: End of file expected; Line 23: End of file expected; Line 24: End of file expected; Line 25: End of file expected; Line 26: End of file expected; Line 27: End of file expected; Line 28: End of file expected; Line 29: End of file expected; Line 30: End of file expected; Line 31: End of file expected; Line 32: End of file expecte

... [truncated 2782 characters] ...

; Line 122: End of file expected; Line 123: End of file expected; Line 124: End of file expected; Line 125: End of file expected; Line 126: End of file expected; Line 127: End of file expected; Line 128: End of file expected; Line 129: End of file expected; Line 130: End of file expected; Line 131: End of file expected; Line 132: End of file expected; Line 133: End of file expected; Line 134: End of file expected; Line 135: End of file expected; Line 136: End of file expected; Line 137: End of file expected; Line 138: End of file expected; Line 139: End of file expected; Line 140: End of file expected; Line 141: End of file expected; Line 142: End of file expected; Line 143: End of file expected; Line 144: End of file expected; Line 145: End of file expected; Line 146: End of file expected

.vortex/docs/static/img/test.json

File contains syntax errors that prevent linting: Line 2: End of file expected; Line 3: End of file expected; Line 4: End of file expected; Line 5: End of file expected; Line 6: End of file expected; Line 7: End of file expected; Line 8: End of file expected; Line 9: End of file expected; Line 10: End of file expected; Line 11: End of file expected; Line 12: End of file expected; Line 13: End of file expected; Line 14: End of file expected; Line 15: End of file expected; Line 16: End of file expected; Line 17: End of file expected; Line 18: End of file expected; Line 19: End of file expected; Line 20: End of file expected; Line 21: End of file expected; Line 22: End of file expected; Line 23: End of file expected; Line 24: End of file expected; Line 25: End of file expected; Line 26: End of file expected; Line 27: End of file expected; Line 28: End of file expected; Line 29: End of file expected; Line 30: End of file expected; Line 31: End of file expected; Line 32: End of file expecte

... [truncated 2814 characters] ...

; Line 123: End of file expected; Line 124: End of file expected; Line 125: End of file expected; Line 126: End of file expected; Line 127: End of file expected; Line 128: End of file expected; Line 129: End of file expected; Line 130: End of file expected; Line 131: End of file expected; Line 132: End of file expected; Line 133: End of file expected; Line 134: End of file expected; Line 135: End of file expected; Line 136: End of file expected; Line 137: End of file expected; Line 138: End of file expected; Line 139: End of file expected; Line 140: End of file expected; Line 141: End of file expected; Line 142: End of file expected; Line 143: End of file expected; Line 144: End of file expected; Line 145: End of file expected; Line 146: End of file expected; Line 147: End of file expected

  • 1 others

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.vortex/docs/static/img/diagram.html:
- Around line 100-108: The trust list in the diagram markup repeats the same
inline checkmark SVG in each .trust .item, making the source harder to maintain.
Refactor the repeated SVG in the diagram HTML by defining the checkmark once
with a reusable symbol/asset and referencing it from each item, so future icon
changes only need to be made in one place.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8dee9972-072e-4313-a34b-121332db24a0

📥 Commits

Reviewing files that changed from the base of the PR and between 31aa74c and ec9fc7d.

⛔ Files ignored due to path filters (16)
  • .vortex/docs/static/img/build.png is excluded by !**/*.png
  • .vortex/docs/static/img/build.svg is excluded by !**/*.svg
  • .vortex/docs/static/img/diagram-components-dark.png is excluded by !**/*.png
  • .vortex/docs/static/img/diagram-components-light.png is excluded by !**/*.png
  • .vortex/docs/static/img/diagram-dark.png is excluded by !**/*.png
  • .vortex/docs/static/img/diagram-light.png is excluded by !**/*.png
  • .vortex/docs/static/img/installer.png is excluded by !**/*.png
  • .vortex/docs/static/img/installer.svg is excluded by !**/*.svg
  • .vortex/docs/static/img/lint.png is excluded by !**/*.png
  • .vortex/docs/static/img/lint.svg is excluded by !**/*.svg
  • .vortex/docs/static/img/provision.png is excluded by !**/*.png
  • .vortex/docs/static/img/provision.svg is excluded by !**/*.svg
  • .vortex/docs/static/img/test-bdd.png is excluded by !**/*.png
  • .vortex/docs/static/img/test-bdd.svg is excluded by !**/*.svg
  • .vortex/docs/static/img/test.png is excluded by !**/*.png
  • .vortex/docs/static/img/test.svg is excluded by !**/*.svg
📒 Files selected for processing (9)
  • .vortex/docs/.utils/update-videos.php
  • .vortex/docs/content/architecture.mdx
  • .vortex/docs/static/img/build.json
  • .vortex/docs/static/img/diagram.html
  • .vortex/docs/static/img/installer.json
  • .vortex/docs/static/img/lint.json
  • .vortex/docs/static/img/provision.json
  • .vortex/docs/static/img/test-bdd.json
  • .vortex/docs/static/img/test.json

Comment thread .vortex/docs/static/img/diagram.html
@github-actions

github-actions Bot commented Jul 5, 2026

Copy link
Copy Markdown

Code coverage (threshold: 90%)

  Classes: 100.00% (1/1)
  Methods: 100.00% (2/2)
  Lines:   98.55% (204/207)
Per-class coverage
Drupal\ys_demo\Plugin\Block\CounterBlock
  Methods: 100.00% ( 2/ 2)   Lines: 100.00% ( 10/ 10)

@AlexSkrypnyk

This comment has been minimized.

2 similar comments
@AlexSkrypnyk

This comment has been minimized.

@AlexSkrypnyk

Copy link
Copy Markdown
Member Author

Code coverage (threshold: 90%)

  Classes: 100.00% (1/1)
  Methods: 100.00% (2/2)
  Lines:   98.55% (204/207)
Per-class coverage
Drupal\ys_demo\Plugin\Block\CounterBlock
  Methods: 100.00% ( 2/ 2)   Lines: 100.00% ( 10/ 10)

@codecov

codecov Bot commented Jul 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.25%. Comparing base (31aa74c) to head (ec9fc7d).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2769      +/-   ##
==========================================
- Coverage   86.69%   86.25%   -0.45%     
==========================================
  Files          96       89       -7     
  Lines        4727     4568     -159     
  Branches       47        3      -44     
==========================================
- Hits         4098     3940     -158     
+ Misses        629      628       -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions

github-actions Bot commented Jul 5, 2026

Copy link
Copy Markdown

📖 Documentation preview for this pull request has been deployed to Netlify:

https://6a49ee37fff81b7ca5339960--vortex-docs.netlify.app

This preview is rebuilt on every commit and is not the production documentation site.

@AlexSkrypnyk AlexSkrypnyk added the Needs review Pull request needs a review from assigned developers label Jul 5, 2026
@AlexSkrypnyk AlexSkrypnyk merged commit 96069a6 into main Jul 5, 2026
34 checks passed
@AlexSkrypnyk AlexSkrypnyk deleted the feature/diagram-hero branch July 5, 2026 05:48
@github-project-automation github-project-automation Bot moved this from BACKLOG to Release queue in Vortex 1.x Jul 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs review Pull request needs a review from assigned developers

Projects

Status: Release queue

Development

Successfully merging this pull request may close these issues.

1 participant