From 92ff4ec7a71254f53813a87e367e99142cab5149 Mon Sep 17 00:00:00 2001 From: Tarcisio Date: Wed, 27 Sep 2023 15:33:12 -0300 Subject: [PATCH] new post assets structure --- contentlayer.config.ts | 76 +++++++++--------- posts/masterpice-css/index.mdx | 5 +- posts/server-components/index.mdx | 7 +- public/next.svg | 1 - public/op-default-img.png | Bin 0 -> 177566 bytes .../post-assets/masterpice-css/op-image.jpg | Bin .../server-components/op-image.jpg | Bin .../server-components/ubereats-loading.mp4 | Bin 0 -> 230837 bytes public/vercel.svg | 1 - 9 files changed, 47 insertions(+), 43 deletions(-) delete mode 100644 public/next.svg create mode 100644 public/op-default-img.png rename posts/masterpice-css/wallhaven-g869g7.jpg => public/post-assets/masterpice-css/op-image.jpg (100%) rename posts/server-components/wallhaven-g869g7.jpg => public/post-assets/server-components/op-image.jpg (100%) create mode 100644 public/post-assets/server-components/ubereats-loading.mp4 delete mode 100644 public/vercel.svg diff --git a/contentlayer.config.ts b/contentlayer.config.ts index ede3dda..52f3bef 100644 --- 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(?#{1,6})\s+(?.+)/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 index df482d1..41ae6fc 100644 --- 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 - +
@@ -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 Top # Bouncing back and forth diff --git a/posts/server-components/index.mdx b/posts/server-components/index.mdx index eed0293..3480a00 100644 --- 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 - +
@@ -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 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 +