Merge pull request #81 from bkeepers/ionic

Use Ionic framework

.env.development

@@ -0,0 +1 @@
+APP_API_URL="http://localhost:3100"

.env.example

@@ -1,2 +1,6 @@
 # https://www.theaudiodb.com/api_guide.php
 THEAUDIODB_API_KEY=2
+
+
+# Host to use for API requests
+# APP_API_URL=http://localhost:3100

.eslintrc.js

@@ -1,9 +1,14 @@
+const { readGitignoreFiles } = require('eslint-gitignore')
+
 module.exports = {
   extends: [
     'standard',
     'plugin:vue/vue3-recommended'
   ],
   rules: {
-    'vue/multi-word-component-names': 0
-  }
+    'vue/multi-word-component-names': 0,
+    // https://ionicframework.com/docs/vue/troubleshooting#slot-attributes-are-deprecated
+    'vue/no-deprecated-slot-attribute': 'off'
+  },
+  ignorePatterns: readGitignoreFiles({ cwd: __dirname })
 }

.gitignore

@@ -22,27 +22,18 @@
 /storage/*
 !/storage/.keep
 
-/public/assets
 .byebug_history
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
 
-/public/packs
-/public/packs-test
 /node_modules
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
-/public/service-worker.js*
-
-# Vite Ruby
-/public/vite
-/public/vite-dev
-/public/vite-test
-node_modules
 *.local
 .DS_Store
 
 .env
 app/frontend/components.d.ts
+/public

Gemfile

@@ -7,11 +7,11 @@ gem "rails"
 gem "pg"
 gem "puma"
 gem "bootsnap", ">= 1.4.4", require: false
-gem "vite_rails"
 gem "jbuilder"
 gem "httparty"
 gem "pg_search"
 gem "good_job"
+gem "rack-cors"
 
 group :development, :test do
   gem "byebug", platforms: [:mri, :mingw, :x64_mingw]

Gemfile.lock

@@ -86,7 +86,6 @@ GEM
     dotenv-rails (2.7.6)
       dotenv (= 2.7.6)
       railties (>= 3.2)
-    dry-cli (0.7.0)
     erubi (1.10.0)
     et-orbi (1.2.6)
       tzinfo
@@ -153,8 +152,8 @@ GEM
     raabro (1.4.0)
     racc (1.6.0)
     rack (2.2.3)
-    rack-proxy (0.7.0)
-      rack
+    rack-cors (1.1.1)
+      rack (>= 2.0.0)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (7.0.0)
@@ -218,13 +217,6 @@ GEM
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.1.0)
     vcr (6.0.0)
-    vite_rails (3.0.2)
-      railties (>= 5.1, < 8)
-      vite_ruby (~> 3.0)
-    vite_ruby (3.0.5)
-      dry-cli (~> 0.7.0)
-      rack-proxy (~> 0.6, >= 0.6.1)
-      zeitwerk (~> 2.2)
     web-console (4.2.0)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -264,11 +256,11 @@ DEPENDENCIES
   pg
   pg_search
   puma
+  rack-cors
   rails
   selenium-webdriver
   standard
   vcr
-  vite_rails
   web-console
   webdrivers
   webmock

Procfile.dev

@@ -1,3 +1,3 @@
-web: bin/rails s
-vite: bin/vite dev
+web: yarn run dev
+api: bin/rails s
 worker: bundle exec good_job start

app/controllers/api/tracks_controller.rb

@@ -2,4 +2,8 @@ class Api::TracksController < ApiController
   def index
     @tracks = current_scope.order_by_popular.limit(12)
   end
+
+  def show
+    @track = Track.find(params[:id])
+  end
 end

app/controllers/content_controller.rb

@@ -1,6 +1,6 @@
 class ContentController < ActionController::Base
   def index
-    render layout: "application"
+    render file: Rails.root.join("public/index.html")
   end
 
   def offline

app/frontend/ace/metadata-completer.js

@@ -1,4 +1,4 @@
-import api from '~/api'
+import api from '@/client'
 
 const RE = /\{\s*([\w_-]*)\s*:\s*([^}]*)/i
 

app/frontend/application.js

@@ -0,0 +1,21 @@
+import './application.scss'
+
+import { createApp } from 'vue'
+import { IonicVue } from '@ionic/vue'
+import App from './views/App.vue'
+import VueAxios from 'vue-axios'
+import client from './client'
+import store from './store'
+import router from './router'
+import telemetry from './telemetry'
+
+const app = createApp(App)
+  .use(IonicVue)
+  .use(VueAxios, client)
+  .use(store)
+  .use(router)
+
+router.isReady().then(() => {
+  telemetry()
+  app.mount('[data-behavior=vue]')
+})

app/frontend/application.scss

@@ -0,0 +1,29 @@
+/* Core CSS required for Ionic components to work properly */
+@import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '@ionic/vue/css/normalize.css';
+@import '@ionic/vue/css/structure.css';
+@import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+@import '@ionic/vue/css/padding.css';
+@import '@ionic/vue/css/float-elements.css';
+@import '@ionic/vue/css/text-alignment.css';
+@import '@ionic/vue/css/text-transformation.css';
+@import '@ionic/vue/css/flex-utils.css';
+@import '@ionic/vue/css/display.css';
+
+/* Theme variables */
+@import '@/stylesheets/variables.css';
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+@import "@/stylesheets/text-shadow";
+
+@layer utilities {
+  .grid-scroll-x {
+    @apply grid grid-flow-col overflow-x-auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}

app/frontend/client.js

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+export default axios.create({
+  baseURL: import.meta.env.APP_API_URL || 'https://chordbook.app',
+  headers: {
+    'Content-Type': 'application/json',
+    'X-Requested-With': 'XMLHttpRequest'
+  }
+})

app/frontend/components/AlbumItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <ion-item
+    button
+    :router-link="{ name: 'album', params: { id: album.id } }"
+    class="rounded"
+    :detail="false"
+    lines="none"
+  >
+    <ion-label>
+      <div class="rounded aspect-square shadow-md bg-slate-100 dark:bg-slate-900 mb-2">
+        <ion-img :src="album.thumbnail" />
+      </div>
+      <h2 class="text-sm">
+        {{ album.title }}
+      </h2>
+      <p>{{ album.artist.name }}</p>
+    </ion-label>
+  </ion-item>
+</template>
+
+<script>
+import { IonItem, IonLabel, IonImg } from '@ionic/vue'
+
+export default {
+  components: { IonItem, IonLabel, IonImg },
+
+  props: {
+    album: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

app/frontend/components/ArtistItem.vue

@@ -0,0 +1,44 @@
+<template>
+  <ion-item
+    button
+    :router-link="{ name: 'artist', params: { id: artist.id } }"
+  >
+    <ion-avatar
+      slot="start"
+      class="bg-slate-100 flex place-content-center items-center"
+    >
+      <ion-img
+        v-if="artist.thumbnail"
+        :src="artist.thumbnail"
+      />
+      <ion-icon
+        v-else
+        :icon="people"
+        class="text-slate-300"
+      />
+    </ion-avatar>
+    <ion-label>
+      <h2>{{ artist.name }}</h2>
+    </ion-label>
+  </ion-item>
+</template>
+
+<script>
+import { IonItem, IonAvatar, IonLabel, IonIcon, IonImg } from '@ionic/vue'
+import { people } from 'ionicons/icons'
+
+export default {
+  components: { IonItem, IonAvatar, IonLabel, IonIcon, IonImg },
+
+  props: {
+    artist: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data () {
+    return { people }
+  }
+}
+</script>

app/frontend/components/chord-diagram.vue → app/frontend/components/ChordDiagram.vue

@@ -13,7 +13,7 @@
 <script>
 import { ChordBox } from 'vexchords'
 import { Chord } from 'chordsheetjs'
-import ChordData from '../lib/chord-data'
+import ChordData from '@/lib/chord-data'
 
 export default {
   props: {

app/frontend/components/song/chord-lyrics-pair.vue → app/frontend/components/ChordLyricsPair.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="column">
-    <chord :name="item.transposed" />
+    <song-sheet-chord :name="item.transposed" />
     <div class="lyrics">
       {{ item.lyrics }}
     </div>
@@ -9,8 +9,11 @@
 
 <script>
 import { ChordLyricsPair } from 'chordsheetjs'
+import SongSheetChord from '@/components/SongSheetChord.vue'
 
 export default {
+  components: { SongSheetChord },
+
   for: function (item) {
     return item instanceof ChordLyricsPair
   },

app/frontend/components/SearchResults.vue

@@ -0,0 +1,57 @@
+<template>
+  <ion-list>
+    <ion-item
+      v-for="result in results"
+      :key="result.type + result.id"
+      button
+      :router-link="{ name: result.type.toLowerCase(), params: { id: result.id } }"
+    >
+      <ion-avatar slot="start">
+        <ion-img :src="result.thumbnail" /> <!-- class="rounded" -->
+      </ion-avatar>
+      <ion-label>
+        <p class="uppercase">
+          {{ result.type }}
+        </p>
+        <h2>{{ result.title }}</h2>
+        <p>{{ result.subtitle }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script>
+import { IonList, IonItem, IonAvatar, IonLabel, IonImg } from '@ionic/vue'
+
+export default {
+  components: { IonList, IonItem, IonAvatar, IonLabel, IonImg },
+
+  props: {
+    params: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      results: []
+    }
+  },
+
+  watch: {
+    params: { immediate: true, deep: true, handler: 'update' }
+  },
+
+  methods: {
+    async update () {
+      if (!this.params.q) {
+        this.results = []
+        return
+      }
+
+      this.results = (await this.$http.get('/api/search', { params: this.params })).data
+    }
+  }
+}
+</script>