chore: Better syntax

README.md

@@ -5,7 +5,7 @@ This is a simple project that lets you embed a GitHub user's contribution chart
 ### How to use this?
 
 1. Create a new Embed block in your Notion doc.
-2. Set the Embed URL to `https://jandee.vercel.app/%USERNAME%` replacing %USERNAME% with your GitHub username.
+2. Set the Embed URL to `https://jandee.vercel.app/%USERNAME%` replacing `%USERNAME%` with your GitHub username.
 3. Adjust the size of the embed accordingly.
 4. Bask in its glory!
 

src/app/[username]/Canvas.tsx

@@ -62,7 +62,6 @@ const Canvas = ({
   return (
     <>
       <img useMap="#info" width={width} height={height} src={url} alt="" ref={imageRef} />
-
       <map name="info">
         {data.map((week, x) => (
           <Fragment key={x}>
@@ -152,6 +151,17 @@ function drawGraph(
     }
   }
 
+  if (showWeekDays) {
+    for (let y = 0; y < data[0].length; y += 1) {
+      if (y % 2)
+        ctx.fillText(
+          format(parseISO(data[0][y].date), 'EEE'),
+          canvasMargin,
+          canvasMargin + textHeight * 2 + (boxSize + boxMargin) * y - 4
+        )
+    }
+  }
+
   for (let x = 0; x < data.length; x += 1) {
     for (let y = 0; y < data[x].length; y += 1) {
       const day = data[x][y]
@@ -187,17 +197,6 @@ function drawGraph(
       lastCountedMonth = month
     }
   }
-
-  if (showWeekDays) {
-    for (let y = 0; y < data[0].length; y += 1) {
-      if (y % 2)
-        ctx.fillText(
-          format(parseISO(data[0][y].date), 'EEE'),
-          canvasMargin,
-          canvasMargin + textHeight * 2 + (boxSize + boxMargin) * y - 4
-        )
-    }
-  }
 }
 
 export default Canvas