Blog Layout

Cards

About

This is not just a layout component, but also a complete blog presentation solution. It solves complex data processing, responsive design, user experience optimization and other problems at once, allowing you to focus on content creation rather than technical implementation. Use it immediately to refresh your blog interface! ⭐

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Blog Layout to your project and fits it to your theme.

Code

How Blog Layout is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ArticleAdapter, PostAdapter, ArticleEntity, PostEntity } from "../lib/utils";
import { UniRender } from "@unilab/ukit";
import { URPC } from "@unilab/urpc";
import { useEffect, useState } from "react";
import { BlogLayout } from "../components/ui/blog-layout";

const Blog = () => {
  const [isInitialized, setIsInitialized] = useState(false);
  
  useEffect(() => {
    const initializeURPC = async () => {
      // Initialize URPC
      const MyPlugin = {
        entities: [PostEntity, ArticleEntity],
        adapters: [
          {
            source: "memory",
            entity: "PostEntity",
            adapter: new PostAdapter(),
          },
          {
            source: "memory",
            entity: "ArticleEntity",
            adapter: new ArticleAdapter(),
          },
        ],
      };
  
      URPC.init({
        plugins: [MyPlugin],
        entityConfigs: {
          post: {
            defaultSource: "memory",
          },
          article: {
            defaultSource: "memory",
          },
        },
      });
      console.log('(URPC as any).getGlobalInstance();', (URPC as any).getGlobalInstance())
      setIsInitialized(true);
    }
    if (!isInitialized) {
      initializeURPC();
    }
  }, [isInitialized]);

  if (!isInitialized) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full mx-auto mb-4"></div>
          <p className="text-gray-600">Initializing URPC...</p>
        </div>
      </div>
    );
  }
  return (
      <UniRender
        entity={PostEntity}
        source="memory"
        layout="custom"
        render={BlogLayout}
        config={{
          title: { label: "Article Title" },
          content: { label: "Content" },
          author: { label: "Author" },
          category: { label: "Category" },
        }}
        pagination={{
          enabled: true,
          pageSize: 4,
        }}
      />
  );
};

export default Blog;