From 15911b648c4f3db7a80449df89fe972f0695e1a4 Mon Sep 17 00:00:00 2001 From: ruisantiago Date: Mon, 19 Feb 2024 20:12:17 +0000 Subject: [PATCH 1/6] :lipstick: Adjust blogchain UI --- blogchain/src/app/data/queries/blogs.ts | 19 ++++++++++--------- blogchain/src/app/globals.css | 10 +++++++++- blogchain/src/app/page.tsx | 2 +- blogchain/src/components/blog-card.tsx | 2 +- blogchain/src/components/create-blog.tsx | 2 +- blogchain/src/components/create-post.tsx | 2 +- blogchain/src/components/post-card.tsx | 4 ++-- blogchain/src/components/user-blogs.tsx | 2 +- blogchain/src/components/user-posts.tsx | 2 +- 9 files changed, 27 insertions(+), 18 deletions(-) diff --git a/blogchain/src/app/data/queries/blogs.ts b/blogchain/src/app/data/queries/blogs.ts index 475dd48b..f5056a6b 100644 --- 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 index 72528489..36658486 100644 --- 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; -} \ No newline at end of file +} diff --git a/blogchain/src/app/page.tsx b/blogchain/src/app/page.tsx index 922b3fd8..e525d4f7 100644 --- 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 ( -
+
diff --git a/blogchain/src/components/blog-card.tsx b/blogchain/src/components/blog-card.tsx index 79d76909..277c6e97 100644 --- a/blogchain/src/components/blog-card.tsx +++ b/blogchain/src/components/blog-card.tsx @@ -20,7 +20,7 @@ const BlogCard = ({ owner: string; }) => { return ( - + {title} {subtitle} diff --git a/blogchain/src/components/create-blog.tsx b/blogchain/src/components/create-blog.tsx index 0dab3651..88430021 100644 --- a/blogchain/src/components/create-blog.tsx +++ b/blogchain/src/components/create-blog.tsx @@ -78,7 +78,7 @@ export function CreateBlogDialog() { Create Blog - + New Blog diff --git a/blogchain/src/components/create-post.tsx b/blogchain/src/components/create-post.tsx index 767383a2..f2febc3a 100644 --- a/blogchain/src/components/create-post.tsx +++ b/blogchain/src/components/create-post.tsx @@ -135,7 +135,7 @@ export function CreatePostDialog() { Create Post - + New Post diff --git a/blogchain/src/components/post-card.tsx b/blogchain/src/components/post-card.tsx index af120f4f..175aef7d 100644 --- 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 ( -
+
{title.length > 30 ? `${title.substring(0, 30)}...` : title} -

+

{description.length > 100 ? `${description.substring(0, 100)}...` diff --git a/blogchain/src/components/user-blogs.tsx b/blogchain/src/components/user-blogs.tsx index 57dd5a44..66bd938f 100644 --- 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 ( -

+
{blogs?.map(({ id }, index) => ( { const { posts } = useUserPosts(accountId); return ( -
+
{posts?.map( ( { metadata_id, description, media, title, minted_timestamp }, From e184ea05db9a813d3a32818f67bcf8958a011b52 Mon Sep 17 00:00:00 2001 From: ruisantiago Date: Mon, 19 Feb 2024 20:45:59 +0000 Subject: [PATCH 2/6] fix detail pages gap --- blogchain/src/app/blog/[id]/page.tsx | 2 +- blogchain/src/app/my-blogs/page.tsx | 2 +- blogchain/src/app/my-posts/page.tsx | 2 +- blogchain/src/app/post/[id]/page.tsx | 23 +++++++++++++++++------ 4 files changed, 20 insertions(+), 9 deletions(-) diff --git a/blogchain/src/app/blog/[id]/page.tsx b/blogchain/src/app/blog/[id]/page.tsx index 5d336e66..8ae17549 100644 --- 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 ( -
+
{posts?.map( ( diff --git a/blogchain/src/app/my-blogs/page.tsx b/blogchain/src/app/my-blogs/page.tsx index d3875f05..1242133b 100644 --- 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 ( -
+
diff --git a/blogchain/src/app/my-posts/page.tsx b/blogchain/src/app/my-posts/page.tsx index 577d76d2..7b668a35 100644 --- 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 ( -
+
diff --git a/blogchain/src/app/post/[id]/page.tsx b/blogchain/src/app/post/[id]/page.tsx index 9075d737..905a6375 100644 --- 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 ? ( -
+
-
+
-
{post.nft_contract_id}
+
+ {post.nft_contract_id.length > 48 + ? `${post.nft_contract_id.substring(0, 48)}...` + : post.nft_contract_id} +
{post.minter[0]} -
{post.minter}
+
+ {" "} + {post.minter.length > 48 + ? `${post.minter.substring(0, 48)}...` + : post.minter} +
From b59e45fa8d2464ae08a444a122c11b790c9f016c Mon Sep 17 00:00:00 2001 From: ruisantiago Date: Mon, 19 Feb 2024 20:55:15 +0000 Subject: [PATCH 3/6] fix layout + providers --- blogchain/src/app/layout.tsx | 36 ++++++++++------------ blogchain/src/components/app-providers.tsx | 18 +++++++++++ 2 files changed, 34 insertions(+), 20 deletions(-) create mode 100644 blogchain/src/components/app-providers.tsx diff --git a/blogchain/src/app/layout.tsx b/blogchain/src/app/layout.tsx index 77dae31d..24d364bc 100644 --- a/blogchain/src/app/layout.tsx +++ b/blogchain/src/app/layout.tsx @@ -1,16 +1,17 @@ -"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 writer's blog", +}; export default function RootLayout({ children, @@ -18,19 +19,14 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - - - - -
- {children} -