Merge pull request #61 from yummy-recipes/improve-recipe-page

Improve recipe page

src/components/recipe/recipe.tsx

@@ -10,18 +10,20 @@ interface Props {
 
 export function Recipe({ title, coverImage, ingredients, instructions }: Props) {
   return (
-    <div>
+    <div className='flex flex-col w-full'>
+      <div className='my-12'>
+        <h1 className="text-gradient uppercase inline text-4xl">{title}</h1>
+      </div>
+
       <Image src={coverImage} width={40} height={30} alt={`Photo of ${title}`} />
-
-      <h1 className="text-lg m-2">{title}</h1>
 
-      <div className="border p-2 m-2">
+      <div className="p-2 m-2">
         {ingredients.map(ingredient => (
           <div key={ingredient.id} dangerouslySetInnerHTML={{ __html: markdownToHtml(ingredient.content) }}></div>
         ))}
       </div>
 
-      <div className="border p-2 m-2">
+      <div className="p-2 m-2">
         {instructions.map(instruction => (
           <div key={instruction.id} dangerouslySetInnerHTML={{ __html: markdownToHtml(instruction.content) }}></div>
         ))}

src/lib/markdown.ts

@@ -1,5 +1,25 @@
 import { marked } from 'marked'
 
+class TailwindRenderer extends marked.Renderer {
+  heading(text: string, level: number) {
+    return `<h${level} class='text-2xl my-4'>${text}</h${level}>`
+  }
+
+  list(this: marked.Renderer<never> | marked.RendererThis, body: string, ordered: boolean, start: number): string {
+    if (ordered) {
+      return `<ol class='list-decimal list-inside'>${body}</ol>`
+    }
+
+    return `<ul class='list-disc list-inside'>${body}</ul>`
+  }
+}
+
+const renderer = new TailwindRenderer()
+
 export function markdownToHtml(markdown: string): string {
-  return marked.parse(markdown, { mangle: false , headerIds: false})
+  return marked.parse(markdown, {
+    mangle: false,
+    headerIds: false,
+    renderer
+  })
 }

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     './src/pages/**/*.{js,ts,jsx,tsx}',
     './src/components/**/*.{js,ts,jsx,tsx}',
     './src/app/**/*.{js,ts,jsx,tsx}',
+    './src/lib/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {