Hk responsive layout

.gitignore

@@ -9,3 +9,5 @@ Gemfile.lock
 /junit/
 *.dwarf
 /bin/lucky/
+/backstop_data/html_report/
+/backstop_data/bitmaps_test/

backstop.json

@@ -0,0 +1,74 @@
+{
+  "id": "backstop_default",
+  "viewports": [
+    {
+      "label": "phone",
+      "width": 320,
+      "height": 480
+    },
+    {
+      "label": "tablet",
+      "width": 1024,
+      "height": 768
+    },
+    {
+      "label": "desktop",
+      "width": 2880,
+      "height": 1800
+    }
+  ],
+  "onBeforeScript": "chromy/onBefore.js",
+  "onReadyScript": "chromy/onReady.js",
+  "scenarios": [
+    {
+      "label": "Blog Index",
+      "cookiePath": "backstop_data/engine_scripts/cookies.json",
+      "url": "http://localhost:5000",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    },
+    {
+      "label": "Blog Sample Post",
+      "cookiePath": "backstop_data/engine_scripts/cookies.json",
+      "url": "http://localhost:5000/posts/sample-post",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 0,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    }
+  ],
+  "paths": {
+    "bitmaps_reference": "backstop_data/bitmaps_reference",
+    "bitmaps_test": "backstop_data/bitmaps_test",
+    "engine_scripts": "backstop_data/engine_scripts",
+    "html_report": "backstop_data/html_report",
+    "ci_report": "backstop_data/ci_report"
+  },
+  "report": ["browser"],
+  "engine": "chrome",
+  "engineFlags": [],
+  "asyncCaptureLimit": 5,
+  "asyncCompareLimit": 50,
+  "debug": false,
+  "debugWindow": false
+}

backstop_data/engine_scripts/casper/clickAndHoverHelper.js

@@ -0,0 +1,25 @@
+var WAIT_TIMEOUT = 5000;
+
+module.exports = function(casper, scenario) {
+  var waitFor = require('./waitForHelperHelper')(casper, WAIT_TIMEOUT);
+  var hoverSelector = scenario.hoverSelector,
+      clickSelector = scenario.clickSelector,
+      postInteractionWait = scenario.postInteractionWait;
+
+  if (hoverSelector) {
+    waitFor(hoverSelector);
+    casper.then(function () {
+      casper.mouse.move(hoverSelector);
+    });
+  }
+
+  if (clickSelector) {
+    waitFor(clickSelector);
+    casper.then(function () {
+      casper.click(clickSelector);
+    });
+  }
+
+  // TODO: if postInteractionWait === integer then do ==> wait(postInteractionWait) || elsevvv
+  waitFor(postInteractionWait);
+};

backstop_data/engine_scripts/casper/loadCookies.js

@@ -0,0 +1,15 @@
+var fs = require('fs');
+
+module.exports = function (casper, scenario) {
+  var cookies = [];
+  var cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.exists(cookiePath)) {
+    cookies = JSON.parse(fs.read(cookiePath));
+  }
+
+  casper.page.cookies = cookies;
+  console.log('Cookie state restored with cookies:', JSON.stringify(cookies, null, 2));
+  casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
+};

backstop_data/engine_scripts/casper/onBefore.js

@@ -0,0 +1,4 @@
+module.exports = function (casper, scenario, vp) {
+  require('./loadCookies')(casper, scenario);
+  casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
+};

backstop_data/engine_scripts/casper/onReady.js

@@ -0,0 +1,5 @@
+module.exports = function(casper, scenario, vp) {
+  console.log('SCENARIO> ' + scenario.label);
+  require('./clickAndHoverHelper')(casper, scenario);
+  // add more helpers here...
+};

backstop_data/engine_scripts/casper/waitForHelperHelper.js

@@ -0,0 +1,18 @@
+var TIMEOUT_DEFAULT = 2000;
+
+module.exports = function (casper, timeout) {
+  var TIMEOUT = timeout || TIMEOUT_DEFAULT;
+
+  return function waitFor (selector) {
+    if (selector) {
+      casper.waitForSelector(
+        selector,
+        function () {},
+        function () {
+          console.error('NOT FOUND > ' + selector);
+        },
+        TIMEOUT
+      );
+    }
+  };
+};

backstop_data/engine_scripts/chromy/clickAndHoverHelper.js

@@ -0,0 +1,24 @@
+module.exports = function (chromy, scenario) {
+  var hoverSelector = scenario.hoverSelector;
+  var clickSelector = scenario.clickSelector;
+  var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (hoverSelector) {
+    chromy
+      .wait(hoverSelector)
+      .rect(hoverSelector)
+      .result(function (rect) {
+        chromy.mouseMoved(rect.left, rect.top);
+      });
+  }
+
+  if (clickSelector) {
+    chromy
+      .wait(clickSelector)
+      .click(clickSelector);
+  }
+
+  if (postInteractionWait) {
+    chromy.wait(postInteractionWait);
+  }
+};

backstop_data/engine_scripts/chromy/loadCookies.js

@@ -0,0 +1,22 @@
+var fs = require('fs');
+
+module.exports = function (chromy, scenario) {
+  var cookies = [];
+  var cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.existsSync(cookiePath)) {
+    cookies = JSON.parse(fs.readFileSync(cookiePath));
+  }
+
+  // MUNGE COOKIE DOMAIN FOR CHROMY USAGE
+  cookies = cookies.map(cookie => {
+    cookie.url = 'https://' + cookie.domain;
+    delete cookie.domain;
+    return cookie;
+  });
+
+  // SET COOKIES VIA CHROMY
+  chromy.setCookie(cookies);
+  console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};

backstop_data/engine_scripts/chromy/onBefore.js

@@ -0,0 +1,6 @@
+module.exports = function (chromy, scenario, vp) {
+  require('./loadCookies')(chromy, scenario);
+
+  // IGNORE ANY CERT WARNINGS
+  chromy.ignoreCertificateErrors();
+};

backstop_data/engine_scripts/chromy/onReady.js

@@ -0,0 +1,5 @@
+module.exports = function (chromy, scenario, vp) {
+  console.log('SCENARIO > ' + scenario.label);
+  require('./clickAndHoverHelper')(chromy, scenario);
+  // add more ready handlers here...
+};

backstop_data/engine_scripts/cookies.json

@@ -0,0 +1,14 @@
+[
+  {
+    "domain": ".www.yourdomain.com",
+    "path": "/",
+    "name": "yourCookieName",
+    "value": "yourCookieValue",
+    "expirationDate": 1798790400,
+    "hostOnly": false,
+    "httpOnly": false,
+    "secure": false,
+    "session": false,
+    "sameSite": "no_restriction"
+  }
+]

backstop_data/engine_scripts/onBefore.js

@@ -0,0 +1,4 @@
+module.exports = function (engine, scenario, vp) {
+  // This script runs before your app loads. Edit here to log-in, load cookies or set other states required for your test.
+  console.log('onBefore.js has run for ' + vp.label + '.');
+};

backstop_data/engine_scripts/onReady.js

@@ -0,0 +1,6 @@
+module.exports = function (engine, scenario, vp) {
+  engine.evaluate(function () {
+    // Your web-app is now loaded. Edit here to simulate user interactions or other state changes in the browser window context.
+  });
+  console.log('onReady.js has run for: ', vp.label);
+};

package.json

@@ -5,6 +5,7 @@
     "babel-brunch": "^6.1.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.6.0",
+    "backstopjs": "^3.1.21",
     "browser-sync": "^2.18.13",
     "brunch": "^2.10.10",
     "fingerprinter-brunch": "^0.0.2",
@@ -21,6 +22,7 @@
     "turbolinks": "^5.0.3"
   },
   "scripts": {
+    "test": "backstop test",
     "heroku-postbuild": "bin/compile_assets build --production"
   }
 }

spec/models/post_content_renderer_spec.cr

@@ -1,6 +1,17 @@
 describe PostContentRenderer do
   it "downgrades headings" do
+    renderer = PostContentRenderer.new
     post = build_post(content: "Yo hello\n# Title\n well ...")
-    PostContentRenderer.new.render(post).should contain("\n<h2>")
+    renderer.render(post).should contain("\n<h2>")
+
+    post = build_post(content: "# Title")
+    renderer.render(post).should contain("<h2>")
+  end
+
+  it "does not mess with hashes in text" do
+    renderer = PostContentRenderer.new
+    post = build_post(content: "Just some text containing a # innocent hash")
+
+    renderer.render(post).should contain("Just some text containing a # innocent has")
   end
 end

src/models/post_content_renderer.cr

@@ -32,6 +32,6 @@ class PostContentRenderer
   end
 
   private def downgrade_headings(content : String)
-    content.gsub(/\n#/, "\n##")
+    content.gsub(/(^|\n)#/, "\\0#")
   end
 end

static/css/app.css

@@ -31,10 +31,6 @@ a:hover {
     color: #32325d;
 }
 
-.blog-title {
-    height: 300px;
-}
-
 .blog-title-small {
     background: rgba(36,180,126,.4);
     padding: 10px;
@@ -100,6 +96,7 @@ a:hover {
     > p > img {
         display: block;
         margin: 0 auto;
+        max-width: 100%;
     }
 }
 
@@ -133,23 +130,28 @@ a:hover {
     font-size: 0.8em;
 }
 
-.intro ul {
-    list-style-type: none;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
+.intro {
+    padding: 0 1em;
+
+    ul {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        list-style-type: none;
+        padding: 0;
+    }
 }
 
 .intro li a:link {
-    color: white;
     background: rgba(0,0,0,.2);
+    border-radius: 20px;
+    color: transparent;
     display: inline-block;
+    font-size: 0;
     margin: 5px;
     padding: 6px 14px;
     text-decoration: none;
-    border-radius: 20px;
-    font-size: 0.8em;
 }
 
 .intro li a:hover {
@@ -163,7 +165,6 @@ a:hover {
 .intro li img {
     color: white;
     height: 15px;
-    margin-right: 10px;
     opacity: .2;
 }
 
@@ -218,8 +219,9 @@ a:hover {
 }
 
 .blog-footer a img {
-    width: 15px; height: 15px;
+    height: 15px;
     opacity: 0.6;
+    width: 15px;
 }
 
 .blog-footer section {
@@ -301,3 +303,36 @@ a:hover {
     padding: 10px 15px;
     text-align: center;
 }
+
+@media (min-width: 576px) {
+}
+
+@media (min-width: 768px) {
+    .intro li a:link {
+        color: white;
+        font-size: 0.8em;
+    }
+
+    .intro li img {
+        margin-right: 10px;
+    }
+
+    .posts-container {
+        padding-top: 50px;
+    }
+}
+
+@media (min-width: 992px) {
+    .intro li a:link {
+        color: white;
+        font-size: 0.8em;
+    }
+
+    .intro li img {
+        margin-right: 10px;
+    }
+
+    .posts-container {
+        padding-top: 100px;
+    }
+}