base level outline | working API | working compose

.gitignore

@@ -0,0 +1,31 @@
+# File system junk files
+Desktop.ini
+Thumbs.db
+.DS_Store
+._*
+.Spotlight-V100
+.Trashes
+.apdisk
+.fseventsd
+..bfg-report
+
+# Archives
+*.zip
+
+# Editor files
+*.sublime-*
+*.swp
+.c9
+
+# Wordpress
+uploads
+db
+**/node_modules
+plugins/cmb2
+plugins/duplicator
+plugins/hello.php
+plugins/akismet
+plugins/regenerate-thumbnails
+
+# Env
+.env

configs/wp-config.php

@@ -0,0 +1,100 @@
+<?php
+/**
+ * The base configuration for WordPress
+ *
+ * The wp-config.php creation script uses this file during the
+ * installation. You don't have to use the web site, you can
+ * copy this file to "wp-config.php" and fill in the values.
+ *
+ * This file contains the following configurations:
+ *
+ * * MySQL settings
+ * * Secret keys
+ * * Database table prefix
+ * * ABSPATH
+ *
+ * @link https://codex.wordpress.org/Editing_wp-config.php
+ *
+ * @package WordPress
+ */
+// Get custom environmental variables
+define('DB_PASSWORD', getenv('WORDPRESS_DB_PASSWORD'));
+define('DB_USER', getenv('WORDPRESS_DB_USER'));
+
+// ** MySQL settings - You can get this info from your web host ** //
+/** The name of the database for WordPress */
+define('DB_NAME', getenv('WORDPRESS_DB_NAME'));
+
+/** MySQL hostname */
+define('DB_HOST', 'mysql');
+
+/** Database Charset to use in creating database tables. */
+define('DB_CHARSET', 'utf8');
+
+/** The Database Collate type. Don't change this if in doubt. */
+define('DB_COLLATE', '');
+
+/**#@+
+ * Authentication Unique Keys and Salts.
+ *
+ * Change these to different unique phrases!
+ * You can generate these using the {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org secret-key service}
+ * You can change these at any point in time to invalidate all existing cookies. This will force all users to have to log in again.
+ *
+ * @since 2.6.0
+ */
+define('AUTH_KEY',         '5c79fa8455ac3a9d073b092f0d037bd59d76b46d');
+define('SECURE_AUTH_KEY',  '08bb369f951055190f734de6604e2e73d2ab4a5a');
+define('LOGGED_IN_KEY',    '7df12c7b77e5003dc495d065aba00d4ae92fcc6b');
+define('NONCE_KEY',        '55f0ec0d7a24dbe325ff9acbbf58fa5bb96aec3e');
+define('AUTH_SALT',        '5ff82df7f4a65524c25f17eaa7d1d0ed6b728824');
+define('SECURE_AUTH_SALT', '74696d119a6aa7b177f0e0123e5248b0c95621cf');
+define('LOGGED_IN_SALT',   '572abf75e1d94e2d715f5f7d3afb8fad96512cd8');
+define('NONCE_SALT',       '409a7ac7260e68234bfe5a19b4454e28aad34e73');
+
+/**#@-*/
+
+/**
+ * WordPress Database Table prefix.
+ *
+ * You can have multiple installations in one database if you give each
+ * a unique prefix. Only numbers, letters, and underscores please!
+ */
+$table_prefix  = 'wp_';
+
+/**
+ * For developers: WordPress debugging mode.
+ *
+ * Change this to true to enable the display of notices during development.
+ * It is strongly recommended that plugin and theme developers use WP_DEBUG
+ * in their development environments.
+ *
+ * For information on other constants that can be used for debugging,
+ * visit the Codex.
+ *
+ * @link https://codex.wordpress.org/Debugging_in_WordPress
+ */
+define('WP_DEBUG', false);
+
+// If we're behind a proxy server and using HTTPS, we need to alert Wordpress of that fact
+// see also http://codex.wordpress.org/Administration_Over_SSL#Using_a_Reverse_Proxy
+if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
+        $_SERVER['HTTPS'] = 'on';
+}
+
+/* That's all, stop editing! Happy blogging. */
+
+/** Absolute path to the WordPress directory. */
+if ( !defined('ABSPATH') )
+        define('ABSPATH', dirname(__FILE__) . '/');
+
+/** Sets up WordPress vars and included files. */
+require_once(ABSPATH . 'wp-settings.php');
+
+/** DEV */
+define('IS_DEV', getenv('IS_DEV'));
+if(defined('IS_DEV') && IS_DEV ) {
+        $_SERVER['HTTPS'] = 'off';
+} else {
+        $_SERVER['HTTPS'] = 'on';
+}

docker-compose.yml

@@ -0,0 +1,45 @@
+version: '3' 
+
+services:
+    vue-wp:
+        depends_on:
+            - vue-db
+        image: wordpress
+        container_name: "vue-wp"
+        volumes:
+            - ./configs/wp-config.php:/usr/src/wordpress/wp-config-sample.php
+            - ./uploads:/var/www/html/wp-content/uploads
+            - ./plugins:/var/www/html/wp-content/plugins
+            - ./vue-theme:/var/www/html/wp-content/themes/vue-theme
+            - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
+        ports:
+            - "8080:80"
+        links:
+            - vue-db:mysql
+        environment:
+            WORDPRESS_DB_PASSWORD: "${DB_PASSWORD}"
+            IS_DEV: "${IS_DEV}"
+            WORDPRESS_DB_NAME: current_db
+
+    vue-db:
+        image: mariadb
+        container_name: "vue-db"
+        environment:
+            MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
+            INNODB_FLUSH_METHOD: O_DSYNC
+        volumes:
+            - db:/var/lib/mysql
+
+    vue-phpmyadmin:
+        image: phpmyadmin/phpmyadmin
+        container_name: "vue-phpmyadmin"
+        depends_on:
+            - vue-db
+        ports:
+            - 8181:80
+        environment:
+            PMA_HOST: vue-db
+            MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
+
+volumes:
+    db:

plugins/index.php

@@ -0,0 +1,2 @@
+<?php
+// Silence is golden.

uploads.ini

@@ -0,0 +1,5 @@
+file_uploads = On 
+memory_limit = 512M
+upload_max_filesize = 20M
+post_max_size = 20M
+max_execution_time = 1200

vue-theme/functions.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * Theme Functions - functions.php
+ * 
+ * 1. Scripts needed to run the vue theme
+ */
+
+$path = $_SERVER['DOCUMENT_ROOT'];
+
+require_once $path . '/wp-load.php';
+require_once $path . '/wp-config.php';
+require_once $path . '/wp-includes/wp-db.php';
+require_once $path . '/wp-includes/pluggable.php';
+
+// https://github.com/EvanAgee/vuejs-wordpress-theme-starter/blob/master/functions.php
+remove_action( 'template_redirect', 'redirect_canonical' );
+function remove_redirects() {
+	add_rewrite_rule( '^/(.+)/?', 'index.php', 'top' );
+}
+add_action( 'init', 'remove_redirects' );
+
+
+function vue_theme_routes() {
+    $routes = array();
+
+    $query = new WP_Query( array(
+        'post_type'   => 'any',
+        'post_status' => 'publish',
+        'posts_per_page' => -1
+    ) );
+    if( $query->have_posts() ) {
+        while( $query->have_posts() ) {
+            $query->the_post();
+            $routes[] = array(
+                'id' => get_the_ID(),
+                'type' => get_post_type(),
+                'slug' => basename( get_permalink() ),
+            );
+        }
+    }
+    wp_reset_postdata();
+
+    return $routes;
+}
+
+/* 1 */
+function vue_theme_scripts() {
+
+	wp_enqueue_style( 'style', get_stylesheet_uri() );
+
+	if ( defined( 'IS_DEV' ) && IS_DEV ) {
+		wp_register_script(
+            'vue-theme',
+            'http://localhost:8081/main.js',
+            array( 'jquery' ),
+            false,
+            true 
+        );
+	} else {
+        wp_register_script(
+            'vue-theme',
+            get_template_directory_uri() . '/public/main.js',
+            array( 'jquery' ),
+            false,
+            true 
+        );
+	}
+
+	wp_localize_script( 'vue-theme', 'wp', array(
+        'template' => get_stylesheet_directory_uri(),
+        'rest' => esc_url_raw( rest_url() ),
+        'site_name' => get_bloginfo( 'name' ),
+        // 'nonce' => wp_create_nonce( 'wp_rest' ),
+        'routes' => vue_theme_routes(),
+    ) );
+
+    wp_enqueue_script( 'vue-theme' );
+}
+add_action( 'wp_enqueue_scripts', 'vue_theme_scripts' );

vue-theme/index.php

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+    <head>
+        <title><?php wp_title(); ?></title>
+        <meta charset="<?php bloginfo( 'charset' ); ?>">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
+        <?php wp_head(); ?>
+    </head>
+    <body>
+        <div id="content" class="site-content" style="display:none">
+
+        <?php
+
+        if ( have_posts() ) {
+
+            if ( is_home() && ! is_front_page() ) {
+                echo '<h1>' . single_post_title( '', false ) . '</h1>';
+            }
+
+            while ( have_posts() ) {
+
+                the_post();
+
+                if ( is_singular() ) {
+                    the_title( '<h1>', '</h1>' );
+                } else {
+                    the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' );
+                }
+
+                the_content();
+            }
+        }
+
+        ?>
+        
+        </div>
+        
+        <div id="wp-app"></div>
+
+        <?php wp_footer(); ?>
+    </body>
+</html>

vue-theme/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "vue-theme",
+  "version": "1.0.0",
+  "description": "Wordpress SPA theme base",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server --hot"
+  },
+  "keywords": [
+    "wordpress",
+    "vue"
+  ],
+  "author": "TOJ",
+  "license": "UNLICENSED",
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "axios": "^0.19.2",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.4.2",
+    "file-loader": "^6.0.0",
+    "postcss-calc": "^7.0.2",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
+    "precss": "^4.0.0",
+    "pug": "^2.0.4",
+    "pug-plain-loader": "^1.0.0",
+    "sugarss": "^2.0.0",
+    "url-loader": "^4.0.0",
+    "vue-hot-reload-api": "^2.3.4",
+    "vue-loader": "^15.9.1",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "dependencies": {
+    "compression-webpack-plugin": "^3.1.0",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.6"
+  },
+  "babel": {
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "browsers": [
+              "last 2 Chrome versions",
+              "last 2 Firefox versions"
+            ]
+          }
+        }
+      ]
+    ],
+    "comments": false,
+    "plugins": []
+  }
+}

vue-theme/src/app.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+div(id="theme")
+    h1 hello new-theme
+    router-view
+</template>
+
+<script>
+export default {
+    data () {
+        return {}
+    }
+}
+</script>
+
+<style lang="postcss">
+</style>

vue-theme/src/index.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import App from './app.vue'
+import Index from './pages/index.vue'
+
+import store from './store'
+
+const routes = [
+    {
+        path: '/',
+        component: Index
+    }
+]
+
+const router = new VueRouter({
+    mode: 'history',
+    routes
+})
+
+new Vue({ store, router, render: h=>h(App) }).$mount('#wp-app')

vue-theme/src/pages/index.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+.page--index
+    p index page
+    p {{ site }}
+    div(v-if="allPagesLoaded")
+        h2 pages
+        p {{ somePages(10) }}
+    div(v-if="allPostsLoaded")
+        h2 posts
+        p {{ allPosts }}
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    computed: {
+        ...mapGetters({
+            somePages: 'somePages',
+            allPages: 'allPages',
+            allPostsLoaded: 'allPostsLoaded',
+            allPosts: 'allPosts',
+            allPagesLoaded: 'allPagesLoaded',
+        }),
+    },
+    data() {
+        return {
+            site: wp.site_name,
+        }
+    },
+    mounted() {
+        console.log('routes: ', wp.routes)
+        console.log('rest url: ', wp.rest)
+        console.log('template: ', wp.template)
+        
+        this.$store.dispatch('getAllPages')
+        this.$store.dispatch('getAllPosts')
+    }
+}
+</script>

vue-theme/src/store/actions.js

@@ -0,0 +1,2 @@
+// for global actions
+export default () => {}

vue-theme/src/store/getters.js

@@ -0,0 +1,3 @@
+
+// For global getters
+export default () => {}

vue-theme/src/store/index.js

@@ -0,0 +1,23 @@
+// SHAMELESS THEFT: https://github.com/EvanAgee/vuejs-wordpress-theme-starter
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import * as actions from './actions'
+import * as getters from './getters'
+
+import page from './modules/page'
+import post from './modules/post'
+
+Vue.use(Vuex)
+
+const debug = process.env.NODE_ENV !== 'production'
+
+export default new Vuex.Store({
+  actions,
+  getters,
+  modules: {
+      post,
+      page,
+  },
+  strict: debug,
+})

vue-theme/src/store/modules/page.js

@@ -0,0 +1,50 @@
+import api from '../../utils/api'
+
+// initial state
+const state = {
+    all: [],
+    loaded: false,
+    page: null,
+}
+
+// getters
+const getters = {
+    allPages: state => state.all,
+    allPagesLoaded: state => state.loaded,
+    page: state => id => {
+        let field = typeof id === 'number' ? 'id' : 'slug'
+        let page = state.all.filter(page => page[field] === id)
+        return (page[0]) ? page[0] : false
+    },
+    pageContent: state => id => {
+        let field = typeof id === 'number' ? 'id' : 'slug'
+        let page = state.all.filter(page => page[field] === id)
+        
+        return (page[0]) ? page[0].content.rendered : false
+    },
+    somePages: state => limit => {
+        if(state.all.length < 1) return false
+        
+        let all = [...state.all]
+        
+        return all.splice(0, Math.min(limit, state.all.length))
+    },
+}
+
+// actions
+const actions = {
+    getAllPages({ commit }) {
+        api.getByType('pages', pages => {
+            commit('STORE_FETCHED_PAGES', { pages })
+            commit('PAGES_LOADED', true)
+        })
+    }
+}
+
+// mutations
+const mutations = {
+    STORE_FETCHED_PAGES(state, { pages }) { state.all = pages },
+    PAGES_LOADED(state, val) { state.loaded = val },
+}
+
+export default { state, getters, actions, mutations }

vue-theme/src/store/modules/post.js

@@ -0,0 +1,55 @@
+import api from '../../utils/api'
+
+const createPostSlug = post => {
+    let slug = post.link.replace(window.location.protocol + '//' + window.location.host, '')
+    post.slug = slug
+    return post
+}
+
+const state = {
+    all: [],
+    loaded: false,
+    post: null,
+}
+
+const getters = {
+    allPosts: state => state.all,
+    allPostsLoaded: state => state.loaded,
+    post: state => id => {
+        let field = typeof id === 'number' ? 'id' : 'slug'
+        let post = state.all.filter(post => post[field] === id)
+        return (post[0]) ? post[0] : false
+    },
+    postContent: state => id => {
+        let field = typeof id === 'number' ? 'id' : 'slug'
+        let post = state.all.filter(post => post[field] === id)
+        
+        return (post[0]) ? post[0].content.rendered : false
+    },
+    somePosts: state => limit => {
+        if(state.all.length < 1) return false
+        
+        let all = [...state.all]
+        
+        return all.splice(0, Math.min(limit, state.all.length))
+    },
+}
+
+const actions = {
+    getAllPosts({ commit }) {
+        api.getByType('posts', posts => {
+            posts.map((post, i) => {
+                posts[i] = createPostSlug(post)
+            })
+            commit('STORE_FETCHED_POSTS', { posts })
+            commit('POSTS_LOADED', true)
+        })
+    }
+}
+
+const mutations = {
+    STORE_FETCHED_POSTS(state, { posts }) { state.all = posts },
+    POSTS_LOADED(state, val) { state.loaded = val },
+}
+
+export default { state, getters, actions, mutations }

vue-theme/src/utils/api.js

@@ -0,0 +1,28 @@
+import axios from 'axios'
+
+const SETTINGS = { 
+    LOADING_SEGMENTS: 2,
+    API_BASE_PATH: '/wp-json/wp/v2/'
+}
+
+export default {
+    getByType(type, cb) {
+        axios.get(SETTINGS.API_BASE_PATH + `${type}?per_page=10`)
+        .then(response => {
+            cb(response.data)
+        })
+        .catch(e => {
+            cb(e)
+        })
+    },
+    getPosts(limit = 5, cb) {
+        axios
+        .get(SETTINGS.API_BASE_PATH + 'posts?per_page=' + limit)
+        .then(response => {
+            cb(response.data)
+        })
+        .catch(e => {
+            cb(e)
+        })
+    },
+}

vue-theme/src/utils/post-types.js

@@ -0,0 +1,4 @@
+export default [
+    'posts',
+    'pages'
+]

vue-theme/style.css

@@ -0,0 +1,13 @@
+/*
+Theme Name: vue-theme
+Theme URI: http://herebefoci.com
+Author: TOJ
+Author URI: http: //herebefoci.com
+Description: A WordPress theme with Vue.js and REST API
+Version: 1.0.0
+License: MIT
+Contributors: Sagar Bhatt, Pradeep Sonawane
+*/
+html body {
+    color: purple;
+}

vue-theme/webpack.config.js

@@ -0,0 +1,84 @@
+const path = require('path')
+const webpack = require('webpack')
+const { VueLoaderPlugin } = require('vue-loader')
+const CompressionPlugin = require('compression-webpack-plugin')
+
+const PostCssPlugins = [
+    require('postcss-import'),
+    require('precss'),
+    require('autoprefixer')
+]
+
+module.exports = (env = {}) => {
+    return {
+        mode: env.production ? 'production' : 'development',
+        module: {
+            rules: [{
+                    test: /\.vue$/,
+                    use: ['vue-loader']
+                },
+                {
+                    test: /\.(js)$/,
+                    loader: 'babel-loader',
+                    exclude: /node_modules/
+                },
+                {
+                    test: /\.pug$/,
+                    oneOf: [
+                        // this applies to `<template lang="pug">` in Vue components
+                        {
+                            resourceQuery: /^\?vue/,
+                            use: ['pug-plain-loader']
+                        }
+                    ]
+                },
+                {
+                    test: /\.(png|jpg|gif|svg|ttf|woff2|woff)$/,
+                    loader: 'url-loader',
+                    options: {
+                        limit: 10000,
+                        name: '[name].[ext]?[hash]'
+                    }
+                },
+                {
+                    test: /(\.html$|favicon)/,
+                    loader: 'file-loader',
+                    options: {
+                        name: '[name].[ext]'
+                    }
+                },
+                {
+                    test: /\.(css|sss|postcss)$/,
+                    use: [{
+                            loader: 'vue-style-loader'
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                parser: 'sugarss',
+                                plugins: () => {
+                                    return PostCssPlugins
+                                }
+                            }
+                        }
+                    ]
+                }
+            ]
+        },
+        output: {
+            path: path.join(__dirname, 'public'),
+            publicPath: '/'
+        },
+        devServer: {
+            historyApiFallback: true
+        },
+        devtool: env.production ? false : 'cheap-module-eval-source-map',
+        plugins: [
+            new webpack.DefinePlugin({
+                PRODUCTION: JSON.stringify(env.production)
+            }),
+            new VueLoaderPlugin(),
+            new CompressionPlugin()
+        ]
+    }
+}