From ad4c66fc6a499bf8db622690c17f5c5a21da5bd9 Mon Sep 17 00:00:00 2001
From: mwinter <mwinter@unboundedpress.org>
Date: Thu, 8 Jun 2023 05:29:29 +0200
Subject: [PATCH] buttons are now components

---
 portfolio-nuxt/app.vue               |  2 +-
 portfolio-nuxt/components/button.vue | 17 ++++++++
 portfolio-nuxt/nuxt.config.ts        |  5 ++-
 portfolio-nuxt/pages/index.vue       | 59 +++++++++-------------------
 4 files changed, 40 insertions(+), 43 deletions(-)
 create mode 100644 portfolio-nuxt/components/button.vue

diff --git a/portfolio-nuxt/app.vue b/portfolio-nuxt/app.vue
index 4809281..b2b82a2 100644
--- a/portfolio-nuxt/app.vue
+++ b/portfolio-nuxt/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="bg-white">
     <NuxtLayout>
       <NuxtPage/>
     </NuxtLayout>
diff --git a/portfolio-nuxt/components/button.vue b/portfolio-nuxt/components/button.vue
new file mode 100644
index 0000000..69966fa
--- /dev/null
+++ b/portfolio-nuxt/components/button.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="p-1">
+        <button
+        type="button"
+        v-show="visible"
+        class="inline-flex bg-black rounded-full text-xs p-1"
+        >
+        <Icon :name="icon" color="white" />
+        </button>
+    </div>
+</template>
+
+<script>
+export default {
+  props: ['icon', 'work', 'visible']
+}
+</script>
\ No newline at end of file
diff --git a/portfolio-nuxt/nuxt.config.ts b/portfolio-nuxt/nuxt.config.ts
index a656df9..c086e39 100644
--- a/portfolio-nuxt/nuxt.config.ts
+++ b/portfolio-nuxt/nuxt.config.ts
@@ -1,4 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', '@nuxt/image', 'nuxt-icon']
+  modules: ['@nuxtjs/tailwindcss', '@nuxt/image', 'nuxt-icon'],
+  image: {
+    domains: ['unboundedpress.org']
+  }
 })
diff --git a/portfolio-nuxt/pages/index.vue b/portfolio-nuxt/pages/index.vue
index 5ff0d8d..5811343 100644
--- a/portfolio-nuxt/pages/index.vue
+++ b/portfolio-nuxt/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-3 gap-10 bg-white divide-x divide-solid divide-black p-4">
+  <div class="bg-gray-50 rounded-lg m-5 grid grid-cols-3 gap-10 bg-white divide-x divide-solid divide-black p-4">
     <div class="px-5">
       <p class="text-lg">pieces</p>
       <div class="py-2 ml-3" v-for="item in works">
@@ -8,41 +8,15 @@
           <div class="grid grid-cols-[70%,30%] gap-1 font-thin">
             <p class="italic text-sm">{{ work.title }}</p>
              <div class="grid grid-cols-4">
-              <div class="p-1">
-                <button
-                  type="button"
-                  class="inline-flex bg-black rounded-full text-xs p-1"
-                >
-                  <Icon name="ion:book-outline" color="white" />
-                </button>
-              </div>
-
-              <div class="p-1">
-                <button
-                  type="button"
-                  class="inline-flex bg-black rounded-full text-xs p-1"
-                >
-                  <Icon name="wpf:speaker" color="white" />
-                </button>
-              </div>
-
-              <div class="p-1">
-                <button
-                  type="button"
-                  class="inline-flex bg-black rounded-full text-xs p-1"
-                >
-                  <Icon name="fluent:video-48-filled" color="white" />
-                </button>
-              </div>
-
-              <div class="p-1">
-                <button
-                  type="button"
-                  class="inline-flex bg-black rounded-full text-xs p-1"
-                >
-                  <Icon name="mdi:camera" color="white" />
-                </button>
-              </div>
+
+              <Button :visible="work.score" icon="ion:book-outline" :work="work"></Button>
+
+              <Button :visible="work.soundcloud_trackid" icon="wpf:speaker" :work="work"></Button>
+
+              <Button :visible="work.vimeo_trackid" icon="fluent:video-48-filled" :work="work"></Button>
+
+              <Button :visible="work.images" icon="mdi:camera" :work="work"></Button>
+
             </div>
           </div>
         </div>
@@ -51,18 +25,21 @@
 
     <div class="px-5">
       <p class="text-lg">writings</p>
-      <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">{{ item.entryTags.title }}</div>
+      <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">
+        {{ item.entryTags.title }}
+      </div>
     </div>
 
     <div class="px-5">
       <p class="text-lg">releases</p>
-      <div class="leading-tight py-2 ml-3 text-sm" v-for="item in releases">
-        {{ item.title }}
-        <nuxt-img :src="'https://unboundedpress.org/api/album_art.files/' + item.album_art_id + '/binary'" />
+      <div class="leading-tight py-4 ml-3 text-sm" v-for="item in releases">
+        <p class="text-center leading-tight py-2">{{ item.title }}</p>
+        <nuxt-img :src="'https://unboundedpress.org/api/album_art.files/' + item.album_art_id + '/binary'" 
+        quality="50"/>
       </div>
     </div>
   </div>
-  </template>
+</template>
 
 <script setup>