💄 Adjust blogchain UI (#139)

* 💄 Adjust blogchain UI * fix detail pages gap * fix layout + providers * update ? * metadata * thumb
Mintbase · Feb 20, 2024 · d501bde · d501bde
1 parent fe4c0e5
commit d501bde
Show file tree

Hide file tree

Showing 16 changed files with 102 additions and 49 deletions.
diff --git a/blogchain/public/thumbnail.png b/blogchain/public/thumbnail.png
diff --git a/blogchain/src/app/blog/[id]/page.tsx b/blogchain/src/app/blog/[id]/page.tsx
@@ -10,7 +10,7 @@ export default function BlogDetail() {
   const { posts } = useBlogPosts(id as string);
 
   return (
-    <main className="flex min-h-screen flex-col items-start gap-4 mt-12 px-12">
+    <main className="flex min-h-screen flex-col items-start gap-4 mt-12 px-2 lg:px-24">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {posts?.map(
           (

diff --git a/blogchain/src/app/data/queries/blogs.ts b/blogchain/src/app/data/queries/blogs.ts
@@ -1,14 +1,15 @@
 export const GET_LATEST_UPDATED_BLOGS = `query GET_LATEST_UPDATED_BLOGS {
-  mb_views_nft_metadata(
-    where: {extra: {_eq: "blogpost"}}
-    distinct_on: nft_contract_id
-    limit: 10
-  ) {
-    nft_contract_id
-    nft_contract_owner_id
-  }
+    mb_views_nft_metadata(
+      where: {extra: {_eq: "blogpost"}}
+      distinct_on: [nft_contract_id, nft_contract_created_at]
+      limit: 6
+      order_by: [{nft_contract_created_at: desc}, {nft_contract_id: desc}]
+    ) {
+      nft_contract_id
+      nft_contract_owner_id
+    }
   }
-  `;
+`;
 
 export const GET_BLOG_POSTS = `query GET_BLOG_POSTS($contractId: String!) {
     mb_views_nft_tokens(

diff --git a/blogchain/src/app/globals.css b/blogchain/src/app/globals.css
@@ -78,6 +78,13 @@
 .markdownEditor {
   border: 1px solid rgba(232, 234, 240, 1);
   border-radius: 6px;
+  width: 367px;
+}
+
+@screen lg {
+  .markdownEditor {
+    width: 542px;
+  }
 }
 
 .markdownEditor .CodeMirror-scroll {
@@ -98,6 +105,7 @@
 .markdownEditor .CodeMirror {
   border: rgba(232, 234, 240, 1) !important;
   background: var(--color-canvas-subtle);
+  width: 100%;
 }
 
 .markdownEditor .CodeMirror-cursor {
@@ -116,4 +124,4 @@
 .markdownEditor button.side-by-side,
 .markdownEditor .editor-toolbar i.separator {
   display: none;
-}
+}
diff --git a/blogchain/src/app/layout.tsx b/blogchain/src/app/layout.tsx
@@ -1,36 +1,51 @@
-"use client";
-
+import { AppProviders } from "@/components/app-providers";
+import Footer from "@/components/footer";
 import Header from "@/components/header";
-import { MintbaseWalletContextProvider } from "@mintbase-js/react";
 import "@near-wallet-selector/modal-ui/styles.css";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Footer from "@/components/footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
-const queryClient = new QueryClient();
+export const metadata: Metadata = {
+  title: `Blogchain`,
+  description: "The decentralized writers blog",
+  openGraph: {
+    title: `Blogchain`,
+    description: "Your forever thoughts on the Blockchain",
+    images: [
+      {
+        type: "image/png",
+        url: "./thumbnail.png",
+        width: "1200",
+        height: "630",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Blogchain`,
+    description: "Your forever thoughts on the Blockchain",
+    creator: "Mintbase",
+    images: "./thumbnail.png",
+  },
+};
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <MintbaseWalletContextProvider
-      contractAddress="hellovirtualworld.mintspace2.testnet"
-      network="testnet"
-    >
-      <QueryClientProvider client={queryClient}>
-        <html lang="en">
-          <body className={inter.className}>
-            <Header />
-            {children}
-            <Footer />
-          </body>
-        </html>
-      </QueryClientProvider>
-    </MintbaseWalletContextProvider>
+    <AppProviders>
+      <html lang="en">
+        <body className={inter.className}>
+          <Header />
+          {children}
+          <Footer />
+        </body>
+      </html>
+    </AppProviders>
   );
 }
diff --git a/blogchain/src/app/my-blogs/page.tsx b/blogchain/src/app/my-blogs/page.tsx
@@ -5,7 +5,7 @@ import UserBlogs from "@/components/user-blogs";
 
 export default function MyBlogs() {
   return (
-    <main className="flex min-h-screen flex-col items-start gap-4 mt-12 px-12">
+    <main className="flex min-h-screen flex-col items-start gap-4 px-2 lg:px-24 py-12">
       <CreateBlogDialog />
       <UserBlogs />
     </main>

diff --git a/blogchain/src/app/my-posts/page.tsx b/blogchain/src/app/my-posts/page.tsx
@@ -5,7 +5,7 @@ import UserPosts from "@/components/user-posts";
 
 export default function MyPosts() {
   return (
-    <main className="flex min-h-screen flex-col items-start gap-4 mt-12 px-12">
+    <main className="flex min-h-screen flex-col items-start gap-4 px-2 lg:px-24 py-12">
       <CreatePostDialog />
       <UserPosts />
     </main>

diff --git a/blogchain/src/app/page.tsx b/blogchain/src/app/page.tsx
@@ -4,7 +4,7 @@ import LatestPosts from "@/components/latest-posts";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col px-2 lg:px-24 py-12">
+    <main className="flex min-h-screen flex-col gap-12 px-2 lg:px-24 py-12">
       <Hero />
       <LatestBlogs />
       <LatestPosts />

diff --git a/blogchain/src/app/post/[id]/page.tsx b/blogchain/src/app/post/[id]/page.tsx
@@ -13,13 +13,15 @@ export default function PostDetail() {
   const { post } = useGetBlogPostMetadata(decodeURIComponent(id as string));
 
   if (typeof post === undefined) {
-    return <>Theres no Posts for this user!</>
+    return <>Theres no Posts for this user!</>;
   }
 
-  const postDate = post?.minted_timestamp ? formatDate(post?.minted_timestamp): "";
+  const postDate = post?.minted_timestamp
+    ? formatDate(post?.minted_timestamp)
+    : "";
 
   return post ? (
-    <main className="flex min-h-screen flex-col gap-4 my-12 px-8 md:px-24 w-full md:w-7/12 mx-auto">
+    <main className="flex min-h-screen flex-col gap-4 my-12 px-2 lg:px-24 w-full md:w-7/12 mx-auto">
       <div className="rounded-lg border w-full h-72 overflow-hidden">
         <img
           src={post.media}
@@ -35,13 +37,17 @@ export default function PostDetail() {
           {post.title}
         </div>
       </div>
-      <div className="flex justify-between items-center">
+      <div className="flex flex-wrap justify-between items-center">
         <Link
           href={`https://testnet.mintbase.xyz/contract/${post.nft_contract_id}`}
           target="_blank"
           className="flex gap-2 items-center text-xs"
         >
-          <div>{post.nft_contract_id}</div>
+          <div>
+            {post.nft_contract_id?.length > 48
+              ? `${post.nft_contract_id?.substring(0, 48)}...`
+              : post.nft_contract_id}
+          </div>
         </Link>
         <Link
           href={`https://testnet.mintbase.xyz/human/${post.minter}`}
@@ -51,7 +57,12 @@ export default function PostDetail() {
           <Avatar className="w-6 h-6">
             <AvatarFallback>{post.minter[0]}</AvatarFallback>
           </Avatar>
-          <div>{post.minter}</div>
+          <div>
+            {" "}
+            {post.minter.length > 48
+              ? `${post.minter.substring(0, 48)}...`
+              : post.minter}
+          </div>
         </Link>
       </div>
       <div className="mt-4 whitespace-pre-line">

diff --git a/blogchain/src/components/app-providers.tsx b/blogchain/src/components/app-providers.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { MintbaseWalletContextProvider } from "@mintbase-js/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode } from "react";
+
+export function AppProviders({ children }: { children: ReactNode }) {
+  const queryClient = new QueryClient();
+
+  return (
+    <MintbaseWalletContextProvider
+      contractAddress="hellovirtualworld.mintspace2.testnet"
+      network="testnet"
+    >
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </MintbaseWalletContextProvider>
+  );
+}
diff --git a/blogchain/src/components/blog-card.tsx b/blogchain/src/components/blog-card.tsx
@@ -20,7 +20,7 @@ const BlogCard = ({
   owner: string;
 }) => {
   return (
-    <Card className="w-[350px]">
+    <Card className="w-auto">
       <CardHeader>
         <CardTitle className="w-11/12 truncate text-lg">{title}</CardTitle>
         <CardDescription className="11/12 truncate">{subtitle}</CardDescription>

diff --git a/blogchain/src/components/create-blog.tsx b/blogchain/src/components/create-blog.tsx
@@ -78,7 +78,7 @@ export function CreateBlogDialog() {
           <Plus className="mr-2 h-4 w-4" /> Create Blog
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px] lg:max-w-[600px]">
         <DialogHeader>
           <DialogTitle>New Blog</DialogTitle>
           <DialogDescription>

diff --git a/blogchain/src/components/create-post.tsx b/blogchain/src/components/create-post.tsx
@@ -135,7 +135,7 @@ export function CreatePostDialog() {
           <Plus className="mr-2 h-4 w-4" /> Create Post
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px] lg:max-w-[600px]">
         <DialogHeader>
           <DialogTitle>New Post</DialogTitle>
           <DialogDescription>

diff --git a/blogchain/src/components/post-card.tsx b/blogchain/src/components/post-card.tsx
@@ -20,7 +20,7 @@ const PostCard = ({
   const postDate = formatDate(createdAt);
 
   return (
-    <div className="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
+    <div className="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
       <div className="aspect-video">
         <img
           className="rounded-t-lg w-full h-full object-cover"
@@ -31,11 +31,11 @@ const PostCard = ({
       <div className="p-5">
         <Badge>{postDate}</Badge>
         <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          {title.length > 30 ? `${title.substring(0, 30)}...` : title}
+          {title?.length > 30 ? `${title.substring(0, 30)}...` : title}
         </h5>
-        <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">
+        <p className="mb-3 font-normal text-gray-700 dark:text-gray-400 break-all">
           <ReactMarkdown>
-            {description.length > 100
+            {description?.length > 100
               ? `${description.substring(0, 100)}...`
               : description}
           </ReactMarkdown>

diff --git a/blogchain/src/components/user-blogs.tsx b/blogchain/src/components/user-blogs.tsx
@@ -11,7 +11,7 @@ const UserBlogs = () => {
   const { blogs } = useUserBlogs(accountId);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {blogs?.map(({ id }, index) => (
         <BlogCard
           key={`${id}-${index}`}

diff --git a/blogchain/src/components/user-posts.tsx b/blogchain/src/components/user-posts.tsx
@@ -10,7 +10,7 @@ const UserPosts = () => {
   const { posts } = useUserPosts(accountId);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {posts?.map(
         (
           { metadata_id, description, media, title, minted_timestamp },