bloggy-embed

bloggy-embed

📝 bloggy-embed — Embeddable blog components for React for blog content rendering.

Easily showcase your blogs on any React-based website with beautiful prebuilt components like BlogCard and BlogEmbed.

✨ Features

• 📦 Plug-and-play blog embed components
• 🎨 Responsive design out of the box
• 🖋 Tiptap-powered rich text rendering
• ⚡ Lightweight & fast
• 🔄 Works with your own blog API

📦 Installation

npm install bloggy-embed


🚀 Usage Example
Below is an example of how to fetch blog data from your API and display it using bloggy-embed.


// src/App.tsx
import { useState, useEffect } from 'react';
import { BlogCard, BlogEmbed } from 'bloggy-embed';
import type { Blog } from 'bloggy-embed';

const API_URL = 'Your API';

function App() {
  const [blogs, setBlogs] = useState<Blog[]>([]);
  const [selectedBlog, setSelectedBlog] = useState<Blog | null>(null);

  useEffect(() => {
    fetch(API_URL)
      .then((res) => res.json())
      .then((data) => {
        setBlogs(data.message.entries);
      })
      .catch((err) => {
        console.error('Failed to fetch blogs:', err);
      });
  }, []);

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <h1 className="text-4xl font-bold text-center mb-8">Latest Blogs</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {blogs.map((blog) => (
          <BlogCard key={blog._id} blog={blog} onClick={() => setSelectedBlog(blog)} />
        ))}
      </div>

      {selectedBlog && (
        <div className="fixed inset-0 bg-white z-50 overflow-y-auto px-4 py-6">
          <BlogEmbed
            blog={selectedBlog}
            showBackButton
            onBack={() => setSelectedBlog(null)}
          />
        </div>
      )}
    </div>
  );
}

export default App;


📚 Components
1️⃣ BlogCard
Displays a compact preview of a blog post.

| Prop      | Type         | Description                                             |
| --------- | ------------ | ------------------------------------------------------- |
| `blog`    | `Blog`       | The blog object containing title, content, author, etc. |
| `onClick` | `() => void` | Callback when the card is clicked.                      |


2️⃣ BlogEmbed
Displays the full blog content.

| Prop             | Type         | Description                               |
| ---------------- | ------------ | ----------------------------------------- |
| `blog`           | `Blog`       | The blog object to render.                |
| `showBackButton` | `boolean`    | Whether to show a back button.            |
| `onBack`         | `() => void` | Callback when the back button is clicked. |


🔌 Blog Type Definition
The Blog type is included for convenience:

export interface Blog {
  _id: string;
  title: string;
  content: any; 
  author?: string;
  createdAt?: string;
  coverImage?: string;
}



🎨 Styling
The components come with minimal default styles.

You can wrap them in your own CSS framework or Tailwind utility classes for customization.