Skip to content

Commit cc7ac3e

Browse files
MephisticMephistic
authored
Merge pull request #1791 from mertbagt/handlebars-2025
Handlebars 2025
2 parents 4a7ab94 + dc96e58 commit cc7ac3e

25 files changed

+364
-278
lines changed

‎functions/src/email/digestEmail.handlebars

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,18 @@
11
<html>
22
<head>
33
<title>Digest Email</title>
4-
<link rel="stylesheet" type="text/css" href="/email/style.css" />
4+
<link rel="stylesheet" type="text/css" href="email/style.css" />
55
</head>
66

77
<body class="font">
88
{{> header }}
99

1010
{{> bills }}
1111

12-
{{> orgs }}
12+
{{> users }}
1313

1414
{{> newsFeedLink }}
1515

1616
{{> footer }}
1717
</body>
1818
</html>
19-
20-
{{!--
21-
TODO:
22-
[x] figure out svg -> handlebars compatibility
23-
24-
[x] figure out better way to preview svgs in VSCode
25-
26-
[x] set up path for handlebars to:
27-
[x] locate partials
28-
[x] register helpers
29-
30-
[x] helpers to format {{notificationFrequency}} for header and noResults
31-
32-
[ ] review folder locations & conventions:
33-
style={{}} seems to throw errors in children of CreateMeta:
34-
most likely works with .tsx but not .handlebars files
35-
36-
currently using css with:
37-
<link rel="stylesheet" href="/email/<cssFileName>.css" />
38-
currently located at:
39-
/public/email/<cssFileName>.css
40-
41-
when attempting to use location in /functions/...
42-
Refused to apply style from 'http://localhost:6006/functions/src/email/digestEmail.css'
43-
because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict
44-
MIME checking is enabled.
45-
46-
[x] add link to newsfeed page on maple website when available
47-
/newsfeed to be eventual internal link
48-
49-
[ ] add links to footer section
50-
[ ] Unsubscribe
51-
[x] Terms & Cond
52-
[x] Privacy and Comm
53-
54-
[x] `see more +` link to org's page
55-
[x] add Org Id to DigestEmail.args.context ?
56-
--}}

‎functions/src/email/handlebarsHelpers.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ const PARTIALS_DIR = "../../lib/email/partials"
77

88
// Register Handlebars helper functions
99
export const registerHelpers = () => {
10-
handlebars.registerHelper("toLowerCase", helpers.toLowerCase)
11-
handlebars.registerHelper("noUpdatesFormat", helpers.noUpdatesFormat)
10+
handlebars.registerHelper("addCounts", helpers.addCounts)
11+
handlebars.registerHelper("ifGreaterThan", helpers.ifGreaterThan)
1212
handlebars.registerHelper("isDefined", helpers.isDefined)
13+
handlebars.registerHelper("minusFour", helpers.minusFour)
14+
handlebars.registerHelper("noUpdatesFormat", helpers.noUpdatesFormat)
15+
handlebars.registerHelper("toLowerCase", helpers.toLowerCase)
1316
}
1417

1518
// Register all Handlebars partials

‎functions/src/email/helpers.ts

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
1+
export function addCounts() {
2+
let sum = 0
3+
for (let i = 0; i < arguments.length - 1; i++) {
4+
sum += parseFloat(arguments[i]) || 0 // Convert to number and handle NaN
5+
}
6+
return sum
7+
}
8+
9+
export function ifGreaterThan(
10+
this: any,
11+
value: number,
12+
comparisonValue: number,
13+
options: any
14+
) {
15+
if (value > comparisonValue) {
16+
return options.fn(this) // Render the block if true
17+
}
18+
return options.inverse(this)
19+
}
20+
121
export function isDefined(v: unknown) {
222
return v !== undefined
323
}
424

5-
export function toLowerCase(aString: unknown) {
6-
if (typeof aString === "string") {
7-
console.log(`Attempting to convert to lowercase: ${aString}`)
8-
return aString.toLowerCase()
9-
}
10-
console.error(`toLowerCase received a non-string value: ${aString}`)
11-
return undefined
25+
export function minusFour(value: number) {
26+
const result = value - 4
27+
return result
1228
}
1329

1430
export function noUpdatesFormat(aString: string) {
@@ -25,3 +41,12 @@ export function noUpdatesFormat(aString: string) {
2541
}
2642
return result
2743
}
44+
45+
export function toLowerCase(aString: unknown) {
46+
if (typeof aString === "string") {
47+
console.log(`Attempting to convert to lowercase: ${aString}`)
48+
return aString.toLowerCase()
49+
}
50+
console.error(`toLowerCase received a non-string value: ${aString}`)
51+
return undefined
52+
}

‎functions/src/email/partials/bills/bill.handlebars

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,36 @@
1-
<article class="bill">
2-
<div class="billTitle">
3-
{{this.title}}
1+
<article id="bill">
2+
<div style="font-weight: 500; font-size: 22px; line-height: 125%;
3+
text-decoration-line: underline; color: #000000; margin-bottom: 24px">
4+
{{this.billId}}
45
</div>
5-
<div class="billSubtitle">
6-
{{this.subtitle}}
6+
<div style="font-weight: 600; font-size: 12px; line-height: 125%;
7+
color: #000000; letter-spacing: 0.03em; margin-bottom: 24px">
8+
{{this.billName}}
79
</div>
8-
<div class="billContent">
9-
<div class="billContentRow">
10-
<div class="billContentNum numBox1">
11-
<div class="billContentNumInner">
12-
{{this.testimonies}}
13-
</div>
14-
</div>
15-
<div class="billContentNum numBox2">
16-
<div class="billContentNumInner">
17-
{{this.cosponsors}}
18-
</div>
19-
</div>
20-
<div class="billContentNum numBox3">
21-
<div class="billContentNumInner">
22-
{{this.hearingDate}}
23-
</div>
10+
<div style="padding: 12px 0px 12px 36px; background: #EAE7E7;
11+
border-radius: 12px; margin-bottom: 36px;">
12+
<div>
13+
<div style="height: 49px; font-weight: 500; font-size: 39px; line-height: 125%;
14+
letter-spacing: -0.015em; color: #000000; margin: auto; text-align: center">
15+
{{addCounts this.endorseCount this.neutralCount this.opposeCount}}
2416
</div>
2517
</div>
26-
<div class="billContentRow">
27-
<div class="billContentTitle">
28-
New Testimonies
29-
</div>
30-
<div class="billContentTitle">
31-
New Co-Sponsors
32-
</div>
33-
<div class="billContentTitle">
34-
Hearing Date
35-
</div>
18+
<div style="height: 20px; font-weight: 700; font-size: 16px; line-height: 125%;
19+
letter-spacing: 0.015em; color: #3E3E3E; margin: auto; text-align: center">
20+
New Testimonies
21+
</div>
22+
<div style="height: 19px; font-weight: 700; font-size: 14px; line-height: 100%;
23+
color: #000000; margin: auto; padding: 16px 0px 26px 0px;
24+
text-align: center">
25+
<img src="email\images_no-svgs\endorse.png" alt="checkmark" style="padding-right: 18px"/>
26+
{{!-- replace with link to mapletestimony.org when going live --}}
27+
{{this.endorseCount}} Endorse
28+
<img src="email\images_no-svgs\neutral.png" alt="dash" style="padding: 0 18px"/>
29+
{{!-- replace with link to mapletestimony.org when going live --}}
30+
{{this.neutralCount}} Neutral
31+
<img src="email\images_no-svgs\oppose.png" alt="x-mark" style="padding: 0 18px"/>
32+
{{!-- replace with link to mapletestimony.org when going live --}}
33+
{{this.opposeCount}} Oppose
3634
</div>
3735
</div>
3836
</article>

‎functions/src/email/partials/bills/bills.handlebars

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,45 @@
1-
<section class="Bills">
2-
<div class="sectionHeader">
3-
<h5 class="sectionTitle">Bills</h5>
4-
<div class="sectionLine"></div>
1+
<section style="margin-left: 47.5px; margin-right: 47.5px; padding-bottom: 20px">
2+
<div style="margin-bottom: 20px;">
3+
<h5 style="display: inline-block; font-weight: 600; font-size: 25px; line-height: 125%; margin-right: 20px; margin-bottom: 0px;
4+
color: #C71E32;">
5+
Bills
6+
</h5>
7+
<div style="border: 1px solid #C71E32; height: 0px; width: 400px; display: inline-block; margin-bottom: 8px"></div>
58
</div>
6-
<div class="sectionBills">
7-
{{#if bill.1.title}}
8-
{{#each bill}}
9-
{{> bill }}
10-
{{/each}}
9+
<div id="sectionBills">
10+
{{#each bills}}
11+
{{> bill}}
1112
{{else}}
12-
<article class="billNoUpdates">
13+
<article style="margin-bottom: 12px">
1314
{{> noUpdates }}
1415
</article>
15-
{{/if}}
16+
{{/each}}
17+
</div>
18+
<div>
19+
{{#ifGreaterThan numBillsWithNewTestimony 4}}
20+
<div style="padding: 12px 0px 12px 36px; background: #EAE7E7;
21+
border-radius: 12px; margin-bottom: 36px;">
22+
<div style="font-weight: 700; font-size: 14px; line-height: 125%; letter-spacing: 3%; margin-top: 5px">
23+
{{#ifGreaterThan numBillsWithNewTestimony 5}}
24+
{{minusFour numBillsWithNewTestimony}} other bills you follow received testimony since your last update
25+
{{else}}
26+
{{minusFour numBillsWithNewTestimony}} other bill you follow received testimony since your last update
27+
{{/ifGreaterThan}}
28+
</div>
29+
<div style="padding: 20px 0 15px 0; margin: auto; text-align: center">
30+
<a
31+
style="background-color: #C61E32; padding: 10px 20px;
32+
color: white; text-decoration:none;font-size:14px;
33+
font-family:Roboto,sans-serif;border-radius:5px"
34+
href="https://www.mapletestimony.org/edit-profile/following"
35+
target="_blank"
36+
rel="noopener noreferrer"
37+
>
38+
View All
39+
</a>
40+
</div>
41+
</div>
42+
{{else}}
43+
{{/ifGreaterThan}}
1644
</div>
1745
</section>

‎functions/src/email/partials/footer.handlebars

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1-
<footer class="footer">
2-
<div class="footerLine"></div>
3-
<p class="footerContent">This is an automatically-generated email from MAPLE
4-
that you opted into from your settings.
5-
<br />
6-
<br />
7-
<!-- Unsubscribe -> add link to User's profile - notifications model -->
8-
<!-- or backend function that handles Unsubscribe -->
9-
Unsubscribe |
1+
<footer style="margin: 20px 47.5px 0 47.5px">
2+
<hr style="height: 3px; border-width: 0; color: #101010; background-color: #101010">
3+
<p style="font-weight: 600; font-size: 12px; line-height: 125%; letter-spacing: 0.03em;
4+
color: #000000; margin-top: 36px">
5+
This is an automatically-generated email from MAPLE that you opted into from your settings.
6+
</p>
7+
<p style="font-weight: 600; font-size: 12px; line-height: 125%; letter-spacing: 0.03em;
8+
color: #000000; margin-top: 18px">
9+
To Unsubscribe: click the link below, then click the Settings button and toggle Notifications
10+
</p>
11+
<p style="font-weight: 600; font-size: 12px; line-height: 125%; letter-spacing: 0.03em;
12+
color: #000000; margin-top: 18px; margin-bottom: 36px">
13+
<!-- Unsubscribe -> replace with link to backend function that handles Unsubscribe -->
14+
<a href="https://www.mapletestimony.org/edit-profile/about-you" target="_blank" rel="noopener noreferrer">Unsubscribe</a>
15+
|
1016
<a href="https://mapletestimony.org/policies/copyright" target="_blank" rel="noopener noreferrer">Copyright</a>
1117
|
12-
<a href="https://mapletestimony.org/policies/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy and
13-
Community Guidelines</a>
18+
<a href="https://mapletestimony.org/policies/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
19+
|
20+
<a href="https://www.mapletestimony.org/policies/code-of-conduct" target="_blank" rel="noopener noreferrer">Code of Conduct</a>
1421
</p>
1522
</footer>

‎functions/src/email/partials/header.handlebars

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
1-
<div id="logo" class="logo bg-blue">
2-
<img src="/nav-logo.svg" alt="Maple Logo" />
1+
<div id="logo" style="background-color: #1a3185; padding: 16px 20px 16px 50px">
2+
<img src="email\images_no-svgs\Logo.png" alt="Maple Logo" />
3+
{{!-- On prod, replace with: --}}
4+
{{!-- <img src="https://mapletestimony.org/email/images_no-svgs/Logo.png" alt="Maple Logo" /> --}}
35
</div>
46

5-
<header class="header">
7+
<header style="background-color: #FFFFFF; padding: 24px 0px 12px;
8+
gap: 16px">
69
<div>
7-
<h2 class="headline blue">Here is your
10+
<h2 style="font-weight: 700; font-size: 31px; line-height: 125%; margin: auto; width: 70%; color: #1a3185">
11+
Here is your
812
{{toLowerCase notificationFrequency}}
9-
report!
13+
report
1014
</h2>
11-
<p class="subheadline blue center">{{startDate}} - {{endDate}}</p>
15+
<h2 style="font-weight: 700; font-size: 31px; line-height: 125%; margin: auto; width: 80%; color: #1a3185">
16+
of the Bills and Users you follow!
17+
</h2>
18+
<p class="subheadline blue center" style="font-weight: 600; font-size: 12px; line-height: 125%;
19+
color: #1a3185; display: block; margin: auto; width: 30%;">
20+
{{startDate}} - {{endDate}}
21+
</p>
1222
</div>
13-
<img src="/Mail Report.svg" alt="Maple Logo" />
23+
<img src="email\images_no-svgs\Mail Report.png" alt="Report" style="display: block; margin: auto; width: 32%;" />
24+
{{!-- On prod, replace with: --}}
25+
{{!-- <img src="https://mapletestimony.org/email/images_no-svgs/Mail Report.png" alt="Report" style="display: block; margin: auto; width: 32%;" /> --}}
1426
</header>

‎functions/src/email/partials/index.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ import footer from "./footer.handlebars"
44
import header from "./header.handlebars"
55
import newsFeedLink from "./newsFeedLink.handlebars"
66
import noUpdates from "./noUpdates.handlebars"
7-
import org from "./orgs/org.handlebars"
8-
import orgItemEmpty from "./orgs/orgItemEmpty.handlebars"
9-
import orgs from "./orgs/orgs.handlebars"
7+
import user from "./users/user.handlebars"
8+
import users from "./users/users.handlebars"
109

1110
export const partials = {
1211
bill,
@@ -15,7 +14,6 @@ export const partials = {
1514
header,
1615
newsFeedLink,
1716
noUpdates,
18-
org,
19-
orgItemEmpty,
20-
orgs
17+
user,
18+
users
2119
}

‎functions/src/email/partials/newsFeedLink.handlebars

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
1-
<nav class="navHeader bg-blue white">
2-
<p class="navText">see more at your</p>
3-
4-
<!-- change link to newsfeed page on maple website when available -->
5-
<button
6-
onclick="window.location.href='https://mapletestimony.org/newsfeed';"
7-
class="navButton bg-blue"
8-
>
9-
<img src="/Newsfeed Icon.svg" alt="Newsfeed Icon" />
10-
<p class="navButtonText white">Newsfeed</p>
11-
</button>
1+
<nav style="background-color: #1a3185; color: #FFFFFF">
2+
<div style="display: block; margin: auto; width: 43%">
3+
<p style="display: inline-block; font-weight: 500; font-size: 16px; line-height: 125%;
4+
letter-spacing: 0.015em; margin-right: 4px; margin-bottom: 0px;"
5+
>
6+
see more at your
7+
</p>
8+
<p style="gap: 4px; margin-top: 10px; margin-bottom: 10px; display: inline-block">
9+
<a style="background-color: #1a3185; border-color: #FFFFFF; padding: 7px 10px;
10+
color: #FFFFFF; text-decoration:none; font-size:14px; font-family:Roboto,sans-serif;
11+
border-radius:5px; border-style: solid; border-width: thin"
12+
href="https://mapletestimony.org/newsfeed"
13+
target="_blank"
14+
rel="noopener noreferrer"
15+
>
16+
<img src="email\images_no-svgs\newspaper.png" alt="" />
17+
Newsfeed
18+
</a>
19+
</p>
20+
</div>
1221
</nav>

0 commit comments

Comments
 (0)