Updated font.

tetmon · Jan 24, 2024 · 655265b · 655265b
1 parent 3ca5a9e
commit 655265b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 35 deletions.
diff --git a/app/blog/[slug]/layout.css b/app/blog/[slug]/layout.css
@@ -25,7 +25,7 @@
   padding-left: 2rem;
 }
 
-.markdown-content ul > li {
+.markdown-content ul>li {
   margin-bottom: 0.5rem;
 }
 

diff --git a/app/blog/[slug]/layout.tsx b/app/blog/[slug]/layout.tsx
@@ -2,7 +2,5 @@ import { PropsWithChildren } from "react";
 import './layout.css';
 
 export default function Layout({ children }: PropsWithChildren) {
-  return (
-    children
-  );
+  return children;
 }
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -1,9 +1,12 @@
 import fs from 'fs'
+import { Source_Serif_4 } from 'next/font/google'
 import { getPostData } from '@/lib/posts'
 import formatDate from '@/lib/format'
 import Link from 'next/link'
 import path from 'path'
 
+const sourceSerifPro = Source_Serif_4({ subsets: ['latin'], weight: ['400', '500', '700'] })
+
 type Params = {
   slug: string
 }
@@ -30,7 +33,7 @@ type AllPostsData = {
 }[]
 
 
-const Meta = ({date, time, author}: Partial<AllPostsData[0]> ) => {
+const Meta = ({ date, time, author }: Partial<AllPostsData[0]>) => {
   return (
     <div className='flex flex-col py-4'>
       <div>
@@ -45,9 +48,9 @@ const Meta = ({date, time, author}: Partial<AllPostsData[0]> ) => {
         <span className='px-1'>|</span>
         {date ? <small className='font-bold text-gray-500'>
           {formatDate(date)}
-        </small>: null}
+        </small> : null}
       </div>
-  </div>
+    </div>
   )
 }
 
@@ -61,14 +64,14 @@ export async function generateMetadata({ params }: Props) {
 
 export function generateStaticParams() {
   const postsDirectory = path.join(process.cwd(), 'posts');
-  const fileNames = fs.readdirSync(postsDirectory) 
+  const fileNames = fs.readdirSync(postsDirectory)
   return fileNames.map((fileName) => {
     return {
       slug: path.basename(fileName, '.md')
     }
   });
 }
- 
+
 
 // -< Post >-
 export default async function Post({ params }: Props) {
@@ -91,7 +94,7 @@ export default async function Post({ params }: Props) {
         {/* Post Content */}
         <div
           // eslint-disable-next-line tailwindcss/no-custom-classname
-          className='markdown-content pt-4'
+          className={`markdown-content pt-4 leading-7 ${sourceSerifPro.className} text-lg leading-8`}
           dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
         />
       </div>

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -1,9 +1,13 @@
 import { getSortedPostsData } from '@/lib/posts'
+import { Source_Serif_4 } from 'next/font/google'
 import Link from 'next/link'
 import { DateTime } from 'luxon'
 import Image from 'next/image'
 
 
+const sourceSerifPro = Source_Serif_4({ subsets: ['latin'], weight: ['400', '500', '700'] })
+
+
 type AllPostsData = {
   date: string
   title: string
@@ -18,7 +22,7 @@ function formatDate(date: string) {
   return DateTime.fromFormat(date, 'yyyy-MM-dd').toFormat('MMMM dd, yyyy');
 }
 
-const Meta = ({date, time, author}: Partial<AllPostsData[0]> ) => {
+const Meta = ({ date, time, author }: Partial<AllPostsData[0]>) => {
   return (
     <div className='flex flex-col gap-1 sm:flex-row md:gap-2'>
       <small>
@@ -28,12 +32,12 @@ const Meta = ({date, time, author}: Partial<AllPostsData[0]> ) => {
       <div className='flex gap-2'>
         {date ? <small>
           {formatDate(date)}
-        </small>: null}|
+        </small> : null}|
         <small>
           {time} min. read
         </small>
       </div>
-  </div>
+    </div>
   )
 }
 
@@ -45,28 +49,28 @@ export default function Blog() {
       <ul className='col-span-full pb-6'>
         {allPostsData.map(({ id, time, date, title, image, author, description }, index) => (
           <li key={id} className='px-4 md:px-12'>
-            {index === 0 ? 
-            <Link className='mb-1 mt-5 grid grid-cols-12 gap-4 border-b pb-6 font-medium' href={`/blog/${id}`}>
-              <div className='order-1 col-span-12 flex flex-col justify-center lg:col-span-6'>
-                <h1 className='text-3xl font-medium leading-8 md:leading-11 lg:text-4xl'>{title}</h1>
-                <p className='max-w-lg py-8 text-left text-base text-gray-600 md:text-lg'>
-                  {description}
-                </p>
-                <Meta date={date} time={time} author={author} />
-              </div>
-              <div className='order-2 col-span-12 rounded-md border bg-white lg:col-span-6'>
-                <Image src={`/blog/${image}`} alt='better' width={600} height={400} className='h-full w-full'/>
-              </div>
-            </Link> :
-            <Link className='my-4 grid grid-cols-12 gap-4 rounded-md font-medium transition-all hover:bg-gray-50 md:p-4' href={`/blog/${id}`}>
-              <div className='col-span-12 rounded-md border bg-white lg:col-span-2'>
-                <Image src={`/blog/${image}`} alt='better' width={600} height={400} className='h-full w-full'/>
-              </div>
-              <div className='col-span-12 flex flex-col justify-center lg:col-span-6'>
-                <h1 className='pb-4 text-2xl font-medium md:leading-11 lg:text-3xl'>{title}</h1>
-                <Meta date={date} time={time} author={author} />
-              </div>
-            </Link> }
+            {index === 0 ?
+              <Link className='mb-1 mt-5 grid grid-cols-12 gap-4 border-b pb-6 font-medium' href={`/blog/${id}`}>
+                <div className='order-1 col-span-12 flex flex-col justify-center lg:col-span-6'>
+                  <h1 className='text-3xl font-medium leading-8 md:leading-11 lg:text-4xl'>{title}</h1>
+                  <p className={`max-w-lg py-8 text-left text-base text-gray-600 md:text-lg ${sourceSerifPro.className}`}>
+                    {description}
+                  </p>
+                  <Meta date={date} time={time} author={author} />
+                </div>
+                <div className='order-2 col-span-12 rounded-md border bg-white lg:col-span-6'>
+                  <Image src={`/blog/${image}`} alt='better' width={600} height={400} className='h-full w-full' />
+                </div>
+              </Link> :
+              <Link className='my-4 grid grid-cols-12 gap-4 rounded-md font-medium transition-all hover:bg-gray-50 md:p-4' href={`/blog/${id}`}>
+                <div className='col-span-12 rounded-md border bg-white lg:col-span-2'>
+                  <Image src={`/blog/${image}`} alt='better' width={600} height={400} className='h-full w-full' />
+                </div>
+                <div className='col-span-12 flex flex-col justify-center lg:col-span-6'>
+                  <h1 className='pb-4 text-2xl font-medium md:leading-11 lg:text-3xl'>{title}</h1>
+                  <Meta date={date} time={time} author={author} />
+                </div>
+              </Link>}
           </li>
         ))}
       </ul>