feat(site/blog): add wedding invitation

site/blog/app/(eg)/layout.tsx

@@ -0,0 +1,7 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

site/blog/app/(eg)/wedding/amap.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect } from "react";
+// import AMapLoader from "@amap/amap-jsapi-loader";
+
+export default function MapContainer() {
+  useEffect(() => {
+    let map: any;
+    // issue: https://github.com/vercel/next.js/issues/60862
+    (async () => {
+      const AMapLoader = (await import("@amap/amap-jsapi-loader")).default;
+      AMapLoader.load({
+        key: "5ffcb88a9d059f2b26f39122669061ff", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      })
+        .then((AMap) => {
+          map = new AMap.Map("container", {
+            // 设置地图容器id
+            viewMode: "3D", // 是否为3D地图模式
+            zoom: 11, // 初始化地图级别
+            center: [116.397428, 39.90923], // 初始化地图中心点位置
+          });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    })();
+
+    return () => {
+      map?.destroy();
+    };
+  }, []);
+
+  return <div id="container" className="w-full aspect-square" />;
+}

site/blog/app/(eg)/wedding/page.tsx

@@ -0,0 +1,21 @@
+import Video from "./video";
+import Amap from "./amap";
+
+export default function Wedding() {
+  return (
+    <>
+      <Video
+        src={
+          "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
+        }
+      />
+      <div className="text-xl text-center">王麒涵 & 付云英</div>
+      <div>2024/02/13｜甲辰年正明初四｜星期二</div>
+
+      <div>锦宴</div>
+      <div>四川省广元市利州区宝轮镇富丽东方天顺大厦</div>
+
+      <Amap />
+    </>
+  );
+}

site/blog/app/(eg)/wedding/video.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect } from "react";
+// issue: https://github.com/vercel/next.js/issues/60862
+// import Plyr from "plyr";
+import "plyr/dist/plyr.css";
+
+type VideoProps = {
+  src: string;
+};
+
+export default function Video({ src }: VideoProps) {
+  useEffect(() => {
+    let player: any = null;
+
+    // issue: https://github.com/vercel/next.js/issues/60862
+    (async () => {
+      const Plyr = (await import("plyr")).default;
+      player = new Plyr("#player");
+    })();
+
+    return () => {
+      player?.destroy();
+    };
+  }, []);
+  return (
+    <video
+      id="player"
+      play-inline="true"
+      controls
+      data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+    >
+      <source src={src} type="video/mp4" />
+      {/* <source src="/path/to/video.webm" type="video/webm" /> */}
+      <track
+        kind="captions"
+        label="English captions"
+        src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
+        src-lang="en"
+        default
+      />
+    </video>
+  );
+}

site/blog/app/(web)/layout.tsx

@@ -0,0 +1,14 @@
+import Header from "./components/Header";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      <main className="container mx-auto px-4 pt-10">{children}</main>
+    </>
+  );
+}

site/blog/app/page.tsx → site/blog/app/(web)/page.tsx

@@ -1,11 +1,11 @@
 import Image from "next/image";
 
-import Footer from "@/app/components/Footer";
-import Social from "@/app/components/Social";
-import Bizk from "@/app/components/Bizk";
+import Footer from "@/app/(web)/components/Footer";
+import Social from "@/app/(web)/components/Social";
+import Bizk from "@/app/(web)/components/Bizk";
+import QrCode from "@/app/(web)/assets/qr_code.png";
 
 import seo from "@/utils/seo";
-import QrCode from "@/app/assets/qr_code.png";
 
 export async function generateMetadata() {
   return seo({});

site/blog/app/posts/[slug]/opengraph-image.tsx → site/blog/app/(web)/posts/[slug]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from "next/og";
 import { default as ImageIcon } from "next/image";
 
-import { getPostBySlug } from "@/lib/posts";
+import { getPostBySlug } from "@/app/(web)/lib/posts";
 
 // export const runtime = "edge";
 

site/blog/app/posts/[slug]/page.tsx → site/blog/app/(web)/posts/[slug]/page.tsx

@@ -11,10 +11,10 @@ import Link from "next/link";
 // import rehypePrettyCode from "rehype-pretty-code";
 // import rehypeStringify from "rehype-stringify";
 
-import DateFormat from "@/app/components/DateFormat";
+import DateFormat from "@/app/(web)/components/DateFormat";
 
 import seo from "@/utils/seo";
-import { getPostBySlug, getAllPosts } from "@/lib/posts";
+import { getPostBySlug, getAllPosts } from "@/app/(web)/lib/posts";
 
 import MDXContent from "./MDXContent";
 

site/blog/app/posts/layout.tsx → site/blog/app/(web)/posts/layout.tsx

@@ -1,4 +1,4 @@
-import Footer from "@/app/components/Footer";
+import Footer from "@/app/(web)/components/Footer";
 export default function PostsLayout({
   children,
 }: {

site/blog/app/posts/page.tsx → site/blog/app/(web)/posts/page.tsx

@@ -1,10 +1,10 @@
 import Link from "next/link";
 
-import DateFormat from "@/app/components/DateFormat";
-import PostLabel from "@/app/components/PostLabel";
+import DateFormat from "@/app/(web)/components/DateFormat";
+import PostLabel from "@/app/(web)/components/PostLabel";
 import seo from "@/utils/seo";
 
-import { getAllPosts } from "@/lib/posts";
+import { getAllPosts } from "@/app/(web)/lib/posts";
 
 export async function generateMetadata() {
   return seo({ title: "Blog" });
@@ -29,6 +29,11 @@ export default async function Posts() {
               {post.meta?.title}
             </div>
             <div className="text-gray-400 text-sm leading-none flex items-center">
+              {post.meta.draft ? (
+                <span className="opacity-50 text-sm border border-orange-300 bg-orange-200 text-orange-600 rounded-sm px-1 mr-2">
+                  Draft
+                </span>
+              ) : null}
               <time className="my-3 inline-flex items-center">
                 <span className="i-heroicons:calendar mr-1 w-4 h-4 text-brand" />
                 <DateFormat value={post.meta?.date} short />

site/blog/app/projects/ism-analysis/page.tsx → site/blog/app/(web)/projects/ism-analysis/page.tsx

@@ -1,4 +1,4 @@
-import Footer from "@/app/components/Footer";
+import Footer from "@/app/(web)/components/Footer";
 import seo from "@/utils/seo";
 import Image from "next/image";
 

site/blog/app/projects/kupo-monitor/page.tsx → site/blog/app/(web)/projects/kupo-monitor/page.tsx

@@ -1,4 +1,4 @@
-import Footer from "@/app/components/Footer";
+import Footer from "@/app/(web)/components/Footer";
 import seo from "@/utils/seo";
 import Image from "next/image";
 

site/blog/app/projects/luban/page.tsx → site/blog/app/(web)/projects/luban/page.tsx

@@ -1,4 +1,4 @@
-import Footer from "@/app/components/Footer";
+import Footer from "@/app/(web)/components/Footer";
 import seo from "@/utils/seo";
 import Image from "next/image";
 

site/blog/app/projects/page.tsx → site/blog/app/(web)/projects/page.tsx

@@ -1,4 +1,4 @@
-import Footer from "@/app/components/Footer";
+import Footer from "@/app/(web)/components/Footer";
 import seo from "@/utils/seo";
 
 import AdmLink from "./components/AdmLink";

site/blog/app/layout.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { Analytics } from "@vercel/analytics/react";
 import NextTopLoader from "nextjs-toploader";
-import Header from "./components/Header";
 
 import "./styles/globals.scss";
 
@@ -27,8 +26,7 @@ export default function RootLayout({
           showSpinner={false}
           shadow={false}
         />
-        <Header />
-        <main className="container mx-auto px-4 pt-10">{children}</main>
+        {children}
         <Analytics />
       </body>
     </html>

site/blog/app/sitemap.ts

@@ -1,6 +1,6 @@
 import { MetadataRoute } from "next";
 
-import { getAllPosts } from "@/lib/posts";
+import { getAllPosts } from "@/app/(web)/lib/posts";
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   // 远程获取博客列表

site/blog/package.json

@@ -10,13 +10,15 @@
     "clean": "rm -rf .next && rm -rf node_modules"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
     "gray-matter": "^4.0.3",
     "next": "14.0.4",
     "next-mdx-remote": "^4.4.1",
     "nextjs-toploader": "^1.6.4",
     "photoswipe": "^5.4.3",
+    "plyr": "^3.7.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-use": "^17.4.2",

site/blog/tsconfig.json

@@ -19,7 +19,9 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@/web": ["./app/(web)/*"],
+      "@/eg": ["./app/(eg)/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],