From 654739eae091fd09cf4a8ad32d47bae0425aed6d Mon Sep 17 00:00:00 2001
From: Awilum <awilum@msn.com>
Date: Wed, 15 Jan 2020 16:37:41 +0300
Subject: [PATCH] feat(core): Default theme - Moving to Tailwind CSS #356

---
 .../themes/default/assets/scss/base/main.scss |  56 --------
 .../assets/scss/components/footer.scss        |  17 ---
 .../default/assets/scss/components/nav.scss   |  38 ------
 site/themes/default/assets/scss/default.scss  |  24 ----
 .../assets/scss/generic/variables.scss        |  40 ------
 .../assets/scss/objects/container.scss        |   7 -
 site/themes/default/assets/src/base.css       |   3 +
 site/themes/default/assets/src/headings.css   |  23 ++++
 site/themes/default/assets/src/styles.css     |   5 +
 site/themes/default/gulpfile.js               | 124 +++++++-----------
 site/themes/default/package.json              |  34 +++--
 site/themes/default/tailwind.config.js        |   5 +
 .../default/templates/partials/base.html      |  62 +++++----
 13 files changed, 143 insertions(+), 295 deletions(-)
 delete mode 100755 site/themes/default/assets/scss/base/main.scss
 delete mode 100644 site/themes/default/assets/scss/components/footer.scss
 delete mode 100644 site/themes/default/assets/scss/components/nav.scss
 delete mode 100755 site/themes/default/assets/scss/default.scss
 delete mode 100755 site/themes/default/assets/scss/generic/variables.scss
 delete mode 100644 site/themes/default/assets/scss/objects/container.scss
 create mode 100644 site/themes/default/assets/src/base.css
 create mode 100644 site/themes/default/assets/src/headings.css
 create mode 100644 site/themes/default/assets/src/styles.css
 create mode 100644 site/themes/default/tailwind.config.js

diff --git a/site/themes/default/assets/scss/base/main.scss b/site/themes/default/assets/scss/base/main.scss
deleted file mode 100755
index 0cf5a36c..00000000
--- a/site/themes/default/assets/scss/base/main.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-//
-// Main
-//
-
-body,
-html {
-    font-family: $base-font-family;
-    font-size: $base-font-size;
-
-    height: 100%;
-
-    color: black;
-    background: white;
-}
-
-body,
-button,
-input,
-p,
-select,
-textarea {
-    font-family: $base-font-family;
-    font-weight: 300;
-
-    color: black;
-}
-
-img {
-    max-width: 100%;
-}
-
-a {
-    text-decoration: underline;
-    color: black;
-
-    &:hover {
-        text-decoration: underline;
-        color: black;
-    }
-}
-
-body,
-p {
-    line-height: $base-line-height;
-}
-
-pre {
-    background: #f0f0f0;
-    padding: 20px;
-}
-
-h1 {
-    font-size: 60px;
-    margin-top: 20px;
-    margin-bottom: 30px;
-}
diff --git a/site/themes/default/assets/scss/components/footer.scss b/site/themes/default/assets/scss/components/footer.scss
deleted file mode 100644
index 6f59a72b..00000000
--- a/site/themes/default/assets/scss/components/footer.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-//
-// Footer
-//
-
-.powered {
-    padding-top: 30px;
-    padding-bottom: 30px;
-    text-transform: uppercase;
-    text-align: center;
-    font-size: 12px;
-    opacity: .7;
-
-    > a {
-        opacity: .7;
-        text-decoration: none;
-    }
-}
diff --git a/site/themes/default/assets/scss/components/nav.scss b/site/themes/default/assets/scss/components/nav.scss
deleted file mode 100644
index f46eb014..00000000
--- a/site/themes/default/assets/scss/components/nav.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-//
-// Nav
-//
-
-.navbar {
-    padding: 0;
-}
-
-.navbar-brand {
-    letter-spacing: 3px;
-    text-transform: uppercase;
-    text-decoration: none;
-}
-
-.navbar-light {
-    .navbar-nav {
-        .nav-link {
-            text-decoration: none;
-            color: rgba(0,0,0,.5);
-            padding: 15px 25px;
-            border-bottom: 2px solid transparent;
-            border-top: 2px solid transparent;
-        }
-    }
-}
-
-.navbar-light .navbar-nav .nav-link:focus,
-.navbar-light .navbar-nav .nav-link:hover {
-    border-bottom: 2px solid #ccc;
-}
-
-.navbar-light .navbar-nav .active > .nav-link,
-.navbar-light .navbar-nav .nav-link.active,
-.navbar-light .navbar-nav .nav-link.show,
-.navbar-light .navbar-nav .show > .nav-link {
-    color: rgba(0,0,0,1);
-    border-bottom: 2px solid #000;
-}
diff --git a/site/themes/default/assets/scss/default.scss b/site/themes/default/assets/scss/default.scss
deleted file mode 100755
index 6d18b39a..00000000
--- a/site/themes/default/assets/scss/default.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-//
-// Simple Theme main SCSS
-// (c) Sergey Romanenko <http://digital.flextype.org>
-//
-
-// Generic
-// Low-specificity, far-reaching rulesets
-@import "generic/variables";
-
-// Base
-// Unclassed HTML elements
-@import "base/main";
-
-// Objects
-// Abstractions, Objects and design patterns
-@import "objects/container";
-
-// Components
-// Discrete, complete chunks of UI
-@import "components/nav";
-@import "components/footer";
-
-// Thumps
-// High-specificity, very explicit selectors. Overrides and helper classes
diff --git a/site/themes/default/assets/scss/generic/variables.scss b/site/themes/default/assets/scss/generic/variables.scss
deleted file mode 100755
index 5930be07..00000000
--- a/site/themes/default/assets/scss/generic/variables.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-//
-// Variables
-//
-
-//
-// Base
-//
-$base-font-family: 'Roboto', sans-serif;
-$base-font-color: #606060;
-$base-font-size: 16px;
-$base-line-height: 24px;
-
-//
-// Colors Grayscale
-//
-$black: #000000;
-$gray-darkest: lighten($black, 13.5%);
-// #222222
-$gray-darker: lighten($black, 26.5%);
-// #444444
-$gray-dark: lighten($black, 46.7%);
-// #777777
-$gray: lighten($black, 66.5%);
-// #aaaaaa
-$gray-light: lighten($black, 87%);
-// #dedede
-$gray-lighter: lighten($black, 93.75%); // #efefef
-$gray-lightest: lighten($black, 97.25%); // #f8f8f8
-$white: #ffffff;
-
-//
-// Scaffolding
-//
-$body-bg: #f2f4f5;
-
-//
-// Spacing
-//
-$base-spacing-unit: $base-font-size;
-$half-spacing-unit: $base-spacing-unit / 2;
\ No newline at end of file
diff --git a/site/themes/default/assets/scss/objects/container.scss b/site/themes/default/assets/scss/objects/container.scss
deleted file mode 100644
index 47ee3a99..00000000
--- a/site/themes/default/assets/scss/objects/container.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// Container
-//
-
-.content {
-    padding-top: 40px;
-}
diff --git a/site/themes/default/assets/src/base.css b/site/themes/default/assets/src/base.css
new file mode 100644
index 00000000..f37b3396
--- /dev/null
+++ b/site/themes/default/assets/src/base.css
@@ -0,0 +1,3 @@
+body {
+    @apply bg-white text-black text-base;
+}
diff --git a/site/themes/default/assets/src/headings.css b/site/themes/default/assets/src/headings.css
new file mode 100644
index 00000000..c07d44ed
--- /dev/null
+++ b/site/themes/default/assets/src/headings.css
@@ -0,0 +1,23 @@
+h1, h2, h3, h4, h5 {
+    @apply mb-8 font-bold;
+}
+
+h1 {
+  @apply text-4xl;
+}
+
+h2 {
+  @apply text-3xl;
+}
+
+h3 {
+  @apply text-2xl;
+}
+
+h4 {
+  @apply text-xl;
+}
+
+h5 {
+  @apply text-lg;
+}
diff --git a/site/themes/default/assets/src/styles.css b/site/themes/default/assets/src/styles.css
new file mode 100644
index 00000000..4ef36683
--- /dev/null
+++ b/site/themes/default/assets/src/styles.css
@@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+@import "base";
+@import "headings";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
diff --git a/site/themes/default/gulpfile.js b/site/themes/default/gulpfile.js
index 6ebdda97..f18be46a 100755
--- a/site/themes/default/gulpfile.js
+++ b/site/themes/default/gulpfile.js
@@ -1,79 +1,55 @@
-//
-// Flextype Gulp.js
-// (c) Sergey Romanenko <http://digital.flextype.org>
-//
+const gulp = require('gulp');
+const tailwindConfig = "tailwind.config.js";
+const mainCSS = "assets/src/styles.css";
 
-const { series, src, dest } = require('gulp');
-const del = require('del');
-const csso = require('gulp-csso');
-const concat = require('gulp-concat');
-const sourcemaps = require('gulp-sourcemaps');
-const autoprefixer = require('gulp-autoprefixer');
-const sass = require('gulp-sass');
-
-function moveBootstrapCss() {
-    return src('node_modules/bootstrap/dist/css/bootstrap.min.css')
-        .pipe(concat('1.min.css'))
-        .pipe(dest('assets/dist/css/tmp'));
+/**
+ * Custom PurgeCSS Extractor
+ * https://github.com/FullHuman/purgecss
+ */
+class TailwindExtractor {
+  static extract(content) {
+    return content.match(/[\w-/:]+(?<!:)/g) || [];
+  }
 }
 
-function buldDefaultCss() {
-      return src('assets/scss/default.scss')
-          .pipe(sass().on('error', sass.logError))
-          .pipe(concat('2.min.css'))
-          .pipe(dest('assets/dist/css/tmp'));
-}
+/**
+ * Task: gulp css
+ */
+gulp.task("css", function() {
+  const atimport = require("postcss-import");
+  const postcss = require("gulp-postcss");
+  const tailwindcss = require("tailwindcss");
+  const purgecss = require("gulp-purgecss");
+  const concat = require('gulp-concat');
+  const csso = require('gulp-csso');
+  const sourcemaps = require('gulp-sourcemaps');
+  const autoprefixer = require('gulp-autoprefixer');
 
-function moveJqueryJs() {
-    return src('node_modules/jquery/dist/jquery.min.js')
-        .pipe(concat('1.min.js'))
-        .pipe(dest('assets/dist/js/tmp'));
-}
+  return gulp
+    .src(mainCSS)
+    .pipe(postcss([atimport(), tailwindcss(tailwindConfig)]))
+    .pipe(
+      purgecss({
+        content: ["**/*.html", "../../**/*.md"],
+        extractors: [
+          {
+            extractor: TailwindExtractor,
+            extensions: ["html", "md"]
+          }
+        ]
+      })
+    )
+    .pipe(autoprefixer({
+        overrideBrowserslist: [
+            "last 1 version"
+        ],
+        cascade: false
+    }))
+    .pipe(csso())
+    .pipe(concat('build.min.css'))
+    .pipe(gulp.dest("assets/dist/css/"));
+});
 
-function moveBootstrapJs() {
-    return src('node_modules/bootstrap/dist/js/bootstrap.min.js')
-        .pipe(concat('2.min.js'))
-        .pipe(dest('assets/dist/js/tmp'));
-}
-
-function moveSimpleLightboxJs() {
-    return src('node_modules/simplelightbox/dist/simple-lightbox.min.js')
-        .pipe(concat('3.min.js'))
-        .pipe(dest('assets/dist/js/tmp'));
-}
-
-function mergeCss() {
-    return src('assets/dist/css/tmp/**')
-        .pipe(autoprefixer({
-            overrideBrowserslist: [
-                "last 1 version"
-            ],
-            cascade: false
-        }))
-        .pipe(csso())
-        .pipe(concat('build.min.css'))
-        .pipe(dest('assets/dist/css/'));
-}
-
-function mergeJs() {
-    return src('assets/dist/js/tmp/**')
-        .pipe(concat('build.min.js'))
-        .pipe(dest('assets/dist/js/'));
-}
-
-function cleanTmpCss() {
-    return del('assets/dist/css/tmp/');
-}
-
-function cleanTmpJs() {
-    return del('assets/dist/js/tmp/');
-}
-
-exports.default = series(moveBootstrapCss,
-                         buldDefaultCss,
-                         mergeCss,
-                         cleanTmpCss,
-                         moveJqueryJs,
-                         moveBootstrapJs,
-                         mergeJs,
-                         cleanTmpJs);
+gulp.task('watch', function () {
+    gulp.watch(["**/*.html", "../../**/*.md", "assets/src/"], gulp.series('css'));
+});
diff --git a/site/themes/default/package.json b/site/themes/default/package.json
index 9db96a28..1ce9ce54 100755
--- a/site/themes/default/package.json
+++ b/site/themes/default/package.json
@@ -1,17 +1,31 @@
 {
   "name": "Default",
-  "version": "0.9.6",
-  "devDependencies": {
-    "bootstrap": "~4.4.1",
-    "del": "^5.0.0",
-    "es6-promise": "^4.2.4",
+  "version": "0.9.7-DEV",
+  "description": "Default theme for Flextype",
+  "homepage": "http://flextype.org",
+  "author": "Sergey Romanenko",
+  "license": "MIT",
+  "keywords": [
+    "flextype",
+    "cms",
+    "flat-file cms",
+    "flat cms",
+    "flatfile cms",
+    "html"
+  ],
+  "bugs": {
+    "url": "https://github.com/flextype/flextype/issues"
+  },
+  "dependencies": {
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^6.0.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-purgecss": "^1.2.0",
+    "gulp-autoprefixer": "^7.0.1",
     "gulp-concat": "^2.6.1",
-    "gulp-csso": "^3.0.1",
-    "gulp-sass": "^4.0.2",
+    "gulp-csso": "^4.0.1",
     "gulp-sourcemaps": "^2.6.5",
-    "jquery": "^3.4.1",
-    "popper.js": "^1.15.0"
+    "postcss-import": "^12.0.1",
+    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "tailwindcss": "^1.1.4"
   }
 }
diff --git a/site/themes/default/tailwind.config.js b/site/themes/default/tailwind.config.js
new file mode 100644
index 00000000..22f7a0c9
--- /dev/null
+++ b/site/themes/default/tailwind.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  theme: {},
+  variants: {},
+  plugins: [],
+}
diff --git a/site/themes/default/templates/partials/base.html b/site/themes/default/templates/partials/base.html
index cc52bd01..c55506e0 100644
--- a/site/themes/default/templates/partials/base.html
+++ b/site/themes/default/templates/partials/base.html
@@ -28,42 +28,46 @@
         {% endblock %}
     </head>
     <body>
-        <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom box-shadow">
-        <div class="container">
-          <a class="navbar-brand" href="{{ base_url() }}">{{ registry.settings.title|e('html') }}</a>
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
-            <ul class="navbar-nav">
-                {% for item in entries.fetch('', {'order_by': {'field': 'menu_item_order', 'direction': 'asc'}}) %}
-                    {% if item.menu_item_title %}
-                        <li class="nav-item">
-                            <a class="nav-link {% if item.menu_item_url in entry.slug %}active{% endif %}" href="{{ base_url() }}/{{ item.menu_item_url }}">{{ item.menu_item_title }}</a>
-                        </li>
-                    {% endif %}
-                {% endfor %}
-            </ul>
+        <nav class="bg-black text-white">
+            <div class="container mx-auto pl-16 pr-16 pt-6 pb-6 clearfix">
+              <div class="w-full lg:w-2/12
+                          text-center lg:text-left
+                          float-left text-white p-2 uppercase tracking-wide">
+                <a href="{{ base_url() }}" class="w-full lg:w-2/12 pl-2 pr-2 text-center text-base logo no-underline">{{ registry.settings.title|e('html') }}</a>
+              </div>
+              <div class="w-full float-right lg:w-9/12 font-noirpro-semibold">
+                <div class="text-right p-2">
+                    {% for item in entries.fetch('', {'order_by': {'field': 'menu_item_order', 'direction': 'asc'}}) %}
+                        {% if item.menu_item_title %}
+                        <a href="{{ base_url() }}/{{ item.link }}"
+                           class="{% if item.menu_item_url in entry.slug %}border-white{% endif %}
+                                   uppercase
+                                   relative
+                                   block
+                                   text-white
+                                   text-center
+                                   mr-0
+                                   nav-item
+                                   lg:mr-4
+                                   lg:inline-block">
+                                   {{ item.title }}
+                               </a>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+              </div>
           </div>
-        </div>
         </nav>
-        <main role="main" class="container content">
-            <div id="content">{% block content %}{% endblock %}</div>
-            <div class="powered">
+
+        <main role="main" class="container">
+            <section id="content" class="p-10">{% block content %}{% endblock %}</section>
+            <footer class="text-center px-10 pt-5 pb-10">
                 {% block footer %}
                     {{ tr('site_powered_by_flextype')|raw }}
                 {% endblock %}
-            </div>
+            </footer>
         </main>
 
-        {% set build_js = base_url() ~ '/site/themes/' ~ registry.settings.theme ~ '/assets/dist/js/build.min.js' %}
-        {% do assets.add('js', build_js, 'site', 1) %}
-        {% for assets_site in assets.get('js', 'site') %}
-            {% for assets_by_priorities in assets_site %}
-                <script src="{{ assets_by_priorities.asset }}"></script>
-            {% endfor %}
-        {% endfor %}
-
         {% do emitter.emit('onThemeTail') %}
     </body>
 </html>