💄 Better UX

This commit is contained in:
LittleSheep 2024-02-25 01:36:12 +08:00
parent 743c007806
commit 6916d208c0
8 changed files with 87 additions and 5 deletions

View File

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.zoomist-wrapper {
background: transparent !important;
}

View File

@ -29,6 +29,14 @@ const INFO_DIRECTORY: { [id: string]: InfoMeta } = {
}
};
export async function generateMetadata({ params }: { params: { id: string } }) {
const info = INFO_DIRECTORY[params.id];
return {
title: info?.title,
}
}
export default function InfoPage({ params }: { params: { id: string } }) {
const info = INFO_DIRECTORY[params.id];

View File

@ -3,6 +3,18 @@ import { client } from "@/sanity/lib/client";
import PostContent from "@/components/posts/PostContent";
import Image from "next/image";
export async function generateMetadata({ params }: { params: { id: string } }) {
const post = await client.fetch<any>(`*[_type == "post" && slug.current == $slug][0] {
title, description
}`, { slug: params.id });
return {
title: post.title,
description: post.description
};
}
export default async function PostDetailPage({ params }: { params: { id: string } }) {
const post = await client.fetch<any>(`*[_type == "post" && slug.current == $slug][0] {
title, description, slug, body, author, publishedAt,

View File

@ -3,6 +3,10 @@ import { client } from "@/sanity/lib/client";
import Image from "next/image";
import Link from "next/link";
export const metadata = {
title: "博客"
}
export default async function PostList() {
const posts = await client.fetch<any[]>(`*[_type == "post"] {
title, description, slug, author, publishedAt,

View File

@ -38,7 +38,7 @@ export interface NavigationItem {
export const DRAWER_WIDTH = 320;
export const NAVIGATION_ITEMS: NavigationItem[] = [
{ icon: <HomeIcon />, title: "首页", link: "/" },
{ icon: <ArticleIcon />, title: "新闻", link: "/posts" },
{ icon: <ArticleIcon />, title: "博客", link: "/posts" },
{
icon: <InfoIcon />, title: "信息中心", children: [
{ icon: <GavelIcon />, title: "用户协议", link: "/i/user-agreement" },

View File

@ -0,0 +1,30 @@
"use client";
import { useEffect, useRef } from "react";
import Zoomist from "zoomist";
import "zoomist/css";
export default function ImageViewer({ src, alt }: { src: string, alt: string }) {
const container = useRef<HTMLDivElement>(null);
useEffect(() => {
if (container.current) {
new Zoomist(container.current, {
maxScale: 5,
bounds: true,
pinchable: true,
});
}
});
return (
<div ref={container} className="zoomist-container h-fit">
<div className="zoomist-wrapper">
<div className="zoomist-image h-fit">
<img src={src} alt={alt} />
</div>
</div>
</div>
);
}

View File

@ -1,7 +1,30 @@
"use client";
import { PortableText } from "@portabletext/react";
import { client } from "@/sanity/lib/client";
import imageUrlBuilder from "@sanity/image-url";
import Link from "next/link";
import ImageViewer from "@/components/articles/ImageViewer";
export default function PostContent({ content }: { content: any }) {
return <PortableText value={content} />;
const imageBuilder = imageUrlBuilder(client);
const componentSet = {
types: {
image: ({ value }: any) => {
const image = imageBuilder.image(value);
return <ImageViewer src={image.url()} alt={value.alt} />;
}
},
marks: {
link: ({ children, value }: any) => {
const rel = !value.href.startsWith("/") ? "noreferrer noopener" : undefined;
return (
<Link href={value.href} rel={rel}>
{children}
</Link>
);
}
}
};
return <PortableText value={content} components={componentSet} />;
}

View File

@ -37,7 +37,8 @@
"react-dom": "^18",
"react-markdown": "^9.0.1",
"sanity": "^3.25",
"styled-components": "^6.0"
"styled-components": "^6.0",
"zoomist": "^2.0.11"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",