cleaning

TODO.md

@@ -0,0 +1,4 @@
+[ ] attach db connection / setup on nuxt listen hook
+[x] card @ homepage
+[ ] pagination / search @ homepage
+[ ] carousel in detail

components/cosetta.vue

@@ -7,16 +7,18 @@ const { cosetta } = defineProps({
 })
 </script>
 <template>
-  <div class="rounded overflow-hidden shadow-lg">
+  <div class="rounded overflow-hidden shadow-lg flex flex-col justify-between">
     <img class="object-cover w-full h-48" :src="`src/public/${cosetta.images[0]}`" alt="Mountain">
-    <div class="px-6 py-4">
+    <div class="px-6 py-4 grow">
       <nuxt-link :to="`/c/${cosetta.uuid}`">
-        <h2 class="text-pink-500 card-title hover:underline uppercase mb-2" v-text='cosetta.name' />
+        <h2 class="text-pink-500 card-title hover:underline uppercase mb-2 line-clamp-2" v-text='cosetta.name' />
       </nuxt-link>
-      <p class="text-gray-700 text-base line-clamp-2" v-text='cosetta.description' />
+      <p class="text-gray-700 text-base line-clamp-3" 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'/>
+      <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' />
     </div>
   </div>
 </template>

components/footer.vue

@@ -15,10 +15,12 @@
             <h3 class="font-bold text-xl text-gray-900">Links</h3>
             <ul class="list-reset items-center pt-3">
               <li>
-                            <a class="inline-block no-underline hover:text-black hover:underline py-1" href="https://it.hackmeeting.org">it.hackmeeting.org</a>
+                <a class="inline-block no-underline hover:text-black hover:underline py-1"
+                  href="https://it.hackmeeting.org">it.hackmeeting.org</a>
               </li>
               <li>
-                            <a class="inline-block no-underline hover:text-black hover:underline py-1" href="https://autistici.org/underscore">underscore_TO hacklab</a>
+                <a class="inline-block no-underline hover:text-black hover:underline py-1"
+                  href="https://autistici.org/underscore">underscore_TO hacklab</a>
               </li>
             </ul>
           </div>

components/upload.vue

@@ -2,7 +2,6 @@
   <div class="modal" id="my-modal">
     <div class="modal-box">
       <h3 class="font-bold text-lg uppercase">Aggiungo una cosetta</h3>
-      <p class="py-4">Ziobilly</p>
       <form action="/api/cosette" method="post" enctype="multipart/form-data">
         <label class="label">
           <span class="label-text">Che roba è?</span>

pages/c/[cosetta].vue

@@ -16,9 +16,14 @@
 
     <div class="container mx-auto pt-4 pb-12">
       <img v-if='cosetta.images' :src="`/src/public/${cosetta.images[0]}`" />
-      <h3 class='uppercase mt-4 font-bold text-xl'>{{cosetta.name}}</h3><br/>
+      <h2 class="text-pink-500 text-2xl card-title uppercase mb-2 divider" v-text='cosetta.name' />
+      <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' />
+      </div>
       <p class='pt-1 text-gray-700 text-xl'>{{ cosetta.description }}</p>
-      <span class="badge mr-1" v-for='(tag, idx) in cosetta.tags' :key='idx' v-text='tag'></span>
+
     </div>
 
     <div class="container mx-auto">

pages/index.vue

@@ -18,8 +18,11 @@ function prev () {
     <Upload />
     <Hero />
     <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12 px-2">
-      <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>
-      <a class="text-orange-700 hover:underline flex" href="#my-modal"><Icon-ic:baseline-add/>  aggiungere una cosetta</a>
+      <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>
+      <a class="text-orange-700 hover:underline flex" href="#my-modal">
+        <Icon-ic:baseline-add /> aggiungere una cosetta
+      </a>
     </div>
     <div class='container mx-auto'>
       <nav>

server/controller.js

@@ -2,6 +2,7 @@ import Database from 'better-sqlite3'
 import { v4 } from 'uuid'
 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)')