diff --git a/.docker_env-development/node.dockerfile b/.docker_env-development/node.dockerfile new file mode 100644 index 0000000..fa510df --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9ba22b5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/.npm_cache/ +/.idea/ diff --git a/README.md b/README.md index e097af8..0e4e498 100644 --- a/README.md +++ b/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 +``` diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..dd194d9 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/index.css b/index.css index 1299e91..dd28e6e 100644 --- a/index.css +++ b/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} diff --git a/index.js b/index.js index d19d41a..e0512f5 100644 --- a/index.js +++ b/index.js @@ -1 +1 @@ -(function(){"use strict";function p(r,e,o,s,a,c,d,C){var t=typeof r=="function"?r.options:r;e&&(t.render=e,t.staticRenderFns=o,t._compiled=!0),s&&(t.functional=!0),c&&(t._scopeId="data-v-"+c);var i;if(d?(i=function(n){n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!n&&typeof __VUE_SSR_CONTEXT__<"u"&&(n=__VUE_SSR_CONTEXT__),a&&a.call(this,n),n&&n._registeredComponents&&n._registeredComponents.add(d)},t._ssrRegister=i):a&&(i=C?function(){a.call(this,(t.functional?this.parent:this).$root.$options.shadowRoot)}:a),i)if(t.functional){t._injectStyles=i;var b=t.render;t.render=function(k,_){return i.call(_),b(k,_)}}else{var l=t.beforeCreate;t.beforeCreate=l?[].concat(l,i):[i]}return{exports:r,options:t}}const f={__name:"VideoEmbed",props:["content"],setup(r){const e=r,o=Vue.computed(()=>e.content.video[0]);return{__sfc:!0,props:e,video:o}}};var u=function(){var e=this,o=e._self._c,s=e._self._setupProxy;return s.video?o("div",{staticClass:"video-container"},[o("figure",[o("video",{attrs:{controls:e.content.controls,autoplay:e.content.autoplay,loop:e.content.loop,alt:e.content.alt}},[o("source",{attrs:{src:s.video.url,type:"video/mp4"}}),e._v(" Your browser does not support the video tag. ")]),e.content.caption?o("figcaption",{staticClass:"video-caption"},[e.content.link?o("a",{staticClass:"video-caption-link",attrs:{href:e.content.link,alt:e.content.alt}},[e._v(" "+e._s(e.content.caption)+" ")]):o("p",[e._v(e._s(e.content.caption))])]):e._e()])]):o("div",[o("k-block-figure",{attrs:{"is-empty":!s.video,"empty-icon":"file-video","empty-text":"No video selected"}})],1)},v=[],m=p(f,u,v,!1,null,null,null,null);const h=m.exports;panel.plugin("vyder/kirby-video-embed-block",{blocks:{"video-embed":h}})})(); +(function(){"use strict";function c(o,t,e,n,l,_,v,u){var i=typeof o=="function"?o.options:o;return t&&(i.render=t,i.staticRenderFns=e,i._compiled=!0),{exports:o,options:i}}const s={__name:"VideoEmbed",props:["content"],setup(o){const t=o,e=Vue.computed(()=>t.content.video[0]);return{__sfc:!0,props:t,video:e}}};var a=function(){var t=this,e=t._self._c,n=t._self._setupProxy;return n.video?e("div",{staticClass:"video-container"},[e("figure",[e("video",{attrs:{controls:t.content.controls,autoplay:t.content.autoplay,loop:t.content.loop,alt:t.content.alt}},[e("source",{attrs:{src:n.video.url,type:"video/mp4"}}),t._v(" Your browser does not support the video tag. ")]),t.content.caption?e("figcaption",{staticClass:"video-caption"},[t.content.link?e("a",{staticClass:"video-caption-link",attrs:{href:t.content.link,alt:t.content.alt}},[t._v(" "+t._s(t.content.caption)+" ")]):e("p",[t._v(t._s(t.content.caption))])]):t._e()])]):e("div",[e("k-block-figure",{attrs:{"is-empty":!n.video,"empty-icon":"file-video","empty-text":"No video selected"}})],1)},r=[],d=c(s,a,r);const p=d.exports;panel.plugin("vyder/kirby-video-embed-block",{blocks:{"video-embed":p}})})(); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..92d03d2 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "kirby-video-embed", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "kirby-video-embed", + "version": "1.0.0", + "license": "MIT" + } + } +} diff --git a/src/components/VideoEmbed.vue b/src/components/VideoEmbed.vue index f6bff1a..5ca4a92 100644 --- a/src/components/VideoEmbed.vue +++ b/src/components/VideoEmbed.vue @@ -1,7 +1,8 @@