sverchok site design8_header

_.md

[ Launch: sverchok site design7_header ] 2ad15603e6309765ea8e by zeffii
[ Launch: sverchok site design5 ] ce13b6de62ff14d9c945 by zeffii
[ Launch: sverchok site design4 ] 8f9748503e271a0393fa by zeffii
[ Launch: sverchok site design3 ] b174ec8ccdceaaf91810 by zeffii
[ Launch: sverchok site design2 ] 57c755695d758d910252 by zeffii
[ Launch: sverchok site design ] cbc2d2feba7d65d8c256 by zeffii
[ Launch: zeffii's geom dailies grid html BW ] 8cc363a1bc13f6b85419 by zeffii
[ Launch: zeffii's geom dailies grid html ] 5818369 by zeffii
[ Launch: zeffii's geom dailies grid ] 5756514 by zeffii
[ Launch: zeffii's geom dailies ] 5280281 by zeffii
[ Launch: zeffii's geom dailies ] 5279252 by enjalot
[ Launch: just mine p5 ] 5020279 by zeffii
[ Launch: just mine p5 ] 4966869 by zeffii
[ Launch: just mine p3 ] 4960296 by zeffii
[ Launch: just mine p2 ] 4959904 by zeffii
[ Launch: just mine ] 4959669 by zeffii
[ Launch: crossfilter racetrack ] 4956157 by zeffii
[ Launch: crossfilter racetrack ] 4624910 by zeffii
[ Launch: Another Inlet ] 4618198 by enjalot

config.json

{"description":"sverchok site design8_header","endpoint":"","display":"div","public":true,"require":[{"name":"showdown","url":"//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"},{"name":"showdown","url":"//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"cars.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"conf.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"recodes.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"Manual.markdown":{"default":true,"vim":false,"emacs":false,"fontSize":12},"Manual":{"default":true,"vim":false,"emacs":false,"fontSize":12},"Manual.txt":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.46399999999999975,"ajax-caching":false,"thumbnail":"http://i.imgur.com/38VSTHI.png"}

inlet.js

/*
Prelim redesign of Sverchok landing page
-- been too long since I wrote .js and d3, 

page theme is purely accidental for shape visualization
*/

// ------- header background variables, setup and functions -----------

function url(prefix, str){
  return "url(" + prefix + str + ")";
}

var _markdown = "";

var result = tributary.Manual;

function read_content(myUrl) {

  //var result = null;
  /*  
  $.ajax( {   url: myUrl, 
              type: 'get', 
              dataType: 'html',
              async: false,
              success: function(data) { result = data; } 
            }
  );
  */
  // d3.text

  //FileReady = true;
  console.log(result);

  var converter = new Showdown.converter();
  return converter.makeHtml(result);
}


var gh_asset_https = "https://cloud.githubusercontent.com/assets/"

var context = {
  header: "Sverchok",
  menu_items: [
    {name:"About", link: ""},
    {name:"Gallery", link: ""},
    {name:"Download", link: ""},
    {name:"Manual", link: "...url to manual..."},
    {name:"Donate", link: ""}
  ]
  ,  
  About: "\
<h3>About</h3>\
<p>\
Droll trickatreat streaky bacon chance jeopardy dimanche fravaol ti\
chinchan chipchop chumchim chobchab blert braaap rabble rabble rablerable. RaBel!\
</p>"
  ,
  
  Manual: "\
<h3>Manual</h3>\
<p>\
Read Sverchok documentation online <b>here</b><br> \
Download for offline referencing from <b>this link</b>.</p>"
  ,

  Gallery: "\
<h3>Gallery</h3>\
<p>\
werwer 23 23443 wer \
werwer wer werrree wet\
</p>"
  ,
  
  Download: "\
<h3>Download</h3>\
<p>\
Sverchok development is hosted on GitHub \
werwer wer werrree wet\
</p>"
  
}


// ------ html generation --------

//d3.select("body").style("background-color", "#d3d3d3")

var content_display = d3.select("#display")
  .style({background: '#dbdadb'})

var cmain = content_display.append("div")
  .classed("content_main", true)
  //.attr({width: '289px', height: '500px'});


function draw_content(){
  
  var maindiv = cmain.append('div').classed('sv_maindiv', true);
   
  var div1 = maindiv.append("div").classed("sv_header", true);
  var div2 = maindiv.append("div").classed("sv_menu", true);
  var div3 = maindiv.append("div").classed("sv_content", true);
  
  div1.append('text').text(function(){ return context.header })
  
  // this can be transitioned to other images using a timer.
  div1.style({
    "background-image": url(gh_asset_https, "619340/5299224/1c085d8e-7bc5-11e4-8246-6951c48014ef.png")
  })
      
  var menu = div2.selectAll("div")
      .data(context.menu_items)
      .classed("menu_item", true);
    
  var menu_divs = menu.enter().append("div").classed('item', true)
  menu_divs.append("text")
      .text(function(d, i) { return d.name })
      .classed("noselect", true);
  
  div3.html(context.About)
  
  //div2.append('text').text(function(){ return context.about })
  
  menu.each(function(d){
    var obj = d3.select(this);
    
    obj.on("mouseover", function(d){
      console.log('over', d.name);
    })
    obj.on("mouseout", function(d){
      console.log('out', d.name);
    })    
    obj.on("click", function(d){
      console.log('clicked', d.name);

      // lookup transition?
      div3.html(context[d.name]);
    
      if (d.name === 'Manual'){
          console.log(read_content(d.name));
      }
      
    })    

    
  })
}


draw_content()

// fontage

  WebFontConfig = {
    google: { families: [ 'PT+Sans:400,700,400italic:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

Manual.txt

## On Comments

This article will first discuss comments in a language agnostic way, subsequent sections will detail language specific style and syntax.

### What are comments?

That's a fair question. In most languages a comment is a line of human readable information that doesn't interact with the program it appears in. Comments serve to document parts of a program and can describe functions, routines, data structures and design decisions. Comments are usually a good thing, but not always. Let's get the negativity out of the way first! 

### Not all comments are useful. 

Here are some examples of _avoidable_ comments.
- example: stating the obvious (content)
- example: does not make sense (content)
- example: does not relate to nearby code (context)
- example: seems to relate to code that has since been removed (context)
- example: the todo. if you include one add the date it was added. - fix your todos first!

### What are they good for?

Commenting is a strategy we use to convey quickly in words those things that we think are not obvious from the code alone. Any coder who starts to enjoy coding will realize that there are ways to make life for his future self (and others) easier, commenting can be one of those ways. Commenting, however, is not a substitute for writing clear code.

Comments can facilitate the comprehension speed for people reading a piece of code for the first time, but the comment must be smart. Let a comment describe the idea behind the code more than the workings of the code.

> Initially coders learn new syntax and place remarks about what a line of code does, this is ok to do  - but eventually you will stop restating these tricks in your (native) tongue and trust that the code speaks for itself.

### Comments are like dress code sometimes

Depending on the environment your code lives in you might have to dress it up in formal attire. The company or open source project you work with has probably settled on a [programming style guide] which includes a section on how to format comments - it is important to align yourself with the prevailing style to make your contributions fit with the existing code base.

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark .CodeMirror-gutters {background: #505050;}
.cm-s-lesser-dark .CodeMirror-linenumber {color: #D3D3D3;}


#display {
  overflow:scroll;
  padding-bottom: 5px;
}



div.content_main { 
  font-size: 0.7em;
  line-height: 0.95em;
  overflow: scroll;
  width: 100%
}

text {
  color: #edfbed;
  font-family: 'PT Sans', sans-serif;
}

.sv_maindiv {
  margin: 40px 40px 40px 40px;
  width: 800px;
  
}

.sv_header {
  background: #fffaf9;
  width: 100%;
  height: 300px;
  padding-top: 50px;
  margin-top: 20px;
}

.sv_header text {
  color: #e8e9e6;
  font-size: 7em
}

.sv_menu {
  display: inline-block;
  float: left;
  //background: #eceeeb;
  width: 12%;
  height: auto;
  padding-top: 20px;
}

.sv_content {
  float: left;
  display: inline-block;
  background: #82c5ed;
  height: 300px;
  width: 88%;
  padding: 16px 16px 16px 22px;
  vertical-align: top;
}

.item {
  cursor: pointer; cursor: hand;
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 8px;
  background: #fdfafe;
  //border: 1px solid;
  //border-right: thick #234;
  border-right: thick solid #fdfafe;
}

.item:hover {
  background: #fefefe;
  border-right: thick solid #f5fbfe;
}

.item:hover text{
  color: #73c6f6;
}

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

.item text {
  color: #7f7f7f;
  font-size: 1.2em;
}

.sv_content h3{
  color: #f4f4f4;
  font-size: 1.2em;
}

.sv_content p {
  color: #f7f7f7;
  font-size: 1.1em;
  font-weight: normal;
  line-height: 1.5em;
  
}