feat: sticky

blog/develop/使用JSONPath解析json数据.md

@@ -7,7 +7,6 @@ tags: [javascript, json, node]
 keywords: [javascript, json, node]
 description: jsonpath 能够帮助我们快速的从json数据中提取想要的数据
 image: /img/blog/jsonpath.png
-sticky: 3
 ---
 
 之前学习爬虫的时候，如果是 HTML 的数据，通过 xpath 或是 css 选择器，就能很快的获取我们想要的数据，如果是 json 有没有类似 xpath 这种，能够直接根据条件定位数据，而不需要自行 json 解析在遍历获取。答案是有的，也就是 JSONPath。

blog/develop/有了 Prisma 就别用 TypeORM 了.md

@@ -6,6 +6,7 @@ authors: kuizuo
 tags: [orm, prisma, typeorm]
 keywords: [orm, prisma, typeorm]
 image: https://img.kuizuo.cn/2024/0113174834-202401131748137.png
+sticky: 2
 ---
 
 要说 2024 年 Node.js 的 ORM 框架应该选择哪个？毫无疑问选 Prisma。至于为何，请听我细细道来。

blog/lifestyle/记 Github 学生认证.md

@@ -7,7 +7,6 @@ tags: [记录, github]
 keywords: [记录, github]
 description: 记录 Github 学生认证艰辛过程与经验分享。
 image: https://img.kuizuo.cn/202312270150041.png
-sticky: 1
 ---
 
 我个人是非常讨厌这些认证提交手续的，例如疫情健康报告，请假申请表等等，当然也包括这次 Github 学生认证。

blog/lifestyle/记 · 在 AI 公司入职一个月的体验与感悟.md

@@ -7,7 +7,7 @@ tags: [AI, 工作, 记录]
 keywords: [AI, 工作, 记录]
 description: 这篇文章分享了作者在一家 AI 公司入职一个月的心得和体会，包括工作中的挑战与成长。
 image: /img/blog/ai-people.png
-sticky: 1
+sticky: 10
 ---
 
 已经在一家 AI 公司入职了一个月，记得半年前探讨着[职业规划](/blog/2023-year-end-summary)，对坐班有些厌恶的我，没想到有一天也会开始通勤打卡。而经历了这一个月的工作，我对坐班的态度有所转变，开始理解这种工作方式对我的意义。是时候分享入职这期间的工作内容与感受。

blog/program/第二个博客搭建之Docusaurus.md

@@ -7,7 +7,6 @@ tags: [blog, docusaurus, project]
 keywords: [blog, docusaurus, project]
 description: 使用 docusaurus 搭建个人博客，并对其主题进行魔改
 image: /img/project/blog.png
-sticky: 5
 ---
 
 博客地址: [愧怍的小站](https://kuizuo.cn/)

blog/project/API-Service接口服务.md

@@ -7,7 +7,6 @@ tags: [nuxt, vite, vue, ssr]
 keywords: [nuxt, vite, vue, ssr]
 description: 基于 Nuxt3 的 API 接口服务网站，易于封装，调用，部署。
 image: https://img.kuizuo.cn/202312270328599.png
-sticky: 2
 ---
 
 挺早之前就想写个 api 接口服务，封装下自己收集的一些 api 接口，以便调用，正好最近在接触 SSR 框架，所以就使用 [Nuxt3](https://v3.nuxtjs.org/) 来编写该项目。

blog/reference/2023 · 谈谈职业规划.md

@@ -1,7 +1,7 @@
 ---
 slug: 2023-year-end-summary
 title: 2023 · 谈谈职业规划
-date: 2024-06-09
+date: 2023-12-25
 authors: kuizuo
 tags: [年终总结]
 keywords: [年终总结]

blog/reference/叙一名转专业+休学的大学生经历.md

@@ -7,7 +7,8 @@ tags: [年中总结, 人生感悟]
 keywords: [年中总结, 人生感悟]
 description: 叙述一名转专业+休学的大学生经历
 image: https://img.kuizuo.cn/202312270109542.png
-draft: true
+sticky: 999
+draft: true # 人生在世, 难免会有些挫折.
 ---
 
 我一般很少做年中总结，但是这上半年发生在我事情比较多，加上毕业季，万千感慨涌上心头。

src/components/landing/BlogSection/index.tsx

@@ -67,10 +67,7 @@ export default function BlogSection(): JSX.Element {
 
   return (
     <Section title={<Translate id="homepage.blog.title">近期博客</Translate>} icon="ri:quill-pen-line" href={'/blog'}>
-      <div
-        ref={ref}
-        className="flex flex-col gap-4 overflow-hidden rounded-card p-3 md:grid md:max-h-[640px] md:grid-cols-12"
-      >
+      <div ref={ref} className="flex flex-col gap-4 overflow-hidden rounded-card p-3 md:grid md:grid-cols-12">
         {posts.map((postGroup, index) => (
           <div className="col-span-4" key={index}>
             {postGroup.map((post, i) => (

src/plugin/plugin-content-blog/index.js

@@ -4,24 +4,49 @@ const { default: blogPlugin } = blogPluginExports
 
 async function blogPluginEnhanced(context, options) {
   const blogPluginInstance = await blogPlugin(context, options)
+  const { postsPerPage } = options
 
   return {
     ...blogPluginInstance,
     async contentLoaded({ content, allContent, actions }) {
+      // Sort blog with sticky
+      content.blogPosts.sort(
+        (a, b) =>
+          (b.metadata.frontMatter.sticky || 0) -
+          (a.metadata.frontMatter.sticky || 0),
+      )
+
+      // Group posts by postsPerPage
+      const groupedPosts = Array.from(
+        { length: Math.ceil(content.blogPosts.length / postsPerPage) },
+        (_, i) => ({
+          items: content.blogPosts
+            .slice(i * postsPerPage, (i + 1) * postsPerPage)
+            .map((post) => post.id),
+        }),
+      )
+
+      // Update paginated blog list
+      content.blogListPaginated.forEach((page, i) => {
+        page.items = groupedPosts[i] ? groupedPosts[i].items : []
+      })
+
       // Create default plugin pages
       await blogPluginInstance.contentLoaded({ content, allContent, actions })
 
       // Create your additional pages
-      const { blogPosts, blogTags } = content
+      const { blogTags } = content
       const { setGlobalData } = actions
 
       setGlobalData({
-        posts: blogPosts.slice(0, 10), // Only store 10 posts
-        postNum: blogPosts.length,
+        posts: content.blogPosts.slice(0, 10), // Only store 10 posts
+        postNum: content.blogPosts.length,
         tagNum: Object.keys(blogTags).length,
       })
     },
   }
 }
 
-module.exports = Object.assign({}, blogPluginExports, { default: blogPluginEnhanced })
+module.exports = Object.assign({}, blogPluginExports, {
+  default: blogPluginEnhanced,
+})

src/theme/BlogPostGridItems/index.tsx

@@ -1,8 +1,8 @@
-import type { Props as BlogPostItemsProps } from '@theme/BlogPostItems'
-
 import Link from '@docusaurus/Link'
+import type { BlogPostFrontMatter } from '@docusaurus/plugin-content-blog'
 import { cn } from '@site/src/lib/utils'
 import Tag from '@site/src/theme/Tag'
+import type { Props as BlogPostItemsProps } from '@theme/BlogPostItems'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useState } from 'react'
 
@@ -11,33 +11,34 @@ import styles from './styles.module.css'
 export default function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.Element {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
 
-  const data = items.map(({ content: BlogPostContent }, i) => {
-    const { metadata: blogMetaData, frontMatter } = BlogPostContent
-    const { title } = frontMatter
-    const { permalink, date, tags } = blogMetaData
+  const data = items.map(({ content: BlogPostContent }) => {
+    const { metadata, frontMatter } = BlogPostContent
+    const { title, sticky } = frontMatter as BlogPostFrontMatter & { sticky: number }
+    const { permalink, date, tags } = metadata
     const dateObj = new Date(date)
     const dateString = `${dateObj.getFullYear()}-${`0${dateObj.getMonth() + 1}`.slice(
       -2,
     )}-${`0${dateObj.getDate()}`.slice(-2)}`
 
     return {
-      title: title!,
+      title,
       link: permalink,
-      tags: tags,
+      tags,
       date: dateString,
+      sticky,
     }
   })
 
   return (
     <div className={cn('grid grid-cols-2 py-10 lg:grid-cols-3')}>
       {data.map((item, idx) => (
         <div
-          key={item?.link}
+          key={item.link}
           className="group relative block h-full w-full p-2"
           onMouseEnter={() => setHoveredIndex(idx)}
           onMouseLeave={() => setHoveredIndex(null)}
         >
-          <Link href={item?.link}>
+          <Link href={item.link}>
             <AnimatePresence>
               {hoveredIndex === idx && (
                 <motion.span
@@ -56,7 +57,7 @@ export default function BlogPostGridItems({ items }: BlogPostItemsProps): JSX.El
               )}
             </AnimatePresence>
 
-            <Card className="bg-blog">
+            <Card className={cn('relative bg-blog', item.sticky && styles.blogSticky)}>
               <CardTitle className="transition duration-300 hover:text-primary">{item.title}</CardTitle>
               <CardFooter className="flex justify-between pt-4">
                 <div

src/theme/BlogPostGridItems/styles.module.css

@@ -1,3 +1,19 @@
 .blogTags a {
   @apply p-px border-0 text-inherit hover:text-primary;
 }
+
+.blogSticky:after {
+  opacity: 1;
+  border: 10px solid var(--ifm-color-primary);
+  border-block-end: 10px solid transparent;
+  border-inline-start: 10px solid transparent;
+  border-start-end-radius: 8px;
+  position: absolute;
+  inset-block-start: 1px;
+  inset-inline-end: 1px;
+  transition: all 0.3s cubic-bezier(0.845, 0.045, 0.355, 1);
+  border-block-end: 10px solid transparent;
+  border-inline-start: 10px solid transparent;
+  border-start-end-radius: 6px;
+  content: '';
+}

src/theme/BlogPostItems/index.tsx

@@ -2,10 +2,9 @@ import { BlogPostProvider } from '@docusaurus/theme-common/internal'
 import BlogPostItem from '@theme/BlogPostItem'
 import type { Props } from '@theme/BlogPostItems'
 import { type Variants, motion } from 'framer-motion'
-import React from 'react'
 
 const variants: Variants = {
-  from: { opacity: 0.01, y: 100 },
+  from: { opacity: 0.001, y: 100 },
   to: i => ({
     opacity: 1,
     y: 0,