feat(docs): add live component showcase to the homepage#1249
Open
Arnold Stoba (arnoldstoba) wants to merge 15 commits into
Open
feat(docs): add live component showcase to the homepage#1249Arnold Stoba (arnoldstoba) wants to merge 15 commits into
Arnold Stoba (arnoldstoba) wants to merge 15 commits into
Conversation
Render a responsive masonry grid of live Meteor component cards on the docs landing page. Each card is a self-contained SFC under app/components/showcase/ (product spec, store analytics, shipping rate, share/invite, connect-to-Nexus, plan usage, appearance, product detail, campaign voucher, invoices, custom domain); LandingComponentShowcase.vue keeps only the grid shell + ClientOnly hydration fallback. Uses Meteor components and design tokens throughout. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
<mt-link href="#"> passed no `to`, so MtLink rendered a <router-link>
without a target. On the prerendered homepage this crashed hydration via
router.resolve(undefined) ("Cannot read properties of undefined (reading
'path')", 500) and Nuxt swapped in the error page on cold load; warm
client nav only warned, which made it look flaky. Render the demo link as
a plain anchor (as="a") and drop the no-op :color prop.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…ase cards Wire up the homepage component showcase cards with realistic interactions: - Add mt-action-menu triggers to the share, chart, and product cards - Fire success/error snackbars for each menu action via a shared MtSnackbar host - Add a reusable ConfirmDialog for destructive chart/product removals - Chart menu gains a "Reload data" progress-to-success snackbar demo - Swap the campaign audience select for a colour picker driving the tag tile, with contrast-color() flipping the icon black/white - Promote the appearance radio group out of its card and tidy copy/spacing - Disable autofill on the Nexus login fields and refresh example content
- Nest the component showcase inside the hero so the backdrop bleeds behind it - Fade the hero backdrop out with a bottom mask; drop the planet/marquee - Overlay a transparent-to-background gradient fading the cards into the page - Replace the masonry multi-column with an explicit 4-column grid and hand-place each card per column - Tighten hero-to-showcase spacing to a 120px section gap - Fix AppearanceCard radio-group margin override (target the scoped root, not a :deep descendant) - Add a Shopware Payments card with a custom faked header (icon tile + titles) - ShippingRate copy tweaks (Express shipping, EUR12,99)
- Remove the light-mode hero dot grid and its cursor spotlight entirely - Make the whole landing page bg-muted and drop per-section backgrounds (except the hero), for a uniform surface
- Rebalance the 4-column card placement across the showcase - Add a Shopware Payments card (custom faked header with an icon tile) - Add an empty placeholder card at the end of every column - Lengthen the bottom fade overlay so the grid dissolves more gradually
- Blur-fade the cards in on load (matching the hero's rise), staggered by column and row for a diagonal cascade; respects reduced-motion - Drop the section-level entrance so only the cards animate - Remove the border on the loading skeleton placeholders
- ShippingRateCard: compute the footer price live from the package type and the width/height inputs (made-up base rate + size surcharge) - ConnectNexusCard: Continue button shows a loading state then shakes the card as a rejected sign-in; disable it until both fields are filled - Keep the card's state after the shake (shake a nested wrapper so it doesn't restart the entrance animation) - Use a plain text field for Email so it accepts any text and never shows an error state
Switch the DNS and SSL icons to a critical times-circle when the custom domain input is empty, back to the positive check-circle once a domain is entered.
Use bg-default in light mode and bg-muted in dark mode for the landing container, and fade the showcase into the matching page background in each theme. Also update the payments card subtitle and prevent the product image from being dragged.
…cards Replace the Explore-the-docs grid with a looping, draggable arc carousel (LandingDocsCarousel) whose cards reveal their link on hover and use real Meteor tokens, icons, and components in the previews. Turn the Why section into an accordion with a CSS plus/minus toggle and blur reveal, rework the Install section into per-package rows with copyable commands (LandingCopyCommand), and rebuild the contribute CTA as a card with an animated LED gradient border. Add a light-mode dot-grid backdrop and a shared card elevation across the copy line, accordion, and slider cards.
Fabian Hüske (fabianhueske)
force-pushed
the
docs/update-homepage
branch
from
d43b260 to
7167baf
Compare
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Render a responsive masonry grid of live Meteor component cards on the docs landing page. Each card is a self-contained SFC under app/components/showcase/ (product spec, store analytics, shipping rate, share/invite, connect-to-Nexus, plan usage, appearance, product detail, campaign voucher, invoices, custom domain); LandingComponentShowcase.vue keeps only the grid shell + ClientOnly hydration fallback. Uses Meteor components and design tokens throughout.