new post assets structure

tarcisioandrade · Sep 27, 2023 · 92ff4ec · 92ff4ec
1 parent 14be99e
commit 92ff4ec
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 43 deletions.
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -1,49 +1,18 @@
+import { slugger } from "./src/utils/slugger";
 import { defineDocumentType, makeSource } from "contentlayer/source-files";
 import readingTime from "reading-time";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeSlug from "rehype-slug";
 import rehypeVideo from "rehype-video";
 import remarkGfm from "remark-gfm";
-import { slugger } from "./src/utils/slugger";
 
 export const Post = defineDocumentType(() => ({
-  name: "Post",
-  filePathPattern: `**/**/*.{md,mdx}`,
-  contentType: "mdx",
-  fields: {
-    title: { type: "string", required: true },
-    description: {
-      type: "string",
-      required: true,
-    },
-    publishedAt: {
-      type: "date",
-      required: true,
-    },
-    updatedAt: {
-      type: "date",
-    },
-    categories: {
-      type: "list",
-      of: { type: "string" },
-      required: true,
-    },
-    isPublished: {
-      type: "boolean",
-      default: true,
-    },
-  },
   computedFields: {
-    url: {
-      type: "string",
-      resolve: (post) => `/${post._raw.flattenedPath}`,
-    },
     readingTime: {
-      type: "json",
       resolve: (doc) => readingTime(doc.body.raw),
+      type: "json",
     },
     toc: {
-      type: "json",
       resolve: async (doc) => {
         const regulrExp = /\n(?<flag>#{1,6})\s+(?<content>.+)/g;
 
@@ -55,27 +24,62 @@ export const Post = defineDocumentType(() => ({
             return {
               level:
                 flag?.length == 1 ? "one" : flag?.length == 2 ? "two" : "three",
-              text: content,
               slug: content ? slugger(content) : undefined,
+              text: content,
             };
-          }
+          },
         );
 
         return headings;
       },
+      type: "json",
+    },
+    url: {
+      resolve: (post) => `/${post._raw.flattenedPath}`,
+      type: "string",
     },
   },
+  contentType: "mdx",
+  fields: {
+    categories: {
+      of: { type: "string" },
+      required: true,
+      type: "list",
+    },
+    description: {
+      required: true,
+      type: "string",
+    },
+    image: {
+      required: true,
+      type: "image",
+    },
+    isPublished: {
+      default: true,
+      type: "boolean",
+    },
+    publishedAt: {
+      required: true,
+      type: "date",
+    },
+    title: { required: true, type: "string" },
+    updatedAt: {
+      type: "date",
+    },
+  },
+  filePathPattern: `**/**/*.{md,mdx}`,
+  name: "Post",
 }));
 
 export default makeSource({
   contentDirPath: "posts",
   documentTypes: [Post],
   mdx: {
-    remarkPlugins: [remarkGfm],
     rehypePlugins: [
       rehypeSlug,
       [rehypeVideo, { details: false }],
       [rehypeAutolinkHeadings, { behavior: "append" }],
     ],
+    remarkPlugins: [remarkGfm],
   },
 });
diff --git a/posts/masterpice-css/index.mdx b/posts/masterpice-css/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: The masterpice css tricks and utilities
 publishedAt: 2023-07-01
+image: ../../public/post-assets/masterpice-css/op-image.jpg
 description: "This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server."
 categories:
   - CSS
@@ -42,7 +43,7 @@ To put React Server Components in context, it's helpful to understand how Server
 When I first started using React in 2015, most React setups used a “client-side” rendering strategy. The user would receive an HTML file that looked like this:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <body>
     <div id="root"></div>
@@ -80,7 +81,7 @@ let hello = "hello brightness";
 console.log(hello, "my old friend");
 ```
 
-![Image](https://res.cloudinary.com/drdzrfm15/image/upload/w_1000/q_auto/f_auto/v1694920648/andradev/server-components/wallhaven-m9j1pk_t0o7wm.jpg)
+<Image src="/post-assets/masterpice-css/op-image.jpg" alt="Image Top" />
 
 # Bouncing back and forth
 

diff --git a/posts/server-components/index.mdx b/posts/server-components/index.mdx
@@ -1,6 +1,7 @@
 ---
 title: Making Sense of React Server Components
 publishedAt: 2023-07-01
+image: ../../public/post-assets/masterpice-css/op-image.jpg
 description: "This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server. This is a significant paradigm shift, and it's caused a whole lot of confusion in the React community. In this tutorial, we'll explore this new world, and build an intuition for how it works, and how we can take advantage of it."
 categories:
   - nextjs
@@ -42,7 +43,7 @@ To put React Server Components in context, it's helpful to understand how Server
 When I first started using React in 2015, most React setups used a “client-side” rendering strategy. The user would receive an HTML file that looked like this:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <body>
     <div id="root"></div>
@@ -78,7 +79,7 @@ let hello = "hello brightness";
 console.log(hello, "my old friend");
 ```
 
-![Image](https://res.cloudinary.com/drdzrfm15/image/upload/w_1000/q_auto/f_auto/v1694920648/andradev/server-components/wallhaven-m9j1pk_t0o7wm.jpg)
+<Image src="/post-assets/masterpice-css/op-image.jpg" alt="Image Top" />
 
 # Bouncing back and forth
 
@@ -118,7 +119,7 @@ This course has been my full-time focus for almost two years now, and it include
 
 There's so much good stuff I'd love to tell you about. In addition to React itself, and all the bleeding-edge stuff we've alluded to in this blog post, you'll learn about my favourite parts of the React ecosystem. For example, you'll learn how to do next-level layout animations like this, using Framer ==Motion==:
 
-https://res.cloudinary.com/drdzrfm15/video/upload/v1695135961/andradev/server-components/ubereats-loading_rw4xdz.mp4
+<Video src="/post-assets/server-components/ubereats-loading.mp4" />
 
 <iframe
   src="https://codesandbox.io/embed/sandpack-project-yw1065?fontsize=14&hidenavigation=1&theme=dark"

diff --git a/public/next.svg b/public/next.svg
diff --git a/public/op-default-img.png b/public/op-default-img.png
diff --git a/posts/masterpice-css/wallhaven-g869g7.jpg → ...c/post-assets/masterpice-css/op-image.jpg b/posts/masterpice-css/wallhaven-g869g7.jpg → ...c/post-assets/masterpice-css/op-image.jpg
diff --git a/posts/server-components/wallhaven-g869g7.jpg → ...ost-assets/server-components/op-image.jpg b/posts/server-components/wallhaven-g869g7.jpg → ...ost-assets/server-components/op-image.jpg
diff --git a/public/post-assets/server-components/ubereats-loading.mp4 b/public/post-assets/server-components/ubereats-loading.mp4
diff --git a/public/vercel.svg b/public/vercel.svg