├── .gitlab-ci.yml
├── LICENSE
├── README.md
├── docker-compose.yml
├── nginx
    ├── Dockerfile
    └── default.conf
├── nuxt
    ├── Dockerfile
    ├── LICENSE
    ├── README.md
    ├── assets
    │   └── README.md
    ├── components
    │   ├── AppLogo.vue
    │   ├── Blog.vue
    │   ├── BlogPost.vue
    │   ├── Header.vue
    │   ├── Menu.vue
    │   └── README.md
    ├── helpers
    │   ├── getByPath.js
    │   └── index.js
    ├── layouts
    │   ├── README.md
    │   ├── default.vue
    │   └── error.vue
    ├── middleware
    │   └── README.md
    ├── nuxt.config.js
    ├── package.json
    ├── pages
    │   ├── README.md
    │   ├── _page.vue
    │   ├── blog
    │   │   ├── _post.vue
    │   │   └── index.vue
    │   └── index.vue
    ├── plugins
    │   └── README.md
    ├── static
    │   ├── README.md
    │   └── favicon.ico
    ├── store
    │   ├── README.md
    │   └── index.js
    └── test
    │   └── index.test.js
└── wordpress
    ├── Dockerfile
    ├── cmd.sh
    ├── plugins
        └── README.md
    └── uploads.ini


/.gitlab-ci.yml:
--------------------------------------------------------------------------------
 1 | stages:
 2 |  - deploy
 3 | 
 4 | services:
 5 |   - docker:dind
 6 | 
 7 | image: docker
 8 | 
 9 | before_script:
10 |   - apk add --update py-pip
11 |   - pip install docker-compose
12 | 
13 | deploy:
14 |   stage: deploy
15 |   script:
16 |     - mkdir $DOCKER_CERT_PATH
17 |     - echo "$CA" > $DOCKER_CERT_PATH/ca.pem
18 |     - echo "$CLIENT_CERT" > $DOCKER_CERT_PATH/cert.pem
19 |     - echo "$CLIENT_KEY" > $DOCKER_CERT_PATH/key.pem
20 |     - docker-compose build
21 |     - docker-compose up -d
22 |     - rm -rf $DOCKER_CERT_PATH
23 |   only:
24 |     - master
25 |   variables:
26 |     DOCKER_TLS_VERIFY: "1"
27 |     DOCKER_HOST: "tcp://[YOUR_HOST_IP_HERE]:2376"
28 |     DOCKER_CERT_PATH: "certs"
29 |   tags:
30 |     - docker
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Nikita Makhov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-wp-docker
 2 | Docker-compose for Wordpress (REST API) and Nuxt.js
 3 | 
 4 | ![Main page](https://user-images.githubusercontent.com/299118/45650683-bc9de700-bad7-11e8-9cb4-95c88a3cbfe8.png)
 5 | 
 6 | ## Local install
 7 | 
 8 | 1) clone this repo
 9 | 2) cd to folder with repo
10 | 3) docker-compose up -d
11 | 4) open `localhost:5000/wp-admin/` and install wordpress
12 | 5) open `localhost:5000/wp-admin/options-permalink.php` and update permalink to human readable like `/posts/%postname%`
13 | 6) make two new pages with slug `main` and `blog`
14 | 7) open localhost:5000
15 | 
16 | ![Blog](https://user-images.githubusercontent.com/299118/45650746-f66eed80-bad7-11e8-8506-2b480f1fc11b.png)
17 | 
18 | ## Development
19 | 
20 | You can debug your Nuxt app with famous [vue-devtools](https://github.com/vuejs/vue-devtools). It's all ready.
21 | 
22 | ![vue-devtools](https://user-images.githubusercontent.com/299118/45650892-654c4680-bad8-11e8-9958-68691f59d8c6.png)
23 | 
24 | ## Production
25 | 
26 | To build production version of Nuxt open `docker-composer.yml`, find `nuxt` section and in `command` change to `npm run start` like this:
27 | 
28 | ```
29 | nuxt:
30 |     build: ./nuxt
31 |     depends_on:
32 |       - wp
33 |       - db
34 |     networks:
35 |       - flat-network
36 |     restart: always
37 |     command:
38 |       "npm run start"
39 | ```
40 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: '3'
 2 | services:
 3 |   nginx:
 4 |     build: ./nginx
 5 |     ports:
 6 |       - "5000:80"
 7 |     depends_on:
 8 |       - nuxt
 9 |       - wp
10 |     networks:
11 |       - flat-network
12 |   nuxt:
13 |     build: ./nuxt
14 |     depends_on:
15 |       - wp
16 |       - db
17 |     networks:
18 |       - flat-network
19 |     restart: always
20 |     command:
21 |       "npm run dev"
22 |   wp:
23 |     build: ./wordpress
24 |     volumes:
25 |       - ./wordpress/plugins:/app/wordpress/wp-content/plugins
26 |     depends_on:
27 |       - db
28 |     environment:
29 |       WORDPRESS_DB_HOST: db:3306
30 |       WORDPRESS_DB_USER: wordpress
31 |       WORDPRESS_DB_PASSWORD: wordpress
32 |       WORDPRESS_DB_NAME: wordpress 
33 |     networks:
34 |       - flat-network
35 |   db:
36 |     image: mysql:5.7
37 |     volumes:
38 |       - ./db_data:/var/lib/mysql
39 |     restart: always
40 |     environment:
41 |       MYSQL_ROOT_PASSWORD: somewordpress
42 |       MYSQL_DATABASE: wordpress
43 |       MYSQL_USER: wordpress
44 |       MYSQL_PASSWORD: wordpress
45 |     networks:
46 |       - flat-network
47 | 
48 | networks:
49 |   flat-network:
50 | 
51 | volumes:
52 |   db_data:
53 | 


--------------------------------------------------------------------------------
/nginx/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM nginx:alpine
2 | 
3 | COPY default.conf /etc/nginx/conf.d/


--------------------------------------------------------------------------------
/nginx/default.conf:
--------------------------------------------------------------------------------
 1 | server {
 2 |     listen       80;
 3 |     server_name  localhost;
 4 | 
 5 |     client_max_body_size 64M;
 6 | 
 7 |     location ~ ^/wp([a-z-_*]) {
 8 |       proxy_pass http://wp:8080;
 9 |       proxy_set_header Host $http_host;
10 |       proxy_set_header X-Real-IP $remote_addr;
11 |       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
12 |       proxy_set_header X-Forwarded-Proto $scheme;
13 |     }
14 | 
15 |     location / {
16 |       proxy_pass http://nuxt:3000;
17 |       proxy_set_header Host $http_host;
18 |       proxy_set_header X-Real-IP $remote_addr;
19 |       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
20 |       proxy_set_header X-Forwarded-Proto $scheme;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/nuxt/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:10.7
2 | 
3 | ENV APP_ROOT /src
4 | ENV HOST 0.0.0.0
5 | 
6 | WORKDIR ${APP_ROOT}
7 | ADD . ${APP_ROOT}
8 | RUN npm install && npm run build


--------------------------------------------------------------------------------
/nuxt/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Nikita Makhov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/nuxt/README.md:
--------------------------------------------------------------------------------
 1 | # vue-wordpress
 2 | 
 3 | > Vue + Wordpress project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | $ npm install # Or yarn install
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ npm run dev
13 | 
14 | # build for production and launch server
15 | $ npm run build
16 | $ npm start
17 | 
18 | # generate static project
19 | $ npm run generate
20 | ```
21 | 
22 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
23 | 
24 | 


--------------------------------------------------------------------------------
/nuxt/assets/README.md:
--------------------------------------------------------------------------------
 1 | # ASSETS
 2 | 
 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
 4 | 
 5 | More information about the usage of this directory in the documentation:
 6 | https://nuxtjs.org/guide/assets#webpacked
 7 | 
 8 | **This directory is not required, you can delete it if you don't want to use it.**
 9 | 
10 | 


--------------------------------------------------------------------------------
/nuxt/components/AppLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div 
 3 |     class="VueToNuxtLogo"
 4 |     :class="size"
 5 |   >
 6 |     <div class="Triangle Triangle--two"/>
 7 |     <div class="Triangle Triangle--one"/>
 8 |     <div class="Triangle Triangle--three"/>
 9 |     <div class="Triangle Triangle--four"/>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: {
16 |     size: String
17 |   }
18 | };
19 | </script>
20 | 
21 | <style>
22 | .VueToNuxtLogo {
23 |   display: inline-block;
24 |   animation: turn 2s linear forwards 1s;
25 |   transform: rotateX(180deg);
26 |   position: relative;
27 |   overflow: hidden;
28 |   height: 180px;
29 |   width: 245px;
30 | }
31 | 
32 | .inner-page {
33 |   zoom: 0.5;
34 | }
35 | 
36 | .Triangle {
37 |   position: absolute;
38 |   top: 0;
39 |   left: 0;
40 |   width: 0;
41 |   height: 0;
42 | }
43 | 
44 | .Triangle--one {
45 |   border-left: 105px solid transparent;
46 |   border-right: 105px solid transparent;
47 |   border-bottom: 180px solid #41b883;
48 | }
49 | 
50 | .Triangle--two {
51 |   top: 30px;
52 |   left: 35px;
53 |   animation: goright 0.5s linear forwards 3.5s;
54 |   border-left: 87.5px solid transparent;
55 |   border-right: 87.5px solid transparent;
56 |   border-bottom: 150px solid #3b8070;
57 | }
58 | 
59 | .Triangle--three {
60 |   top: 60px;
61 |   left: 35px;
62 |   animation: goright 0.5s linear forwards 3.5s;
63 |   border-left: 70px solid transparent;
64 |   border-right: 70px solid transparent;
65 |   border-bottom: 120px solid #35495e;
66 | }
67 | 
68 | .Triangle--four {
69 |   top: 120px;
70 |   left: 70px;
71 |   animation: godown 0.5s linear forwards 3s;
72 |   border-left: 35px solid transparent;
73 |   border-right: 35px solid transparent;
74 |   border-bottom: 60px solid #fff;
75 | }
76 | 
77 | @keyframes turn {
78 |   100% {
79 |     transform: rotateX(0deg);
80 |   }
81 | }
82 | 
83 | @keyframes godown {
84 |   100% {
85 |     top: 180px;
86 |   }
87 | }
88 | 
89 | @keyframes goright {
90 |   100% {
91 |     left: 70px;
92 |   }
93 | }
94 | </style>
95 | 
96 | 


--------------------------------------------------------------------------------
/nuxt/components/Blog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <BlogPost v-for="post in posts" :key="post.id" :post="post"></BlogPost>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import BlogPost from "~/components/BlogPost.vue";
 9 | 
10 | export default {
11 |   components: {
12 |     BlogPost
13 |   },
14 |   props: {
15 |     posts: Array
16 |   }
17 | };
18 | </script>


--------------------------------------------------------------------------------
/nuxt/components/BlogPost.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-if="post">
 3 |       <article v-if="isSingle" class="post">
 4 |           <h1 class="post__title" v-html="post.title.rendered" />
 5 |           <div class="post__content" v-html="post.content.rendered" />
 6 |       </article>
 7 | 
 8 |       <article v-else class="post">
 9 |           <h1 class="post__title">
10 |             <nuxt-link :to="`blog/${post.slug}`">{{ post.title.rendered }}</nuxt-link>
11 |           </h1>
12 |           <div class="post__excerpt" v-html="post.excerpt.rendered"></div>
13 |       </article>
14 |     </div>
15 |     
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   props: {
21 |     post: Object,
22 |     isSingle: Boolean
23 |   }
24 | };
25 | </script>
26 | 
27 | <style>
28 | .post {
29 |   margin-bottom: 40px;
30 | }
31 | 
32 | .post__title {
33 |   font-size: 1.5rem;
34 |   margin-bottom: 20px;
35 | }
36 | 
37 | .post__title a {
38 |   text-decoration: none;
39 | }
40 | 
41 | .post__excerpt {
42 |   font-size: 1rem;
43 |   line-height: 1.5rem;
44 | }
45 | </style>


--------------------------------------------------------------------------------
/nuxt/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <header v-if="image" class="header" :style="{ backgroundImage: `url('${image}')` }">
 3 |         <Menu theme="theme_white" v-bind:items="routes"/>
 4 |     </header>
 5 | 
 6 |     <header v-else class="header">
 7 |         <Menu v-bind:items="routes"/>
 8 |     </header>
 9 | </template>
10 | 
11 | <script>
12 | import Menu from "~/components/Menu.vue";
13 | 
14 | export default {
15 |   components: {
16 |     Menu
17 |   },
18 |   props: {
19 |     image: String
20 |   },
21 |   data: function() {
22 |     return {
23 |       routes: [
24 |         {
25 |           id: "1",
26 |           path: "/",
27 |           text: "Home"
28 |         },
29 |         {
30 |           id: "2",
31 |           path: "/blog",
32 |           text: "Blog"
33 |         }
34 |       ]
35 |     };
36 |   }
37 | };
38 | </script>
39 | 
40 | <style>
41 | .header {
42 |   background-position: 50% 50%;
43 |   background-size: cover;
44 |   padding: 20px 60px;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/nuxt/components/Menu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <ul class="menu" :class="theme">
 3 |         <li class="menu__item" v-for="item in items" :key="item.id">
 4 |             <nuxt-link :to="item.path">{{ item.text }}</nuxt-link>
 5 |         </li>
 6 |     </ul>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: {
12 |     items: Array,
13 |     theme: String
14 |   }
15 | };
16 | </script>
17 | 
18 | <style>
19 | .menu {
20 |   text-align: right;
21 | }
22 | 
23 | .menu__item {
24 |   display: inline-block;
25 |   margin-left: 30px;
26 | }
27 | 
28 | .menu__item a {
29 |   color: #000;
30 | 
31 |   text-decoration: none;
32 | 
33 |   font-size: 1.1em;
34 |   font-weight: bold;
35 | }
36 | 
37 | .theme_white .menu__item a {
38 |   color: #fff;
39 | }
40 | 
41 | .menu__item a:hover {
42 |   color: #5694f1;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/nuxt/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | The components directory contains your Vue.js Components.
4 | Nuxt.js doesn't supercharge these components.
5 | 
6 | **This directory is not required, you can delete it if you don't want to use it.**
7 | 
8 | 


--------------------------------------------------------------------------------
/nuxt/helpers/getByPath.js:
--------------------------------------------------------------------------------
1 | const getByPath = function (path, obj) {
2 |     return (new String(path)).split('.').reduce((res, prop) => {
3 |         return res && res[prop];
4 |     }, obj);
5 | }
6 | 
7 | export default getByPath;
8 | 


--------------------------------------------------------------------------------
/nuxt/helpers/index.js:
--------------------------------------------------------------------------------
1 | import getByPath from './getByPath';
2 | 
3 | export {
4 |     getByPath
5 | }


--------------------------------------------------------------------------------
/nuxt/layouts/README.md:
--------------------------------------------------------------------------------
 1 | # LAYOUTS
 2 | 
 3 | This directory contains your Application Layouts.
 4 | 
 5 | More information about the usage of this directory in the documentation:
 6 | https://nuxtjs.org/guide/views#layouts
 7 | 
 8 | **This directory is not required, you can delete it if you don't want to use it.**
 9 | 
10 | 


--------------------------------------------------------------------------------
/nuxt/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | html {
 9 |   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
10 |     Roboto, "Helvetica Neue", Arial, sans-serif;
11 |   font-size: 16px;
12 |   word-spacing: 1px;
13 |   -ms-text-size-adjust: 100%;
14 |   -webkit-text-size-adjust: 100%;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   -webkit-font-smoothing: antialiased;
17 |   box-sizing: border-box;
18 | }
19 | 
20 | *,
21 | *:before,
22 | *:after {
23 |   box-sizing: border-box;
24 |   margin: 0;
25 | }
26 | 
27 | a {
28 |   color: #333;
29 | }
30 | 
31 | a:hover {
32 |   color: #5694f1;
33 | }
34 | 
35 | .button--green {
36 |   display: inline-block;
37 |   border-radius: 4px;
38 |   border: 1px solid #3b8070;
39 |   color: #3b8070;
40 |   text-decoration: none;
41 |   padding: 10px 30px;
42 | }
43 | 
44 | .button--green:hover {
45 |   color: #fff;
46 |   background-color: #3b8070;
47 | }
48 | 
49 | .button--grey {
50 |   display: inline-block;
51 |   border-radius: 4px;
52 |   border: 1px solid #35495e;
53 |   color: #35495e;
54 |   text-decoration: none;
55 |   padding: 10px 30px;
56 |   margin-left: 15px;
57 | }
58 | 
59 | .button--grey:hover {
60 |   color: #fff;
61 |   background-color: #35495e;
62 | }
63 | 
64 | .container {
65 |   width: 960px;
66 |   margin: 0 auto;
67 | }
68 | </style>
69 | 
70 | 


--------------------------------------------------------------------------------
/nuxt/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="container">
 4 |             <div v-if="error.statusCode === 404">
 5 |                 <h1>Ooops, page not found</h1>
 6 |                 <h3>May be you've mistaken in address, please try our beautiful menu in header</h3>
 7 |             </div>
 8 |             <div v-else>
 9 |                 <h1>We've encountered a mistake</h1>
10 |                 <h3>We're working on it, try again later</h3>
11 |             </div>
12 |         </div>
13 |     </div>
14 | </template>
15 | 
16 | <script>
17 | 
18 | export default {
19 |   props: ["error"],
20 |   layout: "default",
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/nuxt/middleware/README.md:
--------------------------------------------------------------------------------
 1 | # MIDDLEWARE
 2 | 
 3 | This directory contains your Application Middleware.
 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
 5 | 
 6 | More information about the usage of this directory in the documentation:
 7 | https://nuxtjs.org/guide/routing#middleware
 8 | 
 9 | **This directory is not required, you can delete it if you don't want to use it.**
10 | 
11 | 


--------------------------------------------------------------------------------
/nuxt/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'vue-wordpress',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: 'Vue + Wordpress project' }
11 |     ],
12 |     link: [
13 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
14 |     ]
15 |   },
16 |   /*
17 |   ** Customize the progress bar color
18 |   */
19 |   loading: { color: '#3B8070' },
20 |   /*
21 |   ** Build configuration
22 |   */
23 |   build: {
24 |     postcss: {
25 |       plugins: {
26 |         'postcss-nested': {}
27 |       },
28 |       preset: {
29 |         features: {
30 |           'nesting-rules': true
31 |         }
32 |       }
33 |     },
34 |     extractCSS: true,
35 |     extend: (config) => {
36 |       const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
37 |  
38 |       svgRule.test = /\.(png|jpe?g|gif)$/;
39 |  
40 |       config.module.rules.push({
41 |         test: /\.svg$/,
42 |         oneOf: [
43 |           {
44 |             resourceQuery: /inline/,
45 |             loader: 'vue-svg-loader',
46 |           },
47 |           {
48 |             loader: 'file-loader',
49 |             query: {
50 |               name: 'assets/[name].[hash:8].[ext]',
51 |             },
52 |           },
53 |         ],
54 |       });
55 |     },
56 |     /*
57 |     ** Run ESLint on save
58 |     */
59 |     /* extend (config, { isDev, isClient }) {
60 |       if (isDev && isClient) {
61 |         config.module.rules.push({
62 |           enforce: 'pre',
63 |           test: /\.(js|vue)$/,
64 |           loader: 'eslint-loader',
65 |           exclude: /(node_modules)/
66 |         })
67 |       }
68 |     } */
69 |   },
70 |   modules: [
71 |     '@nuxtjs/axios',
72 |   ],
73 |   axios: {
74 |     baseURL: 'http://wp:8080',
75 |     browserBaseURL: process.env.NODE_ENV === 'development' ? 'http://localhost:5000' : 'http://[YOUR_HOST_IP_OR_DOMAIN]:5000'
76 |   },
77 |   sentry: {
78 |     public_key: 'YOUR_PUBLIC_KEY',
79 |     project_id: 'YOUR_PROJECT_ID',
80 |     config: {
81 |       // Additional config
82 |     },
83 |   },
84 | }
85 | 
86 | 


--------------------------------------------------------------------------------
/nuxt/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-wordpress",
 3 |   "version": "1.1.0",
 4 |   "description": "Vue + Wordpress project",
 5 |   "author": "Defite <me@defite.ru>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "NODE_ENV=development nuxt",
 9 |     "build": "NODE_ENV=production nuxt build",
10 |     "start": "NODE_ENV=production nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "precommit": "npm run lint",
14 |     "test": "ava"
15 |   },
16 |   "dependencies": {
17 |     "@nuxtjs/axios": "^5.3.1",
18 |     "@nuxtjs/sentry": "^2.0.0",
19 |     "nuxt": "^2.0.0",
20 |     "vue-svg-loader": "^0.10.0",
21 |     "postcss-nested": "^4.1.0"
22 |   },
23 |   "devDependencies": {
24 |     "ava": "^0.25.0",
25 |     "babel-eslint": "^10.0.1",
26 |     "eslint": "^5.6.1",
27 |     "eslint-friendly-formatter": "^3.0.0",
28 |     "eslint-loader": "^2.1.1",
29 |     "eslint-plugin-vue": "^4.0.0",
30 |     "jsdom": "^12.0.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/nuxt/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the .vue files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing
8 | 
9 | 


--------------------------------------------------------------------------------
/nuxt/pages/_page.vue:
--------------------------------------------------------------------------------
 1 | /**
 2 | * Common page
 3 | * @slug: { slug }
 4 | */
 5 | <template>
 6 |   <div>
 7 |     <section class="container">
 8 |       <h1 v-html="title"></h1>
 9 |     </section>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { getByPath } from '../helpers';
15 | 
16 | export default {
17 |   async asyncData({ app, store, params, res, error }) {
18 |     return app.$axios.get(`/wp-json/wp/v2/pages?slug=${params.page}&_embed`)
19 |             .then((page) => {
20 |               if (!page.data.length) {
21 |                 error({ statusCode: 404, message: 'Page not found' })
22 |               } else {
23 |                 store.commit("setPage", page.data[0])
24 |               }
25 |             });
26 |   },
27 | 
28 |   computed: {
29 |     title() {
30 |       return getByPath('page.title.rendered', this.$store.state) || '';
31 |     }
32 |   }
33 | };
34 | </script>
35 | 


--------------------------------------------------------------------------------
/nuxt/pages/blog/_post.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Header />
 4 |         <section class="container">
 5 |             <BlogPost isSingle :post="post" />
 6 | 
 7 |         </section>
 8 |     </div>
 9 | </template>
10 | 
11 | <script>
12 | import Header from "~/components/Header";
13 | import BlogPost from "~/components/BlogPost";
14 | 
15 | export default {
16 |   async asyncData({ app, store, params }) {
17 |     let post = await app.$axios.get(
18 |       `/wp-json/wp/v2/posts?slug=${params.post}&_embed`
19 |     );
20 | 
21 |     store.commit("setPost", post.data[0]);
22 |   },
23 | 
24 |   components: {
25 |     Header,
26 |     BlogPost
27 |   },
28 | 
29 |   computed: {
30 |     post() {
31 |       return this.$store.state.post;
32 |     }
33 |   }
34 | };
35 | </script>
36 | 
37 | <style>
38 | .post p {
39 |   margin-bottom: 1rem;
40 | }
41 | 
42 | .wp-block-image {
43 |   text-align: center;
44 | }
45 | 
46 | .wp-block-image figcaption {
47 |   font-size: 0.85rem;
48 |   color: #aaa;
49 | }
50 | </style>


--------------------------------------------------------------------------------
/nuxt/pages/blog/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <Header />
 4 | 
 5 |         <div class="featured-image" :style="{ backgroundImage: `url('${getFeaturedImage}')` }">
 6 |         </div>
 7 | 
 8 |         <section class="container">
 9 |             <Blog :posts="posts"/>            
10 |         </section>
11 |     </div>
12 | </template>
13 | 
14 | <script>
15 | import Blog from "~/components/Blog.vue";
16 | import Header from "~/components/Header.vue";
17 | 
18 | import { getByPath } from '~/helpers';
19 | 
20 | 
21 | export default {
22 |   async asyncData({ app, store, params }) {
23 |     if (!store.state.posts.length) {
24 |       let posts = await app.$axios.get(
25 |         `/wp-json/wp/v2/posts?orderby=date&per_page=7&_embed`
26 |       );
27 | 
28 |       store.commit("setPosts", posts.data);
29 |     }
30 | 
31 |     if (!store.state.blog) {
32 |       let blog = await app.$axios.get(`/wp-json/wp/v2/pages?slug=blog&_embed`);
33 | 
34 |       store.commit("setBlogPage", blog.data[0]);
35 |     }
36 |   },
37 |   components: {
38 |     Blog,
39 |     Header
40 |   },
41 |   computed: {
42 |     posts() {
43 |       return this.$store.state.posts;
44 |     },
45 |     getFeaturedImage() {
46 |       return getByPath('blog._embedded["wp:featuredmedia"][0].source_url', this.$store.state) || '';
47 |     }
48 |   }
49 | };
50 | </script>
51 | 
52 | <style scoped>
53 | .header {
54 |   height: 65px;
55 | }
56 | 
57 | .featured-image {
58 |   height: 200px;
59 |   background-position: 50% 50%;
60 |   background-size: cover;
61 |   margin-bottom: 40px;
62 | }
63 | 
64 | .container {
65 |   width: 960px;
66 |   margin: 0 auto;
67 | }
68 | 
69 | .title {
70 |   font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
71 |     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
72 |   display: block;
73 |   font-weight: 300;
74 |   font-size: 100px;
75 |   color: #35495e;
76 |   letter-spacing: 1px;
77 | }
78 | 
79 | .subtitle {
80 |   font-weight: 300;
81 |   font-size: 42px;
82 |   color: #526488;
83 |   word-spacing: 5px;
84 |   padding-bottom: 15px;
85 | }
86 | 
87 | .links {
88 |   padding-top: 15px;
89 | }
90 | </style>


--------------------------------------------------------------------------------
/nuxt/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Header :image="headerImage"/>
 4 |     <section class="container">
 5 |       <div></div>
 6 |     </section>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Header from "~/components/Header";
12 | import { getByPath } from '../helpers';
13 | 
14 | export default {
15 |   async asyncData({ app, store, params }) {
16 |     if (!store.state.page) {
17 |       let page = await app.$axios.get(`/wp-json/wp/v2/pages?slug=main&_embed`);
18 | 
19 |       store.commit("setPage", page.data[0]);
20 |     }
21 |   },
22 | 
23 |   components: {
24 |     Header
25 |   },
26 | 
27 |   computed: {
28 |     headerImage() {
29 |       return getByPath('page._embedded["wp:featuredmedia"][0].source_url', this.$store.state) || '';
30 |     }
31 |   }
32 | };
33 | </script>
34 | 
35 | <style scoped>
36 | .header {
37 |   height: 400px;
38 | }
39 | </style>
40 | 
41 | 


--------------------------------------------------------------------------------
/nuxt/plugins/README.md:
--------------------------------------------------------------------------------
 1 | # PLUGINS
 2 | 
 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
 4 | 
 5 | More information about the usage of this directory in the documentation:
 6 | https://nuxtjs.org/guide/plugins
 7 | 
 8 | **This directory is not required, you can delete it if you don't want to use it.**
 9 | 
10 | 


--------------------------------------------------------------------------------
/nuxt/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | This directory contains your static files.
 4 | Each file inside this directory is mapped to /.
 5 | 
 6 | Example: /static/robots.txt is mapped as /robots.txt.
 7 | 
 8 | More information about the usage of this directory in the documentation:
 9 | https://nuxtjs.org/guide/assets#static
10 | 
11 | **This directory is not required, you can delete it if you don't want to use it.**
12 | 
13 | 


--------------------------------------------------------------------------------
/nuxt/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Defite/nuxt-wp-docker/ea2db29cfaf45552c522f9c46842a67dcb516912/nuxt/static/favicon.ico


--------------------------------------------------------------------------------
/nuxt/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | This directory contains your Vuex Store files.
 4 | Vuex Store option is implemented in the Nuxt.js framework.
 5 | Creating a index.js file in this directory activate the option in the framework automatically.
 6 | 
 7 | More information about the usage of this directory in the documentation:
 8 | https://nuxtjs.org/guide/vuex-store
 9 | 
10 | **This directory is not required, you can delete it if you don't want to use it.**
11 | 
12 | 


--------------------------------------------------------------------------------
/nuxt/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vuex from 'vuex'
 2 | 
 3 | const store = () => new Vuex.Store({
 4 | 
 5 |   actions: {
 6 |     async nuxtServerInit ({ commit, state }) {
 7 |       let meta = await this.$axios.get('/wp-json/wp/v2')
 8 |       commit('setMeta', meta.data)
 9 |     }
10 |   },
11 | 
12 |   state: {
13 |     post: null,
14 |     posts: [],
15 |     page: null,
16 |     blog: null,
17 |     indexInfiniteLoading: {
18 |       enabled: true,
19 |       page: 1
20 |     },
21 |     meta: {
22 |       description: '',
23 |       name: ''
24 |     }
25 |   },
26 | 
27 |   mutations: {
28 |     setPost (state, data) {
29 |       state.post = data
30 |     },
31 |     setPosts (state, data) {
32 |       state.posts = state.posts.concat(data)
33 |     },
34 |     setBlogPage (state, data) {
35 |       state.blog = data
36 |     },
37 |     setPage (state, data) {
38 |       state.page = data
39 |     },
40 |     setIndexInfiniteLoading (state, data) {
41 |       state.indexInfiniteLoading = data
42 |     },
43 |     setMeta (state, data) {
44 |       state.meta = data
45 |     }
46 |   }
47 | })
48 | 
49 | export default store


--------------------------------------------------------------------------------
/nuxt/test/index.test.js:
--------------------------------------------------------------------------------
 1 | import test from 'ava'
 2 | import { Nuxt, Builder } from 'nuxt'
 3 | import { resolve } from 'path'
 4 | 
 5 | let nuxt = null;
 6 | 
 7 | // Init Nuxt.js и create server on localhost:4000
 8 | test.before('Init Nuxt.js', async t => {
 9 |     const rootDir = resolve(__dirname, '..')
10 |     let config = {}
11 |     try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
12 |     config.rootDir = rootDir // project folder
13 |     config.dev = false // final build
14 |     nuxt = new Nuxt(config)
15 |     await new Builder(nuxt).build()
16 |     nuxt.listen(4000, 'localhost')
17 | });
18 | 
19 | // Пример генерации html-кода только для этого теста
20 | test('Route / exits and render HTML', async t => {
21 |     let context = {}
22 |     const { html } = await nuxt.renderRoute('/', context)
23 |     t.true(html.includes('<h1 class="red">Hello world!</h1>'))
24 | });
25 |   
26 |   // Пример тестирования с помощью проверки DOM
27 | test('Route / exits and render HTML with CSS applied', async t => {
28 |     const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
29 |     const element = window.document.querySelector('.red')
30 |     t.not(element, null)
31 |     t.is(element.textContent, 'Hello world!')
32 |     t.is(element.className, 'red')
33 |     t.is(window.getComputedStyle(element).color, 'red')
34 | });
35 |   
36 |   // Остановить сервер и попросить nuxt не отслеживать изменения файлов
37 | test.after('Closing server and nuxt.js', t => {
38 |     nuxt.close()
39 | });


--------------------------------------------------------------------------------
/wordpress/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM wordpress:php7.2-fpm-alpine
 2 | 
 3 | RUN apk add --no-cache curl tar \
 4 |     && mkdir -p /app \
 5 |     && curl -o wordpress.tar.gz https://wordpress.org/latest.tar.gz \
 6 |     && tar -zxf wordpress.tar.gz -C /app/ \
 7 |     && rm -rf wordpress.tar.gz \
 8 |     && mv /app/wordpress/wp-config-sample.php /app/wordpress/wp-config.php
 9 | 
10 | COPY cmd.sh /usr/local/bin/
11 | COPY uploads.ini /usr/local/etc/php/conf.d/uploads.ini
12 | ADD plugins /app/wordpress/wp-content/plugins
13 | CMD ["cmd.sh"]
14 | 


--------------------------------------------------------------------------------
/wordpress/cmd.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | # Wordpress config stuff
 4 | cd /app/wordpress
 5 | sed -i -e "s/database_name_here/$WORDPRESS_DB_NAME/" wp-config.php
 6 | sed -i -e "s/username_here/$WORDPRESS_DB_USER/" wp-config.php
 7 | sed -i -e "s/password_here/$WORDPRESS_DB_PASSWORD/" wp-config.php
 8 | sed -i -e "s/localhost/$WORDPRESS_DB_HOST/" wp-config.php
 9 | echo -e "define('FS_METHOD', 'direct');" >> wp-config.php
10 | 
11 | php -S 0.0.0.0:8080
12 | 


--------------------------------------------------------------------------------
/wordpress/plugins/README.md:
--------------------------------------------------------------------------------
1 | ## Wordpress plugins
2 | 
3 | This is the folder to store all your plugins. I use it to store my own plugins, that you can't download from [Wordpress.org](https://wordpress.org).


--------------------------------------------------------------------------------
/wordpress/uploads.ini:
--------------------------------------------------------------------------------
1 | file_uploads = On
2 | memory_limit = 64M
3 | upload_max_filesize = 64M
4 | post_max_size = 64M
5 | max_execution_time = 600


--------------------------------------------------------------------------------