@4verburga/alpine-spanishplus 1.6.6

package/components/content/ContactForm.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { Field } from '../../types/contact'
+const alpine = useAppConfig().alpine
+
+const { FORMSPREE_URL } = useRuntimeConfig().public
+
+if (!FORMSPREE_URL) {
+  console.warn('No FORMSPREE_URL provided')
+}
+
+const status = ref()
+
+const props = defineProps({
+  submitButtonText: {
+    type: String,
+    default: 'Send message'
+  },
+  fields: {
+    type: Array as PropType<Field[]>,
+    default: () => [
+      {
+        type: 'text',
+        model: 'name',
+        name: 'Name',
+        placeholder: 'Your name',
+        required: true,
+        layout: 'default'
+      },
+      {
+        type: 'email',
+        model: 'email',
+        name: 'Email',
+        placeholder: 'Your email',
+        required: true,
+        layout: 'default'
+      },
+      {
+        type: 'text',
+        model: 'text',
+        name: 'Subject',
+        required: false,
+        layout: 'default'
+      },
+      {
+        type: 'textarea',
+        model: 'message',
+        name: 'Message',
+        placeholder: 'Your message',
+        required: true,
+        layout: 'big'
+      }
+    ]
+  }
+})
+
+const form = reactive(props.fields.map(v => ({ ...v, data: '' })))
+
+const onSend = async (e: any) => {
+  e.preventDefault()
+  const data = new FormData(e.target)
+
+  status.value = 'Sending...'
+
+  fetch(e.target.action, {
+    method: e.target.method,
+    body: data,
+    headers: {
+      'Accept': 'application/json'
+    }
+  }).then(response => {
+    if (response.ok) {
+      status.value = alpine.form.successMessage
+      e.target.reset()
+    } else {
+      // Handle errors from API
+      response.json().then(data => {
+        if (Object.hasOwn(data, 'errors')) {
+          status.value = data["errors"][0].message
+          console.error(data["errors"].map((error: any) => error["message"]).join(", "))
+          setTimeout(() => {
+            status.value = 'Send message'
+          }, 2000)
+        } else {
+          console.error("There was a problem submitting your form")
+        }
+      })
+    }
+  }).catch(() => {
+    // Catch all other errors
+    console.error("There was a problem submitting your form")
+  })
+}
+
+</script>
+
+<template>
+  <form class="contact-form" method="POST" :action="FORMSPREE_URL" @submit="onSend">
+    <div class="inputs">
+      <Input v-for="(field, index) in form" :key="index" v-model="field.data" :field="field" />
+    </div>
+    <div>
+      <Button type="submit" :disabled="!FORMSPREE_URL">
+        {{ status ? status : submitButtonText }}
+      </Button>
+    </div>
+  </form>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.contact-form': {
+    '.inputs': {
+      display: 'grid',
+      gridAutoFlow: 'row',
+      gridTemplateColumns: 'repeat(1, minmax(0, 1fr))',
+      gap: '{space.8}',
+      marginBottom: '{space.8}',
+      maxWidth: '{size.md}'
+    }
+  }
+})
+</style>

package/components/content/Gallery.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  images: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  }
+})
+</script>
+
+<template>
+  <section class="gallery">
+    <div
+      class="layout"
+    >
+      <NuxtImg
+        v-for="(image, index) in images"
+        :key="index"
+        :src="image"
+        :width="16"
+        :height="9"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.gallery': {
+    '.layout': {
+      display: 'grid',
+      gap: '{space.8}',
+      my: '{space.16}',
+      '--cols': 1,
+      gridTemplateColumns: 'repeat(var(--cols), minmax(0, 1fr))',
+      '@md': {
+        '--cols': (props) => props.images.length < 2 ? props.images.length : 2
+      },
+      img: {
+        objectFit: 'cover',
+        width: '100%',
+        aspectRatio: '16 / 9',
+        borderRadius: '{radii.md}'
+      }
+    }
+  }
+})
+</style>

package/components/content/Hero.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+defineProps({
+  image: {
+    type: String,
+    default: null
+  },
+  imageAlt: {
+    type: String,
+    default: 'Hero Image'
+  },
+  imagePosition: {
+    type: String,
+    default: 'right'
+  }
+})
+</script>
+
+<template>
+  <section class="hero">
+    <div class="layout">
+      <div class="content">
+        <div class="title">
+          <ContentSlot :use="$slots.title" unwrap="p">
+            Hero title
+          </ContentSlot>
+        </div>
+        <div class="description">
+          <ContentSlot :use="$slots.description" unwrap="p">
+            Hero description
+          </ContentSlot>
+        </div>
+      </div>
+      <NuxtImg
+        v-if="image"
+        :class="imagePosition"
+        :src="image"
+        :alt="imageAlt"
+        :width="16"
+        :height="9"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.hero': {
+    '.layout': {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(1, minmax(0, 1fr))',
+      gap: '{space.8}',
+      '@lg': {
+        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+      },
+      '.title': {
+        fontSize: '{text.4xl.fontSize}',
+        lineHeight: '{text.4xl.lineHeight}',
+        fontWeight: '{fontWeight.bold}',
+      },
+      '.description': {
+        marginTop: '{space.3}',
+        fontSize: '{text.xl.fontSize}',
+        lineHeight: '{text.xl.lineHeight}',
+      },
+      img: {
+        width: '100%',
+        aspectRatio: '16 / 9',
+        objectFit: 'cover',
+        borderRadius: '{radii.md}',
+        '&.left': {
+          order: -1
+        }
+      },
+    }
+  }
+})
+</style>

package/components/data-entry/Input.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { Field } from '../types/contact'
+
+defineEmits(['update:modelValue'])
+
+defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  field: {
+    type: Object as PropType<Field>,
+    required: true,
+    validator: (value: Field) => {
+      if (!value.name) {
+        return false
+      }
+      return true
+    }
+  }
+})
+
+</script>
+
+<template>
+  <div>
+    <label :for="field.name">
+      {{ field.label }}
+    </label>
+    <input
+      v-if="field.type !== 'textarea'"
+      :id="field.name"
+      :name="field.name"
+      :value="modelValue"
+      :type="field.type ? field.type : 'text'"
+      :placeholder="field.placeholder ? field.placeholder : ''"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+    <textarea
+      v-else
+      :id="field.name"
+      :name="field.name"
+      :value="modelValue"
+      :type="field.type ? field.type : 'text'"
+      :placeholder="field.placeholder ? field.placeholder : ''"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+  div: {
+    label: {
+      display: 'block',
+      fontSize: '{text.base.fontSize}',
+      lineHeight: '{text.base.lineHeight}',
+      fontWeight: '{fontWeight.semibold}',
+      marginBottom: '{space.2}',
+      cursor: 'pointer',
+    },
+    'input, textarea': {
+      backgroundColor: 'transparent',
+      outline: 'none',
+      border: '1px solid {color.gray.300}',
+      borderRadius: '{radii.sm}',
+      padding: '{space.2} {space.4}',
+      width: '100%',
+      caretColor: '{color.gray.500}',
+      '&:focus': {
+        borderColor: '{color.gray.700}'
+      },
+      '@dark': {
+        borderColor: '{color.gray.700}',
+        '&:focus': {
+          borderColor: '{color.gray.400}'
+        },
+      }
+    },
+    textarea: {
+      resize: 'none',
+      height: '{space.48}'
+    }
+  }
+})
+</style>

package/composables/date.ts

@@ -0,0 +1,8 @@
+export const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString('es', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+

package/layouts/article.vue

@@ -0,0 +1,131 @@
+<template>
+  <article ref="article">
+    <!-- TODO: could be refactored as a transparent ButtonLink -->
+    <NuxtLink
+      :to="parentPath"
+      class="back"
+    >
+      <Icon name="ph:arrow-left" />
+      <span>
+        Back
+      </span>
+    </NuxtLink>
+    <header>
+      <h1
+        v-if="page?.title"
+        class="title"
+      >
+        {{ page.title }}
+      </h1>
+      <time
+        v-if="page?.date"
+        :datetime="page.date"
+      >
+        {{ formatDate(page.date) }}
+      </time>
+    </header>
+
+    <div class="prose">
+      <slot />
+      <div
+        v-if="alpine?.backToTop"
+        class="back-to-top"
+      >
+        <ProseA @click.prevent.stop="onBackToTop">
+          {{ alpine?.backToTop?.text || 'Back to top' }}
+          <Icon :name="alpine?.backToTop?.icon || 'material-symbols:arrow-upward'" />
+        </ProseA>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent()
+const route = useRoute()
+const alpine = useAppConfig().alpine
+
+const article = ref<HTMLElement | null>(null)
+
+if (page.value) {
+  const linkArray = []
+  const metaArray = []
+  
+  if (page.value.cover) {
+    metaArray.push({ property: 'og:image', content: page.value.cover })
+  }
+  if (page.value.canonical) {
+    linkArray.push({ rel: 'canonical', href: page.value.canonical })
+  }
+  useHead({
+    meta: metaArray,
+    link: linkArray
+  })
+}
+
+const parentPath = computed(
+  () => {
+    const pathTabl = route.path.split('/')
+    pathTabl.pop()
+    return pathTabl.join('/')
+  }
+)
+
+const onBackToTop = () => {
+  article.value?.scrollIntoView({
+    behavior: 'smooth'
+  })
+}
+</script>
+
+<style scoped lang="ts">
+css({
+  article: {
+    maxWidth: '{alpine.readableLine}',
+    mx: 'auto',
+    py: '{space.4}',
+    '@sm': {
+      py: '{space.12}',
+    },
+    '.back': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      fontSize: '{text.lg.fontSize}',
+      borderBottom: '1px solid {elements.border.secondary.static}',
+      '& :deep(svg)': {
+        width: '{size.16}',
+        height: '{size.16}',
+        marginRight: '{space.2}'
+      }
+    },
+    header: {
+      marginTop: '{space.16}',
+      marginBottom: '{space.12}',
+    },
+    '.title': {
+      fontSize: '{text.5xl.fontSize}',
+      lineHeight: '{text.5xl.lineHeight}',
+      fontWeight: '{fontWeight.semibold}',
+      marginBottom: '{space.4}'
+    },
+    time: {
+      color: '{elements.text.secondary.color.static}'
+    },
+    '.prose': {
+      '.back-to-top': {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        width: '100%',
+        a: {
+          cursor: 'pointer',
+          fontSize: '{text.lg.fontSize}'
+        }
+      },
+      '& :deep(h1)': {
+        display: 'none'
+      },
+    }
+  }
+})
+</style>

package/layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+  <main>
+    <slot />
+  </main>
+</template>
+

package/layouts/page.vue

@@ -0,0 +1,5 @@
+<template>
+  <main>
+    <slot />
+  </main>
+</template>

package/nuxt.config.ts

@@ -0,0 +1,90 @@
+import { createResolver, logger, defineNuxtModule } from '@nuxt/kit'
+import { $fetch } from 'ofetch'
+import { version } from './package.json'
+
+const { resolve } = createResolver(import.meta.url)
+
+// That allows to overwrite these dependencies paths via `.env` for local development
+const envModules = {
+  tokens: process?.env?.THEME_DEV_TOKENS_PATH || '@nuxt-themes/tokens',
+  elements: process?.env?.THEME_DEV_ELEMENTS_PATH || '@nuxt-themes/elements',
+  studio: process?.env?.THEME_DEV_STUDIO_PATH || '@nuxthq/studio',
+  typography: process?.env?.THEME_DEV_TYPOGRAPHY_PATH || '@nuxt-themes/typography'
+}
+
+const updateModule = defineNuxtModule({
+  meta: {
+    name: '@nuxt-themes/alpine'
+  },
+  setup (_, nuxt) {
+    if (nuxt.options.dev) {
+      $fetch('https://registry.npmjs.org/@nuxt-themes/alpine/latest').then((release) => {
+        if (release.version > version) {
+          logger.info(`A new version of Alpine (v${release.version}) is available: https://github.com/nuxt-themes/alpine/releases/latest`)
+        }
+      }).catch(() => {})
+    }
+  }
+})
+
+// https://v3.nuxtjs.org/api/configuration/nuxt.config
+export default defineNuxtConfig({
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en'
+      }
+    }
+  },
+  extends: [envModules.typography, envModules.elements],
+  runtimeConfig: {
+    public: {
+      FORMSPREE_URL: process.env.FORMSPREE_URL
+    }
+  },
+  pages: true,
+  modules: [
+    envModules.tokens,
+    envModules.studio,
+    '@nuxt/content',
+    updateModule as any
+  ],
+  components: [
+    { path: resolve('./components'), global: true },
+    { path: resolve('./components/content'), global: true },
+    { path: resolve('./components/data-entry'), global: true }
+  ],
+  css: [
+    resolve('./assets/main.css'),
+  ],
+  colorMode: {
+    classSuffix: ''
+  },
+  pinceau: {
+    studio: true
+  },
+  content: {
+    documentDriven: true,
+    navigation: {
+      fields: ['navTitle']
+    },
+    highlight: {
+      theme: {
+        default: 'github-light',
+        dark: 'github-dark'
+      },
+      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini', 'c', 'cpp']
+    }
+  },
+  experimental: {
+    inlineSSRStyles: false
+  },
+  typescript: {
+    includeWorkspace: true
+  },
+  nitro: {
+    prerender: {
+      ignore: ['/__pinceau_tokens_config.json', '/__pinceau_tokens_schema.json']
+    }
+  },
+})