Cleanup (#94)

* Update dev URL

* Update laravel-mix to 4.1.2

Since mix no longer includes Node SASS by default, we instead have
sass-loader and the (Dart) sass package manually specified, among a
couple other packages that it decided to add.

Apparently updates to vue-loader mean you can't use require() syntax to
load Vue Components any more, which isn't too bad because I was planning
to switch to the fancy new import syntax anyway.

Vue template compiler seems to take issue with the `lang="html"` part of
template tags now too for some reason, so where that was added (no idea
*why* it was, but it was) it's now removed so we can npm run build.

* Bump other npm package versions

Totally unecessary, but hey, I want 'em to match what they are.

* Switch Semantic UI from CSS-only to SASS version

* Apply fixes from npm audit

Achieved by running `npm audit fix`, since the suggested commands to
only update certain packages were doing absolutely nothing.

added 20 packages from 17 contributors, removed 3 packages and updated 5 packages in 6.214s
fixed 244 of 244 vulnerabilities in 20420 scanned packages

.gitignore

@@ -1,7 +1,5 @@
 /node_modules
 /public/mix-manifest.json
-/public/css/themes/default/assets/fonts
-/public/css/semantic.min.css
 /public/css/app.css
 /public/js/app.js
 /public/hot

config/app.php

@@ -51,7 +51,7 @@
     |
     */
 
-    'url' => env('APP_URL', 'http://localhost'),
+    'url' => env('APP_URL', 'http://servidor.local'),
 
     /*
     |--------------------------------------------------------------------------

package.json

@@ -13,13 +13,16 @@
         "axios": "^0.19.0",
         "browser-sync": "^2.26.7",
         "browser-sync-webpack-plugin": "^2.2.2",
-        "cross-env": "^5.1",
-        "laravel-mix": "^2.0",
+        "cross-env": "^5.2",
+        "laravel-mix": "^4.1.2",
         "lodash": "^4.17.15",
-        "popper.js": "^1.12",
-        "semantic-ui-css": "^2.4.1",
-        "vue-template-compiler": "^2.6.10",
-        "vue": "^2.6.10"
+        "popper.js": "^1.15",
+        "resolve-url-loader": "3.1.0",
+        "sass": "^1.22.9",
+        "sass-loader": "^7.1",
+        "semantic-ui-sass": "^2.4.2",
+        "vue": "^2.6.10",
+        "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
         "semantic-ui-vue": "^0.7.0",

resources/js/app.js

@@ -5,21 +5,30 @@ import SuiVue from 'semantic-ui-vue';
 import routes from './routes'
 import store from './store'
 
+import MainMenu from './components/MainMenu.vue';
+import StatsBar from './components/StatsBar.vue';
+import SystemMenu from './components/System/Menu.vue';
+import SystemGroups from './components/System/Groups.vue';
+import SystemUsers from './components/System/Users.vue';
+import PassportClients from './components/passport/Clients.vue';
+import PassportAuthorizedClients from './components/passport/AuthorizedClients.vue';
+import PassportAccessTokens from './components/passport/PersonalAccessTokens.vue';
+
 window.Vue = Vue;
 
 Vue.use(VueRouter);
 Vue.use(SuiVue);
 
-Vue.component('main-menu', require('./components/MainMenu.vue'));
-Vue.component('stats-bar', require('./components/StatsBar.vue'));
+Vue.component('main-menu', MainMenu);
+Vue.component('stats-bar', StatsBar);
 
-Vue.component('system-menu', require('./components/System/Menu.vue'));
-Vue.component('system-groups', require('./components/System/Groups.vue'));
-Vue.component('system-users', require('./components/System/Users.vue'));
+Vue.component('system-menu', SystemMenu);
+Vue.component('system-groups', SystemGroups);
+Vue.component('system-users', SystemUsers);
 
-Vue.component('passport-clients', require('./components/passport/Clients.vue'));
-Vue.component('passport-authorized-clients', require('./components/passport/AuthorizedClients.vue'));
-Vue.component('passport-personal-access-tokens', require('./components/passport/PersonalAccessTokens.vue'));
+Vue.component('passport-clients', PassportClients);
+Vue.component('passport-authorized-clients', PassportAuthorizedClients);
+Vue.component('passport-personal-access-tokens', PassportAccessTokens);
 
 const router = new VueRouter({
     mode: 'history',

resources/js/components/MainMenu.vue

@@ -1,4 +1,4 @@
-<template lang="html">
+<template>
     <sui-menu :widths="menu.length">
         <router-link :to="{ name: item.href }" is="sui-menu-item"
             v-for="(item, id) in menu" :key="id" :active="isActive(item)">

resources/js/components/StatsBar.vue

@@ -1,4 +1,4 @@
-<template lang="html">
+<template>
     <sui-statistics-group v-if="loaded">
         <sui-statistic in-group>
             <sui-statistic-value>

resources/sass/_variables.scss

@@ -3,11 +3,12 @@
 $body-bg: #f8fafc;
 
 // Typography
-$font-family-sans-serif: "Nunito", sans-serif;
-$font-size-base: 0.9rem;
-$line-height-base: 1.6;
+$import-google-fonts: true;
+$icons-font-path: '../fonts';
 
 // Colors
+// Technically not used in the sass version of semantic ui,
+// but lets keep it here anyway for reference later...
 $blue: #3490dc;
 $indigo: #6574cd;
 $purple: #9561e2;

resources/sass/app.scss

@@ -1,12 +1,10 @@
-// Fonts
-@import url('https://fonts.googleapis.com/css?family=Nunito');
-
-// Variables
 @import 'variables';
+@import '~semantic-ui-sass/semantic-ui';
 
 @import 'footer';
 
 body {
+    background-color: $body-bg;
     height: calc(100% - 5rem);
 
     #app {

resources/views/layouts/app.blade.php

@@ -7,7 +7,6 @@
 
         <title>{{ config('app.name', '') }}</title>
 
-        <link href="{{ asset('css/semantic.min.css') }}" rel="stylesheet" type="text/css">
         <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
     </head>
     <body>

resources/views/layouts/login.blade.php

@@ -8,7 +8,6 @@
         <title>{{ config('app.name', 'Laravel') }}</title>
 
         <link rel="dns-prefetch" href="https://fonts.gstatic.com">
-        <link href="{{ asset('css/semantic.min.css') }}" rel="stylesheet" type="text/css">
         <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css">
     </head>
     <body class="login">

webpack.mix.js

@@ -12,7 +12,6 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js')
-   .sass('resources/sass/app.scss', 'public/css')
-   .copy('node_modules/semantic-ui-css/semantic.min.css', 'public/css/')
-   .copy('node_modules/semantic-ui-css/themes/default/assets/fonts', 'public/css/themes/default/assets/fonts')
-   .browserSync('localhost')
+   .sass('resources/sass/app.scss', 'public/css').options({ processCssUrls: false })
+   .copy('node_modules/semantic-ui-sass/icons', 'public/fonts')
+   .browserSync('servidor.local')