From 132e10d3de1541b5895c614cc6e4f183f5f9f991 Mon Sep 17 00:00:00 2001 From: Hinata Oishi <92960051+te19oishi@users.noreply.github.com> Date: Tue, 4 Feb 2025 11:15:14 +0900 Subject: [PATCH] feat: update styling and layout in main-content.tsx - Improved layout spacing and alignment - Updated typography styles - Enhanced responsive design - Fixed content overflow issues --- .../components/blog/detail.tsx | 110 +++++++------ .../components/blog/list.tsx | 153 ++++++++++-------- .../components/blog/main-content.tsx | 40 ++++- 3 files changed, 177 insertions(+), 126 deletions(-) diff --git a/examples/nextjs-simple-blog-template/components/blog/detail.tsx b/examples/nextjs-simple-blog-template/components/blog/detail.tsx index 46e4808..d3e65ed 100644 --- a/examples/nextjs-simple-blog-template/components/blog/detail.tsx +++ b/examples/nextjs-simple-blog-template/components/blog/detail.tsx @@ -13,65 +13,73 @@ export function BlogPageDetail({ writer?: Writer; }) { return ( -
-
-
-
-
- {new Date( - page.properties.created_at ?? Date.now() - ).toLocaleDateString()} -
-

- {page.title} -

-
- Writer Profile -
- {writer?.title} -
-
+
+
+
+
+ {new Date( + page.properties.created_at ?? Date.now() + ).toLocaleDateString()} +
+ +

+ {page.title} +

+ +
+ Writer Profile + {writer?.title} +
+ +
+ Key Visual +
+ +
+
- Key Visual -
- - {writer && } + {writer && ( +
+ +
+ )} +
); } + function WriterProfileCard({ writer }: { writer: Writer }) { return ( -
- {`${writer.title}'s -
-
- {writer.title} -
-
- {writer.content} +
+
+ {`${writer.title}'s +
+

+ {writer.title} +

+

+ {writer.content} +

diff --git a/examples/nextjs-simple-blog-template/components/blog/list.tsx b/examples/nextjs-simple-blog-template/components/blog/list.tsx index 31faa7a..867121d 100644 --- a/examples/nextjs-simple-blog-template/components/blog/list.tsx +++ b/examples/nextjs-simple-blog-template/components/blog/list.tsx @@ -1,4 +1,7 @@ +"use client"; + import Image from "next/image"; +import { useState } from "react"; import { Link } from "~/src/i18n/routing"; import { nc } from "~/src/notcms/schema"; @@ -17,57 +20,73 @@ export function BlogPagesList({ pages: Pages; writers: Writers; }) { + const categories = [ + "All", + ...pages + .map((page) => page.properties.category) + .filter( + (category): category is string => + category !== null && category !== undefined + ) + .filter((category, index, self) => self.indexOf(category) === index) + .sort(), + ]; + const [selectedCategory, setSelectedCategory] = useState("All"); + + const filteredPages = pages.filter( + (p) => + selectedCategory === "All" || p.properties.category === selectedCategory + ); + + const getCategoryButtonStyle = (category: string) => { + return selectedCategory === category + ? "flex w-auto h-6 items-center px-3 py-3 rounded-[24.5px] border-[0.5px] border-solid border-[#ffffff1a] [background:linear-gradient(180deg,rgba(255,255,255,0.06)_0%,rgba(255,255,255,0.1)_100%)]" + : "inline-flex items-center justify-center gap-2 px-2 md:px-3 py-0 flex-[0_0_auto]"; + }; + + const getCategoryTextStyle = (category: string) => { + return selectedCategory === category + ? "w-fit mt-[-1.00px] [font-family:'Selecta_VF_Trial-Regular',Helvetica] font-normal text-white text-xs leading-[normal] whitespace-nowrap" + : "w-fit mt-[-1.00px] [font-family:'Selecta_VF_Trial-Light',Helvetica] font-light text-[#9f9fa5] text-xs leading-[normal] whitespace-nowrap"; + }; + return ( -
-
-

+
+
+

Recent updates

-

+

This blog is maintained using NotCMS itself!

-
-
- - - - - - - +
+
+ {categories.map((category) => ( + + ))}
-
- w.id === pages[0].properties.writers?.[0] - )} - /> - -
- {pages.map((page) => { +
+ {filteredPages.length > 0 && ( + w.id === filteredPages[0].properties.writers?.[0] + )} + /> + )} + +
+ {filteredPages.slice(1).map((page) => { const writer = writers.find( (w) => w.id === page.properties.writers?.[0] ); @@ -88,47 +107,47 @@ function HeroBlogPostCard({ className, page, writer }: Props) { return ( -
+
Key Visual
-
-
-
-

+

+
+
+

{page.title}

-

+

{page.properties.description}

-
-
-
+
+
+
Writer Profile
-
+
{writer?.title}
-
-
+
+
{page.properties.category}
@@ -138,31 +157,29 @@ function HeroBlogPostCard({ className, page, writer }: Props) { ); } + function BlogPostCard({ className, page, writer }: Props) { return ( - // TODO: border? -
+
Key Visual
-
-

+

+

{page.title}

-
+
-
+
{writer?.title}
-
+
{page.properties.category}
-
+
{new Date( page.properties.created_at ?? Date.now() ).toLocaleDateString()} diff --git a/examples/nextjs-simple-blog-template/components/blog/main-content.tsx b/examples/nextjs-simple-blog-template/components/blog/main-content.tsx index 2dd932d..0ccdca2 100644 --- a/examples/nextjs-simple-blog-template/components/blog/main-content.tsx +++ b/examples/nextjs-simple-blog-template/components/blog/main-content.tsx @@ -3,13 +3,13 @@ import { type Renderer, marked } from "marked"; const renderer: Partial = { paragraph({ tokens }) { const text = this.parser.parseInline(tokens); - return `

${text}

`; + return `

${text}

`; }, link({ href, title, tokens }) { const text = this.parser.parseInline(tokens); return `${text}`; + }" class="text-white underline hover:opacity-80">${text}`; }, strong({ tokens }) { const text = this.parser.parseInline(tokens); @@ -18,7 +18,7 @@ const renderer: Partial = { heading({ tokens, depth }) { const text = this.parser.parseInline(tokens); const escapedText = text.toLowerCase().replace(/[^\w]+/g, "-"); - return ` + return ` @@ -26,21 +26,47 @@ const renderer: Partial = { `; }, image({ href, title, text }) { - return `${text}`; + return `
+ ${text} +
`; }, code({ text, lang, escaped }) { - return `
${text}
`; + return `
+              ${text}
+
`; }, codespan({ text }) { - return `${text}`; + return `${text}`; }, } as Renderer; + marked.use({ renderer: renderer, pedantic: false, gfm: true, breaks: true }); export function MainContent({ content }: { content: string }) { return (