feat: recentpost edit article

app/admin/write/page.tsx

@@ -10,18 +10,24 @@ import gemoji from "@bytemd/plugin-gemoji";
 import highlight from "@bytemd/plugin-highlight";
 import medium from "@bytemd/plugin-medium-zoom";
 import gfm from "@bytemd/plugin-gfm";
-import { Input } from "antd";
+import { Input, message } from "antd";
 import { produce } from "immer";
 import ArticalOperations from "@/components/Article/SaveModal";
 import MainLayout from "@/components/Layouts/MainLayout";
 import PageNoAuth from "@/components/401";
 import { useSession } from "next-auth/react";
 import { useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+import { get } from "@/lib/fetch";
+import { ArticleType } from "@/types/article";
+import { Spin } from "antd";
+
 export default function WriteBlog() {
+ const searchParams = useSearchParams();
+ const id = searchParams.get("id") || "";
+ const [detail, setDetail] = useState<ArticleType.ArticleItem>();
  const [value, setValue] = useState("");
- const [articalInfo, setArticalInfo] = useState({
- title: "",
- });
+ const [title, setTitle] = useState("");
  const [canEdit, setCanEdit] = useState(false);
  const { data } = useSession();
 
@@ -30,6 +36,31 @@ export default function WriteBlog() {
  setCanEdit(canEdit);
  }, [data]);
 
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ if (id) {
+ setLoading(true);
+ get<ArticleType.ArticleItem>("articles/detail", {
+ id,
+ })
+ .then((res) => {
+ setDetail(res);
+ setValue(res.content);
+ setTitle(res.title);
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+ } else {
+ message.warning("id不存在");
+ }
+ return () => {
+ setLoading(false);
+ setDetail(undefined);
+ };
+ }, [id]);
+
  const plugins = [
  gfm(),
  medium(),
@@ -40,37 +71,43 @@ export default function WriteBlog() {
  ];
 
  const updateTitle = (e: ChangeEvent<HTMLInputElement>) => {
- setArticalInfo(
- produce((draft) => {
- draft.title = e.target.value;
- })
- );
+ setTitle(e.target.value);
  };
  return !canEdit ? (
  <PageNoAuth />
  ) : (
  <MainLayout>
- <div className="toolbox mb-2 flex">
- <Input onChange={(e) => updateTitle(e)} placeholder="文章标题" />
+ <Spin spinning={loading}>
+ <div className="toolbox mb-2 flex">
+ <Input
+ onChange={(e) => updateTitle(e)}
+ placeholder="文章标题"
+ value={title}
+ />
 
- <ArticalOperations content={value} title={articalInfo.title} />
- </div>
- <Editor
- uploadImages={async (files) => {
- return files.map((file) => {
- return {
- success: 1,
- url: URL.createObjectURL(file),
- };
- });
- }}
- plugins={plugins}
- value={value}
- mode="split"
- onChange={(v) => {
- setValue(v);
- }}
- />
+ <ArticalOperations
+ articleDetail={detail}
+ content={value}
+ title={title}
+ />
+ </div>
+ <Editor
+ uploadImages={async (files) => {
+ return files.map((file) => {
+ return {
+ success: 1,
+ url: URL.createObjectURL(file),
+ };
+ });
+ }}
+ plugins={plugins}
+ value={value}
+ mode="split"
+ onChange={(v) => {
+ setValue(v);
+ }}
+ />
+ </Spin>
  </MainLayout>
  );
 }

app/api/articles/create/route.ts

@@ -1,14 +1,24 @@
 import { BusinessCode, responseHandler } from "@/lib/fetch_utils";
 import connectMongo from "@/lib/mongoose";
 import Article from "models/article";
-export async function GET(request: Request) {}
-
 export async function POST(request: Request) {
  await connectMongo();
  const data = await request.json();
  try {
- const res = await Article.create<typeof Article>(data);
- return responseHandler(res);
+ if (data.id) {
+ const res = await Article.findByIdAndUpdate<typeof Article>({
+ _id: data.id
+ }, {
+ $set: {
+ ...data
+ }
+ });
+ return responseHandler(res);
+ } else {
+ const res = await Article.create<typeof Article>(data);
+ return responseHandler(res);
+ }
+
  } catch (err: any) {
  return responseHandler(null, 200, BusinessCode.abnormal, err.message);
  }

app/blog/[id]/page.tsx

@@ -10,6 +10,7 @@ import formatterDate from "@/lib/data_utils";
 import { motion } from "framer-motion";
 import { Viewer } from "@bytemd/react";
 import "juejin-markdown-themes/dist/mk-cute.css";
+import Link from "next/link";
 export default function ArticleDetail() {
  const { id } = useParams();
  const [detail, setDetail] = useState<ArticleType.ArticleItem>();
@@ -44,24 +45,33 @@ export default function ArticleDetail() {
  {detail ? (
  <div className="article-detail">
  <h1 className="font-semibold mb-4">{detail.title}</h1>
- <div className="text-sm text-slate-400 flex items-center">
- <div>
- <CalendarOutlined />
- <span className="pl-1">{formatterDate(detail.createdAt)}</span>
+ <div className="text-sm text-slate-400 flex items-center justify-between ">
+ <div className="flex items-center ">
+ <div>
+ <CalendarOutlined />
+ <span className="pl-1">
+ {formatterDate(detail.createdAt)}
+ </span>
+ </div>
+ <Divider type="vertical" className="mx-4!"></Divider>
+ <div>
+ <EyeOutlined />
+ <span className="pl-1">{detail.viewsCount}</span>
+ </div>
+ <Divider type="vertical" className="mx-2!"></Divider>
+ <motion.div
+ className="cursor-pointer"
+ whileHover={{ scale: 1.2 }}
+ >
+ <LikeOutlined />
+ <span className="pl-1">{detail.likesCount}</span>
+ </motion.div>
  </div>
- <Divider type="vertical" className="mx-4!"></Divider>
- <div>
- <EyeOutlined />
- <span className="pl-1">{detail.viewsCount}</span>
+ <div className="text-primary">
+  <span>{new Date(detail.updatedAt).toLocaleString()}</span>
+ <Divider type="vertical" className="mx-2!"></Divider>
+ <Link href={`/admin/write?id=${detail._id}`}>编辑</Link>
  </div>
- <Divider type="vertical" className="mx-2!"></Divider>
- <motion.div
- className="cursor-pointer"
- whileHover={{ scale: 1.2 }}
- >
- <LikeOutlined />
- <span className="pl-1">{detail.likesCount}</span>
- </motion.div>
  </div>
  <article className="mt-2">
  <Viewer value={detail.content}></Viewer>

app/layout.tsx

@@ -12,6 +12,9 @@ import Footer from "@/components/Footer";
 export const metadata: Metadata = {
  title: "汪浩的博客",
  description: "我的博客，记录一些技术，心得，经历等等",
+ viewport: "width=device-width, initial-scale=1",
+ keywords:
+ "博客，汪浩，Isaac Wang, Javascript, Vue, Css, Nextjs, Nodejs, Docker, web3，区块链",
 };
 
 export default function RootLayout({

app/manifest.ts

@@ -0,0 +1,20 @@
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+ return {
+ name: "汪浩（Isaac Wang）的博客",
+ short_name: "博客",
+ description: "个人博客，里面记录了个人的一些情况，以及技术文章等等",
+ start_url: "https://super-super.cn/",
+ display: 'standalone',
+ background_color: '#fff',
+ theme_color: '#fff',
+ icons: [
+ {
+ src: '/favicon.ico',
+ sizes: 'any',
+ type: 'image/x-icon',
+ },
+ ],
+ }
+}

app/page.tsx

@@ -4,12 +4,18 @@ import Works from "@/components/Works";
 // import Skills from "@/components/Skills";
 // import Projects from "@/components/Projects";
 // import Contact from "@/components/Contact";
+import { Suspense } from "react";
 import { ScrollProvider } from "@/components/Providers/ScrollProvider";
+import RecentPosts from "@/components/RecentPost";
+import { Spin } from "antd";
 export default function Home() {
  return (
  <ScrollProvider>
  <Intro></Intro>
  <Works></Works>
+ <Suspense fallback={<Spin />}>
+ <RecentPosts />
+ </Suspense>
  </ScrollProvider>
  );
 }

app/sitemap.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+ xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+ http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+
+<url>
+ <loc>https://www.super-super.cn/</loc>
+ <lastmod>2024-07-22T07:08:29+00:00</lastmod>
+ <priority>1.00</priority>
+</url>
+<url>
+ <loc>https://www.super-super.cn/blog</loc>
+ <lastmod>2024-07-22T07:08:29+00:00</lastmod>
+ <priority>0.80</priority>
+</url>
+<url>
+ <loc>https://www.super-super.cn/about</loc>
+ <lastmod>2024-07-22T07:08:29+00:00</lastmod>
+ <priority>0.80</priority>
+</url>
+
+
+</urlset>

components/Article/SaveForm.tsx

@@ -1,9 +1,12 @@
 import React, { useState } from "react";
 import type { FormProps, UploadFile, UploadProps } from "antd";
-import { Button, Upload, Form, Input, Select, Image } from "antd";
+import { Button, Upload, Form, Input, Select, Image, message } from "antd";
 import { CaretUpOutlined } from "@ant-design/icons";
 
 import { PlusOutlined } from "@ant-design/icons";
+import { useEffect } from "react";
+import { ArticleType } from "@/types/article";
+import { get } from "@/lib/fetch";
 export type FieldType = {
  categories: string[];
  tags: string[];
@@ -32,7 +35,8 @@ const categories = ["前端", "后端", "Android", "IOS", "问题记录", "杂
 interface Props {
  cancelFn: () => void;
  onFinish: (data: FieldType) => void;
- content?: String;
+ content?: string;
+ articleDetail?: ArticleType.ArticleItem;
  // saveAsDraft: (data: FieldType) => void;
 }
 
@@ -51,7 +55,27 @@ export default function ArticleForm(props: Props) {
  };
  // 预览
  const [visible, setVisible] = useState(false);
+ useEffect(() => {
+ form.setFieldValue("abstract", props.content?.slice(0, 100));
+ }, [props.content]);
 
+ useEffect(() => {
+ const { categories, tags, coverImg, abstract } = props.articleDetail || {};
+ form.setFieldsValue({
+ categories: categories || [],
+ tags: tags || [],
+ abstract: abstract,
+ });
+ if (coverImg) {
+ setFileList([
+ {
+ url: coverImg,
+ uid: "2",
+ name: "image",
+ },
+ ]);
+ }
+ }, [props.articleDetail]);
  return (
  <div className="absolute bg-white w-[600px] z-10 border rounded-lg shadow-md right-0 top-10 ">
  <h1 className="!text-black border-b p-3 mb-3">发布文章</h1>
@@ -123,7 +147,7 @@ export default function ArticleForm(props: Props) {
  name="abstract"
  rules={[{ required: true, message: "请选择标签" }]}
  >
- <Input.TextArea placeholder="请输入摘要" />
+ <Input.TextArea placeholder="请输入摘要" maxLength={100} />
  </Form.Item>
 
  <Form.Item wrapperCol={{ offset: 4, span: 16 }}>