feat(blog-list): add BlogList BlogBackground BlogBackButton components as lynx-website#74
Merged
feat(blog-list): add BlogList BlogBackground BlogBackButton components as lynx-website#74
BlogList BlogBackground BlogBackButton components as lynx-website#74Conversation
There was a problem hiding this comment.
Pull request overview
This PR introduces new blog-avatar and blog-list library entrypoints (plus Storybook stories) and updates the blog list presentation/interaction to match the lynx-website style, including decorative canvas effects and optional inline-markdown rendering for string descriptions.
Changes:
- Add
BlogAvatar/BlogAvatarGroupcomponents with styling and Storybook story. - Add
BlogListcomponent with featured + grid cards, background meteors/grid canvas, border-beam hover effect, and tilt interaction hook. - Expose both components as build/exports entrypoints via
rslib.config.tsandpackage.json.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| stories/BlogList.stories.tsx | Adds a Storybook example for the new BlogList component. |
| stories/BlogAvatar.stories.tsx | Adds a Storybook example for BlogAvatar and BlogAvatarGroup. |
| src/blog-list/useTiltEffect.ts | Adds a DOM-event based tilt interaction hook. |
| src/blog-list/index.tsx | Implements the BlogList component, card rendering, and optional inline markdown injection. |
| src/blog-list/index.module.scss | Adds lynx-aligned styling for the blog list layout and cards. |
| src/blog-list/MeteorsBackground.tsx | Adds a canvas-based decorative grid + meteor animation background. |
| src/blog-list/BorderBeam.tsx | Adds a canvas-based animated border beam effect for hover state. |
| src/blog-list/BorderBeam.module.scss | Styles for positioning the BorderBeam canvas overlay. |
| src/blog-avatar/index.tsx | Implements BlogAvatar and BlogAvatarGroup (including compact mode). |
| src/blog-avatar/index.module.scss | Adds styling for BlogAvatar and grouped/compact layouts. |
| rslib.config.ts | Registers new blog-avatar and blog-list build entrypoints. |
| package.json | Exposes ./blog-avatar and ./blog-list package exports. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
SoonIter
changed the title
SoonIter
force-pushed
the
feat/blog-components
branch
from
d90377e to
77c13e1
Compare
SoonIter
changed the title
SoonIter
changed the title
BlogList BlogBackground BlogBackButton components as lynx-website
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 15 out of 15 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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
blog-avatarandblog-listlibrary components plus Storybook storiesblog-listpresentation with lynx-website using featured/grid cards, meteors background, border beam hover effect, tilt interaction, and stronger glassmorphism stylingrenderInlineMarkdowninjection for string descriptions while keeping plain-text fallback behaviorVerification
npx biome check src/blog-list/index.tsx src/blog-list/index.module.scss stories/BlogList.stories.tsxnpx tsc --noEmit -p tsconfig.jsonpnpm buildnpm run preflight(script is not defined in this repository)Notes
.github/stories/tsconfig.jsonissues remain unrelated to this change and were not used as the verification gate