Vercel support

Fonts/.nomedia

@@ -0,0 +1 @@
+

Instagram/instgramPost.js

@@ -1,11 +1,29 @@
-import { createCanvas, loadImage } from 'canvas';
+import { createCanvas, registerFont, loadImage } from 'canvas';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Register custom font
+const fontPath = path.join(__dirname, '../Fonts', 'Rokkitt-Regular.ttf');
+registerFont(fontPath, { family: 'Rokkitt' });
+
+const emojiPath = path.join(__dirname, '../Fonts', 'NotoColorEmoji-Regular.ttf');
+registerFont(emojiPath, { family: 'Noto Color Emoji' });
+
+const likePng = (value) => path.join(__dirname, 'Assets', value ? 'liked.png' : 'like.png');
+const savePng = (value) => path.join(__dirname, 'Assets', value ? 'saved.png' : 'save.png');
+const commentPng = path.join(__dirname, 'Assets', 'comment.png');
+const sharePng = path.join(__dirname, 'Assets', 'share.png');
+const verifiedPng = path.join(__dirname, 'Assets', 'verified.png');
+
 export default class InstagramPost {
 
   constructor() {
     this.following = false;
     this.verified = false;
-    this.pfp = 'https://avatars.githubusercontent.com/u/121213527?v=4&number=69';
+    this.pfp = 'https://avatars.githubusercontent.com/u/121213527?v=4';
     this.username = 'PikaBotz';
     this.watermark = false;
     this.saved = false;
@@ -15,7 +33,8 @@ export default class InstagramPost {
     this.caption = '';
     this.ago = '1 year ago';
     this.liked = false;
-    this.imageUrl = 'https://avatars.githubusercontent.com/u/121213527?v=4&number=69';
+    this.dark = true;
+    this.imageUrl = 'https://avatars.githubusercontent.com/u/121213527?v=4';
   }
 
   isFollowing(value) {
@@ -78,92 +97,266 @@ export default class InstagramPost {
     return this;
   }
 
+  isDark(value) {
+    if (typeof value === 'boolean') this.dark = value;
+    return this;
+  }
+
   setImage(value) {
     this.imageUrl = value;
     return this;
   }
 
   async buildCanvas() {
-    const postImage = await loadImage(this.imageUrl);
-    const frameWidth = Math.min(1080, postImage.width);
-    const frameHeight = Math.min(1350, postImage.height);
-    const canvas = createCanvas(frameWidth, frameHeight + 200);
+    const width = 400;
+    const height = 540;
+    const canvas = createCanvas(width, height);
     const ctx = canvas.getContext('2d');
-    const black = '#000';
-    const white = '#fff';
-    const gray = '#888';
-    const blue = '#1da1f2';
-    const red = '#ff0000';
-    ctx.font = '14px Arial';
-    ctx.fillStyle = black;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Background
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, width, height);
+
+    // Header
+    const headerHeight = 60;
+    ctx.fillStyle = '#1c1c1c';
+    ctx.fillRect(0, 0, width, headerHeight);
+
+    // Profile Picture with gradient border
+    const profilePicSize = 44;
+    const profilePicX = 10;
+    const profilePicY = 8;
+    const gradient = ctx.createLinearGradient(0, 0, profilePicSize, profilePicSize);
+    gradient.addColorStop(0, 'red');
+    gradient.addColorStop(0.14, 'orange');
+    gradient.addColorStop(0.28, 'yellow');
+    gradient.addColorStop(0.42, 'green');
+    gradient.addColorStop(0.57, 'blue');
+    gradient.addColorStop(0.71, 'indigo');
+    gradient.addColorStop(0.85, 'violet');
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(profilePicX + profilePicSize / 2, profilePicY + profilePicSize / 2, profilePicSize / 2, 0, Math.PI * 2);
+    ctx.fill();
+
     ctx.fillStyle = '#1c1c1c';
-    ctx.fillRect(0, 0, canvas.width, 60);
-    const profilePic = await loadImage(this.pfp);
     ctx.beginPath();
-    ctx.arc(30, 30, 22, 0, Math.PI * 2);
-    ctx.fillStyle = black;
+    ctx.arc(profilePicX + profilePicSize / 2, profilePicY + profilePicSize / 2, (profilePicSize - 4) / 2, 0, Math.PI * 2);
     ctx.fill();
+
+    // Load Profile Picture
+    const profileImage = await loadImage(this.pfp);
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(profilePicX + profilePicSize / 2, profilePicY + profilePicSize / 2, (profilePicSize - 8) / 2, 0, Math.PI * 2);
+    ctx.closePath();
     ctx.clip();
-    ctx.drawImage(profilePic, 8, 8, 44, 44);
+    ctx.drawImage(profileImage, profilePicX + 4, profilePicY + 2, profilePicSize - 8, profilePicSize - 8);
     ctx.restore();
-    ctx.fillStyle = white;
-    ctx.font = 'bold 16px Arial';
-    ctx.fillText(this.username, 60, 30);
+
+    ctx.font = 'bold 18px Rokkitt'; // Increase font size and make it bold
+ctx.fillStyle = '#fff'; // White text color
+
+// Optional: Add a stroke for extra boldness
+ctx.strokeStyle = '#000'; // Black outline for contrast
+ctx.lineWidth = 2; // Thickness of the outline
+ctx.strokeText(this.username, profilePicX + profilePicSize + 10, profilePicY + 19); // Draw the outline
+
+// Fill the text
+ctx.fillText(this.username, profilePicX + profilePicSize + 10, profilePicY + 19);
+
     if (this.verified) {
-      const verifiedBadge = await loadImage(
-        'https://upload.wikimedia.org/wikipedia/commons/e/e4/Twitter_Verified_Badge.svg'
-      );
-      ctx.drawImage(verifiedBadge, 60 + ctx.measureText(this.username).width + 5, 15, 16, 16);
+    const verifiedImage = await loadImage(verifiedPng); // Replace with the path to your heart PNG image
+const verifiedX = profilePicX + profilePicSize + 72; // X position of the heart image
+const verifiedY = profilePicY + 6; // Y position of the heart image
+const verifiedSize = 15; // Size of the heart image
+
+// Draw the heart image
+ctx.drawImage(verifiedImage, verifiedX, verifiedY, verifiedSize, verifiedSize);
     }
-    ctx.fillStyle = gray;
-    ctx.font = '12px Arial';
-    const watermarkText = this.watermark ? this.watermark : 'Instagram Post';
-    ctx.fillText(watermarkText, 60, 45);
-    ctx.fillStyle = this.following ? white : blue;
-    ctx.strokeStyle = white;
-    ctx.lineWidth = 1;
-    ctx.strokeRect(canvas.width - 80, 15, 65, 30);
-    ctx.fillText(this.following ? 'Following' : 'Follow', canvas.width - 70, 35);
-    ctx.fillStyle = white;
-    ctx.font = 'bold 16px Arial';
-    ctx.fillText('...', canvas.width - 20, 30);
-    const aspectRatio = postImage.width / postImage.height;
-    const maxAspectRatio = 16 / 9;
-    const minAspectRatio = 3 / 4;
-    let imgWidth = frameWidth,
-      imgHeight = frameHeight;
-    if (aspectRatio > maxAspectRatio) {
-      imgWidth = frameHeight * maxAspectRatio;
-    } else if (aspectRatio < minAspectRatio) {
-      imgHeight = frameWidth / minAspectRatio;
+    if (this.watermark) {
+    ctx.font = '12px Rokkitt';
+    ctx.fillStyle = '#888';
+    ctx.fillText(this.watermark, profilePicX + profilePicSize + 10, profilePicY + 32);
     }
-    ctx.drawImage(
-      postImage,
-      (frameWidth - imgWidth) / 2,
-      60,
-      imgWidth,
-      imgHeight
-    );
-    const contentY = frameHeight + 70;
-    const heartIcon = this.liked ? '\u2665' : '\u2661';
-    const saveIcon = this.saved ? '\u{1F516}' : '\u{1F517}';
-    ctx.fillStyle = this.liked ? red : white;
-    ctx.fillText(`${heartIcon} ${this.likes}k`, 10, contentY);
-    ctx.fillStyle = white;
-    ctx.fillText(`💬 ${this.comments}`, 100, contentY);
-    ctx.fillText(`✈️ ${this.shares}`, 200, contentY);
-    ctx.fillStyle = this.saved ? red : white;
-    ctx.fillText(`${saveIcon}`, frameWidth - 30, contentY);
-    ctx.fillStyle = white;
-    ctx.font = 'bold 14px Arial';
-    ctx.fillText(this.username, 10, contentY + 30);
-    ctx.font = '14px Arial';
-    ctx.fillText(this.caption, 10, contentY + 50);
-    ctx.fillStyle = gray;
-    ctx.fillText(this.ago, 10, contentY + 70);
-    const buffer = canvas.toBuffer('image/png');
+
+    // Follow Button
+const buttonWidth = 60;
+const buttonHeight = 20;
+const buttonX = width - 100; // Move square 10px to the left
+const buttonY = profilePicY + 9;
+const cornerRadius = 5; // Radius for rounded corners
+
+// Draw the rounded rectangle
+ctx.beginPath();
+ctx.moveTo(buttonX + cornerRadius, buttonY); // Top-left corner
+ctx.lineTo(buttonX + buttonWidth - cornerRadius, buttonY); // Top edge
+ctx.quadraticCurveTo(buttonX + buttonWidth, buttonY, buttonX + buttonWidth, buttonY + cornerRadius); // Top-right corner
+ctx.lineTo(buttonX + buttonWidth, buttonY + buttonHeight - cornerRadius); // Right edge
+ctx.quadraticCurveTo(buttonX + buttonWidth, buttonY + buttonHeight, buttonX + buttonWidth - cornerRadius, buttonY + buttonHeight); // Bottom-right corner
+ctx.lineTo(buttonX + cornerRadius, buttonY + buttonHeight); // Bottom edge
+ctx.quadraticCurveTo(buttonX, buttonY + buttonHeight, buttonX, buttonY + buttonHeight - cornerRadius); // Bottom-left corner
+ctx.lineTo(buttonX, buttonY + cornerRadius); // Left edge
+ctx.quadraticCurveTo(buttonX, buttonY, buttonX + cornerRadius, buttonY); // Top-left corner
+ctx.closePath();
+
+// Style the button
+ctx.strokeStyle = '#fff';
+ctx.lineWidth = 1;
+ctx.stroke();
+
+// Set the text
+const buttonText = this.following ? 'Following' : 'Follow';
+ctx.font = '12px Rokkitt';
+ctx.fillStyle = '#fff';
+
+// Measure text width for centering
+const textWidth = ctx.measureText(buttonText).width;
+const textX = buttonX + (buttonWidth - textWidth) / 2; // Center text horizontally
+const textY = buttonY + (buttonHeight + 12) / 2 - 2; // Center text vertically (fine-tuned)
+
+// Draw the text
+ctx.fillText(buttonText, textX, textY);
+
+// Save the current state of the context
+ctx.save();
+
+    /*
+    // Follow Button
+const buttonWidth = 60;
+const buttonHeight = 20;
+const buttonX = width - 100; // Move square 10px to the left
+const buttonY = profilePicY + 9;
+
+// Draw the button rectangle
+ctx.fillStyle = '#fff';
+ctx.strokeStyle = '#fff';
+ctx.lineWidth = 1;
+ctx.strokeRect(buttonX, buttonY, buttonWidth, buttonHeight);
+
+// Set the text
+const buttonText = this.following ? 'Following' : 'Follow';
+ctx.font = '12px Rokkitt';
+ctx.fillStyle = '#fff';
+
+// Measure text width for centering
+const textWidth = ctx.measureText(buttonText).width;
+const textX = buttonX + (buttonWidth - textWidth) / 2; // Center text horizontally
+const textY = buttonY + ((buttonHeight + 12) / 2) - 2; // Center text vertically (approx.)
+
+// Draw the text
+ctx.fillText(buttonText, textX, textY);
+
+    // Save the current state of the context
+ctx.save();
+*/
+// Move the canvas origin to the position of the three dots
+ctx.translate(width - 25, profilePicY + 13);
+
+// Rotate the canvas by 90 degrees (clockwise)
+ctx.rotate(Math.PI / 2);
+
+// Draw the three dots at the new origin (0, 0) because the rotation applies to the origin
+ctx.font = '18px Rokkitt';
+ctx.fillStyle = '#fff';
+ctx.fillText('•••', 0, 0);
+
+// Restore the context to its original state
+ctx.restore();
+
+    /*
+    // Options Dots
+    ctx.font = '18px Rokkitt';
+    ctx.fillStyle = '#fff';
+    ctx.fillText('•••', width - 25, profilePicY + 25);
+*/
+
+    // Post Image
+    const postImage = await loadImage(this.imageUrl);
+    ctx.drawImage(postImage, 0, headerHeight, width, 400);
+
+    // Footer
+    const footerY = headerHeight + 400;
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, footerY, width, height - footerY);
+
+    // --- LIKE ICON (Heart PNG) ---
+// Canvas dimensions and other setup code remains unchanged
+
+// Inside the buildCanvas method...
+
+// --- LIKE ICON (Heart PNG) ---
+const heartImage = await loadImage(likePng(this.liked)); // Replace with the path to your heart PNG image
+const heartX = 10; // X position of the heart image
+const heartY = footerY + 10; // Y position of the heart image
+const heartSize = 30; // Size of the heart image
+
+// Draw the heart image
+ctx.drawImage(heartImage, heartX, heartY, heartSize, heartSize);
+
+// --- LIKE COUNT (Next to the heart) ---
+ctx.font = '20px Rokkitt'; // Font style for like count
+ctx.fillStyle = '#fff'; // Text color (white)
+const likeCount = this.likes; // Replace with the actual like count
+ctx.fillText(likeCount, heartX + heartSize - 3, heartY + 20); // Position the like count to the right of the heart
+
+// Caption and Time...
+
+const commentImage = await loadImage(commentPng); // Replace with the path to your heart PNG image
+const commentX = 75; // X position of the heart image
+const commentY = footerY + 14; // Y position of the heart image
+const commentSize = 20; // Size of the heart image
+
+// Draw the heart image
+ctx.drawImage(commentImage, commentX, commentY, commentSize, commentSize);
+
+// --- LIKE COUNT (Next to the heart) ---
+ctx.font = '20px Rokkitt'; // Font style for like count
+ctx.fillStyle = '#fff'; // Text color (white)
+const commentCount = this.comments; // Replace with the actual like count
+ctx.fillText(commentCount, commentX + commentSize + 3, commentY + 16);
+
+
+    const shareImage = await loadImage(sharePng); // Replace with the path to your heart PNG image
+const shareX = 130; // X position of the heart image
+const shareY = footerY + 14; // Y position of the heart image
+const shareSize = 18; // Size of the heart image
+
+// Draw the heart image
+ctx.drawImage(shareImage, shareX, shareY, shareSize, shareSize);
+
+// --- LIKE COUNT (Next to the heart) ---
+ctx.font = '20px Rokkitt'; // Font style for like count
+ctx.fillStyle = '#fff'; // Text color (white)
+const shareCount = this.shares; // Replace with the actual like count
+ctx.fillText(shareCount, shareX + shareSize + 3, shareY + 16);
+
+
+
+    const saveImage = await loadImage(savePng(this.saved)); // Replace with the path to your heart PNG image
+const saveX = 365; // X position of the heart image
+const saveY = footerY + 14; // Y position of the heart image
+const saveSize = 20; // Size of the heart image
+
+// Draw the heart image
+ctx.drawImage(saveImage, saveX, saveY, saveSize, saveSize);
+
+    // Caption
+    ctx.font = 'bold 15px Rokkitt';
+    ctx.fillStyle = '#fff';
+    ctx.fillText(this.username, 10, footerY + 55);
+
+    ctx.font = '14px "Rokkitt", "Noto Color Emoji"';
+    ctx.fillStyle = '#fff';
+    ctx.fillText(this.caption, 70, footerY + 55);
+
+    // Time
+    ctx.font = '12px Rokkitt';
+    ctx.fillStyle = '#888';
+    ctx.fillText(this.ago, 10, footerY + 75);
+
+    // Save to file or return buffer
+    const buffer = canvas.toBuffer();
     return buffer;
   }
-
 }