Refactor and improve

src/app/blog/mdx-layout.tsx

@@ -1,38 +1,7 @@
 import { Page } from '@/core/components/page/page'
 import type { ReactNode } from 'react'
-import type { PostMetadata } from '@/posts'
 import { PostPage } from '@/features/posts/delivery/post.page'
-import { LeetBackground } from '@/core/components/leet-background/leet-background'
-
-/*
-export async function generateMetadata({ params }: Params): Promise<Metadata | void> {
-  const { title, date: publishedTime, image, summary } = params.metadata
-  const ogImage = image ? image : `${baseUrl}/og?title=${encodeURIComponent(title)}`
-
-  return {
-    title,
-    description: summary,
-    openGraph: {
-      title,
-      description: summary,
-      type: 'article',
-      publishedTime,
-      url: `${baseUrl}/blog/${params.slug}`,
-      images: [
-        {
-          url: ogImage,
-        },
-      ],
-    },
-    twitter: {
-      card: 'summary_large_image',
-      title,
-      description: summary,
-      images: [ogImage],
-    },
-  }
-}
-*/
+import type { PostMetadata } from '@/post-metadata'
 
 export default async function MdxLayout({ children, slug }: { children: ReactNode; slug: string }) {
   const { metadata } = (await import(`./(posts)/${slug}/page.mdx`)) as { metadata: PostMetadata }

src/app/og/route.tsx

@@ -1,14 +1,14 @@
 import { ImageResponse } from 'next/og'
 
 export function GET(request: Request) {
-  let url = new URL(request.url)
-  let title = url.searchParams.get('title') || 'César Alberca'
+  const url = new URL(request.url)
+  const title = url.searchParams.get('title') ?? 'César Alberca'
 
   return new ImageResponse(
     (
       <div tw="flex flex-col w-full h-full items-center justify-center bg-white">
         <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
-          <h2 tw="flex flex-col text-4xl font-bold tracking-tight text-left">{title}</h2>
+          <h2 tw="flex flex-col text-left">{title}</h2>
         </div>
       </div>
     ),

src/app/talks/mdx-layout.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
-import type { TalkMetadata } from '@/talks'
 import { TalkPage } from '@/features/talks/delivery/talk.page'
+import type { TalkMetadata } from '@/talk-metadata'
 
 export default async function MdxLayout({ children, slug }: { children: ReactNode; slug: string }) {
   const { metadata } = (await import(`./(talks)/${slug}/page.mdx`)) as { metadata: TalkMetadata }

src/core/components/leet-background/leet-background.tsx

@@ -46,6 +46,20 @@ export const LeetBackground: FC<PropsWithChildren<{ className?: string; image?:
     decoRef.current.innerHTML = getRandomString((itemRef.current.clientWidth * itemRef.current.clientHeight) / 50)
   }
 
+  function setBackground() {
+    if (decoRef.current && itemRef.current) {
+      controls.start({ opacity: image ? 1 : 0.25, transition: { duration: 0.5, ease: 'easeInOut' } })
+      const xPosition = itemRef.current.clientWidth / 2
+      const yPosition = itemRef.current.clientHeight / 2
+      itemRef.current.style.setProperty('--x', `${image ? xPosition : 0}px`)
+      itemRef.current.style.setProperty('--y', `${image ? yPosition : 0}px`)
+      itemRef.current.style.setProperty('--size', `${itemRef.current.clientWidth * 0.75}px`)
+      x.set(linearInterpolation(x.get(), 0, 0.1))
+      y.set(linearInterpolation(y.get(), 0, 0.1))
+      decoRef.current.innerHTML = getRandomString((itemRef.current.clientWidth * itemRef.current.clientHeight) / 50)
+    }
+  }
+
   return (
     <motion.div
       className={cn(
@@ -59,19 +73,7 @@ export const LeetBackground: FC<PropsWithChildren<{ className?: string; image?:
         ref={decoRef}
         animate={controls}
         onViewportEnter={() => {
-          if (decoRef.current && itemRef.current) {
-            controls.start({ opacity: image ? 1 : 0.25, transition: { duration: 0.5, ease: 'easeInOut' } })
-            const xPosition = itemRef.current.clientWidth / 2
-            const yPosition = itemRef.current.clientHeight / 2
-            itemRef.current.style.setProperty('--x', `${image ? xPosition : 0}px`)
-            itemRef.current.style.setProperty('--y', `${image ? yPosition : 0}px`)
-            itemRef.current.style.setProperty('--size', `${itemRef.current.clientWidth * 0.75}px`)
-            x.set(linearInterpolation(x.get(), 0, 0.1))
-            y.set(linearInterpolation(y.get(), 0, 0.1))
-            decoRef.current.innerHTML = getRandomString(
-              (itemRef.current.clientWidth * itemRef.current.clientHeight) / 50,
-            )
-          }
+          setBackground()
         }}
         style={{ backgroundImage: `url(${image})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}
         className={cn(

src/core/components/menu-link/menu-link.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import type { FC, PropsWithChildren } from 'react'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import styles from './menu-link.module.css'
+
+export const MenuLink: FC<
+  PropsWithChildren<{
+    to: string
+  }>
+> = ({ to, children }) => {
+  const currentPath = usePathname()
+
+  return (
+    <Link
+      href={to}
+      className={cn(
+        styles['menu-link'],
+        'font-medium  relative',
+        `${currentPath === to ? 'font-bold text-foreground' : ''}`,
+      )}
+    >
+      <span className="inline-block">{children}</span>
+    </Link>
+  )
+}

src/core/components/navbar/navbar.tsx

@@ -1,35 +1,11 @@
-'use client'
-
-import type { FC, PropsWithChildren, SVGProps } from 'react'
+import type { FC, SVGProps } from 'react'
 import { useTranslations } from 'next-intl'
 import { cn } from '@/lib/utils'
 import Image from 'next/image'
-import { usePathname } from 'next/navigation'
-import styles from './navbar.module.css'
 import Link from 'next/link'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Button } from '@/components/ui/button'
-
-const MenuLink: FC<
-  PropsWithChildren<{
-    to: string
-  }>
-> = ({ to, children }) => {
-  const currentPath = usePathname()
-
-  return (
-    <Link
-      href={to}
-      className={cn(
-        styles['menu-link'],
-        'font-medium  relative',
-        `${currentPath === to ? 'font-bold text-foreground' : ''}`,
-      )}
-    >
-      <span className="inline-block">{children}</span>
-    </Link>
-  )
-}
+import { MenuLink } from '@/core/components/menu-link/menu-link'
 
 const Links = () => {
   const t = useTranslations()

src/core/components/open-to-work/circle-text.tsx

@@ -1,7 +1,7 @@
 'use client'
+
 import React from 'react'
 import { motion } from 'framer-motion'
-import { Button } from '@/components/ui/button'
 
 interface Props {
   text: string

src/features/posts/delivery/post-excerpt.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react'
-import type { PostMetadata } from '@/posts'
 import Link from 'next/link'
 import { TiltCard } from '@/core/components/tilt-card/tilt-card'
 import Image from 'next/image'
 import { Markdown } from '@/core/components/markdown/markdown'
+import type { PostMetadata } from '@/post-metadata'
 
 export const PostExcerpt: FC<{ post: PostMetadata }> = ({ post }) => (
   <Link href={`/blog/${post.slug}`}>

src/features/posts/delivery/post.page.tsx

@@ -1,5 +1,4 @@
 import type { FC, PropsWithChildren } from 'react'
-import type { PostMetadata } from '@/posts'
 import { useTranslations } from 'next-intl'
 import { baseUrl } from '@/app/sitemap'
 import { LeetBackground } from '@/core/components/leet-background/leet-background'
@@ -8,6 +7,7 @@ import { ScrambleText } from '@/core/components/scramble-text/scramble-text'
 import { Badge, badgeVariants } from '@/components/ui/badge'
 import { Link } from '@/core/components/link/link'
 import { cn } from '@/lib/utils'
+import type { PostMetadata } from '@/post-metadata'
 
 export const PostPage: FC<PropsWithChildren<{ metadata: PostMetadata; slug: string }>> = ({
   metadata,

src/features/talks/delivery/talk.page.tsx

@@ -1,11 +1,10 @@
 import { type FC, type PropsWithChildren } from 'react'
 import { ScrambleText } from '@/core/components/scramble-text/scramble-text'
-import type { TalkMetadata } from '@/talks'
 import { Page } from '@/core/components/page/page'
 import { baseUrl } from '@/app/sitemap'
 import { LeetBackground } from '@/core/components/leet-background/leet-background'
-import { Link } from '@/core/components/link/link'
-import { Badge, badgeVariants } from '@/components/ui/badge'
+import { Badge } from '@/components/ui/badge'
+import type { TalkMetadata } from '@/talk-metadata'
 
 export const TalkPage: FC<PropsWithChildren<{ slug: string; metadata: TalkMetadata }>> = async ({
   slug,

src/lib/get-slugs.ts

@@ -0,0 +1,5 @@
+import { readdir } from 'node:fs/promises'
+
+export async function getSlugs(path: string) {
+  return (await readdir(path, { withFileTypes: true })).filter(dirent => dirent.isDirectory())
+}

src/mdx-components.tsx

@@ -13,7 +13,7 @@ import dark from 'react-syntax-highlighter/dist/esm/styles/prism/synthwave84'
 import { cn } from '@/lib/utils'
 
 function CustomLink(props: LinkHTMLAttributes<HTMLAnchorElement> & PropsWithChildren<{ href: string }>) {
-  let href = props.href
+  const href = props.href
 
   if (href.startsWith('/')) {
     return <Link {...props}>{props.children}</Link>
@@ -36,10 +36,7 @@ function Code({ children, ...props }: { children: string; className: string }) {
       PreTag="div"
       style={dark}
       codeTagProps={{
-        style: {
-          fontFamily:
-            'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-        },
+        className: 'font-mono',
       }}
     >
       {children}
@@ -67,7 +64,7 @@ function slugify(str: string) {
 
 function createHeading(level: number) {
   const Heading = ({ children }: { children: string }) => {
-    let slug = slugify(children)
+    const slug = slugify(children)
     return createElement(
       `h${level}`,
       { id: slug },

src/post-metadata.ts

@@ -0,0 +1,11 @@
+import type { Category } from '@/app/category'
+
+export interface PostMetadata {
+  slug: string
+  title: string
+  date: string
+  readTime: number
+  image: string
+  summary: string
+  categories: Category[]
+}

src/posts.ts

@@ -1,20 +1,9 @@
-import { readdir } from 'node:fs/promises'
 import type { Category } from '@/app/category'
-
-export interface PostMetadata {
-  slug: string
-  title: string
-  date: string
-  readTime: number
-  image: string
-  summary: string
-  categories: Category[]
-}
+import type { PostMetadata } from '@/post-metadata'
+import { getSlugs } from '@/lib/get-slugs'
 
 export async function getPosts(): Promise<PostMetadata[]> {
-  const slugs = (await readdir('./src/app/blog/(posts)', { withFileTypes: true })).filter(dirent =>
-    dirent.isDirectory(),
-  )
+  const slugs = await getSlugs('./src/app/blog/(posts)')
 
   const posts: PostMetadata[] = await Promise.all(
     slugs.map(async ({ name }) => {
@@ -30,8 +19,5 @@ export async function getPosts(): Promise<PostMetadata[]> {
 
 export async function getPostsByCategory({ category }: { category: Category }): Promise<PostMetadata[]> {
   const allPosts = await getPosts()
-
-  const posts = allPosts.filter(post => post.categories.indexOf(category) !== -1)
-
-  return posts
+  return allPosts.filter(post => post.categories.includes(category))
 }

src/talk-metadata.ts

@@ -0,0 +1,15 @@
+export interface TalkMetadata {
+  title: string
+  length: string
+  slug: string
+  difficulty: string
+  language: string
+  categories: string[]
+  image: string
+  events: {
+    name: string
+    date: string
+    slides: string
+    video: string
+  }[]
+}

src/talks.ts

@@ -1,25 +1,8 @@
-import { readdir } from 'node:fs/promises'
-
-export interface TalkMetadata {
-  title: string
-  length: string
-  slug: string
-  difficulty: string
-  language: string
-  categories: string[]
-  image: string
-  events: {
-    name: string
-    date: string
-    slides: string
-    video: string
-  }[]
-}
+import type { TalkMetadata } from '@/talk-metadata'
+import { getSlugs } from '@/lib/get-slugs'
 
 export async function getTalks(): Promise<TalkMetadata[]> {
-  const slugs = (await readdir('./src/app/talks/(talks)', { withFileTypes: true })).filter(dirent =>
-    dirent.isDirectory(),
-  )
+  const slugs = await getSlugs('./src/app/talks/(talks)')
 
   return await Promise.all(
     slugs.map(async ({ name }) => {

tailwind.config.ts

@@ -3,8 +3,12 @@ import type { Config } from 'tailwindcss'
 const config = {
   darkMode: ['class'],
   content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
-  prefix: '',
   theme: {
+    fontFamily: {
+      body: ['Inter', 'sans-serif'],
+      display: ['Azeret', 'monospace'],
+      mono: ['Azeret', 'monospace'],
+    },
     container: {
       center: true,
       padding: '2rem',