From 722dc7b13ecb11a3ac91ee62f77ae182546d48cf Mon Sep 17 00:00:00 2001
From: shadowc <info@matiasjose.com>
Date: Fri, 27 Mar 2020 17:36:57 -0300
Subject: [PATCH] Lesson 4

---
 _tuts/child-component-include-component.diff  |  2 +-
 _tuts/first-vue-component-add-styles.diff     |  8 +-
 .../first-vue-component-create-component.diff | 10 +-
 ...t-vue-component-introduce-data-object.diff |  2 +-
 _tuts/sidebar-add-aliases-to-webpack.diff     | 23 +++++
 .../sidebar-create-the-catalog-component.diff | 33 +++++++
 .../sidebar-create-the-sidebar-component.diff | 55 +++++++++++
 _tuts/sidebar-scan-and-correct-imports.diff   | 96 +++++++++++++++++++
 _tuts/sidebar-stich-them-together.diff        | 85 ++++++++++++++++
 _tuts/steps.json                              | 27 +++++-
 10 files changed, 329 insertions(+), 12 deletions(-)
 create mode 100644 _tuts/sidebar-add-aliases-to-webpack.diff
 create mode 100644 _tuts/sidebar-create-the-catalog-component.diff
 create mode 100644 _tuts/sidebar-create-the-sidebar-component.diff
 create mode 100644 _tuts/sidebar-scan-and-correct-imports.diff
 create mode 100644 _tuts/sidebar-stich-them-together.diff

diff --git a/_tuts/child-component-include-component.diff b/_tuts/child-component-include-component.diff
index 1c05d5c31..f40f72ef9 100644
--- a/_tuts/child-component-include-component.diff
+++ b/_tuts/child-component-include-component.diff
@@ -1,5 +1,5 @@
 diff --git a/assets/js/products.vue b/assets/js/products.vue
-index 8a02582..6bd4c7d 100644
+index b191e4b..2b8212c 100644
 --- a/assets/js/products.vue
 +++ b/assets/js/products.vue
 @@ -26,9 +26,7 @@
diff --git a/_tuts/first-vue-component-add-styles.diff b/_tuts/first-vue-component-add-styles.diff
index 941b80628..b9cb3bb18 100644
--- a/_tuts/first-vue-component-add-styles.diff
+++ b/_tuts/first-vue-component-add-styles.diff
@@ -1,13 +1,13 @@
 diff --git a/assets/js/products.vue b/assets/js/products.vue
-index 4b1cf93..f837b96 100644
+index e52614f..d84824c 100644
 --- a/assets/js/products.vue
 +++ b/assets/js/products.vue
 @@ -2,7 +2,7 @@
      <div class="container-fluid">
          <div class="row row-no-wrap">
-             <div class="col-xs-12 col-lg-3">
--                <aside class="p-3 mt-5 mb-5">
-+                <aside :class="[$style.aside, 'p-3', 'mt-5', 'mb-5']">
+             <aside class="col-xs-12 col-lg-3">
+-                <div class="p-3 mt-5 mb-5">
++                <div :class="[$style.aside, 'p-3', 'mt-5', 'mb-5']">
                      <h5 class="text-center">
                          Categories
                      </h5>
diff --git a/_tuts/first-vue-component-create-component.diff b/_tuts/first-vue-component-create-component.diff
index 60d4c1688..20bcf8287 100644
--- a/_tuts/first-vue-component-create-component.diff
+++ b/_tuts/first-vue-component-create-component.diff
@@ -1,14 +1,14 @@
 diff --git a/assets/js/products.vue b/assets/js/products.vue
 new file mode 100644
-index 0000000..4b1cf93
+index 0000000..e52614f
 --- /dev/null
 +++ b/assets/js/products.vue
 @@ -0,0 +1,42 @@
 +<template>
 +    <div class="container-fluid">
 +        <div class="row row-no-wrap">
-+            <div class="col-xs-12 col-lg-3">
-+                <aside class="p-3 mt-5 mb-5">
++            <aside class="col-xs-12 col-lg-3">
++                <div class="p-3 mt-5 mb-5">
 +                    <h5 class="text-center">
 +                        Categories
 +                    </h5>
@@ -21,8 +21,8 @@ index 0000000..4b1cf93
 +                            >All Products</a>
 +                        </li>
 +                    </ul>
-+                </aside>
-+            </div>
++                </div>
++            </aside>
 +
 +            <div class="col-xs-12 col-lg-9">
 +                <div class="row">
diff --git a/_tuts/first-vue-component-introduce-data-object.diff b/_tuts/first-vue-component-introduce-data-object.diff
index 4581f683f..dac4d49c3 100644
--- a/_tuts/first-vue-component-introduce-data-object.diff
+++ b/_tuts/first-vue-component-introduce-data-object.diff
@@ -1,5 +1,5 @@
 diff --git a/assets/js/products.vue b/assets/js/products.vue
-index f837b96..8a02582 100644
+index d84824c..b191e4b 100644
 --- a/assets/js/products.vue
 +++ b/assets/js/products.vue
 @@ -27,7 +27,7 @@
diff --git a/_tuts/sidebar-add-aliases-to-webpack.diff b/_tuts/sidebar-add-aliases-to-webpack.diff
new file mode 100644
index 000000000..1bc35e143
--- /dev/null
+++ b/_tuts/sidebar-add-aliases-to-webpack.diff
@@ -0,0 +1,23 @@
+diff --git a/webpack.config.js b/webpack.config.js
+index 63ea46e..7841ab2 100644
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -1,4 +1,5 @@
+ var Encore = require('@symfony/webpack-encore');
++var path = require('path');
+ 
+ // Manually configure the runtime environment if not already configured yet by the "encore" command.
+ // It's useful when you use tools that rely on webpack.config.js file.
+@@ -14,6 +15,12 @@ Encore
+     // only needed for CDN's or sub-directory deploy
+     //.setManifestKeyPrefix('build/')
+ 
++    // This is our alias to the root vue components dir
++    .addAliases({
++        '@': path.resolve(__dirname, 'assets/js'),
++        styles: path.resolve(__dirname, 'assets/scss'),
++    })
++
+     /*
+      * ENTRY CONFIG
+      *
diff --git a/_tuts/sidebar-create-the-catalog-component.diff b/_tuts/sidebar-create-the-catalog-component.diff
new file mode 100644
index 000000000..8f68bb3a4
--- /dev/null
+++ b/_tuts/sidebar-create-the-catalog-component.diff
@@ -0,0 +1,33 @@
+diff --git a/assets/js/components/catalog.vue b/assets/js/components/catalog.vue
+new file mode 100644
+index 0000000..c5ae437
+--- /dev/null
++++ b/assets/js/components/catalog.vue
+@@ -0,0 +1,27 @@
++<template>
++    <div>
++        <div class="row">
++            <h2 class="p-3">
++                Products
++            </h2>
++        </div>
++
++        <div class="row">
++            <legend-component :title="legend" />
++        </div>
++    </div>
++</template>
++
++<script>
++import LegendComponent from './legend';
++
++export default {
++    name: 'Catalog',
++    components: {
++        LegendComponent,
++    },
++    data: () => ({
++        legend: 'Shipping takes 10-12 weeks, and products probably won\'t work',
++    }),
++};
++</script>
diff --git a/_tuts/sidebar-create-the-sidebar-component.diff b/_tuts/sidebar-create-the-sidebar-component.diff
new file mode 100644
index 000000000..9a63daa05
--- /dev/null
+++ b/_tuts/sidebar-create-the-sidebar-component.diff
@@ -0,0 +1,55 @@
+diff --git a/assets/js/components/sidebar.vue b/assets/js/components/sidebar.vue
+new file mode 100644
+index 0000000..5d53b96
+--- /dev/null
++++ b/assets/js/components/sidebar.vue
+@@ -0,0 +1,49 @@
++<template>
++    <div :class="[$style.component, 'p-3', 'mt-5', 'mb-5']">
++        <h5 class="text-center">
++            Categories
++        </h5>
++
++        <ul class="nav flex-column">
++            <li class="nav-item">
++                <a
++                    class="nav-link"
++                    href="/"
++                >All Products</a>
++            </li>
++        </ul>
++    </div>
++</template>
++
++<script>
++export default {
++    name: 'Sidebar',
++};
++</script>
++
++<style lang="scss" module>
++@import '../../scss/components/light-component';
++
++.component {
++    @include light-component;
++    margin-top: 65px;
++
++    ul {
++        border-bottom: 1px solid $light-component-border;
++        margin-bottom: 20px;
++        padding-bottom: 10px;
++
++        li a {
++            color: #000;
++        }
++
++        li a:hover {
++            background: $blue-component-link-hover;
++        }
++
++        li a.selected {
++            background: $light-component-border;
++        }
++    }
++}
++</style>
diff --git a/_tuts/sidebar-scan-and-correct-imports.diff b/_tuts/sidebar-scan-and-correct-imports.diff
new file mode 100644
index 000000000..91992df2c
--- /dev/null
+++ b/_tuts/sidebar-scan-and-correct-imports.diff
@@ -0,0 +1,96 @@
+diff --git a/assets/js/app.js b/assets/js/app.js
+index 5a9d6ce..88da001 100644
+--- a/assets/js/app.js
++++ b/assets/js/app.js
+@@ -6,4 +6,4 @@
+  */
+ 
+ // any CSS you import will output into a single css file (app.css in this case)
+-import '../scss/app.scss';
++import 'styles/app.scss';
+diff --git a/assets/js/components/catalog.vue b/assets/js/components/catalog.vue
+index c5ae437..8390a30 100644
+--- a/assets/js/components/catalog.vue
++++ b/assets/js/components/catalog.vue
+@@ -13,7 +13,7 @@
+ </template>
+ 
+ <script>
+-import LegendComponent from './legend';
++import LegendComponent from '@/components/legend';
+ 
+ export default {
+     name: 'Catalog',
+diff --git a/assets/js/components/sidebar.vue b/assets/js/components/sidebar.vue
+index 5d53b96..31793e1 100644
+--- a/assets/js/components/sidebar.vue
++++ b/assets/js/components/sidebar.vue
+@@ -22,7 +22,7 @@ export default {
+ </script>
+ 
+ <style lang="scss" module>
+-@import '../../scss/components/light-component';
++@import '~styles/components/light-component';
+ 
+ .component {
+     @include light-component;
+diff --git a/assets/js/products.js b/assets/js/products.js
+index 290a2d1..8597d51 100644
+--- a/assets/js/products.js
++++ b/assets/js/products.js
+@@ -1,5 +1,5 @@
+ import Vue from 'vue';
+-import App from './products.vue';
++import App from '@/products.vue';
+ 
+ new Vue({
+     render: (h) => h(App),
+diff --git a/assets/js/products.vue b/assets/js/products.vue
+index 4861a96..7408b68 100644
+--- a/assets/js/products.vue
++++ b/assets/js/products.vue
+@@ -13,8 +13,8 @@
+ </template>
+ 
+ <script>
+-import CatalogComponent from './components/catalog';
+-import SidebarComponent from './components/sidebar';
++import CatalogComponent from '@/components/catalog';
++import SidebarComponent from '@/components/sidebar';
+ 
+ export default {
+     name: 'Products',
+diff --git a/assets/scss/app.scss b/assets/scss/app.scss
+index 8197ff3..21e2e7a 100644
+--- a/assets/scss/app.scss
++++ b/assets/scss/app.scss
+@@ -1,6 +1,6 @@
+-@import './components/black-component';
+-@import './components/light-component';
+-@import './variables/colors';
++@import '~styles/components/black-component';
++@import '~styles/components/light-component';
++@import '~styles/variables/colors';
+ @import '~bootstrap';
+ 
+ .header {
+diff --git a/assets/scss/components/black-component.scss b/assets/scss/components/black-component.scss
+index dc43766..a658b27 100644
+--- a/assets/scss/components/black-component.scss
++++ b/assets/scss/components/black-component.scss
+@@ -1,4 +1,4 @@
+-@import '../variables/colors';
++@import '~styles/variables/colors';
+ 
+ @mixin black-component {
+     background-color: $black-component-background;
+diff --git a/assets/scss/components/light-component.scss b/assets/scss/components/light-component.scss
+index 814d931..154982a 100644
+--- a/assets/scss/components/light-component.scss
++++ b/assets/scss/components/light-component.scss
+@@ -1,4 +1,4 @@
+-@import '../variables/colors';
++@import '~styles/variables/colors';
+ 
+ @mixin light-component {
+     border: 1px solid $light-component-border;
diff --git a/_tuts/sidebar-stich-them-together.diff b/_tuts/sidebar-stich-them-together.diff
new file mode 100644
index 000000000..6d1c12202
--- /dev/null
+++ b/_tuts/sidebar-stich-them-together.diff
@@ -0,0 +1,85 @@
+diff --git a/assets/js/products.vue b/assets/js/products.vue
+index 2b8212c..4861a96 100644
+--- a/assets/js/products.vue
++++ b/assets/js/products.vue
+@@ -2,74 +2,25 @@
+     <div class="container-fluid">
+         <div class="row row-no-wrap">
+             <aside class="col-xs-12 col-lg-3">
+-                <div :class="[$style.aside, 'p-3', 'mt-5', 'mb-5']">
+-                    <h5 class="text-center">
+-                        Categories
+-                    </h5>
+-
+-                    <ul class="nav flex-column">
+-                        <li class="nav-item">
+-                            <a
+-                                class="nav-link"
+-                                href="/"
+-                            >All Products</a>
+-                        </li>
+-                    </ul>
+-                </div>
++                <sidebar-component />
+             </aside>
+ 
+             <div class="col-xs-12 col-lg-9">
+-                <div class="row">
+-                    <h2 class="p-3">
+-                        Products
+-                    </h2>
+-                </div>
+-
+-                <div class="row">
+-                    <legend-component :title="legend" />
+-                </div>
++                <catalog-component />
+             </div>
+         </div>
+     </div>
+ </template>
+ 
+ <script>
+-import LegendComponent from './components/legend';
++import CatalogComponent from './components/catalog';
++import SidebarComponent from './components/sidebar';
+ 
+ export default {
+     name: 'Products',
+     components: {
+-        LegendComponent,
++        CatalogComponent,
++        SidebarComponent,
+     },
+-    data: () => ({
+-        legend: 'Shipping takes 10-12 weeks, and products probably won\'t work',
+-    }),
+ };
+ </script>
+-
+-<style lang="scss" module>
+-@import '../scss/components/light-component';
+-
+-.aside {
+-    @include light-component;
+-    margin-top: 65px;
+-
+-    ul {
+-        border-bottom: 1px solid $light-component-border;
+-        margin-bottom: 20px;
+-        padding-bottom: 10px;
+-
+-        li a {
+-            color: #000;
+-        }
+-
+-        li a:hover {
+-            background: $blue-component-link-hover;
+-        }
+-
+-        li a.selected {
+-            background: $light-component-border;
+-        }
+-    }
+-}
+-</style>
diff --git a/_tuts/steps.json b/_tuts/steps.json
index bb06c4814..bab52e51c 100644
--- a/_tuts/steps.json
+++ b/_tuts/steps.json
@@ -64,7 +64,32 @@
             "id": "child-component-include-component",
             "name": "Child Component: Include Component",
             "description": null
+        },
+        {
+            "id": "sidebar-create-the-catalog-component",
+            "name": "SideBar: Create The Catalog Component",
+            "description": null
+        },
+        {
+            "id": "sidebar-create-the-sidebar-component",
+            "name": "Sidebar: Create the Sidebar Component",
+            "description": null
+        },
+        {
+            "id": "sidebar-stich-them-together",
+            "name": "Sidebar: stich them Together",
+            "description": null
+        },
+        {
+            "id": "sidebar-add-aliases-to-webpack",
+            "name": "Sidebar: Add Aliases to Webpack",
+            "description": null
+        },
+        {
+            "id": "sidebar-scan-and-correct-imports",
+            "name": "Sidebar: Scan and Correct Imports",
+            "description": null
         }
     ],
-    "sha": "fa1a0d68c49e23c4f7786eba718ab023a05ba103"
+    "sha": "86fb6efdafa569c40f8e59a4a4ea76ddbf6fadba"
 }
\ No newline at end of file