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! ⭐
"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;