chore: upgrade nextjs 13
This commit is contained in:
DIYgod
parent
7a85628dcf
commit
3cae38c74b
|
|
@ -63,7 +63,7 @@
|
|||
"mdast-util-to-string": "3.1.0",
|
||||
"mdast-util-toc": "6.1.0",
|
||||
"nanoid": "4.0.0",
|
||||
"next": "12.3.1",
|
||||
"next": "13.0.0",
|
||||
"nextjs-progressbar": "0.0.16",
|
||||
"nodejieba": "2.6.0",
|
||||
"pica": "9.0.1",
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
"esbuild": "0.15.12",
|
||||
"esbuild-register": "3.3.3",
|
||||
"eslint": "8.26.0",
|
||||
"eslint-config-next": "12.3.1",
|
||||
"eslint-config-next": "13.0.0",
|
||||
"husky": "8.0.1",
|
||||
"lint-staged": "13.0.3",
|
||||
"postcss-import": "15.0.0",
|
||||
|
|
|
|||
393
pnpm-lock.yaml
393
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -118,18 +118,18 @@ export function DashboardLayout({
|
|||
href: link.href,
|
||||
})
|
||||
return (
|
||||
<Link href={link.href} key={link.href}>
|
||||
<a
|
||||
className={clsx(
|
||||
`flex px-2 h-8 text-sm items-center rounded-lg space-x-2`,
|
||||
active
|
||||
? `bg-gray-200 font-medium text-gray-800`
|
||||
: `hover:bg-gray-200 hover:bg-opacity-50`,
|
||||
)}
|
||||
>
|
||||
<span className={clsx(link.icon, "text-lg")}></span>
|
||||
<span>{link.text}</span>
|
||||
</a>
|
||||
<Link
|
||||
href={link.href}
|
||||
key={link.href}
|
||||
className={clsx(
|
||||
`flex px-2 h-8 text-sm items-center rounded-lg space-x-2`,
|
||||
active
|
||||
? `bg-gray-200 font-medium text-gray-800`
|
||||
: `hover:bg-gray-200 hover:bg-opacity-50`,
|
||||
)}
|
||||
>
|
||||
<span className={clsx(link.icon, "text-lg")}></span>
|
||||
<span>{link.text}</span>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -377,73 +377,73 @@ export const PagesManager: React.FC<{
|
|||
|
||||
{pages.data?.list?.map((page) => {
|
||||
return (
|
||||
<Link key={page.id} href={getPageEditLink(page)}>
|
||||
<a className="group relative hover:bg-zinc-100 rounded-lg py-3 px-3 transition-colors -mx-3 flex justify-between">
|
||||
<div className="min-w-0">
|
||||
{page.title ? (
|
||||
<div className="flex items-center">
|
||||
<span>{page.title}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-zinc-500 text-xs mt-1 truncate">
|
||||
<span>{page.summary?.content}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-zinc-400 text-xs mt-1">
|
||||
<span className="capitalize">
|
||||
{getPageVisibility(page).toLowerCase()}
|
||||
</span>
|
||||
<span className="mx-2">·</span>
|
||||
<span>
|
||||
{getPageVisibility(page) === PageVisibilityEnum.Draft
|
||||
? formatDate(page.date_updated)
|
||||
: formatDate(page.date_published)}
|
||||
</span>
|
||||
<Link
|
||||
key={page.id}
|
||||
href={getPageEditLink(page)}
|
||||
className="group relative hover:bg-zinc-100 rounded-lg py-3 px-3 transition-colors -mx-3 flex justify-between"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
{page.title ? (
|
||||
<div className="flex items-center">
|
||||
<span>{page.title}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-zinc-500 text-xs mt-1 truncate">
|
||||
<span>{page.summary?.content}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-zinc-400 text-xs mt-1">
|
||||
<span className="capitalize">
|
||||
{getPageVisibility(page).toLowerCase()}
|
||||
</span>
|
||||
<span className="mx-2">·</span>
|
||||
<span>
|
||||
{getPageVisibility(page) === PageVisibilityEnum.Draft
|
||||
? formatDate(page.date_updated)
|
||||
: formatDate(page.date_published)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-10 flex-shrink-0">
|
||||
<Menu>
|
||||
{({ open }: { open: boolean }) => (
|
||||
<>
|
||||
<Menu.Button as={Fragment}>
|
||||
<button
|
||||
className={clsx(
|
||||
`text-gray-400 relative z-50 w-8 h-8 rounded inline-flex invisible group-hover:visible justify-center items-center`,
|
||||
open ? `bg-gray-200` : `hover:bg-gray-200`,
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<EllipsisHorizontalIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</Menu.Button>
|
||||
<Menu.Items className="text-sm absolute z-20 right-0 bg-white shadow-modal rounded-lg overflow-hidden py-2 w-64">
|
||||
{getPageMenuItems(page).map((item) => {
|
||||
return (
|
||||
<Menu.Item key={item.text}>
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 flex w-full space-x-2 items-center px-3 hover:bg-gray-100"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
item.onClick()
|
||||
}}
|
||||
>
|
||||
<span className="inline-flex">
|
||||
{item.icon}
|
||||
</span>
|
||||
<span>{item.text}</span>
|
||||
</button>
|
||||
</Menu.Item>
|
||||
)
|
||||
})}
|
||||
</Menu.Items>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="w-10 flex-shrink-0">
|
||||
<Menu>
|
||||
{({ open }: { open: boolean }) => (
|
||||
<>
|
||||
<Menu.Button as={Fragment}>
|
||||
<button
|
||||
className={clsx(
|
||||
`text-gray-400 relative z-50 w-8 h-8 rounded inline-flex invisible group-hover:visible justify-center items-center`,
|
||||
open ? `bg-gray-200` : `hover:bg-gray-200`,
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<EllipsisHorizontalIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</Menu.Button>
|
||||
<Menu.Items className="text-sm absolute z-20 right-0 bg-white shadow-modal rounded-lg overflow-hidden py-2 w-64">
|
||||
{getPageMenuItems(page).map((item) => {
|
||||
return (
|
||||
<Menu.Item key={item.text}>
|
||||
<button
|
||||
type="button"
|
||||
className="h-10 flex w-full space-x-2 items-center px-3 hover:bg-gray-100"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
item.onClick()
|
||||
}}
|
||||
>
|
||||
<span className="inline-flex">{item.icon}</span>
|
||||
<span>{item.text}</span>
|
||||
</button>
|
||||
</Menu.Item>
|
||||
)
|
||||
})}
|
||||
</Menu.Items>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -56,29 +56,25 @@ export const SiteSwitcher: React.FC<Props> = ({
|
|||
<Link
|
||||
key={subscription.username}
|
||||
href={`/dashboard/${subscription.username}`}
|
||||
className="flex px-2 h-8 rounded-lg items-center justify-between hover:bg-zinc-100"
|
||||
>
|
||||
<a className="flex px-2 h-8 rounded-lg items-center justify-between hover:bg-zinc-100">
|
||||
<span className="truncate w-8/12">
|
||||
{subscription.name}
|
||||
<span className="truncate w-8/12">{subscription.name}</span>
|
||||
{activeSubscription?.username === subscription.username && (
|
||||
<span className="text-accent">
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
{activeSubscription?.username ===
|
||||
subscription.username && (
|
||||
<span className="text-accent">
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -42,13 +42,15 @@ export const SiteArchives: React.FC<{
|
|||
<h3 className="text-lg font-bold mb-1 text-zinc-700">{year}</h3>
|
||||
{posts.map((post) => {
|
||||
return (
|
||||
<Link key={post.id} href={`/${post.slug || post.id}`}>
|
||||
<a className="flex justify-between items-center p-2 rounded-lg -mx-2 hover:bg-zinc-100">
|
||||
<span className="text-zinc-700">{post.title}</span>
|
||||
<span className="text-zinc-400 mr-3 whitespace-nowrap">
|
||||
{formatDate(post.date_published, "MMM D")}
|
||||
</span>
|
||||
</a>
|
||||
<Link
|
||||
key={post.id}
|
||||
href={`/${post.slug || post.id}`}
|
||||
className="flex justify-between items-center p-2 rounded-lg -mx-2 hover:bg-zinc-100"
|
||||
>
|
||||
<span className="text-zinc-700">{post.title}</span>
|
||||
<span className="text-zinc-400 mr-3 whitespace-nowrap">
|
||||
{formatDate(post.date_published, "MMM D")}
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -20,54 +20,56 @@ export const SiteHome: React.FC<{
|
|||
{posts.list.map((post) => {
|
||||
const excerpt = post.summary?.content
|
||||
return (
|
||||
<Link key={post.id} href={`/${post.slug || post.id}`}>
|
||||
<a className="xlog-post hover:bg-zinc-100 transition-colors p-5 -mx-5 first:-mt-5 md:rounded-xl flex items-center">
|
||||
<div className="flex-1 flex justify-center flex-col">
|
||||
<h3 className="xlog-post-title text-2xl font-bold">
|
||||
{post.title}
|
||||
</h3>
|
||||
<div className="xlog-post-meta text-sm text-zinc-400 mt-1">
|
||||
<span className="xlog-post-date">
|
||||
{formatDate(post.date_published)}
|
||||
</span>
|
||||
<span className="xlog-post-tags ml-4 space-x-1">
|
||||
{post.tags
|
||||
?.filter((tag) => tag !== "post" && tag !== "page")
|
||||
.map((tag) => (
|
||||
<span
|
||||
className="hover:text-zinc-600"
|
||||
key={tag}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
router.push(`/tag/${tag}`)
|
||||
}}
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="xlog-post-excerpt mt-3 text-zinc-500"
|
||||
style={{
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{excerpt}
|
||||
{excerpt && "..."}
|
||||
</div>
|
||||
<Link
|
||||
key={post.id}
|
||||
href={`/${post.slug || post.id}`}
|
||||
className="xlog-post hover:bg-zinc-100 transition-colors p-5 -mx-5 first:-mt-5 md:rounded-xl flex items-center"
|
||||
>
|
||||
<div className="flex-1 flex justify-center flex-col">
|
||||
<h3 className="xlog-post-title text-2xl font-bold">
|
||||
{post.title}
|
||||
</h3>
|
||||
<div className="xlog-post-meta text-sm text-zinc-400 mt-1">
|
||||
<span className="xlog-post-date">
|
||||
{formatDate(post.date_published)}
|
||||
</span>
|
||||
<span className="xlog-post-tags ml-4 space-x-1">
|
||||
{post.tags
|
||||
?.filter((tag) => tag !== "post" && tag !== "page")
|
||||
.map((tag) => (
|
||||
<span
|
||||
className="hover:text-zinc-600"
|
||||
key={tag}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
router.push(`/tag/${tag}`)
|
||||
}}
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
{post.cover && (
|
||||
<div className="xlog-post-cover flex items-center relative w-24 h-24 ml-4">
|
||||
<Image
|
||||
className="object-cover rounded w-24 h-24"
|
||||
alt="cover"
|
||||
layout="fill"
|
||||
src={post.cover}
|
||||
></Image>
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
<div
|
||||
className="xlog-post-excerpt mt-3 text-zinc-500"
|
||||
style={{
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{excerpt}
|
||||
{excerpt && "..."}
|
||||
</div>
|
||||
</div>
|
||||
{post.cover && (
|
||||
<div className="xlog-post-cover flex items-center relative w-24 h-24 ml-4">
|
||||
<Image
|
||||
className="object-cover rounded w-24 h-24"
|
||||
alt="cover"
|
||||
fill={true}
|
||||
src={post.cover}
|
||||
></Image>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@ export const Image: React.FC<
|
|||
height?: number | string
|
||||
} & React.HTMLAttributes<HTMLImageElement> &
|
||||
ImageProps
|
||||
> = ({ layout, className, alt, src, width, height, ...props }) => {
|
||||
> = ({ fill, className, alt, src, width, height, ...props }) => {
|
||||
src = toIPFS(src)
|
||||
const [paddingTop, setPaddingTop] = React.useState("0")
|
||||
const [autoWidth, setAutoWidth] = React.useState(0)
|
||||
const autoSize = !width && !height && !layout
|
||||
const autoSize = !width && !height && !fill
|
||||
|
||||
return (
|
||||
<span
|
||||
|
|
@ -41,7 +41,7 @@ export const Image: React.FC<
|
|||
alt={alt}
|
||||
width={width}
|
||||
height={height}
|
||||
layout={autoSize ? "fill" : layout}
|
||||
fill={fill || autoSize}
|
||||
onLoad={({ target }) => {
|
||||
if (autoSize) {
|
||||
const { naturalWidth, naturalHeight } = target as HTMLImageElement
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ export const UniLink: React.FC<{
|
|||
}
|
||||
|
||||
return (
|
||||
<Link href={href}>
|
||||
<a className={className}>{children}</a>
|
||||
<Link href={href} className={className}>
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue