Skip to content
This repository has been archived by the owner on Feb 8, 2018. It is now read-only.

Commit

Permalink
Merge pull request #3787 from gratipay/scss-renderer
Browse files Browse the repository at this point in the history
reimplement CSS using a renderer
  • Loading branch information
webmaven committed Dec 15, 2015
2 parents afce174 + 9852a47 commit 870a6d1
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 88 deletions.
4 changes: 3 additions & 1 deletion gratipay/main.py
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
from gratipay.security import authentication, csrf, security_headers
from gratipay.utils import erase_cookie, http_caching, i18n, set_cookie, timer
from gratipay.version import get_version
from gratipay.renderers import csv_dump, jinja2_htmlescaped, eval_
from gratipay.renderers import csv_dump, jinja2_htmlescaped, eval_, scss

import aspen
from aspen.website import Website
Expand All @@ -27,8 +27,10 @@
website.renderer_factories['csv_dump'] = csv_dump.Factory(website)
website.renderer_factories['eval'] = eval_.Factory(website)
website.renderer_factories['jinja2_htmlescaped'] = jinja2_htmlescaped.Factory(website)
website.renderer_factories['scss'] = scss.Factory(website)
website.default_renderers_by_media_type['text/html'] = 'jinja2_htmlescaped'
website.default_renderers_by_media_type['text/plain'] = 'jinja2' # unescaped is fine here
website.default_renderers_by_media_type['text/css'] = 'scss'
website.default_renderers_by_media_type['image/*'] = 'eval'

website.renderer_factories['jinja2'].Renderer.global_context = {
Expand Down
43 changes: 43 additions & 0 deletions gratipay/renderers/scss.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
from __future__ import absolute_import, division, print_function, unicode_literals

import re
from urlparse import urlsplit

import sass
from aspen import renderers


class Renderer(renderers.Renderer):

def __init__(self, *a, **kw):
renderers.Renderer.__init__(self, *a, **kw)
self.website = self._factory._configuration

url_re = re.compile(r"""\burl\((['"])(.+?)['"]\)""")

def url_sub(self, m):
url = urlsplit(m.group(2))
if url.scheme or url.netloc:
# We need both tests because "//example.com" has no scheme and "data:"
# has no netloc. In either case, we want to leave the URL untouched.
return m.group(0)
repl = self.website.asset(url.path) \
+ (url.query and '&'+url.query) \
+ (url.fragment and '#'+url.fragment)
return 'url({0}{1}{0})'.format(m.group(1), repl)

def replace_urls(self, css):
return self.url_re.sub(self.url_sub, css)

def render_content(self, context):
output_style = 'compressed' if self.website.compress_assets else 'nested'
kw = dict(output_style=output_style, string=self.compiled)
if self.website.project_root is not None:
kw['include_paths'] = self.website.project_root
css = sass.compile(**kw)
if self.website.cache_static:
css = self.replace_urls(css)
return css

class Factory(renderers.Factory):
Renderer = Renderer
66 changes: 0 additions & 66 deletions scss/gratipay.scss

This file was deleted.

85 changes: 64 additions & 21 deletions www/assets/gratipay.css.spt
Original file line number Diff line number Diff line change
@@ -1,25 +1,68 @@
import os
import re
from urlparse import urlsplit
[---]
[---] text/css via scss
/*
This is the top of the Gratipay CSS tree.

import sass
Our code organization here was inspired by Brad Frost's Atomic Web Design:

filename = os.path.join(website.project_root, 'scss', 'gratipay.scss')
output_style = 'compressed' if website.compress_assets else 'nested'
http://bradfrost.com/blog/post/atomic-web-design/

def url_sub(m):
url = urlsplit(m.group(2))
if url.scheme or url.netloc:
# We need both tests because "//example.com" has no scheme and "data:"
# has no netloc. In either case, we want to leave the URL untouched.
return m.group(0)
repl = website.asset(url.path) + (url.query and '&'+url.query) + (url.fragment and '#'+url.fragment)
return 'url({0}{1}{0})'.format(m.group(1), repl)
We dropped the "atomic" metaphor and tried to use nomenclature consistent
with how the W3C talks about HTML.

url_re = re.compile(r"""\burl\((['"])(.+?)['"]\)""")
[---]
css = sass.compile(output_style=str(output_style),filename=str(filename))
if website.cache_static:
css = url_re.sub(url_sub, css)
[---] via stdlib_format
{css}
*/

@import "scss/mixins/layout";
@import "scss/mixins/icons";
@import "scss/mixins/borders-backgrounds-shadows";
@import "scss/mixins/animation";
@import "scss/mixins/transform";
@import "scss/utils";
@import "scss/variables";

@import "scss/elements/reset";
@import "scss/elements/buttons-knobs";
@import "scss/elements/elements";

@import "scss/components/banner";
@import "scss/components/chart";
@import "scss/components/chosen";
@import "scss/components/communities";
@import "scss/components/cta";
@import "scss/components/dropdown";
@import "scss/components/emails";
@import "scss/components/js-edit";
@import "scss/components/linear_gradient";
@import "scss/components/loading-indicators";
@import "scss/components/memberships";
@import "scss/components/nav";
@import "scss/components/payments-by";
@import "scss/components/profile-statement";
@import "scss/components/sidebar";
@import "scss/components/sign_in";
@import "scss/components/status-icon";
@import "scss/components/support_gratipay";
@import "scss/components/table";
@import "scss/components/tip-distribution";
@import "scss/components/tipr";
@import "scss/components/upgrade";

@import "scss/fragments/accounts";
@import "scss/fragments/members";
@import "scss/fragments/mini-user";
@import "scss/fragments/notifications";
@import "scss/fragments/pagination";

@import "scss/layouts/layout";
@import "scss/layouts/responsiveness";

@import "scss/pages/homepage";
@import "scss/pages/history";
@import "scss/pages/team";
@import "scss/pages/profile-edit";
@import "scss/pages/giving";
@import "scss/pages/settings";
@import "scss/pages/cc-ba";
@import "scss/pages/on-confirm";
@import "scss/pages/search";
@import "scss/pages/hall-of-fame";

0 comments on commit 870a6d1

Please sign in to comment.