Add components source folder to sass-loader include paths

bridgetownrb · Apr 24, 2020 · 045ed10 · 045ed10
1 parent 05e743b
commit 045ed10
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 172 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # master
 
+# 0.11.2 / 2020-04-24
+
+* Add components source folder to sass-loader include paths
+* Include missing commit from PR #14
+
 # 0.11.1 / 2020-04-24
 
 * Add a git init step to `bridgetown new` command [#18](https://github.com/bridgetownrb/bridgetown/pull/18)

diff --git a/bridgetown-core/lib/bridgetown-core/version.rb b/bridgetown-core/lib/bridgetown-core/version.rb
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bridgetown
-  VERSION = "0.11.1"
+  VERSION = "0.11.2"
 end
diff --git a/bridgetown-core/lib/site_template/webpack.config.js b/bridgetown-core/lib/site_template/webpack.config.js
@@ -1,6 +1,6 @@
-const path = require("path")
-const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-const ManifestPlugin = require("webpack-manifest-plugin")
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const ManifestPlugin = require("webpack-manifest-plugin");
 
 module.exports = {
   entry: "./frontend/javascript/index.js",
@@ -10,22 +10,22 @@ module.exports = {
     modules: false,
     builtAt: false,
     timings: false,
-    children: false
+    children: false,
   },
   output: {
     path: path.resolve(__dirname, "output", "_bridgetown", "static", "js"),
-    filename: "all.[contenthash].js"
+    filename: "all.[contenthash].js",
   },
   resolve: {
-    extensions: [".js", ".jsx"]
+    extensions: [".js", ".jsx"],
   },
   plugins: [
     new MiniCssExtractPlugin({
       filename: "../css/all.[contenthash].css",
     }),
     new ManifestPlugin({
-      fileName: path.resolve(__dirname, ".bridgetown-webpack", "manifest.json")
-    })
+      fileName: path.resolve(__dirname, ".bridgetown-webpack", "manifest.json"),
+    }),
   ],
   module: {
     rules: [
@@ -34,20 +34,18 @@ module.exports = {
         use: {
           loader: "babel-loader",
           options: {
-            presets: [
-              "@babel/preset-env"
-            ],
+            presets: ["@babel/preset-env"],
             plugins: [
               "@babel/plugin-proposal-class-properties",
               [
                 "@babel/plugin-transform-runtime",
                 {
-                  "helpers": false
-                }
-              ]
-            ]
-          }
-        }
+                  helpers: false,
+                },
+              ],
+            ],
+          },
+        },
       },
       {
         test: /\.(s[ac]|c)ss$/,
@@ -58,20 +56,23 @@ module.exports = {
             loader: "sass-loader",
             options: {
               sassOptions: {
-                includePaths: [path.resolve(__dirname, "src/_includes")]
-              }
-            }
-          }
-        ]
+                includePaths: [
+                  path.resolve(__dirname, "src/_components"),
+                  path.resolve(__dirname, "src/_includes"),
+                ],
+              },
+            },
+          },
+        ],
       },
       {
         test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
         loader: "file-loader",
         options: {
           outputPath: "../fonts",
-          publicPath: "../fonts"
+          publicPath: "../fonts",
         },
-      }
-    ]
-  }
-}
+      },
+    ],
+  },
+};
diff --git a/bridgetown-website/frontend/styles/content.scss b/bridgetown-website/frontend/styles/content.scss
@@ -48,10 +48,11 @@ html.is-animating {
   @include mobile {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
-  }  
+  }
 }
 
-.box ul, .box ol {
+.box ul,
+.box ol {
   margin-top: 2rem !important;
   margin-bottom: 2rem !important;
   width: 85%;
@@ -86,39 +87,26 @@ html.is-animating {
   }
 }
 
-.note {
-  background: lighten($green, 25%);
-  padding: 40px;
-  padding-left: calc(2rem - 5px);
-  padding-right: 2rem;
-  border-left: solid 5px $green;
-  font-size: 0.9em;
-  font-weight: 500;
-  margin-left: -2rem;
-  margin-right: -2rem;
-  @include mobile {
-    margin-left: -1rem;
-    margin-right: -1rem;
-  }
-  margin-bottom: 1.5rem;
-  &.warning {
-    border-left-color: $red;
-    background: lighten($red, 35%);
-  }
-}
-
 table.settings {
-  tr > td:first-child { width: 65%; }
+  tr > td:first-child {
+    width: 65%;
+  }
   &.bigger-output {
-    tr > td:first-child { width: 40%; }
+    tr > td:first-child {
+      width: 40%;
+    }
   }
   &.biggest-output {
-    tr > td:first-child { width: 25%; }
+    tr > td:first-child {
+      width: 25%;
+    }
   }
-  .option, .filter {
+  .option,
+  .filter {
     color: darken($blue, 10%);
   }
-  .flag, .output {
+  .flag,
+  .output {
     color: darken($orange, 20%);
   }
   p.default {
@@ -130,7 +118,8 @@ table.settings {
     }
   }
 
-  th, td {
+  th,
+  td {
     &:first-child {
       background: lighten($white-ter, 2.5%);
     }
@@ -142,10 +131,15 @@ table.settings {
 
   @media screen and (max-width: 600px) {
     th {
-      &:first-child:before {content: "👇 " }
-      &:last-child:after { content: " 👇" }
+      &:first-child:before {
+        content: "👇 ";
+      }
+      &:last-child:after {
+        content: " 👇";
+      }
     }
-    th, td {
+    th,
+    td {
       display: block;
       width: 100% !important;
       &:last-child {
@@ -154,7 +148,3 @@ table.settings {
     }
   }
 }
-
-table + .note {
-  margin-top: 1.5rem;
-}
diff --git a/bridgetown-website/frontend/styles/index.scss b/bridgetown-website/frontend/styles/index.scss
@@ -30,7 +30,7 @@ $warning-invert: #fff;
 
 $scheme-main: $white-ter;
 
-$family-sans-serif: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
 $body-size: 18px;
 
 $link: $primary;
@@ -62,3 +62,7 @@ footer.footer strong {
 @import "layout.scss";
 @import "syntax.scss";
 @import "typography.scss";
+
+/* Components and Includes */
+@import "navbar.scss";
+@import "docs/note.scss";
diff --git a/bridgetown-website/frontend/styles/layout.scss b/bridgetown-website/frontend/styles/layout.scss
@@ -13,81 +13,6 @@
   }
 }
 
-.navbar {
-  .bridgetown-logo {
-    width: 152px;
-    margin-left: -6px;
-    margin-right: 6px;
-    opacity: 0.8;
-
-    svg {
-      -webkit-filter: drop-shadow( 2px 3px 3px rgba(0,0,0,0.3));
-      filter: drop-shadow( 2px 3px 3px rgba(0,0,0,0.3));
-    }
-
-    svg path {
-      fill: white;
-    }
-  }
-
-  .navbar-brand .navbar-item:hover {
-    background: $navbar-item-hover-background-color;
-    .bridgetown-logo { opacity: 1; }
-  }
-
-  .navbar-item .title {
-    color: white;
-    text-shadow: 2px 3px 3px rgba(0,0,0,0.3);
-  }
-
-  .navbar-item,
-  .navbar-link {
-    font-size: 0.875rem;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-
-  @include desktop {
-    .navbar-dropdown .navbar-item {
-      color: $text;
-    }
-  }
-
-  @include touch {
-    .navbar-menu {
-      background-color: inherit;
-    }
-  }
-
-  .navbar-burger span {
-    background-color: $white-ter;
-  }
-  .navbar-burger:hover span {
-    background-color: $white-ter;
-  }
-
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-
-    &.is-#{$name} {
-      @include touch {
-        .navbar-item,
-        .navbar-link {
-          color: rgba($color-invert, 0.7);
-          &.is-active {
-            color: $color-invert;
-          }
-        }
-      }
-    }
-  }
-
-  &.is-transparent {
-    background-color: transparent;
-  }
-}
-
 .hero {
   // Colors
   .navbar {
@@ -115,8 +40,8 @@ body > footer.footer {
   margin: 1rem auto;
 
   svg {
-    -webkit-filter: drop-shadow( 2px 4px 4px transparentize($brown, 0.7));
-    filter: drop-shadow( 2px 4px 4px transparentize($brown, 0.7));
+    -webkit-filter: drop-shadow(2px 4px 4px transparentize($brown, 0.7));
+    filter: drop-shadow(2px 4px 4px transparentize($brown, 0.7));
   }
 
   svg path {
@@ -129,8 +54,8 @@ body > footer.footer {
   opacity: 0.8;
 
   svg {
-    -webkit-filter: drop-shadow( 2px 3px 3px rgba(0,0,0,0.3));
-    filter: drop-shadow( 2px 3px 3px rgba(0,0,0,0.3));
+    -webkit-filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.3));
+    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.3));
   }
 
   svg path {

diff --git a/bridgetown-website/src/_components/docs/note.scss b/bridgetown-website/src/_components/docs/note.scss
@@ -0,0 +1,24 @@
+.note {
+  background: lighten($green, 25%);
+  padding: 40px;
+  padding-left: calc(2rem - 5px);
+  padding-right: 2rem;
+  border-left: solid 5px $green;
+  font-size: 0.9em;
+  font-weight: 500;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  @include mobile {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  margin-bottom: 1.5rem;
+  &.warning {
+    border-left-color: $red;
+    background: lighten($red, 35%);
+  }
+}
+
+table + .note {
+  margin-top: 1.5rem;
+}