jdan / cleaver

30-second slideshows for hackers
http://jdan.github.io/cleaver
MIT License
4.03k stars 305 forks source link

Not loading theme from repo #84

Closed novohispano closed 10 years ago

novohispano commented 10 years ago

I had been using Cleaver for a month or so, and when I wanted to load a theme from a repo, I could do it. Today, when I was trying to regenerate some slides, they switched back to the default theme.

This is my theme,

https://github.com/JumpstartLab/cleaver-theme

This is my metadata,

title: Why Heroku
output: why_heroku.html
controls: true
theme: JumpstartLab/cleaver-theme

This is the output,

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Why Heroku</title>
  <style type="text/css">
    body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #222;
  background-color: #f7f7f7;
  font-size: 100%;
}

.slide {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
}

.slide-content {
  width: 800px;
  height: 600px;
  overflow: hidden;
  margin: 80px auto 0 auto;
  padding: 30px;

  font-weight: 200;
  font-size: 200%;
  line-height: 1.375;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.arrow {
  width: 0; height: 0;
  border: 30px solid #333;
  float: left;
  margin-right: 30px;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.prev {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;

  border-left-width: 0;
  border-right-width: 50px;
}

.next {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;

  border-left-width: 50px;
  border-right-width: 0;
}

.prev:hover {
  border-right-color: #888;
  cursor: pointer;
}

.next:hover {
  border-left-color: #888;
  cursor: pointer;
}

h1 {
  font-size: 300%;
  line-height: 1.2;
  text-align: center;
  margin: 170px 0 0;
}

h2 {
  font-size: 100%;
  line-height: 1.2;
  margin: 5px 0;
  text-align: center;
  font-weight: 200;
}

h3 {
  font-size: 140%;
  line-height: 1.2;
  border-bottom: 1px solid #aaa;
  margin: 0;
  padding-bottom: 15px;
}

ul {
  padding: 20px 0 0 60px;
  font-weight: 200;
  line-height: 1.375;
}

.author h1 {
  font-size: 170%;
  font-weight: 200;
  text-align: center;
  margin-bottom: 30px;
}

.author h3 {
  font-weight: 100;
  text-align: center;
  font-size: 95%;
  border: none;
}

a {
  text-decoration: none;
  color: #44a4dd;
}

a:hover {
  color: #66b5ff;
}

pre {
  font-size: 60%;
  line-height: 1.3;
}

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.progress-bar {
  width: 0%;
  height: 3px;
  background-color: #b4b4b4;

  -webkit-transition: width 0.05s ease-out;
  -moz-transition: width 0.05s ease-out;
  -o-transition: width 0.05s ease-out;
  transition: width 0.05s ease-out;
}

.hidden {
  display: none;
}

@media (max-width: 850px) {

  body {
    font-size: 70%;
  }

  .slide-content {
    width: auto;
  }

  img {
    width: 100%;
  }

  h1 {
    margin-top: 120px;
  }

  .prev, .prev:hover {
    border-right-color: rgba(135, 135, 135, 0.5);
  }

  .next, .next:hover {
    border-left-color: rgba(135, 135, 135, 0.5);
  }
}

@media (max-width: 480px) {
  body {
    font-size: 50%;
    overflow: hidden;
  }

  .slide-content {
    padding: 10px;
    margin-top: 10px;
    height: 340px;
  }

  h1 {
    margin-top: 50px;
  }

  ul {
    padding-left: 25px;
  }
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
  }

  @page {
    size: letter;
  }

  .hidden {
    display: inline;
  }

  html {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  body {
    margin: 0 auto !important;
    border: 0;
    padding: 0;
    float: none !important;
    overflow: visible;
    background: none !important;
    font-size: 52%;
  }

  .progress, .controls {
    display: none;
  }

  .slide {
    position: static;
  }

  .slide-content {
    border: 1px solid #222;
    margin-top: 0;
    margin-bottom: 40px;
    height: 3.5in;
    overflow: visible;
  }

  .slide:nth-child(even) {
    /* 2 slides per page */
    page-break-before: always;
  }
}

/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/

code, pre {
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: auto;
  padding: 6px 10px;
}

code {
  padding: 0 5px;
}

pre>code {
  margin: 0; padding: 0;
  border: none;
  background: transparent;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
  color: #998;
  font-style: italic
}

pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
  color: #333;
  font-weight: bold
}

pre .number,
pre .hexcolor,
pre .ruby .constant {
  color: #099;
}

pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
  color: #d14
}

pre .title,
pre .id {
  color: #900;
  font-weight: bold
}

pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
  font-weight: normal
}

pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
  color: #458;
  font-weight: bold
}

pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
  color: #000080;
  font-weight: normal
}

pre .attribute,
pre .variable,
pre .lisp .body {
  color: #008080
}

pre .regexp {
  color: #009926
}

pre .class {
  color: #458;
  font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
  color: #990073
}

pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
  color: #0086b3
}

pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
  color: #999;
  font-weight: bold
}

pre .deletion {
  background: #fdd
}

pre .addition {
  background: #dfd
}

pre .diff .change {
  background: #0086b3
}

pre .chunk {
  color: #aaa
}

  </style>
</head>
<body>
    <div class="progress">
    <div class="progress-bar"></div>
  </div>

  <div class="slide" id="slide-1">
    <section class="slide-content"><h1 id="why-heroku">Why Heroku</h1>
<p>Heroku claims to be &quot;cloud computing designed and built for developers.&quot; But why do you care?</p>
</section>
  </div>
  <div class="slide hidden" id="slide-2">
    <section class="slide-content"><h2 id="focused-on-ease-of-development">Focused on Ease of Development</h2>
<p>From the beginning Heroku has focused on being easy for developers.</p>
</section>
  </div>
  <div class="slide hidden" id="slide-3">
    <section class="slide-content"><h3 id="just-use-a-vps-">Just Use a VPS?</h3>
<p>Many developers can stumble through setting up a VPS, following a myriad of tutorials and blog posts to setup a functioning web server with:</p>
<ul>
<li>Linux</li>
<li>NGINX or Apache front-end web server</li>
<li>Their application</li>
<li>Application Virtual Machine (JVM, Ruby VM, etc)</li>
<li>Application dependencies</li>
<li>PostgreSQL with user accounts and permissions</li>
<li>Memcached or other secondary data stores</li>
<li>Load balancing</li>
<li>Init.d scripts to handle graceful restart</li>
<li>A deployment system to receive code and restart the application</li>
</ul>
<p>It&#39;ll likely take days to get that configured correctly.</p>
</section>
  </div>
  <div class="slide hidden" id="slide-4">
    <section class="slide-content"><h3 id="fully-managed-platform">Fully Managed Platform</h3>
<p>And now you have a management issue. Each of those components:</p>
<ul>
<li>Has potential security vulnerabilities to keep on top of</li>
<li>Releases new versions and should be upgraded</li>
<li>Can crash/restart and need attention</li>
</ul>
<p>If you&#39;d prefer to spend your time building your application rather than administrating a server, Heroku is for you.</p>
</section>
  </div>
  <div class="slide hidden" id="slide-5">
    <section class="slide-content"><h3 id="quick-to-provision-quick-to-deploy">Quick to Provision, Quick to Deploy</h3>
<p>You can provision a new application on Heroku in seconds. Deploying your code and restarting your processes typically takes just a few minutes.</p>
</section>
  </div>
  <div class="slide hidden" id="slide-6">
    <section class="slide-content"><h3 id="industry-standards">Industry Standards</h3>
<p>And best of all, using Heroku doesn&#39;t mean compromising on your development tools or workflow. Typical Heroku apps rely industry-standard tools:</p>
<ul>
<li>Git for source control</li>
<li>Applications written in a modern, open-source language</li>
<li>A SQL database</li>
<li>UNIX under the hood</li>
</ul>
</section>
  </div>
  <div class="slide hidden" id="slide-7">
    <section class="slide-content"><h3 id="rich-configurability-with-add-ons">Rich Configurability with Add-Ons</h3>
<p>Just because the platform takes care of the administration doesn’t mean you’re locked into a single pattern or set of defaults. In fact, apps that you run on Heroku can just as easily run locally or somewhere else - you need almost no Heroku-specific changes to apps. You can customize your application to:</p>
<ul>
<li>use other databases like MongoDB or Hadoop</li>
<li>integrate with services to send Email, SMS and push notifications to users</li>
<li>shuttle runtime data to a variety of analytics and logging platforms</li>
<li>work with third-party billing systems to handle one-time and subscription payments</li>
</ul>
<p>There are over a hundred add-ons available on the platform with new ones constantly being added. Check out the full list at <a href="https://addons.heroku.com/">https://addons.heroku.com/</a>.</p>
</section>
  </div>
  <div class="slide hidden" id="slide-8">
    <section class="slide-content"><h2 id="use-cases">Use Cases</h2>
<p>Heroku can be put to use in many scenarios.</p>
</section>
  </div>
  <div class="slide hidden" id="slide-9">
    <section class="slide-content"><h3 id="web-applications-of-any-scale">Web Applications of Any Scale</h3>
<p>Thanks to the <strong>dyno</strong> approach, applications running on Heroku scale with ease.</p>
<p>Need to serve just a few requests an hour? Spin up a pair of dynos and you&#39;re good to go.</p>
<p>Need to serve a hundred requests per second? Scale up to fifty dynos and watch the traffic fly.</p>
</section>
  </div>
  <div class="slide hidden" id="slide-10">
    <section class="slide-content"><h3 id="rapid-development-deployment">Rapid Development &amp; Deployment</h3>
<p>Heroku excels in situations where applications need to deploy quickly and often. Teams might individually deploy their latest changes or rely on a Continuous Integration server to deploy continuously. After issuing just a single command, applications typically deploy and are live in seconds. Backed by git, it&#39;s easy to avoid conflicts or rollback changes when something goes wrong.</p>
<p>Long story short, Heroku takes the pain out of running your web applications.</p>
</section>
  </div>
  <div class="slide hidden" id="slide-11">
    <section class="slide-content"><h3 id="getting-started">Getting Started</h3>
<p>Assuming you have an existing Salesforce dataset, your first Heroku applications might include:</p>
<ul>
<li>A one-page application to register people in a sweepstakes, funneling their information into Salesforce</li>
<li>An analytics platform that pulls data out of Salesforce to generate visualizations using Node.js and D3</li>
<li>A content-management system that authenticates users via your Salesforce login/password</li>
<li>A web application that implements Salesforce&#39;s Canvas API, adding functionality into Salesforce itself</li>
</ul>
</section>
  </div>
  <div class="slide hidden" id="slide-12">
    <section class="slide-content"><h2 id="goals-for-today">Goals for Today</h2>
<p>Our plan for today is to explore the platform and experiment with deployment. By the end of the day you will:</p>
<ul>
<li>understand how the platform works and what it can do for you</li>
<li>provision and deploy a live Java-based application</li>
<li>scale the production environment to handle more traffic</li>
<li>install and configure an add-on to support your application</li>
<li>see how Heroku Connect opens huge potential for your Salesforce data</li>
</ul>
</section>
  </div>

  <div class="controls">
    <div class="arrow prev"></div>
    <div class="arrow next"></div>
  </div>

  <script type="text/javascript">
    /**
 * Returns the current page number of the presentation.
 */
function currentPosition() {
  return parseInt(document.querySelector('.slide:not(.hidden)').id.slice(6));
}

/**
 * Navigates forward n pages
 * If n is negative, we will navigate in reverse
 */
function navigate(n) {
  var position = currentPosition();
  var numSlides = document.getElementsByClassName('slide').length;

  /* Positions are 1-indexed, so we need to add and subtract 1 */
  var nextPosition = (position - 1 + n) % numSlides + 1;

  /* Normalize nextPosition in-case of a negative modulo result */
  nextPosition = (nextPosition - 1 + numSlides) % numSlides + 1;

  document.getElementById('slide-' + position).classList.add('hidden');
  document.getElementById('slide-' + nextPosition).classList.remove('hidden');

  updateProgress();
  updateURL();
  updateTabIndex();
}

/**
 * Updates the current URL to include a hashtag of the current page number.
 */
function updateURL() {
  window.history.replaceState({} , null, '#' + currentPosition());
}

/**
 * Sets the progress indicator.
 */
function updateProgress() {
  var progressBar = document.querySelector('.progress-bar');

  if (progressBar !== null) {
    var numSlides = document.getElementsByClassName('slide').length;
    var position = currentPosition() - 1;
    var percent = (numSlides === 1) ? 100 : 100 * position / (numSlides - 1);
    progressBar.style.width = percent.toString() + '%';
  }
}

/**
 * Removes tabindex property from all links on the current slide, sets
 * tabindex = -1 for all links on other slides. Prevents slides from appearing
 * out of control.
 */
function updateTabIndex() {
  var allLinks = document.querySelectorAll('.slide a');
  var position = currentPosition();
  var currentPageLinks = document.getElementById('slide-' + position).querySelectorAll('a');
  var i;

  for (i = 0; i < allLinks.length; i++) {
    allLinks[i].setAttribute('tabindex', -1);
  }

  for (i = 0; i < currentPageLinks.length; i++) {
    currentPageLinks[i].removeAttribute('tabindex');
  }
}

/**
 * Determines whether or not we are currently in full screen mode
 */
function isFullScreen() {
  return document.fullscreenElement ||
         document.mozFullScreenElement ||
         document.webkitFullscreenElement ||
         document.msFullscreenElement;
}

/**
 * Toggle fullScreen mode on document element.
 * Works on chrome (>= 15), firefox (>= 9), ie (>= 11), opera(>= 12.1), safari (>= 5).
 */
function toggleFullScreen() {
  /* Convenient renames */
  var docElem = document.documentElement;
  var doc = document;

  docElem.requestFullscreen =
      docElem.requestFullscreen ||
      docElem.msRequestFullscreen ||
      docElem.mozRequestFullScreen ||
      docElem.webkitRequestFullscreen.bind(docElem, Element.ALLOW_KEYBOARD_INPUT);

  doc.exitFullscreen =
      doc.exitFullscreen ||
      doc.msExitFullscreen ||
      doc.mozCancelFullScreen ||
      doc.webkitExitFullscreen;

  isFullScreen() ? doc.exitFullscreen() : docElem.requestFullscreen();
}

document.addEventListener('DOMContentLoaded', function () {
  // Update the tabindex to prevent weird slide transitioning
  updateTabIndex();

  // If the location hash specifies a page number, go to it.
  var page = window.location.hash.slice(1);
  if (page) {
    navigate(parseInt(page) - 1);
  }

  document.onkeydown = function (e) {
    var kc = e.keyCode;

    // left, down, H, J, backspace, PgUp - BACK
    // up, right, K, L, space, PgDn - FORWARD
    // enter - FULLSCREEN
    if (kc === 37 || kc === 40 || kc === 8 || kc === 72 || kc === 74 || kc === 33) {
      navigate(-1);
    } else if (kc === 38 || kc === 39 || kc === 32 || kc === 75 || kc === 76 || kc === 34) {
      navigate(1);
    } else if (kc === 13) {
      toggleFullScreen();
    }
  };

  if (document.querySelector('.next') && document.querySelector('.prev')) {
    document.querySelector('.next').onclick = function (e) {
      e.preventDefault();
      navigate(1);
    };

    document.querySelector('.prev').onclick = function (e) {
      e.preventDefault();
      navigate(-1);
    };
  }
});

  </script>
</body>
</html>
jdan commented 10 years ago

Hm, interesting.

I noticed loadSingle was returning lots of 301s, and it turns out github no longer uses raw.github, but instead uses the domain raw.githubusercontent.com.

I went ahead and updated helper.js to use this new URL, and pushed out a new version (0.6.3). You can update your local copy with:

npm update -g cleaver

Thanks for reporting! I really need to work on a --debug option.

novohispano commented 10 years ago

Thanks! You rock :)

jdan commented 10 years ago

I went ahead and spiced up debugging for cleaver - it's been in a sad (nonexistant) state for far too long. Thanks for the little kick.

This is what you'll see in v 0.6.4 (you can update now, it's live)

screen shot 2014-04-26 at 12 34 44 am

novohispano commented 10 years ago

Thanks, man! That is pretty cool. :)