sembra bene

app/router.options.js

@@ -0,0 +1,3 @@
+export default {
+    scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' })
+}

components.d.ts

@@ -8,6 +8,12 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     'IconIc:baselineAdd': typeof import('~icons/ic/baseline-add')['default']
+    'IconIc:baselineArrow': typeof import('~icons/ic/baseline-arrow')['default']
+    'IconIc:baselineArrowLeft': typeof import('~icons/ic/baseline-arrow-left')['default']
+    'IconIc:baselineChevronLeft': typeof import('~icons/ic/baseline-chevron-left')['default']
+    'IconIc:baselineChevronPrev': typeof import('~icons/ic/baseline-chevron-prev')['default']
+    'IconIc:baselineChevronRight': typeof import('~icons/ic/baseline-chevron-right')['default']
+    'IconIc:baselineNext': typeof import('~icons/ic/baseline-next')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

components/cosetta.vue

@@ -8,12 +8,12 @@ const { cosetta } = defineProps({
 </script>
 <template>
   <div class="rounded overflow-hidden shadow-lg">
-    <img class="object-cover w-full max-h-48" :src="`src/public/${cosetta.images[0]}`" alt="Mountain">
+    <img class="object-cover w-full h-48" :src="`src/public/${cosetta.images[0]}`" alt="Mountain">
     <div class="px-6 py-4">
       <nuxt-link :to="`/c/${cosetta.uuid}`">
-        <h2 class="text-indigo-500 card-title hover:underline uppercase mb-2" v-text='cosetta.name' />
+        <h2 class="text-pink-500 card-title hover:underline uppercase mb-2" v-text='cosetta.name' />
       </nuxt-link>
-      <p class="text-gray-700 text-base" v-text='cosetta.description' />
+      <p class="text-gray-700 text-base line-clamp-2" v-text='cosetta.description' />
     </div>
     <div class="px-6 pt-4 pb-2">
       <span v-for='tag in cosetta.tags' :key='tag' class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2" v-text='tag'/>

components/hero.vue

@@ -2,9 +2,7 @@
 <section class="w-full mx-auto bg-nordic-gray-light flex pt-12 md:pt-0 md:items-center bg-cover bg-right" style="max-width:1600px; height: 32rem; background-image: url('https://picsum.photos/id/1072/3872/2592?grayscale')">
 	<div class="container mx-auto">
 		<div class="flex flex-col w-full lg:w-1/2 justify-center items-start  px-6 tracking-wide">
-			<a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">cerco</a>
+			<h1 class="text-white font-extrabold text-4xl my-4">Cosette</h1>
-			<a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">offro</a>
-			<h1 class="text-black text-2xl my-4">Cosette</h1>
 		</div>
 	  </div>
 </section>

package.json

@@ -16,6 +16,7 @@
     "unplugin-vue-components": "^0.22.4"
   },
   "dependencies": {
+    "@tailwindcss/line-clamp": "^0.4.0",
     "better-sqlite3": "^7.6.2",
     "multer": "^1.4.5-lts.1",
     "uuid": "^8.3.2"

pages/index.vue

@@ -1,31 +1,38 @@
 <script setup>
-const cosette = await $fetch('/api/cosette')
+const page = ref(0)
+let { data, refresh } = await useFetch(() => `/api/cosette?page=${page.value}`)
+
+function next () {
+  page.value++
+  refresh()
+}
+
+function prev () {
+  page.value--
+  refresh()
+}
 
 </script>
 <template>
   <section class="bg-white py-8">
-    
     <Upload />
-    <Hero/>
+    <Hero />
-
     <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12 px-2">
-      <nav id="store" class="w-full z-30 top-0 px-6 py-1">
+      <p>Ci sono <strong>{{data.details.count}}</strong> cosette in tutto, sei a pagina {{data.details.page+1}} di {{data.details.n_page}}. Se vuoi puoi</p>
-        <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3">
+      <a class="text-orange-700 hover:underline flex" href="#my-modal"><Icon-ic:baseline-add/>  aggiungere una cosetta</a>
-          <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-yellow text-xl" href="https://it.hackmeeting.org">Hackmeeting 0x19</a>
+    </div>
-            <div class="flex items-center" id="store-nav-content">
+    <div class='container mx-auto'>
-              <a class="pl-3 inline-block no-underline hover:text-black modal-button" href="#my-modal">
+      <nav>
-                <Icon-ic:baseline-add/>
+        <button v-if='data.details.prev' @click='prev'>
-              </a>
+          <Icon-ic:baseline-chevron-left style='font-size: 40px'/>
-              <a class="pl-3 inline-block no-underline hover:text-black" href="#">
+        </button>
-                  <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <button v-if='data.details.next' @click='next'>
-                      <path d="M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z" />
+          <Icon-ic:baseline-chevron-right style='font-size: 40px'/>
-                  </svg>
+        </button>
-              </a>
-            </div>
-        </div>
       </nav>
-      <div class="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-5">
+
-        <Cosetta v-for='cosetta in cosette' :key='cosetta.id' :cosetta='cosetta' />
+      <div class="md:p-5 p-1 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-5">
+        <Cosetta v-for='cosetta in data.cosette' :key='cosetta.id' :cosetta='cosetta' />
       </div>
 
     </div>

server/api/cosette.js

@@ -1,5 +1,7 @@
 import { getAll } from '../controller'
+import { useQuery } from 'h3'
 
 export default defineEventHandler(event => {
-  return getAll()
+  const params = useQuery(event)
+  return getAll(params)
 })

server/controller.js

@@ -5,6 +5,7 @@ const db = new Database('./cosette.db')
 function load () {
   db.pragma('journal_mode = WAL')
   db.exec('CREATE TABLE IF NOT EXISTS cosette (uuid TEXT PRIMARY KEY, name TEXT NOT NULL, description TEXT, tags TEXT, images TEXT, updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP)')
+  db.exec('CREATE INDEX cosette_updated_at_index ON cosette (updatedAt)')
   db.exec('CREATE TABLE IF NOT EXISTS chan (uuid TEXT PRIMARY KEY, cosetta_uuid REFERENCES cosette(uuid), message TEXT, updatedAt DATETIME DEFAULT CURRENT_TIMESTAMP)')
 }
 // TODO: da gestire in qualche modo all'avvio
@@ -31,14 +32,21 @@ export function get (uuid) {
   return { cosetta, comments }
 }
 
-export function getAll (limit=0, offset=0, tags=[], search='') {
+export function getAll ({ page }) {
-  const q = db.prepare('SELECT * FROM cosette')
+  page = Number(page || 0)
-  const ret = q.all()
+  const perPage = 3
-  return ret.map(r => {
+  let query = 'SELECT * FROM cosette ORDER BY updatedAt DESC LIMIT ? OFFSET ?'
+  const q = db.prepare(query)
+  const ret = q.all(perPage, perPage * page)
+  const cosette = ret.map(r => {
     r.tags = r.tags ? JSON.parse(r.tags) : []
     r.images = r.images ? JSON.parse(r.images) : []
     return r
   })
+
+  const count = db.prepare('SELECT COUNT(*) count from cosette').get().count
+
+  return { cosette, details: { page, count, prev: page !== 0, next: count > perPage*(page+1), n_page: Math.ceil(count / perPage) } } 
 }
 
 

tailwind.config.js

@@ -4,5 +4,8 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [require('daisyui')],
+  plugins: [
+    require('daisyui'),
+    require('@tailwindcss/line-clamp'),    
+  ],
 }

yarn.lock

@@ -685,6 +685,11 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@tailwindcss/line-clamp@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.0.tgz#03353e31e77636b785f2336e8c978502cec1de81"
+  integrity sha512-HQZo6gfx1D0+DU3nWlNLD5iA6Ef4JAXh0LeD8lOGrJwEDBwwJNKQza6WoXhhY1uQrxOuU8ROxV7CqiQV4CoiLw==
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"