diff --git a/.moon/tasks.yml b/.moon/tasks.yml index bb81e170..f30f61f3 100644 --- a/.moon/tasks.yml +++ b/.moon/tasks.yml @@ -19,12 +19,25 @@ tasks: outputStyle: 'stream' runDepsInParallel: false + clean.dist: + command: rm -rf dist + options: + cache: false + compile: - command: rm -rf dist && pnpm exec tsc --project tsconfig.json && pnpm exec tsc --project tsconfig.json --outDir dist/es --module esnext --target esnext + command: tsc --project tsconfig.json --outDir dist/es --module esnext --target esnext inputs: - src deps: - ~:tsconfig.link + - ~:compile.cjs + options: + runDepsInParallel: false + + compile.cjs: + command: tsc --project tsconfig.json + options: + cache: false # FIXME: since @jsx-email/components uses workspace deps now, we'll need a script that recognizes # it needs to be updated and manually commits to update the package using versioner diff --git a/.moon/workspace.yml b/.moon/workspace.yml index 1d8626ae..f5c8da32 100644 --- a/.moon/workspace.yml +++ b/.moon/workspace.yml @@ -2,8 +2,8 @@ $schema: 'https://moonrepo.dev/schemas/workspace.json' projects: + - 'apps/*' - 'packages/*' - - deprecated/react-email - '.' vcs: diff --git a/apps/demo/README.md b/apps/demo/README.md index eb7a6a7b..2d12575d 100644 --- a/apps/demo/README.md +++ b/apps/demo/README.md @@ -27,7 +27,7 @@ $ moon run cli:build To start up the preview server locally: ```console -$ pnpm dev +$ moon run demo:dev ``` Open up the preview server [http://localhost:55420/](http://localhost:55420/) \ No newline at end of file diff --git a/apps/demo/emails/airbnb-review.tsx b/apps/demo/emails/airbnb-review.tsx index 3b0617f7..3b86e428 100644 --- a/apps/demo/emails/airbnb-review.tsx +++ b/apps/demo/emails/airbnb-review.tsx @@ -10,7 +10,7 @@ import { Preview, Row, Section, - Text, + Text } from '@jsx-email/components'; import * as React from 'react'; @@ -20,14 +20,12 @@ interface AirbnbReviewEmailProps { reviewText?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ''; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; export const AirbnbReviewEmail = ({ authorName, authorImage, - reviewText, + reviewText }: AirbnbReviewEmailProps) => { const previewText = `Read ${authorName}'s review`; @@ -40,21 +38,10 @@ export const AirbnbReviewEmail = ({
- Airbnb + Airbnb
- {authorName} + {authorName}
@@ -65,9 +52,8 @@ export const AirbnbReviewEmail = ({ ’s review to your Airbnb profile. - While it’s too late to write a review of your own, you can - send your feedback to {authorName} using your Airbnb message - thread. + While it’s too late to write a review of your own, you can send your feedback to{' '} + {authorName} using your Airbnb message thread.
- To participate:{" "} - Create a Pen → and tag it{" "} + To participate: Create a Pen → and tag it{' '} codepenchallenge - {" "} + {' '} and - {" "} + {' '} cpc-cubes - . We'll be watching and gathering the Pens into a Collection, and - sharing on Twitter and{" "} - Instagram (Use the #CodePenChallenge tag - on Twitter and Instagram as well). + . We'll be watching and gathering the Pens into a Collection, and sharing on{' '} + Twitter and Instagram (Use the + #CodePenChallenge tag on Twitter and Instagram as well).
@@ -129,35 +115,33 @@ export const CodepenChallengersEmail = () => (
🌟 - This week we move from 2 dimensions to three! Maybe you could - exercise your perspective in CSS - to create a 3D cube. Or, you can try out creating 3D shapes in - JavaScript, using WebGL or - building a Three.js scene. + This week we move from 2 dimensions to three! Maybe you could exercise your{' '} + perspective in CSS to create a 3D cube. Or, you can + try out creating 3D shapes in JavaScript, using{' '} + WebGL or building a{' '} + Three.js scene.
🌟 - There's more to cubes than just six square sides. There are - variations on the cube that could be fun to play with this - week: cuboid shapes are - hexahedrons with faces that aren't always squares. And if you - want to really push the boundaries of shape, consider the 4 - dimensional tesseract! + There's more to cubes than just six square sides. There are variations on the cube + that could be fun to play with this week:{' '} + cuboid shapes are hexahedrons with faces that aren't + always squares. And if you want to really push the boundaries of shape, consider + the 4 dimensional tesseract!
🌟 - Here's a mind-bending idea that can combine the round shapes - from week one with this week's cube theme:{" "} - Spherical Cubes 😳 Solving - longstanding mathematical mysteries is probably outside the - scope of a CodePen challenge, but you could use front-end - tools to explore fitting spheres into cubes, or vice-versa. + Here's a mind-bending idea that can combine the round shapes from week one with + this week's cube theme: Spherical Cubes 😳 Solving + longstanding mathematical mysteries is probably outside the scope of a CodePen + challenge, but you could use front-end tools to explore fitting spheres into + cubes, or vice-versa.
@@ -167,24 +151,19 @@ export const CodepenChallengersEmail = () => (
📖 - Learn all about{" "} - How CSS Perspective Works and - how to build a 3D CSS cube from scratch in Amit Sheen's - in-depth tutorial for CSS-Tricks. Or, check out stunning - examples of WebGL cubes from Matthias Hurrle:{" "} - Just Ice and{" "} - Posing. + Learn all about How CSS Perspective Works and how to + build a 3D CSS cube from scratch in Amit Sheen's in-depth tutorial for CSS-Tricks. + Or, check out stunning examples of WebGL cubes from Matthias Hurrle:{' '} + Just Ice and Posing.
📖 - Want to go beyond the square cube? Draw inspiration from - EntropyReversed's{" "} - Pulsating Tesseract, Josetxu's{" "} - Rainbow Cuboid Loader, or Ana - Tudor's{" "} + Want to go beyond the square cube? Draw inspiration from EntropyReversed's{' '} + Pulsating Tesseract, Josetxu's{' '} + Rainbow Cuboid Loader, or Ana Tudor's{' '} Pure CSS cuboid jellyfish.
@@ -192,16 +171,12 @@ export const CodepenChallengersEmail = () => (
📖 - Did that spherical cubes concept pique your interest? Explore - Ryan Mulligan's Cube Sphere, - Munir Safi's{" "} - - 3D Sphere to Cube Animation With Virtual Trackball - {" "} - and Ana Tudor's{" "} - Infinitely unpack prism for more - mindbending cube concepts that test the boundaries of how - shapes interact with each other. + Did that spherical cubes concept pique your interest? Explore Ryan Mulligan's{' '} + Cube Sphere, Munir Safi's{' '} + 3D Sphere to Cube Animation With Virtual Trackball{' '} + and Ana Tudor's Infinitely unpack prism for more + mindbending cube concepts that test the boundaries of how shapes interact with + each other.
@@ -216,11 +191,9 @@ export const CodepenChallengersEmail = () => (
- You can adjust your{" "} - email preferences any time, or{" "} - instantly opt out of emails of this - kind. Need help with anything? Hit up{" "} - support. + You can adjust your email preferences any time, or{' '} + instantly opt out of emails of this kind. Need help with + anything? Hit up support.
@@ -232,184 +205,184 @@ export default CodepenChallengersEmail; const main = { fontFamily: '"Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif', - backgroundColor: "#505050", - margin: "0", + backgroundColor: '#505050', + margin: '0' }; const imgHeader = { - margin: "auto", + margin: 'auto' }; const header = { - width: "100%", - backgroundColor: "#191919", - margin: "0 auto", - paddingBottom: "30px", - zIndex: "999", + width: '100%', + backgroundColor: '#191919', + margin: '0 auto', + paddingBottom: '30px', + zIndex: '999' }; const container = { - paddingLeft: "12px", - paddingRight: "12px", - margin: "0 auto", - width: "648px", - maxWidth: "648px", - position: "relative" as const, + paddingLeft: '12px', + paddingRight: '12px', + margin: '0 auto', + width: '648px', + maxWidth: '648px', + position: 'relative' as const }; const challengeLink = { - backgroundColor: "#505050", - textAlign: "center" as const, - padding: "10px 0 25px 0", - fontSize: "13px", - position: "absolute" as const, - width: "100%", - maxWidth: "648px", - top: "-28px", - margin: "0 0 16px 0", + backgroundColor: '#505050', + textAlign: 'center' as const, + padding: '10px 0 25px 0', + fontSize: '13px', + position: 'absolute' as const, + width: '100%', + maxWidth: '648px', + top: '-28px', + margin: '0 0 16px 0' }; const link = { - color: "#fff", - cursor: "pointer", + color: '#fff', + cursor: 'pointer' }; const blueLink = { - color: "#15c", - cursor: "pointer", + color: '#15c', + cursor: 'pointer' }; const heading = { - background: "#f0d361", - padding: "30px", - color: "#191919", - fontWeight: "400", - marginBottom: "0", + background: '#f0d361', + padding: '30px', + color: '#191919', + fontWeight: '400', + marginBottom: '0' }; const section = { - margin: "0", - background: "#fff", - padding: "0 24px", + margin: '0', + background: '#fff', + padding: '0 24px' }; const yellowSection = { - background: "#f5d247", - padding: "30px", - fontSize: "18px", - lineHeight: "1.5", + background: '#f5d247', + padding: '30px', + fontSize: '18px', + lineHeight: '1.5' }; const text = { - fontSize: "16px", + fontSize: '16px' }; -const cubeText = { fontSize: "32px", margin: "4px 0 0 0" }; +const cubeText = { fontSize: '32px', margin: '4px 0 0 0' }; const yourChallenge = { - fontSize: "16px", - border: "6px solid #ebd473", - padding: "20px", - margin: "0 0 40px 0", + fontSize: '16px', + border: '6px solid #ebd473', + padding: '20px', + margin: '0 0 40px 0' }; const sectionPro = { - marginTop: "40px", - marginBottom: "24px", - textAlign: "center" as const, - background: "#0b112a", - color: "#fff", - padding: "35px 20px 30px 20px", - border: "6px solid #2138c6", + marginTop: '40px', + marginBottom: '24px', + textAlign: 'center' as const, + background: '#0b112a', + color: '#fff', + padding: '35px 20px 30px 20px', + border: '6px solid #2138c6' }; -const imagePro = { margin: "0 auto 30px auto" }; +const imagePro = { margin: '0 auto 30px auto' }; const button = { - background: "#2138c6", - color: "#fff", - border: "0", - fontSize: "15px", - lineHeight: "18px", - cursor: "pointer", - borderRadius: "4px", + background: '#2138c6', + color: '#fff', + border: '0', + fontSize: '15px', + lineHeight: '18px', + cursor: 'pointer', + borderRadius: '4px' }; const resourcesTitle = { - fontWeight: "900", - lineHeight: "1.1", - marginTop: "-40px", - fontSize: "18px", + fontWeight: '900', + lineHeight: '1.1', + marginTop: '-40px', + fontSize: '18px' }; const ideasTitle = { - fontWeight: "900", - lineHeight: "1.1", - fontSize: "18px", + fontWeight: '900', + lineHeight: '1.1', + fontSize: '18px' }; const ideas = { - width: "50%", - paddingRight: "10px", + width: '50%', + paddingRight: '10px' }; const resources = { - width: "50%", - paddingLeft: "10px", + width: '50%', + paddingLeft: '10px' }; const card = { - padding: "20px", - margin: "0 0 20px 0", - borderRadius: "10px", - fontSize: "36px", - textAlign: "center" as const, + padding: '20px', + margin: '0 0 20px 0', + borderRadius: '10px', + fontSize: '36px', + textAlign: 'center' as const }; const yellowCard = { ...card, - background: "#fff4c8", - border: "1px solid #f4d247", + background: '#fff4c8', + border: '1px solid #f4d247' }; const blueCard = { ...card, - background: "#d9f6ff", - border: "1px solid #92bfd0", + background: '#d9f6ff', + border: '1px solid #92bfd0' }; const textCard = { - fontSize: "13px", - textAlign: "left" as const, + fontSize: '13px', + textAlign: 'left' as const }; const goToChallenge = { - margin: "40px 0 120px 0", - textAlign: "center" as const, + margin: '40px 0 120px 0', + textAlign: 'center' as const }; const footerButton = { - fontSize: "26px", - color: "#15c", - background: "#222", - borderRadius: "4px", - fontWeight: "bold", - cursor: "pointer", + fontSize: '26px', + color: '#15c', + background: '#222', + borderRadius: '4px', + fontWeight: 'bold', + cursor: 'pointer' }; const footer = { - background: "#fff", - color: "#505050", - padding: "0 24px", - marginBottom: "48px", + background: '#fff', + color: '#505050', + padding: '0 24px', + marginBottom: '48px' }; const footerText = { - fontSize: "13px", + fontSize: '13px' }; const footerLink = { - textDecoration: "underline", - color: "#505050", - cursor: "pointer", + textDecoration: 'underline', + color: '#505050', + cursor: 'pointer' }; diff --git a/apps/demo/emails/dropbox-reset-password.tsx b/apps/demo/emails/dropbox-reset-password.tsx index bf1cacbe..dd0bbcf9 100644 --- a/apps/demo/emails/dropbox-reset-password.tsx +++ b/apps/demo/emails/dropbox-reset-password.tsx @@ -8,22 +8,20 @@ import { Link, Preview, Section, - Text, + Text } from '@jsx-email/components'; -import * as React from "react"; +import * as React from 'react'; interface DropboxResetPasswordEmailProps { userFirstname?: string; resetPasswordLink?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; export const DropboxResetPasswordEmail = ({ userFirstname, - resetPasswordLink, + resetPasswordLink }: DropboxResetPasswordEmailProps) => { return ( @@ -31,28 +29,23 @@ export const DropboxResetPasswordEmail = ({ Dropbox reset your password - Dropbox + Dropbox
Hi {userFirstname}, - Someone recently requested a password change for your Dropbox - account. If this was you, you can set a new password here: + Someone recently requested a password change for your Dropbox account. If this was + you, you can set a new password here: - If you don't want to change your password or didn't - request this, just ignore and delete this message. + If you don't want to change your password or didn't request this, just + ignore and delete this message. - To keep your account secure, please don't forward this email - to anyone. See our Help Center for{" "} + To keep your account secure, please don't forward this email to anyone. See our + Help Center for{' '} more security tips. @@ -66,44 +59,44 @@ export const DropboxResetPasswordEmail = ({ }; DropboxResetPasswordEmail.PreviewProps = { - userFirstname: "Zeno", - resetPasswordLink: "https://dropbox.com", + userFirstname: 'Zeno', + resetPasswordLink: 'https://dropbox.com' } as DropboxResetPasswordEmailProps; export default DropboxResetPasswordEmail; const main = { - backgroundColor: "#f6f9fc", - padding: "10px 0", + backgroundColor: '#f6f9fc', + padding: '10px 0' }; const container = { - backgroundColor: "#ffffff", - border: "1px solid #f0f0f0", - padding: "45px", + backgroundColor: '#ffffff', + border: '1px solid #f0f0f0', + padding: '45px' }; const text = { - fontSize: "16px", + fontSize: '16px', fontFamily: "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif", - fontWeight: "300", - color: "#404040", - lineHeight: "26px", + fontWeight: '300', + color: '#404040', + lineHeight: '26px' }; const button = { - backgroundColor: "#007ee6", - borderRadius: "4px", - color: "#fff", + backgroundColor: '#007ee6', + borderRadius: '4px', + color: '#fff', fontFamily: "'Open Sans', 'Helvetica Neue', Arial", - fontSize: "15px", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - width: "210px", + fontSize: '15px', + textDecoration: 'none', + textAlign: 'center' as const, + display: 'block', + width: '210px' }; const anchor = { - textDecoration: "underline", + textDecoration: 'underline' }; diff --git a/apps/demo/emails/github-access-token.tsx b/apps/demo/emails/github-access-token.tsx index 17a04242..7ae02485 100644 --- a/apps/demo/emails/github-access-token.tsx +++ b/apps/demo/emails/github-access-token.tsx @@ -8,38 +8,26 @@ import { Link, Preview, Section, - Text, + Text } from '@jsx-email/components'; -import * as React from "react"; +import * as React from 'react'; interface GithubAccessTokenEmailProps { username?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; -export const GithubAccessTokenEmail = ({ - username, -}: GithubAccessTokenEmailProps) => ( +export const GithubAccessTokenEmail = ({ username }: GithubAccessTokenEmailProps) => ( - - A fine-grained personal access token has been added to your account - + A fine-grained personal access token has been added to your account - Github + Github - @{username}, a personal access was created on your - account. + @{username}, a personal access was created on your account.
@@ -47,8 +35,8 @@ export const GithubAccessTokenEmail = ({ Hey {username}! - A fine-grained personal access token (resend) was - recently added to your account. + A fine-grained personal access token (resend) was recently added to your + account.
- Your security audit log ・{" "} + Your security audit log ・{' '} Contact support @@ -69,61 +57,61 @@ export const GithubAccessTokenEmail = ({ ); GithubAccessTokenEmail.PreviewProps = { - username: "zenorocha", + username: 'zenorocha' } as GithubAccessTokenEmailProps; export default GithubAccessTokenEmail; const main = { - backgroundColor: "#ffffff", - color: "#24292e", + backgroundColor: '#ffffff', + color: '#24292e', fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"', + '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"' }; const container = { - width: "480px", - margin: "0 auto", - padding: "20px 0 48px", + width: '480px', + margin: '0 auto', + padding: '20px 0 48px' }; const title = { - fontSize: "24px", - lineHeight: 1.25, + fontSize: '24px', + lineHeight: 1.25 }; const section = { - padding: "24px", - border: "solid 1px #dedede", - borderRadius: "5px", - textAlign: "center" as const, + padding: '24px', + border: 'solid 1px #dedede', + borderRadius: '5px', + textAlign: 'center' as const }; const text = { - margin: "0 0 10px 0", - textAlign: "left" as const, + margin: '0 0 10px 0', + textAlign: 'left' as const }; const button = { - fontSize: "14px", - backgroundColor: "#28a745", - color: "#fff", + fontSize: '14px', + backgroundColor: '#28a745', + color: '#fff', lineHeight: 1.5, - borderRadius: "0.5em", + borderRadius: '0.5em' }; const links = { - textAlign: "center" as const, + textAlign: 'center' as const }; const link = { - color: "#0366d6", - fontSize: "12px", + color: '#0366d6', + fontSize: '12px' }; const footer = { - color: "#6a737d", - fontSize: "12px", - textAlign: "center" as const, - marginTop: "60px", + color: '#6a737d', + fontSize: '12px', + textAlign: 'center' as const, + marginTop: '60px' }; diff --git a/apps/demo/emails/google-play-policy-update.tsx b/apps/demo/emails/google-play-policy-update.tsx index 2bce6eee..a5b80a0f 100644 --- a/apps/demo/emails/google-play-policy-update.tsx +++ b/apps/demo/emails/google-play-policy-update.tsx @@ -10,13 +10,11 @@ import { Preview, Row, Section, - Text, + Text } from '@jsx-email/components'; -import * as React from "react"; +import * as React from 'react'; -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; export const GooglePlayPolicyUpdateEmail = () => ( @@ -50,31 +48,29 @@ export const GooglePlayPolicyUpdateEmail = () => ( DEVELOPER UPDATE Hello Google Play Developer, - We strive to make Google Play a safe and trusted experience for - users. + We strive to make Google Play a safe and trusted experience for users. - We've added clarifications to our{" "} + We've added clarifications to our{' '} Target API Level policy - . Because this is a clarification, our enforcement standards and - practices for this policy remain the same. + . Because this is a clarification, our enforcement standards and practices for this + policy remain the same.
- We’re noting exceptions to the{" "} + We’re noting exceptions to the{' '} Target API Level policy - , which can be found in our updated{" "} + , which can be found in our updated{' '} Help Center article. - These exceptions include permanently private apps and apps that - target automotive or wearables form factors and are bundled within - the same package.{" "} + These exceptions include permanently private apps and apps that target automotive or + wearables form factors and are bundled within the same package.{' '} Learn more @@ -82,21 +78,18 @@ export const GooglePlayPolicyUpdateEmail = () => (
- We’re also extending the deadline to give you more time to adjust to - these changes. Now, apps that target API level 29 or below will - start experiencing reduced distribution starting Jan 31, 2023{" "} - instead of Nov 1, 2022. If you need more time to update your app, - you can request an extension to keep your app discoverable to all - users until May 1, 2023. + We’re also extending the deadline to give you more time to adjust to these changes. Now, + apps that target API level 29 or below will start experiencing reduced distribution + starting Jan 31, 2023 instead of Nov 1, 2022. If you need more time to update + your app, you can request an extension to keep your app discoverable to all users until + May 1, 2023.
Thank you, - - The Google Play team - + The Google Play team
@@ -106,44 +99,28 @@ export const GooglePlayPolicyUpdateEmail = () => ( - + - + - + - + - + - + - +
@@ -151,25 +128,23 @@ export const GooglePlayPolicyUpdateEmail = () => ( - © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA - 94043, USA + © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA - You have received this mandatory email service announcement to - update you about important changes to your Google Play Developer - account. + You have received this mandatory email service announcement to update you about + important changes to your Google Play Developer account.
@@ -180,62 +155,62 @@ export const GooglePlayPolicyUpdateEmail = () => ( export default GooglePlayPolicyUpdateEmail; const main = { - backgroundColor: "#dbddde", + backgroundColor: '#dbddde', fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif' }; const sectionLogo = { - padding: "0 40px", + padding: '0 40px' }; const headerBlue = { - marginTop: "-1px", + marginTop: '-1px' }; const container = { - margin: "30px auto", - width: "610px", - backgroundColor: "#fff", + margin: '30px auto', + width: '610px', + backgroundColor: '#fff', borderRadius: 5, - overflow: "hidden", + overflow: 'hidden' }; const containerContact = { - backgroundColor: "#f0fcff", - width: "90%", - borderRadius: "5px", - overflow: "hidden", - paddingLeft: "20px", + backgroundColor: '#f0fcff', + width: '90%', + borderRadius: '5px', + overflow: 'hidden', + paddingLeft: '20px' }; const heading = { - fontSize: "14px", - lineHeight: "26px", - fontWeight: "700", - color: "#004dcf", + fontSize: '14px', + lineHeight: '26px', + fontWeight: '700', + color: '#004dcf' }; const paragraphContent = { - padding: "0 40px", + padding: '0 40px' }; const paragraphList = { - paddingLeft: 40, + paddingLeft: 40 }; const paragraph = { - fontSize: "14px", - lineHeight: "22px", - color: "#3c4043", + fontSize: '14px', + lineHeight: '22px', + color: '#3c4043' }; const link = { ...paragraph, - color: "#004dcf", + color: '#004dcf' }; const hr = { - borderColor: "#e8eaed", - margin: "20px 0", + borderColor: '#e8eaed', + margin: '20px 0' }; diff --git a/apps/demo/emails/koala-welcome.tsx b/apps/demo/emails/koala-welcome.tsx index 47fb22c8..4f3f3cf6 100644 --- a/apps/demo/emails/koala-welcome.tsx +++ b/apps/demo/emails/koala-welcome.tsx @@ -8,7 +8,7 @@ import { Img, Preview, Section, - Text, + Text } from '@jsx-email/components'; import * as React from 'react'; @@ -16,18 +16,12 @@ interface KoalaWelcomeEmailProps { userFirstname: string; } -const baseUrl = import.meta?.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ''; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; -export const KoalaWelcomeEmail = ({ - userFirstname, -}: KoalaWelcomeEmailProps) => ( +export const KoalaWelcomeEmail = ({ userFirstname }: KoalaWelcomeEmailProps) => ( - - The sales intelligence platform that helps you uncover qualified leads. - + The sales intelligence platform that helps you uncover qualified leads. Hi {userFirstname}, - Welcome to Koala, the sales intelligence platform that helps you - uncover qualified leads and close deals faster. + Welcome to Koala, the sales intelligence platform that helps you uncover qualified leads + and close deals faster.
- This link and code will only be valid for the next 5 minutes. If the - link does not work, you can use the login verification code directly: + This link and code will only be valid for the next 5 minutes. If the link does not work, + you can use the login verification code directly: {validationCode}
@@ -58,7 +54,7 @@ export const LinearLoginCodeEmail = ({ ); LinearLoginCodeEmail.PreviewProps = { - validationCode: 'tt226-5398x', + validationCode: 'tt226-5398x' } as LinearLoginCodeEmailProps; export default LinearLoginCodeEmail; @@ -66,19 +62,19 @@ export default LinearLoginCodeEmail; const logo = { borderRadius: 21, width: 42, - height: 42, + height: 42 }; const main = { backgroundColor: '#ffffff', fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif' }; const container = { margin: '0 auto', padding: '20px 0 48px', - width: '560px', + width: '560px' }; const heading = { @@ -87,18 +83,18 @@ const heading = { lineHeight: '1.3', fontWeight: '400', color: '#484848', - padding: '17px 0 0', + padding: '17px 0 0' }; const paragraph = { margin: '0 0 15px', fontSize: '15px', lineHeight: '1.4', - color: '#3c4149', + color: '#3c4149' }; const buttonContainer = { - padding: '27px 0 27px', + padding: '27px 0 27px' }; const button = { @@ -109,17 +105,17 @@ const button = { fontSize: '15px', textDecoration: 'none', textAlign: 'center' as const, - display: 'block', + display: 'block' }; const reportLink = { fontSize: '14px', - color: '#b4becc', + color: '#b4becc' }; const hr = { borderColor: '#dfe1e4', - margin: '42px 0 26px', + margin: '42px 0 26px' }; const code = { @@ -130,5 +126,5 @@ const code = { letterSpacing: '-0.3px', fontSize: '21px', borderRadius: '4px', - color: '#3c4149', + color: '#3c4149' }; diff --git a/apps/demo/emails/netlify-welcome.tsx b/apps/demo/emails/netlify-welcome.tsx index 4c427014..5f2f7e8e 100644 --- a/apps/demo/emails/netlify-welcome.tsx +++ b/apps/demo/emails/netlify-welcome.tsx @@ -12,9 +12,9 @@ import { Row, Section, Tailwind, - Text, -} from'@jsx-email/components'; -import * as React from "react"; + Text +} from '@jsx-email/components'; +import * as React from 'react'; interface NetlifyWelcomeEmailProps { steps?: { @@ -24,9 +24,7 @@ interface NetlifyWelcomeEmailProps { links?: string[]; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; const PropDefaults: NetlifyWelcomeEmailProps = { steps: [ @@ -34,49 +32,46 @@ const PropDefaults: NetlifyWelcomeEmailProps = { id: 1, Description: (
  • - Deploy your first project.{" "} - Connect to Git, choose a template, or manually deploy a - project you've been working on locally. + Deploy your first project. Connect to Git, choose a template + , or manually deploy a project you've been working on locally.
    • - ), + ) }, { id: 2, Description: (
  • - Check your deploy logs. Find out what's included in - your build and watch for errors or failed deploys.{" "} - Learn how to read your deploy logs. + Check your deploy logs. Find out what's included in your build and watch + for errors or failed deploys. Learn how to read your deploy logs.
    • - ), + ) }, { id: 3, Description: (
  • - Choose an integration. Quickly discover, connect, and - configure the right tools for your project with 150+ integrations to - choose from. Explore the Integrations Hub. + Choose an integration. Quickly discover, connect, and configure the right + tools for your project with 150+ integrations to choose from.{' '} + Explore the Integrations Hub.
    • - ), + ) }, { id: 4, Description: (
  • - Set up a custom domain. You can register a new domain - and buy it through Netlify or assign a domain you already own to your - site. Add a custom domain. + Set up a custom domain. You can register a new domain and buy it through + Netlify or assign a domain you already own to your site. Add a custom domain.
    • - ), - }, + ) + } ], - links: ["Visit the forums", "Read the docs", "Contact an expert"], + links: ['Visit the forums', 'Read the docs', 'Contact an expert'] }; export const NetlifyWelcomeEmail = ({ steps = PropDefaults.steps, - links = PropDefaults.links, + links = PropDefaults.links }: NetlifyWelcomeEmailProps) => { return ( @@ -87,16 +82,16 @@ export const NetlifyWelcomeEmail = ({ theme: { extend: { colors: { - brand: "#2250f4", - offwhite: "#fafbfb", + brand: '#2250f4', + offwhite: '#fafbfb' }, spacing: { - 0: "0px", - 20: "20px", - 45: "45px", - }, - }, - }, + 0: '0px', + 20: '20px', + 45: '45px' + } + } + } }} > @@ -113,9 +108,8 @@ export const NetlifyWelcomeEmail = ({
    - Congratulations! You're joining over 3 million developers - around the world who use Netlify to build and ship sites, - stores, and apps. + Congratulations! You're joining over 3 million developers around the world who use + Netlify to build and ship sites, stores, and apps. Here's how to get started: @@ -125,11 +119,7 @@ export const NetlifyWelcomeEmail = ({
      {steps?.map(({ Description }) => Description)}
    -
    @@ -138,9 +128,7 @@ export const NetlifyWelcomeEmail = ({ {links?.map((link) => ( - - {link} - {" "} + {link}{' '} → ))} diff --git a/apps/demo/emails/nike-receipt.tsx b/apps/demo/emails/nike-receipt.tsx index 3a31420c..8779bac4 100644 --- a/apps/demo/emails/nike-receipt.tsx +++ b/apps/demo/emails/nike-receipt.tsx @@ -11,13 +11,11 @@ import { Preview, Row, Section, - Text, + Text } from '@jsx-email/components'; -import * as React from "react"; +import * as React from 'react'; -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; export const NikeReceiptEmail = () => ( @@ -43,16 +41,16 @@ export const NikeReceiptEmail = () => ( width="66" height="22" alt="Nike" - style={{ margin: "auto" }} + style={{ margin: 'auto' }} /> It's On Its Way. You order's is on its way. Use the link above to track its progress. - We´ve also charged your payment method for the cost of your order - and will be removing any authorization holds. For payment details, - please visit your Orders page on Nike.com or in the Nike app. + We´ve also charged your payment method for the cost of your order and will be removing + any authorization holds. For payment details, please visit your Orders page on Nike.com + or in the Nike app.
    @@ -63,20 +61,18 @@ export const NikeReceiptEmail = () => (
    -
    +
    Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey - - + + Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey Size L (12–14) @@ -85,8 +81,8 @@ export const NikeReceiptEmail = () => (
    - - + + Order Number C0106373851 @@ -107,21 +103,14 @@ export const NikeReceiptEmail = () => ( Top Picks For You - + Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey - - USWNT 2022/23 Stadium Home - - - Women's Nike Dri-FIT Soccer Jersey - + USWNT 2022/23 Stadium Home + Women's Nike Dri-FIT Soccer Jersey ( alt="Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey" width="100%" /> - - Brazil 2022/23 Stadium Goalkeeper - + Brazil 2022/23 Stadium Goalkeeper Men's Nike Dri-FIT Short-Sleeve Football Shirt @@ -145,19 +132,14 @@ export const NikeReceiptEmail = () => ( FFF Women's Soccer Jacket - + Brazil 2022/23 Stadium Away Women's Nike Dri-FIT Soccer Jersey FFF - - Women's Nike Pre-Match Football Top - + Women's Nike Pre-Match Football Top
    @@ -167,29 +149,29 @@ export const NikeReceiptEmail = () => ( Get Help - + Shipping Status - + Shipping & Delivery - + Returns & Exchanges - - + + How to Return - + Contact Options @@ -199,18 +181,16 @@ export const NikeReceiptEmail = () => ( - + - - 1-800-806-6453 - + 1-800-806-6453 @@ -218,7 +198,7 @@ export const NikeReceiptEmail = () => ( 4 am - 11 pm PT @@ -254,7 +234,7 @@ export const NikeReceiptEmail = () => (
    -
    +
    @@ -266,14 +246,12 @@ export const NikeReceiptEmail = () => ( - Please contact us if you have any questions. (If you reply to this - email, we won't be able to see it.) + Please contact us if you have any questions. (If you reply to this email, we won't be + able to see it.) - - © 2022 Nike, Inc. All Rights Reserved. - + © 2022 Nike, Inc. All Rights Reserved. @@ -289,18 +267,18 @@ export const NikeReceiptEmail = () => ( export default NikeReceiptEmail; const paddingX = { - paddingLeft: "40px", - paddingRight: "40px", + paddingLeft: '40px', + paddingRight: '40px' }; const paddingY = { - paddingTop: "22px", - paddingBottom: "22px", + paddingTop: '22px', + paddingBottom: '22px' }; const paragraph = { - margin: "0", - lineHeight: "2", + margin: '0', + lineHeight: '2' }; const global = { @@ -308,152 +286,152 @@ const global = { paddingY, defaultPadding: { ...paddingX, - ...paddingY, + ...paddingY }, - paragraphWithBold: { ...paragraph, fontWeight: "bold" }, + paragraphWithBold: { ...paragraph, fontWeight: 'bold' }, heading: { - fontSize: "32px", - lineHeight: "1.3", - fontWeight: "700", - textAlign: "center", - letterSpacing: "-1px", + fontSize: '32px', + lineHeight: '1.3', + fontWeight: '700', + textAlign: 'center', + letterSpacing: '-1px' } as React.CSSProperties, text: { ...paragraph, - color: "#747474", - fontWeight: "500", + color: '#747474', + fontWeight: '500' }, button: { - border: "1px solid #929292", - fontSize: "16px", - textDecoration: "none", - padding: "10px 0px", - width: "220px", - display: "block", - textAlign: "center", + border: '1px solid #929292', + fontSize: '16px', + textDecoration: 'none', + padding: '10px 0px', + width: '220px', + display: 'block', + textAlign: 'center', fontWeight: 500, - color: "#000", + color: '#000' } as React.CSSProperties, hr: { - borderColor: "#E5E5E5", - margin: "0", - }, + borderColor: '#E5E5E5', + margin: '0' + } }; const main = { - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif' }; const container = { - margin: "10px auto", - width: "600px", - border: "1px solid #E5E5E5", + margin: '10px auto', + width: '600px', + border: '1px solid #E5E5E5' }; const track = { container: { - padding: "22px 40px", - backgroundColor: "#F7F7F7", + padding: '22px 40px', + backgroundColor: '#F7F7F7' }, number: { - margin: "12px 0 0 0", + margin: '12px 0 0 0', fontWeight: 500, - lineHeight: "1.4", - color: "#6F6F6F", - }, + lineHeight: '1.4', + color: '#6F6F6F' + } }; const message = { - padding: "40px 74px", - textAlign: "center", + padding: '40px 74px', + textAlign: 'center' } as React.CSSProperties; const adressTitle = { ...paragraph, - fontSize: "15px", - fontWeight: "bold", + fontSize: '15px', + fontWeight: 'bold' }; const recomendationsText = { - margin: "0", - fontSize: "15px", - lineHeight: "1", - paddingLeft: "10px", - paddingRight: "10px", + margin: '0', + fontSize: '15px', + lineHeight: '1', + paddingLeft: '10px', + paddingRight: '10px' }; const recomendations = { container: { - padding: "20px 0", + padding: '20px 0' }, product: { - verticalAlign: "top", - textAlign: "left" as const, - paddingLeft: "2px", - paddingRight: "2px", + verticalAlign: 'top', + textAlign: 'left' as const, + paddingLeft: '2px', + paddingRight: '2px' }, - title: { ...recomendationsText, paddingTop: "12px", fontWeight: "500" }, + title: { ...recomendationsText, paddingTop: '12px', fontWeight: '500' }, text: { ...recomendationsText, - paddingTop: "4px", - color: "#747474", - }, + paddingTop: '4px', + color: '#747474' + } }; const menu = { container: { - paddingLeft: "20px", - paddingRight: "20px", - paddingTop: "20px", - backgroundColor: "#F7F7F7", + paddingLeft: '20px', + paddingRight: '20px', + paddingTop: '20px', + backgroundColor: '#F7F7F7' }, content: { ...paddingY, - paddingLeft: "20px", - paddingRight: "20px", + paddingLeft: '20px', + paddingRight: '20px' }, title: { - paddingLeft: "20px", - paddingRight: "20px", - fontWeight: "bold", + paddingLeft: '20px', + paddingRight: '20px', + fontWeight: 'bold' }, text: { - fontSize: "13.5px", + fontSize: '13.5px', marginTop: 0, fontWeight: 500, - color: "#000", + color: '#000' }, tel: { - paddingLeft: "20px", - paddingRight: "20px", - paddingTop: "32px", - paddingBottom: "22px", - }, + paddingLeft: '20px', + paddingRight: '20px', + paddingTop: '32px', + paddingBottom: '22px' + } }; const categories = { container: { - width: "370px", - margin: "auto", - paddingTop: "12px", + width: '370px', + margin: 'auto', + paddingTop: '12px' }, text: { - fontWeight: "500", - color: "#000", - }, + fontWeight: '500', + color: '#000' + } }; const footer = { policy: { - width: "166px", - margin: "auto", + width: '166px', + margin: 'auto' }, text: { - margin: "0", - color: "#AFAFAF", - fontSize: "13px", - textAlign: "center", - } as React.CSSProperties, + margin: '0', + color: '#AFAFAF', + fontSize: '13px', + textAlign: 'center' + } as React.CSSProperties }; diff --git a/apps/demo/emails/notion-magic-link.tsx b/apps/demo/emails/notion-magic-link.tsx index 8e141a0d..4981880e 100644 --- a/apps/demo/emails/notion-magic-link.tsx +++ b/apps/demo/emails/notion-magic-link.tsx @@ -7,7 +7,7 @@ import { Img, Link, Preview, - Text, + Text } from '@jsx-email/components'; import * as React from 'react'; @@ -15,13 +15,9 @@ interface NotionMagicLinkEmailProps { loginCode?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ''; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; -export const NotionMagicLinkEmail = ({ - loginCode, -}: NotionMagicLinkEmailProps) => ( +export const NotionMagicLinkEmail = ({ loginCode }: NotionMagicLinkEmailProps) => ( Log in with this magic link @@ -34,7 +30,7 @@ export const NotionMagicLinkEmail = ({ style={{ ...link, display: 'block', - marginBottom: '16px', + marginBottom: '16px' }} > Click here to log in with this magic link @@ -48,7 +44,7 @@ export const NotionMagicLinkEmail = ({ ...text, color: '#ababab', marginTop: '14px', - marginBottom: '16px', + marginBottom: '16px' }} > If you didn't try to login, you can safely ignore this email. @@ -58,24 +54,14 @@ export const NotionMagicLinkEmail = ({ ...text, color: '#ababab', marginTop: '12px', - marginBottom: '38px', + marginBottom: '38px' }} > - Hint: You can set a permanent password in Settings & members → My - account. + Hint: You can set a permanent password in Settings & members → My account. - Notion's Logo + Notion's Logo - + Notion.so , the all-in-one-workspace @@ -88,19 +74,19 @@ export const NotionMagicLinkEmail = ({ ); NotionMagicLinkEmail.PreviewProps = { - loginCode: 'sparo-ndigo-amurt-secan', + loginCode: 'sparo-ndigo-amurt-secan' } as NotionMagicLinkEmailProps; export default NotionMagicLinkEmail; const main = { - backgroundColor: '#ffffff', + backgroundColor: '#ffffff' }; const container = { paddingLeft: '12px', paddingRight: '12px', - margin: '0 auto', + margin: '0 auto' }; const h1 = { @@ -110,7 +96,7 @@ const h1 = { fontSize: '24px', fontWeight: 'bold', margin: '40px 0', - padding: '0', + padding: '0' }; const link = { @@ -118,7 +104,7 @@ const link = { fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", fontSize: '14px', - textDecoration: 'underline', + textDecoration: 'underline' }; const text = { @@ -126,7 +112,7 @@ const text = { fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", fontSize: '14px', - margin: '24px 0', + margin: '24px 0' }; const footer = { @@ -136,7 +122,7 @@ const footer = { fontSize: '12px', lineHeight: '22px', marginTop: '12px', - marginBottom: '24px', + marginBottom: '24px' }; const code = { @@ -146,5 +132,5 @@ const code = { backgroundColor: '#f4f4f4', borderRadius: '5px', border: '1px solid #eee', - color: '#333', + color: '#333' }; diff --git a/apps/demo/emails/plaid-verify-identity.tsx b/apps/demo/emails/plaid-verify-identity.tsx index c33f4491..3076e7d7 100644 --- a/apps/demo/emails/plaid-verify-identity.tsx +++ b/apps/demo/emails/plaid-verify-identity.tsx @@ -7,7 +7,7 @@ import { Img, Link, Section, - Text, + Text } from '@jsx-email/components'; import * as React from 'react'; @@ -15,13 +15,9 @@ interface PlaidVerifyIdentityEmailProps { validationCode?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ''; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; -export const PlaidVerifyIdentityEmail = ({ - validationCode, -}: PlaidVerifyIdentityEmailProps) => ( +export const PlaidVerifyIdentityEmail = ({ validationCode }: PlaidVerifyIdentityEmailProps) => ( @@ -34,9 +30,7 @@ export const PlaidVerifyIdentityEmail = ({ style={logo} /> Verify Your Identity - - Enter the following code to finish linking Venmo. - + Enter the following code to finish linking Venmo.
    {validationCode}
    @@ -55,14 +49,14 @@ export const PlaidVerifyIdentityEmail = ({ ); PlaidVerifyIdentityEmail.PreviewProps = { - validationCode: '144833', + validationCode: '144833' } as PlaidVerifyIdentityEmailProps; export default PlaidVerifyIdentityEmail; const main = { backgroundColor: '#ffffff', - fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', + fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif' }; const container = { @@ -73,11 +67,11 @@ const container = { marginTop: '20px', width: '360px', margin: '0 auto', - padding: '68px 0 130px', + padding: '68px 0 130px' }; const logo = { - margin: '0 auto', + margin: '0 auto' }; const tertiary = { @@ -90,7 +84,7 @@ const tertiary = { lineHeight: '16px', margin: '16px 8px 8px 8px', textTransform: 'uppercase' as const, - textAlign: 'center' as const, + textAlign: 'center' as const }; const secondary = { @@ -102,7 +96,7 @@ const secondary = { lineHeight: '24px', marginBottom: '0', marginTop: '0', - textAlign: 'center' as const, + textAlign: 'center' as const }; const codeContainer = { @@ -110,7 +104,7 @@ const codeContainer = { borderRadius: '4px', margin: '16px auto 14px', verticalAlign: 'middle', - width: '280px', + width: '280px' }; const code = { @@ -125,7 +119,7 @@ const code = { paddingTop: '8px', margin: '0 auto', width: '100%', - textAlign: 'center' as const, + textAlign: 'center' as const }; const paragraph = { @@ -136,12 +130,12 @@ const paragraph = { lineHeight: '23px', padding: '0 40px', margin: '0', - textAlign: 'center' as const, + textAlign: 'center' as const }; const link = { color: '#444', - textDecoration: 'underline', + textDecoration: 'underline' }; const footer = { @@ -154,5 +148,5 @@ const footer = { marginTop: '20px', fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif', textAlign: 'center' as const, - textTransform: 'uppercase' as const, + textTransform: 'uppercase' as const }; diff --git a/apps/demo/emails/raycast-magic-link.tsx b/apps/demo/emails/raycast-magic-link.tsx index 6d6d65d4..e6167000 100644 --- a/apps/demo/emails/raycast-magic-link.tsx +++ b/apps/demo/emails/raycast-magic-link.tsx @@ -9,7 +9,7 @@ import { Link, Preview, Section, - Text, + Text } from '@jsx-email/components'; import * as React from 'react'; @@ -17,24 +17,15 @@ interface RaycastMagicLinkEmailProps { magicLink?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ''; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; -export const RaycastMagicLinkEmail = ({ - magicLink, -}: RaycastMagicLinkEmailProps) => ( +export const RaycastMagicLinkEmail = ({ magicLink }: RaycastMagicLinkEmailProps) => ( Log in with this magic link. - Raycast + Raycast 🪄 Your magic link
    @@ -42,9 +33,7 @@ export const RaycastMagicLinkEmail = ({ 👉 Click here to sign in 👈 - - If you didn't request this, please ignore this email. - + If you didn't request this, please ignore this email.
    Best, @@ -58,20 +47,18 @@ export const RaycastMagicLinkEmail = ({ style={{ WebkitFilter: 'grayscale(100%)', filter: 'grayscale(100%)', - margin: '20px 0', + margin: '20px 0' }} /> Raycast Technologies Inc. - - 2093 Philadelphia Pike #3222, Claymont, DE 19703 - + 2093 Philadelphia Pike #3222, Claymont, DE 19703     ); RaycastMagicLinkEmail.PreviewProps = { - magicLink: 'https://raycast.com', + magicLink: 'https://raycast.com' } as RaycastMagicLinkEmailProps; export default RaycastMagicLinkEmail; @@ -79,7 +66,7 @@ export default RaycastMagicLinkEmail; const main = { backgroundColor: '#ffffff', fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif' }; const container = { @@ -87,35 +74,35 @@ const container = { padding: '20px 25px 48px', backgroundImage: 'url("/assets/raycast-bg.png")', backgroundPosition: 'bottom', - backgroundRepeat: 'no-repeat, no-repeat', + backgroundRepeat: 'no-repeat, no-repeat' }; const heading = { fontSize: '28px', fontWeight: 'bold', - marginTop: '48px', + marginTop: '48px' }; const body = { - margin: '24px 0', + margin: '24px 0' }; const paragraph = { fontSize: '16px', - lineHeight: '26px', + lineHeight: '26px' }; const link = { - color: '#FF6363', + color: '#FF6363' }; const hr = { borderColor: '#dddddd', - marginTop: '48px', + marginTop: '48px' }; const footer = { color: '#8898aa', fontSize: '12px', - marginLeft: '4px', + marginLeft: '4px' }; diff --git a/apps/demo/emails/slack-confirm.tsx b/apps/demo/emails/slack-confirm.tsx index 45d5aa0c..0fc0e6a0 100644 --- a/apps/demo/emails/slack-confirm.tsx +++ b/apps/demo/emails/slack-confirm.tsx @@ -10,38 +10,29 @@ import { Preview, Row, Section, - Text, + Text } from '@jsx-email/components'; -import * as React from "react"; +import * as React from 'react'; interface SlackConfirmEmailProps { validationCode?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; -export const SlackConfirmEmail = ({ - validationCode, -}: SlackConfirmEmailProps) => ( +export const SlackConfirmEmail = ({ validationCode }: SlackConfirmEmailProps) => ( Confirm your email address
    - Slack + Slack
    Confirm your email address - Your confirmation code is below - enter it in your open browser window - and we'll help you get signed in. + Your confirmation code is below - enter it in your open browser window and we'll help you + get signed in.
    @@ -49,19 +40,14 @@ export const SlackConfirmEmail = ({
    - If you didn't request this email, there's nothing to worry about - you - can safely ignore it. + If you didn't request this email, there's nothing to worry about - you can safely ignore + it.
    - - Slack + + Slack
    @@ -156,83 +142,83 @@ export const SlackConfirmEmail = ({ ); SlackConfirmEmail.PreviewProps = { - validationCode: "DJZ-TLX", + validationCode: 'DJZ-TLX' } as SlackConfirmEmailProps; export default SlackConfirmEmail; const footerText = { - fontSize: "12px", - color: "#b7b7b7", - lineHeight: "15px", - textAlign: "left" as const, - marginBottom: "50px", + fontSize: '12px', + color: '#b7b7b7', + lineHeight: '15px', + textAlign: 'left' as const, + marginBottom: '50px' }; const footerLink = { - color: "#b7b7b7", - textDecoration: "underline", + color: '#b7b7b7', + textDecoration: 'underline' }; const footerLogos = { - marginBottom: "32px", - paddingLeft: "8px", - paddingRight: "8px", - width: "100%", + marginBottom: '32px', + paddingLeft: '8px', + paddingRight: '8px', + width: '100%' }; const socialMediaIcon = { - display: "inline", - marginLeft: "32px", + display: 'inline', + marginLeft: '32px' }; const main = { - backgroundColor: "#ffffff", - margin: "0 auto", + backgroundColor: '#ffffff', + margin: '0 auto', fontFamily: - "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", + "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif" }; const container = { - maxWidth: "600px", - margin: "0 auto", + maxWidth: '600px', + margin: '0 auto' }; const logoContainer = { - marginTop: "32px", + marginTop: '32px' }; const h1 = { - color: "#1d1c1d", - fontSize: "36px", - fontWeight: "700", - margin: "30px 0", - padding: "0", - lineHeight: "42px", + color: '#1d1c1d', + fontSize: '36px', + fontWeight: '700', + margin: '30px 0', + padding: '0', + lineHeight: '42px' }; const heroText = { - fontSize: "20px", - lineHeight: "28px", - marginBottom: "30px", + fontSize: '20px', + lineHeight: '28px', + marginBottom: '30px' }; const codeBox = { - background: "rgb(245, 244, 245)", - borderRadius: "4px", - marginRight: "50px", - marginBottom: "30px", - padding: "43px 23px", + background: 'rgb(245, 244, 245)', + borderRadius: '4px', + marginRight: '50px', + marginBottom: '30px', + padding: '43px 23px' }; const confirmationCodeText = { - fontSize: "30px", - textAlign: "center" as const, - verticalAlign: "middle", + fontSize: '30px', + textAlign: 'center' as const, + verticalAlign: 'middle' }; const text = { - color: "#000", - fontSize: "14px", - lineHeight: "24px", + color: '#000', + fontSize: '14px', + lineHeight: '24px' }; diff --git a/apps/demo/emails/stack-overflow-tips.tsx b/apps/demo/emails/stack-overflow-tips.tsx index 1b7d6551..a2c39d89 100644 --- a/apps/demo/emails/stack-overflow-tips.tsx +++ b/apps/demo/emails/stack-overflow-tips.tsx @@ -11,41 +11,35 @@ import { Preview, Section, Text, - Row, + Row } from '@jsx-email/components'; -import * as React from "react"; +import * as React from 'react'; interface StackOverflowTipsEmailProps { tips?: { id: number; description: string }[]; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; const PropDefaults: StackOverflowTipsEmailProps = { tips: [ { id: 1, - description: - 'To find a specific phrase, enter it in quotes: "local storage"', + description: 'To find a specific phrase, enter it in quotes: "local storage"' }, { id: 1, - description: - "To search within specific tag(s), enter them in square brackets: [javascript]", + description: 'To search within specific tag(s), enter them in square brackets: [javascript]' }, { id: 1, description: - 'Combine them to get even more precise results - [javascript] "local storage" searches for the phrase “local storage” in questions that have the [javascript] tag', - }, - ], + 'Combine them to get even more precise results - [javascript] "local storage" searches for the phrase “local storage” in questions that have the [javascript] tag' + } + ] }; -export const StackOverflowTipsEmail = ({ - tips = [], -}: StackOverflowTipsEmailProps) => ( +export const StackOverflowTipsEmail = ({ tips = [] }: StackOverflowTipsEmailProps) => ( Stack overflow tips for searching @@ -58,18 +52,13 @@ export const StackOverflowTipsEmail = ({
    - - Find what you want, faster - + Find what you want, faster Tips and tricks for searching on Stack Overflow - +
    @@ -79,8 +68,8 @@ export const StackOverflowTipsEmail = ({ Searching for solutions - With more than 18 million questions, it's possible that someone has - already provided a solution to the problem you're facing.{" "} + With more than 18 million questions, it's possible that someone has already provided a + solution to the problem you're facing.{' '}
    @@ -88,9 +77,7 @@ export const StackOverflowTipsEmail = ({ Use the search bar at the top of the page to find what you need - - Here are a few simple search tips to get you started: - + Here are a few simple search tips to get you started:
      {tips.map((tip) => (
    • @@ -100,9 +87,9 @@ export const StackOverflowTipsEmail = ({
    - The more information you can put in the search bar, the more likely - you will be to either find the answer you need or feel confident - that no one else has asked the question before. + The more information you can put in the search bar, the more likely you will be to + either find the answer you need or feel confident that no one else has asked the + question before.
    @@ -121,15 +108,15 @@ export const StackOverflowTipsEmail = ({
    - You're receiving this email because your Stack Overflow activity - triggered this tip or reminder. + You're receiving this email because your Stack Overflow activity triggered this tip or + reminder. - Unsubscribe from emails like this{" "} + Unsubscribe from emails like this{' '} - Edit email settings{" "} + Edit email settings{' '} Contact us @@ -142,145 +129,144 @@ export const StackOverflowTipsEmail = ({ - Stack Overflow, 110 William Street, 28th Floor, New - York, NY 10038 + Stack Overflow, 110 William Street, 28th Floor, New York, NY 10038 - {"<3"} + {'<3'}
    ); StackOverflowTipsEmail.PreviewProps = { - tips: PropDefaults.tips, + tips: PropDefaults.tips } as StackOverflowTipsEmailProps; export default StackOverflowTipsEmail; const main = { - backgroundColor: "#f3f3f5", - fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", + backgroundColor: '#f3f3f5', + fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif' }; -const headerContent = { padding: "20px 30px 15px" }; +const headerContent = { padding: '20px 30px 15px' }; const headerContentTitle = { - color: "#fff", - fontSize: "27px", - fontWeight: "bold", - lineHeight: "27px", + color: '#fff', + fontSize: '27px', + fontWeight: 'bold', + lineHeight: '27px' }; const headerContentSubtitle = { - color: "#fff", - fontSize: "17px", + color: '#fff', + fontSize: '17px' }; const headerImageContainer = { - padding: "30px 10px", + padding: '30px 10px' }; const title = { - margin: "0 0 15px", - fontWeight: "bold", - fontSize: "21px", - lineHeight: "21px", - color: "#0c0d0e", + margin: '0 0 15px', + fontWeight: 'bold', + fontSize: '21px', + lineHeight: '21px', + color: '#0c0d0e' }; const paragraph = { - fontSize: "15px", - lineHeight: "21px", - color: "#3c3f44", + fontSize: '15px', + lineHeight: '21px', + color: '#3c3f44' }; const divider = { - margin: "30px 0", + margin: '30px 0' }; const container = { - maxWidth: "680px", - width: "100%", - margin: "0 auto", - backgroundColor: "#ffffff", + maxWidth: '680px', + width: '100%', + margin: '0 auto', + backgroundColor: '#ffffff' }; const footer = { - width: "680px", - margin: "32px auto 0 auto", - padding: "0 30px", + width: '680px', + margin: '32px auto 0 auto', + padding: '0 30px' }; const content = { - padding: "30px 30px 40px 30px", + padding: '30px 30px 40px 30px' }; const logo = { - display: "flex", - background: "#f3f3f5", - padding: "20px 30px", + display: 'flex', + background: '#f3f3f5', + padding: '20px 30px' }; const header = { - borderRadius: "5px 5px 0 0", - display: "flex", - flexDireciont: "column", - backgroundColor: "#2b2d6e", + borderRadius: '5px 5px 0 0', + display: 'flex', + flexDireciont: 'column', + backgroundColor: '#2b2d6e' }; const buttonContainer = { - marginTop: "24px", - display: "block", + marginTop: '24px', + display: 'block' }; const button = { - backgroundColor: "#0095ff", - border: "1px solid #0077cc", - fontSize: "17px", - lineHeight: "17px", - padding: "13px 17px", - borderRadius: "4px", - maxWidth: "120px", - color: "#fff", + backgroundColor: '#0095ff', + border: '1px solid #0077cc', + fontSize: '17px', + lineHeight: '17px', + padding: '13px 17px', + borderRadius: '4px', + maxWidth: '120px', + color: '#fff' }; const footerDivider = { ...divider, - borderColor: "#d6d8db", + borderColor: '#d6d8db' }; const footerText = { - fontSize: "12px", - lineHeight: "15px", - color: "#9199a1", - margin: "0", + fontSize: '12px', + lineHeight: '15px', + color: '#9199a1', + margin: '0' }; const footerLink = { - display: "inline-block", - color: "#9199a1", - textDecoration: "underline", - fontSize: "12px", - marginRight: "10px", - marginBottom: "0", - marginTop: "8px", + display: 'inline-block', + color: '#9199a1', + textDecoration: 'underline', + fontSize: '12px', + marginRight: '10px', + marginBottom: '0', + marginTop: '8px' }; const footerAddress = { - margin: "4px 0", - fontSize: "12px", - lineHeight: "15px", - color: "#9199a1", + margin: '4px 0', + fontSize: '12px', + lineHeight: '15px', + color: '#9199a1' }; const footerHeart = { - borderRadius: "1px", - border: "1px solid #d6d9dc", - padding: "4px 6px 3px 6px", - fontSize: "11px", - lineHeight: "11px", - fontFamily: "Consolas,monospace", - color: "#e06c77", - maxWidth: "min-content", - margin: "0 0 32px 0", + borderRadius: '1px', + border: '1px solid #d6d9dc', + padding: '4px 6px 3px 6px', + fontSize: '11px', + lineHeight: '11px', + fontFamily: 'Consolas,monospace', + color: '#e06c77', + maxWidth: 'min-content', + margin: '0 0 32px 0' }; diff --git a/apps/demo/emails/stripe-welcome.tsx b/apps/demo/emails/stripe-welcome.tsx index 4f97e953..b6cbed78 100644 --- a/apps/demo/emails/stripe-welcome.tsx +++ b/apps/demo/emails/stripe-welcome.tsx @@ -9,13 +9,11 @@ import { Link, Preview, Section, - Text, + Text } from '@jsx-email/components'; import * as React from 'react'; -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ''; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; export const StripeWelcomeEmail = () => ( @@ -24,27 +22,17 @@ export const StripeWelcomeEmail = () => (
    - Stripe + Stripe
    - Thanks for submitting your account information. You're now ready to - make live transactions with Stripe! + Thanks for submitting your account information. You're now ready to make live + transactions with Stripe! - You can view your payments and a variety of other information about - your account right from your dashboard. + You can view your payments and a variety of other information about your account right + from your dashboard. -
    @@ -56,17 +44,12 @@ export const StripeWelcomeEmail = () => ( handy. - Once you're ready to start accepting payments, you'll just need to - use your live{' '} - + Once you're ready to start accepting payments, you'll just need to use your live{' '} + API keys {' '} - instead of your test API keys. Your account can simultaneously be - used for both test and live requests, so you can continue testing - while accepting live payments. Check out our{' '} + instead of your test API keys. Your account can simultaneously be used for both test and + live requests, so you can continue testing while accepting live payments. Check out our{' '} tutorial about account basics @@ -74,17 +57,14 @@ export const StripeWelcomeEmail = () => ( Finally, we've put together a{' '} - + quick checklist {' '} to ensure your website conforms to card network standards. - We'll be here to help you with any step along the way. You can find - answers to most questions and get in touch with us on our{' '} + We'll be here to help you with any step along the way. You can find answers to most + questions and get in touch with us on our{' '} support site @@ -92,9 +72,7 @@ export const StripeWelcomeEmail = () => ( — The Stripe team
    - - Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080 - + Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
    @@ -106,23 +84,23 @@ export default StripeWelcomeEmail; const main = { backgroundColor: '#f6f9fc', fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif' }; const container = { backgroundColor: '#ffffff', margin: '0 auto', padding: '20px 0 48px', - marginBottom: '64px', + marginBottom: '64px' }; const box = { - padding: '0 48px', + padding: '0 48px' }; const hr = { borderColor: '#e6ebf1', - margin: '20px 0', + margin: '20px 0' }; const paragraph = { @@ -130,11 +108,11 @@ const paragraph = { fontSize: '16px', lineHeight: '24px', - textAlign: 'left' as const, + textAlign: 'left' as const }; const anchor = { - color: '#556cd6', + color: '#556cd6' }; const button = { @@ -146,11 +124,11 @@ const button = { textDecoration: 'none', textAlign: 'center' as const, display: 'block', - width: '100%', + width: '100%' }; const footer = { color: '#8898aa', fontSize: '12px', - lineHeight: '16px', + lineHeight: '16px' }; diff --git a/apps/demo/emails/twitch-reset-password.tsx b/apps/demo/emails/twitch-reset-password.tsx index 1fd132b2..9a2158ca 100644 --- a/apps/demo/emails/twitch-reset-password.tsx +++ b/apps/demo/emails/twitch-reset-password.tsx @@ -9,26 +9,24 @@ import { Preview, Row, Section, - Text, -} from'@jsx-email/components'; -import * as React from "react"; + Text +} from '@jsx-email/components'; +import * as React from 'react'; interface TwitchResetPasswordEmailProps { username?: string; updatedDate?: Date; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; export const TwitchResetPasswordEmail = ({ username, - updatedDate, + updatedDate }: TwitchResetPasswordEmailProps) => { - const formattedDate = new Intl.DateTimeFormat("en", { - dateStyle: "medium", - timeStyle: "medium", + const formattedDate = new Intl.DateTimeFormat('en', { + dateStyle: 'medium', + timeStyle: 'medium' }).format(updatedDate); return ( @@ -50,27 +48,25 @@ export const TwitchResetPasswordEmail = ({
    Hi {username}, - You updated the password for your Twitch account on{" "} - {formattedDate}. If this was you, then no further action is - required. + You updated the password for your Twitch account on {formattedDate}. If this was you, + then no further action is required. - However if you did NOT perform this password change, please{" "} + However if you did NOT perform this password change, please{' '} reset your account password - {" "} + {' '} immediately. - Remember to use a password that is both strong and unique to your - Twitch account. To learn more about how to create a strong and - unique password,{" "} + Remember to use a password that is both strong and unique to your Twitch account. To + learn more about how to create a strong and unique password,{' '} click here. - Still have questions? Please contact{" "} + Still have questions? Please contact{' '} Twitch Support @@ -85,15 +81,15 @@ export const TwitchResetPasswordEmail = ({
    - + - + - + © 2022 Twitch, All Rights Reserved
    350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA     @@ -105,61 +101,61 @@ export const TwitchResetPasswordEmail = ({ }; TwitchResetPasswordEmail.PreviewProps = { - username: "zenorocha", - updatedDate: new Date("June 23, 2022 4:06:00 pm UTC"), + username: 'zenorocha', + updatedDate: new Date('June 23, 2022 4:06:00 pm UTC') } as TwitchResetPasswordEmailProps; export default TwitchResetPasswordEmail; -const fontFamily = "HelveticaNeue,Helvetica,Arial,sans-serif"; +const fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif'; const main = { - backgroundColor: "#efeef1", - fontFamily, + backgroundColor: '#efeef1', + fontFamily }; const paragraph = { lineHeight: 1.5, - fontSize: 14, + fontSize: 14 }; const container = { - width: "580px", - margin: "30px auto", - backgroundColor: "#ffffff", + width: '580px', + margin: '30px auto', + backgroundColor: '#ffffff' }; const footer = { - width: "580px", - margin: "0 auto", + width: '580px', + margin: '0 auto' }; const content = { - padding: "5px 50px 10px 60px", + padding: '5px 50px 10px 60px' }; const logo = { - display: "flex", - justifyContent: "center", - alingItems: "center", - padding: 30, + display: 'flex', + justifyContent: 'center', + alingItems: 'center', + padding: 30 }; const sectionsBorders = { - width: "100%", - display: "flex", + width: '100%', + display: 'flex' }; const sectionBorder = { - borderBottom: "1px solid rgb(238,238,238)", - width: "249px", + borderBottom: '1px solid rgb(238,238,238)', + width: '249px' }; const sectionCenter = { - borderBottom: "1px solid rgb(145,71,255)", - width: "102px", + borderBottom: '1px solid rgb(145,71,255)', + width: '102px' }; const link = { - textDecoration: "underline", + textDecoration: 'underline' }; diff --git a/apps/demo/emails/vercel-invite-user.tsx b/apps/demo/emails/vercel-invite-user.tsx index 932a1095..32b40f6d 100644 --- a/apps/demo/emails/vercel-invite-user.tsx +++ b/apps/demo/emails/vercel-invite-user.tsx @@ -13,7 +13,7 @@ import { Row, Section, Tailwind, - Text, + Text } from '@jsx-email/components'; import * as React from 'react'; @@ -29,9 +29,7 @@ interface VercelInviteUserEmailProps { inviteFromLocation?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ''; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; export const VercelInviteUserEmail = ({ username, @@ -42,7 +40,7 @@ export const VercelInviteUserEmail = ({ teamImage, inviteLink, inviteFromIp, - inviteFromLocation, + inviteFromLocation }: VercelInviteUserEmailProps) => { const previewText = `Join ${invitedByUsername} on Vercel`; @@ -65,19 +63,13 @@ export const VercelInviteUserEmail = ({ Join {teamName} on Vercel - - Hello {username}, - + Hello {username}, {invitedByUsername} ( - + {invitedByEmail} - ) has invited you to the {teamName} team on{' '} - Vercel. + ) has invited you to the {teamName} team on Vercel.
    @@ -109,22 +101,17 @@ export const VercelInviteUserEmail = ({
    or copy and paste this URL into your browser:{' '} - + {inviteLink}
    - This invitation was intended for{' '} - {username} .This invite was sent from{' '} - {inviteFromIp} located in{' '} - {inviteFromLocation}. If you were not - expecting this invitation, you can ignore this email. If you are - concerned about your account's safety, please reply to this email to - get in touch with us. + This invitation was intended for {username} .This + invite was sent from {inviteFromIp} located in{' '} + {inviteFromLocation}. If you were not expecting + this invitation, you can ignore this email. If you are concerned about your account's + safety, please reply to this email to get in touch with us. @@ -142,7 +129,7 @@ VercelInviteUserEmail.PreviewProps = { teamImage: `${baseUrl}/static/vercel-team.png`, inviteLink: 'https://vercel.com/teams/invite/foo', inviteFromIp: '204.13.186.218', - inviteFromLocation: 'São Paulo, Brazil', + inviteFromLocation: 'São Paulo, Brazil' } as VercelInviteUserEmailProps; export default VercelInviteUserEmail; diff --git a/apps/demo/emails/yelp-recent-login.tsx b/apps/demo/emails/yelp-recent-login.tsx index 926304fa..aab5d08d 100644 --- a/apps/demo/emails/yelp-recent-login.tsx +++ b/apps/demo/emails/yelp-recent-login.tsx @@ -10,9 +10,9 @@ import { Preview, Row, Section, - Text, + Text } from '@jsx-email/components'; -import * as React from "react"; +import * as React from 'react'; interface YelpRecentLoginEmailProps { userFirstName?: string; @@ -22,20 +22,18 @@ interface YelpRecentLoginEmailProps { loginIp?: string; } -const baseUrl = import.meta.env.VERCEL_URL - ? `https://${import.meta.env.VERCEL_URL}` - : ""; +const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : ''; export const YelpRecentLoginEmail = ({ userFirstName, loginDate, loginDevice, loginLocation, - loginIp, + loginIp }: YelpRecentLoginEmailProps) => { - const formattedDate = new Intl.DateTimeFormat("en", { - dateStyle: "long", - timeStyle: "short", + const formattedDate = new Intl.DateTimeFormat('en', { + dateStyle: 'long', + timeStyle: 'short' }).format(loginDate); return ( @@ -53,13 +51,13 @@ export const YelpRecentLoginEmail = ({     - + Hi {userFirstName}, @@ -68,8 +66,8 @@ export const YelpRecentLoginEmail = ({ as="h2" style={{ fontSize: 26, - fontWeight: "bold", - textAlign: "center", + fontWeight: 'bold', + textAlign: 'center' }} > We noticed a recent login to your Yelp account. @@ -89,25 +87,23 @@ export const YelpRecentLoginEmail = ({ *Approximate geographic location based on IP address: {loginIp} - - If this was you, there's nothing else you need to do. - + If this was you, there's nothing else you need to do. - If this wasn't you or if you have additional questions, please - see our support page. + If this wasn't you or if you have additional questions, please see our support + page. - + -

    - Edit src/App.tsx and save to test HMR -

    - -

    Click on the Vite and React logos to learn more

    - - ); -} - -export default App; diff --git a/packages/cli/app/src/components/code-container.tsx b/packages/cli/app/src/components/code-container.tsx index 186c7956..96213fdc 100644 --- a/packages/cli/app/src/components/code-container.tsx +++ b/packages/cli/app/src/components/code-container.tsx @@ -1,33 +1,33 @@ -import { LayoutGroup, motion } from 'framer-motion'; +import classNames from 'classnames'; import * as React from 'react'; -import { PreviewLanguage, copyTextToClipboard, languageMap } from '../helpers'; +import { PreviewLanguage, copyTextToClipboard } from '../helpers'; import { Code } from './code'; import { IconButton, IconCheck, IconClipboard, IconDownload } from './icons'; import { Tooltip } from './tooltip'; -interface MarkupProps { +interface RawProps { content: string; language: PreviewLanguage; } interface CodeContainerProps { - activeLang: string; - markups: MarkupProps[]; - setActiveLang: (lang: string) => void; + activeView: string; + raws: RawProps[]; + setActiveView: (lang: string) => void; } export const CodeContainer: React.FC> = ({ - activeLang, - markups, - setActiveLang + activeView, + raws + // setActiveLang }) => { const [isCopied, setIsCopied] = React.useState(false); const renderDownloadIcon = () => { - const value = markups.filter((markup) => markup.language === activeLang); - const file = new File([value[0].content], `email.${value[0].language}`); + const value = raws.find((raw) => raw.language === activeView); + const file = new File([value!.content], `email.${value!.language}`); const url = URL.createObjectURL(file); return ( @@ -43,7 +43,7 @@ export const CodeContainer: React.FC> = ({ const renderClipboardIcon = () => { const handleClipboard = async () => { - const activeContent = markups.filter(({ language }) => activeLang === language); + const activeContent = raws.filter(({ language }) => activeView === language); setIsCopied(true); await copyTextToClipboard(activeContent[0].content); setTimeout(() => setIsCopied(false), 3000); @@ -58,66 +58,37 @@ export const CodeContainer: React.FC> = ({ React.useEffect(() => { setIsCopied(false); - }, [activeLang]); + }, [activeView]); return ( - 
    -      
    
-        
    
-          
-            {markups.map(({ language }) => {
-              const isCurrentLang = activeLang === language;
-              return (
-                 setActiveLang(language)}
-                  key={language}
-                >
-                  {isCurrentLang && (
-                    
-                  )}
-                  {languageMap[language]}
-                
-              );
-            })}
-          
-        
    
-        
-          
-            {renderClipboardIcon()}
-          
-          Copy to Clipboard
-        
-        
-          
-            {renderDownloadIcon()}
-          
-          Download
-        
-      
    
-      {markups.map(({ language, content }) => (
-        
    
-          {content}
+    <>
+      
+        
+          {renderClipboardIcon()}
+        
+        Copy to Clipboard
+      
+      
+        
+          {renderDownloadIcon()}
+        
+        Download
+      
+      {raws.map(({ language, content }) => (
+        
    
+          {content.trim()}
         
    
       ))}
-
    + ); }; diff --git a/packages/cli/app/src/components/code.tsx b/packages/cli/app/src/components/code.tsx index 84c88e62..e592e035 100644 --- a/packages/cli/app/src/components/code.tsx +++ b/packages/cli/app/src/components/code.tsx @@ -1,97 +1,41 @@ import classnames from 'classnames'; -import { Highlight, Language } from 'prism-react-renderer'; -import * as React from 'react'; +import { getHighlighter } from 'shikiji'; import { PreviewLanguage } from '../helpers'; interface CodeProps { - children: any; + children: string; className?: string; language?: PreviewLanguage; } -// const theme = { -// plain: { -// color: '#EDEDEF', -// fontFamily: 'MonoLisa, Menlo, monospace', -// fontSize: 13 -// }, -// styles: [ -// { -// style: { -// color: '#706F78' -// }, -// types: ['comment'] -// }, -// { -// style: { -// color: '#7E7D86' -// }, -// types: ['atrule', 'keyword', 'attr-name', 'selector'] -// }, -// { -// style: { -// color: '#706F78' -// }, -// types: ['punctuation', 'operator'] -// }, -// { -// style: { -// color: '#EDEDEF' -// }, -// types: ['class-name', 'function', 'tag', 'key-white'] -// } -// ] -// }; +const theme = 'dark-plus'; +const shiki = await getHighlighter({ + langs: ['html', 'tsx'], + themes: [theme] +}); -export const Code: React.FC> = ({ children, language = 'html' }) => { +export const Code = ({ children: value, language = 'html' }: CodeProps) => { // const [isCopied, setIsCopied] = React.useState(false); - const value = children.trim(); - - // const file = new File([value], `email.${language}`); - // const url = URL.createObjectURL(file); + const lang = language === 'jsx' ? 'tsx' : language; + const code = language === 'plain' ? value : shiki.codeToHtml(value, { lang, theme }); + const lines = value.split('\n').length; + const css = ` + .${language} .shiki .line:before { + width: calc(${lines.toString().length} * 12px + 12px); + }`; return ( - - {({ tokens, getLineProps, getTokenProps }) => ( - <> -
    -
    - {tokens.map((line, i) => { - const { key: lineKey, ...lineProps } = getLineProps({ key: i, line }); - return ( -
    - {line.map((token, key) => { - const { key: tokenKey, ...tokenProps } = getTokenProps({ key, token }); - const isException = token.content === 'from' && line[key + 1]?.content === ':'; - const newTypes = isException ? [...token.types, 'key-white'] : token.types; - token.types = newTypes; - - return ( - - - - ); - })} -
    - ); - })} -
    -
    - - )} - + <> + +
    + ); }; diff --git a/packages/cli/app/src/components/logo.tsx b/packages/cli/app/src/components/logo.tsx index 9ed4820d..59cb1eee 100644 --- a/packages/cli/app/src/components/logo.tsx +++ b/packages/cli/app/src/components/logo.tsx @@ -6,8 +6,8 @@ type RootProps = React.ComponentPropsWithoutRef<'svg'>; export const Logo = React.forwardRef>((_, __) => ( diff --git a/packages/cli/app/src/components/shell.tsx b/packages/cli/app/src/components/shell.tsx index 6e860b4b..38598fa4 100644 --- a/packages/cli/app/src/components/shell.tsx +++ b/packages/cli/app/src/components/shell.tsx @@ -42,7 +42,7 @@ export const Shell = React.forwardRef>( markup={html} /> )} -
    +
    {children}
    diff --git a/packages/cli/app/src/components/sidebar.tsx b/packages/cli/app/src/components/sidebar.tsx index f74f5688..74a90277 100644 --- a/packages/cli/app/src/components/sidebar.tsx +++ b/packages/cli/app/src/components/sidebar.tsx @@ -85,8 +85,9 @@ export const Sidebar = React.forwardRef>( diff --git a/packages/cli/app/src/components/topbar.tsx b/packages/cli/app/src/components/topbar.tsx index 84a30ac0..3d335067 100644 --- a/packages/cli/app/src/components/topbar.tsx +++ b/packages/cli/app/src/components/topbar.tsx @@ -17,7 +17,8 @@ interface TopbarProps extends RootProps { export const Topbar = React.forwardRef>( ({ className, title, markup, activeView, setActiveView, ...props }, forwardedRef) => { - const columnWidth = 'w-[200px]'; + const button = 'text-sm font-medium px-3 py-2 transition ease-in-out duration-200 relative'; + const span = 'absolute left-0 right-0 top-0 bottom-0 bg-cta-bg'; return (
    >( )} {...props} > -