From f102a43dc29b1996188717b931c5ef44b30eeed0 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Thu, 5 Oct 2023 18:03:13 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20Make=20static=20asset=20URLs?=
 =?UTF-8?q?=20varies=20with=20port?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/index.ts b/src/constants/index.ts
index 82aacf7..4f0dadb 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,7 +1,7 @@
 export const ASSETS_ROOT =
   process.env.NODE_ENV === 'production'
     ? 'https://static.like.co/edm'
-    : 'http://localhost:3000/static';
+    : `http://localhost:${process.env.PORT || '3000'}/static`;
 
 export const DEFAULT_AVATAR_URL = `${ASSETS_ROOT}/default-avatar.jpg`;
 

From e70362b58cdd259d692a2da45977e7b04d398f39 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Thu, 5 Oct 2023 23:08:32 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20Add=20basic=20v2=20template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/index.html         |  9 +++++
 example/index.ts           |  6 ++++
 src/index.tsx              | 13 +++++++
 src/templates/basic-v2.tsx | 71 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 99 insertions(+)
 create mode 100644 src/templates/basic-v2.tsx

diff --git a/example/index.html b/example/index.html
index f8ae584..314f52d 100644
--- a/example/index.html
+++ b/example/index.html
@@ -17,6 +17,15 @@ <h2>Basic</h2>
       </li>
     </ul>
 
+    <h2>Basic V2</h2>
+    <ul>
+      <li>
+        <a href="/v2/basic?title=Lorem Ipsum&subtitle=Lorem Ipsum&content=<p>Lorem <b>Ipsum</b></p>">
+          Default
+        </a>
+      </li>
+    </ul>
+
     <h2>New supporter</h2>
     <ul>
       <li>
diff --git a/example/index.ts b/example/index.ts
index bf288b8..4769ef8 100644
--- a/example/index.ts
+++ b/example/index.ts
@@ -18,6 +18,7 @@ import {
   getNFTNotificationTransferTemplate,
   getNFTNotificationPurchaseTemplate,
   getNFTNotificationPurchaseMultipleTemplate,
+  getBasicV2Template,
 } from '../dist';
 
 import {
@@ -55,6 +56,11 @@ handleRequest('/basic', (req, res) => {
   res.send(body);
 });
 
+handleRequest('/v2/basic', (req, res) => {
+  const { body } = getBasicV2Template({ ...req.query, ...req.body });
+  res.send(body);
+});
+
 handleRequest('/basic/avatar', (req, res) => {
   const { body } = getBasicWithAvatarTemplate({ ...req.query, ...req.body });
   res.send(body);
diff --git a/src/index.tsx b/src/index.tsx
index 398d618..5afd630 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -60,6 +60,7 @@ import {
   NFTNotificationPurchaseMultipleTemplate,
   NFTNotificationPurchaseMultipleTemplateProps,
 } from './templates/nft/notification/purchase-multiple';
+import { BasicV2Template, BasicV2TemplateProps } from './templates/basic-v2';
 
 export const getBasicTemplate = (
   props: BasicTemplateProps,
@@ -73,6 +74,18 @@ export const getBasicTemplate = (
   return { subject, body };
 };
 
+export const getBasicV2Template = (
+  props: BasicV2TemplateProps,
+  options?: Mjml2HtmlOptions
+) => {
+  const { html: body } = render(<BasicV2Template {...props} />, {
+    minify: false,
+    ...options,
+  });
+  const { subject } = props;
+  return { subject, body };
+};
+
 export const getBasicWithAvatarTemplate = (
   props: BasicWithAvatarTemplateProps,
   options?: Mjml2HtmlOptions
diff --git a/src/templates/basic-v2.tsx b/src/templates/basic-v2.tsx
new file mode 100644
index 0000000..51b14ea
--- /dev/null
+++ b/src/templates/basic-v2.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { MjmlColumn, MjmlText } from 'mjml-react';
+
+import * as Colors from '../constants/colors';
+
+import { ContentSection } from '../components/content';
+import { CivicLikerCTASection } from '../components/cta-civic-liker';
+import { WritingNFTCTASection } from '../components/cta-writing-nft';
+import { FooterSection } from '../components/footer';
+import { HeaderSection } from '../components/header';
+import { BasicSection } from '../components/sections/basic';
+import { TemplateBase } from '../components/template-base';
+
+export interface BasicV2TemplateProps {
+  subject?: string;
+  title?: string;
+  titleTop?: React.ReactElement;
+  subtitle?: string;
+  subtitlePrepend?: React.ReactElement;
+  avatarURL?: string;
+  isCivicLiker?: boolean;
+  content?: string;
+  cta?: string;
+  unsubscribeLink?: string;
+  language?: string;
+}
+
+export const BasicV2Template = ({
+  subject,
+  title,
+  titleTop,
+  subtitle,
+  subtitlePrepend,
+  content,
+  cta = 'writing-nft',
+  unsubscribeLink,
+  language,
+}: BasicV2TemplateProps) => {
+  return (
+    <TemplateBase language={language} subject={subject}>
+      <HeaderSection />
+      <BasicSection
+        backgroundColor={Colors.LikeGreen}
+        paddingTop={48}
+        paddingBottom={48}
+      >
+        <MjmlColumn>
+          {titleTop}
+          <MjmlText color="white" fontSize={36} fontWeight={600} align="left">
+            {title}
+          </MjmlText>
+          {subtitle && (
+            <MjmlText
+              color={Colors.LighterCyan}
+              fontSize={24}
+              align="left"
+              paddingTop={16}
+            >
+              {subtitlePrepend}
+              {subtitle}
+            </MjmlText>
+          )}
+        </MjmlColumn>
+      </BasicSection>
+      <ContentSection content={content} />
+      {cta === 'civic-liker' && <CivicLikerCTASection />}
+      {cta === 'writing-nft' && <WritingNFTCTASection />}
+      <FooterSection unsubscribeLink={unsubscribeLink} />
+    </TemplateBase>
+  );
+};