Closed 199ocero closed 5 months ago
Hi!
I have actually use this example https://github.com/maizzle/starter-api and it works perfectly well. My concern is why does there is no hover of the generated html? It's not same when you build for production
Sample generated code below:
<!DOCTYPE html> <html> <head> </head> <body> <table class="sm-w-full" style="margin: 4rem auto; width: 600px; font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'" cellpadding="0" cellspacing="0" role="none"> <tr> <td style="border-radius: 0.25rem; background-size: cover; background-position: top; background-repeat: no-repeat; text-align: left; background-image: url('undefined')"> <table style="width: 100%" cellpadding="0" cellspacing="0" role="none"> <tr> <td class="sm-w-4" style="width: 3rem"></td> <td> <h1 class="text-white sm-leading-10" style="margin: 0px 0px 1rem; font-size: 2.25rem; line-height: 2.5rem; color: rgb(255 255 255 / 1)"> Using Maizzle in Node.js </h1> <p class="text-white" style="margin: 0px; font-size: 1.125rem; line-height: 1.5rem; color: rgb(255 255 255 / 1)"> Using Maizzle programmatically in Node.js, with Layouts, Components, and the `render()` method. </p> <div class="sm-h-8">‍</div> <div> <a href="https://maizzle.com/docs/api/" class="text-white bg-indigo-800 hover-bg-indigo-700" style="display: inline-block; border-radius: 0.25rem; background-color: rgb(55 48 163 / 1); padding: 1rem 1.5rem; text-align: center; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: rgb(255 255 255 / 1); text-decoration: none"> <!--[if mso]><i style="letter-spacing: 24px; mso-font-width: -100%; mso-text-raise:30px;"> </i><![endif]--> <span style="mso-text-raise: 16px;">Read more →</span> <!--[if mso]><i style="letter-spacing: 24px; mso-font-width: -100%;"> </i><![endif]--> </a> </div> </td> <td class="sm-w-4" style="width: 3rem"></td> </tr> </table> </td> </tr> </table> </body> </html>
And this is the build in production:
<!DOCTYPE html> <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta charset="utf-8"> <meta name="x-apple-disable-message-reformatting"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"> <meta name="color-scheme" content="light dark"> <meta name="supported-color-schemes" content="light dark"> <!--[if mso]> <noscript> <xml> <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office"> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </noscript> <style> td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;} </style> <![endif]--> <title>Verify Email Address</title> <style> .hover-bg-orange-600:hover { background-color: #ea580c !important } .hover-important-text-decoration-underline:hover { text-decoration: underline !important } @media (max-width: 600px) { .sm-px-4 { padding-left: 16px !important; padding-right: 16px !important } .sm-px-6 { padding-left: 24px !important; padding-right: 24px !important } .sm-leading-8 { line-height: 32px !important } } </style> </head> <body style="margin: 0; width: 100%; background-color: #fafafa; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word"> <div style="display: none"> Please confirm your email address in order to activate your account.  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ </div> <div role="article" aria-roledescription="email" aria-label="Verify Email Address" lang="en"> <div class="sm-px-4" style="background-color: #fafafa; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"> <table align="center" cellpadding="0" cellspacing="0" role="none"> <tr> <td style="width: 700px; max-width: 100%"> <table style="margin-top: 28px; margin-bottom: 28px; width: 100%" cellpadding="0" cellspacing="0" role="none"> <tr> <td class="sm-px-6" style="border-radius: 4px; background-color: #fff; padding: 48px; font-size: 16px; color: #404040; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)"> <div style="margin: 0 0 48px; text-align: start"> <a href="{{ route('home') }}"> <img src="{{ config('assets.logo') }}" alt="FormifyFlow Logo" style="max-width: 100%; vertical-align: middle; line-height: 1; height: 100%; width: 224px"> </a> </div> <h1 class="sm-leading-8" style="margin: 0 0 24px; font-size: 24px; font-weight: 600; color: #000"> Greetings {{ $user->name }}, </h1> <p style="margin: 0; line-height: 24px"> Thank you for signing up with <a href="{{ route('home') }}" style="color: #ea580c"><strong>{{ config('app.name') }}</strong></a>! We're thrilled to have you on board. To complete the registration process, we kindly ask you to verify your email address. </p> <div role="separator" style="line-height: 24px">‍</div> <div> <a href="{{ $url }}" class="hover-bg-orange-600" style="display: inline-block; border-radius: 8px; background-color: #f97316; padding: 16px 24px; font-size: 16px; font-weight: 600; line-height: 1; color: #f8fafc; text-decoration: none"> <!--[if mso]> <i style="mso-font-width: 150%; mso-text-raise: 30px" hidden> </i> <![endif]--> <span style="mso-text-raise: 16px"> Verify email address → </span> <!--[if mso]> <i hidden style="mso-font-width: 150%;"> ​</i> <![endif]--> </a> </div> <div role="separator" style="line-height: 24px">‍</div> <p style="margin: 0; border-radius: 8px; background-color: #fafafa; padding: 20px; font-size: 14px; line-height: 24px"> If the link above does not work, you can copy and paste the following URL into your browser: <a href="{{ $url }}" style="color: #ea580c;">{{ $url }}</a> </p> <div role="separator" style="line-height: 24px">‍</div> <p style="margin: 0; line-height: 24px;"> Once your email address has been verified, you'll have access to our features and services. </p> <div role="separator" style="background-color: #e5e5e5; height: 1px; line-height: 1px; margin: 32px 0">‍</div> <p style="margin: 0; line-height: 24px;"> If you have any questions or need further assistance, please don't hesitate to contact our support team at <a href="mailto:{{ config('mail.from.address') }}" style="color: #ea580c;">{{ config('mail.from.address') }}</a> <br> <br> Happy Form Building, <br> The {{ config('app.name') }} Team </p> </td> </tr> <tr role="separator"> <td style="line-height: 48px">‍</td> </tr> <tr> <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #525252"> <p style="margin: 0 0 16px"> © {{ date('Y') }} {{ config('app.name') }}. All Rights Reserved. </p> <p style="cursor: default"> <a href="{{ route('posts.help.center') }}" class="hover-important-text-decoration-underline" style="color: #c2410c; text-decoration: none">Check our Help Center</a> </p> </td> </tr> </table> </td> </tr> </table> </div> </div> </body> </html>
Hi!
I have actually use this example https://github.com/maizzle/starter-api and it works perfectly well. My concern is why does there is no hover of the generated html? It's not same when you build for production
Sample generated code below:
And this is the build in production: