Skip to content
This repository was archived by the owner on Jun 22, 2024. It is now read-only.

Commit 3828a70

Browse files
FlowkoFlowko
authored
Merge pull request #18 from vue-email/feat/code-components
feat: code block integration
2 parents fbdf878 + 6a22d1e commit 3828a70

File tree

7 files changed

+658
-650
lines changed

7 files changed

+658
-650
lines changed

‎.github/workflows/ci.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ jobs:
4848
run: nr build
4949

5050
- name: Relase Edge
51-
if: github.event_name == 'push'
51+
if: github.event_name == 'push' || github.actor == 'flowko'
5252
run: |
5353
chmod +x ./scripts/release-edge.sh
5454
./scripts/release-edge.sh

‎client/emails/code-components.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
const main = {
3+
backgroundColor: '#f6f9fc',
4+
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
5+
}
6+
7+
const container = {
8+
backgroundColor: '#ffffff',
9+
margin: '0 auto',
10+
padding: '20px 0 48px',
11+
marginBottom: '64px',
12+
}
13+
14+
const box = {
15+
padding: '0 48px',
16+
}
17+
18+
19+
const code = `import { codeToThemedTokens } from 'shikiji'
20+
21+
const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
22+
lang: 'html',
23+
theme: 'min-dark'
24+
})
25+
`
26+
</script>
27+
28+
<template>
29+
<EHtml>
30+
<EHead />
31+
<EBody :style="main">
32+
<EContainer :style="container">
33+
<ESection :style="box">
34+
<ECodeBlock style="padding: 20px;" :code="code" lang="typescript" theme="min-dark" />
35+
<ECodeInline>@vue-email/nuxt</ECodeInline>
36+
</ESection>
37+
</EContainer>
38+
</EBody>
39+
</EHtml>
40+
</template>

‎package.json

+14-14
Original file line numberDiff line numberDiff line change
@@ -37,34 +37,34 @@
3737
"build:module": "nuxt-module-build build",
3838
"build:client": "nuxi generate client",
3939
"build:play": "nuxi build playground",
40+
"preview:play": "nuxi preview playground",
4041
"prepack": "pnpm build",
4142
"dev": "nuxi dev playground",
4243
"dev:client": "nuxi dev client",
43-
"dev:build": "nuxi build playground",
4444
"dev:prepare": "pnpm stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare client",
4545
"lint": "eslint .",
4646
"test": "vitest run",
4747
"test:watch": "vitest watch",
4848
"release": "bumpp"
4949
},
5050
"dependencies": {
51-
"@nuxt/kit": "^3.8.2",
52-
"defu": "^6.1.3",
53-
"vue-email": "^0.8.5",
54-
"@vue-email/compiler": "^0.8.7",
55-
"sirv": "^2.0.3"
51+
"@nuxt/kit": "^3.9.3",
52+
"defu": "^6.1.4",
53+
"vue-email": "^0.8.6",
54+
"@vue-email/compiler": "^0.8.8",
55+
"sirv": "^2.0.4"
5656
},
5757
"devDependencies": {
5858
"@nuxt/devtools": "latest",
5959
"@nuxt/eslint-config": "^0.2.0",
60-
"@nuxt/module-builder": "^0.5.4",
61-
"@nuxt/schema": "^3.8.2",
62-
"@nuxt/test-utils": "^3.8.1",
63-
"@types/node": "^20.10.3",
64-
"eslint": "^8.55.0",
65-
"bumpp": "^9.2.1",
60+
"@nuxt/module-builder": "^0.5.5",
61+
"@nuxt/schema": "^3.9.3",
62+
"@nuxt/test-utils": "^3.10.0",
63+
"@types/node": "^20.11.5",
64+
"eslint": "^8.56.0",
65+
"bumpp": "^9.3.0",
6666
"jiti": "^1.21.0",
67-
"nuxt": "^3.8.2",
68-
"vitest": "^1.0.4"
67+
"nuxt": "^3.9.3",
68+
"vitest": "^1.2.1"
6969
}
7070
}

‎playground/nuxt-layer/emails/TestEmail.vue

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<script setup lang="ts">
2+
const main = {
3+
backgroundColor: '#f6f9fc',
4+
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
5+
}
6+
7+
const container = {
8+
backgroundColor: '#ffffff',
9+
margin: '0 auto',
10+
padding: '20px 0 48px',
11+
marginBottom: '64px',
12+
}
13+
14+
const box = {
15+
padding: '0 48px',
16+
}
17+
18+
const hr = {
19+
borderColor: '#e6ebf1',
20+
margin: '20px 0',
21+
}
22+
23+
const paragraph = {
24+
color: '#525f7f',
25+
26+
fontSize: '16px',
27+
lineHeight: '24px',
28+
textAlign: 'left',
29+
}
30+
31+
const anchor = {
32+
color: '#556cd6',
33+
}
34+
35+
const button = {
36+
backgroundColor: '#656ee8',
37+
borderRadius: '5px',
38+
color: '#fff',
39+
fontSize: '16px',
40+
fontWeight: 'bold',
41+
textDecoration: 'none',
42+
textAlign: 'center',
43+
display: 'block',
44+
width: '100%',
45+
}
46+
47+
const footer = {
48+
color: '#8898aa',
49+
fontSize: '12px',
50+
lineHeight: '16px',
51+
}
52+
53+
const code = `import { codeToThemedTokens } from 'shikiji'
54+
55+
const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
56+
lang: 'html',
57+
theme: 'min-dark'
58+
})
59+
`
60+
</script>
61+
62+
<template>
63+
<EHtml>
64+
<EHead />
65+
<EPreview>You're now ready to make live transactions with Stripe!</EPreview>
66+
<EBody :style="main">
67+
<EContainer :style="container">
68+
<ESection :style="box">
69+
<EImg
70+
src="/static/stripe-logo.png"
71+
width="49"
72+
height="21"
73+
alt="Stripe"
74+
/>
75+
<EHr :style="hr" />
76+
<EText :style="paragraph">
77+
Thanks for submitting your account information. You're now ready to make live transactions with Stripe!
78+
</EText>
79+
<EText :style="paragraph">
80+
You can view your payments and a variety of other information about your account right from your dashboard.
81+
</EText>
82+
<EButton
83+
px="10"
84+
py="10"
85+
:style="button"
86+
href="https://dashboard.stripe.com/login"
87+
>
88+
View your Stripe Dashboard
89+
</EButton>
90+
<EHr :style="hr" />
91+
<EText :style="paragraph">
92+
If you haven't finished your integration, you might find our
93+
<ELink
94+
:style="anchor"
95+
href="https://stripe.com/docs"
96+
>
97+
docs
98+
</ELink>
99+
handy.
100+
</EText>
101+
<ECodeBlock
102+
style="padding: 20px;"
103+
:code="code"
104+
lang="typescript"
105+
theme="min-dark"
106+
/>
107+
<EText :style="paragraph">
108+
Once you're ready to start accepting payments, you'll just need to use your live
109+
<ELink
110+
:style="anchor"
111+
href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
112+
>
113+
API keys
114+
</ELink>
115+
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
116+
out our
117+
<ELink
118+
:style="anchor"
119+
href="https://stripe.com/docs/dashboard"
120+
>
121+
tutorial about account basics
122+
</ELink>
123+
.
124+
</EText>
125+
<EText :style="paragraph">
126+
Finally, we've put together a
127+
<ELink
128+
:style="anchor"
129+
href="https://stripe.com/docs/checklist/website"
130+
>
131+
quick checklist
132+
</ELink>
133+
to ensure your website conforms to card network standards.
134+
</EText>
135+
<EText :style="paragraph">
136+
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
137+
<ELink
138+
:style="anchor"
139+
href="https://support.stripe.com/"
140+
>
141+
support site
142+
</ELink>
143+
.
144+
</EText>
145+
<EText :style="paragraph">
146+
— The Stripe team
147+
</EText>
148+
<EHr :style="hr" />
149+
<EText :style="footer">
150+
Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
151+
</EText>
152+
</ESection>
153+
</EContainer>
154+
</EBody>
155+
</EHtml>
156+
</template>

‎playground/nuxt-layer/emails/github-access-token.vue

-130
This file was deleted.

‎playground/server/api/test.get.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useCompiler } from '#vue-email'
22

33
export default defineEventHandler(async () => {
44
try {
5-
const template = await useCompiler('github-access-token.vue', {
5+
const template = await useCompiler('TestEmail.vue', {
66
props: {
77
username: 'Flowko',
88
},

0 commit comments

Comments
 (0)