Merge pull request #22 from y3owk1n/develop

updated packages and fix cover image issue

contentlayer.config.ts

@@ -96,6 +96,10 @@ export const Post = defineDocumentType(() => ({
             type: "string",
             required: true,
         },
+        coverImage: {
+            type: "string",
+            required: true,
+        },
         date: {
             type: "date",
             required: true,

package.json

@@ -12,7 +12,7 @@
         "build": "next build && next-sitemap && yarn format"
     },
     "dependencies": {
-        "@heroicons/react": "^2.0.16",
+        "@heroicons/react": "^2.0.17",
         "@radix-ui/react-accordion": "^1.1.1",
         "@radix-ui/react-alert-dialog": "^1.0.3",
         "@radix-ui/react-aspect-ratio": "^1.0.2",
@@ -63,7 +63,7 @@
         "next-themes": "^0.2.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-hook-form": "^7.43.8",
+        "react-hook-form": "^7.43.9",
         "react-icons": "^4.8.0",
         "sharp": "^0.32.0",
         "tailwind-merge": "^1.11.0",
@@ -75,7 +75,7 @@
         "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
         "@next/eslint-plugin-next": "^13.2.4",
         "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/line-clamp": "^0.4.2",
+        "@tailwindcss/line-clamp": "^0.4.4",
         "@tailwindcss/typography": "^0.5.9",
         "@types/node": "^18.15.11",
         "@types/prettier": "^2.7.2",
@@ -98,9 +98,9 @@
         "remark-code-import": "^1.1.1",
         "remark-gfm": "^3.0.1",
         "shiki": "^0.14.1",
-        "tailwindcss": "^3.3.0",
+        "tailwindcss": "^3.3.1",
         "tailwindcss-bg-patterns": "^0.2.0",
-        "typescript": "^5.0.2",
+        "typescript": "^5.0.3",
         "unist-builder": "^3.0.1",
         "unist-util-visit": "^4.1.2"
     },

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

@@ -1,7 +1,6 @@
 import { notFound } from "next/navigation";
 import { allPosts } from "@/contentlayer/generated";
 
-import { DEVDOMAIN, DOMAIN, devEnvironment } from "@/lib/constants";
 import CoverImage from "@/components/CoverImage";
 import Date from "@/components/Date";
 import { Mdx } from "@/components/Mdx";
@@ -36,11 +35,7 @@ export default function Page({ params }: PageProps) {
 
             <CoverImage
                 title={content.title}
-                src={encodeURI(
-                    `${devEnvironment ? DEVDOMAIN : DOMAIN}/api/og-image/${
-                        content.title
-                    }`
-                )}
+                src={content.coverImage}
                 isEager
             />
 

src/app/posts/page.tsx

@@ -44,14 +44,7 @@ const Page = () => {
                         <CoverImage
                             slug={post.href}
                             title={post.title}
-                            src={encodeURI(
-                                `${
-                                    devEnvironment ? DEVDOMAIN : DOMAIN
-                                }/api/og-image/${post.title}`
-                            )}
-                            // src={`${
-                            //     devEnvironment ? DEVDOMAIN : DOMAIN
-                            // }/api/og-image?text=${post.title}`}
+                            src={post.cover}
                         />
                     </div>
                     <H3 className="font-serif">

src/components/CoverImage.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { twMerge } from "tailwind-merge";
 
@@ -11,10 +12,10 @@ type Props = {
 };
 
 const CoverImage = ({ title, src, slug, isEager = false }: Props) => {
-    const image2 = (
+    const image = (
         <AspectRatio ratio={2 / 1}>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
+            <Image
+                fill
                 loading={isEager ? "eager" : "lazy"}
                 className={twMerge(
                     "rounded-md object-cover",
@@ -34,10 +35,10 @@ const CoverImage = ({ title, src, slug, isEager = false }: Props) => {
                     href={slug}
                     passHref
                     aria-label={title}>
-                    {image2}
+                    {image}
                 </Link>
             ) : (
-                image2
+                image
             )}
         </div>
     );

src/components/examples/CommandPopoverDemo.tsx

@@ -29,7 +29,7 @@ import {
 type Status = {
     value: string;
     label: string;
-    icon: React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
+    icon: typeof FolderIcon;
 };
 
 const statuses: Status[] = [

src/content/post/bye-google-analytics-hi-umami.mdx

@@ -2,6 +2,7 @@
 title: Bye Google Analytics, Hi Umami
 description: As a digital marketers, we tend to track everything that we can. From recordings, heatmaps, proprietary trackers, profiling and more! For my job, it's perfect, but personally... I don't like getting tracked in any way.
 date: 2022-07-25T16:00:00.000Z
+coverImage: /assets/blog/bye-google-analytics-hi-umami/cover.png
 ---
 
 As a digital marketers, we tend to track everything that we can. From recordings, heatmaps, proprietary trackers, profiling and more! For my job, it's perfect, but personally... I don't like getting tracked in any way.

src/content/post/hello.mdx

@@ -2,6 +2,7 @@
 title: Hello Guys
 description: Hi, I'm Kyle. I've left this blog untouched for almost a year, but I'm re-activating it. Meanwhile, I decided to move my blog to a Next.js site.
 date: 2022-07-23T16:00:00.000Z
+coverImage: /assets/blog/hello/cover.png
 ---
 
 > Decided to re-activate my blog site.

src/content/post/supabase-trpc.mdx

@@ -2,6 +2,7 @@
 title: Supabase + tRPC = ❤️
 description: Next.js is amazing and Typescript made development even more amazing! The entire time i was finding a way to have end-to-end type safety solution until i met tRPC, almost perfect there.
 date: 2022-07-24T16:00:00.000Z
+coverImage: /assets/blog/supabase-trpc/cover.png
 ---
 
 [Next.js](https://nextjs.org/) is amazing and [Typescript](https://www.typescriptlang.org) made development even more amazing! The entire time I was finding a way to have an end-to-end type safety solution until I met [tRPC](https://trpc.io), almost perfect there.

src/content/post/tools-i-am-using-for-web-dev-2023.mdx

@@ -2,6 +2,7 @@
 title: Tools that i am using for web development in 2023
 description: As a digital marketers, we tend to track everything that we can. From recordings, heatmaps, proprietary trackers, profiling and more! For my job, it's perfect, but personally... I don't like getting tracked in any way.
 date: 2023-03-11T16:00:00.000Z
+coverImage: /assets/blog/tools-i-am-using-for-web-dev-2023/cover.png
 ---
 
 As a web developer (sort of, hobbist), using tools that are right for me is crucial to building and scaling modern applications. Over the years, I have had the opportunity to work with various technologies, and I have found a combination of tech stacks that work best for me. In this blog post, I will share the tech stacks that I am currently using to build modern web applications.

src/content/post/updated-next-13.mdx

@@ -2,6 +2,7 @@
 title: This blog is now officially on NextJS 13
 description: Am so excited about the changes on NextJS 13, and the best place to experiment the features is my personal blog!
 date: 2022-11-10T16:00:00.000Z
+coverImage: /assets/blog/updated-next-13/cover.png
 ---
 
 So, [Vercel](https://vercel.com/) announced [Next.JS 13](https://nextjs.org/blog/next-13) on 26/10/2022 and there's a lot of exciting new features were announced. To me, the biggest changes during the upgrade that I did for this blog is the [experimental app dir](https://beta.nextjs.org/docs/routing/fundamentals).

src/lib/contentlayerApi.ts

@@ -9,6 +9,7 @@ interface AllPosts {
     description: string;
     href: string;
     rawSlug: string;
+    cover: string;
 }
 
 interface NestedGroup {
@@ -42,6 +43,7 @@ export const allPostsAndSort: Array<AllPosts> = allPosts
         description: content.description,
         href: `/posts/${content.slugAsParams}`,
         rawSlug: content.slugAsParams,
+        cover: content.coverImage,
     }))
     .sort((a, b) => (a.date && b.date && a.date > b.date ? -1 : 1));
 
@@ -68,6 +70,7 @@ export const getAllPostsAndSort = (): Array<AllPosts> => {
         description: content.description,
         href: `/posts/${content.slugAsParams}`,
         rawSlug: content.slugAsParams,
+        cover: content.coverImage,
     }));
 
     const sorted = posts.sort((a, b) =>

yarn.lock

@@ -732,12 +732,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@heroicons/react@npm:^2.0.16":
-  version: 2.0.16
-  resolution: "@heroicons/react@npm:2.0.16"
+"@heroicons/react@npm:^2.0.17":
+  version: 2.0.17
+  resolution: "@heroicons/react@npm:2.0.17"
   peerDependencies:
     react: ">= 16"
-  checksum: 1e51bfec722bfd68f27fd4f37a024141938eb4b0058c3eab073a6d1aa08cf4f6deb1e8533ca85473cb16be1d1b528e2d57b8617f8b967e66292bf243daec5dd0
+  checksum: 31677c9b95de4ea92efa205c7a803c33003d3203b0cebf9ca74522485e5351caff7070cbd898885bf050f181682cab8d4815cbef0e7624c56d3312cdf50d2cb9
   languageName: node
   linkType: hard
 
@@ -2405,12 +2405,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/line-clamp@npm:^0.4.2":
-  version: 0.4.2
-  resolution: "@tailwindcss/line-clamp@npm:0.4.2"
+"@tailwindcss/line-clamp@npm:^0.4.4":
+  version: 0.4.4
+  resolution: "@tailwindcss/line-clamp@npm:0.4.4"
   peerDependencies:
     tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
-  checksum: 26b8135df24fff51c3d3790ae795bdc12bc4a7113fa22dcab80568ae6ee00710e2ed4154048958c472bb654061f0f1573b7ac5e004ae6222cbd5ac6fcf199478
+  checksum: 3d2ad992aa9263fe9b5cdb23bcfca521a6ab00f65e0f7167be35d2cb46b1635af72889ff9f6d5b2febf5aa5a36e3128eaad8ed43e43af4512c74c74f1058c4c0
   languageName: node
   linkType: hard
 
@@ -3572,7 +3572,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "blog@workspace:."
   dependencies:
-    "@heroicons/react": ^2.0.16
+    "@heroicons/react": ^2.0.17
     "@ianvs/prettier-plugin-sort-imports": ^3.7.2
     "@next/eslint-plugin-next": ^13.2.4
     "@radix-ui/react-accordion": ^1.1.1
@@ -3600,7 +3600,7 @@ __metadata:
     "@radix-ui/react-toggle": ^1.0.2
     "@radix-ui/react-tooltip": ^1.0.5
     "@tailwindcss/forms": ^0.5.3
-    "@tailwindcss/line-clamp": ^0.4.2
+    "@tailwindcss/line-clamp": ^0.4.4
     "@tailwindcss/typography": ^0.5.9
     "@tiptap/extension-bubble-menu": ^2.0.1
     "@tiptap/extension-code-block-lowlight": ^2.0.1
@@ -3642,7 +3642,7 @@ __metadata:
     prettier-plugin-tailwindcss: ^0.2.6
     react: 18.2.0
     react-dom: 18.2.0
-    react-hook-form: ^7.43.8
+    react-hook-form: ^7.43.9
     react-icons: ^4.8.0
     rehype-autolink-headings: ^6.1.1
     rehype-pretty-code: ^0.9.4
@@ -3653,10 +3653,10 @@ __metadata:
     sharp: ^0.32.0
     shiki: ^0.14.1
     tailwind-merge: ^1.11.0
-    tailwindcss: ^3.3.0
+    tailwindcss: ^3.3.1
     tailwindcss-animate: ^1.0.5
     tailwindcss-bg-patterns: ^0.2.0
-    typescript: ^5.0.2
+    typescript: ^5.0.3
     unist-builder: ^3.0.1
     unist-util-visit: ^4.1.2
     zod: ^3.21.4
@@ -8910,12 +8910,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hook-form@npm:^7.43.8":
-  version: 7.43.8
-  resolution: "react-hook-form@npm:7.43.8"
+"react-hook-form@npm:^7.43.9":
+  version: 7.43.9
+  resolution: "react-hook-form@npm:7.43.9"
   peerDependencies:
     react: ^16.8.0 || ^17 || ^18
-  checksum: 1042b68950e1756dd907e7eb904c6efdf04f126a48797b25e8793705d930f7bbff2cc07f0ec7ea4c52272e808a359ae157742c551defa3b3fd0952ff414bd3e3
+  checksum: 65b94de625f2b7921c4e856bf0abbe142bfe06c052217bd1bcc3a842e2cc37fa3a3e03758119dc038bbcf5edb49e02c29206528b80b201f9a4d601471ef78153
   languageName: node
   linkType: hard
 
@@ -9899,9 +9899,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "tailwindcss@npm:3.3.0"
+"tailwindcss@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "tailwindcss@npm:3.3.1"
   dependencies:
     arg: ^5.0.2
     chokidar: ^3.5.3
@@ -9932,7 +9932,7 @@ __metadata:
   bin:
     tailwind: lib/cli.js
     tailwindcss: lib/cli.js
-  checksum: 00a9c603064b15e57be96603112a9e6385b1d1dc229fc49e9267d7f1fd0588a91e07e413ab9422e54afd49fffe9667f317eb5a4e49c44353342128fa3dbb8b0c
+  checksum: 966ba175486fb65ef3dd76aa8ec6929ff1d168531843ca7d5faf680b7097c36bf5f9ca385b563cdfdff935bb2bd37ac5998e877491407867503cc129d118bf93
   languageName: node
   linkType: hard
 
@@ -10211,23 +10211,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "typescript@npm:5.0.2"
+"typescript@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "typescript@npm:5.0.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: bef1dcd166acfc6934b2ec4d72f93edb8961a5fab36b8dd2aaf6f4f4cd5c0210f2e0850aef4724f3b4913d5aef203a94a28ded731b370880c8bcff7e4ff91fc1
+  checksum: 3cce0576d218cb4277ff8b6adfef1a706e9114a98b4261a38ad658a7642f1b274a8396394f6cbff8c0ba852996d7ed2e233e9b8431d5d55ac7c2f6fea645af02
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^5.0.2#~builtin<compat/typescript>":
-  version: 5.0.2
-  resolution: "typescript@patch:typescript@npm%3A5.0.2#~builtin<compat/typescript>::version=5.0.2&hash=1f5320"
+"typescript@patch:typescript@^5.0.3#~builtin<compat/typescript>":
+  version: 5.0.3
+  resolution: "typescript@patch:typescript@npm%3A5.0.3#~builtin<compat/typescript>::version=5.0.3&hash=1f5320"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: bdbf3d0aac0d6cf010fbe0536753dc19f278eb4aba88140dcd25487dfe1c56ca8b33abc0dcd42078790a939b08ebc4046f3e9bb961d77d3d2c3cfa9829da4d53
+  checksum: 9ec0a8eed38d46cc2c8794555b7674e413604c56c159f71b8ff21ce7f17334a44127a68724cb2ef8221ff3b19369f8f05654e8a5266621d7d962aeed889bd630
   languageName: node
   linkType: hard