feat: adds tldr support

Author: ragarwalll

index.html

@@ -678,6 +678,61 @@ <h5 class="u-mt-none u-text-light">
     </include-footer>
     <!-- end of footer section -->
 
+    <!-- TLDR Generator Button -->
+    <button
+      id="tldr-generator-btn"
+      class="c-tldr-btn"
+      aria-label="Generate TLDR"
+    >
+      Generate TL;DR
+    </button>
+
+    <!-- TLDR Modal -->
+    <div
+      id="tldr-modal"
+      class="c-tldr-modal"
+      role="dialog"
+      aria-labelledby="tldr-modal-title"
+      aria-hidden="true"
+    >
+      <div class="c-tldr-modal__overlay"></div>
+      <div class="c-tldr-modal__content">
+        <h2 id="tldr-modal-title" class="c-tldr-modal__title">
+          Generate TL;DR
+        </h2>
+        <p class="c-tldr-modal__subtitle">Choose a style for your summary</p>
+        <div class="c-tldr-modal__categories">
+          <button
+            class="c-tldr-category u-link-clean"
+            data-category="professional"
+          >
+            <span class="c-tldr-category__title">Professional</span>
+            <span class="c-tldr-category__desc"
+              >LinkedIn bios, job applications, networking events</span
+            >
+          </button>
+          <button class="c-tldr-category u-link-clean" data-category="friendly">
+            <span class="c-tldr-category__title">Friendly</span>
+            <span class="c-tldr-category__desc"
+              >Social media bios, friend introductions, casual meetups</span
+            >
+          </button>
+          <button class="c-tldr-category u-link-clean" data-category="dating">
+            <span class="c-tldr-category__title">Dating</span>
+            <span class="c-tldr-category__desc"
+              >Dating app bios, personal connections</span
+            >
+          </button>
+        </div>
+        <button
+          class="c-tldr-modal__close u-link-clean"
+          aria-label="Close modal"
+        >
+          close
+        </button>
+      </div>
+    </div>
+
     <!-- linking script sections -->
     <script type="text/javascript" src="./script.js" defer></script>
   </body>

script.js

@@ -162,13 +162,266 @@ const scrollManager = () => {
   });
 };
 
+/**
+ * TLDR Generator functionality
+ */
+const tldrGenerator = (() => {
+  let modal, openBtn, closeBtn, categoryButtons;
+
+  // Prompt templates for each category - optimized for real-world use cases
+  const prompts = {
+    professional: `Visit ${window.location.origin} and analyze the website content. Also check https://github.com/ragarwalll if mentioned.
+
+Create a professional TLDR summary that would be useful for:
+- Recruiters scanning LinkedIn profiles
+- Hiring managers reviewing candidates
+- Potential collaborators or clients
+- Networking events and introductions
+
+REQUIREMENTS:
+1. Extract key information:
+   - Current role and company
+   - Years of experience and career progression
+   - Core technical skills (be specific: languages, frameworks, tools)
+   - Notable projects with impact/metrics (downloads, users, etc.)
+   - Problem-solving approach and work philosophy
+   - Educational background
+
+2. Format as a concise professional bio (2-3 short paragraphs):
+   - First paragraph: Current role, experience level, and primary expertise
+   - Second paragraph: Key achievements, projects, and technical strengths
+   - Third paragraph (optional): Approach to work, values, or unique differentiators
+
+3. Style guidelines:
+   - Professional but approachable tone
+   - Use specific technologies and metrics when available
+   - Focus on outcomes and impact, not just responsibilities
+   - Avoid buzzwords and generic statements
+   - Be authentic to the website's tone
+   - No emojis
+
+4. Make it scannable and LinkedIn-ready - something that can be copied directly into a professional profile or email introduction.`,
+
+    friendly: `Visit ${window.location.origin} and read through the website to understand Rahul's personality and interests.
+
+Create a friendly, casual TLDR that would be useful for:
+- Introducing him to new friends or social groups
+- Social media bios (Twitter, Instagram, etc.)
+- Casual networking or meetups
+- When someone asks "tell me about yourself" in a non-professional setting
+
+REQUIREMENTS:
+1. Extract key information:
+   - Personal background and story
+   - Hobbies, interests, and passions
+   - Personality traits and quirks
+   - Creative pursuits and adventures
+   - What makes him interesting as a person
+   - Projects mentioned casually (not too technical)
+
+2. Format as a friendly introduction (2-3 paragraphs):
+   - First paragraph: Who he is and what he's passionate about
+   - Second paragraph: Interests, hobbies, and personality highlights
+   - Third paragraph: Fun facts or what makes him unique
+
+3. Style guidelines:
+   - Warm, conversational, and approachable
+   - Light humor is welcome
+   - Focus on personality over professional achievements
+   - Use casual language but stay authentic
+   - Can include emojis sparingly if it fits the tone
+   - Make it relatable and human
+
+4. Make it something a friend would say when introducing him - natural, engaging, and easy to remember.`,
+
+    dating: `Visit ${window.location.origin} and analyze the website to understand Rahul's personality, interests, and what makes him interesting.
+
+Create an engaging dating profile TLDR that would be useful for:
+- Dating apps (Hinge, Bumble, Tinder bios)
+- Social introductions in dating contexts
+- Personal connection and attraction
+
+REQUIREMENTS:
+1. Extract key information:
+   - Age and location (if mentioned)
+   - Unique hobbies and interests
+   - Personality traits and energy
+   - Creative pursuits and adventures
+   - What makes him stand out
+   - Balance of professional and personal life
+   - Values and what matters to him
+
+2. Format as an attractive dating profile (2-3 short paragraphs):
+   - First paragraph: Engaging hook that shows personality and confidence
+   - Second paragraph: Interests, passions, and what he enjoys doing
+   - Third paragraph: What makes him interesting or what he's looking for (if appropriate)
+
+3. Style guidelines:
+   - Confident but not arrogant
+   - Authentic and genuine
+   - Playful and charming
+   - Show personality, not just list facts
+   - Avoid clichés ("I love travel and food")
+   - Be specific about interests
+   - Light humor and wit are welcome
+   - Emotionally intelligent tone
+
+4. Make it appealing and authentic - something that would make someone want to know more about him. Focus on what makes him interesting as a person, not just his job.`,
+  };
+
+  const openModal = () => {
+    console.log("Opening modal", modal);
+    if (modal) {
+      modal.setAttribute("aria-hidden", "false");
+      document.body.style.overflow = "hidden";
+    } else {
+      console.error("Modal not found when trying to open");
+    }
+  };
+
+  const closeModal = () => {
+    if (modal) {
+      modal.setAttribute("aria-hidden", "true");
+      document.body.style.overflow = "";
+    }
+  };
+
+  // Helper function to show notification
+  const showNotification = (message, subMessage) => {
+    // Add animation style if not already added
+    if (!document.getElementById("tldr-notification-style")) {
+      const style = document.createElement("style");
+      style.id = "tldr-notification-style";
+      style.textContent = `
+        @keyframes slideDown {
+          from {
+            opacity: 0;
+            transform: translateX(-50%) translateY(-20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+          }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    const notification = document.createElement("div");
+    notification.className = "c-tldr-notification";
+    notification.innerHTML = `
+      <div style="font-weight: 600; margin-bottom: 4px;">${message}</div>
+      ${
+        subMessage
+          ? `<div style="font-size: 0.85rem; opacity: 0.9;">${subMessage}</div>`
+          : ""
+      }
+    `;
+    notification.style.cssText = `
+      position: fixed;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--color-text);
+      color: var(--color-bg);
+      padding: 16px 24px;
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+      z-index: 3000;
+      font-size: 0.9rem;
+      max-width: 90%;
+      text-align: center;
+      animation: slideDown 0.3s ease-out;
+    `;
+
+    document.body.appendChild(notification);
+
+    // Remove notification after 5 seconds
+    setTimeout(() => {
+      notification.style.animation = "slideDown 0.3s ease-out reverse";
+      setTimeout(() => notification.remove(), 300);
+    }, 5000);
+  };
+
+  const generateTLDR = (category) => {
+    const prompt = prompts[category];
+    if (!prompt) {
+      console.error("Invalid category:", category);
+      return;
+    }
+
+    // Try URL parameter method first
+    const encodedPrompt = encodeURIComponent(prompt);
+    const chatgptUrl = `https://chat.openai.com/?q=${encodedPrompt}`;
+
+    // Open ChatGPT with URL parameter
+    window.open(chatgptUrl, "_blank");
+
+    closeModal();
+  };
+
+  const init = () => {
+    // Query DOM elements when initializing
+    modal = document.getElementById("tldr-modal");
+    openBtn = document.getElementById("tldr-generator-btn");
+    closeBtn = modal?.querySelector(".c-tldr-modal__close");
+    categoryButtons = modal?.querySelectorAll(".c-tldr-category");
+
+    if (!modal || !openBtn) {
+      console.error("TLDR Generator: Modal or button not found", {
+        modal,
+        openBtn,
+      });
+      return;
+    }
+
+    console.log("TLDR Generator initialized", {
+      modal,
+      openBtn,
+      categoryButtons: categoryButtons?.length,
+    });
+
+    // Open modal
+    openBtn.addEventListener("click", (e) => {
+      console.log("TLDR button clicked");
+      openModal();
+    });
+
+    // Close modal
+    closeBtn?.addEventListener("click", closeModal);
+
+    // Close on overlay click
+    const overlay = modal.querySelector(".c-tldr-modal__overlay");
+    overlay?.addEventListener("click", closeModal);
+
+    // Close on Escape key
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && modal.getAttribute("aria-hidden") === "false") {
+        closeModal();
+      }
+    });
+
+    // Handle category selection
+    categoryButtons?.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const category = btn.getAttribute("data-category");
+        generateTLDR(category);
+      });
+    });
+  };
+
+  return { init };
+})();
+
 // Initialize once DOM is loaded
 if (document.readyState === "loading") {
-  document.addEventListener("DOMContentLoaded", ()=>{
+  document.addEventListener("DOMContentLoaded", () => {
     faviconHandler();
     scrollManager();
+    tldrGenerator.init();
   });
 } else {
   scrollManager();
   document.addEventListener("visibilitychange", faviconHandler);
-}
+  tldrGenerator.init();
+}