From 8ff7a162db60b634878f5c10e756f82bdf617b16 Mon Sep 17 00:00:00 2001 From: Eli Barzilay Date: Mon, 14 Jun 2010 14:24:12 -0400 Subject: [PATCH] Added a blogger template. This required refactoring some of the layout code to make it possible to embed pieces of it in the template. --- collects/meta/web/common/layout.rkt | 50 +- collects/meta/web/common/resources.rkt | 119 +-- collects/meta/web/stubs/blog.rkt | 1073 +++++++++++++++++++++++- collects/meta/web/www/shared.rkt | 3 + 4 files changed, 1171 insertions(+), 74 deletions(-) diff --git a/collects/meta/web/common/layout.rkt b/collects/meta/web/common/layout.rkt index fa1946412a..5e20946d70 100644 --- a/collects/meta/web/common/layout.rkt +++ b/collects/meta/web/common/layout.rkt @@ -126,8 +126,8 @@ nav)))) (force pages-promise))))) (lambda (this) - (div class: 'navbar - (div class: 'titlecontent + (div class: 'racketnav + (div class: 'navcontent (table border: 0 cellspacing: 0 cellpadding: 0 width: "100%" (tr (header-cell logo) (td class: 'helpiconcell @@ -158,26 +158,36 @@ ;; site) to have its own resources (and possibly other customizations). (provide define+provide-context define-context) (define-for-syntax (make-define+provide-context stx provide?) + (define (make-it dir [icon #f] [logo #f] [style #f]) + (with-syntax ([dir dir] + [page-id (datum->syntax stx 'page)] + [plain-id (datum->syntax stx 'plain)] + [copyfile-id (datum->syntax stx 'copyfile)] + [symlink-id (datum->syntax stx 'symlink)] + [resources-id (datum->syntax stx 'the-resources)]) + (with-syntax + ([icon (or icon #'(make-icon dir))] + [logo (or logo #`(make-logo dir))] + [style (or style #`(make-style dir))] + [provides (if provide? + #'(provide page-id plain-id copyfile-id symlink-id) + #'(begin))]) + #'(begin + (define resources-id (make-resources icon logo style)) + (define-syntax-rule (page-id . xs) + (page #:resources resources-id #:dir dir . xs)) + (define-syntax-rule (plain-id . xs) + (plain #:dir dir . xs)) + (define (copyfile-id source [target #f] [referrer values]) + (copyfile-resource source target referrer #:dir dir)) + (define (symlink-id source [target #f] [referrer values]) + (symlink-resource source target referrer #:dir dir)) + provides)))) (syntax-case stx () [(_ dir) - (with-syntax ([page-id (datum->syntax stx 'page)] - [plain-id (datum->syntax stx 'plain)] - [copyfile-id (datum->syntax stx 'copyfile)] - [symlink-id (datum->syntax stx 'symlink)]) - #`(begin - (define resources - (make-resources (make-icon dir) (make-logo dir) (make-style dir))) - (define-syntax-rule (page-id . xs) - (page #:resources resources #:dir dir . xs)) - (define-syntax-rule (plain-id . xs) - (plain #:dir dir . xs)) - (define (copyfile-id source [target #f] [referrer values]) - (copyfile-resource source target referrer #:dir dir)) - (define (symlink-id source [target #f] [referrer values]) - (symlink-resource source target referrer #:dir dir)) - #,@(if provide? - #'((provide page-id plain-id copyfile-id symlink-id)) - '())))])) + (make-it #'dir)] + [(_ dir #:resources icon logo style) + (make-it #'dir #'icon #'logo #'style)])) (define-syntax (define+provide-context stx) (make-define+provide-context stx #t)) (define-syntax (define-context stx) diff --git a/collects/meta/web/common/resources.rkt b/collects/meta/web/common/resources.rkt index fe63a84b6b..c7a173ca65 100644 --- a/collects/meta/web/common/resources.rkt +++ b/collects/meta/web/common/resources.rkt @@ -8,7 +8,7 @@ (require "utils.ss") -(provide make-logo make-icon make-style) +(provide make-logo make-icon make-style navbar-style) (define ((make-file-copier file) dir) (copyfile-resource (in-here file) (web-path dir file))) @@ -18,10 +18,73 @@ (define (make-style dir) (resource (web-path dir "plt.css") - (file-writer output (list the-style "\n")) + (file-writer output (list racket-style "\n")) (lambda (url) (link rel: "stylesheet" type: "text/css" href: url title: "default")))) -(define the-style + +(define page-style + @text{ + margin-left: auto; + margin-right: auto; + width: 45em; + }) +(define font-style + @text{ + font-family: Optima, Arial, Verdana, Helvetica, sans-serif; + }) + +(define navbar-style + ;; All of these are made to apply only inside `racketnav', so the styles can + ;; be used in places with their own CSS (eg, blog.racket-lang.org) + @text{ + .racketnav { + background-color: #000; + color: #fff; + margin-bottom: 1em; + padding: 0.5em 0em; + white-space: nowrap; + } + .racketnav a { + color: #fff; + text-decoration: none; + } + .racketnav .navcontent { + @page-style + @font-style + } + .racketnav .navtitle { + font-size: xx-large; + font-weight: bold; + } + .racketnav .navitem { + text-decoration: none; + font-size: 88%; + } + .racketnav .navlink a { + padding: 0em 1em; + } + .racketnav .navcurlink a { + padding: 0em 1em; + background-color: #555; + } + .racketnav .navlink a:hover, + .racketnav .navcurlink a:hover { + background-color: #888; + } + .racketnav .navlinkcell { + text-align: center; + } + .racketnav .helpiconcell { + text-align: right; + vertical-align: top; + } + .racketnav .helpicon { + font-weight: bold; + font-size: 88%; + } + }) + +(define racket-style @text{ @; ---- generic styles ---- html { @@ -30,7 +93,7 @@ body { color: black; background-color: white; - font-family: Optima, Arial, Verdana, Helvetica, sans-serif; + @font-style margin: 0px; padding: 0px; } @@ -41,53 +104,11 @@ text-decoration: underline; } @; ---- content styles ---- - .titlecontent, .bodycontent { - margin-left: auto; - margin-right: auto; - width: 45em; + .bodycontent { + @page-style } @; ---- styles for the navbar ---- - .navbar { - background-color: #000; - color: #fff; - margin-bottom: 1em; - padding: 0.5em 0em; - white-space: nowrap; - } - .navbar a { - color: #fff; - text-decoration: none; - } - .navtitle { - font-size: xx-large; - font-weight: bold; - } - .navitem { - text-decoration: none; - font-size: 88%; - } - .navlink a { - padding: 0em 1em; - } - .navcurlink a { - padding: 0em 1em; - background-color: #555; - } - .navlink a:hover, - .navcurlink a:hover { - background-color: #888; - } - .navlinkcell { - text-align: center; - } - .helpiconcell { - text-align: right; - vertical-align: top; - } - .helpicon { - font-weight: bold; - font-size: 88%; - } + @navbar-style @; ---- styles for extras ---- .parlisttitle { margin-bottom: 0.5em; diff --git a/collects/meta/web/stubs/blog.rkt b/collects/meta/web/stubs/blog.rkt index 9b9adb15e9..48075a9537 100644 --- a/collects/meta/web/stubs/blog.rkt +++ b/collects/meta/web/stubs/blog.rkt @@ -1,10 +1,1073 @@ #lang at-exp s-exp "../common.rkt" -(define-context "stubs/blog") +(define-context "stubs/blog" #:resources "icon" "logo" "style") + +(require "../common/resources.rkt" + (prefix-in www: (only-in "../www/shared.rkt" the-resources)) + racket/port) + +(define racket-css + @text{ + @;{ + Instead of hiding the blogger navbar (and eliminate what it is used for), + just make it appear below the Racket bar, and make it transparent. The + next one is supposed to make it get back to being opaque when the mouse + hovers on it, but it doesn't seem to work on IE. + ;} + #navbar-iframe { + position: absolute; + top: 154px; right: 0px; + opacity: 0.33; filter: alpha(opacity=33); + } + #navbar-iframe:hover { + opacity: 1.0; filter: alpha(opacity=100); + } + /* --- navbar styles --- */ + @navbar-style + }) + +(define (racket-navbar) + (with-output-to-string + (lambda () (output-xml (www:the-resources 'navbar #f))))) (provide blog) (define blog - @page[#:file "" - ;; #:part-of community <-- TODO: is doing this a good idea - ]{ - This is a stub page to get the header for the blog.}) + @plain[#:file "" + #:referrer (lambda (u) @a[href: u]{Blog}) + ;; #:part-of community <-- TODO: is doing this a good idea + ]{ +@; This is the blogger style template file a little customized by soegaard and +@; then by eli, with one hole for the CSS, and one for the navbar +@; + + + + + +<data:blog.pageTitle/> + + + + + + + + + + + + + + + +*/ + +/* Use this with templates/template-twocol.html */ + +body { + background: $bgcolor; + margin: 0; + color: $textcolor; + font: x-small Georgia Serif; + font-size/* */:/**/small; + font-size: /**/small; + text-align: center; + } +a:link { + color: $linkcolor; + text-decoration: none; +} +a:visited { + color: $visitedlinkcolor; + text-decoration: none; +} +a:hover { + color: $titlecolor; + text-decoration: underline; +} +a img { + border-width: 0; +} + +/* Header +----------------------------------------------- +*/ + +#header-wrapper { + width: 800px; /* this used to be 660 [soegaard,eli] */ + margin: 0 auto 10px; + border: 1px solid $bordercolor; +} + +#header-inner { + background-position: center; + margin-left: auto; + margin-right: auto; +} + +#header { + margin: 5px; + border: 1px solid $bordercolor; + text-align: center; + color: $pagetitlecolor; +} + +#header h1 { + margin: 5px 5px 0; + padding:15px 20px .25em; + line-height: 1.2em; + text-transform: uppercase; + letter-spacing: .2em; + font: $pagetitlefont; +} + +#header a { + color: $pagetitlecolor; + text-decoration: none; +} + +#header a:hover { + color: $pagetitlecolor; +} + +#header .description { + margin: 0 5px 5px; + padding: 0 20px 15px; + max-width: 840px; /* this used to be 700 [soegaard] */ + text-transform: uppercase; + letter-spacing: .2em; + line-height: 1.4em; + font: $descriptionfont; + color: $descriptioncolor; +} + +#header img { + margin-left: auto; + margin-right: auto; +} + +/* Outer-Wrapper +----------------------------------------------- */ +#outer-wrapper { + width: 800px; /* used to be 660 [soegaard] */ + margin: 0 auto; + padding: 10px; + text-align: left; + font: $bodyfont; + } + +#main-wrapper { + width: 550px; /* used to be 410 [soegaard] */ + float: left; + word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ + overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ + } + +#sidebar-wrapper { + width: 220px; + float: right; + word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ + overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ +} + + +/* Headings +----------------------------------------------- */ + +h2 { + margin: 1.5em 0 .75em; + font: $headerfont; + line-height: 1.4em; + text-transform: uppercase; + letter-spacing: .2em; + color: $sidebarcolor; +} + + +/* Posts +----------------------------------------------- + */ +h2.date-header { + margin: 1.5em 0 .5em; +} + +.post { + margin: .5em 0 1.5em; + border-bottom: 1px dotted $bordercolor; + padding-bottom: 1.5em; +} +.post h3 { + margin: .25em 0 0; + padding: 0 0 4px; + font-size: 140%; + font-weight: normal; + line-height: 1.4em; + color: $titlecolor; +} + +.post h3 a, .post h3 a:visited, .post h3 strong { + display: block; + text-decoration: none; + color: $titlecolor; + font-weight: normal; +} + +.post h3 strong, .post h3 a:hover { + color: $textcolor; +} + +.post p { + margin: 0 0 .75em; + line-height: 1.6em; +} + +.post-footer { + margin: .75em 0; + color: $sidebarcolor; + text-transform: uppercase; + letter-spacing: .1em; + font: $postfooterfont; + line-height: 1.4em; +} + +.comment-link { + margin-left: .6em; +} +.post img { + padding: 4px; + border: 1px solid $bordercolor; +} +.post blockquote { + margin: 1em 20px; +} +.post blockquote p { + margin: .75em 0; +} + +.post-header-line-1 { /* add some vertical space after author [soegaard] */ + margin-bottom: .6em; + font-style: italic; +} + +/* Comments +----------------------------------------------- */ +#comments h4 { + margin: 1em 0; + font-weight: bold; + line-height: 1.4em; + text-transform: uppercase; + letter-spacing: .2em; + color: $sidebarcolor; +} + +#comments-block { + margin: 1em 0 1.5em; + line-height: 1.6em; +} +#comments-block .comment-author { + margin: .5em 0; +} +#comments-block .comment-body { + margin: .25em 0 0; +} +#comments-block .comment-footer { + margin: -.25em 0 2em; + line-height: 1.4em; + text-transform: uppercase; + letter-spacing: .1em; +} +#comments-block .comment-body p { + margin: 0 0 .75em; +} +.deleted-comment { + font-style: italic; + color: gray; +} + +#blog-pager-newer-link { + float: left; +} + +#blog-pager-older-link { + float: right; +} + +#blog-pager { + text-align: center; +} + +.feed-links { + clear: both; + line-height: 2.5em; +} + +/* Sidebar Content +----------------------------------------------- */ +.sidebar { + color: $sidebartextcolor; + line-height: 1.5em; +} + +.sidebar ul { + list-style: none; + margin: 0 0 0; + padding: 0 0 0; +} +.sidebar li { + margin: 0; + padding: 0 0 .25em 15px; + text-indent: -15px; + line-height: 1.5em; +} + +.sidebar .widget, .main .widget { + border-bottom: 1px dotted $bordercolor; + margin: 0 0 1.5em; + padding: 0 0 1.5em; +} + +.main .Blog { + border-bottom-width: 0; +} + + +/* Profile +----------------------------------------------- */ +.profile-img { + float: left; + margin: 0 5px 5px 0; + padding: 4px; + border: 1px solid $bordercolor; +} + +.profile-data { + margin: 0; + text-transform: uppercase; + letter-spacing: .1em; + font: $postfooterfont; + color: $sidebarcolor; + font-weight: bold; + line-height: 1.6em; +} + +.profile-datablock { + margin: .5em 0 .5em; +} + +.profile-textblock { + margin: 0.5em 0; + line-height: 1.6em; +} + +.profile-link { + font: $postfooterfont; + text-transform: uppercase; + letter-spacing: .1em; +} + +/* Colors for highlighting via http://www.scheme.dk/paste/ */ + +.scheme { color: brown; margin: 4pt; } /* background punctuation */ +.scheme .keyword { color: rgb(68,0,203); font-weight: bold; } +.scheme .builtin { color: navy; } +.scheme .variable { color: black; } +.scheme .global { color: purple; } +.scheme .selfeval { color: green; } +.scheme .comment { color: teal; } + +/* Footer +----------------------------------------------- */ +#footer { + width: 660px; + clear: both; + margin: 0 auto; + padding-top: 15px; + line-height: 1.6em; + text-transform: uppercase; + letter-spacing: .1em; + text-align: center; +} + +/** Page structure tweaks for layout editor wireframe */ +body#layout #header { + margin-left: 0px; + margin-right: 0px; +} + +/*** Racket CSS begin ***/ +@racket-css +/*** Racket CSS end ***/ + +]]> + + + + + +@racket-navbar + + +
+ + + + +
+ +
+ +
+ +
+ + + +
+ + + + + + + + + + + +
+
+ + + + + + + + + + + +

+ +
+ +
+
+   + + +
+
+ +
+
+ + +
+
+ +
+ +

+ +

+ + +
+ + +

+ + + + + + + + + +

+ + +
+ + + + + + + + + + +
+ +
+

+
+
+
+

+ + + + 1 + + + + + + + + + + + + + + +

+ +

+ + + + , + + +

+ +

+

+
+ + + +
+
+ +
+
+
+
+
+
+
+
+ + + +
+ +

+

+ + +