Merge branch 'release/6.0.2'

* release/6.0.2:
  Apply fixes from StyleCI (#850)
  wip
  Apply fixes from StyleCI (#849)
  wip
  wip
  Apply fixes from StyleCI (#848)
  wip on integrating ui
  adding stubs
  Apply fixes from StyleCI (#847)
  wip
  fixed whitespace

.github/CONTRIBUTING.md

@@ -106,10 +106,10 @@ class CanvasVisitFactory extends Factory
     public function definition()
     {
         return [
-            'post_id'    => \Canvas\Models\Post::all()->pluck('id')->random(),
-            'ip'         => $this->faker->ipv4,
-            'agent'      => $this->faker->userAgent,
-            'referer'    => $this->faker->url,
+            'post_id' => \Canvas\Models\Post::all()->pluck('id')->random(),
+            'ip' => $this->faker->ipv4,
+            'agent' => $this->faker->userAgent,
+            'referer' => $this->faker->url,
             'created_at' => today()->subDays(rand(0, 60))->toDateTimeString(),
             'updated_at' => today()->subDays(rand(0, 60))->toDateTimeString(),
         ];
@@ -141,10 +141,10 @@ class CanvasViewFactory extends Factory
     public function definition()
     {
         return [
-            'post_id'    => \Canvas\Models\Post::all()->pluck('id')->random(),
-            'ip'         => $this->faker->ipv4,
-            'agent'      => $this->faker->userAgent,
-            'referer'    => $this->faker->url,
+            'post_id' => \Canvas\Models\Post::all()->pluck('id')->random(),
+            'ip' => $this->faker->ipv4,
+            'agent' => $this->faker->userAgent,
+            'referer' => $this->faker->url,
             'created_at' => today()->subDays(rand(0, 60))->toDateTimeString(),
             'updated_at' => today()->subDays(rand(0, 60))->toDateTimeString(),
         ];

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=3e6ecd832758a8492691",
+    "/js/app.js": "/js/app.js?id=029003d84e5ed3d24c69",
     "/css/app.css": "/css/app.css?id=275ebb89871e5f9dca7a",
-    "/js/app.js.map": "/js/app.js.map?id=9444065232f7d2384eb4",
+    "/js/app.js.map": "/js/app.js.map?id=31898060bcd3393f9abd",
     "/css/app.css.map": "/css/app.css.map?id=db11b78da46b5c2c6055"
 }

readme.md

@@ -145,22 +145,15 @@ When you install a fresh version of Canvas, you'll have a default admin user set
 
 > **Note:** The following features are completely optional, you are not required to use them.
 
-### Studio
+### Frontend
 
-**Want a beautiful, Medium.com-inspired frontend?** Run the following command to install the
- [`austintoddj/studio`](https://github.com/austintoddj/studio) Composer package:
+**Want a beautiful, Medium.com-inspired frontend?** Use the `canvas:ui` Artisan command to install the scaffolding:
 
 ```bash
-composer require austintoddj/studio
+php artisan canvas:ui
 ```
 
-Once Studio has been installed, you may generate the frontend scaffolding using the `studio:install` Artisan command:
-
-```bash
-php artisan studio:install
-```
-
-After installing the `austintoddj/studio` Composer package and generating the frontend scaffolding, your `package.json` file will include the necessary dependencies to install and compile:
+After generating the frontend scaffolding, your `package.json` file will include the necessary dependencies to install and compile:
 
 ```bash
 # Using NPM

resources/js/ui/app.js

@@ -0,0 +1,43 @@
+import NProgress from 'nprogress';
+import Router from 'vue-router';
+import Vue from 'vue';
+import VueMeta from 'vue-meta';
+import base from './mixins/base';
+import moment from 'moment';
+import routes from './routes';
+
+require('bootstrap');
+
+window.Popper = require('popper.js').default;
+
+Vue.prototype.moment = moment;
+
+Vue.config.productionTip = false;
+
+Vue.mixin(base);
+
+Vue.use(VueMeta);
+
+Vue.use(Router);
+
+NProgress.configure({
+    showSpinner: false,
+    easing: 'ease',
+    speed: 300,
+});
+
+const router = new Router({
+    base: 'canvas-ui',
+    mode: 'history',
+    routes,
+});
+
+router.beforeEach((to, from, next) => {
+    NProgress.start();
+    next();
+});
+
+new Vue({
+    el: '#ui',
+    router,
+});

resources/js/ui/components/PageHeaderComponent.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="border-bottom">
+        <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 col-md-12">
+            <nav class="navbar d-flex px-0 py-1">
+                <router-link :to="{ name: 'posts' }" class="navbar-brand hover font-weight-bolder font-serif mr-3">
+                    Canvas
+                </router-link>
+                <div class="mr-auto border-left pl-1">
+                    <router-link :to="{ name: 'tags' }" class="btn btn-link py-0 text-decoration-none">
+                        Tags
+                    </router-link>
+                    <router-link :to="{ name: 'topics' }" class="btn btn-link py-0 text-decoration-none">
+                        Topics
+                    </router-link>
+                </div>
+
+                <slot v-if="user" name="options" />
+
+                <div v-if="user" class="dropdown ml-3">
+                    <a
+                        id="navbarDropdown"
+                        href="#"
+                        class="nav-link px-0 text-secondary"
+                        role="button"
+                        data-toggle="dropdown"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                    >
+                        <img
+                            :src="user.avatar || user.default_avatar"
+                            :alt="user.name"
+                            class="rounded-circle my-0 shadow-inner"
+                            style="width: 33px"
+                        />
+                    </a>
+                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                        <h6 class="dropdown-header">
+                            <strong>{{ user.name }}</strong>
+                            <br />
+                            {{ user.email }}
+                        </h6>
+                        <div class="dropdown-divider" />
+                        <a :href="`/${canvasPath}/users/${user.id}/edit`" class="dropdown-item">Your profile</a>
+                        <a :href="`/${canvasPath}/posts`" class="dropdown-item">Posts</a>
+                        <a v-if="isAdmin" :href="`/${canvasPath}/users`" class="dropdown-item">Users</a>
+                        <a v-if="isAdmin" :href="`/${canvasPath}/tags`" class="dropdown-item">Tags</a>
+                        <a v-if="isAdmin" :href="`/${canvasPath}/topics`" class="dropdown-item">Topics</a>
+                        <a :href="`/${canvasPath}/stats`" class="dropdown-item">Stats</a>
+                        <div class="dropdown-divider" />
+                        <a :href="`/${canvasPath}/settings`" class="dropdown-item">Settings</a>
+                        <a href="" class="dropdown-item" @click.prevent="logout"> Sign out </a>
+                    </div>
+                </div>
+
+                <a v-if="!user" :href="`/${canvasPath}/login`" class="btn btn-link text-decoration-none">Sign in</a>
+            </nav>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+    name: 'page-header-component',
+
+    data() {
+        return {
+            user: CanvasUI.user, // eslint-disable-line no-undef
+            canvasPath: CanvasUI.canvasPath, // eslint-disable-line no-undef
+        };
+    },
+
+    methods: {
+        logout() {
+            axios.get(`/${this.canvasPath}/logout`).then(() => {
+                window.location.href = `/${this.canvasPath}/login`;
+            });
+        },
+    },
+};
+</script>

resources/js/ui/mixins/base.js

@@ -0,0 +1,94 @@
+import axios from 'axios';
+
+export default {
+    computed: {
+        CanvasUI() {
+            return window.CanvasUI;
+        },
+
+        isEditor() {
+            return this.CanvasUI.user ? this.CanvasUI.user.role === 2 : false;
+        },
+
+        isAdmin() {
+            return this.CanvasUI.user ? this.CanvasUI.user.role === 3 : false;
+        },
+    },
+
+    methods: {
+        request() {
+            let instance = axios.create();
+
+            instance.defaults.headers.common['X-CSRF-TOKEN'] = document.head.querySelector(
+                'meta[name="csrf-token"]'
+            ).content;
+            instance.defaults.baseURL = '/canvas-ui';
+
+            const requestHandler = (request) => {
+                // Add any request modifiers...
+                return request;
+            };
+
+            const errorHandler = (error) => {
+                // Add any error modifiers...
+                switch (error.response.status) {
+                    case 401:
+                    case 405:
+                        window.location.href = `/${CanvasUI.canvasPath}/logout`; // eslint-disable-line no-undef
+                        break;
+                    default:
+                        break;
+                }
+
+                return Promise.reject({ ...error });
+            };
+
+            const successHandler = (response) => {
+                // Add any response modifiers...
+                return response;
+            };
+
+            instance.interceptors.request.use((request) => requestHandler(request));
+
+            instance.interceptors.response.use(
+                (response) => successHandler(response),
+                (error) => errorHandler(error)
+            );
+
+            return instance;
+        },
+
+        /**
+         * Parse a given url and return the different components.
+         *
+         * @param url
+         * @link https://www.abeautifulsite.net/parsing-urls-in-javascript
+         */
+        parseURL(url) {
+            let parser = document.createElement('a'),
+                searchObject = {},
+                queries,
+                split,
+                i;
+
+            parser.href = url;
+            queries = parser.search.replace(/^\?/, '').split('&');
+
+            for (i = 0; i < queries.length; i++) {
+                split = queries[i].split('=');
+                searchObject[split[0]] = split[1];
+            }
+
+            return {
+                protocol: parser.protocol,
+                host: parser.host,
+                hostname: parser.hostname,
+                port: parser.port,
+                pathname: parser.pathname,
+                search: parser.search,
+                searchObject: searchObject,
+                hash: parser.hash,
+            };
+        },
+    },
+};

resources/js/ui/routes.js

@@ -0,0 +1,50 @@
+import AllPosts from './views/AllPosts';
+import AllTags from './views/AllTags';
+import AllTopics from './views/AllTopics';
+import ShowPost from './views/ShowPost';
+import ShowTag from './views/ShowTag';
+import ShowTopic from './views/ShowTopic';
+import ShowUser from './views/ShowUser';
+
+export default [
+    {
+        path: '/',
+        name: 'posts',
+        component: AllPosts,
+    },
+    {
+        path: '/posts/:slug',
+        name: 'show-post',
+        component: ShowPost,
+    },
+    {
+        path: '/tags',
+        name: 'tags',
+        component: AllTags,
+    },
+    {
+        path: '/tags/:slug',
+        name: 'show-tag',
+        component: ShowTag,
+    },
+    {
+        path: '/topics',
+        name: 'topics',
+        component: AllTopics,
+    },
+    {
+        path: '/topics/:slug',
+        name: 'show-topic',
+        component: ShowTopic,
+    },
+    {
+        path: '/:id',
+        name: 'show-user',
+        component: ShowUser,
+    },
+    {
+        path: '*',
+        name: 'catch-all',
+        redirect: '/canvas-ui',
+    },
+];