Replace Webpack with Hugo Pipes 🎉

.gitignore

@@ -1,3 +1,3 @@
-node_modules
+assets/node_modules
 exampleSite/public
 exampleSite/resources

README.md

@@ -35,7 +35,7 @@ Custom RSS template without an e-mail address.
 #### Sitemap
 Custom sitemap template to prevent rendering content from media directory.
 #### Social icons
-Add information about your social profile in the config file to display it on the homepage. Supported services: email, Facebook, Github, Google+, Linkedin, Messenger, Spotify, Stackoverflow, Telegram, Twitter.
+Add information about your social profile in the config file to display it on the homepage. Supported services: email, Facebook, Github, Google+, LinkedIn, Messenger, Spotify, Stackoverflow, Telegram, Twitter.
 #### Gravatar support
 Just add your Gravatar email to the config file to display your avatar on the home page.
 #### and more
@@ -177,11 +177,13 @@ Insert image without resizing (the same image for all devices/resolutions).
 
 ## Development
 
-This theme uses `webpack`. You can install all required libraries using [yarn](https://github.com/yarnpkg/yarn), just run `yarn install`.
+1. Install dependencies.
 
-When you change SCSS or Javascript files, you can compile changes using `npm run build` command.
+```cd assets && yarn install```
 
-To review your changes, you can use `npm run start` command which will run `hugo serve` with content from `exampleSite`. 
+2. Run development server.
+
+```hugo server --source=exampleSite --themesDir=../..```
 
 ## Browsers support
 
@@ -195,6 +197,7 @@ Mobile:
 
 - Firefox (latest)
 - Chrome (latest)
+- Safari (latest)
 
 It probably works in other browsers but it hasn't been tested yet.
 

assets/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "simplicity",
+  "description": "Minimalist theme for Hugo",
+  "version": "2.0.2",
+  "author": {
+    "name": "Przemysław Kołodziejczyk",
+    "url": "https://eshlox.net"
+  },
+  "repository": "eshlox/simplicity",
+  "license": "MIT",
+  "dependencies": {
+    "baguettebox.js": "^1.11.0",
+    "headroom.js": "^0.9.4",
+    "normalize.css": "^8.0.0",
+    "vanilla-lazyload": "^10.18.0"
+  }
+}

src/scripts/main.js → assets/src/scripts/main.js

@@ -1,9 +1,3 @@
-import '../styles/styles'
-
-import baguetteBox from 'baguettebox.js'
-import Headroom from 'headroom.js'
-import LazyLoad from 'vanilla-lazyload'
-
 document.addEventListener('DOMContentLoaded', function(event) {
   // LazdyLoad
   const myLazyLoad = new LazyLoad();

src/styles/_components/base.scss → assets/src/styles/_components/base.scss

@@ -4,13 +4,22 @@ html, body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: $base-font-size;
   line-height: $base-line-height;
+  height: 100%;
+  margin: 0;
   text-rendering: optimizeLegibility;
 }
 
 body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+  display: grid;
+  grid-gap: 1rem;
+  height: 100%;
+  grid-template-columns: 1fr;
+  grid-template-areas: "nav" "main" "footer";
+
+  grid-template-rows: 5rem 1fr 3rem;
+  @media screen and (max-width: $breakpoint) {
+    grid-template-rows: 5rem 1fr 6rem;
+  }
 
   a {
     color: $links-color;
@@ -28,12 +37,19 @@ body {
     height: 0;
   }
 
+  nav {
+    grid-area: nav;
+  }
+
   main {
-    box-sizing: border-box;
-    flex: 1;
-    margin: 0 auto;
+    grid-area: main;
+    justify-self: center;
+    grid-column: 1 / -1;
     max-width: 900px;
-    padding: $navbar-height+1rem 1rem 2rem 1rem;
-    width: 100%;
+    width: 90%;
+  }
+
+  footer {
+      grid-area: footer;
   }
 }

src/styles/_components/content.scss → assets/src/styles/_components/content.scss

@@ -18,7 +18,7 @@ body {
       }
 
       section {
-        text-align: justify;
+        // text-align: justify;
 
         blockquote {
           @include element-margin($itemMargin * 2, false, true);

src/styles/_components/homepage.scss → assets/src/styles/_components/homepage.scss

@@ -11,7 +11,7 @@ body {
         background-color: $color-silver;
         display: inline-block;
         height: 20px;
-        margin: 0.1rem 0;
+        margin: 0.1rem;
         padding: 5px;
         width: 20px;
 
@@ -52,7 +52,10 @@ body {
         &.rss {
           background-color: #FFA500;
         }
+        &.gitlab {
+          background-color: #E24329;
+        }
       }
     }
   }
-}
+}

src/styles/_settings.scss → assets/src/styles/_settings.scss

@@ -22,3 +22,27 @@ $navbar-icon-color: $color-black;
 $navbar-text-color: $color-black;
 
 $links-color: $color-brilliant-azure;
+
+// $breakpoints: (
+//   small: 600px,
+//   large: 1200px
+// );
+
+// $typi: (
+//   base: (
+//     null: (16px, 1.4),
+//     small: (18px),
+//     large: (20px)
+//   ),
+//   h1: (
+//     null: (24px, 1.3),
+//     small: (2.369em, 1.2),
+//   )
+//   // Other font maps here
+// );
+
+// @include typi-init;
+
+// h1 {
+//   @include typi('h1');
+// }

src/styles/styles.scss → assets/src/styles/styles.scss

@@ -1,5 +1,5 @@
-@import "~normalize.css/normalize";
-@import "~baguettebox.js/src/baguetteBox.scss";
+// @import "typi/scss/typi";
+@import "baguetteBox.js/src/baguetteBox";
 
 @import "settings";
 

assets/yarn.lock

@@ -0,0 +1,28 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+baguettebox.js@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/baguettebox.js/-/baguettebox.js-1.11.0.tgz#38b4e478dc91cad9e19060a15b19aae94724728d"
+  integrity sha512-4IEXDE2Yje3o8nOdGoonxOfpiveXfF6YV4ggV04ky/pMquH/cKM1Tv7LeD3QPH6RK72V6c+oRFFLnrMc4xO5Cg==
+
+headroom.js@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/headroom.js/-/headroom.js-0.9.4.tgz#0c4e6b4563bb69df55aecdefaba3227566f2df5a"
+  integrity sha1-DE5rRWO7ad9Vrs3vq6MidWby31o=
+
+normalize.css@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.0.tgz#14ac5e461612538a4ce9be90a7da23f86e718493"
+  integrity sha512-iXcbM3NWr0XkNyfiSBsoPezi+0V92P9nj84yVV1/UZxRUrGczgX/X91KMAGM0omWLY2+2Q1gKD/XRn4gQRDB2A==
+
+typi@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/typi/-/typi-3.2.0.tgz#2d8c3852192d8b8d7021ea10f703de6442849a7f"
+  integrity sha1-LYw4Uhkti41wIeoQ9wPeZEKEmn8=
+
+vanilla-lazyload@^10.18.0:
+  version "10.18.0"
+  resolved "https://registry.yarnpkg.com/vanilla-lazyload/-/vanilla-lazyload-10.18.0.tgz#55b262d9221ed160bba11587e6ec851a37ac30e6"
+  integrity sha512-PX8SuHCPzjL7B3ral1WhCtYNYwB2jqPF26TQ68xtW6TAPezYiCnugZWkFF5xSWG4zTcIMUIPXGSw564mxw6Pnw==

layouts/_default/baseof.html

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="{{ or .Params.language .Site.LanguageCode }}">
-  <head>
-    {{ partial "head.html" . }}
-  </head>
+  {{ partial "head.html" . }}
   <body>
     {{ partial "navbar.html" . }}
     <main>
       {{ block "main" . -}}{{- end }}
     </main>
     {{ partial "footer.html" . }}
-    <script src="{{ print "/assets/js/" $.Site.Data.assets.main.js | relURL }}"></script>
+    <!-- JS -->
+    {{ $baguetteBox := resources.Get "/node_modules/baguetteBox.js/src/baguetteBox.js" }}
+    {{ $headroom := resources.Get "/node_modules/headroom.js/dist/headroom.js" }}
+    {{ $lazyload := resources.Get "/node_modules/vanilla-lazyload/dist/lazyload.js" }}
+    {{ $main := resources.Get "/src/scripts/main.js" }}
+    {{ $scripts := slice $baguetteBox $headroom $lazyload $main | resources.Concat "assets/js/scripts.js" | resources.Minify }}
+    <script src="{{ $scripts.Permalink }}"></script>
     {{ template "_internal/google_analytics_async.html" . }}
   </body>
 </html>

layouts/index.html

@@ -31,6 +31,14 @@
         </svg>
       </a>
     {{ end }}
+    {{ if .Site.Author.gitlab }}
+      <a href="{{ .Site.Author.gitlab }}" class="gitlab" title="Gitlab">
+        <svg aria-labelledby="simpleicons-gitlab-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <title id="simpleicons-gitlab-icon">GitLab icon</title>
+          <path d="M23.955 13.587l-1.342-4.135-2.664-8.189c-.135-.423-.73-.423-.867 0L16.418 9.45H7.582L4.919 1.263C4.783.84 4.185.84 4.05 1.26L1.386 9.449.044 13.587c-.121.375.014.789.331 1.023L12 23.054l11.625-8.443c.318-.235.453-.647.33-1.024"/>
+        </svg>
+      </a>
+    {{ end }}
     {{ if .Site.Author.github }}
       <a href="{{ .Site.Author.github }}" class="github" title="GitHub">
         <svg aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

layouts/partials/head.html

@@ -1,24 +1,30 @@
-<meta http-equiv="content-type" content="text/html; charset=utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>{{- .Title }} - {{ .Site.Title -}}</title>
-<meta name="author" content="{{ .Site.Author.name }}">
-<meta name="description" content="{{ .Site.Params.description }}">
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{- .Title }} - {{ .Site.Title -}}</title>
+  <meta name="author" content="{{ .Site.Author.name }}">
+  <meta name="description" content="{{ .Site.Params.description }}">
 
-{{ .Hugo.Generator }}
+  {{ .Hugo.Generator }}
 
-<!-- CSS -->
-<link href="//fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
-<link rel="stylesheet" href='{{ print "/assets/css/" $.Site.Data.assets.main.css | relURL }}'>
+  <!-- CSS -->
+  {{ $options := (dict "targetPath" "assets/css/styles.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "assets/node_modules")) }}
+  {{ $styles := resources.Get "/src/styles/styles.scss" | resources.ToCSS $options }}
+  {{ $normalize := slice (resources.Get "/node_modules/normalize.css/normalize.css") | resources.Concat "assets/css/normalize.css" | resources.Minify }}
+  <link href="//fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">
+  <link rel="stylesheet" href="{{ $normalize.Permalink }}" media="screen">
+  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
 
-<!-- Icons -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ print "/assets/img/apple-touch-icon.png" | relURL }}">
-<link rel="shortcut icon" href="{{ print "/assets/img/favicon.ico" | relURL }}">
+  <!-- Icons -->
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ print "/assets/img/apple-touch-icon.png" | relURL }}">
+  <link rel="shortcut icon" href="{{ print "/assets/img/favicon.ico" | relURL }}">
 
-<!-- RSS -->
-<link href="{{ $.LanguagePrefix }}{{ "/posts/index.xml" | relURL }}" rel="alternate" type="application/rss+xml" title="{{- .Site.Title -}}" />
-<link href="{{ $.LanguagePrefix }}{{ "/posts/index.xml" | relURL }}" rel="feed" type="application/rss+xml" title="{{- .Site.Title -}}" />
+  <!-- RSS -->
+  <link href="{{ $.LanguagePrefix }}{{ "/posts/index.xml" | relURL }}" rel="alternate" type="application/rss+xml" title="{{- .Site.Title -}}" />
+  <link href="{{ $.LanguagePrefix }}{{ "/posts/index.xml" | relURL }}" rel="feed" type="application/rss+xml" title="{{- .Site.Title -}}" />
 
-{{ template "_internal/opengraph.html" . }}
-{{ template "_internal/google_news.html" . }}
-{{ template "_internal/schema.html" . }}
-{{ template "_internal/twitter_cards.html" . }}
+  {{ template "_internal/opengraph.html" . }}
+  {{ template "_internal/google_news.html" . }}
+  {{ template "_internal/schema.html" . }}
+  {{ template "_internal/twitter_cards.html" . }}
+</head>