Compile SCSS with Webpack

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v2.1.4
         with:
-          node-version: '12'
+          node-version: '14'
 
       - name: Cache Ruby gems
         uses: actions/cache@v2.1.3

.gitignore

@@ -40,9 +40,8 @@ _site/
 node_modules/
 
 # Webpack compiled files
-assets/javascript/*.js
-assets/javascript/*.js.map
-assets/javascript/*sprite*
+assets/javascript/*
+assets/stylesheets/*
 
-# S3 deployment
+# Configuration
 .env

.ruby-version

@@ -1 +1 @@
-2.7.2
+2.7.3

.tool-versions

@@ -1,2 +1,2 @@
 ruby 2.7.3
-nodejs 12.14.1
+nodejs 14.15.1

Gemfile.lock

@@ -4,9 +4,9 @@ GEM
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.6)
+    concurrent-ruby (1.1.8)
     dotenv (1.0.2)
-    em-websocket (0.5.1)
+    em-websocket (0.5.2)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     ethon (0.12.0)
@@ -24,23 +24,23 @@ GEM
       typhoeus (~> 1.3)
       yell (~> 2.0)
     http_parser.rb (0.6.0)
-    i18n (1.8.2)
+    i18n (1.8.10)
       concurrent-ruby (~> 1.0)
-    jekyll (4.1.0)
+    jekyll (4.2.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
       i18n (~> 1.0)
       jekyll-sass-converter (~> 2.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 2.1)
+      kramdown (~> 2.3)
       kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
       mercenary (~> 0.4.0)
       pathutil (~> 0.9)
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
-      terminal-table (~> 1.8)
+      terminal-table (~> 2.0)
     jekyll-sass-converter (2.1.0)
       sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
@@ -50,7 +50,7 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.2.1)
+    listen (3.5.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
@@ -71,11 +71,11 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.5)
-    rouge (3.19.0)
+    rouge (3.26.0)
     safe_yaml (1.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
-    terminal-table (1.8.0)
+    terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)

README.md

@@ -13,7 +13,7 @@ This template offers rich development experience using the following technologie
 | [Jekyll](https://jekyllrb.com/)                   | Transform plain text into static websites and blogs.              |
 | [Kramdown](https://kramdown.gettalong.org/)       | Ruby-based markdown parser allowing to use both Markdown and HTML.|
 | [TailwindCSS](https://tailwindcss.com/)           | A utility-first CSS framework for rapidly building custom designs.| 
-| [Stimulus JS](https://stimulus.hotwire.dev/)      | A A modest JavaScript framework for the HTML you already have.    |
+| [Stimulus JS](https://stimulus.hotwire.dev/)      | A modest JavaScript framework for the HTML you already have.    |
 | [ESLint](http://eslint.org/)                      | Lint JS. Reports syntax and style issues.                         |
 | [Webpack](https://webpack.js.org)                 | Bundles npm packages and application JS together.                 |
 | [Docker](https://www.docker.com/)                 | Open platform to build, ship, and run applications everywhere.    | 

_includes/head.html

@@ -21,16 +21,16 @@
 <meta name="twitter:description" content="{{ meta_description }}" />
 <meta name="twitter:image" content="{{ meta_image }}" />
 
-<meta name="apple-mobile-web-app-title" content="Jekyll Template"/>
-<meta name="mobile-web-app-capable" content="yes"/>
-<meta name="apple-touch-fullscreen" content="yes"/>
-<meta name="apple-mobile-web-app-status-bar-style" content="#1b79ea"/>
+<meta name="apple-mobile-web-app-title" content="Jekyll Template" />
+<meta name="mobile-web-app-capable" content="yes" />
+<meta name="apple-touch-fullscreen" content="yes" />
+<meta name="apple-mobile-web-app-status-bar-style" content="#1b79ea" />
 
-<meta name="theme-color" content="#ea1017"/>
+<meta name="theme-color" content="#ea1017" />
 
-<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)">
-<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)">
-<meta http-equiv="cleartype" content="on">
+<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />
+<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />
+<meta http-equiv="cleartype" content="on" />
 
 <meta name="msapplication-TileColor" content="#fff" />
 <meta name="msapplication-TileImage" content="/public/images/favicon/mstile-144x144.png" />
@@ -39,16 +39,16 @@
 <meta name="msapplication-wide310x150logo" content="/public/images/favicon/mstile-310x150.png" />
 <meta name="msapplication-square310x310logo" content="/public/images/favicon/mstile-310x310.png" />
 
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/images/favicon/apple-icon-144x144.png"/>
-<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/public/images/favicon/apple-icon-152x152.png"/>
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/images/favicon/apple-icon-144x144.png" />
+<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/public/images/favicon/apple-icon-152x152.png" />
 
-<link rel="icon" type="image/png" sizes="192x192"  href="/public/images/favicon/android-icon-192x192.png"/>
-<link rel="icon" type="image/png" sizes="32x32" href="/public/images/favicon/favicon-32x32.png"/>
-<link rel="icon" type="image/png" sizes="16x16" href="/public/images/favicon/favicon-16x16.png"/>
-<link rel="icon" type="image/x-icon" href="/public/images/favicon/favicon.ico">
+<link rel="icon" type="image/png" sizes="192x192"  href="/public/images/favicon/android-icon-192x192.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/public/images/favicon/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/public/images/favicon/favicon-16x16.png" />
+<link rel="icon" type="image/x-icon" href="/public/images/favicon/favicon.ico" />
 
 <link rel="manifest" href="/public/manifest.json">
 
 <link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Open+Sans" />
 
-<link rel="stylesheet" href="/assets/stylesheets/application.css" type="text/css"/>
+<link rel="stylesheet" href="/assets/stylesheets/application.css" type="text/css" />

_javascript/application.js

@@ -0,0 +1,3 @@
+import '../_scss/application.scss';
+
+import './initializers';

_sass/_variables.scss → _scss/_variables.scss

@@ -1,12 +1,13 @@
-// Base
+/* Base */
 
 $color-gray: (
   primary: #ededed,
   dark: #b3b3b3,
   darkest: #8f8f8f
 );
 
-// Typography
+/* Typography */
+
 $base-font-size: 1rem;
 $base-font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
 $base-line-height: 1.7;

_scss/application.scss

@@ -0,0 +1,11 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import './variables.scss';
+
+@import './base/typography.scss';
+
+@import './layouts/default.scss';
+
+@import './components/icon.scss';

_sass/layouts/default.scss → _scss/layouts/_default.scss

@@ -1,9 +1,11 @@
 .layout-default body {
+  @apply bg-gray-200;
+
   display: grid;
   grid-template-rows: 8.5rem 1fr 5rem;
 
   min-height: 100vh;
-  padding: 0 5vw;
+  padding: 0 15vw;
 }
 
 .layout-default .app-header {

babel.config.js

@@ -10,7 +10,7 @@ const presets = [
 ];
 
 const plugins = [
-  "@babel/plugin-proposal-class-properties"
+  '@babel/plugin-proposal-class-properties'
 ];
 
 module.exports = { presets, plugins };

config/jekyll.yml

@@ -7,13 +7,9 @@ timezone: Etc/UTC
 
 # Required to use local plugins
 safe: false
-
 lsi: false
 markdown: kramdown
 
-sass:
-  style: compressed
-
 kramdown:
   # All config options: https://jekyllrb.com/docs/configuration/markdown/
   input: GFM
@@ -41,7 +37,8 @@ includes:
 exclude:
   - .github/
   - .idea/
-  - _js/
+  - _javascript/
+  - _scss/
   - bin/
   - config/
   - lib/