This repository has been archived by the owner on Jun 22, 2024. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #24 from vue-email/feat/tailwind-config
feat: load tailwind config
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,156 +1,144 @@ | ||
| <script setup lang="ts"> | ||
| interface Props { | ||
| invitedByUsername?: string; | ||
| teamName?: string; | ||
| username?: string; | ||
| invitedByEmail?: string; | ||
| inviteLink?: string; | ||
| inviteFromIp?: string; | ||
| inviteFromLocation?: string; | ||
| } | ||
| const props = withDefaults(defineProps<Props>(), { | ||
| teamName: "My project", | ||
| username: "John Doe", | ||
| invitedByEmail: "[email protected]", | ||
| inviteLink: "https://vercel.com/teams/invite/foo", | ||
| inviteFromIp: "172.0.0.1", | ||
| inviteFromLocation: "San Francisco, CA", | ||
| }); | ||
| const previewText = `Join ${props.invitedByUsername} on Vercel`; | ||
| const code = `import { codeToThemedTokens } from 'shiki' | ||
| const tokens = await codeToThemedTokens('<div class="foo">bar</div>', { | ||
| lang: 'html', | ||
| theme: 'min-dark' | ||
| }) | ||
| `; | ||
| </script> | ||
|
|
||
| <template> | ||
| <ETailwind> | ||
| <EHtml> | ||
| <EHead> | ||
| <EStyle> | ||
| .pager {display: none;} @media only screen and (max-width: 480px) { | ||
| .pager {display: block;} } | ||
| </EStyle> | ||
| </EHead> | ||
| <EPreview>{{ previewText }}</EPreview> | ||
| <EBody class="bg-primary my-auto mx-auto font-sans"> | ||
| <EContainer | ||
| class="border border-solid border-[#eaeaea] p-[20px] md:p-20 rounded my-[40px] mx-auto max-w-[465px]" | ||
| > | ||
| <ESection class="mt-[32px] pager"> | ||
| <EImg | ||
| src="/static/vercel-logo.png" | ||
| width="40" | ||
| height="37" | ||
| alt="Vercel" | ||
| class="my-0 mx-auto" | ||
| /> | ||
| </ESection> | ||
| <EHeading | ||
| class="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0" | ||
| > | ||
| Join <strong>{{ teamName }}</strong> on <strong>Vercel</strong> | ||
| </EHeading> | ||
| <EText class="text-black text-[14px] leading-[24px]"> | ||
| Hello {{ username }}, | ||
| </EText> | ||
| <EText class="text-black text-[14px] leading-[24px]"> | ||
| {{ $vueEmail.baseUrl }} | ||
| </EText> | ||
| <EText class="text-black text-[14px] leading-[24px]"> | ||
| <strong>bukinoshita</strong> ( | ||
| <ELink | ||
| :href="`mailto:${invitedByEmail}`" | ||
| class="text-blue-600 no-underline" | ||
| > | ||
| {{ invitedByEmail }} | ||
| </ELink> | ||
| ) has invited you to the <strong>{{ teamName }}</strong> team on | ||
| <strong>Vercel</strong>. | ||
| </EText> | ||
| <ECodeBlock | ||
| class="p-5" | ||
| :code="code" | ||
| lang="typescript" | ||
| theme="min-dark" | ||
| /> | ||
| <ESection> | ||
| <ERow> | ||
| <EColumn align="right"> | ||
| <EImg | ||
| class="rounded-full" | ||
| src="/static/vercel-user.png" | ||
| width="64" | ||
| height="64" | ||
| /> | ||
| </EColumn> | ||
| <EColumn align="center"> | ||
| <EImg | ||
| src="/static/vercel-arrow.png" | ||
| width="12" | ||
| height="9" | ||
| alt="invited you to" | ||
| /> | ||
| </EColumn> | ||
| <EColumn align="left"> | ||
| <EImg | ||
| class="rounded-full" | ||
| src="/static/vercel-team.png" | ||
| width="64" | ||
| height="64" | ||
| /> | ||
| </EColumn> | ||
| </ERow> | ||
| </ESection> | ||
| <ESection class="text-center mt-[32px] mb-[32px]"> | ||
| <EButton | ||
| px="20" | ||
| py="12" | ||
| class="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center" | ||
| :href="inviteLink" | ||
| > | ||
| Join the team | ||
| </EButton> | ||
| </ESection> | ||
| <EText class="text-black text-[14px] leading-[24px]"> | ||
| or copy and paste this URL into your browser: | ||
| <ELink | ||
| :href="inviteLink" | ||
| class="text-blue-600 no-underline" | ||
| > | ||
| {{ inviteLink }} | ||
| </ELink> | ||
| </EText> | ||
| <EHr | ||
| class="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" | ||
| /> | ||
| <EText class="text-[#666666] text-[12px] leading-[24px]"> | ||
| This invitation was intended for | ||
| <span class="text-black">{{ username }} </span>.This invite was sent | ||
| from <span class="text-black">{{ inviteFromIp }}</span> located in | ||
| <span class="text-black">{{ inviteFromLocation }}</span>. If you were not expecting this invitation, you can ignore this | ||
| email. If you are concerned about your account's safety, please | ||
| reply to this email to get in touch with us. | ||
| </EText> | ||
| </EContainer> | ||
| </EBody> | ||
| </EHtml> | ||
| </ETailwind> | ||
| </template> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,36 @@ | ||
| export default defineNuxtConfig({ | ||
| modules: ["../src/module", "@nuxtjs/tailwindcss"], | ||
| extends: ["./nuxt-layer"], | ||
| vueEmail: { | ||
| baseUrl: "https://vue-email-demo.vercel.app/", | ||
| i18n: { | ||
| defaultLocale: "fr", | ||
| translations: { | ||
| en: { | ||
| title: "Welcome to Vue Email", | ||
| subtitle: | ||
| "A Vue.js component for generating beautiful emails using MJML", | ||
| button: "Get Started", | ||
| }, | ||
| fr: { | ||
| title: "Bienvenue sur Vue Email", | ||
| subtitle: | ||
| "Un composant Vue.js pour générer de beaux emails en utilisant MJML", | ||
| button: "Commencer", | ||
| }, | ||
| }, | ||
| }, | ||
| autoImport: false, | ||
| // tailwind: { | ||
| // theme: { | ||
| // extend: { | ||
| // colors: { | ||
| // primary: "#ea580c", | ||
| // secondary: "#ca8a04", | ||
| // }, | ||
| // }, | ||
| // }, | ||
| // }, | ||
| }, | ||
| devtools: { enabled: true }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,6 +10,7 @@ | |
| "analyze": "nuxt analyze" | ||
| }, | ||
| "devDependencies": { | ||
| "@nuxtjs/tailwindcss": "^6.11.2", | ||
| "nuxt": "latest" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,19 @@ | ||
| import { useCompiler } from "#vue-email"; | ||
|
|
||
| export default defineEventHandler(async () => { | ||
| try { | ||
| const template = await useCompiler("TestEmail.vue", { | ||
| props: { | ||
| username: "Flowko", | ||
| }, | ||
| }).catch((error) => { | ||
| console.error(error); | ||
| }); | ||
|
|
||
| if (!template) return null; | ||
|
|
||
| return template.html; | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| /** @type {import('tailwindcss').Config} */ | ||
| export default { | ||
| content: [], | ||
| theme: { | ||
| extend: { | ||
| colors: { | ||
| primary: "cyan", | ||
| secondary: "#ca8a04", | ||
| }, | ||
| }, | ||
| }, | ||
| plugins: [], | ||
| }; |
Oops, something went wrong.