fix #3 + add local development aids

.docker_env-development/node.dockerfile

@@ -0,0 +1,21 @@
+# Use the official minimal Node.js 18 image
+FROM node:18-alpine
+
+# Ensure good security practices and avoid running as `root`
+ENV USER=node
+
+# Specify the global npm install directory
+ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
+ENV PATH=/home/node/.npm-global/bin:$PATH
+
+# Create the directory for npm global installations and fix permissions
+RUN mkdir -p /home/node/.npm-global/lib /home/node/.npm \
+    && chown -R node:node /home/node/.npm-global /home/node/.npm
+
+# Switch to non-root user to execute the remaining steps securely
+USER node
+
+# Configure npm to use the global directory and update npm to version 8
+RUN npm config set prefix /home/node/.npm-global \
+    && npm install --global npm@8 \
+    && npm cache clean --force

.gitignore

@@ -0,0 +1,2 @@
+/.npm_cache/
+/.idea/

README.md

@@ -1,12 +1,15 @@
 # Kirby Video Embed Block
 
-I was surprised to find that the [default Kirby v4 `video` block](https://getkirby.com/docs/reference/panel/blocks/video) doesn't support a way to upload and embed a video - so here it is.
+I was surprised to find that the [default Kirby v4
+`video` block](https://getkirby.com/docs/reference/panel/blocks/video) doesn't support a way to upload and embed a
+video - so here it is.
 
 ![Preview of editing the video embed block's details](screenshots/details.png)
 
 ## Install
 
-There's a couple ways to install this plugin (and you can read more in Kirby docs [here](https://getkirby.com/docs/guide/plugins/installing-plugins))
+There's a couple ways to install this plugin (and you can read more in Kirby
+docs [here](https://getkirby.com/docs/guide/plugins/installing-plugins))
 
 ### 1. Download
 
@@ -51,9 +54,11 @@ fields:
 
 So here, the `text` field is set as blocks, and specifies all the blocks available.
 
-I would love if this plugin could just extend the default list of blocks in some way - but it doesn't seem possible as of now.
+I would love if this plugin could just extend the default list of blocks in some way - but it doesn't seem possible as
+of now.
 
-If this gets outdated, you can find the default list of kirby blocks [here](https://getkirby.com/docs/guide/page-builder#core-block-types).
+If this gets outdated, you can find the default list of kirby
+blocks [here](https://getkirby.com/docs/guide/page-builder#core-block-types).
 
 ## License
 
@@ -62,3 +67,15 @@ MIT
 ## Contribute
 
 Feel free to open issues if you think of features / encounter bugs - I'd be happy to take a look.
+
+### Plugin Development
+
+- if you have docker installed, you can use the provided `docker-compose.yml` to run the plugin in a container.
+
+```bash
+docker-compose run --rm --service-ports plugin_npm install
+// develop with watcher
+docker-compose run --rm --service-ports plugin_npm run dev
+// prepare assets for release
+docker-compose run --rm --service-ports plugin_npm run build
+```

docker-compose.yml

@@ -0,0 +1,21 @@
+services:
+  plugin_npm:
+    container_name: plugin_npm
+    build:
+      context: ./.docker_env-development/
+      dockerfile: node.dockerfile
+    restart: 'no'
+    environment:
+      - npm_config_cache=.npm_cache
+    ports:
+      - "3000:3000"
+      - "3001:3001"
+    #    image: node:lts-alpine
+    working_dir: /var/www
+    entrypoint: [ 'npm' ]
+    volumes:
+      - ./:/var/www
+    logging:
+      options:
+        max-size: "1m"
+        max-file: "1"

index.css

@@ -1 +1 @@
-.video-container>figure{display:flex;flex-direction:column;align-items:center;row-gap:.75rem}.video-caption{color:#777}.video-caption-link{text-decoration:underline}
+.video-container>figure{display:flex;flex-direction:column;align-items:center;row-gap:.75rem}.video-container>figure>video{width:100%}.video-caption{color:#777}.video-caption-link{text-decoration:underline}

src/components/VideoEmbed.vue

@@ -1,40 +1,41 @@
 <script setup>
-import { computed } from 'vue'
+import {computed} from 'vue'
+
 const props = defineProps([
-    'content'
+  'content'
 ])
 
 const video = computed(() => props.content.video[0])
 
 </script>
 
 <template>
-<div class="video-container" v-if="video">
+  <div class="video-container" v-if="video">
     <figure>
-        <video
-            :controls="content.controls"
-            :autoplay="content.autoplay"
-            :loop="content.loop"
-            :alt="content.alt">
-            <source :src="video.url" type="video/mp4">
-            Your browser does not support the video tag.
-        </video>
-
-        <figcaption class="video-caption" v-if="content.caption">
-            <a v-if="content.link" class="video-caption-link" :href="content.link" :alt="content.alt">
-                {{ content.caption }}
-            </a>
-            <p v-else>{{ content.caption }}</p>
-        </figcaption>
+      <video
+          :controls="content.controls"
+          :autoplay="content.autoplay"
+          :loop="content.loop"
+          :alt="content.alt">
+        <source :src="video.url" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
+
+      <figcaption class="video-caption" v-if="content.caption">
+        <a v-if="content.link" class="video-caption-link" :href="content.link" :alt="content.alt">
+          {{ content.caption }}
+        </a>
+        <p v-else>{{ content.caption }}</p>
+      </figcaption>
     </figure>
-</div>
-<div v-else>
+  </div>
+  <div v-else>
     <k-block-figure
         :is-empty="!video"
         empty-icon="file-video"
         empty-text="No video selected"
     />
-</div>
+  </div>
 </template>
 
 <style>
@@ -45,6 +46,10 @@ const video = computed(() => props.content.video[0])
   row-gap: 0.75rem;
 }
 
+.video-container > figure > video {
+  width: 100%;
+}
+
 .video-caption {
   color: #777777;
 }