Switch to kirbyup + add structure field preview

Author: sylvainjule

index.css

@@ -6,8 +6,11 @@
   "author": "Sylvain Julé",
   "license": "MIT",
   "scripts": {
-    "dev": "parcel watch src/index.js --no-source-maps -d ./",
-    "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./"
+    "dev": "kirbyup src/index.js --watch",
+    "build": "kirbyup src/index.js",
+    "lint": "eslint \"src/**/*.{js,vue}\"",
+    "lint:fix": "npm run lint -- --fix",
+    "format": "prettier --write \"src/**/*.{css,js,vue}\""
   },
   "posthtml": {
     "recognizeSelfClosing": true
@@ -18,20 +21,10 @@
     "not ie <= 11"
   ],
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@vue/component-compiler-utils": "^3.3.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-polyfill": "^6.26.0",
-    "cssnano": "^4.1.11",
-    "oembed-parser": "^1.3.0",
-    "sass": "^1.43.4",
-    "vue-template-compiler": "^2.6.14",
-    "vuelidate": "^0.7.4"
-  },
-  "dependencies": {
-    "vue": "^2.6.10",
-    "vue-hot-reload-api": "^2.3.3"
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "kirbyup": "^0.21.0",
+    "prettier": "^2.4.1"
   }
 }

index.js

@@ -36,7 +36,7 @@
                     border-radius: 3px;
                 }
                 &-synced {
-                    background: rgba(#a7bd6a, .8);
+                    background: #b9ca88;
                     display: flex;
                     align-items: center;
                     .checkmark {
@@ -119,3 +119,15 @@
         opacity: 0.45;
     }
 }
+
+.k-embed-field-preview-icon {
+    background: #b9ca88;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    border-radius: 50%;
+    display: inline-block;
+    font-size: .75em;
+    margin-left: .5em;
+    text-align: center;
+}

package.json

@@ -0,0 +1,21 @@
+<template>
+    <div class="k-embed-field-preview">
+        <div class="k-structure-table-text">{{ url }} <span class="k-embed-field-preview-icon" v-if="synced">✓</span></div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: String,
+    },
+    computed: {
+        url() {
+            return this.value.input.replace(/^\/\/|^.*?:\/\//, '')
+        },
+        synced() {
+            return Object.keys(this.value.media).length
+        }
+    },
+};
+</script>

src/assets/css/styles.scss

@@ -1,11 +1,13 @@
-import embedField from './components/embedField.vue'
-import embedInput from './components/embedInput.vue'
+import embedField   from './components/embedField.vue'
+import embedInput   from './components/embedInput.vue'
+import embedPreview from './components/embedPreview.vue'
 
 panel.plugin('sylvainjule/embed', {
     fields: {
         embed: embedField,
     },
     components: {
         'k-embed-input': embedInput,
+        'k-embed-field-preview': embedPreview,
     }
 });