From bcb1c40f93512bffd62babf44abc69ebc1ada12f Mon Sep 17 00:00:00 2001 From: Sam Tobin-Hochstadt Date: Wed, 16 Oct 2013 18:58:29 -0400 Subject: [PATCH] examples work --- new-racket-web/web/common/layout.rkt | 70 +++++-------------- .../web/common/resources/css/gumby.css | 2 +- .../css/{style.css => frontpage-style.css} | 4 +- new-racket-web/web/www/index.rkt | 67 +++++++----------- new-racket-web/web/www/js/slideshow.js | 39 +++++++++++ 5 files changed, 86 insertions(+), 96 deletions(-) rename new-racket-web/web/www/css/{style.css => frontpage-style.css} (89%) create mode 100644 new-racket-web/web/www/js/slideshow.js diff --git a/new-racket-web/web/common/layout.rkt b/new-racket-web/web/common/layout.rkt index ca8034efd2..5b5e85752f 100644 --- a/new-racket-web/web/common/layout.rkt +++ b/new-racket-web/web/common/layout.rkt @@ -127,55 +127,22 @@ (set-box! navbar-info (list (lazy pages) (lazy top) (lazy help))))) (define navbar-info (box #f)) -(define (navbar-maker logo) - (define pages-promise - (lazy (car (or (unbox navbar-info) - (error 'navbar "no navbar info set"))))) - (define top-promise (lazy (cadr (unbox navbar-info)))) - (define help-promise (lazy (caddr (unbox navbar-info)))) - (define pages-parts-of-promise - (lazy (map pages->part-of (force pages-promise)))) - (define (middle-text size x) - (span style: `("font-size: ",size"px; vertical-align: middle;") - class: 'navtitle - x)) - (define OPEN - (list (middle-text 100 "(") - (middle-text 80 "(") - (middle-text 60 "(") - (middle-text 40 nbsp))) - (define CLOSE - (list (middle-text 80 "Racket") - (middle-text 40 nbsp) - (middle-text 60 ")") - (middle-text 80 ")") - (middle-text 100 ")"))) - (define (header-cell) - (td (a href: (url-of (force top-promise)) - OPEN - (img src: logo alt: "[logo]" - style: '("vertical-align: middle; " - "margin: 13px 0.25em 0 0; border: 0;")) - CLOSE))) - (define (links-table this) - (table width: "100%" - (tr (map (λ (nav navpart) - (td class: 'navlinkcell - (span class: 'navitem - (span class: (if (eq? (pages->part-of this) navpart) - 'navcurlink 'navlink) - nav)))) - (force pages-promise) - (force pages-parts-of-promise))))) - (λ(this) - (div class: 'racketnav - (div class: 'navcontent - (table border: 0 cellspacing: 0 cellpadding: 0 width: "100%" - (tr (header-cell) - (td class: 'helpiconcell - (let ([help (force help-promise)]) - (span class: 'helpicon (if (eq? this help) nbsp help))))) - (tr (td colspan: 2 (links-table this)))))))) +(define ((navbar-maker logo) this) + (define (icon name) @i[class: name]{}) + (define (row . content) (apply div class: "row" content)) + + @div[class: "navbar" gumby-fixed: "top" id: "nav1"]{ + @row{ + @a[class: "toggle" gumby-trigger: "#nav1 > .row > ul" href: "#"]{ + @icon{icon-menu}} + @a[class: "five columns logo" href: ""]{ + @img[class: "logo" src: logo]} + @ul[class: "five columns"]{ + @li{@a[href: "https://pkg.racket-lang.org"]{Packages}} + @li{@a[href: "https://docs.racket-lang.org"]{Documentation}} + @li{@a[href: "https://blog.racket-lang.org"]{Blog}} + @li{@div[class: "medium metro info btn icon-left entypo icon-install"]{ + @a[href: "./download/"]{Download}}}}}}) (define html-preamble @list{ @@ -230,9 +197,10 @@ @; CSS imports non-minified for staging, minify before moving to @; production @link[rel: "stylesheet" href: (resources "gumby.css")] + @;@link[rel: "stylesheet" href: (resources "style.css")] @; TODO: Modify `racket-style' definition (and what it depends on) @; in "resources.rkt", possibly do something similar with the new files - @link[rel: "stylesheet" type: "text/css" href: style title: "default"] + @;@link[rel: "stylesheet" type: "text/css" href: style title: "default"] @; TODO: Edit the `more.css' definition in www/index.rkt @; More ideas for your here: h5bp.com/d/head-Tips @; All JavaScript at the bottom, except for Modernizr / Respond. @@ -240,7 +208,7 @@ @; a polyfill for min/max-width CSS3 Media Queries @; For optimal performance, use a custom Modernizr build: @; www.modernizr.com/download/ - @script[src: "js/libs/modernizr-2.6.2.min.js"] + @script[src: (resources "modernizr-2.6.2.min.js")] }) (define (make-resources files) diff --git a/new-racket-web/web/common/resources/css/gumby.css b/new-racket-web/web/common/resources/css/gumby.css index 0b4bdf6653..379bdc0df1 100644 --- a/new-racket-web/web/common/resources/css/gumby.css +++ b/new-racket-web/web/common/resources/css/gumby.css @@ -66,7 +66,7 @@ html, body { height: 100%; } .text-right { text-align: right; } /* Fonts */ -@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url(../fonts/icons/entypo.eot); src: url("../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("../fonts/icons/entypo.woff") format("woff"), url("../fonts/icons/entypo.ttf") format("truetype"); } +@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url(./entypo.eot); src: url("./entypo.eot?#iefix") format("ie9-skip-eot"), url("./entypo.woff") format("woff"), url("./entypo.ttf") format("truetype"); } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans"; font-weight: 500; color: black; text-rendering: optimizeLegibility; padding-top: 0.273em; line-height: 1.15538em; padding-bottom: 0.273em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #d04526; } diff --git a/new-racket-web/web/www/css/style.css b/new-racket-web/web/www/css/frontpage-style.css similarity index 89% rename from new-racket-web/web/www/css/style.css rename to new-racket-web/web/www/css/frontpage-style.css index 346b2f5955..c66c0043ca 100644 --- a/new-racket-web/web/www/css/style.css +++ b/new-racket-web/web/www/css/frontpage-style.css @@ -11,9 +11,9 @@ However, this blank file is available if you prefer #growboxes { margin-top: 10pt; } .panetitle { color: red; font-size: 120%; margin-bottom: 4pt } - pre.codesnip { font-size: 140%; } + .codesnip { display: none; } + .codesnip.active { display: block; } - .racketnav { display: none } .wide_only { display: block; } .narrow_only { display: none; } diff --git a/new-racket-web/web/www/index.rkt b/new-racket-web/web/www/index.rkt index e4bc73fc80..cb81d6c4b4 100644 --- a/new-racket-web/web/www/index.rkt +++ b/new-racket-web/web/www/index.rkt @@ -1,6 +1,7 @@ #lang meta/web (require "resources.rkt" "code.rkt" "download.rkt" "learning.rkt") +(require racket/format) (define (doc path . text) (apply a href: (list "http://docs.racket-lang.org/" path) text)) @@ -259,7 +260,7 @@ (when news-flashes (error 'set-news-flashes! "text already set")) (set! news-flashes text)) -(require racket/format) + (define (css url) @link[href: url rel: "stylesheet" type: "text/css"]{}) (define (icon name) @i[class: name]{}) (define (row . content) (apply div class: "row" content)) @@ -288,22 +289,6 @@ (define prev @img[src: (copyfile (in-here "img/prev.png")) style: "width: 50px"]) (define next @img[src: (copyfile (in-here "img/next.png")) style: "width: 50px"]) -(define gumby-css (copyfile (in-here "css/gumby.css") - "css/gumby.css")) -(define style (copyfile (in-here "css/style.css") - "css/style.css")) -(define scribble-css (copyfile (in-here "css/scribble.css") - "css/scribble.css")) -(define gumby-js (copyfile (in-here "js/libs/gumby.min.js"))) -(define plugins-js (copyfile (in-here"js/plugins.js"))) -(define main-js (copyfile (in-here "js/main.js"))) -(define jquery-js (copyfile (in-here "js/libs/jquery-1.9.1.min.js"))) - -(copyfile (in-here "fonts/icons/entypo.woff") "fonts/icons/entypo.woff") -(copyfile (in-here "fonts/icons/entypo.ttf") "fonts/icons/entypo.ttf") -(copyfile (in-here "fonts/icons/entypo.eot") "fonts/icons/entypo.eot") - - (provide index) (define index @@ -316,24 +301,14 @@ integrated development environment, and many batteries-included @; libraries.} @; Ask google to not use the ODP description - #:extra-headers @list{@meta[name: "robots" content: "NOODP"]{ -@div[class: "navbar" gumby-fixed: "top" id: "nav1"]{ - @row{ - @a[class: "toggle" gumby-trigger: "#nav1 > .row > ul" href: "#"]{ - @icon{icon-menu}} - @a[class: "five columns logo" href: ""]{ - @img[class: "logo" src: (copyfile (in-here "img/logo-new.png"))]} - @ul[class: "five columns"]{ - @li{@a[href: "https://pkg.racket-lang.org"]{Packages}} - @li{@a[href: "https://docs.racket-lang.org"]{Documentation}} - @li{@a[href: "https://blog.racket-lang.org"]{Blog}} - @li{@button[class: "medium metro info btn icon-left entypo icon-install"]{ - @a[href: "#"]{Download}}}}}} - + #:extra-headers @list{@css[(copyfile (in-here "css/frontpage-style.css"))] + @css[(copyfile (in-here "css/scribble.css"))] + @script[src: (copyfile (in-here "js/slideshow.js"))] + @meta[name: "robots" content: "NOODP"]}]{ @columns[10 #:row? #t #:center? #t]{ @h2[style: "font-size: 180%; margin-bottom: 10pt"]{ - @strong{Racket} @|nbsp mdash nbsp| - @tagline{a programmable programming language}}} + @strong{Racket} @|nbsp|@|mdash|@|nbsp| + @tagline{a programmable programming language}}} @columns[8 #:center? #t #:row? #t style: "margin-bottom: 10pt; font-size: 120%; text-align:justify;"]{ @@ -352,24 +327,25 @@ computing and from databases to charts. @h2[style: "font-size: 180%; margin-bottom: 10pt"]{Start Quickly} @div[style: "position: relative"]{ @p[class: "metro primary btn" - style: "position: absolute; top: -10%; right: 0%;"]{ - @a[href: "#" class: "switch" gumby-trigger: "#modal1"]{ + style: "position: absolute; top: -20%; right: 0%;"]{ + @a[href: "#" class: "switch question_button" gumby-trigger: "#modal1"]{ @icon["icon-help"]}} - @a[href: "#" class: "toggle narrow_only" + @a[href: "#" class: "toggle narrow_only prev_toggle" gumby-trigger: ".unique_lines|.web_scraper" style: "position: absolute; top: -40%; left: 35%"]{@prev} - @a[href: "#" class: "toggle narrow_only" + @a[href: "#" class: "toggle narrow_only next_toggle" gumby-trigger: ".unique_lines|.web_scraper" style: "position: absolute; top: -40%; right: 35%"]{@next} - @a[href: "#" class: "toggle wide_only" + @a[href: "#" class: "toggle wide_only prev_toggle" gumby-trigger: ".unique_lines|.web_scraper" style: "position: absolute; top: 40%; left: -15%"]{@prev} - @a[href: "#" class: "toggle wide_only" + @a[href: "#" class: "toggle wide_only next_toggle" gumby-trigger: ".unique_lines|.web_scraper" - style: "position: absolute; top: 40%; right: -15%"]{@next}}} + style: "position: absolute; top: 40%; right: -15%"]{@next} + @(apply slideshow-panel examples)}} @columns[1] @@ -549,8 +525,15 @@ File, query and maybe fix existing reports.}}} (set! button-ids+labels (cons (cons id txt) button-ids+labels)) (a href: "#" id: id onclick: (list onclick "; return false;") title: tip nbsp)) ; empty, filled by JS code, so JS-less browsers won't see it - (define next (img src: (copyfile (in-here "img/next.png")) width: 10)) - (define prev (img src: (copyfile (in-here "img/prev.png")) width: 10)) + ;(define next (img src: (copyfile (in-here "img/next.png")) width: 10)) + ;(define prev (img src: (copyfile (in-here "img/prev.png")) width: 10)) + + + (for/list ([elem (in-list l)] [pos (in-naturals)]) + @pre[style: "font-size: 140%;" + class: (append (list "codesnip") (if (zero? pos) (list " active") null)) + id: @list{codesnip@pos}]{@(example-code elem)}) + #; (div class: 'slideshow (div class: 'buttonpanel @button[prev "Previous example" 'rewindbutton "rewind_show()"] diff --git a/new-racket-web/web/www/js/slideshow.js b/new-racket-web/web/www/js/slideshow.js new file mode 100644 index 0000000000..8e9d8e587a --- /dev/null +++ b/new-racket-web/web/www/js/slideshow.js @@ -0,0 +1,39 @@ +onload = function() { + var elems = $(".codesnip"); + + console.log("in slideshow") + + var current = 0; + var last = elems.length; + var cur_elem = $("#codesnip"+current); + + var question = $(".question_button") + window.question = question; + function prev() { + console.log("in prev"); + console.log(question); + if (current === 0) return; + current -= 1; + cur_elem.removeClass('active') + var next_elem = $("#codesnip"+current); + next_elem.addClass('active') + cur_elem = next_elem; + question.attr("gumby-trigger","#modal"+current) + } + + function next() { + + if (current+1 === last) return; + current += 1; + console.log("in next " + current) + + cur_elem.removeClass('active') + var next_elem = $("#codesnip"+current); + next_elem.addClass('active') + cur_elem = next_elem; + question.attr("gumby-trigger","#modal"+current) + } + + $(".prev_toggle").on("click",prev); + $(".next_toggle").on("click",next); +};