From 18d6175e889e0d72cd6761ceeb79875f79ff6f5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Mon, 26 Feb 2024 12:51:40 +0000
Subject: [PATCH] feat(til): implement velite for T.I.Ls

---
 content/collections/{post.ts => posts.ts}     |  0
 content/collections/tils.ts                   | 19 ++++++++++++++
 content/definitions/Til.ts                    | 26 -------------------
 .../til/2023_12_11-random_strings_in_rust.mdx |  2 +-
 contentlayer.config.ts                        |  9 +------
 src/app/blog/til/page.tsx                     | 10 +++----
 velite.config.ts                              |  5 ++--
 7 files changed, 28 insertions(+), 43 deletions(-)
 rename content/collections/{post.ts => posts.ts} (100%)
 create mode 100644 content/collections/tils.ts
 delete mode 100644 content/definitions/Til.ts

diff --git a/content/collections/post.ts b/content/collections/posts.ts
similarity index 100%
rename from content/collections/post.ts
rename to content/collections/posts.ts
diff --git a/content/collections/tils.ts b/content/collections/tils.ts
new file mode 100644
index 00000000..090c0484
--- /dev/null
+++ b/content/collections/tils.ts
@@ -0,0 +1,19 @@
+import { defineCollection, s } from 'velite'
+import { slug } from '~/lib/slug'
+
+export const tils = defineCollection({
+  name: 'TIL',
+  pattern: 'til/**/*.mdx',
+  schema: s
+    .object({
+      title: s.string(),
+      description: s.string(),
+      tags: s.array(s.string()).transform(data => data.map(tag => tag.trim())),
+      date: s.isodate(),
+      content: s.mdx()
+    })
+    .transform(data => ({
+      ...data,
+      slug: slug(data.title)
+    }))
+})
diff --git a/content/definitions/Til.ts b/content/definitions/Til.ts
deleted file mode 100644
index 9b008027..00000000
--- a/content/definitions/Til.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { defineDocumentType } from 'contentlayer/source-files'
-
-export const Til = defineDocumentType(() => ({
-  name: 'TIL',
-  contentType: 'mdx',
-  filePathPattern: 'til/*.mdx',
-  fields: {
-    title: {
-      type: 'string',
-      required: true
-    },
-    description: {
-      type: 'string',
-      required: true
-    },
-    tags: {
-      type: 'list',
-      of: { type: 'string' },
-      required: true
-    },
-    date: {
-      type: 'date',
-      required: true
-    }
-  }
-}))
diff --git a/content/til/2023_12_11-random_strings_in_rust.mdx b/content/til/2023_12_11-random_strings_in_rust.mdx
index 5f0e24ca..33d763a2 100644
--- a/content/til/2023_12_11-random_strings_in_rust.mdx
+++ b/content/til/2023_12_11-random_strings_in_rust.mdx
@@ -5,7 +5,7 @@ date: '2023-12-11'
 tags: [rust,rand,string,generate]
 ---
 
-For generate a random string with fixed size in Rust, we can use `Alphanumeric` trait from [rand]() crate:
+For generate a random string with fixed size in Rust, we can use `Alphanumeric{:rust}` trait from [`rand{:rust}`](https://docs.rs/rand/latest/rand/) crate:
 
 ```rust
 use rand::{distributions::Alphanumeric, Rng}; // 0.8
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index ca3c315d..3360be30 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -3,16 +3,9 @@
 import { makeSource } from 'contentlayer/source-files'
 
 import { Project } from './content/definitions/Project'
-import { Til } from './content/definitions/Til'
 import { AboutMe } from './content/definitions/AboutMe'
-import { remarkPlugins, rehypePlugins } from './content/plugin'
 
 export default makeSource({
   contentDirPath: 'content',
-  documentTypes: [Project, Til, AboutMe],
-  disableImportAliasWarning: true,
-  mdx: {
-    remarkPlugins,
-    rehypePlugins: rehypePlugins as unknown as undefined
-  }
+  documentTypes: [Project, AboutMe]
 })
diff --git a/src/app/blog/til/page.tsx b/src/app/blog/til/page.tsx
index 7b4dd259..937374b1 100644
--- a/src/app/blog/til/page.tsx
+++ b/src/app/blog/til/page.tsx
@@ -1,10 +1,9 @@
 import { Metadata } from 'next'
-import { useMDXComponent } from 'next-contentlayer/hooks'
-
-import { allTILs, TIL } from 'contentlayer/generated'
+import { tils, TIL } from '#content'
 
 import { Title } from '~/components/title'
 import { Date as DateUI } from '~/components/date'
+import { MDXContent } from '~/components/mdx-content'
 import { slug } from '~/lib/slug'
 
 import 'katex/dist/katex.min.css'
@@ -16,7 +15,6 @@ export const metadata: Metadata = {
 }
 
 const TILComponent = ({ til }: { til: TIL }) => {
-  const MDXContent = useMDXComponent(til.body.code)
   return (
     <div className="relative flex flex-col gap-6 border-b border-b-neutral-200 py-12 last:border-none dark:border-b-neutral-800 md:flex-row md:gap-1">
       <div className="top-24 h-fit flex-1 space-y-2 md:sticky md:space-y-5">
@@ -40,7 +38,7 @@ const TILComponent = ({ til }: { til: TIL }) => {
       </div>
       <div className="post-content til-content relative md:w-2/3">
         <span className="absolute -top-24" id={slug(til.title)} />
-        <MDXContent />
+        <MDXContent code={til.content} />
       </div>
     </div>
   )
@@ -51,7 +49,7 @@ export default function Page() {
     <div className="content-container m-auto space-y-4">
       <Title text="Today I Learned" />
       <div className="flex flex-col gap-3">
-        {allTILs
+        {tils
           .sort((a, b) => Number(new Date(b.date)) - Number(new Date(a.date)))
           .map(til => (
             <TILComponent til={til} key={til.date} />
diff --git a/velite.config.ts b/velite.config.ts
index a9c6387e..2c60a423 100644
--- a/velite.config.ts
+++ b/velite.config.ts
@@ -1,11 +1,12 @@
 import { defineConfig } from 'velite'
 import { PluggableList } from 'unified'
 
-import { posts } from './content/collections/post'
+import { posts } from './content/collections/posts'
+import { tils } from './content/collections/tils'
 import { rehypePlugins, remarkPlugins } from './content/plugin'
 
 const config = defineConfig({
-  collections: { posts },
+  collections: { posts, tils },
   mdx: {
     rehypePlugins: rehypePlugins as PluggableList,
     remarkPlugins: remarkPlugins as PluggableList