middleman-webcomic 0.5.0

data/lib/middleman-webcomic/template/config.tt

@@ -0,0 +1,71 @@
+require 'slim'
+require 'coffee-script'
+require 'json'
+require 'builder'
+require 'active_support/all'
+
+# activate :automatic_image_sizes
+activate :directory_indexes
+
+activate :webcomic
+
+set :webcomic_domain, "http://my-site.com"
+set :webcomic_source, "comics/notes"
+set :webcomic_source_images, "comics/images"
+set :webcomic_images, "media/comics"
+set :webcomic_enable_stories, false
+set :webcomic_slug_field, :position
+set :webcomic_include_comic_in_feed, true
+set :webcomic_sort_by, :slug # or slug? and metadata
+
+Slim::Engine.set_default_options :pretty => true
+
+set :markdown, :layout_engine => :slim
+set :erb, :layout_engine => :slim
+
+# Page command
+page "/feed.xml", :layout => false
+
+# Helpers
+# Methods defined in the helpers block are available in templates
+# helpers do
+#   # Your helpers here
+# end
+
+
+
+# Change the CSS directory
+set :css_dir, "theme/styles"
+
+# Change the JS directory
+set :js_dir, "theme/scripts"
+
+# Change the images directory
+set :images_dir, "media"
+
+
+# Build-specific configuration
+configure :build do
+  
+  data_content 'build', true
+  
+  # For example, change the Compass output style for deployment
+  activate :minify_css
+  
+  # Minify Javascript on build
+  activate :minify_javascript
+  
+  # Enable cache buster
+  activate :cache_buster
+  
+  # Use relative URLs
+  # activate :relative_assets
+  
+  # Compress PNGs after build
+  # First: gem install middleman-smusher
+  # require "middleman-smusher"
+  # activate :smusher
+  
+  # Or use a different image path
+  # set :http_path, "/Content/images/"
+end

data/lib/middleman-webcomic/template/source/about.html.slim

@@ -0,0 +1,11 @@
+div.row.sidebars
+
+  div.col.span-8
+    markdown:
+      # About
+
+      Stuff about my site and characters here!
+
+
+  div.col.span-4.sidebar
+    == partial 'theme/sidebar'

data/lib/middleman-webcomic/template/source/comics/index.html.slim

@@ -0,0 +1,14 @@
+div.row.sidebars
+
+  div.col.span-8
+    div.box.archive
+      h1 Comic Archive
+
+      ol.comic-list
+        - data.webcomic.strips.reverse.each_with_index do |comic,i|
+          li value=comic.position
+            a href=comic_path_for(comic) = comic.title
+
+
+  div.col.span-4.sidebar
+    == partial 'theme/sidebar'

data/lib/middleman-webcomic/template/source/comics/template.html.slim

@@ -0,0 +1 @@
+== partial "theme/layout_wide"

data/lib/middleman-webcomic/template/source/feed.xml.builder

@@ -0,0 +1,30 @@
+xml.instruct!
+xml.feed "xmlns" => "http://www.w3.org/2005/Atom" do
+  xml.title "Comic Name"
+  xml.subtitle "Comic subtitle"
+  xml.id settings.webcomic_domain
+  xml.link "href" => settings.webcomic_domain
+  xml.link "href" => "#{settings.webcomic_domain}/feed.xml", "rel" => "self"
+  xml.updated webcomic_feed_data.first.pub_date.to_time.iso8601
+  xml.author { xml.name "Blog Author" }
+
+  webcomic_feed_data.each do |webcomic|
+    xml.entry do
+      
+      url= "#{settings.webcomic_domain}#{comic_path_url webcomic}"
+      content= if settings.webcomic_include_comic_in_feed
+        %Q|<p><img src="#{comic_image_url webcomic}" alt="#{webcomic.title}"/>\n</p>\n#{ webcomic.content}|
+      else
+        webcomic.content
+      end
+      
+      xml.title webcomic.title
+      xml.link "rel" => "alternate", "href" => url
+      xml.id url
+      xml.published webcomic.pub_date.to_time.iso8601
+      xml.updated webcomic.pub_date.to_time.iso8601
+      xml.author { xml.name "Article Author" }
+      xml.content feed_absolute_paths(content), "type" => "html"
+    end
+  end
+end

data/lib/middleman-webcomic/template/source/index.html.slim

@@ -0,0 +1 @@
+== partial "theme/layout_wide"

data/lib/middleman-webcomic/template/source/layout.slim

@@ -0,0 +1,63 @@
+doctype html
+html
+  head
+    meta charset="utf-8"
+    /! Always force latest IE rendering engine & Chrome Frame
+    meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"
+    title MY SITE by AUTHOR
+    link rel="shortcut icon" type="image/png" href="/theme/images/favicon.png"
+    link rel="icon" type="image/png" href="/theme/images/favicon.png"
+    meta name="Author" content="AUTHOR"
+    meta name="Keywords" content="Webcomic"
+    meta name="Description" content="SITE DESCRIPTION"
+    / You might want to look into Feedburner: http://feedburner.google.com
+    link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml"
+    == stylesheet_link_tag "screen.css"
+    == javascript_include_tag "app.js"
+    == yield_content :head
+
+  body class="#{{page_classes}} #{{data.page.slug}} #{{data.page.style}}"
+    section#header role="header"
+      div.row
+        div.col.span-12
+          header
+            a#site_logo href="/"
+              h1 My Site
+    
+    section#navigation role="navigation"
+      div.row
+        div.col.span-10
+          navigation
+            ul
+              li.about
+                a href="/about" About
+              li.archive
+                a href="/comics" Archive
+            div.clear
+        div.col.span-2
+          div.comic-pager
+            - if prev_comic
+              a href="#{{ prev_comic_path }}" title="Previous" «
+            - else
+               span «
+            - if next_comic
+              a href="#{{ next_comic_path }}" title="Next" »
+            - else
+              span »
+          div.comic-latest
+            a href="/" Latest Comic
+
+    div.row
+      div.col.span-12
+        == yield
+
+    section#footer role="footer"
+      div.row
+        div.col.span-8
+          footer
+            markdown:
+              © [Me](http://www.my-site.com), all rights reserved. This site is built with [Middleman](http://middlemanapp.com/) and [Webcomic](https://github.com/darthapo/middleman-webcomic).
+    
+
+  javascript:
+    App.init();

data/lib/middleman-webcomic/template/source/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+

data/lib/middleman-webcomic/template/source/theme/_comic.slim

@@ -0,0 +1,4 @@
+div.col.span-12
+  div.comic
+    div.image
+      == image_tag comic_image_url(current_comic)

data/lib/middleman-webcomic/template/source/theme/_layout_tall.slim

@@ -0,0 +1,17 @@
+
+section#main role="main"
+
+  div.row
+    div.col.span-8
+      div.comic
+        == partial "theme/comic"
+        div.clear
+
+    div.col.span-4
+      == partial 'theme/sidebar'
+
+  div.row
+    div.col.span-8
+      div.main-content
+        == current_comic.content
+        div.clear

data/lib/middleman-webcomic/template/source/theme/_layout_wide.slim

@@ -0,0 +1,16 @@
+
+section#main role="main"
+
+  div.row
+    div.col.span-12
+      div.comic
+        == partial "theme/comic"
+        div.clear
+
+  div.row
+    div.col.span-8
+      div.main-content
+        == current_comic.content
+        div.clear
+    div.col.span-4
+      == partial 'theme/sidebar'

data/lib/middleman-webcomic/template/source/theme/_sidebar.slim

@@ -0,0 +1,13 @@
+div.row.sidebars
+
+  div.col.span-2.sidebar
+    markdown:
+      Narrow Sidebar?
+
+
+
+  div.col.span-3.sidebar
+    markdown:
+      Links, ads, whatever.
+      
+      It can all go here.

data/lib/middleman-webcomic/template/source/theme/scripts/app.js.coffee

@@ -0,0 +1,4 @@
+
+this.App = 
+  init: ->
+    # Do stuff!

data/lib/middleman-webcomic/template/source/theme/styles/_utils.scss

@@ -0,0 +1,399 @@
+// Layout Tools v 1.2
+
+// Sample Usage:
+// #container {
+//   @include border-radius(5px);
+// }
+
+// GRID
+
+// = The 1Kb Grid = (slightly modified)
+@mixin grid($columns:12, $column_width:60, $column_margin:20) {
+  .row { // Did include: section
+    overflow: hidden;
+    margin: 0 auto;
+    width: #{$columns * $column_width + $columns * $column_margin}px;
+  
+    .row {
+      margin: 0 #{$column_margin - $column_margin * 1.5}px;
+      display: inline-block;
+      width: auto; 
+    }
+  
+    .col {
+      margin: 0 #{$column_margin / 2}px;
+      overflow: hidden;
+      float: left;
+      display: inline;
+      width: #{$column_width * 1 + $column_margin * (1 - 1)}px;
+
+      @for $i from 2 through $columns {
+        &.span-#{$i} {
+          width: #{$column_width * $i + $column_margin * ($i - 1)}px;
+          //&:hover
+          //  outline: 1px solid red
+        }
+      }
+    }
+  }
+}
+
+// CSS RESET
+
+@mixin css-clear($boxmodel:'border-box') {
+  * {
+    @include box-model($boxmodel); 
+  }
+  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
+    margin:0;
+    padding:0;
+  }
+  article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { 
+    display: block;
+  }
+  table {
+    border-collapse:collapse;
+    border-spacing:0;
+  }
+  fieldset,img { 
+    border:0;
+  }
+  address,caption,cite,code,dfn,em,strong,th,var {
+    font-style:normal;
+    font-weight:normal;
+  }
+  ol,ul {
+    list-style:none;
+  }
+  caption,th {
+    text-align:left;
+  }
+  h1,h2,h3,h4,h5,h6 {
+    font-size:100%;
+    font-weight:normal;
+  }
+  q:before,q:after {
+    content:'';
+  }
+  abbr,acronym { 
+    border:0;
+  }
+}
+
+@mixin css-reset($size:14px, $boxmodel:'border-box') {
+  @include css-clear($boxmodel);
+  body {
+    font-size: $size;
+    line-height: 1.3em;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+  h1 {
+    font-size: 175%;
+  }
+  h2 {
+    font-size: 155%;
+  }
+  h3 {
+    font-size: 135%;
+  }
+  h4 {
+    font-size: 120%;
+  }
+  h5 {
+    font-size: 105%;
+  }
+  h6 {
+    font-size: 100%;
+  }
+  p, blockquote, h1, h2, h3, h4, h5, h6, pre, ol, ul {
+    padding: 0.5em 0;
+  }
+  b, strong {
+    font-weight: bold;
+  }
+  i, em {
+    font-style: italic;
+  }
+  ul, ol {
+    padding-left: 2em;
+  }
+  ul {
+    list-style: circle;
+  }
+  ol {
+    list-style: decimal;
+  }
+  blockquote {
+    padding-left: 4em;
+  }
+}
+
+@mixin debug-hover($color:'red') {
+  &:hover {
+    outline: 1px solid $color;
+  }
+}
+
+
+// Vertical Background Gradient
+@mixin vbg-gradient($fc: #FFF, $tc: #FFF) {
+  background: $fc;
+  background: -webkit-gradient(linear, left top, left bottom, from($fc), to($tc));
+  background: -moz-linear-gradient(top, $fc, $tc);
+}
+
+// Vertical Background Gradient, 3 color
+@mixin vbg-gradient3($fc: #FFF, $mc: #FFF, $tc: #FFF) {
+  background: $fc;
+  background: -webkit-gradient(linear, left top, left bottom, from($fc), color-stop(0.5, $mc), to($tc));
+  background: -moz-linear-gradient(top, $fc, $mc, $tc);
+}
+
+// Horizontal Background Gradient
+@mixin hbg-gradient($fc: #FFF, $tc: #FFF) {
+  background: $fc;
+  background: -webkit-gradient(linear, left top, right top, from($fc), to($tc));
+  background: -moz-linear-gradient(left, $fc, $tc);
+}
+
+
+// Box Model
+@mixin box-model($type:'border-box') {
+  box-sizing: $type;
+  -moz-box-sizing: $type;
+  -ms-box-sizing: $type;
+  -webkit-box-sizing: $type;
+}
+
+@mixin hbox ($boxAlign:stretch, $boxPack:left) {
+  @include display-box();
+  @include box-orient(horizontal);
+  @include box-align($boxAlign);
+  @include box-pack($boxPack);
+}
+
+@mixin vbox ($boxAlign:stretch, $boxPack:left) {
+  @include display-box();
+  @include box-orient(vertical);
+  @include box-align($boxAlign);
+  @include box-pack($boxPack);
+}
+
+@mixin display-box () {
+  display: box;
+  display: -webkit-box;
+  display: -moz-box;
+}
+
+
+@mixin box-flex ($s: 0) {
+  box-flex: $s;
+  -webkit-box-flex: $s;
+  -moz-box-flex: $s;
+}
+
+
+@mixin box-orient($dir:horizontal) {
+  box-orient: $dir;
+  -webkit-box-orient: $dir;
+  -moz-box-orient: $dir;
+}
+
+@mixin box-pack($dir:left) {
+  box-pack: $dir;
+  -webkit-box-pack: $dir;
+  -moz-box-pack: $dir;
+}
+
+@mixin box-align($dir:stretch) {
+  box-align: $dir;
+  -webkit-box-align: $dir;
+  -moz-box-align: $dir;
+}
+
+@mixin box-lines($rows:single) {
+  box-lines: $rows;
+  -webkit-box-lines: $rows;
+  -moz-box-lines: $rows;
+}
+
+
+// SHADOWS
+
+// TEXT shadow
+@mixin text-shadow($props) {
+  text-shadow: $props;
+  -moz-text-shadow: $props;
+  -webkit-text-shadow: $props; }
+
+// BOX shadow
+@mixin box-shadow($props) {
+  box-shadow: $props;
+  -moz-box-shadow: $props;
+  -webkit-box-shadow: $props; }
+
+@mixin inset-box-shadow ($h: 0px, $v: 0px, $b: 4px, $c: #333) {
+  box-shadow: inset $h $v $b $c;
+  -moz-box-shadow: inset $h $v $b $c;
+  -webkit-box-shadow: inset $h $v $b $c;
+}
+
+@mixin border-as-shadow($tlc:#000, $brc:#FFF, $width:1px, $style:solid) {
+  border: {
+    top: $width $style $tlc;
+    left: $width $style $tlc;
+    right: $width $style $brc;
+    bottom: $width $style $brc;
+  }; 
+}
+
+
+// BORDER RADIUS
+
+// All corners
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius; }
+
+// Top Right
+@mixin border-radius-top-right($radius) {
+  @include border-radius-top-right($radius); }
+
+// Bottom Right
+@mixin border-radius-bottom-right($radius) {
+  @include border-radius-bottom-right($radius); }
+
+// Bottom Left
+@mixin border-radius-bottom-left($radius) {
+  @include border-radius-bottom-left($radius); }
+
+// Top Left
+@mixin border-radius-top-left($radius) {
+  @include border-radius-top-left($radius); }
+
+// Top
+@mixin border-radius-top($radius) {
+  @include border-radius-top-left($radius);
+  @include border-radius-top-right($radius); }
+
+// Right
+@mixin border-radius-right($radius) {
+  @include border-radius-top-right($radius);
+  @include border-radius-bottom-right($radius); }
+
+// Bottom
+@mixin border-radius-bottom($radius) {
+  @include border-radius-bottom-right($radius);
+  @include border-radius-bottom-left($radius); }
+
+// Left
+@mixin border-radius-left($radius) {
+  @include border-radius-top-left($radius);
+  @include border-radius-bottom-left($radius); }
+
+// Let's setup the rules so we don't have to repeat ourselves
+// These are mixins for this mixin and are re-used above
+@mixin border-radius-top-right($radius) {
+  border-top-right-radius: $radius;
+  -moz-border-radius-topright: $radius;
+  -webkit-border-top-right-radius: $radius; }
+
+@mixin border-radius-bottom-right($radius) {
+  border-bottom-right-radius: $radius;
+  -moz-border-radius-bottomright: $radius;
+  -webkit-border-bottom-right-radius: $radius; }
+
+@mixin border-radius-bottom-left($radius) {
+  border-bottom-left-radius: $radius;
+  -moz-border-radius-bottomleft: $radius;
+  -webkit-border-bottom-left-radius: $radius; }
+
+@mixin border-radius-top-left($radius) {
+  border-top-left-radius: $radius;
+  -moz-border-radius-topleft: $radius;
+  -webkit-border-top-left-radius: $radius; }
+
+@mixin animate($name, $dur:1s, $easing:ease-in-out, $iter:infinite, $dir:alternate) {
+  -webkit-animation-name: $name;
+  -webkit-animation-duration: $dur;
+  -webkit-animation-direction: $dir;
+  -webkit-animation-iteration-count: $iter;
+  -webkit-animation-timing-function: $easing;
+}
+
+@mixin transition($info:all 250 ease-out) {
+  -webkit-transition: $info;
+  -moz-transition: $info;
+  -o-transition: $info;
+  transition: $info;
+}
+
+@mixin transform( $s:'rotate(45deg)') {
+  -moz-transform: $s;
+  -webkit-transform: $s;
+  -o-transform: $s;
+  transform: $s;
+}
+
+@mixin box-attrs() {
+  *[box-flex="0"]         { @include box-flex(0); }
+  *[box-flex="1"]         { @include box-flex(1); }
+  *[box-flex="2"]         { @include box-flex(2); }
+  *[box-flex="3"]         { @include box-flex(3); }
+  *[box-flex="4"]         { @include box-flex(4); }
+  *[box-flex="5"]         { @include box-flex(5); }
+  *[box-flex="6"]         { @include box-flex(6); }
+  *[box-flex="7"]         { @include box-flex(7); }
+  *[box-flex="8"]         { @include box-flex(8); }
+  *[box-flex="9"]         { @include box-flex(9); }
+  *[box-flex="10"]        { @include box-flex(10); }
+
+  *[box-align="start"]    {  @include box-align(start); }
+  *[box-align="center"]   {  @include box-align(center); }
+  *[box-align="end"]      {  @include box-align(end); }
+  *[box-align="baseline"] {  @include box-align(baseline); }
+  *[box-align="stretch"]  {  @include box-align(stretch); }
+
+  *[box-pack="start"]     {  @include box-pack(start); }
+  *[box-pack="center"]    {  @include box-pack(center); }
+  *[box-pack="end"]       {  @include box-pack(end); }
+  *[box-pack="justify"]   {  @include box-pack(justify); }
+  *[box-pack="stretch"]   {  @include box-pack(justify); }
+
+  *[box-lines="single"]   {  @include box-lines(single); }
+  *[box-lines="multiple"] {  @include box-lines(multiple); }
+
+  *[box-orient="horizontal"] {  @include box-orient(horizontal); }
+  *[box-orient="vertical"]   {  @include box-orient(vertical); }
+
+}
+
+// Font stuff
+
+@mixin web-font($family, $url, $format:'truetype') {
+  @font-face {
+    font-family: $family;
+    src: url($url) format($format);
+  }
+}
+
+// Color stuff
+
+@function strengthen($color, $multiplier: 1, $reversed: $reversed-text) {
+  @if $reversed {
+    @return lighten($color, 20% * $multiplier);
+  } @else {
+    @return darken($color, 20% * $multiplier);
+  }
+}
+
+@function soften($color, $multiplier: 1, $reversed: $reversed-text) {
+  @if $reversed {
+    @return darken($color, 20% * $multiplier);
+  } @else {
+    @return lighten($color, 20% * $multiplier);
+  }
+}