Merge pull request #11 from Chocolate1999:feat/new-blog-page

feat: new blog page

src/components/content/blog/BlogCard.tsx

@@ -4,7 +4,6 @@ import { HiOutlineClock, HiOutlineEye } from 'react-icons/hi';
 
 import Accent from '@/components/Accent';
 import Tag from '@/components/content/Tag';
-import CloudinaryImg from '@/components/images/CloudinaryImg';
 import UnstyledLink from '@/components/links/UnstyledLink';
 
 import { BlogFrontmatter, InjectedMeta } from '@/types/frontmatters';
@@ -36,20 +35,36 @@ export default function BlogCard({
         className='block h-full rounded-md focus:outline-none focus-visible:ring focus-visible:ring-primary-300'
         href={`/blog/${post.slug}`}
       >
-        <div className='relative'>
-          <CloudinaryImg
-            noStyle
-            className='pointer-events-none overflow-hidden rounded-t-md'
-            publicId={`banner/${post.banner}`}
-            alt='Photo taken from unsplash'
-            width={1200}
-            height={(1200 * 2) / 5}
-            aspect={{ height: 2, width: 5 }}
-            preview={false}
-          />
+        <div className='flex items-end p-4'>
+          {/* blog_info */}
+          <div className='w-full'>
+            <h4 className='text-gray-800 dark:text-gray-100'>{post.title}</h4>
+            <p className='mt-4 mb-2 text-sm text-gray-600 dark:text-gray-300'>
+              <span className='font-bold text-gray-800 dark:text-gray-100'>
+                {format(
+                  new Date(post.lastUpdated ?? post.publishedAt),
+                  'MMMM dd, yyyy'
+                )}
+              </span>
+            </p>
+            <p className='text-sm text-gray-700 dark:text-gray-300'>
+              {post.description}
+            </p>
+            <div className='mt-2 flex items-center justify-start gap-2 text-sm font-medium text-gray-600 dark:text-gray-300'>
+              <div className='flex items-center gap-1'>
+                <HiOutlineClock className='inline-block text-base' />
+                {post.readingTime.text}
+              </div>
+              <div className='flex items-center gap-1'>
+                <HiOutlineEye className='inline-block text-base' />
+                {post?.views?.toLocaleString() ?? '-'} views
+              </div>
+            </div>
+          </div>
+          {/* tags */}
           <div
             className={clsx(
-              'absolute bottom-0 w-full px-4 py-2',
+              'w-full px-4 py-2',
               'mt-2 flex flex-wrap justify-end gap-y-1 gap-x-2 text-sm text-black dark:text-gray-100'
             )}
           >
@@ -64,30 +79,6 @@ export default function BlogCard({
             ))}
           </div>
         </div>
-        <div className='p-4'>
-          <h4 className='text-gray-800 dark:text-gray-100'>{post.title}</h4>
-          <div className='mt-2 flex items-center justify-start gap-2 text-sm font-medium text-gray-600 dark:text-gray-300'>
-            <div className='flex items-center gap-1'>
-              <HiOutlineClock className='inline-block text-base' />
-              {post.readingTime.text}
-            </div>
-            <div className='flex items-center gap-1'>
-              <HiOutlineEye className='inline-block text-base' />
-              {post?.views?.toLocaleString() ?? '-'} views
-            </div>
-          </div>
-          <p className='mt-4 mb-2 text-sm text-gray-600 dark:text-gray-300'>
-            <span className='font-bold text-gray-800 dark:text-gray-100'>
-              {format(
-                new Date(post.lastUpdated ?? post.publishedAt),
-                'MMMM dd, yyyy'
-              )}
-            </span>
-          </p>
-          <p className='text-sm text-gray-700 dark:text-gray-300'>
-            {post.description}
-          </p>
-        </div>
       </UnstyledLink>
     </li>
   );

src/components/layout/Icon.tsx

@@ -3,7 +3,7 @@ import { SiBilibili } from 'react-icons/si';
 
 import ThemeButton from '@/components/buttons/ThemeButton';
 
-const Logo = () => {
+const Icon = () => {
   return (
     <div className='flex cursor-pointer gap-[24px] text-[22px]'>
       <a
@@ -25,4 +25,4 @@ const Logo = () => {
   );
 };
 
-export default Logo;
+export default Icon;

src/contents/blog/02-didi copy.mdx

@@ -0,0 +1,110 @@
+---
+title: '滴滴-橙心优选2'
+publishedAt: '2022-12-20'
+description: '滴滴-橙心优选前端秋招面试总结与复盘'
+banner: 'didi_l7o0am.jpg'
+tags: 'interview,vue,react'
+---
+
+## 介绍
+
+先说一下最终结果吧，第三面凉了。9 月 5 号下午 1 点开始，一直到下午 4 点 20 样子，持续三轮面试，最终倒在了第三轮。感受与总结我就放在最后吧。总体来说问的比较基础，没有深度挖掘知识点。另外，已经过了一天了，还是三面一起来的，可能会有问题遗漏掉，一般来说遗漏掉的都是比较简单，能轻松说出来的那种。
+
+## 一面
+
+- 1、自我介绍
+- 2、JS 基本数据类型（怎么判断基本数据类型）
+- 3、说说你对原型和原型链的理解
+- 4、水平垂直居中的几种方式，说一说
+- 5、说说你对深浅拷贝的理解（要求手撕深拷贝）
+- 6、输入一个 URL 到渲染页面的整个过程
+- 7、浏览器缓存有了解过嘛？说说看
+- 8、说一个你熟悉的排序算法，然后手写一下（简单写了一个冒泡）
+
+### 感受
+
+一面问的比较基础，也是比较顺利收到了二面通知
+
+## 二面
+
+- 1、自我介绍
+- 2、CSS 选择器优先级的理解
+- 3、CSS 定位的几种方式
+- 4、CSS 怎么清除浮动
+- 5、display 几种属性说一说
+- 6、水平垂直居中的几种方式
+- 7、父容器已知宽高，子容器宽高未知，怎样让子容器水平垂直居中
+- 8、css modules 你有了解过吗
+- 9、如果组件 css 命名冲突，你怎么解决
+- 10、设计模式你有了解过吗？说说单例模式
+- 11、call、apply、bind 的区别
+- 12、普通函数和箭头函数的区别
+- 13、项目中有用到 `debounce`，那你写一下防抖吧
+- 14、实现如下效果：当点击 `aaa` 时输出 0 ，当点击 `bbb` 输出 1，当点击`ccc` 输出 2
+
+```javascript
+<ul>
+  <li>aaa</li>
+  <li>bbb</li>
+  <li>ccc</li>
+</ul>
+```
+
+- 15、for 遍历时，如果用 `var` 来声明变量 `i` 会有什么问题，怎么解决这个问题？
+- 16、浏览器缓存你了解多少，说说看
+- 17、谈谈你对 `cookie` 的理解，`cookie` 有哪些字段，说说看
+- 18、`cookie` 和 `session` 的区别
+
+### 感受
+
+感觉有些问题，答的不是很好，但过了二面，手撕那块没啥问题。
+
+## 三面
+
+- 1、自我介绍
+- 2、聊大学经历
+- 3、你觉得学的最好的一门课
+
+> 因为网络这块知识准备的比较充足，就选了计算机网络，其它的与前端不太挂钩，也不太好扯。
+
+- 4、面试官对网络这门课教学方式很感兴趣，于是扯了挺久，扯到了网络建设项目（校运动会举行），扯到了最后排名，与第一名的差距在哪
+- 5、如果要你给一个非科班的人，讲网络这门课，你会怎么讲？
+- 6、网络里面你认为的最熟悉的章节（说了 HTTP、TCP 这块）
+- 7、那你说一下对称加密和非对称加密。为什么非对称加密更好，现在还是有用对称加密，你能说出原因吗？最好举一下生活中的例子
+- 8、你算法和数据结构咋样，做一道题吧
+
+> 上来就来了一道动态规划的题，想了一下，没啥思路，面试官就换了一道题
+
+- 9、算法题：求两个数组的交集
+
+### 感受
+
+10 分钟后收到了感谢信，这效率是真高啊。原以为秋招以收到滴滴意向书结束，但没想到还是倒在了三面这最后一步了。收到后不甘心是当然的，但是面试后的复盘是很重要的，接下来写一下对本次面试的总结吧
+
+## 总结
+
+`我很强，但是我很傲。` 从下午 1 点开始面，一直面到下午 4 点 20 左右，也是我第一次经历。面试完后，都感觉脑袋空荡荡的，啥也记不起来了。开头这句话，是我收到面试结果后想到的一句话。`我很强`：这或许就是面试失败后对自己的安慰吧，我很强，不要因为这个丢失了信心。
+
+`但是我很傲`：连面的过程是挺兴奋的，我从春招从未收到二面开始，到现在居然到了三面，就感觉离成功就差那么一步了。三面面完后，休息时间段期间，我甚至比较自信自己快要拿到滴滴意向书了。与实习公司同事还聊了一会，他们说自己也是聊天，聊着聊着就凉了。我还是对自己比较有信心，还例举了自己问了哪些问题。
+
+世界就是这样，永远不要笑别人，因为保不准那天你就成了故事里的主人公，成为了被笑的那个。
+
+没错，我也终究成为了那一个，甚至怀疑是不是弄错了，但过了一天后，复盘过后，发现确实有些地方没有到位。
+
+至于这个 `傲`，我还去查了查狮子座男生性格特点：
+
+> 在十二星座中，狮子座是最具有权威感与支配能力的星座。通常有一种贵族气息或是王者风范。受人尊重，做事相当独立，知道如何运用能力和权术以达到目的。本质是阳刚、钻制、具有太阳般的生气、宽宏大量、乐观、海派、光明磊落、不拘小节、心胸开阔。不过也会有顽固、傲慢、独裁的一面。同时，他们天生怀抱着崇高的理想，能够全力以赴、发挥旺盛的生命力为周遭的人、为弱者或正义而战。对弱者有慈悲心及同情心，对自己很有自信，擅长组织事务，喜欢有秩序;能够发挥创造的才华，使成果具有建设性、原创性，是个行动派。
+
+在过去，可能对星座这一块不太了解，也不会相信所说的性格特点啥的，但是现在回过头来看，这些性格特点真差不了太多。
+
+其实，这或许就是大家常在嘴边说起的年轻人吧，那种傲气，能力不够，简单事又不愿意做。
+
+尽管这次面试依旧凉了，但还是继续努力，在这里整理一下 9 月份规划：
+
+- 适当慢下来，整理复盘一下 8 月份面试出现的问题，及时查漏补缺
+- 亡羊补牢，将基础知识学的更扎实一点
+- 算法那一块也要坚持下去，保证让自己 9 月份刷完一轮专题路线
+
+至于对于面试其它感受，在此就不继续书写了，因为看到的文章并不一定能体会到我的过程。就好像读者看到的是一张风景照片，但可能没法体验到沿途的风景的那段过程。
+
+> 2020.9.6 晚有感而发，希望 9 月对自己更温柔一点。加油！

src/contents/blog/03 test copy.mdx

@@ -0,0 +1,10 @@
+---
+title: 'test2020'
+publishedAt: '2020-10-20'
+description: '滴滴-橙心优选前端秋招面试总结与复盘'
+tags: 'interview'
+---
+
+## 介绍
+
+先说一下最终结果吧，第三面凉了。9 月 5 号下午 1 点开始，一直到下午 4 点 20 样子，持续三轮面试，最终倒在了第三轮。感受与总结我就放在最后吧。总体来说问的比较基础，没有深度挖掘知识点。另外，已经过了一天了，还是三面一起来的，可能会有问题遗漏掉，一般来说遗漏掉的都是比较简单，能轻松说出来的那种。

src/contents/blog/03 test.mdx

@@ -0,0 +1,10 @@
+---
+title: 'test2020-2'
+publishedAt: '2020-10-20'
+description: '滴滴-橙面试总结与复盘'
+tags: 'interview'
+---
+
+## 介绍
+
+先说一下最终结果吧，第三面凉了。9 月 5 号下午 1 点开始，一直到下午 4 点 20 样子，持续三轮面试，最终倒在了第三轮。感受与总结我就放在最后吧。总体来说问的比较基础，没有深度挖掘知识点。另外，已经过了一天了，还是三面一起来的，可能会有问题遗漏掉，一般来说遗漏掉的都是比较简单，能轻松说出来的那种。

src/pages/blog.tsx

@@ -16,25 +16,35 @@ export default function IndexPage({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const isLoaded = useLoaded();
 
+  const getYear = (a: Date | string | number) => new Date(a).getFullYear();
+
+  const isSameYear = (a: Date | string | number, b: Date | string | number) =>
+    a && b && getYear(a) === getYear(b);
+
   return (
     <Layout>
       <Seo
         templateTitle='Blog'
         description='Thoughts, mental models, and tutorials about front-end development. Rebuild your mental model so front-end development can be predictable.'
       />
-
       <main>
-        <section className={clsx(isLoaded && 'fade-in-start min-h-screen')}>
-          <div className='layout mt-[60px] min-h-screen py-12'>
-            <h1 className='text-5xl dark:text-gray-100' data-fade='0'>
-              Blog
-            </h1>
-            <p className='mt-2 text-gray-600 dark:text-gray-300' data-fade='1'>
-              Thoughts, skill, and tutorials about front-end development.
-            </p>
-            <ul className=' mt-12 grid grid-cols-3 gap-4' data-fade='2'>
+        <section className={clsx(isLoaded && 'fade-in-start')}>
+          <div className='layout'>
+            <ul className='mx-8 mt-12 grid gap-4' data-fade='2'>
               {posts.length > 0 ? (
-                posts.map((post) => <BlogCard key={post.slug} post={post} />)
+                posts.map((post, index) => (
+                  <>
+                    {!isSameYear(
+                      post.publishedAt,
+                      posts[index - 1]?.publishedAt
+                    ) && (
+                      <span className='text-[24px] text-[#aaa]'>
+                        {getYear(post.publishedAt)}
+                      </span>
+                    )}
+                    <BlogCard key={post.slug} post={post} />
+                  </>
+                ))
               ) : (
                 <ContentPlaceholder />
               )}