mirror of
https://github.com/Shadowfita/docmost.git
synced 2025-11-10 04:22:00 +10:00
email integration
* Nest email module with smtp, postmark and console log drivers * react-email package
This commit is contained in:
16
packages/transactional/.gitignore
vendored
Normal file
16
packages/transactional/.gitignore
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
.env
|
||||
# compiled output
|
||||
/dist
|
||||
/node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
pnpm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
53
packages/transactional/css/styles.ts
Normal file
53
packages/transactional/css/styles.ts
Normal file
@ -0,0 +1,53 @@
|
||||
export const fontFamily = "HelveticaNeue,Helvetica,Arial,sans-serif";
|
||||
|
||||
export const main = {
|
||||
backgroundColor: "#edf2f7",
|
||||
fontFamily,
|
||||
};
|
||||
|
||||
export const container = {
|
||||
maxWidth: "580px",
|
||||
margin: "30px auto",
|
||||
backgroundColor: "#ffffff",
|
||||
borderColor: "#e8e5ef",
|
||||
borderRadius: "2px",
|
||||
borderWidth: "1px",
|
||||
boxShadow: "0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015)",
|
||||
};
|
||||
|
||||
export const content = {
|
||||
padding: "5px 20px 10px 20px",
|
||||
};
|
||||
|
||||
export const paragraph = {
|
||||
fontFamily:
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
|
||||
color: "#333",
|
||||
lineHeight: 1.5,
|
||||
fontSize: 14,
|
||||
};
|
||||
|
||||
export const h1 = {
|
||||
color: "#333",
|
||||
fontFamily:
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
|
||||
fontSize: "24px",
|
||||
fontWeight: "bold",
|
||||
padding: "0",
|
||||
};
|
||||
|
||||
export const logo = {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alingItems: "center",
|
||||
padding: 4,
|
||||
};
|
||||
|
||||
export const link = {
|
||||
textDecoration: "underline",
|
||||
};
|
||||
|
||||
export const footer = {
|
||||
maxWidth: "580px",
|
||||
margin: "0 auto",
|
||||
};
|
||||
26
packages/transactional/emails/test-email.tsx
Normal file
26
packages/transactional/emails/test-email.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Container, Section, Text } from "@react-email/components";
|
||||
import * as React from "react";
|
||||
import { container, content, paragraph } from "../css/styles";
|
||||
import { MailBody, MailFooter } from "../partials/partials";
|
||||
|
||||
interface WelcomeEmailProps {
|
||||
username?: string;
|
||||
}
|
||||
|
||||
export const TestEmail = ({ username }: WelcomeEmailProps) => {
|
||||
return (
|
||||
<MailBody>
|
||||
<Container style={container}>
|
||||
<Section style={content}>
|
||||
<Text style={paragraph}>Hi {username},</Text>
|
||||
<Text style={paragraph}>
|
||||
This is a test email. Make sure to read it.
|
||||
</Text>
|
||||
</Section>
|
||||
</Container>
|
||||
<MailFooter />
|
||||
</MailBody>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestEmail;
|
||||
10
packages/transactional/package.json
Normal file
10
packages/transactional/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@docmost/transactional",
|
||||
"scripts": {
|
||||
"dev": "email dev -p 5019"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-email/components": "0.0.17",
|
||||
"react-email": "^2.1.2"
|
||||
}
|
||||
}
|
||||
43
packages/transactional/partials/partials.tsx
Normal file
43
packages/transactional/partials/partials.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { footer, h1, logo, main } from "../css/styles";
|
||||
import {
|
||||
Body,
|
||||
Head,
|
||||
Heading,
|
||||
Html,
|
||||
Row,
|
||||
Section,
|
||||
Text,
|
||||
} from "@react-email/components";
|
||||
import * as React from "react";
|
||||
|
||||
interface MailBodyProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
export function MailBody({ children }: MailBodyProps) {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<Body style={main}>{children}</Body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
|
||||
export function MailHeader() {
|
||||
return (
|
||||
<Section style={logo}>
|
||||
<Heading style={h1}>logo/text</Heading>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
export function MailFooter() {
|
||||
return (
|
||||
<Section style={footer}>
|
||||
<Row>
|
||||
<Text style={{ textAlign: "center", color: "#706a7b" }}>
|
||||
© {new Date().getFullYear()}, All Rights Reserved <br />
|
||||
</Text>
|
||||
</Row>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
6
packages/transactional/utils/utils.ts
Normal file
6
packages/transactional/utils/utils.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export const formatDate = (date: Date) => {
|
||||
new Intl.DateTimeFormat("en", {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "medium",
|
||||
}).format(date);
|
||||
};
|
||||
Reference in New Issue
Block a user