Updated Node.js and tsx version to fix Railway build (#4278)

* Modal Form for Vuestic UI Landing page (#4265) * Added textarea (#4265) * Show modal based on geolocation (#4265) * Review edits (#4265) * Disable docs build:analysis * Updated Node.js and tsx version to fix Railway build
epicmaxco · May 21, 2024 · 808f410 · 808f410
1 parent 13064fa
commit 808f410
Show file tree

Hide file tree

Showing 41 changed files with 595 additions and 103 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.16.0
+v18.20.2
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "devDependencies": {
     "lerna": "^3.20.2",
     "syncpack": "^9.8.6",
-    "yorkie": "^2.0.0"
+    "yorkie": "^2.0.0",
+    "tsx": "^4.6.1"
   },
   "private": true,
   "scripts": {

diff --git a/packages/create-vuestic/package.json b/packages/create-vuestic/package.json
@@ -22,7 +22,6 @@
   "devDependencies": {
     "@types/node": "^18.16.0",
     "@types/prompts": "^2.4.2",
-    "tsup": "^6.5.0",
-    "tsx": "^3.12.1"
+    "tsup": "^6.5.0"
   }
 }
diff --git a/packages/deploy/package.json b/packages/deploy/package.json
@@ -6,7 +6,6 @@
     "release": "tsx release-script/release-script.ts"
   },
   "devDependencies": {
-    "tsx": "^3.12.1",
     "inquirer": "^9.0.0",
     "typescript": "^5",
     "chalk": "^5.2.0"

diff --git a/packages/docs/.env.example b/packages/docs/.env.example
@@ -2,3 +2,4 @@ VITE_STORYBOOK_HOSTNAME=https://ui-storybook.vuestic.dev
 HOSTNAME=https://ui.vuestic.dev
 GTM_ENABLED=true
 GTM_ID=GTM-12345678
+RECAPTCHA_SITE_KEY=6LesGd4pAAAAABkDfsFPwY-LcNbOQezYOKmpJDgG
diff --git a/packages/docs/assets/reset.scss b/packages/docs/assets/reset.scss
@@ -0,0 +1,10 @@
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
diff --git a/packages/docs/components/Recaptcha.vue b/packages/docs/components/Recaptcha.vue
@@ -0,0 +1,49 @@
+<template>
+  <div ref="elementRef" />
+</template>
+
+<script setup lang='ts'>
+const props = defineProps<{sitekey: string}>()
+
+const emit = defineEmits<{
+  (e: "verified", token: string): void;
+  (e: "expired"): void;
+  (e: "error"): void;
+}>()
+
+const elementRef = ref<HTMLElement>();
+const widgetIdRef = ref<string>();
+
+const recaptchaRef = useRecaptcha()
+
+const reset = () => {
+  widgetIdRef.value && recaptchaRef.value?.reset(widgetIdRef.value)
+}
+
+defineExpose({
+  reset
+})
+
+watchEffect(() => {
+  const recaptcha = recaptchaRef.value;
+  const element = elementRef.value;
+  if (recaptcha && element) {
+    widgetIdRef.value = recaptcha.render(element, {
+      sitekey: props.sitekey,
+    callback: (token) => {
+      emit('verified', token)
+    },
+      'expired-callback': () => {
+      emit('expired')
+    },
+      'error-callback': () => {
+      emit('error')
+    }
+    })
+  }
+})
+</script>
+
+<style scoped lang='scss'>
+
+</style>
diff --git a/packages/docs/components/landing/Footer.vue b/packages/docs/components/landing/Footer.vue
@@ -204,6 +204,7 @@ const sitemap = computed(() => ([
         color: unset;
         filter: unset;
       }
+
       &:hover {
         text-decoration: underline;
       }

diff --git a/packages/docs/components/landing/banners/VuejsNation.vue b/packages/docs/components/landing/banners/VuejsNation.vue
@@ -3,14 +3,14 @@
     <a href="https://vue.school/vuejsnation-vuesticui" target="_blank" title="Vue.js Nation 2024: The largest and only 100% FREE Vue.js conference in the world">
       <VaAspectRatio v-if="breakpoint.smUp" :ratio="1367/72" :aria-hidden="true" :max-width="1350">
         <img class="min-w-full min-h-full" src="/landing/vuejsnation-event-banner.png" alt="">
-        <div :class="iconWrapperClass" @click.prevent="hide" >
-          <VaIcon name="close"/>
+        <div :class="iconWrapperClass" @click.prevent="hide">
+          <VaIcon name="close" />
         </div>
       </VaAspectRatio>
       <VaAspectRatio v-else :ratio="1500/500" :aria-hidden="true" :max-width="1350">
         <img class="min-w-full min-h-full" src="/landing/vuejsnation-event-banner-mobile.png" alt="">
         <div :class="iconWrapperClass" @click.prevent="hide">
-          <VaIcon name="close"/>
+          <VaIcon name="close" />
         </div>
       </VaAspectRatio>
     </a>

diff --git a/packages/docs/components/landing/forms/RequestAuditForm.vue b/packages/docs/components/landing/forms/RequestAuditForm.vue
@@ -0,0 +1,164 @@
+<template>
+  <form ref="formRef" class="form" @submit.prevent="submitForm">
+    <div v-if="formSubmitted" class="form__content">
+      <h3 class="form__title">
+        Thank you for reaching out!
+      </h3>
+
+      <div class="form__text mb-6">
+        We have received your request and will be in touch shortly. In the meantime, feel free to explore more about our services on our website.
+      </div>
+
+      <div class="form__text">
+        We look forward to assisting you with your Vue.js code audit needs!
+      </div>
+    </div>
+    <div
+      class="form__content"
+      :class="{
+        'invisible': formSubmitted,
+      }"
+    >
+      <h3 class="form__title">
+        Get a Free Vue.js Code Audit
+      </h3>
+      <p class="form__text mb-3">
+        Got a Vue.js project and want to make it better? Provide us with some details about your project, and we'll get back to you within 24 hours.
+      </p>
+      <VaInput
+        v-model="email"
+        type="email"
+        placeholder="Email"
+        required
+        name="Email"
+        class="w-full mt-3"
+      />
+      <VaTextarea
+        v-model="description"
+        placeholder="Project link, tech stack, and details"
+        required
+        name="Field 3"
+        class="w-full mt-3"
+        :resize="false"
+        :max-rows="4"
+      />
+      <Recaptcha
+        ref="recaptchaRef"
+        :sitekey="RECAPTCHA_SITE_KEY"
+        class="mt-3"
+        @verified="onRecaptchaVerified"
+        @expired="onRecaptchaReset"
+        @error="onRecaptchaReset"
+      />
+      <VaButton class="w-full mt-3" type="submit" size="large">
+        Submit
+      </VaButton>
+      <div v-if="submitError" class="form__notice form__notice--error mt-6">
+        Oops! Something went wrong while submitting the form. Please try again or contact us directly at <a href="mailto:hello@epicmax.co" target="_new">hello@epicmax.co</a>. We're here to help and ensure your inquiry is handled promptly.
+      </div>
+      <div v-else class="form__notice mt-6">
+        Click "Submit!" to consent to processing your data by Epicmax Georgia LLC for marketing purposes, including sending emails. For details see our <a href="https://www.iubenda.com/privacy-policy/90200659" target="_blank">Privacy Policy</a>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang='ts'>
+import Recaptcha from '../../Recaptcha.vue'
+
+const FORM_NAME = 'Free Audit PopUp'
+const FORM_URL  = 'https://webflow.com/api/v1/form/61eeb35ae9ff3aeddc164997'
+const RECAPTCHA_SITE_KEY = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
+
+const email = ref<string>('')
+const description = ref<string>('')
+const recaptchaToken = ref<string>();
+const recaptchaRef = ref<InstanceType<typeof Recaptcha>>();
+const formRef = ref<HTMLFormElement>()
+
+const isSubmitting = ref(false)
+const formSubmitted = ref(false)
+const submitError = ref(false)
+
+function onRecaptchaVerified(token: string) {
+  recaptchaToken.value = token;
+}
+
+function onRecaptchaReset() {
+  recaptchaToken.value = undefined;
+}
+
+const submitForm = async () => {
+  if (!recaptchaToken.value || !formRef.value) {
+    return;
+  }
+
+  isSubmitting.value = true;
+
+  const formFields = [...new FormData(formRef.value).entries()]
+    .map(([field, value]) => [`fields[${encodeURIComponent(field)}]`, value.toString()])
+  const formData = new URLSearchParams(formFields);
+  formData.append('name', FORM_NAME)
+
+  try {
+    const response = await fetch(FORM_URL, {
+      headers: {
+        "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
+      },
+      method: "POST",
+      body: formData,
+    })
+
+    if (!response.ok) {
+      throw new Error(await response.text())
+    }
+
+    formSubmitted.value = true
+  } catch (error) {
+    submitError.value = true
+
+    throw error;
+  } finally {
+    recaptchaRef.value?.reset()
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+@import "@/assets";
+
+.form {
+  display: flex;
+
+  &__content {
+    flex-basis: 100%;
+    flex-shrink: 0;
+    max-width: 100%;
+  }
+
+  &__text {
+    @include text-font();
+  }
+
+  &__title {
+    margin-top: 20px;
+    margin-bottom: 34px;
+  }
+
+  &__notice {
+    font-size: 13px;
+    color: var(--va-secondary);
+  }
+
+  &__notice--error {
+    color: var(--va-danger);
+  }
+}
+
+h3 {
+  @include subtitle-font();
+
+  font-size: 2.5rem !important;
+}
+</style>
diff --git a/packages/docs/components/landing/icons/IconChromatic.vue b/packages/docs/components/landing/icons/IconChromatic.vue
@@ -1,7 +1,14 @@
 <template>
-  <svg style="margin-bottom: 0.2rem" xmlns="http://www.w3.org/2000/svg" fill="none" width="110" height="22" viewBox="0 0 120 24">
-    <path fill="#FFFFFF" fill-rule="evenodd" d="M93.638 15.5c0 1.025-.965 1.671-2.32 1.671-1.196 0-1.84-.423-1.84-1.225 0-.825.667-1.182 1.679-1.182h2.481v.735Zm-1.746-6.286c-2.011 0-3.154.669-4 1.622l-.044.05.024.023 1.676.938c.497-.425 1.162-.76 2.16-.76 1.241 0 1.93.623 1.93 2.117h-2.642c-2.183.023-3.792.869-3.792 2.809 0 2.095 1.563 2.964 3.47 2.964 1.425 0 2.343-.535 3.033-1.538l-.069 1.337h2.32V13.25c0-2.765-1.745-4.035-4.066-4.035Zm26.25 6.682a2.932 2.932 0 0 1-2.229 1.015c-1.6 0-2.902-1.263-2.902-2.816 0-1.552 1.302-2.815 2.902-2.815.891 0 1.689.393 2.223 1.008l1.858-1.042a5.07 5.07 0 0 0-4.081-2.032c-2.779 0-5.031 2.186-5.031 4.881 0 2.696 2.252 4.882 5.031 4.882a5.073 5.073 0 0 0 4.087-2.04l-1.858-1.04Zm-81.51 0a2.934 2.934 0 0 1-2.23 1.015c-1.6 0-2.902-1.263-2.902-2.816 0-1.552 1.302-2.815 2.902-2.815.891 0 1.69.393 2.223 1.008l1.858-1.041a5.071 5.071 0 0 0-4.081-2.033c-2.78 0-5.031 2.186-5.031 4.881 0 2.696 2.252 4.882 5.03 4.882a5.073 5.073 0 0 0 4.088-2.04l-1.858-1.04Zm33.97-6.48h2.32l-.045 1.604c.644-1.181 1.632-1.806 2.872-1.806 1.401 0 2.322.646 2.827 1.783.758-1.114 1.906-1.783 3.308-1.783 2.274 0 3.63 1.472 3.63 3.856v5.706h-2.32v-5.482c0-1.294-.483-2.007-1.816-2.007-1.354 0-2.16.803-2.16 2.363v5.126h-2.32v-5.482c0-1.294-.46-2.007-1.792-2.007-1.38 0-2.183.803-2.183 2.363v5.126h-2.32v-9.36ZM40.166 4h2.32v7.064c.622-1.158 1.77-1.85 3.22-1.85 2.134 0 3.606 1.472 3.606 4.013v5.55H46.99v-5.372c0-1.338-.642-2.118-2-2.118-1.515 0-2.503.892-2.503 2.408v5.081h-2.32V4ZM63.73 9.214c-2.778 0-5.031 2.186-5.031 4.881 0 2.696 2.253 4.882 5.03 4.882 2.781 0 5.033-2.186 5.033-4.882 0-2.695-2.252-4.88-5.032-4.88Zm0 2.066c1.602 0 2.904 1.263 2.904 2.815 0 1.553-1.302 2.816-2.904 2.816-1.6 0-2.902-1.264-2.902-2.816 0-1.552 1.303-2.815 2.902-2.815Zm-12.11-1.865h2.321l-.024 1.76c.645-1.47 1.747-1.939 2.804-1.939.495 0 .884.081 1.215.217.131.053.404.18.67.373 0 0-.322.389-.605.86-.284.473-.476.98-.476.98-.367-.178-.735-.313-1.263-.313-1.379 0-2.32.78-2.32 2.877v4.546h-2.323v-9.36Zm54.896 9.376h2.348V9.415h-2.348v9.376Zm-.368-13.014c0-.848.713-1.473 1.542-1.473.828 0 1.542.625 1.542 1.473 0 .893-.714 1.495-1.542 1.495-.829 0-1.542-.602-1.542-1.495Zm-6.918 9.844v-4.308h-1.45V9.415h1.45V4h2.324v5.415h2.577v1.898h-2.577v4.353c0 1.071.368 1.384.967 1.384.552 0 .897-.246 1.15-.447l1.105 1.518c-.484.447-1.243.893-2.485.893-1.818 0-3.06-.893-3.06-3.393Z" clip-rule="evenodd"/>
-    <circle cx="12" cy="12" r="12" fill="transparent"/>
-    <path fill="#FFFFFF" fill-rule="evenodd" d="m14.82 17.52-1.907-1.1 5.737-3.309a4.31 4.31 0 0 0 .62-.435 3.347 3.347 0 0 1 .154 3.611 3.372 3.372 0 0 1-4.604 1.233Zm-.46.795c.22.127.45.234.688.32a3.35 3.35 0 0 1-3.054 1.938 3.373 3.373 0 0 1-3.37-3.367v-6.619l2.911 1.68v4.153a.46.46 0 0 0 .23.397l2.596 1.498Zm-6.864-.344a3.383 3.383 0 0 1-2.92-1.683 3.343 3.343 0 0 1-.337-2.556c.233-.869.79-1.595 1.57-2.044l1.906-1.1v6.617c0 .254.022.505.067.754a3.4 3.4 0 0 1-.286.012Zm7.418-8.179-2.91 1.679-3.6-2.077a.46.46 0 0 0-.459 0L5.35 10.892c-.22.126-.428.272-.621.435a3.349 3.349 0 0 1-.154-3.611A3.385 3.385 0 0 1 7.497 6.03c.588 0 1.169.156 1.682.452l5.735 3.31Zm-2.92-6.362c1.859 0 3.37 1.51 3.37 3.368v2.2L9.629 5.689a4.261 4.261 0 0 0-.688-.32 3.351 3.351 0 0 1 3.053-1.939Zm7.43 4.287a3.37 3.37 0 0 1-1.234 4.6l-5.736 3.308v-3.357l3.6-2.077a.459.459 0 0 0 .23-.398V6.798c0-.253-.023-.505-.066-.753a3.383 3.383 0 0 1 3.206 1.672Z" clip-rule="evenodd"/>
+  <svg
+    style="margin-bottom: 0.2rem"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    width="110"
+    height="22"
+    viewBox="0 0 120 24"
+  >
+    <path fill="#FFFFFF" fill-rule="evenodd" d="M93.638 15.5c0 1.025-.965 1.671-2.32 1.671-1.196 0-1.84-.423-1.84-1.225 0-.825.667-1.182 1.679-1.182h2.481v.735Zm-1.746-6.286c-2.011 0-3.154.669-4 1.622l-.044.05.024.023 1.676.938c.497-.425 1.162-.76 2.16-.76 1.241 0 1.93.623 1.93 2.117h-2.642c-2.183.023-3.792.869-3.792 2.809 0 2.095 1.563 2.964 3.47 2.964 1.425 0 2.343-.535 3.033-1.538l-.069 1.337h2.32V13.25c0-2.765-1.745-4.035-4.066-4.035Zm26.25 6.682a2.932 2.932 0 0 1-2.229 1.015c-1.6 0-2.902-1.263-2.902-2.816 0-1.552 1.302-2.815 2.902-2.815.891 0 1.689.393 2.223 1.008l1.858-1.042a5.07 5.07 0 0 0-4.081-2.032c-2.779 0-5.031 2.186-5.031 4.881 0 2.696 2.252 4.882 5.031 4.882a5.073 5.073 0 0 0 4.087-2.04l-1.858-1.04Zm-81.51 0a2.934 2.934 0 0 1-2.23 1.015c-1.6 0-2.902-1.263-2.902-2.816 0-1.552 1.302-2.815 2.902-2.815.891 0 1.69.393 2.223 1.008l1.858-1.041a5.071 5.071 0 0 0-4.081-2.033c-2.78 0-5.031 2.186-5.031 4.881 0 2.696 2.252 4.882 5.03 4.882a5.073 5.073 0 0 0 4.088-2.04l-1.858-1.04Zm33.97-6.48h2.32l-.045 1.604c.644-1.181 1.632-1.806 2.872-1.806 1.401 0 2.322.646 2.827 1.783.758-1.114 1.906-1.783 3.308-1.783 2.274 0 3.63 1.472 3.63 3.856v5.706h-2.32v-5.482c0-1.294-.483-2.007-1.816-2.007-1.354 0-2.16.803-2.16 2.363v5.126h-2.32v-5.482c0-1.294-.46-2.007-1.792-2.007-1.38 0-2.183.803-2.183 2.363v5.126h-2.32v-9.36ZM40.166 4h2.32v7.064c.622-1.158 1.77-1.85 3.22-1.85 2.134 0 3.606 1.472 3.606 4.013v5.55H46.99v-5.372c0-1.338-.642-2.118-2-2.118-1.515 0-2.503.892-2.503 2.408v5.081h-2.32V4ZM63.73 9.214c-2.778 0-5.031 2.186-5.031 4.881 0 2.696 2.253 4.882 5.03 4.882 2.781 0 5.033-2.186 5.033-4.882 0-2.695-2.252-4.88-5.032-4.88Zm0 2.066c1.602 0 2.904 1.263 2.904 2.815 0 1.553-1.302 2.816-2.904 2.816-1.6 0-2.902-1.264-2.902-2.816 0-1.552 1.303-2.815 2.902-2.815Zm-12.11-1.865h2.321l-.024 1.76c.645-1.47 1.747-1.939 2.804-1.939.495 0 .884.081 1.215.217.131.053.404.18.67.373 0 0-.322.389-.605.86-.284.473-.476.98-.476.98-.367-.178-.735-.313-1.263-.313-1.379 0-2.32.78-2.32 2.877v4.546h-2.323v-9.36Zm54.896 9.376h2.348V9.415h-2.348v9.376Zm-.368-13.014c0-.848.713-1.473 1.542-1.473.828 0 1.542.625 1.542 1.473 0 .893-.714 1.495-1.542 1.495-.829 0-1.542-.602-1.542-1.495Zm-6.918 9.844v-4.308h-1.45V9.415h1.45V4h2.324v5.415h2.577v1.898h-2.577v4.353c0 1.071.368 1.384.967 1.384.552 0 .897-.246 1.15-.447l1.105 1.518c-.484.447-1.243.893-2.485.893-1.818 0-3.06-.893-3.06-3.393Z" clip-rule="evenodd" />
+    <circle cx="12" cy="12" r="12" fill="transparent" />
+    <path fill="#FFFFFF" fill-rule="evenodd" d="m14.82 17.52-1.907-1.1 5.737-3.309a4.31 4.31 0 0 0 .62-.435 3.347 3.347 0 0 1 .154 3.611 3.372 3.372 0 0 1-4.604 1.233Zm-.46.795c.22.127.45.234.688.32a3.35 3.35 0 0 1-3.054 1.938 3.373 3.373 0 0 1-3.37-3.367v-6.619l2.911 1.68v4.153a.46.46 0 0 0 .23.397l2.596 1.498Zm-6.864-.344a3.383 3.383 0 0 1-2.92-1.683 3.343 3.343 0 0 1-.337-2.556c.233-.869.79-1.595 1.57-2.044l1.906-1.1v6.617c0 .254.022.505.067.754a3.4 3.4 0 0 1-.286.012Zm7.418-8.179-2.91 1.679-3.6-2.077a.46.46 0 0 0-.459 0L5.35 10.892c-.22.126-.428.272-.621.435a3.349 3.349 0 0 1-.154-3.611A3.385 3.385 0 0 1 7.497 6.03c.588 0 1.169.156 1.682.452l5.735 3.31Zm-2.92-6.362c1.859 0 3.37 1.51 3.37 3.368v2.2L9.629 5.689a4.261 4.261 0 0 0-.688-.32 3.351 3.351 0 0 1 3.053-1.939Zm7.43 4.287a3.37 3.37 0 0 1-1.234 4.6l-5.736 3.308v-3.357l3.6-2.077a.459.459 0 0 0 .23-.398V6.798c0-.253-.023-.505-.066-.753a3.383 3.383 0 0 1 3.206 1.672Z" clip-rule="evenodd" />
   </svg>
 </template>