[IMAGE: https://images.ecency.com/DQmc2GLu5uJN7DSnwcxiZ1rBCn9H4pK7bA7oep1dcKqFPiE/thumb_1778848872106.jpg] ▶️ 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 extractPostMedia utility 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

[IMAGE: https://files.peakd.com/file/peakd-hive/sagarkothari88/EoAT24PKv222KaG33cMLGiZJZUmPR4t7Wj9AvK2HQd3W4AGEofKcp8mvhmqzun1arjt.png]

Post Media Carousel

[IMAGE: https://files.peakd.com/file/peakd-hive/sagarkothari88/23wMPvXJc86iEJEj9V9sm3gTpYuAmPJdR73oqaC1Qqd1qtKQsY7YxNXesjxtMpvNDcWcQ.png]

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

[IMAGE: https://files.peakd.com/file/peakd-hive/sagarkothari88/23tGaDaKyijkLSupbk1wisUj3BCp6e2TU5fAJzCTR9MyF3JSyzgQNJXsf8ymo42KHjNjo.png]

Community Layout Improvements

[IMAGE: https://files.peakd.com/file/peakd-hive/sagarkothari88/EoATTJBFf894wnchEycDHdf9QGLtPJQgBnUGXbd2iL4j2WbB2HSuTeoc3QxTEhib1PV.png]

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 `` rendering issues
• Improved table formatting
• Removed media duplication

• Removed footer noise and unnecessary content

• Removed line-clamp rendering issues.

• Added proper CSS handling for:

• Tables
• Layout spacing

• Markdown formatting

• Ensured media rendering handled only through AttachmentStrip to 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

[IMAGE: https://files.peakd.com/file/peakd-hive/sagarkothari88/EoGvVK8HY1p8ptya4q8ud9Q3k7yF7WqZxwgJfgga9iTu69XXgWNbTA4KrpXjYno1S5w.png]

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

via Apps from