bone_tree 0.5.0

data/source/javascripts/bone_tree/views/_tree.js.coffee

@@ -0,0 +1,498 @@
+#= require ../_namespace
+
+#= require_tree ../models
+#= require_tree ../views
+
+BoneTree.namespace "BoneTree.Views", (Views) ->
+  {Models} = BoneTree
+
+  class Views.Tree extends Backbone.View
+    ###
+    Public: The base tree object. Events from other objects are proxied to the tree
+            so API consumers only need to know about this top level object.
+
+    ###
+    className: 'tree'
+
+    events:
+      'contextmenu .file': '_contextMenu'
+      'contextmenu .directory': '_contextMenu'
+      'click .directory': '_openDirectory'
+      'click .file': '_openFile'
+
+    initialize: ->
+      ###
+      Public: Initialize a new filetree widget
+
+      * options          - An Object of global configuration options for the file tree.
+        * confirmDeletes - A Boolean. If true, the tree will prompt the user, making
+                           sure they want to delete the file (default: false).
+        * showExtensions - A Boolean. If true, files display their extensions. Internally,
+                           extensions are always kept track of but by default they are
+                           hidden (default: false).
+
+      ###
+      $(document).click @_closeMenu
+
+      @_currentFileData = null
+
+      settingsConfig = _.extend({}, @options, {treeView: @})
+
+      @settings = new Models.Settings(settingsConfig)
+
+      @menuView = new Views.Menu
+        settings: @settings
+      @menuView.render().$el.appendTo $('body')
+
+      @root = new Models.Node
+
+      @root.collection.bind 'add', @render
+
+      @root.collection.bind 'remove', (model, collection) =>
+        @$("[data-cid='#{model.cid}']").remove()
+
+        @render()
+
+        @trigger 'remove', model
+
+    file: (filePath, fileData) =>
+      filePath = filePath.replace('/', '') if filePath[0] is '/'
+
+      if fileData?
+        @_currentFileData = _.extend(fileData, path: filePath)
+
+        @_currentFileData.autoOpen = true unless @_currentFileData.autoOpen?
+        @_currentFileData.hidden = false unless @_currentFileData.hidden?
+      else
+        return @_getFile(filePath)
+
+      [dirs..., fileName] = filePath.split '/'
+
+      if file = @_getFile(filePath)
+        file.set(@_currentFileData)
+      else
+        @addToTree(@root, dirs, fileName)
+
+    addFromJSON: (data, currentPath="") =>
+      ###
+      Public: Creates a file tree from a JSON representation. Expects the
+              JSON object to have a `name` property at each level, specifying
+              the name of the file or directory, and a files array if the
+              current node has child directories or files.
+
+      * data        - An Object that represents hierarchical file data.
+
+      * currentPath - A String representing the current location in the tree.
+                      Defaults to the file tree root. (default: "")
+
+      Examples
+
+          data = {
+            name: "My Project"
+            files: [
+              { name: "Empty Folder" }
+              { name: "SomeFile.coffee" }
+              { name: "AnotherFile.coffee" }
+              {
+                name: "Folder with Files inside"
+                files: [
+                  { name: "NestedFile.coffee" }
+                ]
+              }
+            ]
+          }
+
+          tree.addFromJSON(data)
+          # => <Tree>
+
+      Returns the Tree view object.
+      ###
+      name = ""
+
+      if data.name?
+        name = data.name + '/'
+        delete data.name
+
+      if data.extension?
+        name = name.replace('/', '.' + data.extension)
+        delete data.extension
+
+      currentPath += name
+
+      if data.files?
+        for file in data.files
+          @addFromJSON(file, currentPath)
+      else
+        @file(currentPath, data)
+
+      return @
+
+    addToTree: (currentDirectory, remainingDirectories, fileName) =>
+      ###
+      Internal: Recursive method that traverses nodes, creating
+                Files and Directories.
+
+      * currentDirectory     - A Node object representing which directory we are
+                               adding the current Directory or File to.
+      * remainingDirectories - A '/' separated String representing the remaining
+                               directories to add.
+      * fileName             - The String name of the file to be added. This can
+                               include the extension name separated by a '.'.
+
+      Examples
+
+          tree.addToTree(@root, '/source/subdirectory/', 'main.coffee')
+          # => <File>
+
+      Returns the File object if it was created and null if no file was given.
+      ###
+      if remainingDirectories.length
+        nextDirectoryName = remainingDirectories.shift()
+
+        if matchingDirectory = Models.Directory.find(currentDirectory, nextDirectoryName)
+          matchingDirectory.set
+            open: true
+
+          @addToTree(matchingDirectory, remainingDirectories, fileName)
+        else
+          newNode = new Models.Directory {name: nextDirectoryName, open: true}
+
+          newDirectory = currentDirectory.collection.add newNode
+          @addToTree(newNode, remainingDirectories, fileName)
+      else
+        return null if fileName is ""
+
+        file = Models.File.createFromFileName(fileName, @_currentFileData)
+        @_currentFileData = null
+
+        currentDirectory.collection.add file
+
+        if file.get('autoOpen')
+          @trigger 'openFile', file
+
+        return file
+
+    findOrCreateView: (node) =>
+      ###
+      Internal: Look up existing view in the view cache or Create a new view
+                of the correct type (either File or Directory).
+
+      * node - A Node object. Either a File object or a Directory object.
+               This is the model that the view will be associated with.
+
+      Examples
+
+          file = new BoneTree.Models.File
+
+          # This will create a new view since we just created the File
+          tree.findOrCreateView(file)
+          # => <FileView>
+
+      Returns the view corresponding to the model passed in.
+      ###
+      type = node.constantize()
+      viewCache = @settings.get 'viewCache'
+
+      unless view = viewCache[node.cid]
+        view = viewCache[node.cid] = new Views[type]
+          model: node
+          settings: @settings
+
+      return view
+
+    # TODO this seems unneeded and backward. I shouldn't need to look up
+    # a model from the view cache. I should be able to just find it in
+    # the collection.
+    getModelByCid: (cid) =>
+      viewCache = @settings.get 'viewCache'
+
+      for modelCid, view of viewCache
+        return view.model if modelCid is cid
+
+    closeDirectories: =>
+      ###
+      Public: Close all the directories in the file tree.
+
+      Examples
+
+          tree.closeDirectories()
+          # => <Tree>
+
+      Returns the Tree view object.
+      ###
+      directories = _.filter(@flatten(), (node) ->
+        node.get('nodeType') is 'directory'
+      )
+
+      _.invoke(directories, 'set', {open: false})
+
+      return @
+
+    _closeMenu: (e) =>
+      ###
+      Internal: Close the context menu. This is called every click on
+                the document and closes the menu unless you are clicking
+                within it. This shouldn't be called directly, it is called
+                automatically by Backbone from user interactions.
+
+      Returns the Menu view object.
+      ###
+      @menuView.$el.hide() unless $(e.currentTarget).is('.menu')
+
+      return @menuView
+
+    _contextMenu: (e) =>
+      ###
+      Internal: Open the context menu. This prevents the default browser
+                context menu event. This shouldn't be called directly, it is
+                called automatically by Backbone from user interations.
+
+      Returns the Menu view object.
+      ###
+      e.preventDefault()
+
+      model = @getModelFromClick(e)
+
+      @menuView.model = model
+
+      @menuView.$el.css(
+        left: e.pageX
+        top: e.pageY
+      ).show()
+
+      return @menuView
+
+    filterNodes: (nodeType, nodeName) =>
+      ###
+      Internal: Returns file tree nodes that match the nodeType and nodeName.
+
+      * nodeType - A String that represents the nodeType to match. Choices are
+                   'file' or 'directory'.
+      * nodeName - A String that represents the name of the node to match.
+
+      Examples
+
+          # Add some files to the tree
+          tree.file('/source/main.coffee')
+          tree.file('/source/player.coffee')
+
+          # returns an array containing the File 'main.coffee'
+          tree.filterNodes('file', 'main')
+          # => [<File>]
+
+      Returns an Array of nodes that match the filter criteria.
+      ###
+      results = _.filter @flatten(), (node) =>
+        node.get('nodeType') is nodeType and node.get('name') is nodeName
+
+      return results
+
+    flatten: (currentNode=@root, results=[]) =>
+      ###
+      Internal: Returns a one dimensional ordered array representing the
+                Directory and File nodes in the tree.
+
+      * currentNode - The node to start at when flattening
+      * nodeName - A String that represents the name of the node to match.
+
+      Examples
+
+          # Add some files to the tree
+          tree.file('/source/main.coffee', {aFile: true})
+          tree.file('/source/player.coffee', {playerData: {x: 50, y: 30}})
+
+          # returns an array containing the File 'main.coffee'
+          tree.filterNodes('file', 'main')
+          # => [<File>]
+
+      Returns an Array of nodes that match the filter criteria.
+      ###
+      currentNode.collection.each (node) =>
+        results.push node
+
+        @flatten(node, results) if node.collection.length
+
+      return results
+
+    getDirectory: (directoryName) =>
+      ###
+      Public: Returns an array of directories matching the given directoryName.
+
+      * directoryName - A String naming the directory to match.
+
+      Examples
+
+          # Add some files to the tree
+          tree.file('/source/main.coffee', {size: 4039})
+          tree.file('/source/player.coffee', {size: 399})
+          tree.file('/directory2/file.coffee', {size: 23})
+
+          # returns an array containing the Directory 'source'
+          tree.getDirectory('source')
+          # => [<Directory>]
+
+      Returns an Array of Directory nodes that match directoryName.
+      ###
+      @filterNodes('directory', directoryName)
+
+    _getFile: (filePath) =>
+      ###
+      Internal: Returns a file at the specified location.
+
+      * fileName - A String describing the file path.
+
+      Examples
+
+          # Add some files to the tree
+          tree.file('/source/main.coffee', {size: 30459})
+          tree.file('/source/player.coffee', {size: 943})
+          tree.file('/directory2/main.coffee', {size: 4945})
+
+          # returns an array containing both the files named main.
+          tree._getFile('source/main.coffee')
+          # => <File>
+
+      Returns a File at the given location.
+      ###
+
+      filePath = filePath.replace('/', '') if filePath[0] is '/'
+
+      nodes = @flatten()
+
+      filtered = _.filter(nodes, (node) ->
+        return node.get('nodeType') is 'file' and node.get('path') is filePath
+      )
+
+      return filtered[0]
+
+    files: (directoryName) =>
+      ###
+      Public: Returns an array of files contained within the directory
+              matching directoryName.
+
+      * directoryName - A String naming the directory to look inside.
+
+      Examples
+
+          # Add some files to the tree
+          tree.file('/source/main.coffee', {main: true})
+          tree.file('/source/player.coffee', {active: true})
+          tree.file('/directory2/main.coffee', {active: true})
+
+          # returns an array containing the files 'player.coffee' and 'main.coffee'
+          tree.files('source')
+          # => [<File>, <File>]
+
+      Returns an Array of File nodes that are contained in the
+      Directory matching directoryName.
+      ###
+
+      # return all files if no directory is provided
+      unless directoryName?
+        return _.filter(@flatten(), (node) ->
+          return node.get('nodeType') is 'file'
+        )
+
+      directory = @getDirectory(directoryName)[0]
+
+      # short circuit if directory name isn't in the tree
+      # Otherwise flatten will return all the files in
+      # the filetree
+      return [] unless directory
+
+      nodesInDirectory = @flatten(directory)
+
+      return _.filter nodesInDirectory, (node) ->
+        node.get('nodeType') is 'file'
+
+    toAscii: (collection, indentation=0, output="\n") =>
+      ###
+      Internal: A String representation of the filetree.
+
+      * collection  - A NodeCollection object describing which folder to start at.
+      * indentation - A Number describing how many spaces to indent the next filetree element (default: 0).
+      * output      - A String representing the current filetree output (default: "\n").
+
+      Examples
+
+          # Add some files to the tree
+          tree.file('/source/main.coffee', {main: true})
+          tree.file('/source/player.coffee', {active: true})
+          tree.file('/directory2/main.coffee', {active: false})
+
+          tree.toAscii()
+          # => "
+            -directory2
+             -main.coffee
+            -source
+             -main.coffee
+             -player.coffee
+          "
+
+      Returns a String representation of the sorted nodes of the file tree.
+      ###
+      rootCollection = collection || @root.collection
+
+      spaces = ""
+
+      for n in [0..indentation]
+        spaces += " "
+
+      rootCollection.each (nodes) =>
+        typeChar = if nodes.get('type') is 'directory' then '+' else '-'
+
+        output += (spaces + typeChar + nodes.nameWithExtension() + '\n')
+
+        output = @toAscii(nodes.collection, indentation + 1, output)
+
+      return output
+
+    getModelFromClick: (e) =>
+      ###
+      Internal: Look up a model based on the cid of the clicked view element.
+
+      Returns the Node corresponding to the view element that the user clicked on.
+      ###
+      e.stopPropagation()
+      @menuView.$el.hide()
+
+      cid = $(e.currentTarget).data('cid')
+
+      return @getModelByCid(cid)
+
+    _openDirectory: (e) =>
+      ###
+      Internal: Toggle the directory icon and display the contents of the clicked Directory.
+
+      ###
+      model = @getModelFromClick(e)
+
+      model.toggleOpen()
+
+    _openFile: (e) =>
+      ###
+      Internal: Trigger the 'openFile' event, passing in the file corresponding
+                to the view element that the user clicked.
+
+      ###
+      model = @getModelFromClick(e)
+
+      # events are emitted by the filetree itself. This way API
+      # consumers don't have to know anything about the internals.
+      @trigger 'openFile', model
+
+    render: =>
+      ###
+      Internal: Call render on each of the nodes underneath the root node.
+                Also calls sort on each of the subcollections.
+
+
+      ###
+      @root.collection.sort().each (node) =>
+        node.collection.sort()
+        view = @findOrCreateView(node)
+
+        @$el.append view.render().$el unless view.model.get('hidden')
+
+      return @
+

data/source/javascripts/bone_tree.js.coffee

@@ -0,0 +1 @@
+#= require ./bone_tree/views/_tree

data/source/layout.haml

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+%html
+  %head
+    %meta(charset="utf-8")
+    %meta(content="IE=edge,chrome=1" http-equiv="X-UA-Compatible")
+
+    <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
+    = stylesheet_link_tag "bone_tree_repo.css"
+    = stylesheet_link_tag "bone_tree.css"
+    = yield_content :head
+
+  %body
+    = yield

data/source/stylesheets/bone_tree.css.sass

@@ -0,0 +1,107 @@
+@import "compass"
+@import "compass/css3"
+
+$node_height: 20px
+
+.filetree_context_menu
+  @include global-reset
+
+  +border-radius(3px)
+  +box-shadow(rgba(0, 0, 0, 0.4) 0 2px 10px)
+
+  background-color: #fff
+  border: 1px solid rgba(0, 0, 0, 0.3)
+  cursor: pointer
+  display: none
+  font-weight: 500
+  position: absolute
+  width: 100px
+
+  hr
+    border: 0
+    border-top: 1px solid rgba(0, 0, 0, 0.15)
+    height: 1px
+    margin: 0
+
+  li
+    margin: 0.25em 0
+    padding: 0 0.5em
+
+    &:hover
+      background-color: #1084CE
+      color: white
+
+  .rename
+    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACjSURBVDjL7ZNBCsIwEEVz1mwTo1YjiHdIqyWgFBGPonWTC8T2BjlE4JsUwU0ILe7ExUtgPvNmNkMAkG8gPyAwxiAHYwxKKUgpk/kg8N5n4Zwn6865j4CVLXj1AA//rArsW4hAzCil4wTFsUdx6rBuLLaXJ+aH+zTBqukDFpuzxe5qsagnCIbV32vHybF5Wd/GC3JkBfHJEZu11hBCJHPyvwXyAt6tONifnq6xAAAAAElFTkSuQmCC') no-repeat
+    background-position: 4px 3px
+    padding-left: 24px
+
+  .delete
+    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJdSURBVDjLpZP7S1NhGMf9W7YfogSJboSEUVCY8zJ31trcps6zTI9bLGJpjp1hmkGNxVz4Q6ildtXKXzJNbJRaRmrXoeWx8tJOTWptnrNryre5YCYuI3rh+8vL+/m8PA/PkwIg5X+y5mJWrxfOUBXm91QZM6UluUmthntHqplxUml2lciF6wrmdHriI0Wx3xw2hAediLwZRWRkCPzdDswaSvGqkGCfq8VEUsEyPF1O8Qu3O7A09RbRvjuIttsRbT6HHzebsDjcB4/JgFFlNv9MnkmsEszodIIY7Oaut2OJcSF68Qx8dgv8tmqEL1gQaaARtp5A+N4NzB0lMXxon/uxbI8gIYjB9HytGYuusfiPIQcN71kjgnW6VeFOkgh3XcHLvAwMSDPohOADdYQJdF1FtLMZPmslvhZJk2ahkgRvq4HHUoWHRDqTEDDl2mDkfheiDgt8pw340/EocuClCuFvboQzb0cwIZgki4KhzlaE6w0InipbVzBfqoK/qRH94i0rgokSFeO11iBkp8EdV8cfJo0yD75aE2ZNRvSJ0lZKcBXLaUYmQrCzDT6tDN5SyRqYlWeDLZAg0H4JQ+Jt6M3atNLE10VSwQsN4Z6r0CBwqzXesHmV+BeoyAUri8EyMfi2FowXS5dhd7doo2DVII0V5BAjigP89GEVAtda8b2ehodU4rNaAW+dGfzlFkyo89GTlcrHYCLpKD+V7yeeHNzLjkp24Uu1Ed6G8/F8qjqGRzlbl2H2dzjpMg1KdwsHxOlmJ7GTeZC/nesXbeZ6c9OYnuxUc3fmBuFft/Ff8xMd0s65SXIb/gAAAABJRU5ErkJggg==') no-repeat
+    background-position: 4px 3px
+    padding-left: 24px
+
+.tree
+  @include global-reset
+
+  +box-sizing(border-box)
+  -moz-user-select: none
+  -khtml-user-select: none
+  -webkit-user-select: none
+  -o-user-select: none
+  user-select: none
+
+  color: black
+  overflow-y: scroll
+
+  ul, li
+    list-style-type: none
+
+  .directory, .file
+    cursor: pointer
+
+  .directory
+    .directory
+      padding-left: 20px
+
+  .file
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAL5JREFUeNpi/P//PwMIrOp1gjBwgLDifYxYJUAGgPDKHsf/uMCVvTX/ofIM6JiJgUigbWiN1ZVEG4DLEBYMVXmFqPxJ/QzaTs1w7tXzTgz4DQBqIAVgGNC7YxGc/fnoPoaG5gUM2bnJDFMnz2UgOxaQAXpswF1w7YMcahgAvdJQm8Dw+gMzmAtzAVwdMWEAcj7JYXB1Xy3Djl+qcP7aS5fB9LGybuIMAEWZNhK/2AO/C0hKSARdAAo0UgFAgAEAldGhef3Bv88AAAAASUVORK5CYII=') no-repeat
+    background-position: 1px 3px
+    padding-left: 20px
+
+    &.coffee
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAILSURBVDjLrVM7ixNhFB2LFKJV+v0L24nabIogtmItin9ALBS3tXNt3CWgVlpMsAgrWRexkCSTd0KimYS8Q94vsnlrikAec7z34hSibON+cJjXPeee79xvFADK/0C5UIFyubxLUEulklooFNR8Pn+Sy+VOstmsmslk1HQ6raZSqd2/BCqVyh4RW/V6HePxGJPJRDCdTuU6Go0EZ2dnIFEkk8lWIpHYEwEi24lszGYzjHptfPvsgvbuEJ9ePMPH548Epwf70N4f4fuXY6rpYDgcIh6PG7FYzM62dSav12spfHXn2rk4fbmPxWIhIpFIRFfIzk+v1wvDMLAhka9vD+B88gCv79lxdPeG4M39W/jw9KF8q+oJzOdz2VIoFPqhOJ3O7mAwwHK5xGazketqtRKws3+Bto1arYZgMFhTHA6HC78XW6P0wYJmcAy2y+9arRYoPCHTpOD3+w8Vm8122xTgQhobqtUqms0mGo0GeDLckdOnESIcDqPdbnN3aJp2VbFarTfN7kxmUqfTkSLuyM8syB3pLMj7fr8Pn883kTFaLJbr1EHfbrdilwm9Xg/dblfABNMF3/NWisUiKPjHIkDrMou43e4CF+m6LkUMU4idcFc+WJwRkbU/TiKtS4QrgUDgmGZrcEcelXkKORsWJ9sGkV3n/kzRaHSHgtrQjEGCHJSAyBuPx7Nz4X/jL/ZqKRurPTy6AAAAAElFTkSuQmCC') no-repeat
+      background-position: 1px 3px
+      padding-left: 20px
+
+  .directory
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKJJREFUeNpi/P//PwMlgJGqBhzpMEUxzabiNCNBE0AGgPDaYt3/6AAqxoAPg10AstkmOgth6oenDA9ffAUzH5/dg2EpistABhxuN/lPLICqhbuABW7S4/lEBdqVy68ZbJD4TCDi1ZufRIe6mCQfCp+JgUIA9sKnr9/BAUcMAKtFd8GPT7+JthFdLdwL6xauoiwlLshUJSpNJ0y/zUjVvAAQYACWqqflysozQAAAAABJRU5ErkJggg==') no-repeat
+    background-position: 0 4px
+    padding-left: 20px
+
+    &.open
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMhJREFUeNpi/P//PwMlgJGqBhzpMEUxzabiNCNBE0AGgPDaYt3/6AAqxoAPg10AstkmOgth6oenDA9ffAUzH5/dg2EpistABhxuN/lPLICqhbuABW7S4/lEBdqVy68ZbJD4YANevfmJoXDdxH6sBohJ8jGsK9H7j2IANs1B+YX4nQIMp3ULV0EM+PT1O1gArBkoGBQfBufjAmB1PZcYmUCcH59+o2omAGCa4QlpRrTCf5DfSNWMkhIXZKoSlaYTpt9mpGpeAAgwAJYXxD0Qxy7tAAAAAElFTkSuQmCC') no-repeat
+      background-position: 0 4px
+
+  .json
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGSSURBVCjPVVFNSwJhEF78Ad79Cf6PvXQRsotUlzKICosuRYmR2RJR0KE6lBFFZVEbpFBSqKu2rum6llFS9HHI4iUhT153n6ZtIWMOM+/MM88z7wwH7s9Ub16SJcnbmrNcxVm2q7Z8/QPvEOtntpj92NkCqITLepEpjix7xQtiLOoQ2b6+E7YAN/5nfOEJ2WbKqOIOJ4bYVMEQx4LfBBQDsvFMhUcCVU1/CxVXmDBGA5ZETrhDCQVcYAPbyEJBhvrnBVPiSpNr6cYDNCQwo4zzU/ySckkgDYuNuVpI42T9k4gLKGMPs/xPzzovQiY2hQYe0jlJfyNNhTqiWDYBq/wBMcSRpnyPzu1oS7WtxjVBSthU1vgVksiQ3Dn6Gp5ah2YOKQo5GiuHPA6xT1EKpxQNCNYejgIR457KKio0S56YckjSa9jo//3mrj+BV0QQagqGTOo+Y7gZIf1puP3WHoLhEb2PjTlCTCWGXtbp8DCX3hZuOdaIc9A+aQvWk4ihq95p67a7nP+u+Ws+r0dql9z/zv0NCYhdCPKZ7oYAAAAASUVORK5CYII=') no-repeat
+    background-position: 0 4px
+    padding-left: 20px
+
+  .png, .jpeg, .gif
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHwSURBVDjLpZM9a1RBFIafM/fevfcmC7uQjWEjUZKAYBHEVEb/gIWFjVVSWEj6gI0/wt8gprPQykIsTP5BQLAIhBVBzRf52Gw22bk7c8YiZslugggZppuZ55z3nfdICIHrrBhg+ePaa1WZPyk0s+6KWwM1khiyhDcvns4uxQAaZOHJo4nRLMtEJPpnxY6Cd10+fNl4DpwBTqymaZrJ8uoBHfZoyTqTYzvkSRMXlP2jnG8bFYbCXWJGePlsEq8iPQmFA2MijEBhtpis7ZCWftC0LZx3xGnK1ESd741hqqUaqgMeAChgjGDDLqXkgMPTJtZ3KJzDhTZpmtK2OSO5IRB6xvQDRAhOsb5Lx1lOu5ZCHV4B6RLUExvh4s+ZntHhDJAxSqs9TCDBqsc6j0iJdqtMuTROFBkIcllCCGcSytFNfm1tU8k2GRo2pOI43h9ie6tOvTJFbORyDsJFQHKD8fw+P9dWqJZ/I96TdEa5Nb1AOavjVfti0dfB+t4iXhWvyh27y9zEbRRobG7z6fgVeqSoKvB5oIMQEODx7FLvIJo55KS9R7b5ldrDReajpC+Z5z7GAHJFXn1exedVbG36ijwOmJgl0kS7lXtjD0DkLyqc70uPnSuIIwk9QCmWd+9XGnOFDzP/M5xxBInhLYBcd5z/AAZv2pOvFcS/AAAAAElFTkSuQmCC') no-repeat
+    background-position: 0 4px
+    padding-left: 20px
+
+  .js
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJ+SURBVBgZBcExbFRlAADg7//fu7teC3elQEoMgeDkYDQ6oMQQTYyGxMHZuDA6Ypw0cWI20cHJUdl0cJLIiomR6OACGhUCpqGWtlzbu/b97/3v9/tCKQVc/e7RRXz+7OrSpUXbW7S9tu8ddv0M+3iCjF1s42v8WAP0XffKi2eOXfro9dMAYJ766SL1092jfDa17DfZgycHfvh7/hau1QB9161PhgE8epoNQlAHqprRIDo3iqoYDSpeOjv2zHRl7atfNj6LALltJys1Xc9+CmYtTxtmR8yO2D7kv4MMPr7x0KULK54/NThdA+S2XTs+jOYN86MsxqBGVRErKkEV6BHynp//2fXbw9lGDZBTWp+OK7PDzqIpYiyqSMxBFakUVYVS2dxrfHHrrz1crQG6lM6vTwZmR0UHhSoHsSBTKeoS9YU8yLrUXfj+w9d2IkBOzfkz05F5KkKkCkFERACEQil0TSOnJkMNV67fHNdVHI4GUcpZVFAUZAEExEibs4P5osMeROiadHoUiIEeCgFREAoRBOMB2weNrkmbNz+9UiBCTs1yrVdHqhgIkRL0EOj7QGG5jrZ2D+XUbADEy9dunOpSun7xuXMe7xUPNrOd/WyeyKUIoRgOGS8xWWZ7b6FLaROgzim9iXd+vXvf7mHtoCnaXDRtkLpel3t9KdamUx+8fcbj7YWc0hZAndv25XffeGH8yfuvAoBcaHOROhS+vLlhecD+wUJu222AOrft/cdPZr65ddfqsbHVyZLVlZHpysjx5aHRMBrV0XuX141qtnb25bb9F6Duu+7b23funb195955nMRJnMAJTJeGg8HS0sBkZWx1suz3Px79iZ8A/gd7ijssEaZF9QAAAABJRU5ErkJggg==') no-repeat
+    background-position: 0 4px
+    padding-left: 20px
+
+  .wav, .sfs, .mp3, .ogg
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH0SURBVDjLxdPPS9tgGAfwgH/ATmPD0w5jMFa3IXOMFImsOKnbmCUTacW1WZM2Mf1ho6OBrohkIdJfWm9aLKhM6GF4Lz3No/+AMC/PYQXBXL1+95oxh1jGhsgOX/LywvN5n/fN+3IAuKuEuzagVFoO27b1/Z+BcrnUx4otx7FPLWsJvYpIM2SS9H4PqNWqfK1W8VKplHlW/G1zs4G9vS9YXPx4CaDkXOFES4Om4gceUK2WsbZWR72+gtXVFezsbKHVamF7ewtm/sMFgBJZhd6pvm4kDndaAo2KOmt5Gfv7X9HpdNBut9FsNmFZFgPrMHKZc4DkjHyi6KC3MZNehTOuGAH5Xx5ybK/Y3f0Mx3Fg2zaKxSIMw2DjT0inNQ84nogcUUQJHIfZquNT3hzx46DBALizg2o01qEoCqLRKERRRDAYhKYlWRK/AJdCMwH2BY28+Qk8fg667wdXKJjY2FiHaeaRzWYQCk1AEASGzSCZjP/ewtik5r6eBD0dM+nRSMb1j4LuPDnkFhZymJ/PsmLdazmV0jxEkqKsK+niIQ69mKUBwdd9OAx3SADdHtC53FyK12dVXlVlPpF4zytK7OgMyucNyHLs8m+8+2zJHRwG3fId9LxIbNU+OR6zWU57AR5y84FKN+71//EqM2iapfv/HtPf5gcdtKR8VW88PgAAAABJRU5ErkJggg==') no-repeat
+    background-position: 0 4px
+    padding-left: 20px
+
+
+

data/source/stylesheets/bone_tree_repo.css.sass

@@ -0,0 +1,65 @@
+@import compass
+@import compass/css3
+
+html
+  height: 100%
+
+body
+  background-image: url('/images/crushed_bone.png')
+  font-family: 'EB Garamond', serif
+  font-variant: small-caps
+  height: 100%
+  margin: 0
+
+img.background
+  position: absolute
+  top: 20px
+  right: 20px
+  opacity: 0.2
+
+.bone_tree
+  background-color: rgba(255, 255, 255, 0.5)
+
+.tree
+  height: 100%
+  padding: 1em
+
+h1
+  font-size: 2.5em
+  margin: 0
+  padding-top: 0.25em
+
+h3
+  margin: 0
+
+ul.features
+  list-style: circle
+  margin-top: 0.25em
+
+.CodeRay
+  font-family: monaco, monospace
+  font-variant: normal
+  font-size: 12px
+
+.left
+  border-right: 1px dashed rgba(0, 0, 0, 0.4)
+  height: 100%
+  position: fixed
+  left: 0
+  width: 22%
+
+.right
+  padding-left: 23%
+  width: 60%
+
+.background
+  +opacity(0.2)
+
+  background: url('/images/bonetree.png') no-repeat
+  display: inline-block
+  width: 843px
+  height: 650px
+  position: absolute
+  right: 0
+  top: 20px
+