@4verburga/alpine-spanishplus 1.6.6

package/components/DocumentDrivenNotFound.vue

@@ -0,0 +1,49 @@
+<template>
+  <section>
+    <p class="message">
+      This page could not be found
+    </p>
+
+    <p class="status">
+      404
+    </p>
+
+    <NuxtLink to="/">
+      Back to homepage
+      <Icon name="ph:arrow-right" />
+    </NuxtLink>
+  </section>
+</template>
+
+<style scoped lang="ts">
+css({
+  section: {
+    minHeight: '50vh',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '.message': {
+      fontSize: '{text.3xl.fontSize}',
+      lineHeight: '{text.3xl.lineHeight}',
+      fontWeight: '{fontWeight.medium}',
+    },
+    '.status': {
+      text: '6xl',
+      my: '{space.12}'
+    },
+    a: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      '.icon': {
+        position: 'absolute',
+        right: 'calc(0px - {space.1})',
+        width: '{space.5}',
+        height: '{space.5}',
+        transform: 'translateX(100%)',
+      }, 
+    }
+  }
+})
+</style>

package/components/MainNav.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+const { navigation } = useContent()
+
+const emits = defineEmits(['linkClick'])
+
+function handleClick() {
+  emits('linkClick')
+}
+</script>
+
+<template>
+  <nav>
+    <ul>
+      <li
+        v-for="link of navigation"
+        :key="link._path"
+      >
+        <NuxtLink
+          :to="link._path"
+          @click="handleClick"
+        >
+          <span class="underline-fx" />
+          {{ link.title }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style scoped lang="ts">
+css({
+  nav: {
+    ul: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      justifyContent: 'center',
+      gap: '{space.4}',
+      '@sm': {
+        flexDirection: 'row',
+        gap: '{space.8}',
+      },
+      a: {
+        position: 'relative',
+        '&.router-link-active': {
+          color: '{color.primary.500}'
+        },
+        '.underline-fx': {
+          position: 'absolute',
+          bottom: '-4px',
+          width: 0,
+          height: '1px',
+          backgroundColor: 'currentColor',
+          transition: 'width 200ms ease-in-out',
+          'a:hover &&': {
+            width: '100%'
+          }
+        }
+      },
+
+    }
+  }
+})
+</style>

package/components/SocialIcons.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+const props = defineProps({
+  socials: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const builtInSocials = ['twitter', 'facebook', 'instagram', 'youtube', 'github', 'medium']
+
+const icons = computed<any>(() => {
+  return Object.entries(props.socials)
+    .map(([key, value]) => {
+      if (typeof value === 'object') {
+        return value
+      } else if (typeof value === 'string' && value && builtInSocials.includes(key)) {
+        return {
+          href: `https://${key}.com/${value}`,
+          icon: `uil:${key}`,
+          label: value
+        }
+      } else {
+        return null
+      }
+    })
+    .filter(Boolean)
+})
+
+const getRel = (icon:any) => {
+  const base = ['noopener', 'noreferrer']
+  if (icon.rel) {
+    base.push(icon.rel)
+  }
+  return base.join(' ')
+}
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-multiple-template-root -->
+  <NuxtLink
+    v-for="icon in icons"
+    :key="icon.label"
+    :rel="getRel(icon)"
+    :title="icon.label"
+    :aria-label="icon.label"
+    :href="icon.href"
+    target="_blank"
+  >
+    <Icon v-if="icon.icon" :name="icon.icon" />
+  </NuxtLink>
+</template>
+
+<style scoped lang="ts">
+css({
+  a: {
+    '--social-icon-size': '24px',
+    width: 'var(--social-icon-size)',
+    height: 'var(--social-icon-size)',
+    display: 'flex',
+    ':hover': {
+      // TODO: why prose links is not yellow, should be primary
+      color: '{color.primary.500}',
+    },
+    svg: {
+      width: '100%',
+      height: '100%',
+    }
+  }
+})
+</style>

package/components/content/ArticleIndexEntry.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { useContentPreview } from '#imports'
+
+type Article = {
+  _path: string
+  title: string
+  date: string
+  description: string
+  badges?: { bg: string, text: string, content: string }[]
+}
+
+const props = defineProps({
+  article: {
+    type: Object,
+    required: true,
+    validator: (value: Article) => {
+      if (value?._path && value.title) { return true }
+      return false
+    }
+  },
+  featured: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const id = computed(() => {
+  // @ts-ignore
+  return (process.dev || useContentPreview()?.isEnabled()) ? props.article?._id : undefined
+})
+</script>
+
+<template>
+  <article
+    v-if="article._path && article.title"
+    :class="{ 'layout': featured }"
+
+  >
+    <div class="content">
+      <NuxtLink
+        :to="article._path"
+        class="headline"
+      >
+        <h1>
+          {{ article.title }}
+        </h1>
+      </NuxtLink>
+      <time>
+        {{ formatDate(article.date) }}
+      </time>
+    </div>
+  </article>
+</template>
+
+<style scoped lang="ts">
+css({
+  article: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '{space.4}',
+    '&.featured': {
+      '@md': {
+        flexDirection: 'row',
+        gap: '{space.8}',
+      }
+    },
+    img: {
+      width: '100%',
+      aspectRatio: '16 / 9',
+      objectFit: 'cover',
+      borderRadius: '{radii.md}',
+    },
+    '.image': {
+      flex: 1,
+      div: {
+        position: 'absolute',
+        display: 'flex',
+        flexWrap: true,
+        gap: '{space.2}',
+        marginTop: '{space.2}',
+        marginLeft: '{space.2}',
+        span: {
+          padding: '{space.1}',
+          borderRadius: '{radii.sm}',
+          text: 'xs',
+          fontWeight: 700
+        }
+      }
+    },
+    '.content': {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      '.headline': {
+        text: '2xl',
+        marginBottom: '{space.2}',
+        fontWeight: '{fontWeight.semibold}',
+        lineClamp: 2,
+        '.featured &&': {
+          text: '4xl',
+          lineClamp: 3,
+        },
+      },
+      '.description': {
+        marginBottom: '{space.4}',
+        lineClamp: 2,
+        '.featured &&': {
+          lineClamp: 4,
+        }
+      },
+      time: {
+        text: 'sm',
+        // TODO: add secondary color token
+        color: '{color.gray.500}',
+        '@dark': {
+          color: '{color.gray.500}',
+        }
+      }
+    },
+  }
+})
+</style>

package/components/content/ArticlesIndex.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { withTrailingSlash } from 'ufo'
+import ArticleIndexEntry from './ArticleIndexEntry.vue';
+
+const props = defineProps({
+  path: {
+    type: String,
+    default: 'articles'
+  }
+})
+
+// @ts-ignore
+const { data: _articles } = await useAsyncData(props.path, async () => await queryContent(withTrailingSlash(props.path)).sort({ date: -1 }).find())
+
+// create new fields year and month
+// const articles = computed(() => _articles.value || [])
+const articles = computed(() => _articles.value.map((article) => {
+  const date = new Date(article.date)
+  article.year = date.getFullYear()
+  article.month = date.getMonth()
+  return article
+}) || [])
+
+
+</script>
+
+<template>
+  <!-- TODO: group the outputs of article._path on each year and month -->
+  <ArticleIndexEntry  v-for="(article, index) in articles" :key="index" :article="article" />
+  <!-- <d>DEBUG: articulo de indice 0 {{articles[0]}}</d> -->
+
+</template>
+
+<style scoped lang="ts">
+css({
+  '.articles-list': {
+    '@sm': {
+      px: '{space.12}',
+    },
+    '@md': {
+      px: 0,
+    },
+    '.featured': {
+      my: '{space.12}',
+      '@md': {
+        my: '{space.8}',
+      }
+    },
+    '.layout': {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(1, minmax(0, 1fr))',
+      gap: '{space.12}',
+      '@md': {
+        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+        gap: '{space.8}',
+      },
+      '@lg': {
+        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+      },
+    }
+  },
+  '.tour': {
+    minHeight: '30vh',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+})
+</style>

package/components/content/ArticlesList.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { withTrailingSlash } from 'ufo'
+
+const props = defineProps({
+  path: {
+    type: String,
+    default: 'articles'
+  }
+})
+
+// @ts-ignore
+const { data: _articles } = await useAsyncData(props.path, async () => await queryContent(withTrailingSlash(props.path)).sort({ date: -1 }).find())
+
+const articles = computed(() => _articles.value || [])
+</script>
+
+<template>
+  <div v-if="articles?.length" class="articles-list">
+    <div class="featured">
+      <ArticlesListItem :article="articles[0]" :featured="true" />
+    </div>
+    <div class="layout">
+      <ArticlesListItem v-for="(article, index) in articles.slice(1)" :key="index" :article="article" />
+    </div>
+  </div>
+  <div v-else class="tour">
+    <p>Seems like there are no articles yet.</p>
+    <p>
+      You can start by
+      <!-- eslint-disable-next-line -->
+      <ProseA href="https://alpine.nuxt.space/articles/write-articles">creating</ProseA> one in the <ProseCodeInline>articles</ProseCodeInline> folder.
+    </p>
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.articles-list': {
+    '@sm': {
+      px: '{space.12}',
+    },
+    '@md': {
+      px: 0,
+    },
+    '.featured': {
+      my: '{space.12}',
+      '@md': {
+        my: '{space.8}',
+      }
+    },
+    '.layout': {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(1, minmax(0, 1fr))',
+      gap: '{space.12}',
+      '@md': {
+        gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+        gap: '{space.8}',
+      },
+      '@lg': {
+        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+      },
+    }
+  },
+  '.tour': {
+    minHeight: '30vh',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+})
+</style>

package/components/content/ArticlesListItem.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { useContentPreview } from '#imports'
+
+type Article = {
+  _path: string
+  title: string
+  date: string
+  description: string
+  badges?: { bg: string, text: string, content: string }[]
+}
+
+const props = defineProps({
+  article: {
+    type: Object,
+    required: true,
+    validator: (value: Article) => {
+      if (value?._path && value.title) { return true }
+      return false
+    }
+  },
+  featured: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const id = computed(() => {
+  // @ts-ignore
+  return (process.dev || useContentPreview()?.isEnabled()) ? props.article?._id : undefined
+})
+</script>
+
+<template>
+  <article
+    v-if="article._path && article.title"
+    :class="{ 'featured': featured }"
+    :data-content-id="id"
+  >
+    <div v-if="article.cover" class="image">
+      <div v-if="article?.badges">
+        <span
+          v-for="(badge, index) in article.badges"
+          :key="index"
+          :style="{
+            backgroundColor: badge?.bg || 'rgba(0, 0, 0, 0.3)',
+            color: badge?.color || 'white'
+          }"
+        >
+          {{ typeof badge === 'string' ? badge : badge.content }}
+        </span>
+      </div>
+      <NuxtLink :to="article._path">
+        <NuxtImg
+          :src="article.cover"
+          :alt="article.title"
+          width="16"
+          height="9"
+        />
+      </NuxtLink>
+    </div>
+
+    <div class="content">
+      <NuxtLink
+        :to="article._path"
+        class="headline"
+      >
+        <h1>
+          {{ article.title }}
+        </h1>
+      </NuxtLink>
+
+      <p class="description">
+        {{ article.description }}
+      </p>
+      <time>
+        {{ formatDate(article.date) }}
+      </time>
+    </div>
+  </article>
+</template>
+
+<style scoped lang="ts">
+css({
+  article: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '{space.4}',
+    '&.featured': {
+      '@md': {
+        flexDirection: 'row',
+        gap: '{space.8}',
+      }
+    },
+    img: {
+      width: '100%',
+      aspectRatio: '16 / 9',
+      objectFit: 'cover',
+      borderRadius: '{radii.md}',
+    },
+    '.image': {
+      flex: 1,
+      div: {
+        position: 'absolute',
+        display: 'flex',
+        flexWrap: true,
+        gap: '{space.2}',
+        marginTop: '{space.2}',
+        marginLeft: '{space.2}',
+        span: {
+          padding: '{space.1}',
+          borderRadius: '{radii.sm}',
+          text: 'xs',
+          fontWeight: 700
+        }
+      }
+    },
+    '.content': {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      '.headline': {
+        text: '2xl',
+        marginBottom: '{space.2}',
+        fontWeight: '{fontWeight.semibold}',
+        lineClamp: 2,
+        '.featured &&': {
+          text: '4xl',
+          lineClamp: 3,
+        },
+      },
+      '.description': {
+        marginBottom: '{space.4}',
+        lineClamp: 2,
+        '.featured &&': {
+          lineClamp: 4,
+        }
+      },
+      time: {
+        text: 'sm',
+        // TODO: add secondary color token
+        color: '{color.gray.500}',
+        '@dark': {
+          color: '{color.gray.500}',
+        }
+      }
+    },
+  }
+})
+</style>