fix: align frontend with design spec + UX improvements
Design spec compliance:
- Fix body font-weight: font-medium → font-normal (spec requires 400)
- PostCard: add group hover effects, underline on title hover, arrow →, translate animation
- PostCard: add text-lg to excerpt (spec Body style)
- PostMeta: fix date color neutral-400 → neutral-500 (spec Ash color)
- Homepage: fix error color neutral-400 → red-600 (spec Error color)
- Register: replace green/yellow with black/gray (spec: no non-functional colors)
- Drafts: remove green from Publish button
- PostContent: unify pre background to #fafafa (spec Vapor color)
- ImageUpload: replace dashed border with solid thin line
Bug fixes:
- PostPage: use notFound() instead of router.push('/not-found')
- next.config.ts: add images.remotePatterns for external images
UX improvements:
- Editor: responsive grid-cols-1 md:grid-cols-2 for mobile
- Editor pages: replace alert() with SaveStatus component
- Autosave delay: 300ms → 2000ms to reduce API pressure
This commit is contained in:
@@ -10,7 +10,7 @@ interface PostContentProps {
|
||||
|
||||
export function PostContent({ content }: PostContentProps) {
|
||||
return (
|
||||
<div className="prose prose-lg max-w-none prose-headings:tracking-tight prose-headings:font-bold prose-p:leading-relaxed prose-p:text-neutral-700 prose-a:border-b prose-a:border-black prose-a:no-underline hover:prose-a:border-transparent prose-img:my-8 prose-pre:bg-[#f6f8fa] prose-pre:p-6 prose-code:font-mono prose-code:text-base">
|
||||
<div className="prose prose-lg max-w-none prose-headings:tracking-tight prose-headings:font-bold prose-p:leading-relaxed prose-p:text-neutral-700 prose-a:border-b prose-a:border-black prose-a:no-underline hover:prose-a:border-transparent prose-img:my-8 prose-pre:bg-[#fafafa] prose-pre:p-6 prose-code:font-mono prose-code:text-base">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
rehypePlugins={[[rehypeHighlight, { detect: true }]]}
|
||||
@@ -24,7 +24,7 @@ export function PostContent({ content }: PostContentProps) {
|
||||
/>
|
||||
),
|
||||
pre: ({ children }) => (
|
||||
<pre className="bg-[#f6f8fa] p-6 font-mono text-base text-black rounded-none border border-neutral-200 whitespace-pre-wrap break-words overflow-hidden">
|
||||
<pre className="bg-[#fafafa] p-6 font-mono text-base text-black rounded-none border border-neutral-200 whitespace-pre-wrap break-words overflow-hidden">
|
||||
{children}
|
||||
</pre>
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user