add bundle-analyzer and post tags

Signed-off-by: Shreyans Jain <shreyans@shreyans.sh>

.github/workflows/nextjs_bundle_analysis.yml

@@ -0,0 +1,119 @@
+# Copyright (c) HashiCorp, Inc.
+# SPDX-License-Identifier: MPL-2.0
+
+name: "Next.js Bundle Analysis"
+
+on:
+    pull_request:
+    push:
+        branches:
+            - main # change this if your default branch is named differently
+    workflow_dispatch:
+
+defaults:
+    run:
+        # change this if your nextjs app does not live at the root of the repo
+        working-directory: ./
+
+permissions:
+    contents: read # for checkout repository
+    actions: read # for fetching base branch bundle stats
+    pull-requests: write # for comments
+
+jobs:
+    analyze:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Install Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: latest
+
+            - name: Install bun
+              uses: oven-sh/setup-bun@v1
+
+            - name: Install dependencies
+              run: bun install
+
+            - name: Restore next build
+              uses: actions/cache@v3
+              id: restore-build-cache
+              env:
+                  cache-name: cache-next-build
+              with:
+                  path: .next/cache
+                  key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+            - name: Build next.js app
+              run: bun run build
+
+            # Here's the first place where next-bundle-analysis' own script is used
+            # This step pulls the raw bundle stats for the current bundle
+            - name: Analyze bundle
+              run: npx -p nextjs-bundle-analysis report
+
+            - name: Upload bundle
+              uses: actions/upload-artifact@v3
+              with:
+                  name: bundle
+                  path: .next/analyze/__bundle_analysis.json
+
+            - name: Download base branch bundle stats
+              uses: dawidd6/action-download-artifact@v2
+              if: success() && github.event.number
+              with:
+                  workflow: nextjs_bundle_analysis.yml
+                  branch: ${{ github.event.pull_request.base.ref }}
+                  path: .next/analyze/base
+
+            # And here's the second place - this runs after we have both the current and
+            # base branch bundle stats, and will compare them to determine what changed.
+            # There are two configurable arguments that come from package.json:
+            #
+            # - budget: optional, set a budget (bytes) against which size changes are measured
+            #           it's set to 350kb here by default, as informed by the following piece:
+            #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+            #
+            # - red-status-percentage: sets the percent size increase where you get a red
+            #                          status indicator, defaults to 20%
+            #
+            # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+            # entry in your package.json file.
+            - name: Compare with base branch bundle
+              if: success() && github.event.number
+              run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+
+            - name: Get Comment Body
+              id: get-comment-body
+              if: success() && github.event.number
+              # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
+              run: |
+                  echo "body<<EOF" >> $GITHUB_OUTPUT
+                  echo "$(cat .next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
+                  echo EOF >> $GITHUB_OUTPUT
+
+            - name: Find Comment
+              uses: peter-evans/find-comment@v2
+              if: success() && github.event.number
+              id: fc
+              with:
+                  issue-number: ${{ github.event.number }}
+                  body-includes: "<!-- __NEXTJS_BUNDLE -->"
+
+            - name: Create Comment
+              uses: peter-evans/create-or-update-comment@v2
+              if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+              with:
+                  issue-number: ${{ github.event.number }}
+                  body: ${{ steps.get-comment-body.outputs.body }}
+
+            - name: Update Comment
+              uses: peter-evans/create-or-update-comment@v2
+              if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+              with:
+                  issue-number: ${{ github.event.number }}
+                  body: ${{ steps.get-comment-body.outputs.body }}
+                  comment-id: ${{ steps.fc.outputs.comment-id }}
+                  edit-mode: replace

contentlayer.config.ts

@@ -21,6 +21,12 @@ const Post = defineDocumentType(() => ({
             required: true,
             type: "date",
         },
+        tags: {
+            description: "The tags of the post",
+            of: { type: "string" },
+            required: false,
+            type: "list",
+        },
         title: {
             description: "The title of the post",
             required: true,

next.config.mjs

@@ -21,23 +21,28 @@ const config = {
         useDeploymentIdServerActions: true,
     },
     reactStrictMode: true,
-    transpilePackages: ["react-markdown", "remark-gfm"],
+    transpilePackages: ["react-markdown", "remark-gfm", "@contentlayer/core"],
 }
 
-export default withSentryConfig(
-    // @ts-expect-error Contentlayer NextConfig type issue
-    withContentlayer(config),
-    {
-        org: "shreyans-jain-org",
-        project: "shreyans-sh",
-        silent: true,
-    },
-    {
+const sentryConfig = {
+    options: {
         automaticVercelMonitors: true,
         disableLogger: true,
         hideSourceMaps: true,
         transpileClientSDK: false,
         tunnelRoute: "/monitoring",
         widenClientFileUpload: true,
     },
+    webpack: {
+        org: "shreyans-jain-org",
+        project: "shreyans-sh",
+        silent: true,
+    },
+}
+
+export default withSentryConfig(
+    // @ts-expect-error Contentlayer NextConfig type issue
+    withContentlayer(config),
+    sentryConfig.webpack,
+    sentryConfig.options,
 )

package.json

@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@types/eslint": "^8.44.8",
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
@@ -67,6 +67,12 @@
     "postcss": "^8.4.32",
     "prettier": "^3.1.0",
     "tailwindcss": "insiders",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
+  },
+  "nextBundleAnalysis": {
+    "budget": null,
+    "budgetPercentIncreaseRed": 20,
+    "minimumChangeThreshold": 0,
+    "showDetails": true
   }
-}
+}

posts/hello-universe.mdx

@@ -1,6 +1,9 @@
 ---
 title: Hello, Universe!
-brief: The beginning of a new journey.
+brief: The beginning of a new journey
+tags:
+    - Introduction
+    - Personal
 date: 2023-12-03
 ---
 

src/app/(pages)/blog/[slug]/page.tsx

@@ -1,21 +1,29 @@
+import { type Metadata } from "next"
+
 import { allPosts } from "contentlayer/generated"
 // import { format, parseISO } from "date-fns"
 import { useMDXComponent } from "next-contentlayer/hooks"
 
 import components from "@/components/mdx"
 import { Separator } from "@/components/shadcn/separator"
+import { siteConfig } from "@/config/site"
 
 export const generateStaticParams = () =>
     allPosts.map((post) => ({
         slug: post._raw.flattenedPath,
     }))
 
-export const generateMetadata = ({ params }: { params: { slug: string } }) => {
-    console.log(allPosts)
+export const generateMetadata = ({
+    params,
+}: {
+    params: { slug: string }
+}): Metadata => {
+    const post = allPosts.find(
+        (post) => post._raw.flattenedPath === params.slug,
+    )
     return {
-        title: `${allPosts.find(
-            (post) => post._raw.flattenedPath === params.slug,
-        )?.title} | Shreyans' Blog`,
+        keywords: siteConfig.baseKeywords.concat(post?.tags ?? []),
+        title: `${post?.title} - Blog`,
     }
 }
 

src/app/(pages)/blog/page.tsx

@@ -5,7 +5,7 @@ import { allPosts } from "contentlayer/generated"
 import { Button } from "@/components/shadcn/button"
 
 export const metadata = {
-    title: { default: "Shreyans' Blog", template: `%s | Shreyans' Blog` },
+    title: "Shreyans' Blog",
 }
 
 const Page = () => {

src/app/(pages)/layout.tsx

@@ -24,13 +24,7 @@ export const metadata: Metadata = {
     creator: siteConfig.name,
     description: siteConfig.description,
     formatDetection: { email: true, telephone: true },
-    keywords: [
-        "Shreyans Jain",
-        "DestroyerXyz",
-        "Developer",
-        "Blog",
-        "Portfolio",
-    ],
+    keywords: siteConfig.baseKeywords,
     metadataBase: new URL(siteConfig.url),
     openGraph: {
         description: siteConfig.description,
@@ -84,9 +78,7 @@ export default function RootLayout({
             lang="en"
         >
             <body
-                className={cn(
-                    "mx-auto flex h-fit min-h-screen max-w-xl flex-col items-center justify-between gap-2 px-4 text-base sm:max-w-[46rem]",
-                )}
+                className="mx-auto flex h-fit min-h-screen max-w-xl flex-col items-center justify-between gap-2 px-4 text-base antialiased sm:max-w-[46rem]"
                 id="body"
             >
                 {/* <TRPCReactProvider headers={headers()}> */}

src/config/site.ts

@@ -1,13 +1,20 @@
 export const siteConfig = {
+    baseKeywords: [
+        "Shreyans Jain",
+        "DestroyerXyz",
+        "Developer",
+        "Blog",
+        "Portfolio",
+    ],
     // ogImage: "https://ui.shadcn.com/og.jpg",
-    description: "Developer ~ Entrepreneur ~ Student",
+    description: "Developer ~ Entrepreneur ~ Student" as const,
     links: {
         github: "https://github.com/destroyerxyz/shreyans.sh",
         linkedin: "https://www.linkedin.com/in/sjain07/",
         twitter: "https://twitter.com/Destroyer_Xyz",
-    },
-    name: "Shreyans Jain",
-    url: "https://shreyans.sh",
-} as const
+    } as const,
+    name: "Shreyans Jain" as const,
+    url: "https://shreyans.sh" as const,
+}
 
 export type SiteConfig = typeof siteConfig