feat: code block integration

.github/workflows/ci.yml

@@ -48,7 +48,7 @@ jobs:
         run: nr build
 
       - name: Relase Edge
-        if: github.event_name == 'push'
+        if: github.event_name == 'push' || github.actor == 'flowko'
         run: |
           chmod +x ./scripts/release-edge.sh
           ./scripts/release-edge.sh

client/emails/code-components.vue

@@ -0,0 +1,40 @@
+<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" />
+          <ECodeInline>@vue-email/nuxt</ECodeInline>
+        </ESection>
+      </EContainer>
+    </EBody>
+  </EHtml>
+</template>

package.json

@@ -37,34 +37,34 @@
     "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",
     "test:watch": "vitest watch",
     "release": "bumpp"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.8.2",
-    "defu": "^6.1.3",
-    "vue-email": "^0.8.5",
-    "@vue-email/compiler": "^0.8.7",
-    "sirv": "^2.0.3"
+    "@nuxt/kit": "^3.9.3",
+    "defu": "^6.1.4",
+    "vue-email": "^0.8.6",
+    "@vue-email/compiler": "^0.8.8",
+    "sirv": "^2.0.4"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.4",
-    "@nuxt/schema": "^3.8.2",
-    "@nuxt/test-utils": "^3.8.1",
-    "@types/node": "^20.10.3",
-    "eslint": "^8.55.0",
-    "bumpp": "^9.2.1",
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.9.3",
+    "@nuxt/test-utils": "^3.10.0",
+    "@types/node": "^20.11.5",
+    "eslint": "^8.56.0",
+    "bumpp": "^9.3.0",
     "jiti": "^1.21.0",
-    "nuxt": "^3.8.2",
-    "vitest": "^1.0.4"
+    "nuxt": "^3.9.3",
+    "vitest": "^1.2.1"
   }
 }

playground/nuxt-layer/emails/TestEmail.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+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>

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('TestEmail.vue', {
       props: {
         username: 'Flowko',
       },