Add basic AMP support

Signed-off-by: Yen-Chin Lee <[email protected]>

Author: coldnew

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components"
+}

.gitignore

@@ -10,4 +10,7 @@ pom.xml.asc
 .lein-plugins/
 .lein-failures
 /resources/public/
-.gh-pages/
+.gh-pages/
+/bower_components/
+/node_modules/
+/build/

bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "clojuretw-weekly",
+  "version": "1.0.0",
+  "homepage": "https://github.com/clojure-tw/weekly",
+  "author": "Yen-Chin, Lee",
+  "keywords": [
+    "clojure",
+    "amp"
+  ],
+  "license": "CC0",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components"
+  ],
+  "dependencies": {
+    "bootstrap": "3.3.0"
+  }
+}

circle.yml

@@ -14,7 +14,7 @@ dependencies:
     - chmod 755 lein
     - ./lein -v
     - ./lein deps
-    - npm install -g html-minifier
+    - npm install
   cache_directories:
     - ~/.m2
     - ~/.lein

deploy.sh

@@ -14,8 +14,11 @@ rm -rf $OUT || exit 0;
 # create repo directory
 mkdir $OUT
 
+# build with amp support by gulp
+./node_modules/gulp/bin/gulp.js
+
 # Copy all prebuild files, if html-minifer exist, use it to minify html content
-cp -R resources/public/weekly/* $OUT
+cp -R ./build/dist/* $OUT
 cp -f circle.yml $OUT
 if hash html-minifier; then
     html-minifier --input-dir $OUT --output-dir $OUT --collapse-whitespace --file-ext html

gulpfile.js

@@ -0,0 +1,102 @@
+"use strict";
+
+const gulp = require('gulp-help')(require('gulp'));
+const bower = require('gulp-bower');
+const purify = require('gulp-purifycss');
+const concatCss = require('gulp-concat-css');
+const cleanCSS = require('gulp-clean-css');
+const gulpIgnore = require('gulp-ignore');
+const htmlreplace = require('gulp-html-replace');
+const gulpRemoveHtml = require('gulp-remove-html');
+const htmlmin = require('gulp-html-minifier');
+const gulpAmpValidator = require('gulp-amphtml-validator');
+const replace = require('gulp-replace');
+const uncss = require('gulp-uncss');
+
+const paths = {
+  src: {
+    dir:  './resources/public/weekly',
+    html: './resources/public/weekly/**/*.html'
+  },
+  dist: {
+    dir:  './build/dist',
+    html: './build/dist/**/*.html'
+  },
+  tmp: {
+    dir: './build/tmp',
+    css: './build/tmp/app.css'
+  }
+};
+
+gulp.task('compile:css', function() {
+  return gulp.src(['./bower_components/bootstrap/dist/css/bootstrap.min.css',
+                   './resources/public/weekly/css/screen.css'])
+    .pipe(concatCss('app.css'))
+    .pipe(purify([paths.src.html]))
+  // remove !importent which not supported by amphtml
+    .pipe(replace(/!important/g, ''))
+  // remove @-ms-viewport which not supported by amphtml
+    .pipe(replace(/@-ms-viewport\s*{\n(.*?)\n}/g, ''))
+    .pipe(gulp.dest(paths.tmp.dir));
+});
+
+// inline-css inserts the cleaned + minified CSS into HTML
+gulp.task('build:inline-css', ['compile:css'], function() {
+  return gulp.src(paths.src.html)
+    .pipe(htmlreplace({
+      'cssInline': {
+        'src': gulp.src(paths.tmp.css).pipe(cleanCSS()),
+        'tpl': '<style amp-custom>%s</style>'
+      }
+    }))
+    .pipe(gulp.dest(paths.dist.dir));
+});
+
+gulp.task('build:remove-html', ['build:inline-css'], function () {
+  return gulp.src(paths.dist.html)
+    .pipe(gulpRemoveHtml({
+      'keyword': 'build:removeHtml'
+    }))
+    .pipe(gulp.dest(paths.dist.dir));
+});
+
+gulp.task('build:minify-html', ['build:remove-html'], function() {
+  return gulp.src(paths.dist.html)
+    .pipe(htmlmin({collapseWhitespace: true,
+                   minifyJS: true,
+                   minifyCSS: true,
+                   removeComments: true}))
+    .pipe(gulp.dest(paths.dist.dir));
+});
+
+gulp.task('bower', function() {
+  return bower();
+});
+
+gulp.task('validate:amphtml', ['build:minify-html'], function() {
+//gulp.task('validate:amphtml', function() {
+return gulp.src(paths.dist.html)
+  // Some page no need to support amp, just ignore it
+    .pipe(gulpIgnore.exclude(['**/404.html']))
+  // Valide the input and attach the validation result to the "amp" property
+  // of the file object.
+    .pipe(gulpAmpValidator.validate())
+  // Print the validation results to the console.
+    .pipe(gulpAmpValidator.format())
+  // Exit the process with error code (1) if an AMP validation error
+  // occurred.
+    .pipe(gulpAmpValidator.failAfterError());
+});
+
+gulp.task('build', 'build all resources', [
+  'bower',
+  'compile:css',
+  'build:inline-css',
+  'build:remove-html',
+  'build:minify-html',
+  'validate:amphtml'
+]);
+
+gulp.task('default', 'build all resources', [
+  'build',
+]);

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "clojuretw-weekly",
+  "version": "1.0.0",
+  "description": "Weekly news for Clojure Taiwan Community",
+  "keywords": [
+    "clojure",
+    "amp"
+  ],
+  "author": "Yen-Chin, Lee",
+  "license": "CC0",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-amphtml-validator": "^1.0.0",
+    "gulp-bower": "0.0.13",
+    "gulp-clean-css": "^2.0.12",
+    "gulp-concat-css": "^2.3.0",
+    "gulp-help": "^1.6.1",
+    "gulp-html-minifier": "^0.1.8",
+    "gulp-html-replace": "^1.6.1",
+    "gulp-ignore": "^2.0.2",
+    "gulp-purifycss": "^0.2.0",
+    "gulp-remove-html": "^1.3.0",
+    "gulp-replace": "^0.5.4",
+    "gulp-uncss": "^1.0.6",
+    "purifycss": "^1.1.9"
+  },
+  "dependencies": {
+    "bower": "^1.8.0"
+  }
+}

project.clj

@@ -12,4 +12,5 @@
             :plugins [[lein-ring "0.9.7"]]
             :main cryogen.core
             :ring {:init cryogen.server/init
-                   :handler cryogen.server/handler})
+                   :handler cryogen.server/handler}
+            :aliases {"gulp" ["do" ["shell" "node_modules/.bin/gulp" "default"]]})

resources/templates/themes/clojuretw/css/screen.css

@@ -81,6 +81,30 @@ a:hover {
     background-color: #fff;
 }
 
+.navbar .hamburger {
+    background-color: transparent;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -6 24 24"><path fill="#4A4A4A" d="M0 12h18v-2H0v2M0 7h18V5H0v2M0 0v2h18V0H0"/></svg>');
+    background-repeat: no-repeat;
+    background-size: 30px 24px;
+    background-position: center center;
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    display: none;
+    cursor: pointer;
+    -ms-flex-item-align: center;
+    -ms-grid-row-align: center;
+    align-self: center;
+}
+
+/* @media only screen and (max-width: 956px) { */
+/*     .navbar .hamburger { */
+/*         display: inline-block */
+/*     } */
+/* } */
+
 #sidebar {
     margin-left: 15px;
     margin-top: 50px;
@@ -179,8 +203,85 @@ pre, code, .hljs {
         float:left;
         text-align: left;
     }
+    .navbar .hamburger {
+        display: inline-block
+    }
 }
 
 ul li {
     margin:0 0 10px 0;
 }
+
+/* footer */
+footer p {
+    text-align: center;
+}
+
+/* amp-sidebar */
+amp-sidebar {
+    width: 180px;
+    background: #fff;
+    min-width: 80vw;
+}
+
+amp-sidebar nav ul {
+    padding-right: 0;
+    background: #fff
+}
+amp-sidebar nav ul li {
+    list-style: none;
+    margin-bottom: 0
+}
+amp-sidebar nav ul li ul {
+    margin-left: 12px;
+    margin-bottom: 0
+}
+amp-sidebar nav ul li ul li {
+    list-style: none;
+    margin: 0
+}
+amp-sidebar nav ul li ul li a {
+    padding: 6px 15px;
+    font-size: 1.2em
+}
+amp-sidebar nav a,
+amp-sidebar nav span,
+amp-sidebar nav h2 {
+    color: #424242;
+    text-transform: uppercase;
+    font-weight: 400;
+    display: block;
+    padding: 6px 12px;
+    letter-spacing: 0.04em;
+    font-size: 15px
+}
+amp-sidebar nav nav {
+    background: #1e879e;
+    box-sizing: border-box
+}
+amp-sidebar nav nav h2 {
+    font-style: italic;
+    margin-bottom: 0
+}
+amp-sidebar nav nav li {
+    font-size: 14px
+}
+amp-sidebar nav nav li ul li.current {
+    position: relative
+}
+amp-sidebar nav nav li ul li.current span {
+    color: #0379C4;
+    font-weight: 400
+}
+amp-sidebar nav nav li ul li.current ul {
+    border-top: 0;
+    margin-top: 0;
+    padding-top: 0;
+    padding-left: 12px
+}
+amp-sidebar nav nav li ul li.current::after {
+    left: -12px
+}
+amp-sidebar nav nav li ul li a {
+    font-size: 1em
+}