feat(til): implement velite for T.I.Ls

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)
+    }))
+})

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

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]
 })

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} />

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