▶️ Watch on 3Speak
HiveReactKit adds media strip UI, responsive layouts, markdown rendering, and improved Snaps experience.
HiveReactKit
Blog Feed Media Strip Redesign
Rich Media Layout Improvements
- feat(blog-list): add right-side media strip with multi-media support.
- Refactored post cards with:
- Right-side media strip
- Full-height media layout
- Flex-based responsive structure
- Moved avatar inline with post header:
- Author
- Time
- Community
- Added
extractPostMediautility supporting:- Images
- YouTube
- 3Speak
- X (Twitter) embeds
- Built reusable
PostMediaCarousel:- Multi-media tiles
- Carousel navigation arrows
- Media counter
- Lightbox support
Added responsive media strip sizing and improved spacing consistency.
Updated skeleton loaders to match the redesigned layout.
- Outcome:
- Cleaner blog feed presentation
- Better multi-media browsing experience
- Improved readability and content structure
Blog Feed Media Strip
Post Media Carousel
Mobile Cards & Community Layout Improvements
Responsive UI Refinements
- feat(ui): media strip + mobile cards + community layout.
- Added unified right-side media strip support for:
- Images
- YouTube
- 3Speak
- X embeds
Introduced unified media parsing system using
postMedia.ts.Refactored post cards:
- Flex layout improvements
- Full-height media alignment
- Updated skeleton loaders to match the new responsive UI system.
Mobile Optimizations
Added smaller mobile card layouts.
Implemented fixed thumbnail sizing for consistent rendering.
CommunityDetail Improvements
Added single-scroll page structure.
Added sticky community tabs.
Added compact community header layout.
- Outcome:
- Improved mobile usability
- Better scrolling experience
- More consistent responsive layouts across devices
Responsive Mobile Cards
Community Layout Improvements
Snaps Markdown Rendering & Body Processing
Content Rendering Improvements
- feat(snaps): add markdown rendering + body preprocessing.
- Added markdown rendering support for Snaps feed:
- Tables
- Lists
- Text formatting
- Added body preprocessing pipeline:
- Fixed
<br>rendering issues - Improved table formatting
- Removed media duplication
- Removed footer noise and unnecessary content
- Fixed
Removed line-clamp rendering issues.
Added proper CSS handling for:
- Tables
- Layout spacing
- Markdown formatting
- Ensured media rendering handled only through
AttachmentStripto avoid duplicate previews.
Development Workflow Improvement
- Linked HiveReactKit locally using:
file:../HiveReactKit
- Enabled faster development iteration and testing workflow.
- Outcome:
- Better markdown readability within Snaps feed
- Cleaner media rendering behavior
- Faster local development workflow
Markdown Rendering in Snaps & AttachmentStrip Media Handling
Powering the Hive Ecosystem
- Continuously improving reusable UI infrastructure for Hive applications
- Building scalable media rendering systems and responsive layouts for the community
- Contributing towards better creator experiences and modern open-source Hive tooling
Final Note
- This post has been refined with the help of AI to improve readability and structure
- The original development updates and optimised version are both available for reference
More Links
▶️ 3Speak
It seems like a good technology and development, greetings.
Yes. it is. Thank you @erickalife
Have a good day.
This post has been manually curated by @bhattg from Indiaunited community. Join us on our Discord Server.
Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens.
Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.
100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @bhattg by upvoting this comment and support the community by voting the posts made by @indiaunited.