feat(global) new api rule, NextImage support, test openresty

app/blog/BlogPostCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Card, CardBody, CardFooter } from '@nextui-org/card';
 import { Chip, Image } from '@nextui-org/react';
+import NextImage from 'next/image';
 import Link from 'next/link';
 import { MdCalendarMonth, MdNorthEast } from 'react-icons/md';
 
@@ -28,16 +29,18 @@ function BlogPostCard({ post }: Props) {
                   isHoverable
             >
 
-                { header_img !== '' && <div className={ `w-full overflow-visible` }>
+
+                { header_img !== '' && <div className={ `w-full overflow h-80 relative` }>
                     <Image
+                        as={ NextImage }
                         alt={ 'cover picture' }
                         src={ header_img }
-                        className={ `z-20 h-80 w-full object-cover rounded-b-none` }
+                        className={ `w-full object-cover rounded-b-none` }
                         style={ {
                             'maskImage': 'linear-gradient(black 95%, transparent)',
                             'backdropFilter': 'blur(20px)'
                         } }
-                        width={ `100%` }
+                        fill
                         removeWrapper
                     ></Image>
                 </div> }

app/blog/fetch_posts_list.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 export default async function fetch_posts_list(): Promise<any> {
-    const response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post_list`);
+    const response = await axios(`${ process.env.BACKEND_URL }/get_post_list`);
     if (response.status !== 200) {
         throw new Error(response.statusText);
     }

app/blog/post/[id]/generate.tsx

@@ -1,5 +1,3 @@
-'use server';
-
 import React from 'react';
 import Markdown from 'react-markdown';
 import { Card, CardBody } from '@nextui-org/card';
@@ -19,7 +17,7 @@ async function Generate(props: Props) {
 
     let response: any;
     try {
-        response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post/${ props.id }`);
+        response = await axios(`${ process.env.BACKEND_URL }/get_post/${ props.id }`);
     } catch (e) {
         return (
             <Card className={ `w-full` }>
@@ -38,7 +36,7 @@ async function Generate(props: Props) {
             <Card className={ `w-full max-w-full relative` }>
                 <CardBody>
                     <Markdown
-                        className={ `p-5 max-w-full text-justify text-pretty会 prose prose-sm dark:prose-invert md:prose-md lg:prose-lg` }
+                        className={ `p-5 max-w-full text-justify text-pretty prose prose-sm dark:prose-invert md:prose-md lg:prose-lg` }
                         remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
                         rehypePlugins={ [ rehypeHighlight, rehypeRaw, rehypeSanitize ] }
                     >{ (post_data as any)['content'] }</Markdown>