feat: add the base form enabling the download of pdf files (#406)

omariosouto · web-flow · commit df510d09bb43 · 2025-07-25T08:57:44.000-03:00
diff --git a/_data/downloadFiles/PT_BR/agile.html b/_data/downloadFiles/PT_BR/agile.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Guia Ágil - TechGuide</title>
+  <title>Template - TechGuide</title>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -50,7 +50,6 @@
       color: #0066cc;
       margin: 30px 0 20px 0;
       padding-bottom: 10px;
-      border-bottom: 2px solid #e0e0e0;
     }
 
     h2 {
@@ -205,8 +204,8 @@
 
 <body>
   <div class="header">
-    <h1>Guia Ágil</h1>
-    <div class="subtitle">TechGuide - Alura</div>
+    <h1>Guia Agile</h1>
+    <div class="subtitle">TechGuide - Alura, FIAP e PM3</div>
   </div>
 
   <div class="content">
@@ -412,4 +411,4 @@ <h2>Habilidade Auxiliar: Product management</h2>
   </div>
 </body>
 
-</html>
+</html>
diff --git a/_data/downloadFiles/PT_BR/agile.pdf b/_data/downloadFiles/PT_BR/agile.pdf
diff --git a/_scripts/modules/shareable_guides_pdf/index.ts b/_scripts/modules/shareable_guides_pdf/index.ts
@@ -54,7 +54,8 @@ function shouldRegeneratePDF(markdownPath: string, pdfPath: string): boolean {
 async function generatePDFForFile(
   markdownPath: string,
   browser: Browser,
-  template: string
+  template: string,
+  forceRegenerate: string[] = []
 ): Promise<void> {
   const fileName = path.basename(markdownPath, ".md");
   const dirPath = path.dirname(markdownPath);
@@ -63,7 +64,8 @@ async function generatePDFForFile(
   log(`Processing: ${fileName}.md`);
 
   // Check if regeneration is needed
-  if (!shouldRegeneratePDF(markdownPath, pdfPath)) {
+  const shouldForce = forceRegenerate.includes(fileName);
+  if (!shouldForce && !shouldRegeneratePDF(markdownPath, pdfPath)) {
     log(`✓ Skipped (no changes): ${fileName}.pdf`);
     return;
   }
@@ -77,9 +79,11 @@ async function generatePDFForFile(
 
     // Process HTML with custom transformations
     const styledHtmlContent = processHtml(htmlContent);
+    const guideName = markdownContent.split("\n")[0].replace("# ", "");
 
     // Create the complete HTML document with fixed date for determinism
     const completeHtml = template
+      .replace("{{guideName}}", guideName)
       .replace("{{content}}", styledHtmlContent)
       .replace("{{date}}", "2024-01-01"); // Fixed date for deterministic output
 
@@ -127,6 +131,7 @@ async function generatePDFForFile(
 }
 
 const main = async () => {
+  const forceRegenerate = ["agile"];
   try {
     log("Starting PDF generation for all markdown files...");
 
@@ -189,8 +194,16 @@ const main = async () => {
         const markdownPath = path.join(languagePath, markdownFile);
         const pdfPath = markdownPath.replace(".md", ".pdf");
 
-        if (shouldRegeneratePDF(markdownPath, pdfPath)) {
-          await generatePDFForFile(markdownPath, browser, template);
+        const fileName = path.basename(markdownFile, ".md");
+        const shouldForce = forceRegenerate.includes(fileName);
+
+        if (shouldForce || shouldRegeneratePDF(markdownPath, pdfPath)) {
+          await generatePDFForFile(
+            markdownPath,
+            browser,
+            template,
+            forceRegenerate
+          );
           totalProcessed++;
         } else {
           totalSkipped++;
diff --git a/_scripts/modules/shareable_guides_pdf/parseMarkdownToHTML.ts b/_scripts/modules/shareable_guides_pdf/parseMarkdownToHTML.ts
@@ -22,4 +22,4 @@ export function parseMarkdownToHTML({
 
 function trimLines(str: string) {
   return str?.replace(/^ +/gm, "");
-}
+}
diff --git a/_scripts/modules/shareable_guides_pdf/template.html b/_scripts/modules/shareable_guides_pdf/template.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Guia Ágil - TechGuide</title>
+  <title>Template - TechGuide</title>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -50,7 +50,6 @@
       color: #0066cc;
       margin: 30px 0 20px 0;
       padding-bottom: 10px;
-      border-bottom: 2px solid #e0e0e0;
     }
 
     h2 {
@@ -205,8 +204,8 @@
 
 <body>
   <div class="header">
-    <h1>Guia Ágil</h1>
-    <div class="subtitle">TechGuide - Alura</div>
+    <h1>Guia {{guideName}}</h1>
+    <div class="subtitle">TechGuide - Alura, FIAP e PM3</div>
   </div>
 
   <div class="content">
@@ -220,4 +219,4 @@ <h1>Guia Ágil</h1>
   </div>
 </body>
 
-</html>
+</html>
diff --git a/src/components/HubspotForm/index.tsx b/src/components/HubspotForm/index.tsx
@@ -55,6 +55,10 @@ export function HubspotForm({
         /* Container styles */
         .hubspot-form {
           min-height: 200px;
+          min-width: 200px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
           padding: 20px;
           border-radius: 12px;
           background: linear-gradient(
@@ -124,7 +128,7 @@ export function HubspotForm({
           margin-top: 23px;
           background: #0052ff;
           color: white !important;
-          border: none !important;
+          border: 1px solid #0052ff !important;
           padding: 14px 28px !important;
           border-radius: 8px !important;
           font-size: 16px !important;
@@ -140,7 +144,9 @@ export function HubspotForm({
         }
 
         .hubspot-form .hs-button:hover {
-          background-color: red;
+          background-color: transparent;
+          color: #0052ff;
+          border: 1px solid #0052ff;
         }
 
         .hubspot-form .hs-button:active {
diff --git a/src/screens/PathScreen/index.tsx b/src/screens/PathScreen/index.tsx
@@ -3,7 +3,6 @@ import ScreenHeroContainer from "@src/patterns/ScreenHeroContainer";
 import { pageHOC } from "@src/wrappers/pageHOC";
 import TShape from "./patterns/TShape";
 import { PathScreenGetGuideBySlugQuery } from "@src/gql_types";
-// import { HubspotForm } from "@src/components/HubspotForm";
 
 interface PathScreenProps {
   external?: string;
@@ -12,18 +11,6 @@ interface PathScreenProps {
 function PathScreen({ external, guide }: PathScreenProps) {
   return (
     <ScreenHeroContainer guide={guide}>
-      {/* {guide.pdfFormId && (
-        <HubspotForm
-          formId={guide.pdfFormId}
-          onFormSubmitted={() => {
-            // eslint-disable-next-line no-console
-            console.log("form submitted");
-            // - slug
-            // - locale
-            //  https://raw.githubusercontent.com/alura/techguide/refs/heads/main/_data/downloadFiles/PT_BR/agile.pdf
-          }}
-        />
-)} */}
       <TShape guide={guide} externalGuideCreator={external} />
     </ScreenHeroContainer>
   );
diff --git a/src/screens/PathScreen/patterns/TShape/index.tsx b/src/screens/PathScreen/patterns/TShape/index.tsx
@@ -5,6 +5,7 @@ import { TItemCard } from "./patterns/TItemCard";
 import { useI18n, useI18nLocale } from "@src/infra/i18n";
 import { parseContent } from "@src/infra/i18n/parseContent";
 import { OptionalIcon } from "@src/theme/icons/OptionalIcon";
+import { LeadForm } from "./patterns/LeadForm";
 
 interface TShapeProps {
   guide: PathScreenGetGuideBySlugQuery["guide"];
@@ -255,35 +256,40 @@ export default function TShape({ guide, externalGuideCreator }: TShapeProps) {
           {i18n.content("TSHAPE.OPTIONAL.DESCRIPTION")}
         </Text>
         {!isExternalGuide && (
-          <Link
-            href={`https://github.com/alura/techguide/blob/main/_data/downloadFiles/${locale}/${guide.slug}.md`}
-            styleSheet={{
-              marginTop: "23px",
-              width: "100%",
-              maxWidth: "400px",
-              display: "flex",
-              gap: "6px",
-              alignItems: "center",
-              justifyContent: "center",
-              flexDirection: "row",
-              borderRadius: "8px",
-              border: "1px solid #0052FF",
-              textDecoration: "none",
-              padding: "14px",
-              fontSize: "14px",
-              backgroundColor: "#0052FF",
-              hover: {
-                opacity: 1,
-                backgroundColor: "transparent",
-              },
-              focus: {
-                opacity: 1,
-                backgroundColor: "transparent",
-              },
-            }}
-          >
-            {i18n.content("TSHAPE.BUTTON.DOWNLOAD_T_FILE")}
-          </Link>
+          <>
+            {guide.pdfFormId && <LeadForm guide={guide} />}
+            {!guide.pdfFormId && (
+              <Link
+                href={`https://github.com/alura/techguide/blob/main/_data/downloadFiles/${locale}/${guide.slug}.md`}
+                styleSheet={{
+                  marginTop: "23px",
+                  width: "100%",
+                  maxWidth: "400px",
+                  display: "flex",
+                  gap: "6px",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexDirection: "row",
+                  borderRadius: "8px",
+                  border: "1px solid #0052FF",
+                  textDecoration: "none",
+                  padding: "14px",
+                  fontSize: "14px",
+                  backgroundColor: "#0052FF",
+                  hover: {
+                    opacity: 1,
+                    backgroundColor: "transparent",
+                  },
+                  focus: {
+                    opacity: 1,
+                    backgroundColor: "transparent",
+                  },
+                }}
+              >
+                {i18n.content("TSHAPE.BUTTON.DOWNLOAD_T_FILE")}
+              </Link>
+            )}
+          </>
         )}
         <Link
           href="/"
diff --git a/src/screens/PathScreen/patterns/TShape/patterns/LeadForm/index.tsx b/src/screens/PathScreen/patterns/TShape/patterns/LeadForm/index.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import Box from "@src/components/Box";
+import { useModal } from "@src/components/Modal";
+import { useI18n } from "@src/infra/i18n";
+import { HubspotForm } from "@src/components/HubspotForm";
+import { PathScreenGetGuideBySlugQuery } from "@src/gql_types";
+
+export function LeadForm({
+  guide,
+}: {
+  guide: PathScreenGetGuideBySlugQuery["guide"];
+}) {
+  const modal = useModal();
+  const i18n = useI18n();
+  return (
+    <>
+      <Box
+        tag="button"
+        onClick={() => {
+          modal.open(
+            <Box
+              styleSheet={{
+                width: "100%",
+                maxWidth: "600px",
+                margin: "0 auto",
+                gap: "16px",
+                padding: "16px",
+                justifySelf: "center",
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+              onClick={(e) => {
+                if (e.target.closest(".hubspot-form")) {
+                  return;
+                }
+                modal.close();
+              }}
+            >
+              <HubspotForm
+                formId={guide.pdfFormId}
+                onFormSubmitted={() => {
+                  // eslint-disable-next-line no-console
+                  console.log("form submitted");
+                  const slug = guide.slug;
+                  const locale = "PT_BR";
+                  const pdfUrl = `https://raw.githubusercontent.com/alura/techguide/refs/heads/main/_data/downloadFiles/${locale}/${slug}.pdf`;
+                  window.open(pdfUrl, "_blank");
+                  modal.close();
+                }}
+              />
+            </Box>
+          );
+        }}
+        styleSheet={{
+          color: "#FFFFFF",
+          marginTop: "23px",
+          width: "100%",
+          maxWidth: "400px",
+          display: "flex",
+          gap: "6px",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          borderRadius: "8px",
+          border: "1px solid #0052FF",
+          textDecoration: "none",
+          padding: "14px",
+          fontSize: "14px",
+          backgroundColor: "#0052FF",
+          hover: {
+            opacity: 1,
+            backgroundColor: "transparent",
+          },
+          focus: {
+            opacity: 1,
+            backgroundColor: "transparent",
+          },
+        }}
+      >
+        {i18n.content("TSHAPE.BUTTON.DOWNLOAD_T_FILE")}
+      </Box>
+    </>
+  );
+}
