@4verburga/alpine-spanishplus 1.6.6 → 1.7.0

package/README.md

@@ -1,60 +1,5 @@
-[![Alpine](./.starters/default/public/social-card-preview.png)](https://alpine.nuxt.space)
+run pnpm pack to build the compiled theme
 
-# 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
+TODO: find a way to recompute articles without using window.reload()
+TODO: refactor the buttons using the button classes in footer or any other existing class.

package/components/content/ArticlesList.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { withTrailingSlash } from 'ufo'
+import { ref, computed, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
 
 const props = defineProps({
   path: {
@@ -8,28 +13,77 @@ const props = defineProps({
   }
 })
 
-// @ts-ignore
-const { data: _articles } = await useAsyncData(props.path, async () => await queryContent(withTrailingSlash(props.path)).sort({ date: -1 }).find())
+const currentYear = ref(parseInt(route.query.year as string) || new Date().getFullYear())
+const years = ref([2025, 2024, 2023]) // Add more years as needed
+
+const fetchArticles = async (year: number) => {
+  const path = `${props.path}/${year}`
+  const { data } = await useAsyncData(path, async () => await queryContent(withTrailingSlash(path)).sort({ date: -1 }).find())
+  return data
+}
+
+const _articles = ref(await fetchArticles(currentYear.value))
 
 const articles = computed(() => _articles.value || [])
+
+const updateYear = async (year: number) => {
+  currentYear.value = year
+  await router.push({ query: { year: currentYear.value } })
+  window.location.reload()
+}
+
+const yearButtons = computed(() => {
+  const currentIndex = years.value.indexOf(currentYear.value)
+  const buttons = []
+
+  if (currentIndex > 1) {
+    buttons.push(years.value[0])
+  }
+
+  if (currentIndex > 0) {
+    buttons.push(years.value[currentIndex - 1])
+  }
+
+  buttons.push(currentYear.value)
+
+  if (currentIndex < years.value.length - 1) {
+    buttons.push(years.value[currentIndex + 1])
+  }
+
+  if (currentIndex < years.value.length - 2) {
+    buttons.push(years.value[years.value.length - 1])
+  }
+
+  return buttons.reverse()
+})
+
 </script>
 
 <template>
-  <div v-if="articles?.length" class="articles-list">
-    <div class="featured">
-      <ArticlesListItem :article="articles[0]" :featured="true" />
+  <div>
+    <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 class="layout">
-      <ArticlesListItem v-for="(article, index) in articles.slice(1)" :key="index" :article="article" />
+    <div v-else class="tour">
+      <p>Seems like there are no articles for {{ currentYear }}.</p>
+    </div>
+    <div class="spacing"> </div>
+    <div class="navigation-buttons">
+      <button
+        v-for="year in yearButtons"
+        :key="year"
+        :disabled="year === currentYear"
+        @click="updateYear(year)"
+        class="nav-button"
+      >
+        {{ year }}
+      </button>
     </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>
 
@@ -67,6 +121,20 @@ css({
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  '.navigation-buttons': {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: '20px',
+    button: {
+      padding: '10px 20px',
+      fontSize: '16px',
+      cursor: 'pointer',
+      '&:disabled': {
+      // cursor: 'not-allowed', not quite good looking
+        opacity: 0.5,
+      }
+    }
   }
 })
-</style>
+</style>

package/layouts/article.vue

@@ -67,6 +67,8 @@ const parentPath = computed(
   () => {
     const pathTabl = route.path.split('/')
     pathTabl.pop()
+    pathTabl.pop()
+    pathTabl.pop()
     return pathTabl.join('/')
   }
 )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4verburga/alpine-spanishplus",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "type": "module",
   "exports": "./nuxt.config.ts",
   "files": [