@4verburga/alpine-spanishplus 2.0.0-dev.7ab3971 → 2.0.0-dev.838f140

package/components/AppFooter.vue

@@ -24,6 +24,9 @@ const alpine = useAppConfig().alpine
       <div v-if="alpine.socials && Object.entries(alpine.socials)" class="social">
         <SocialIcons :socials="alpine.socials" />
       </div>
+      <div class="language-switch">
+        <LanguageSwitcher />
+      </div>
       <div class="color-mode-switch">
         <ColorModeSwitch />
       </div>

package/components/AppHeader.vue

@@ -7,7 +7,7 @@ const show = ref(false)
 <template>
   <header :class="alpine.header.position || 'left'">
     <div class="menu">
-      <button @click="(show = !show)" aria-label="Navigation Menu">
+      <button @click="(show = !show)" :aria-label="$t('nav.menu')">
         <svg width="24" height="24" viewBox="0 0 68 68" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path d="M8 34C8 32.1362 8 31.2044 8.30448 30.4693C8.71046 29.4892 9.48915 28.7105 10.4693 28.3045C11.2044 28 12.1362 28 14 28C15.8638 28 16.7956 28 17.5307 28.3045C18.5108 28.7105 19.2895 29.4892 19.6955 30.4693C20 31.2044 20 32.1362 20 34C20 35.8638 20 36.7956 19.6955 37.5307C19.2895 38.5108 18.5108 39.2895 17.5307 39.6955C16.7956 40 15.8638 40 14 40C12.1362 40 11.2044 40 10.4693 39.6955C9.48915 39.2895 8.71046 38.5108 8.30448 37.5307C8 36.7956 8 35.8638 8 34Z" />
           <path d="M28 34C28 32.1362 28 31.2044 28.3045 30.4693C28.7105 29.4892 29.4892 28.7105 30.4693 28.3045C31.2044 28 32.1362 28 34 28C35.8638 28 36.7956 28 37.5307 28.3045C38.5108 28.7105 39.2895 29.4892 39.6955 30.4693C40 31.2044 40 32.1362 40 34C40 35.8638 40 36.7956 39.6955 37.5307C39.2895 38.5108 38.5108 39.2895 37.5307 39.6955C36.7956 40 35.8638 40 34 40C32.1362 40 31.2044 40 30.4693 39.6955C29.4892 39.2895 28.7105 38.5108 28.3045 37.5307C28 36.7956 28 35.8638 28 34Z" />

package/components/ColorModeSwitch.vue

@@ -10,19 +10,19 @@ const onClick = () => {
 </script>
 
 <template>
-  <button aria-label="Color Mode" @click="onClick">
+  <button :aria-label="$t('colorMode.label')" @click="onClick">
     <ColorScheme>
       <template v-if="colorMode.preference === 'dark'">
         <Icon name="uil:moon" />
-        <span class="sr-only">Dark mode</span>
+        <span class="sr-only">{{ $t('colorMode.dark') }}</span>
       </template>
       <template v-else-if="colorMode.preference === 'light'">
         <Icon name="uil:sun" />
-        <span class="sr-only">Light mode</span>
+        <span class="sr-only">{{ $t('colorMode.light') }}</span>
       </template>
       <template v-else>
         <Icon name="uil:desktop" />
-        <span class="sr-only">System mode</span>
+        <span class="sr-only">{{ $t('colorMode.system') }}</span>
       </template>
     </ColorScheme>
   </button>

package/components/DocumentDrivenNotFound.vue

@@ -1,15 +1,15 @@
 <template>
   <section>
     <p class="message">
-      This page could not be found
+      {{ $t('notFound.message') }}
     </p>
 
     <p class="status">
-      404
+      {{ $t('notFound.code') }}
     </p>
 
     <NuxtLink to="/">
-      Back to homepage
+      {{ $t('notFound.backHome') }}
       <Icon name="ph:arrow-right" />
     </NuxtLink>
   </section>

package/components/LanguageSwitcher.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const { locale, locales, setLocale } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+
+const availableLocales = computed(() =>
+  locales.value.filter((l: any) => l.code !== locale.value)
+)
+</script>
+
+<template>
+  <div class="language-switcher">
+    <NuxtLink
+      v-for="loc in availableLocales"
+      :key="loc.code"
+      :to="switchLocalePath(loc.code)"
+      class="locale-link"
+    >
+      {{ loc.code.toUpperCase() }}
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.language-switcher': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '{space.2}',
+    '.locale-link': {
+      fontSize: '{text.sm.fontSize}',
+      fontWeight: '{fontWeight.medium}',
+      padding: '{space.1} {space.2}',
+      borderRadius: '{radii.md}',
+      '&:hover': {
+        color: '{color.primary.500}',
+      }
+    }
+  }
+})
+</style>

package/components/MainNav.vue

@@ -1,18 +1,28 @@
 <script lang="ts" setup>
 const { navigation } = useContent()
+const { locale } = useI18n()
 
 const emits = defineEmits(['linkClick'])
 
 function handleClick() {
   emits('linkClick')
 }
+
+const localizedNavigation = computed(() => {
+  if (!navigation.value) return []
+  // Find the locale subtree in navigation (e.g. /es or /en)
+  const localeRoot = navigation.value.find(
+    (item: any) => item._path === `/${locale.value}`
+  )
+  return localeRoot?.children || navigation.value
+})
 </script>
 
 <template>
   <nav>
     <ul>
       <li
-        v-for="link of navigation"
+        v-for="link of localizedNavigation"
         :key="link._path"
       >
         <NuxtLink

package/components/content/ArticlesIndex.vue

@@ -2,6 +2,8 @@
 import { withTrailingSlash } from 'ufo'
 import ArticleIndexEntry from './ArticleIndexEntry.vue';
 
+const { locale } = useI18n()
+
 const props = defineProps({
   path: {
     type: String,
@@ -9,8 +11,10 @@ const props = defineProps({
   }
 })
 
+const contentPath = computed(() => `${locale.value}/${props.path}`)
+
 // @ts-ignore
-const { data: _articles } = await useAsyncData(props.path, async () => await queryContent(withTrailingSlash(props.path)).sort({ date: -1 }).find())
+const { data: _articles } = await useAsyncData(contentPath.value, async () => await queryContent(withTrailingSlash(contentPath.value)).sort({ date: -1 }).find())
 
 // create new fields year and month
 // const articles = computed(() => _articles.value || [])

package/components/content/ArticlesList.vue

@@ -5,6 +5,7 @@ import { useRouter, useRoute } from 'vue-router'
 
 const router = useRouter()
 const route = useRoute()
+const { locale } = useI18n()
 
 const props = defineProps({
   path: {
@@ -14,10 +15,11 @@ const props = defineProps({
 })
 
 const currentYear = ref(parseInt(route.query.year as string) || new Date().getFullYear())
-const years = ref([2025, 2024, 2023]) // Add more years as needed
+const startYear = 2023
+const years = ref(Array.from({ length: new Date().getFullYear() - startYear + 1 }, (_, i) => new Date().getFullYear() - i))
 
 const fetchArticles = async (year: number) => {
-  const path = `${props.path}/${year}`
+  const path = `${locale.value}/${props.path}/${year}`
   const { data } = await useAsyncData(path, async () => await queryContent(withTrailingSlash(path)).sort({ date: -1 }).find())
   return data
 }
@@ -70,7 +72,7 @@ const yearButtons = computed(() => {
       </div>
     </div>
     <div v-else class="tour">
-      <p>Seems like there are no articles for {{ currentYear }}.</p>
+      <p>{{ $t('articles.empty', { year: currentYear }) }}</p>
     </div>
     <div class="spacing"> </div>
     <div class="navigation-buttons">

package/components/content/ContactForm.vue

@@ -2,6 +2,7 @@
 import type { PropType } from 'vue'
 import type { Field } from '../../types/contact'
 const alpine = useAppConfig().alpine
+const { t } = useI18n()
 
 const { FORMSPREE_URL } = useRuntimeConfig().public
 
@@ -11,56 +12,59 @@ if (!FORMSPREE_URL) {
 
 const status = ref()
 
+const defaultFields = computed<Field[]>(() => [
+  {
+    type: 'text',
+    model: 'name',
+    name: t('form.fields.name.label'),
+    placeholder: t('form.fields.name.placeholder'),
+    required: true,
+    layout: 'default'
+  },
+  {
+    type: 'email',
+    model: 'email',
+    name: t('form.fields.email.label'),
+    placeholder: t('form.fields.email.placeholder'),
+    required: true,
+    layout: 'default'
+  },
+  {
+    type: 'text',
+    model: 'text',
+    name: t('form.fields.subject.label'),
+    required: false,
+    layout: 'default'
+  },
+  {
+    type: 'textarea',
+    model: 'message',
+    name: t('form.fields.message.label'),
+    placeholder: t('form.fields.message.placeholder'),
+    required: true,
+    layout: 'big'
+  }
+])
+
 const props = defineProps({
   submitButtonText: {
     type: String,
-    default: 'Send message'
+    default: ''
   },
   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'
-      }
-    ]
+    default: null
   }
 })
 
-const form = reactive(props.fields.map(v => ({ ...v, data: '' })))
+const activeFields = computed(() => props.fields || defaultFields.value)
+const form = reactive(activeFields.value.map(v => ({ ...v, data: '' })))
 
 const onSend = async (e: any) => {
   e.preventDefault()
   const data = new FormData(e.target)
 
-  status.value = 'Sending...'
+  status.value = t('form.sending')
 
   fetch(e.target.action, {
     method: e.target.method,
@@ -101,7 +105,7 @@ const onSend = async (e: any) => {
     </div>
     <div>
       <Button type="submit" :disabled="!FORMSPREE_URL">
-        {{ status ? status : submitButtonText }}
+        {{ status ? status : (submitButtonText || $t('form.submitButton')) }}
       </Button>
     </div>
   </form>

package/composables/date.ts

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

package/i18n/locales/en.json

@@ -0,0 +1,55 @@
+{
+  "colorMode": {
+    "label": "Color Mode",
+    "dark": "Dark mode",
+    "light": "Light mode",
+    "system": "System mode"
+  },
+  "nav": {
+    "menu": "Navigation Menu"
+  },
+  "notFound": {
+    "message": "This page could not be found",
+    "code": "404",
+    "backHome": "Back to homepage"
+  },
+  "article": {
+    "back": "Back",
+    "byAuthor": "By",
+    "backToTop": "Back to top"
+  },
+  "articles": {
+    "empty": "Seems like there are no articles for {year}."
+  },
+  "hero": {
+    "title": "Hero title",
+    "description": "Hero description"
+  },
+  "form": {
+    "submitButton": "Send message",
+    "sending": "Sending...",
+    "fields": {
+      "name": {
+        "label": "Name",
+        "placeholder": "Your name"
+      },
+      "email": {
+        "label": "Email",
+        "placeholder": "Your email"
+      },
+      "subject": {
+        "label": "Subject"
+      },
+      "message": {
+        "label": "Message",
+        "placeholder": "Your message"
+      }
+    }
+  },
+  "footer": {
+    "message": "Follow me on"
+  },
+  "app": {
+    "description": "The minimalist blog theme"
+  }
+}

package/i18n/locales/es.json

@@ -0,0 +1,55 @@
+{
+  "colorMode": {
+    "label": "Modo de Color",
+    "dark": "Modo oscuro",
+    "light": "Modo claro",
+    "system": "Modo del sistema"
+  },
+  "nav": {
+    "menu": "Menú de Navegación"
+  },
+  "notFound": {
+    "message": "Esta página no pudo ser encontrada",
+    "code": "404",
+    "backHome": "Volver al inicio"
+  },
+  "article": {
+    "back": "Volver",
+    "byAuthor": "Por",
+    "backToTop": "Volver arriba"
+  },
+  "articles": {
+    "empty": "Parece que no hay artículos para {year}."
+  },
+  "hero": {
+    "title": "Título del héroe",
+    "description": "Descripción del héroe"
+  },
+  "form": {
+    "submitButton": "Enviar mensaje",
+    "sending": "Enviando...",
+    "fields": {
+      "name": {
+        "label": "Nombre",
+        "placeholder": "Tu nombre"
+      },
+      "email": {
+        "label": "Correo",
+        "placeholder": "Tu correo"
+      },
+      "subject": {
+        "label": "Asunto"
+      },
+      "message": {
+        "label": "Mensaje",
+        "placeholder": "Tu mensaje"
+      }
+    }
+  },
+  "footer": {
+    "message": "Sígueme en"
+  },
+  "app": {
+    "description": "El tema minimalista para blogs"
+  }
+}

package/layouts/article.vue

@@ -7,7 +7,7 @@
     >
       <Icon name="ph:arrow-left" />
       <span>
-        Back
+        {{ $t('article.back') }}
       </span>
     </NuxtLink>
     <header>
@@ -24,7 +24,7 @@
         {{ formatDate(page.date) }}
       </time>
         <span v-if="page?.author?.name" class="author">
-          &nbsp;•&nbsp;Por <strong>{{ page.author.name }}</strong>
+          &nbsp;•&nbsp;{{ $t('article.byAuthor') }} <strong>{{ page.author.name }}</strong>
         </span>
     </header>
 
@@ -35,7 +35,7 @@
         class="back-to-top"
       >
         <ProseA @click.prevent.stop="onBackToTop">
-          {{ alpine?.backToTop?.text || 'Back to top' }}
+          {{ alpine?.backToTop?.text || $t('article.backToTop') }}
           <Icon :name="alpine?.backToTop?.icon || 'material-symbols:arrow-upward'" />
         </ProseA>
       </div>

package/nuxt.config.ts

@@ -29,13 +29,7 @@ const updateModule = defineNuxtModule({
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  app: {
-    head: {
-      htmlAttrs: {
-        lang: 'en'
-      }
-    }
-  },
+  app: {},
   extends: [envModules.typography, envModules.elements],
   runtimeConfig: {
     public: {
@@ -47,8 +41,23 @@ export default defineNuxtConfig({
     envModules.tokens,
     envModules.studio,
     '@nuxt/content',
+    '@nuxtjs/i18n',
     updateModule as any
   ],
+  i18n: {
+    locales: [
+      { code: 'es', language: 'es-PE', name: 'Español', file: 'es.json' },
+      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' }
+    ],
+    defaultLocale: 'es',
+    strategy: 'prefix',
+    langDir: 'i18n/locales',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_locale',
+      redirectOn: 'root'
+    }
+  },
   components: [
     { path: resolve('./components'), global: true },
     { path: resolve('./components/content'), global: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4verburga/alpine-spanishplus",
-  "version": "2.0.0-dev.7ab3971",
+  "version": "2.0.0-dev.838f140",
   "type": "module",
   "repository": {
     "type": "git",
@@ -12,6 +12,7 @@
     "assets",
     "components",
     "composables",
+    "i18n",
     "layouts",
     "types",
     "app.config.ts",
@@ -35,6 +36,7 @@
     "@nuxt-themes/typography": "^0.11.0",
     "@nuxt/content": "^2.13.0",
     "@nuxthq/studio": "^0.14.1",
+    "@nuxtjs/i18n": "^8.5.5",
     "@vueuse/core": "^10.7.2",
     "ufo": "^1.5.4"
   },