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

Commit 205bda7

Browse files
FlowkoFlowko
committed
feat: code block integration
1 parent fbdf878 commit 205bda7

File tree

6 files changed

+365
-281
lines changed

6 files changed

+365
-281
lines changed

‎client/emails/code-block.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
</ESection>
36+
</EContainer>
37+
</EBody>
38+
</EHtml>
39+
</template>

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@
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",
@@ -50,8 +50,8 @@
5050
"dependencies": {
5151
"@nuxt/kit": "^3.8.2",
5252
"defu": "^6.1.3",
53-
"vue-email": "^0.8.5",
54-
"@vue-email/compiler": "^0.8.7",
53+
"vue-email": "npm:vue-email-edge@0.8.5-28430607.be7e220",
54+
"@vue-email/compiler": "npm:@vue-email/compiler-edge@0.8.7-28430612.a126a88",
5555
"sirv": "^2.0.3"
5656
},
5757
"devDependencies": {

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

Lines changed: 0 additions & 130 deletions
This file was deleted.

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

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
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+
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/server/api/test.get.ts

Lines changed: 1 addition & 1 deletion
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('test.vue', {
66
props: {
77
username: 'Flowko',
88
},

0 commit comments

Comments
 (0)