Merge pull request #11 from paveg/additional-info

⚙️ Added additional information to the posts, except for footnotes

app/[...slug]/page.tsx

@@ -45,7 +45,7 @@ export async function generateStaticParams(): Promise<PageProps['params'][]> {
 }
 
 export default async function PagePage({ params }: PageProps) {
-  const pagePublishedDate = '2024-03-17'
+  const pagePublishedDate = '2024-03-17';
   const page = await getPageFromParams(params);
 
   if (!page) {

app/posts/[...slug]/page.tsx

@@ -2,10 +2,12 @@ import '@/styles/codes/prism-dracula.css';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
 import { ArticleJsonLd } from 'next-seo';
+import { ReaderIcon } from '@radix-ui/react-icons';
 import { allPosts } from 'contentlayer/generated';
 import { Mdx } from '@/components/mdx-components';
 import { TableOfContents } from '@/components/table-of-contents';
 import { cfg } from '@/utils/constants';
+import { CategoryBadge } from '@/components/category-badge';
 
 interface PostProps {
   params: {
@@ -79,12 +81,25 @@ export default async function PostPage({ params }: PostProps) {
         authorName={cfg.author}
         description={post?.description ?? ''}
       />
-      <h1 className="mb-4">{post.title}</h1>
-      {post.date && (
-        <p className="text-sm text-slate-700 dark:text-slate-200">
-          {formatDate(post.date)}
-        </p>
-      )}
+      <h1>{post.title}</h1>
+      <div className="flex gap-4 align-middle text-sm">
+        {post.date && (
+          <span className="text-slate-700 dark:text-slate-200">
+            {formatDate(post.date)}
+          </span>
+        )}
+        <span className="text-slate-700 dark:text-slate-200">
+          <CategoryBadge badgeString={post.category} />
+        </span>
+        {post.readingTime && (
+          <div className="flex gap-2">
+            <ReaderIcon className="h-4 w-4">{post.readingTime.text}</ReaderIcon>
+            <span className="text-slate-700 dark:text-slate-200">
+              {post.readingTime.text}
+            </span>
+          </div>
+        )}
+      </div>
       <hr className="my-4" />
       <div
         className="lg:grid lg:grid-cols-4 lg:gap-x-6"

components/category-badge.tsx

@@ -0,0 +1,24 @@
+import { Badge } from './ui/badge';
+
+type Props = {
+  badgeString?: string;
+};
+
+type BadgeTypes =
+  | 'Technology'
+  | 'Programming'
+  | 'Productivity'
+  | 'Lifestyle'
+  | 'Gadgets'
+  | 'Other';
+
+const toPascalCase = (str: string) => {
+  return [str]
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('');
+};
+
+export const CategoryBadge = ({ badgeString }: Props) => {
+  const bs = badgeString ? toPascalCase(badgeString) : 'Other';
+  return <Badge variant="secondary">{bs}</Badge>;
+};

components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

content/posts/sample.mdx

@@ -1,6 +1,7 @@
 ---
 title: Sample
 description: Sample post
+category: lifestyle
 date: 2020-01-01
 ---
 

content/posts/without-category-post.mdx

@@ -0,0 +1,9 @@
+---
+title: Without category post
+description: This post doesn't have a category.
+date: 2024-03-17
+---
+
+## As a premise
+
+This post doesn't have a category, so, please check it.

contentlayer.config.js

@@ -2,9 +2,11 @@ import { defineDocumentType, makeSource } from 'contentlayer/source-files';
 import rehypeSlug from 'rehype-slug';
 import rehypePrism from 'rehype-prism-plus';
 import rehypeCodeTitles from 'rehype-code-titles';
+import readingTime from 'reading-time';
 
 /** @type {import('contentlayer/source-files').ComputedFields} */
 const computedFields = {
+  readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
   slug: {
     type: 'string',
     resolve: (doc) => `/${doc._raw.flattenedPath}`,
@@ -47,6 +49,10 @@ export const Post = defineDocumentType(() => ({
       type: 'date',
       required: true,
     },
+    category: {
+      type: 'string',
+      required: false,
+    },
   },
   computedFields,
 }));

package.json

@@ -37,9 +37,11 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "reading-time": "^1.5.0",
     "rehype-code-titles": "^1.2.0",
     "rehype-prism-plus": "^2.0.0",
     "rehype-slug": "^6.0.0",
+    "remark-footnotes": "^4.0.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.7",