chore(repo): setup documentation (#3)

Co-authored-by: shellscape <[email protected]>
shellscape · Sep 22, 2023 · fe187a1 · fe187a1
1 parent 2eeebfc
commit fe187a1
Show file tree

Hide file tree

Showing 30 changed files with 2,944 additions and 451 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -72,7 +72,7 @@ jobs:
         # Sanity check before we publish
       - name: Build Projects
         run: |
-          moon run jsx-email:build.packages --log trace
+          moon run jsx-email:build.packages
 
       - name: Release
         run: moon run :release --affected --concurrency 1 --remote

diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -21,6 +21,12 @@ jobs:
       - name: Checkout Commit
         uses: actions/checkout@v4
 
+      # Needed for https://github.com/moonrepo/moon/issues/1060
+      - name: Force Update Main
+        run: |
+          git fetch origin
+          git branch -f main origin/main
+
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
@@ -68,7 +74,8 @@ jobs:
 
       - name: Build Projects
         run: |
-          moon run jsx-email:build.packages --log trace
+          pnpm exec tsc --version
+          moon run jsx-email:build.packages
 
       - name: Lint Monorepo
         run: moon run jsx-email:lint

diff --git a/.moon/tasks.yml b/.moon/tasks.yml
@@ -20,7 +20,7 @@ tasks:
       runDepsInParallel: false
 
   compile:
-    command: rm -rf dist && tsc --project tsconfig.json && tsc --project tsconfig.json --outDir dist/es --module esnext --target esnext
+    command: rm -rf dist && pnpm exec tsc --project tsconfig.json && pnpm exec tsc --project tsconfig.json --outDir dist/es --module esnext --target esnext
     inputs:
       - src
     deps:

diff --git a/README.md b/README.md
@@ -93,7 +93,7 @@ All components were tested using the most popular email clients.
 
 | <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
 | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| Gmail ✔                                                                                           | Apple Mail ✔                                                                                           | Outlook ✔                                                                                             | Yahoo! Mail ✔                                                                                                | HEY ✔                                                                                         | Superhuman ✔                                                                                                |
+| Gmail ✔                                                                                            | Apple Mail ✔                                                                                            | Outlook ✔                                                                                              | Yahoo! Mail ✔                                                                                                 | HEY ✔                                                                                          | Superhuman ✔                                                                                                 |
 
 ## Contributing, Working With This Repo
 
@@ -113,12 +113,18 @@ Next we'll want to get dependencies installed, and get everything built. _(Note:
 $ pnpm install
 ```
 
-And build all of the packages in the repo:
+Build all of the packages in the repo:
 
 ```console
 $ moon run jsx-email:build.packages
 ```
 
+And build the cli:
+
+```console
+$ moon run cli:build
+```
+
 Read more on our [Contribution Guide](https://react.email/docs/contributing).
 
 ## Attribution 🧡

diff --git a/apps/demo/README.md b/apps/demo/README.md
@@ -0,0 +1,33 @@
+### Getting Started
+
+If you're new to either `pnpm` or `Moon` you'll want to run the `bootstrap.sh` script first. It will install everything you'll need to get started, and bootstrap your environment:
+
+```console
+$ ./shared/bootstrap.sh
+```
+
+Next we'll want to get dependencies installed, and get everything built. _(Note: One of the benefits of `Moon` is that it uses intelligent caching to assert that dependencies are always up to date before running any command. We don't techincally have to install dependencies first)_:
+
+```console
+$ pnpm install
+```
+
+Build all of the packages in the repo:
+
+```console
+$ moon run jsx-email:build.packages
+```
+
+And build the cli:
+
+```console
+$ moon run cli:build
+```
+
+To start up the preview server locally:
+
+```console
+$ pnpm dev
+```
+
+Open up the preview server [http://localhost:55420/](http://localhost:55420/)
diff --git a/apps/demo/emails/airbnb-review.tsx b/apps/demo/emails/airbnb-review.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text,
-} from '@react-email/components';
+} from '@jsx-email/components';
 import * as React from 'react';
 
 interface AirbnbReviewEmailProps {
@@ -20,8 +20,8 @@ interface AirbnbReviewEmailProps {
   reviewText?: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : '';
 
 export const AirbnbReviewEmail = ({

diff --git a/apps/demo/emails/amazon-review.tsx b/apps/demo/emails/amazon-review.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   Section,
   Text,
-} from "@react-email/components";
+} from '@jsx-email/components';
 import * as React from "react";
 
 interface AmazonReviewEmailProps {
@@ -21,8 +21,8 @@ interface AmazonReviewEmailProps {
   socialMediaIcons?: string[];
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 export const AmazonReviewEmail = ({

diff --git a/apps/demo/emails/apple-receipt.tsx b/apps/demo/emails/apple-receipt.tsx
@@ -11,11 +11,11 @@ import {
   Row,
   Section,
   Text,
-} from "@react-email/components";
+} from'@jsx-email/components';
 import * as React from "react";
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 export const AppleReceiptEmail = () => (

diff --git a/apps/demo/emails/codepen-challengers.tsx b/apps/demo/emails/codepen-challengers.tsx
@@ -12,11 +12,11 @@ import {
   Section,
   Text,
   Row,
-} from "@react-email/components";
+} from '@jsx-email/components';
 import * as React from "react";
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 export const CodepenChallengersEmail = () => (

diff --git a/apps/demo/emails/dropbox-reset-password.tsx b/apps/demo/emails/dropbox-reset-password.tsx
@@ -9,16 +9,16 @@ import {
   Preview,
   Section,
   Text,
-} from "@react-email/components";
+} from '@jsx-email/components';
 import * as React from "react";
 
 interface DropboxResetPasswordEmailProps {
   userFirstname?: string;
   resetPasswordLink?: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 export const DropboxResetPasswordEmail = ({

diff --git a/apps/demo/emails/github-access-token.tsx b/apps/demo/emails/github-access-token.tsx
@@ -9,15 +9,15 @@ import {
   Preview,
   Section,
   Text,
-} from "@react-email/components";
+} from '@jsx-email/components';
 import * as React from "react";
 
 interface GithubAccessTokenEmailProps {
   username?: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 export const GithubAccessTokenEmail = ({

diff --git a/apps/demo/emails/google-play-policy-update.tsx b/apps/demo/emails/google-play-policy-update.tsx
@@ -11,11 +11,11 @@ import {
   Row,
   Section,
   Text,
-} from "@react-email/components";
+} from '@jsx-email/components';
 import * as React from "react";
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 export const GooglePlayPolicyUpdateEmail = () => (

diff --git a/apps/demo/emails/koala-welcome.tsx b/apps/demo/emails/koala-welcome.tsx
@@ -9,15 +9,15 @@ import {
   Preview,
   Section,
   Text,
-} from '@react-email/components';
+} from '@jsx-email/components';
 import * as React from 'react';
 
 interface KoalaWelcomeEmailProps {
   userFirstname: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta?.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : '';
 
 export const KoalaWelcomeEmail = ({

diff --git a/apps/demo/emails/linear-login-code.tsx b/apps/demo/emails/linear-login-code.tsx
@@ -11,15 +11,15 @@ import {
   Preview,
   Section,
   Text,
-} from '@react-email/components';
+} from '@jsx-email/components';
 import * as React from 'react';
 
 interface LinearLoginCodeEmailProps {
   validationCode?: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : '';
 
 export const LinearLoginCodeEmail = ({

diff --git a/apps/demo/emails/netlify-welcome.tsx b/apps/demo/emails/netlify-welcome.tsx
@@ -13,7 +13,7 @@ import {
   Section,
   Tailwind,
   Text,
-} from "@react-email/components";
+} from'@jsx-email/components';
 import * as React from "react";
 
 interface NetlifyWelcomeEmailProps {
@@ -24,8 +24,8 @@ interface NetlifyWelcomeEmailProps {
   links?: string[];
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 const PropDefaults: NetlifyWelcomeEmailProps = {

diff --git a/apps/demo/emails/nike-receipt.tsx b/apps/demo/emails/nike-receipt.tsx
@@ -12,11 +12,11 @@ import {
   Row,
   Section,
   Text,
-} from "@react-email/components";
+} from '@jsx-email/components';
 import * as React from "react";
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 export const NikeReceiptEmail = () => (

diff --git a/apps/demo/emails/notion-magic-link.tsx b/apps/demo/emails/notion-magic-link.tsx
@@ -8,15 +8,15 @@ import {
   Link,
   Preview,
   Text,
-} from '@react-email/components';
+} from '@jsx-email/components';
 import * as React from 'react';
 
 interface NotionMagicLinkEmailProps {
   loginCode?: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : '';
 
 export const NotionMagicLinkEmail = ({

diff --git a/apps/demo/emails/plaid-verify-identity.tsx b/apps/demo/emails/plaid-verify-identity.tsx
@@ -8,15 +8,15 @@ import {
   Link,
   Section,
   Text,
-} from '@react-email/components';
+} from '@jsx-email/components';
 import * as React from 'react';
 
 interface PlaidVerifyIdentityEmailProps {
   validationCode?: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : '';
 
 export const PlaidVerifyIdentityEmail = ({

diff --git a/apps/demo/emails/raycast-magic-link.tsx b/apps/demo/emails/raycast-magic-link.tsx
@@ -10,15 +10,15 @@ import {
   Preview,
   Section,
   Text,
-} from '@react-email/components';
+} from '@jsx-email/components';
 import * as React from 'react';
 
 interface RaycastMagicLinkEmailProps {
   magicLink?: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : '';
 
 export const RaycastMagicLinkEmail = ({

diff --git a/apps/demo/emails/slack-confirm.tsx b/apps/demo/emails/slack-confirm.tsx
@@ -11,15 +11,15 @@ import {
   Row,
   Section,
   Text,
-} from "@react-email/components";
+} from '@jsx-email/components';
 import * as React from "react";
 
 interface SlackConfirmEmailProps {
   validationCode?: string;
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 export const SlackConfirmEmail = ({

diff --git a/apps/demo/emails/stack-overflow-tips.tsx b/apps/demo/emails/stack-overflow-tips.tsx
@@ -12,15 +12,15 @@ import {
   Section,
   Text,
   Row,
-} from "@react-email/components";
+} from '@jsx-email/components';
 import * as React from "react";
 
 interface StackOverflowTipsEmailProps {
   tips?: { id: number; description: string }[];
 }
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
   : "";
 
 const PropDefaults: StackOverflowTipsEmailProps = {