@4verburga/alpine-spanishplus 1.6.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 NuxtLabs SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+[![Alpine](./.starters/default/public/social-card-preview.png)](https://alpine.nuxt.space)
+
+# Alpine
+
+[![npm version][npm-version-src]][npm-version-href]
+[![License][license-src]][license-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+[![Nuxt Studio][nuxt-studio-src]][nuxt-studio-href]
+[![Volta][volta-src]][volta-href]
+
+The minimalist blog theme, powered by [Nuxt](https://nuxt.com).
+
+
+- [📸 Online demo](https://alpine.nuxt.space)
+- [⚡️ Play on StackBlitz](https://stackblitz.com/github/nuxt-themes/alpine-starter)
+
+## Features
+
+- Start from a **profile page**, scale to a **complete blog**!
+- An [open source blog theme](https://github.com/nuxt-themes/alpine) powered by [Nuxt Content](https://content.nuxtjs.org), editable from [Nuxt Studio](https://nuxt.studio).
+- Write pages in Markdown and Vue components with the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
+- Use [**30+ built-in**](https://elements.nuxt.space) components in your Markdown pages.
+
+## Quick Start
+
+```bash
+npx nuxi@latest init -t themes/alpine
+```
+
+## Contributing 🙏
+
+1. Clone this repository
+2. Install dependencies using `pnpm install`
+3. Run `pnpm prepare` to generate type stubs.
+4. Use `pnpm dev` to start [playground](./playground) in development mode.
+
+## License
+
+[MIT](./LICENSE)
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@nuxt-themes/alpine/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@nuxt-themes/alpine
+
+[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxt-themes/alpine.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@nuxt-themes/alpine
+
+[license-src]: https://img.shields.io/github/license/nuxt-themes/alpine.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://github.com/nuxt-themes/alpine/blob/main/LICENSE
+
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?&logo=nuxt.js
+[nuxt-href]: https://nuxt.com
+
+[nuxt-studio-src]: https://img.shields.io/badge/Open%20in%20Nuxt%20Studio-18181B?&logo=nuxt.js&logoColor=3BB5EC
+[nuxt-studio-href]: https://nuxt.studio/themes/alpine
+
+[volta-src]: https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg
+[volta-href]: https://volta.net/nuxt-themes/alpine?utm_source=readme_alpine

package/app.config.ts

@@ -0,0 +1,45 @@
+export default defineAppConfig({
+  alpine: {
+    title: 'Alpine',
+    description: 'The minimalist blog theme',
+    image: {
+      src: '/social-card-preview.png',
+      alt: 'An image showcasing my project.',
+      width: 400,
+      height: 300
+    },
+    header: {
+      position: 'right',
+      logo: {
+        path: '/logo.svg',
+        pathDark: '/logo-dark.svg',
+        alt: 'alpine'
+      }
+    },
+    footer: {
+      credits: {
+        enabled: true,
+        text: 'Alpine',
+        repository: 'https://www.github.com/nuxt-themes/alpine'
+      },
+      navigation: true,
+      alignment: 'center',
+      message: 'Follow me on'
+    },
+    socials: {
+      twitter: '',
+      instagram: '',
+      github: '',
+      facebook: '',
+      medium: '',
+      youtube: ''
+    },
+    form: {
+      successMessage: 'Message sent. Thank you!'
+    },
+    backToTop: {
+      text: 'Back to top',
+      icon: 'material-symbols:arrow-upward'
+    }
+  }
+})

package/app.vue

@@ -0,0 +1,11 @@
+<template>
+  <AppLayout>
+    <NuxtPage />
+  </AppLayout>
+</template>
+
+<style>
+html {
+  font-family: $dt('font.sans');
+}
+</style>

package/assets/main.css

@@ -0,0 +1,20 @@
+body {
+  background-color: $dt('alpine.body.backgroundColor');
+  color: $dt('alpine.body.color');
+}
+
+/* Color scheme images helper classes */
+.light-img {
+  display: block;
+}
+.dark-img {
+  display: none;
+}
+@dark {
+  .dark-img {
+    display: block;
+  }
+  .light-img {
+    display: none;
+  }
+}

package/components/AppFooter.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+const alpine = useAppConfig().alpine
+</script>
+
+<template>
+  <footer
+    :class="[
+      alpine.footer.alignment
+    ]"
+  >
+    <NuxtLink v-if="alpine.footer?.credits?.enabled" class="credits" :to="alpine.footer.credits.repository">
+      {{ alpine.footer?.credits?.text }}
+    </NuxtLink>
+
+    <div v-if="alpine.footer.navigation" class="navigation">
+      <MainNav />
+    </div>
+
+    <p v-if="alpine.footer?.message" class="message">
+      {{ alpine.footer.message }}
+    </p>
+
+    <div class="icons">
+      <div v-if="alpine.socials && Object.entries(alpine.socials)" class="social">
+        <SocialIcons :socials="alpine.socials" />
+      </div>
+      <div class="color-mode-switch">
+        <ColorModeSwitch />
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped lang="ts">
+css({
+  footer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: '{space.24}',
+    py: '{space.8}',
+    '&.left': {
+      alignItems: 'flex-start'
+    },
+    '&.right': {
+      alignItems: 'flex-end'
+    },
+    '@md': {
+      minHeight: '{space.36}',
+    },
+    '.credits': {
+      fontSize: '{text.3xl.fontSize}',
+      lineHeight: '{text.3xl.lineHeight}',
+      fontWeight: '{fontWeight.bold}',
+      marginBottom: '{space.4}',
+    },
+    '.navigation': {
+      display: 'none',
+      '@sm': {
+        display: 'flex',
+        marginBottom: '{space.8}',
+        fontSize: '{text.base.fontSize}',
+        lineHeight: '{text.base.lineHeight}',
+        fontWeight: '{fontWeight.medium}',
+      }
+    },
+    '.message': {
+      textAlign: 'center',
+      marginBottom: '{space.4}',
+    },
+    '.icons': {
+      display: 'grid',
+      width: '100%',
+      gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+      gap: '{space.4}',
+      '.left &&': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+      '.right &&': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexDirection: 'row-reverse'
+      },
+      '.social': {
+        gridColumn: 'span 12 / span 12',
+        display: 'flex',
+        justifyContent: 'center',
+        gap: '{space.4}',
+        '@xs': {
+          gridColumn: 'span 4 / span 4',
+          gridColumnStart: 5,
+        }
+      },
+      '.color-mode-switch': {
+        gridColumn: 'span 12 / span 12',
+        display: 'flex',
+        justifyContent: 'center',
+        '@xs': {
+          gridColumn: 'span 2 / span 2',
+          gridColumnStart: 11,
+          justifyContent: 'flex-end',
+        }
+      }
+    },
+  }
+})
+</style>

package/components/AppHeader.vue

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+const alpine = useAppConfig().alpine
+
+const show = ref(false)
+</script>
+
+<template>
+  <header :class="alpine.header.position || 'left'">
+    <div class="menu">
+      <button @click="(show = !show)" aria-label="Navigation 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" />
+          <path d="M48 34C48 32.1362 48 31.2044 48.3045 30.4693C48.7105 29.4892 49.4892 28.7105 50.4693 28.3045C51.2044 28 52.1362 28 54 28C55.8638 28 56.7956 28 57.5307 28.3045C58.5108 28.7105 59.2895 29.4892 59.6955 30.4693C60 31.2044 60 32.1362 60 34C60 35.8638 60 36.7956 59.6955 37.5307C59.2895 38.5108 58.5108 39.2895 57.5307 39.6955C56.7956 40 55.8638 40 54 40C52.1362 40 51.2044 40 50.4693 39.6955C49.4892 39.2895 48.7105 38.5108 48.3045 37.5307C48 36.7956 48 35.8638 48 34Z" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="overlay" :class="[show && 'show']">
+      <MainNav @link-click="show = !show" />
+    </div>
+
+    <div class="logo">
+      <NuxtLink v-if="alpine.header.logo" to="/">
+        <!-- TODO: width/height doesn't make much sense here, but Lighthouse requires it. 
+        Used current Alpine logo ratio, will break on enduser logo -->
+        <NuxtImg class="dark-img" :src="alpine.header.logo.pathDark" :alt="alpine.header.logo.alt" width="89" height="31" />
+        <NuxtImg class="light-img" :src="alpine.header.logo.path" :alt="alpine.header.logo.alt" width="89" height="31" />
+      </NuxtLink>
+      <NuxtLink v-else to="/" class="fallback">
+        {{ alpine.title }}
+      </NuxtLink>
+    </div>
+
+    <div class="main-nav">
+      <MainNav />
+    </div>
+  </header>
+</template>
+
+<style scoped lang="ts">
+css({
+  header: {
+    '--header-padding': '{space.16}',
+    '--logo-height': '{space.8}',
+    position: 'relative',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+    alignItems: 'center',
+    gap: '{space.4}',
+    py: 'var(--header-padding)',
+    '.menu': {
+      position: 'absolute',
+      display: 'flex',
+      ':hover': {
+        color: '{color.primary.500}',
+      },
+      '.left &&': {
+        right: 0
+      },
+      '@sm': {
+        display: 'none'
+      }
+    },
+    '.overlay': {
+      position: 'absolute',
+      top: 'calc(var(--header-padding) + var(--logo-height) + {space.2})',
+      backgroundColor: '{alpine.backdrop.backgroundColor}',
+      border: '1px solid {color.gray.200}',
+      borderRadius: '{radii.md}',
+      padding: '{space.6}',
+      paddingRight: '{space.24}',
+      fontSize: '{text.lg.fontSize}',
+      lineHeight: '{text.lg.lineHeight}',
+      fontWeight: '{fontWeight.medium}',
+      transition: 'all 250ms',
+      perspective: '2000px',
+      transformOrigin: 'top',
+      backdropFilter: 'blur(20px)',
+      willChange: 'opacity, transform',
+      '&:not(.show)': {
+        opacity: 0,
+        transform: 'translateY(-10px) rotateY(-8deg) rotateX(-20deg)',
+        '.left &&': {
+          transform: 'translateY(-10px) rotateY(8deg) rotateX(-20deg)',
+        },
+        pointerEvents: 'none'
+      },
+      '.left &&': {
+        right: 0,
+        padding: '{space.6}',
+        paddingLeft: '{space.16}',
+        textAlign: 'right'
+      },
+      '@sm': {
+        display: 'none'
+      },
+      '@dark': {
+        borderColor: '{color.gray.800}',
+      }
+    },
+    '.logo': {
+      display: 'flex',
+      gridColumn: 'span 12 / span 12',
+      height: 'var(--logo-height)',
+      a: {
+        display: 'flex',
+      },
+      '.center &&': {
+        gridColumn: 'span 12 / span 12',
+        justifyContent: 'center',
+      },
+      '.right &&': {
+        justifyContent: 'flex-end',
+      },
+      '@sm': {
+        gridColumn: 'span 4 / span 4',
+        gridColumnStart: 'auto',
+        '.right &&': {
+          order: 2,
+        },
+      },
+      '.fallback': {
+        fontSize: '{text.2xl.fontSize}',
+        lineHeight: '{text.2xl.lineHeight}',
+        fontWeight: '{fontWeight.semibold}'
+      }
+    },
+    '.main-nav': {
+      display: 'none',
+      '@sm': {
+        display: 'flex',
+        gridColumn: 'span 8 / span 8',
+        fontSize: '{text.xl.fontSize}',
+        lineHeight: '{text.xl.lineHeight}',
+        fontWeight: '{fontWeight.medium}',
+        '.center &&': {
+          gridColumn: 'span 12 / span 12',
+          justifyContent: 'center',
+        },
+        '.right &&': {
+          justifyContent: 'flex-start',
+        },
+        '.left &&': {
+          justifyContent: 'flex-end',
+        },
+      }
+    },
+  }
+})
+</style>

package/components/AppLayout.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const alpine = useAppConfig().alpine
+
+defineProps({
+  padded: {
+    type: Boolean,
+    default: true
+  }
+})
+
+useHead({
+  meta: [
+    { name: 'twitter:card', content: 'summary_large_image' }
+  ]
+})
+
+useContentHead(alpine as any)
+</script>
+
+<template>
+  <Container class="app-layout">
+    <AppLoadingBar />
+    <AppHeader v-if="alpine.header" />
+    <slot />
+    <AppFooter v-if="alpine.footer" />
+  </Container>
+</template>
+
+<style lang="ts" scoped>
+css({
+  '.app-layout': {
+    minWidth: '{size.xs}'
+  }
+})
+</style>

package/components/AppLoadingBar.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { useNuxtApp, onBeforeUnmount, reactive } from '#imports'
+
+const props = defineProps({
+  throttle: {
+    type: Number,
+    default: 200
+  },
+  duration: {
+    type: Number,
+    default: 2000
+  },
+  height: {
+    type: Number,
+    default: 3
+  }
+})
+
+const nuxtApp = useNuxtApp()
+
+// Options & Data
+const data = reactive({
+  percent: 0,
+  show: false,
+  canSucceed: true
+})
+// Local variables
+let _timer = null
+let _throttle = null
+let _cut
+
+// Functions
+function clear () {
+  _timer && clearInterval(_timer)
+  _throttle && clearTimeout(_throttle)
+  _timer = null
+}
+function start () {
+  if (data.show) { return }
+  clear()
+  data.percent = 0
+  data.canSucceed = true
+
+  if (props.throttle) {
+    _throttle = setTimeout(startTimer, props.throttle)
+  } else {
+    startTimer()
+  }
+}
+function increase (num) {
+  data.percent = Math.min(100, Math.floor(data.percent + num))
+}
+function finish () {
+  data.percent = 100
+  hide()
+}
+function hide () {
+  clear()
+  setTimeout(() => {
+    data.show = false
+    setTimeout(() => {
+      data.percent = 0
+    }, 400)
+  }, 500)
+}
+function startTimer () {
+  data.show = true
+  _cut = 10000 / Math.floor(props.duration)
+  _timer = setInterval(() => {
+    increase(_cut)
+  }, 100)
+}
+
+// Hooks
+nuxtApp.hook('content:middleware:start', start)
+nuxtApp.hook('page:start', start)
+nuxtApp.hook('page:finish', finish)
+
+onBeforeUnmount(() => clear)
+</script>
+
+<template>
+  <div
+    class="nuxt-progress"
+    :class="{
+      'nuxt-progress-failed': !data.canSucceed,
+    }"
+    :style="{
+      width: `${data.percent}%`,
+      left: data.left,
+      height: `${props.height}px`,
+      opacity: data.show ? 1 : 0,
+      backgroundSize: `${(100 / data.percent) * 100}% auto`,
+    }"
+  />
+</template>
+
+<style>
+.nuxt-progress {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: 0%;
+  opacity: 1;
+  transition: width 0.1s, height 0.4s, opacity 0.4s;
+  background: repeating-linear-gradient(to right, #00dc82 0%, #34cdfe 50%, #0047e1 100%);
+  z-index: 999999;
+}
+</style>

package/components/Button.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+defineProps({
+  type: {
+    type: String,
+    default: 'submit'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <button :type="type" :disabled="disabled">
+    <slot />
+  </button>
+</template>
+
+<style scoped lang="ts">
+css({
+  button: {
+    backgroundColor: '{color.gray.900}',
+    color: '{color.gray.100}',
+    fontSize: '{text.sm.fontSize}',
+    lineHeight: '{text.sm.lineHeight}',
+    fontWeight: '{fontWeight.medium}',
+    py: '{space.2}',
+    px: '{space.4}',
+    borderRadius: '{radii.md}',
+    '@md': {
+      fontSize: '{text.base.fontSize}',
+      lineHeight: '{text.base.lineHeight}',
+      py: '{space.3}',
+      px: '{space.6}',
+    },
+    '@dark': {
+      backgroundColor: '{color.gray.100}',
+      color: '{color.gray.900}',
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
+    }
+  }
+})
+</style>

package/components/ColorModeSwitch.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const onClick = () => {
+  const values = ['system', 'light', 'dark']
+  const index = values.indexOf(colorMode.preference)
+  const next = (index + 1) % values.length
+
+  colorMode.preference = values[next]
+}
+</script>
+
+<template>
+  <button aria-label="Color Mode" @click="onClick">
+    <ColorScheme>
+      <template v-if="colorMode.preference === 'dark'">
+        <Icon name="uil:moon" />
+        <span class="sr-only">Dark mode</span>
+      </template>
+      <template v-else-if="colorMode.preference === 'light'">
+        <Icon name="uil:sun" />
+        <span class="sr-only">Light mode</span>
+      </template>
+      <template v-else>
+        <Icon name="uil:desktop" />
+        <span class="sr-only">System mode</span>
+      </template>
+    </ColorScheme>
+  </button>
+</template>
+
+<style scoped lang="ts">
+css({
+  button: {
+    display: 'flex',
+    '--color-mode-switcher-size': '24px',
+    width: 'var(--color-mode-switcher-size)',
+    height: 'var(--color-mode-switcher-size)',
+    ':hover': {
+      color: '{color.primary.500}',
+    },
+    svg: {
+      width: '100%',
+      height: '100%',
+    }
+  }
+})
+</style>