@nuxtify/pages 0.1.0

package/dist/runtime/components/EmailSubscribeForm.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+// Types
+import type { VForm } from 'vuetify/lib/components/VForm/index.mjs'
+
+import { useId, navigateTo, useDisplay, ref, useNuxtifyConfig, getUtmParams, getBaseUrl, submitFormData, formRules, isExternalUrl,
+} from '#imports'
+
+// Props
+const props = defineProps({
+  submitUrl: {
+    type: String,
+    required: true,
+  },
+  buttonText: {
+    type: String,
+    default: 'Subscribe',
+  },
+  emailPlaceholder: {
+    type: String,
+    default: 'Enter your best email',
+  },
+  marketingConsentText: {
+    type: String,
+    default: 'Unsubscribe any time.',
+  },
+  showPrivacy: {
+    type: Boolean,
+    default: false,
+  },
+  redirectUrl: {
+    type: String,
+    default: '',
+  },
+  thankYouMessage: {
+    type: String,
+    default: 'Thanks for signing up!',
+  },
+  dark: {
+    type: Boolean,
+    default: false,
+  },
+  appendButtonIcon: {
+    type: String,
+    default: '',
+  },
+  prependButtonIcon: {
+    type: String,
+    default: '',
+  },
+})
+
+// App state
+const id = useId()
+const nuxtifyConfig = useNuxtifyConfig()
+const { xs } = useDisplay()
+
+// Form state
+const form = ref<VForm>()
+const isSubmitted = ref(false)
+const isError = ref(false)
+const errorMessage = ref('')
+const loading = ref(false)
+const formInput = ref({
+  email: '',
+})
+
+// Button style
+const rounded = () => {
+  if (nuxtifyConfig.style?.btn?.rounded) {
+    return xs.value ? 'lg' : '0 e-lg'
+  }
+  else {
+    return 0
+  }
+}
+
+async function handleSubmit() {
+  loading.value = true
+  const res = await form.value?.validate()
+  if (res?.valid) {
+    const formData = new FormData()
+
+    // Get UTM params
+    const { utmSource, utmMedium, utmCampaign, utmTerm, utmContent }
+      = getUtmParams(window.location.href)
+
+    // Set form field keys
+    // Default
+    let fieldPrepend = ''
+    let fieldAppend = ''
+
+    // Mailerlite
+    if (props.submitUrl.includes('mailerlite')) {
+      fieldPrepend = 'fields['
+      fieldAppend = ']'
+    }
+
+    // Set form field values
+    formData.append(
+      `${fieldPrepend}email${fieldAppend}`,
+      formInput.value.email,
+    )
+    formData.append(
+      `${fieldPrepend}referrer${fieldAppend}`,
+      getBaseUrl(window.location.href),
+    )
+
+    if (utmSource)
+      formData.append(`${fieldPrepend}utm_source${fieldAppend}`, utmSource)
+    if (utmMedium)
+      formData.append(`${fieldPrepend}utm_medium${fieldAppend}`, utmMedium)
+    if (utmCampaign)
+      formData.append(`${fieldPrepend}utm_campaign${fieldAppend}`, utmCampaign)
+    if (utmTerm)
+      formData.append(`${fieldPrepend}utm_term${fieldAppend}`, utmTerm)
+    if (utmContent)
+      formData.append(`${fieldPrepend}utm_content${fieldAppend}`, utmContent)
+
+    // Send to email provider
+    const providerResponse = await submitFormData(props.submitUrl, formData)
+    isError.value = providerResponse.isError
+    errorMessage.value = providerResponse.errorMessage
+
+    // Redirect
+    if (!isError.value && props.redirectUrl) {
+      await navigateTo(props.redirectUrl, {
+        external: isExternalUrl(props.redirectUrl, nuxtifyConfig.brand?.domain ?? ''),
+      })
+    }
+    else {
+      isSubmitted.value = providerResponse.isSubmitted
+    }
+  }
+  loading.value = false
+}
+</script>
+
+<template>
+  <!-- Form -->
+  <v-form
+    v-if="!isSubmitted"
+    ref="form"
+    validate-on="submit"
+    @submit.prevent="handleSubmit"
+  >
+    <div class="d-sm-flex justify-center">
+      <!-- Using useId prevents hydration mismatch warnings issue with Vuetify -->
+      <!-- See: https://github.com/vuetifyjs/vuetify/issues/19696 -->
+      <!-- Once the issue is resolved (and it's used internally in Vuetify), remove use of useId -->
+      <v-text-field
+        :id
+        v-model="formInput.email"
+        type="email"
+        color="secondary"
+        :placeholder="emailPlaceholder"
+        :rules="[formRules.required, formRules.validEmail]"
+        :rounded="xs ? 't-lg' : '0 ts-lg'"
+        hide-details="auto"
+        class="text-start"
+      >
+        <template #message="{ message }">
+          <span :class="dark ? 'text-red-lighten-3' : ''">{{ message }}</span>
+        </template>
+      </v-text-field>
+      <v-btn
+        type="submit"
+        variant="flat"
+        color="secondary"
+        size="x-large"
+        class="d-flex align-center py-7 mt-2 mt-sm-0"
+        :loading
+        :rounded="rounded()"
+        :append-icon="appendButtonIcon"
+        :prepend-icon="prependButtonIcon"
+        :block="xs"
+      >
+        {{ buttonText }}
+      </v-btn>
+    </div>
+
+    <!-- Supporting Text -->
+    <div
+      v-if="showPrivacy || marketingConsentText"
+      :class="`text-body-2  ${
+        dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'
+      } mt-2`"
+    >
+      <span v-if="marketingConsentText">
+        {{ marketingConsentText }}
+      </span>
+      <span v-if="showPrivacy">
+        By signing up you agree to the
+        <NuxtLink
+          :to="nuxtifyConfig.pages?.policies?.privacyUrl"
+          :class="`text-decoration-none ${
+            dark ? 'text-grey-lighten-2' : 'text-medium-emphasis'
+          }`"
+        >
+          Privacy Policy</NuxtLink>.
+      </span>
+    </div>
+  </v-form>
+
+  <!-- Thank You -->
+  <div
+    v-else
+    class="text-body-1"
+  >
+    {{ thankYouMessage }}
+  </div>
+</template>
+
+<style scoped>
+:deep(.v-input__details){padding-inline:0}:deep(.v-text-field .v-input__details){padding-inline:0}a:hover{text-decoration:underline!important}
+</style>

package/dist/runtime/components/FooterCallToAction.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useNuxtifyConfig } from '#imports'
+
+// App state
+const nuxtifyConfig = useNuxtifyConfig()
+</script>
+
+<template>
+  <v-row
+    justify="center"
+    class="text-center my-4"
+  >
+    <v-col
+      cols="12"
+      md="7"
+      lg="6"
+      xl="4"
+    >
+      <div
+        v-if="nuxtifyConfig.footer?.cta?.title"
+        :class="`text-h5 text-${nuxtifyConfig.footer.cta.color}-lighten-4`"
+      >
+        {{ nuxtifyConfig.footer.cta.title }}
+      </div>
+      <div
+        v-if="nuxtifyConfig.footer?.cta?.subtitle"
+        :class="`text-subtitle-1 text-${nuxtifyConfig.footer.cta.color}-lighten-3 mb-4`"
+      >
+        {{ nuxtifyConfig.footer.cta.subtitle }}
+      </div>
+      <EmailSubscribeForm
+        v-if="nuxtifyConfig.email?.provider?.defaultSubmitUrl"
+        :submit-url="nuxtifyConfig.email.provider.defaultSubmitUrl"
+        dark
+      />
+    </v-col>
+  </v-row>
+</template>

package/dist/runtime/components/app/AppAnnouncementBar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useDisplay, computed, useNuxtifyConfig, isExternalUrl } from '#imports'
+
+// App state
+const nuxtifyConfig = useNuxtifyConfig()
+const { xs } = useDisplay()
+
+// Component state
+const isExternalLink = computed(() =>
+  isExternalUrl(nuxtifyConfig.announcement?.buttonUrl ?? '', nuxtifyConfig.brand?.domain ?? ''),
+)
+</script>
+
+<template>
+  <v-system-bar
+    :height="xs ? 60 : 40"
+    :order="-100"
+    color="primary"
+    class="justify-center text-start"
+  >
+    <div
+      v-if="nuxtifyConfig.announcement?.message"
+      :class="`${xs ? 'text-subtitle-2' : 'text-subtitle-1'} mr-4`"
+    >
+      {{ nuxtifyConfig.announcement.message }}
+    </div>
+    <v-btn
+      v-if="
+        nuxtifyConfig.announcement?.buttonText && nuxtifyConfig.announcement.buttonUrl
+      "
+      :to="!isExternalLink ? nuxtifyConfig.announcement.buttonUrl : undefined"
+      :href="isExternalLink ? nuxtifyConfig.announcement.buttonUrl : undefined"
+      size="small"
+      variant="flat"
+      color="secondary"
+    >
+      {{ nuxtifyConfig.announcement.buttonText }}
+    </v-btn>
+  </v-system-bar>
+</template>

package/dist/runtime/components/app/AppBar.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { useDisplay, useDrawer, useNuxtifyConfig, mdiArrowTopRight, mdiClose, mdiMenu } from '#imports'
+
+// App state
+const { smAndDown } = useDisplay()
+const nuxtifyConfig = useNuxtifyConfig()
+const drawer = useDrawer()
+
+// Navigation
+const primaryNavLinks = nuxtifyConfig.navigation?.primary
+const secondaryNavLinks = nuxtifyConfig.navigation?.secondary
+const featuredSecondaryLink = secondaryNavLinks?.slice(0, 1)[0] // first link gets featured
+</script>
+
+<template>
+  <v-app-bar
+    :density="smAndDown ? 'compact' : 'default'"
+    flat
+    class="px-sm-2 bottom-border"
+  >
+    <template #prepend>
+      <!-- Logo -->
+      <NuxtLink
+        to="/"
+        class="ml-2"
+      >
+        <AppLogo />
+      </NuxtLink>
+    </template>
+
+    <!-- Desktop navigation -->
+    <div v-if="!smAndDown">
+      <!-- Primary links -->
+      <v-btn
+        v-for="link in primaryNavLinks"
+        :key="link.text"
+        :to="link.to"
+        :href="link.href"
+        :active="false"
+        :prepend-icon="link.icon"
+        slim
+        exact
+        :ripple="false"
+        size="large"
+        color="unset"
+        :target="link.openInNew ? '_blank' : undefined"
+        :rel="link.openInNew ? 'noopener nofollow' : undefined"
+        class="nav-items mx-2"
+      >
+        {{ link.text }}
+        <v-icon
+          v-if="link.openInNew"
+          :icon="mdiArrowTopRight"
+          size="x-small"
+          color="grey"
+          class="ml-1"
+        />
+      </v-btn>
+    </div>
+
+    <template #append>
+      <!-- Mobile navigation -->
+      <v-app-bar-nav-icon
+        v-if="smAndDown"
+        :icon="drawer ? mdiClose : mdiMenu"
+        color="primary"
+        aria-label="Navigation Menu"
+        @click="drawer = !drawer"
+      />
+
+      <!-- Desktop navigation -->
+      <nav
+        v-else
+        class="d-flex align-center"
+      >
+        <!-- Secondary links -->
+        <v-btn
+          v-for="link in secondaryNavLinks?.slice(1).reverse()"
+          :key="link.text"
+          :to="link.to"
+          :href="link.href"
+          :prepend-icon="link.icon"
+          :active="false"
+          size="large"
+          color="unset"
+          :target="link.openInNew ? '_blank' : undefined"
+          :rel="link.openInNew ? 'noopener nofollow' : undefined"
+          class="nav-items mx-2"
+        >
+          {{ link.text }}
+          <v-icon
+            v-if="link.openInNew"
+            :icon="mdiArrowTopRight"
+            size="x-small"
+            color="grey"
+            class="ml-1"
+          />
+        </v-btn>
+
+        <!-- Featured secondary link -->
+        <v-btn
+          v-if="featuredSecondaryLink?.text"
+          :to="featuredSecondaryLink.to"
+          :href="featuredSecondaryLink.href"
+          :prepend-icon="featuredSecondaryLink.icon"
+          :active="false"
+          variant="flat"
+          size="large"
+          :target="featuredSecondaryLink.openInNew ? '_blank' : undefined"
+          :rel="featuredSecondaryLink.openInNew ? 'noopener nofollow' : undefined"
+          class="mx-2"
+        >
+          {{ featuredSecondaryLink.text }}
+          <v-icon
+            v-if="featuredSecondaryLink.openInNew"
+            :icon="mdiArrowTopRight"
+            size="small"
+            class="ml-1"
+          />
+        </v-btn>
+      </nav>
+    </template>
+  </v-app-bar>
+</template>
+
+<style scoped>
+a{text-decoration:none}.nav-items:hover{color:rgb(var(--v-theme-secondary))!important}:deep(.v-btn--variant-text .v-btn__overlay){background-color:transparent}.bottom-border{border-bottom:1px solid #e7edf6}:deep(.v-toolbar__content){align-self:center;max-width:1280px}:deep(.v-toolbar__prepend){margin-inline:4px 12px}:deep(.v-btn__content){line-height:1}
+</style>

package/dist/runtime/components/app/AppDialog.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useDialog } from '#imports'
+
+// App state
+const dialog = useDialog()
+</script>
+
+<template>
+  <v-dialog
+    v-model="dialog.show"
+    width="500"
+  >
+    <v-card class="pa-2">
+      <v-card-title>{{ dialog.title }}</v-card-title>
+
+      <v-card-text class="ml-n2">
+        {{ dialog.message }}
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer />
+
+        <v-btn
+          color="grey-darken-1"
+          @click="dialog.show = false"
+        >
+          {{ dialog.closeButtonText }}
+        </v-btn>
+
+        <v-btn
+          :color="dialog.action.buttonColor"
+          variant="flat"
+          @click="dialog.action.function"
+        >
+          {{ dialog.action.buttonText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

package/dist/runtime/components/app/AppFooter.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { useNuxtifyConfig, mdiArrowTopRight } from '#imports'
+
+// App state
+const nuxtifyConfig = useNuxtifyConfig()
+
+// Navigation
+const footerPrimaryLinks = nuxtifyConfig.navigation?.footerPrimary
+const footerSecondaryLinks = nuxtifyConfig.navigation?.footerSecondary
+</script>
+
+<template>
+  <v-row
+    class="px-sm-1 pt-12 pb-4 mb-1"
+    style="max-width: 1280px"
+  >
+    <v-col cols="12">
+      <FooterCallToAction v-if="nuxtifyConfig.footer?.cta?.show" />
+
+      <v-row class="mb-2">
+        <!-- Brand -->
+        <v-col
+          cols="12"
+          :lg="footerPrimaryLinks?.length === 4 ? 3 : 4"
+        >
+          <!-- Logo -->
+          <AppLogo dark />
+
+          <!-- Tagline -->
+          <p class="mt-2 clip-text">
+            {{ nuxtifyConfig.brand?.tagline }}
+          </p>
+        </v-col>
+
+        <v-spacer />
+
+        <!-- Primary Links -->
+        <v-col
+          v-for="group in footerPrimaryLinks"
+          :key="group.title"
+          cols="6"
+          md="3"
+          lg="2"
+        >
+          <p class="text-body-1 font-weight-bold mb-3">
+            {{ group.title }}
+          </p>
+          <div
+            v-for="link in group.links"
+            :key="link.text"
+          >
+            <v-btn
+              :to="link.to"
+              :href="link.href"
+              variant="text"
+              :active="false"
+              :ripple="false"
+              :target="link.openInNew ? '_blank' : undefined"
+              :rel="link.openInNew ? 'noopener nofollow' : undefined"
+              class="px-0"
+            >
+              {{ link.text }}
+              <v-icon
+                v-if="link.openInNew"
+                :icon="mdiArrowTopRight"
+                size="small"
+                color="grey"
+                class="ml-1"
+              />
+            </v-btn>
+          </div>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col
+          cols="12"
+          sm="9"
+        >
+          <small>
+            <!-- Copyright -->
+            ©
+            {{
+              nuxtifyConfig.footer?.copyright
+                || nuxtifyConfig.brand?.name
+                || nuxtifyConfig.brand?.domain
+            }}.
+
+            <!-- Credits -->
+            {{ nuxtifyConfig.footer?.credits?.prependText }}
+            <span v-if="nuxtifyConfig.footer?.credits?.creator?.name">
+              <a
+                v-if="nuxtifyConfig.footer.credits.creator.domain"
+                :href="`https://${nuxtifyConfig.footer.credits.creator.domain}/?utm_source=${nuxtifyConfig.brand?.domain}&utm_medium=referral&utm_campaign=createdby`"
+                target="_blank"
+                rel="noopener nofollow"
+                class="font-weight-bold"
+              >{{ nuxtifyConfig.footer?.credits?.creator?.name }}</a><span v-else>{{ nuxtifyConfig.footer?.credits?.creator?.name }}</span>.
+            </span>
+
+            <!-- Message -->
+            {{ nuxtifyConfig.footer?.credits?.appendText }}
+
+            <!-- Powered By -->
+            <span v-if="nuxtifyConfig.footer?.credits?.showPoweredBy">
+              <a
+                :href="`https://nuxtify.dev/?utm_source=${nuxtifyConfig.brand?.domain}&utm_medium=referral&utm_campaign=poweredby`"
+                target="_blank"
+                rel="noopener nofollow"
+              >Powered by Nuxtify</a>.
+            </span>
+          </small>
+
+          <v-divider
+            v-if="footerSecondaryLinks?.length"
+            class="my-4"
+            style="width: 50px"
+          />
+
+          <!-- Secondary Links -->
+          <v-btn
+            v-for="link in footerSecondaryLinks"
+            :key="link.text"
+            :to="link.to"
+            :href="link.href"
+            variant="plain"
+            size="small"
+            :ripple="false"
+            :target="link.openInNew ? '_blank' : undefined"
+            :rel="link.openInNew ? 'noopener nofollow' : undefined"
+            class="text-capitalize pl-0 mb-2"
+          >
+            {{ link.text }}
+            <v-icon
+              v-if="link.openInNew"
+              :icon="mdiArrowTopRight"
+              size="small"
+              color="grey"
+              class="ml-1"
+            />
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped>
+a{color:inherit;justify-content:start;text-decoration:none}.v-btn:hover,a:hover{text-decoration:underline;text-underline-offset:4px}:deep(.v-btn:hover>.v-btn__overlay){opacity:0}.clip-text{max-width:600px}
+</style>

package/dist/runtime/components/app/AppLoading.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="center">
+    <div class="sk-chase">
+      <div class="sk-chase-dot" />
+      <div class="sk-chase-dot" />
+      <div class="sk-chase-dot" />
+      <div class="sk-chase-dot" />
+      <div class="sk-chase-dot" />
+      <div class="sk-chase-dot" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.center{align-items:center;display:flex;height:100vh;justify-content:center}.sk-chase{animation:sk-chase 2.5s linear infinite both;height:40px;position:relative;width:40px}.sk-chase-dot{animation:sk-chase-dot 2s ease-in-out infinite both;height:100%;left:0;position:absolute;top:0;width:100%}.sk-chase-dot:before{animation:sk-chase-dot-before 2s ease-in-out infinite both;background-color:rgb(var(--v-theme-primary));border-radius:100%;content:"";display:block;height:25%;width:25%}.sk-chase-dot:first-child{animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1s}.sk-chase-dot:nth-child(3){animation-delay:-.9s}.sk-chase-dot:nth-child(4){animation-delay:-.8s}.sk-chase-dot:nth-child(5){animation-delay:-.7s}.sk-chase-dot:nth-child(6){animation-delay:-.6s}.sk-chase-dot:first-child:before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1s}.sk-chase-dot:nth-child(3):before{animation-delay:-.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-.6s}@keyframes sk-chase{to{transform:rotate(1turn)}}@keyframes sk-chase-dot{80%,to{transform:rotate(1turn)}}@keyframes sk-chase-dot-before{50%{transform:scale(.4)}0%,to{transform:scale(1)}}
+</style>

package/dist/runtime/components/app/AppLogo.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useAppConfig, useDisplay, computed } from '#imports'
+
+// Props
+const props = defineProps({
+  dark: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: Number,
+    default: undefined,
+  },
+})
+
+// App state
+const nuxtifyConfig = useAppConfig().nuxtify
+const { smAndDown } = useDisplay()
+
+// Image URL logic
+// Set default to the light image url
+let imageUrl = nuxtifyConfig.brand.logo.lightUrl
+
+// If it's dark theme logo and there's a dark image url, use that
+if (props.dark && nuxtifyConfig.brand.logo.darkUrl) {
+  imageUrl = nuxtifyConfig.brand.logo.darkUrl
+}
+
+// Image width logic
+const width = computed(() => {
+  if (props.width) {
+    return props.width
+  }
+  else {
+    return smAndDown.value
+      ? nuxtifyConfig.brand.logo.mobileWidth
+      : nuxtifyConfig.brand.logo.width
+  }
+})
+</script>
+
+<template>
+  <v-img
+    v-if="imageUrl"
+    :width
+    :src="imageUrl"
+    :alt="`${nuxtifyConfig.brand.name} logo`"
+  />
+  <span
+    v-else
+    :class="`text-subtitle-1 text-sm-h6 ${dark ? '' : 'text-primary'}`"
+  >
+    {{ nuxtifyConfig.brand.name }}
+  </span>
+</template>