feat: code block integration

vue-email · Jan 21, 2024 · 205bda7 · 205bda7
1 parent fbdf878
commit 205bda7
Show file tree

Hide file tree

Showing 6 changed files with 365 additions and 281 deletions.
diff --git a/client/emails/code-block.vue b/client/emails/code-block.vue
@@ -0,0 +1,39 @@
+<script setup>
+const main = {
+  backgroundColor: '#f6f9fc',
+  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+}
+
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  padding: '20px 0 48px',
+  marginBottom: '64px',
+}
+
+const box = {
+  padding: '0 48px',
+}
+
+
+const code = `import { codeToThemedTokens } from 'shikiji'
+
+const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
+  lang: 'html',
+  theme: 'min-dark'
+})
+`
+</script>
+
+<template>
+  <EHtml>
+    <EHead />
+    <EBody :style="main">
+      <EContainer :style="container">
+        <ESection :style="box">
+          <ECodeBlock style="padding: 20px;" :code="code" lang="typescript" theme="min-dark" />
+        </ESection>
+      </EContainer>
+    </EBody>
+  </EHtml>
+</template>
diff --git a/package.json b/package.json
@@ -37,10 +37,10 @@
     "build:module": "nuxt-module-build build",
     "build:client": "nuxi generate client",
     "build:play": "nuxi build playground",
+    "preview:play": "nuxi preview playground",
     "prepack": "pnpm build",
     "dev": "nuxi dev playground",
     "dev:client": "nuxi dev client",
-    "dev:build": "nuxi build playground",
     "dev:prepare": "pnpm stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare client",
     "lint": "eslint .",
     "test": "vitest run",
@@ -50,8 +50,8 @@
   "dependencies": {
     "@nuxt/kit": "^3.8.2",
     "defu": "^6.1.3",
-    "vue-email": "^0.8.5",
-    "@vue-email/compiler": "^0.8.7",
+    "vue-email": "npm:vue-email-edge@0.8.5-28430607.be7e220",
+    "@vue-email/compiler": "npm:@vue-email/compiler-edge@0.8.7-28430612.a126a88",
     "sirv": "^2.0.3"
   },
   "devDependencies": {

diff --git a/playground/nuxt-layer/emails/github-access-token.vue b/playground/nuxt-layer/emails/github-access-token.vue
diff --git a/playground/nuxt-layer/emails/test.vue b/playground/nuxt-layer/emails/test.vue
@@ -0,0 +1,156 @@
+<script setup>
+const main = {
+  backgroundColor: '#f6f9fc',
+  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+}
+
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  padding: '20px 0 48px',
+  marginBottom: '64px',
+}
+
+const box = {
+  padding: '0 48px',
+}
+
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0',
+}
+
+const paragraph = {
+  color: '#525f7f',
+
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left',
+}
+
+const anchor = {
+  color: '#556cd6',
+}
+
+const button = {
+  backgroundColor: '#656ee8',
+  borderRadius: '5px',
+  color: '#fff',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  textAlign: 'center',
+  display: 'block',
+  width: '100%',
+}
+
+const footer = {
+  color: '#8898aa',
+  fontSize: '12px',
+  lineHeight: '16px',
+}
+
+const code = `import { codeToThemedTokens } from 'shikiji'
+
+const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
+  lang: 'html',
+  theme: 'min-dark'
+})
+`
+</script>
+
+<template>
+  <EHtml>
+    <EHead />
+    <EPreview>You're now ready to make live transactions with Stripe!</EPreview>
+    <EBody :style="main">
+      <EContainer :style="container">
+        <ESection :style="box">
+          <EImg
+            src="/static/stripe-logo.png"
+            width="49"
+            height="21"
+            alt="Stripe"
+          />
+          <EHr :style="hr" />
+          <EText :style="paragraph">
+            Thanks for submitting your account information. You're now ready to make live transactions with Stripe!
+          </EText>
+          <EText :style="paragraph">
+            You can view your payments and a variety of other information about your account right from your dashboard.
+          </EText>
+          <EButton
+            px="10"
+            py="10"
+            :style="button"
+            href="https://dashboard.stripe.com/login"
+          >
+            View your Stripe Dashboard
+          </EButton>
+          <EHr :style="hr" />
+          <EText :style="paragraph">
+            If you haven't finished your integration, you might find our
+            <ELink
+              :style="anchor"
+              href="https://stripe.com/docs"
+            >
+              docs
+            </ELink>
+            handy.
+          </EText>
+          <ECodeBlock
+            style="padding: 20px;"
+            :code="code"
+            lang="typescript"
+            theme="min-dark"
+          />
+          <EText :style="paragraph">
+            Once you're ready to start accepting payments, you'll just need to use your live
+            <ELink
+              :style="anchor"
+              href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
+            >
+              API keys
+            </ELink>
+            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
+            out our
+            <ELink
+              :style="anchor"
+              href="https://stripe.com/docs/dashboard"
+            >
+              tutorial about account basics
+            </ELink>
+            .
+          </EText>
+          <EText :style="paragraph">
+            Finally, we've put together a
+            <ELink
+              :style="anchor"
+              href="https://stripe.com/docs/checklist/website"
+            >
+              quick checklist
+            </ELink>
+            to ensure your website conforms to card network standards.
+          </EText>
+          <EText :style="paragraph">
+            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
+            <ELink
+              :style="anchor"
+              href="https://support.stripe.com/"
+            >
+              support site
+            </ELink>
+            .
+          </EText>
+          <EText :style="paragraph">
+            — The Stripe team
+          </EText>
+          <EHr :style="hr" />
+          <EText :style="footer">
+            Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
+          </EText>
+        </ESection>
+      </EContainer>
+    </EBody>
+  </EHtml>
+</template>
diff --git a/playground/server/api/test.get.ts b/playground/server/api/test.get.ts
@@ -2,7 +2,7 @@ import { useCompiler } from '#vue-email'
 
 export default defineEventHandler(async () => {
   try {
-    const template = await useCompiler('github-access-token.vue', {
+    const template = await useCompiler('test.vue', {
       props: {
         username: 'Flowko',
       },