Move to devhints.io

* ../cheatsheets-temp: (27 commits)
  Rename the site from Cheatsheets to Devhints
  Let all the robots in now
  Oops, break apart CSS
  New announcement banner
  Index phoenix cheatsheets
  Improve h1 appearance
  Embiggen h1
  Preload ad height
  More mobile improvements
  More mobile improvements
  Lessen width of codesponsor to improve Mobile compat
  Improve mobile compatibility to please Google
  Move CDN to jsdelivr
  Update content
  Oops
  Update URLs
  Update analytics snip
  Fix sitemap
  Add sitemap
  Remove meta/index.txt
  ...

CNAME

@@ -0,0 +1 @@
+devhints.io

CONTRIBUTING.md

@@ -10,7 +10,7 @@ make
 
 ## CSS classes
 
-See <https://ricostacruz.com/cheatsheets/cheatsheet-styles> for a reference on styling.
+See <https://devhints.io/cheatsheet-styles> for a reference on styling.
 
 ## Frontmatter
 

README.md

@@ -1,13 +1,13 @@
-# Rico's cheatsheets
+# Devhints
 
-> Collection of web development cheatsheets
+> TL;DR for developer documentation - a ridiculous collection of cheatsheets
 
 <br>
 
 <p align='center'>
-<a href='https://ricostacruz.com/cheatsheets/'><img src='_docs/images/screenshot.png' width=600></a>
+<a href='https://devhints.io/'><img src='_docs/images/screenshot.png' width=600></a>
 <br>
-✨ <b><a href='https://ricostacruz.com/cheatsheets'>ricostacruz.com/cheatsheets</a></b> ✨
+✨ <b><a href='https://devhints.io/'>devhints.io</a></b> ✨
 </p>
 
 <br>

_config.yml

@@ -50,8 +50,8 @@ defaults:
 
 # Site info
 
-url: http://ricostacruz.com/cheatsheets
+url: https://devhints.io
-title: Cheatsheets
+title: Devhints
 
 # GitHub metadata
 # https://help.github.com/articles/repository-metadata-on-github-pages/

_data/content.yml

@@ -1,9 +1,10 @@
 home:
   title: "Rico's cheatsheets"
-  tagline: "Hey! I'm <a href='https://ricostacruz.com'>@rstacruz</a> and this is a modest collection of cheatsheets I've written."
+  tagline: |
+    Hey! I'm <a href='https://ricostacruz.com'>@rstacruz</a> and this is a modest collection of cheatsheets I've written.
 
 top_nav:
-  title: Devhints
+  title: Devhints.io
   edit: Edit
   edit_on_github: Edit this page on GitHub
 
@@ -18,7 +19,7 @@ social_list:
 
 related_posts_callout:
   description: Over SIZE curated cheatsheets, by developers for developers.
-  link: Cheatsheets home
+  link: Devhints home
 
 related_posts_group:
   top: Top cheatsheets
@@ -38,3 +39,9 @@ not_found:
   title: Not found
   description: Sorry, we don't have a cheatsheet for this yet. Try searching!
   home: Back to home
+
+announcement:
+  id: 2017-09-25-devhints-io
+  title: New URL 🎉
+  body: |
+    Hey, ricostacruz.com/cheatsheets is moving to devhints.io! Same content with a shorter and easier to remember URL.

_data/google_analytics.yml

@@ -1,3 +1,3 @@
 enabled: true
-hostname: ricostacruz.com
+hostname: devhints.io
-id: "UA-20473929-1"
+id: "UA-106902774-1"

_includes/2017/announcements-list.html

@@ -0,0 +1,10 @@
+{% if site.data.content.announcement %}
+<div class='announcements-list'>
+  <div class='announcements-item item -hide' data-js-dismissable='{"id":"{{ site.data.content.announcement.id }}"}'>
+    <h3 class='title'>{{ site.data.content.announcement.title }}</h3>
+    <div class='body'>{{ site.data.content.announcement.body }}</div>
+    <button data-js-dismiss class='close'></button>
+  </div>
+</div>
+{% endif %}
+

_includes/2017/code-sponsor.html

@@ -4,7 +4,7 @@
     if (window.localStorage && window.localStorage._NOADS) return
     var s=d.createElement('script'),r=d.getElementById(id)
     s.async=true
-    s.src='https://app.codesponsor.io/scripts/{{ site.data.codesponsor.id }}?theme=light&image=hide&height=100&width=330'
+    s.src='https://app.codesponsor.io/scripts/{{ site.data.codesponsor.id }}?theme=light&image=hide&height=100&width=319'
     setTimeout(function(){r.parentNode.insertBefore(s,r)})
   })(document, 'code-sponsor-embed')</script>
 </aside>

_includes/2017/head.html

@@ -6,15 +6,15 @@
 
   <!-- 3rd-party libs -->
   <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
-  <script src='https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js'></script>
+  <script src='https://cdn.jsdelivr.net/npm/isotope-layout@3.0.4/dist/isotope.pkgd.min.js'></script>
-  <script src='https://unpkg.com/prismjs@1.6.0'></script>
+  <script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0'></script>
   {% for lang in page.prism_languages %}
-  <script src='https://unpkg.com/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>{% endfor %}
+  <script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/components/prism-{{lang}}.min.js'></script>{% endfor %}
-  <script src='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.min.js'></script>
+  <script src='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.min.js'></script>
 
   <!-- 3rd-party CSS -->
-  <link rel='stylesheet' href='https://unpkg.com/sanitize.css@5.0.0/sanitize.css'>
+  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sanitize.css@5.0.0/sanitize.css'>
-  <link rel='stylesheet' href='https://unpkg.com/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.css'>
+  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/prismjs@1.6.0/plugins/line-highlight/prism-line-highlight.css'>
 
   {% comment %}
   <!-- No custom fonts -->

_includes/2017/search-form.html

@@ -2,10 +2,8 @@
   {% if include.live %}data-js-search-form{% endif %}
   class='search' action='{{ base }}' method='get'>
   <label class='search-box {{ include.class }}'>
-    {% comment %}
     <span class='prefix'>{{ site.data.content.search_form.prefix }}</span>
     <span class='sep'>/</span>
-    {% endcomment %}
     <input name='q'
       type='text'
       {% if include.live %}

_includes/about-the-site.html

@@ -1,7 +1,7 @@
 <div class="about-the-site">
   <div class="container">
     <p class='blurb'>
-    <strong><a href="{{ base }}">Cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
+    <strong><a href="{{ base }}">{{ site.title }}</a></strong> is a collection of cheatsheets I've written over the years.
       Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues'>Send them in</a>.
       <i class='fleuron'></i>
       I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>. 

_includes/meta.html

@@ -102,7 +102,16 @@
 {% endif %}
 
 {%comment%}<!-- google analytics -->{%endcomment%}
-{% if site.data.google_analytics.enabled %}<script>if(~location.hostname.indexOf("{{site.data.google_analytics.hostname}}")){var _gaq=_gaq||[];_gaq.push(["_setAccount","{{ site.data.google_analytics.id }}"]);_gaq.push(["_trackPageview"]);(function(){var ga=document.createElement("script");ga.async=true;ga.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(ga,s)})()}</script>{% endif %}
+{% if site.data.google_analytics.enabled %}
+<script async src='https://www.googletagmanager.com/gtag/js?id={{ site.data.google_analytics.id }}'></script>
+<script>
+{% comment %} if(~location.hostname.indexOf('{{site.data.google_analytics.hostname}}')){ {% endcomment %}
+window.dataLayer=window.dataLayer||[];
+function gtag(){dataLayer.push(arguments)};
+gtag('js',new Date());
+gtag('config','{{ site.data.google_analytics.id }}');
+</script>
+{% endif %}
 
 <meta content='IE=edge' http-equiv='X-UA-Compatible'>
 <meta content='width=device-width, initial-scale=1.0' name='viewport'>

_layouts/2017/home.html

@@ -71,4 +71,6 @@
   </div>
 </div>
 
+{% include 2017/announcements-list.html %}
+
 {% include 2017/foot.html %}

_layouts/blank.html

@@ -0,0 +1 @@
+{{content}}

_sass/2017/base/base.scss

@@ -59,3 +59,13 @@ a:hover {
 [aria-hidden]:not(.line-highlight) {
   display: none !important;
 }
+
+// No tooltips on mobile
+@media (max-width: 580px) {
+  .hint--bottom {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}

_sass/2017/components/announcements-item.scss

@@ -0,0 +1,60 @@
+.announcements-item {
+  & {
+    position: relative;
+    padding: 16px;
+    box-shadow: $shadow6;
+    border-radius: 1px;
+    background: white;
+    padding-right: 48px;
+    animation: announcements-item-flyin 500ms ease-out;
+    transition: opacity 500ms linear, transform 500ms ease-out;
+  }
+
+  &.-hide {
+    display: none;
+  }
+
+  & > .title {
+    @include font-size(1);
+    font-weight: normal;
+    color: $base-a;
+    margin: 0;
+    padding: 0;
+  }
+
+  & > .close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      color: $base-a;
+    }
+  }
+
+  & > .close::before {
+    content: "\00D7";
+    font-size: 14px;
+  }
+}
+
+@keyframes announcements-item-flyin {
+  0% {
+    transform: translate3d(0, 32px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}

_sass/2017/components/announcements-list.scss

@@ -0,0 +1,17 @@
+.announcements-list {
+  & {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    max-width: 420px;
+    padding: 0;
+  }
+
+  @media (min-width: 481px) {
+    padding: 16px;
+  }
+
+  @media (min-width: 769px) {
+    padding: 32px;
+  }
+}

_sass/2017/components/code-sponsor.scss

@@ -2,6 +2,7 @@
   & {
     text-align: center;
     position: relative;
+    height: 100px;
   }
 
   /* Prelude */

_sass/2017/components/missing-message.scss

@@ -35,4 +35,12 @@
     color: $base-mute;
     flex: 0 0 auto;
   }
+
+  @media (max-width: 480px) {
+    flex-wrap: wrap;
+
+    & > p {
+      margin-top: 16px;
+    }
+  }
 }

_sass/2017/components/page-actions.scss

@@ -99,6 +99,13 @@
     }
   }
 
+  // Space them out in mobile
+  @media (max-width: 768px) {
+    & > .link {
+      margin-left: 16px;
+    }
+  }
+
   // Collapse
   & > .link:first-child > a {
     margin-left: 0;

_sass/2017/components/pages-list.scss

@@ -50,6 +50,12 @@
     opacity: 0;
   }
 
+  @media (max-width: 768px) {
+    & > .info > .title {
+      display: none;
+    }
+  }
+
   &:hover,
   &:focus {
     & {

_sass/2017/components/search-box.scss

@@ -13,10 +13,11 @@
     height: 64px;
     background: transparent;
     border: 0;
-    Flex: 1 0 auto;
+    flex: 1 1 auto;
     padding-left: 0;
     font-weight: bold;
     color: $base-head;
+    min-width: 48px;
 
     &::placeholder {
       font-weight: normal;
@@ -28,20 +29,39 @@
     outline: 0;
   }
 
-  & > .prefix,
+  & > .prefix {
-  & > .sep {
+    @include font-size(0);
-    @include font-size(2);
     display: block;
-    color: $base-mute;
+    color: rgba($base-mute, 0.5);
     font-weight: 400;
-    opacity: 0.5;
     user-select: none;
+    line-height: 1.5em;
+    padding: 2px 8px;
+    border-radius: 3px;
+    background: rgba($base-body, 0.5);
+    margin: 0 0 0 16px;
+    box-shadow: 0 1px 1px rgba($base-mute, 0.25);
   }
 
   & > .sep {
+    color: rgba($base-mute, 0.5);
+    @include font-size(2);
     margin: 0 8px;
   }
 
+  // Hide prefix in mobiel
+  @media (max-width: 768px) {
+    & > .prefix,
+    & > .sep {
+      display: none;
+    }
+
+    & > input {
+      padding-left: 16px;
+    }
+  }
+
+  // Icon
   &::before {
     @include ion-icon('md-search');
     font-size: 32px;
@@ -50,6 +70,7 @@
     width: 64px;
     line-height: 64px;
     text-align: center;
+    order: 2;
   }
 }
 

_sass/2017/components/site-header.scss

@@ -13,12 +13,14 @@
   }
 
   & > h1 {
-    @include font-size(7);
+    @include font-size(8);
+    line-height: 1.2;
     margin: 0;
     padding: 0;
     color: $base-head;
     font-weight: 300;
     text-align: center;
+    margin-bottom: 16px;
   }
 
   & > .search {
@@ -33,4 +35,11 @@
     margin-top: 32px;
     margin-bottom: -16px;
   }
+
+  @media (max-width: 480px) {
+    & > .adbox {
+      margin-left: -16px;
+      margin-right: -16px;
+    }
+  }
 }

_sass/2017/components/top-nav.scss

@@ -97,8 +97,10 @@
   }
 
   // Offset so it doesn't look misasligned
-  & > .left > .home {
+  @media (min-width: $area-width) {
-    position: relative;
+    & > .left > .home {
-    left: -16px;
+      position: relative;
+      left: -16px;
+    }
   }
 }

_sass/2017/style.scss

@@ -19,6 +19,8 @@
 @import './markdown/table';
 @import './markdown/ul';
 @import './components/attribute-peg';
+@import './components/announcements-item';
+@import './components/announcements-list';
 @import './components/back-button';
 @import './components/body-area';
 @import './components/code-sponsor';

assets/2017/script.js

@@ -115,6 +115,71 @@ $(function () {
   })
 })
 
+/*
+ * Behavior: dismiss button
+ */
+
+$(function () {
+  $('[data-js-dismiss]').each(function () {
+    var $button = $(this)
+    var $parent = $button.closest('[data-js-dismissable]')
+    var id = $parent.data('js-dismissable').id || ''
+
+    $button.on('click', function (e) {
+      Dismiss.setDismissed(id)
+      e.preventDefault()
+      $parent.remove()
+    })
+  })
+
+  $('[data-js-dismissable]').each(function () {
+    var $this = $(this)
+    var id = $this.data('js-dismissable').id || ''
+    const isDismissed = Dismiss.isDismissed(id)
+    if (isDismissed || window.location.search.indexOf('preview') !== -1) {
+      $this.remove()
+    } else {
+      $this.removeClass('-hide')
+    }
+  })
+})
+
+/*
+ * Helper: dismissed
+ */
+
+const Dismiss = {
+  setDismissed: function (id) {
+    Store.update('dismissed', function (data) {
+      data[id] = true
+      return data
+    })
+  },
+
+  isDismissed: function (id) {
+    const data = Store.fetch('dismissed')
+    return data && data[id]
+  }
+}
+
+/*
+ * Simple LocalStorage shim
+ */
+
+const Store = {
+  update: function (key, fn) {
+    if (!window.localStorage) return
+    let data = JSON.parse(window.localStorage[key] || '{}')
+    data = fn(data)
+    window.localStorage[key] = JSON.stringify(data)
+  },
+
+  fetch: function (key) {
+    if (!window.localStorage) return
+    return JSON.parse(window.localStorage[key] || '{}')
+  }
+}
+
 /*
  * Helper: injects disqus
  */

index.md

@@ -1,6 +1,6 @@
 ---
-full_title: "Cheatsheets — for web development and more"
+full_title: "Devhints — for web development and more"
-description: "A collection of cheatsheets I've written."
+description: "TL;DR for developer documentation - a ridiculous collection of cheatsheets"
 layout: 2017/home
 og_type: website
 type: home

index@2016.md

@@ -1,6 +1,6 @@
 ---
-full_title: "Cheatsheets — for web development and more"
+full_title: "Devhints — for web development and more"
-description: "A collection of cheatsheets I've written."
+description: "TL;DR for developer documentation - a ridiculous collection of cheatsheets"
 layout: home
 type: home
 og_type: website

meta/index.txt

@@ -1,6 +0,0 @@
----
-type: other
-layout: false
----
-{% for page in site.pages %}{% if page.type == 'article' %}{{ page.url | remove: '.html' }}
-{% endif %}{% endfor %}

robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

sitemap.xml

@@ -0,0 +1,9 @@
+---
+layout: blank
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<url><loc>{{ site.url }}/</loc></url>
+{% for page in site.pages %}{% if page.type == 'article' %}<url><loc>{{ site.url }}{{ page.url | remove: '.html' }}</loc></url>
+{% endif %}{% endfor %}
+</urlset>