feat: add template

README.md

@@ -1 +1,30 @@
-# vue-wp-bootstrap
+# Vue WordPress Plugin Boilerplate
+
+### Usage
+
+This is a project template for [@vue/cli](https://cli.vuejs.org).
+
+``` bash
+$ npm install -g @vue/cli
+$ npm install -g @vue/cli-init
+$ vue init abaicus/vue-wp-bootstrap my-project
+$ cd my-project
+$ composer install
+$ npm install
+$ npm run dev
+```
+
+### What's Included
+- `docker-compose up`: the template comes with a preconfigured `docker-compose` file that will run a full WordPress instance. If you want to use that, you might want to look into that one first. 
+
+- `npm run dev`: WebPack, SCSS, Eslint watching.
+
+- `npm run build`: WebPack, SCSS build for production.
+
+- `npm run lint`: Lint `.js` and `.vue` files with ESLint.
+- `npm run pre-commit`: PHPCBF, PHPCS, Lint and add to git. This is ran automatically on commit if you initialize the project with commit lint.
+
+### Customizations
+You will likely need to do some tuning to suit your own needs:
+
+- Install additional libraries that you need, e.g. `vue-router`, `vue-resource`, `vuex`, etc...

meta.js

@@ -0,0 +1,101 @@
+module.exports = {
+  helpers: {
+    lowercase: str => str.toLowerCase(),
+    abbreviate: str => {
+      if (str.indexOf('-') > -1) {
+        let matches = str.match(/\b(\w)/g);
+        return matches.join('')
+          .toUpperCase();
+      }
+      return str.toUpperCase();
+    },
+    lowercaseAbbrev: str => {
+      if (str.indexOf('-') > -1) {
+        let matches = str.match(/\b(\w)/g);
+        return matches.join('')
+          .toLowerCase();
+      }
+      return str.toLowerCase();
+    },
+  },
+  'prompts': {
+    'name': {
+      'type': 'string',
+      'required': true,
+      'label': 'Plugin Slug (Must be Hyphened)',
+      'default': 'wordpress-vue-js-bootstrap'
+    },
+    'niceName': {
+      'type': 'string',
+      'required': true,
+      'label': 'Plugin Nice Name',
+      'default': 'WordPress Vue.js Bootstrap'
+    },
+    'textdomain': {
+      'type': 'string',
+      'required': true,
+      'label': 'Plugin Text Domain',
+      'default': 'textdomain'
+    },
+    'version': {
+      'type': 'string',
+      'required': true,
+      'label': 'The version of the package',
+      'default': '0.0.1'
+    },
+    'description': {
+      'type': 'string',
+      'required': true,
+      'label': 'Project description',
+      'default': 'A Vue.js WordPress Plugin'
+    },
+    'author': {
+      'type': 'string',
+      'label': 'Author'
+    },
+    'authorUrl': {
+      'type': 'string',
+      'label': 'Author URI',
+      'default': 'https://themeisle.com'
+    },
+    'license': {
+      'type': 'string',
+      'label': 'License',
+      'default': 'GPL-2.0+'
+    },
+    'licenseUrl': {
+      'type': 'string',
+      'label': 'License',
+      'default': 'https://www.gnu.org/licenses/gpl-2.0.html'
+    },
+    'build': {
+      'type': 'list',
+      'message': 'Vue build',
+      'choices': [
+        {
+          'name': 'Runtime + Compiler: recommended for most users',
+          'value': 'standalone',
+          'short': 'standalone'
+        },
+        {
+          'name': 'Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere',
+          'value': 'runtime',
+          'short': 'runtime'
+        }
+      ]
+    },
+    'lint': {
+      'type': 'confirm',
+      'message': 'Use ESLint to lint your code?'
+    },
+    'commitlint': {
+      'type': 'confirm',
+      'message': 'Setup Commit Lint and Pre-Commit Hooks?'
+    }
+  },
+  'filters': {
+    '.eslintrc.js': 'lint',
+    '.commitlintrc.js' : 'commitlint'
+  },
+  'completeMessage': 'To get started:\n\n  cd {{destDirName}}\n  composer install\n  npm install\n  npm run dev'
+};

template/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env"],
+  "plugins": ["transform-object-rest-spread"]
+}

template/.commitlintrc.js

@@ -0,0 +1,29 @@
+const Configuration = {
+  extends: [ '@commitlint/config-conventional' ],
+  rules: {
+    'subject-case': [
+      2,
+      'never',
+      ['start-case', 'pascal-case', 'upper-case']
+    ],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'build',
+        'chore',
+        'ci',
+        'docs',
+        'feat',
+        'fix',
+        'perf',
+        'refactor',
+        'revert',
+        'style',
+        'test'
+      ]
+    ]
+  }
+};
+
+module.exports = Configuration;

template/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": "standard",
+  "plugins": [
+    "html"
+  ],
+  "env": {
+    "jasmine": true
+  }
+}

template/.gitignore

@@ -0,0 +1,11 @@
+.idea
+node_modules
+logs
+dist
+artifact
+vendor
+bin
+composer.lock
+**/*.js.map
+**/*.css.map
+**/.DS_Store

template/README.md

@@ -0,0 +1,24 @@
+# {{ name }}
+
+> {{ description }}
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# lint all *.js and *.vue files
+npm run lint
+
+# run unit tests
+npm test
+```
+
+For more information see the [docs for vueify](https://github.com/vuejs/vueify).

template/assets/scss/style.scss

@@ -0,0 +1,10 @@
+.{{lowercaseAbbrev name}}-wrap {
+  background-color: #fff;
+  padding: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 0 10px -5px rgba(0,0,0,0.5);
+  border-radius: 3px;
+  text-align: center;
+}

template/assets/src/App.vue

@@ -0,0 +1,23 @@
+/* jshint esversion: 6 */
+<template>
+	<div>
+		<h1>\{{this.strings.title}}</h1>
+		<p>\{{this.strings.description}}</p>
+	</div>
+</template>
+
+<script>
+  /* global {{abbreviate name}} */
+  export default {
+    data () {
+      return {
+        strings: {{abbreviate name}}.strings
+      }
+    },
+    name: 'App.vue'
+  }
+</script>
+
+<style scoped>
+
+</style>

template/assets/src/main.js

@@ -0,0 +1,11 @@
+/* jshint esversion: 6 */
+import Vue from 'vue'
+import App from './App.vue'
+
+window.addEventListener('load', function () {
+  new Vue({ // eslint-disable-line no-new
+    el: '#{{lowercaseAbbrev name}}-app',
+    components: { App },
+    render: (h) => h(App)
+  })
+})

template/composer.json

@@ -0,0 +1,26 @@
+{
+  "name": "codeinwp/{{slug}}",
+  "description": "{{description}}",
+  "homepage": "{{authorUrl}}",
+  "license": "{{license}}",
+  "authors": [
+    {
+      "name": "{{author}}",
+      "email": "[email protected]",
+      "homepage": "{{authorUrl}}"
+    }
+  ],
+  "scripts": {
+    "format": "phpcbf --standard=phpcs.xml --report-summary --report-source -s  --runtime-set testVersion 5.4- ",
+    "phpcs": "phpcs --standard=phpcs.xml -s --runtime-set testVersion 5.4-",
+    "lint": "composer run-script phpcs"
+  },
+  "minimum-stability": "dev",
+  "prefer-stable": true,
+  "extra": {
+    "installer-disable": "true"
+  },
+  "require-dev": {
+    "dealerdirect/phpcodesniffer-composer-installer": "^0.5.0"
+  }
+}

template/docker-compose.yml

@@ -0,0 +1,27 @@
+version: '3.1'
+
+services:
+  wordpress:
+    depends_on:
+      - mysql
+    image: hardeepasrani/pirate-brewery
+    ports:
+      - 998:80
+    volumes:
+      - ./:/var/www/html/wp-content/plugins/{{name}}
+    restart: always
+    environment:
+      WORDPRESS_DB_NAME: wordpress
+      WORDPRESS_DB_USER: wordpress
+      WORDPRESS_DB_PASSWORD: wordpress
+      WORDPRESS_DB_ROOT_PASSWORD: wordpress
+  mysql:
+    image: mysql:5.7
+    volumes:
+      - ~/db_data{{abbreviation}}:/var/lib/mysql
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: wordpress
+      MYSQL_DATABASE: wordpress
+      MYSQL_USER: wordpress
+      MYSQL_PASSWORD: wordpress

template/includes/admin.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Admin part.
+ *
+ * @package {{abbreviate name}}
+ */
+
+namespace {{abbreviate name}};
+
+/**
+ * Class Admin
+ *
+ * @package {{abbreviate name}}
+ */
+class Admin {
+	/**
+	 * Admin constructor.
+	 *
+	 * @access public
+	 * @return void
+	 */
+	public function __construct() {
+		add_action( 'admin_menu', [ $this, 'admin_menu' ] );
+	}
+
+	/**
+	 * Add admin menu page.
+	 *
+	 * @hooked `admin_menu`
+	 * @access public
+	 * @return void
+	 */
+	public function admin_menu() {
+		add_menu_page( __( '{{niceName}} App', '{{textdomain}}' ), __( '{{niceName}} App', '{{textdomain}}' ), 'manage_options', '{{lowercaseAbbrev name}}-app', [ $this, 'plugin_page' ], 'dashicons-heart' );
+	}
+
+	/**
+	 * Admin page render callback.
+	 *
+	 * @access public
+	 * @return void
+	 */
+	public function plugin_page() {
+		echo '<div class="{{lowercaseAbbrev name}}-wrap"><div id="{{lowercaseAbbrev name}}-app"></div></div>';
+	}
+}