Separate css & js into text variants

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

.gitignore

@@ -1,3 +1,2 @@
 node_modules/
-assets/built/
+**/dist/
-dist/

assets/css/common/author.css

@@ -29,7 +29,7 @@
   margin-left: 0.8rem;
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 1321px) {
   .gh-author-meta {
     flex-direction: row;
     align-items: center;

assets/css/common/pagehead.css

@@ -27,13 +27,13 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 1321px) {
   .gh-pagehead {
     margin-bottom: 8rem;
   }
 }
 
-@media (max-width: 991px) {
+@media (max-width: 1321px) {
   .gh-pagehead {
     position: static;
     grid-column: main-start / main-end;

assets/css/common/root.css

@@ -0,0 +1,7 @@
+:root {
+  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+  --font-serif: Lora, Times, serif;
+  --color-primary-text: var(--color-black);
+  --color-darker-gray: var(--color-black);
+  --head-nav-gap: 3.2rem;
+}

assets/css/main.css

@@ -1,23 +0,0 @@
-@import "@tryghost/shared-theme-assets/assets/css/v1/screen.css";
-
-@import "main/article.css";
-@import "main/author.css";
-@import "main/card.css";
-@import "main/gscan.css";
-@import "main/head.css";
-@import "main/navigation.css";
-@import "main/pagehead.css";
-@import "main/section.css";
-@import "main/tag.css";
-
-@import "lib/prism.css";
-@import "lib/commento.css";
-@import "lib/tocbot.css";
-
-:root {
-  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
-  --font-serif: Lora, Times, serif;
-  --color-primary-text: var(--color-black);
-  --color-darker-gray: var(--color-black);
-  --head-nav-gap: 3.2rem;
-}

assets/css/text/main.css

@@ -0,0 +1,17 @@
+@import "@tryghost/shared-theme-assets/assets/css/v1/screen.css";
+
+@import "../common/article.css";
+@import "../common/author.css";
+@import "../common/gscan.css";
+@import "../common/head.css";
+@import "../common/pagehead.css";
+@import "../common/root.css";
+@import "../common/section.css";
+@import "../common/tag.css";
+
+@import "../lib/prism.css";
+@import "../lib/commento.css";
+@import "../lib/tocbot.css";
+
+@import "card.css";
+@import "navigation.css";

assets/js/common/tabs.js

@@ -0,0 +1,7 @@
+function tabsInNewPage() {
+  var links = document.getElementsByTagName("article")[0].querySelectorAll('a');
+  var a = new RegExp('/' + window.location.host + '/');
+  links.forEach(link => !a.test(link.href) && link.setAttribute("target", "_blank"));
+}
+
+tabsInNewPage();

assets/js/common/toc.js

@@ -1,9 +1,3 @@
-function tabsInNewPage() {
-  var links = document.getElementsByTagName("article")[0].querySelectorAll('a');
-  var a = new RegExp('/' + window.location.host + '/');
-  links.forEach(link => !a.test(link.href) && link.setAttribute("target", "_blank"));
-}
-
 function tableOfContents() {
   var elements = document.getElementsByClassName('kg-toggle-card');
 
@@ -27,6 +21,4 @@ function tableOfContents() {
   }
 }
 
-tabsInNewPage();
 tableOfContents();
-pagination(true);

assets/js/text/main.js

@@ -0,0 +1 @@
+pagination(true);

default.hbs

@@ -7,7 +7,7 @@
     <title>{{meta_title}}</title>
 
     {{> common/lib/header/fonts}}
-    <link rel="stylesheet" href="{{asset "built/main.css"}}">
+    <link rel="stylesheet" href="{{asset "dist/text/main.css"}}">
     {{> common/lib/header/prism}}
 
     {{ghost_head}}
@@ -31,7 +31,7 @@
     {{> common/pswp}}
 
     {{> common/lib/footer/tocbot}}
-    <script src="{{asset "built/main.min.js"}}"></script>
+    <script src="{{asset "dist/text/main.min.js"}}"></script>
     {{> common/lib/footer/prism}}
 
     {{ghost_foot}}

gulpfile.js

@@ -1,6 +1,5 @@
 const { series, parallel, watch, src, dest } = require('gulp');
 const pump = require('pump');
-const fs = require('fs');
 const order = require('ordered-read-streams');
 
 const livereload = require('gulp-livereload');
@@ -13,57 +12,52 @@ const easyimport = require('postcss-easy-import');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 
-function serve(done) {
+const serve = (done) => {
     livereload.listen();
     done();
 }
 
-function hbs(done) {
+const hbs = (done) => {
     pump([
         src(['*.hbs', 'partials/**/*.hbs']),
         livereload()
     ], done);
 }
 
-function css(done) {
+const css = (variant) => (done) => {
     pump([
-        src('assets/css/main.css', { sourcemaps: true }),
+        src(`assets/css/${variant}/main.css`, { sourcemaps: true }),
         postcss([
             easyimport,
             autoprefixer(),
             cssnano()
         ]),
-        dest('assets/built/', { sourcemaps: '.' }),
+        dest(`assets/dist/${variant}/`, { sourcemaps: '.' }),
         livereload()
     ], done);
 }
 
-function getJsFiles(version) {
+const js = (variant) => (done) => {
-    const jsFiles = [
+    const sources = [
-        src(`node_modules/@tryghost/shared-theme-assets/assets/js/${version}/lib/**/*.js`),
+        src(`node_modules/@tryghost/shared-theme-assets/assets/js/v1/lib/**/*.js`),
-        src(`node_modules/@tryghost/shared-theme-assets/assets/js/${version}/main.js`),
+        src(`node_modules/@tryghost/shared-theme-assets/assets/js/v1/main.js`),
+        src(`assets/js/common/*.js`),
+        src(`assets/js/${variant}/main.js`)
     ];
 
-    if (fs.existsSync(`assets/js/lib`)) {
-        jsFiles.push(src(`assets/js/lib/*.js`));
-    }
-
-    jsFiles.push(src(`assets/js/main.js`));
-
-    return jsFiles;
-}
-
-function js(done) {
     pump([
-        order(getJsFiles('v1'), { sourcemaps: true }),
+        order(sources, { sourcemaps: true }),
-        concat('main.min.js'),
+        concat(`main.min.js`),
         uglify(),
-        dest('assets/built/', { sourcemaps: '.' }),
+        dest(`assets/dist/${variant}/`, { sourcemaps: '.' }),
         livereload()
     ], done);
 }
 
-function zipper(done) {
+const allCss = parallel(css('text'));
+const allJs = parallel(js('text'));
+
+const zipper = (done) => {
     const filename = require('./package.json').name + '.zip';
 
     pump([
@@ -83,10 +77,11 @@ function zipper(done) {
 }
 
 const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
-const cssWatcher = () => watch('assets/css/**/*.css', css);
+const cssWatcher = () => parallel(watch('assets/css/**/*.css', allCss));
-const jsWatcher = () => watch('assets/js/**/*.js', js);
+const jsWatcher = () => parallel(watch('assets/js/**/*.js', allJs));
+
 const watcher = parallel(hbsWatcher, cssWatcher, jsWatcher);
-const build = series(css, js);
+const build = series(allCss, allJs);
 
 exports.build = build;
 exports.zip = series(build, zipper);