create child theme

Author: Alban Bailly

themes/linode-hugo-base-theme/CHILD-THEME/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn-error.log
+.DS_Store

themes/linode-hugo-base-theme/CHILD-THEME/.stylelintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "no-missing-end-of-source-newline": null,
+  }
+}

themes/linode-hugo-base-theme/CHILD-THEME/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Adam Wathan <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

themes/linode-hugo-base-theme/CHILD-THEME/README.md

@@ -0,0 +1,79 @@
+# Linode Hugo Bade Theme
+
+Base theme for Hugo. Using PostCSS, TailwindCSS and gulp as a task manager.
+Lightweight, versatile and aimed to facilitate developmenmt by using utlility classes while remaining lean.
+
+## Setup
+
+Install Dependencies
+`yarn`
+
+Compile
+`gulp`
+
+Watch during development
+`gulp watch`
+
+## Tools
+
+This theme uses <a href="https://tailwindcss.com/docs/what-is-tailwind/" target="_blank">TailwindCSS</a> as a utlility library.
+Just add the classes provided by the library to tailor your application. 
+
+add
+
+```
+[params.dev]
+enable = true
+```
+
+to your `config.toml` (root dir) to enable the css helper. This will enable a small icon in the bottom right corner of your site. This helper shows you what's available in your css to use for your markup.
+It is a combination of the tailwind styles and custom styles from your theme's CSS.
+
+To avoid ending up with a very large bundle of unused css utility classes, the gulp setup uses CSSPurge to strip whatever is not used in the HUGO layouts.
+This ensures a small css bundle for production use.
+
+The gulp setup also includes a linter and the nanocss minifier.
+
+## Architecture
+
+In order to customize this theme, the proper way is to move/copy the enclosed CHILD-THEME under the `/themes` dir, rename it to your liking and add your modifications from within. 
+This will ensure the maintainability of the linode-base-theme for future updates.
+
+*Note*: You will need to make sure the theme inheritance is set up in your config.toml. (See <a href="https://gohugo.io/themes/theme-components/" target="_blank">Theme Components</a>).
+
+for instance:
+
+```
+theme = ["my-new-theme(child-theme)", "linode-base-theme"]
+```
+
+The theme follows the concept of <a href="http://bradfrost.com/blog/post/atomic-web-design/" target="_blank">Atomic Design</a> to structure its templates and CSS. 
+It is a rather arbitrary set of rules to keep a consistent design system when dealing with a large amount of templates and help with template inheritance.
+
+You will probably want to keep a similar structure for template overriding: see the <a href="https://gohugo.io/templates/lookup-order/" target="_blank">lookup order</a> for more info.
+
+## Default Content
+
+The theme uses `config.toml` to populate some of its templates, so it will probably be empty upon installation.
+
+ex: `layouts/partials/2_molecules/nav.html`
+relies on such definition in `config.toml`
+
+```
+[menu]
+
+[[menu.main]]
+weight = 1
+name = "Page 1"
+url = "/"
+
+[[menu.main]]
+weight = 2
+name = "Page 2"
+url = "page2"
+
+[[menu.main]]
+weight = 3
+name = "Page 3"
+url = "page3"
+```

themes/linode-hugo-base-theme/CHILD-THEME/archetypes/default.md

@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+

themes/linode-hugo-base-theme/CHILD-THEME/gulpfile.js

@@ -0,0 +1,70 @@
+const gulp = require('gulp');
+const postcss = require('gulp-postcss');
+const plumber = require('gulp-plumber');
+const tailwindcss = require('tailwindcss');
+const atImport = require('postcss-easy-import');
+const purgecss = require('gulp-purgecss')
+const autoprefixer = require('autoprefixer');
+const cssInfo = require('gulp-css-info');
+const cssnano = require('cssnano');
+const stylelint = require('stylelint');
+const reporter = require('postcss-reporter');
+
+const tailwind = 'tailwind.js';
+const mainCss = './srcCSS/main.css';
+const css = './srcCSS/**/*.css';
+const html = './layouts/**/*.html'
+const output = 'static/assets/css/';
+const cssInfoDir = 'static/assets/cssinfo/';
+
+const plugins = [
+  atImport,
+  tailwindcss('./tailwind.js'),
+  autoprefixer({
+    browsers: ['last 2 versions', '> 2%']
+  }),
+  cssnano
+];
+
+gulp.task('lint', () => {
+  return gulp.src('./srcCSS/**/*.css')
+    .pipe(postcss([
+      stylelint(), 
+      reporter(),
+    ]));
+});
+
+gulp.task('cssInfo', () => {
+  return gulp.src(mainCss)
+    .pipe(postcss(plugins))
+    .pipe(cssInfo())
+    .pipe(gulp.dest(cssInfoDir))
+});
+
+gulp.task('compile', () => {
+  return gulp.src(mainCss)
+    .pipe(plumber())
+    .pipe(postcss(plugins))
+    .pipe(
+      purgecss({
+        content: [html],
+        whitelist: ['mobile-nav', ['active']]
+      })
+    )
+    .pipe(gulp.dest(output));
+});
+
+gulp.task('watch:css', () => {
+  gulp.watch(css, ['compile']);
+});
+
+gulp.task('watch:html', () => {
+  gulp.watch(html, ['compile']);
+});
+
+gulp.task('watch:tailwind', () => {
+  gulp.watch(tailwind, ['compile']);
+});
+
+gulp.task('default', ['lint', 'compile', 'cssInfo']);
+gulp.task('watch', ['compile', 'watch:css', 'watch:html', 'watch:tailwind']);

themes/linode-hugo-base-theme/CHILD-THEME/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Tailwind Starter Template</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="./dist/styles.css">
+  </head>
+  <body>
+    <div class="min-h-screen flex items-center justify-center">
+      <h1 class="text-5xl text-purple font-sans">Greetings.</h1>
+    </div>
+  </body>
+</html>

themes/linode-hugo-base-theme/CHILD-THEME/package.json

@@ -0,0 +1,22 @@
+{
+    "private": true,
+    "scripts": {},
+    "devDependencies": {},
+    "dependencies": {
+        "autoprefixer": "^8.6.5",
+        "cssnano": "^4.0.0",
+        "glob": "^7.1.2",
+        "gulp": "^3.9.1",
+        "gulp-css-info": "^1.0.1",
+        "gulp-plumber": "^1.2.0",
+        "gulp-postcss": "^7.0.1",
+        "gulp-purgecss": "^1.0.0",
+        "gulp-watch": "^5.0.0",
+        "postcss": "^6.0.14",
+        "postcss-easy-import": "^3.0.0",
+        "postcss-reporter": "^5.0.0",
+        "stylelint": "^9.3.0",
+        "stylelint-config-standard": "^18.2.0",
+        "tailwindcss": "^0.5.3"
+    }
+}

themes/linode-hugo-base-theme/CHILD-THEME/srcCSS/components/0_utilities/_variables.css

@@ -0,0 +1,2 @@
+:root {
+}

themes/linode-hugo-base-theme/CHILD-THEME/srcCSS/components/0_utilities/layout.css

@@ -0,0 +1,10 @@
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}

themes/linode-hugo-base-theme/CHILD-THEME/srcCSS/components/0_utilities/typography.css

@@ -0,0 +1,2 @@
+@import 'tailwind.css';
+@import './**/*.css';

themes/linode-hugo-base-theme/CHILD-THEME/srcCSS/components/0_utilities/utilities.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/preflight";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";