Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add rudimentary SASS integration. #77

Merged
merged 1 commit into from Oct 2, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
@@ -1,6 +1,7 @@
.env
*.pyc
app/config/local_config.yml
app/static/css
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is where our generated SASS goes... It's confusing right now because we also have hand-written CSS in app/static/styles, but once we've fully moved over to claudio's CSS, I assume we'll get rid of that.

*.mo
.keys
backups
Expand Down
5 changes: 3 additions & 2 deletions app/factory.py
Expand Up @@ -10,7 +10,7 @@
from flask_security.utils import get_identity_attributes

from app import (csrf, cache, mail, bcrypt, s3, assets, security,
babel, celery, alchemydumps,
babel, celery, alchemydumps, sass,
QUESTIONNAIRES, NOI_COLORS, LEVELS, ORG_TYPES, QUESTIONS_BY_ID)
from app.config.schedule import CELERYBEAT_SCHEDULE
from app.forms import (NOIConfirmRegisterForm, NOIForgotPasswordForm,
Expand Down Expand Up @@ -288,8 +288,9 @@ def add_deployment_role(sender, **kwargs):
db.session.add(user)
db.session.commit()

return app
sass.init_app(app)

return app

def create_celery(app=None):
'''
Expand Down
1 change: 1 addition & 0 deletions app/requirements.txt
Expand Up @@ -32,3 +32,4 @@ simple-crypt==4.1.7
python-slugify==1.1.3
wtforms_alchemy
redis
libsass==0.8.3
28 changes: 28 additions & 0 deletions app/sass.py
@@ -0,0 +1,28 @@
from sassutils.wsgi import SassMiddleware
import sassutils.builder

SASS_DIR = 'static/sass'
CSS_DIR = 'static/css'

def init_app(app):
if app.config['DEBUG']:
# If we're debugging, we want to build SASS for each
# request so that we have a nice development flow:
#
# http://hongminhee.org/libsass-python/frameworks/flask.html
#
# However, because nginx intercepts everything at /static/, we can't
# have the SASS middleware use that path, so instead we'll
# put all compiled SASS in a different path that we have
# control over.
app.jinja_env.globals['COMPILED_SASS_ROOT'] = '/sass-middleware'
app.wsgi_app = SassMiddleware(app.wsgi_app, {
'app': (SASS_DIR, CSS_DIR,
app.jinja_env.globals['COMPILED_SASS_ROOT'])
})
else:
app.jinja_env.globals['COMPILED_SASS_ROOT'] = '/' + CSS_DIR

def build_files():
sassutils.builder.build_directory('/noi/app/' + SASS_DIR,
'/noi/app/' + CSS_DIR)
7 changes: 7 additions & 0 deletions app/static/sass/styles.scss
@@ -0,0 +1,7 @@
// This is just a sample SASS file.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The libsass-python Flask integration docs suggest putting all SASS in static/sass, which is what we're doing here, but I'm not sure how I actually feel about it, since I think of the static directory as stuff that the user's browser will ultimately request as-is, which isn't the case with SASS. I guess it's not really a big deal either way, though, and it's not hard to alter if we change our minds.


body {
html {
color: blue;
}
}
12 changes: 12 additions & 0 deletions app/templates/sass-test.html
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ COMPILED_SASS_ROOT }}/styles.scss.css">
<title>SASS Test</title>
<p>This is a SASS test.</p>
<p>
<code>COMPILED_SASS_ROOT</code> is <code>{{ COMPILED_SASS_ROOT }}</code>.
</p>
<p>
See compiled SASS at
<a href="{{ COMPILED_SASS_ROOT }}/styles.scss.css">{{ COMPILED_SASS_ROOT }}/styles.scss.cs</a>.
<p>
8 changes: 8 additions & 0 deletions app/tests/test_sass.py
@@ -0,0 +1,8 @@
from app import sass

def test_sass_compiles():
'''
Just build all our SASS files and make sure no errors are thrown.
'''

sass.build_files()
10 changes: 10 additions & 0 deletions app/views.py
Expand Up @@ -380,3 +380,13 @@ def feedback():
Feedback page.
'''
return render_template('feedback.html', **{})

@views.route('/sass-test')
def sass_test():
'''
This is just a temporary endpoint that we can test SASS
integration at. Once we actually use SASS for the whole site,
this route can be removed.
'''

return render_template('sass-test.html')
12 changes: 11 additions & 1 deletion manage.py
Expand Up @@ -4,7 +4,7 @@
Scripts to run the server and perform maintenance operations
'''

from app import mail, models, LEVELS, ORG_TYPES
from app import mail, models, sass, LEVELS, ORG_TYPES
from app.factory import create_app
from app.models import db, User
from app.utils import csv_reader
Expand Down Expand Up @@ -203,6 +203,16 @@ def populate_db():
load_fixture(password=encrypt_password('foobar'))
return 0

@manager.command
def build_sass():
"""
Build SASS files.
"""

print "Building SASS files..."
sass.build_files()
print "Done. Built SASS files are in app/%s." % sass.CSS_DIR
return 0

if __name__ == '__main__':
subprocess.call('../symlink-hooks.sh', shell=True)
Expand Down
1 change: 1 addition & 0 deletions run.sh
Expand Up @@ -18,6 +18,7 @@ if [ "$NOI_ENVIRONMENT" == production ]; then
cd /noi
python manage.py db upgrade
python manage.py translate_compile
python manage.py build_sass
gunicorn wsgi:application -b 0.0.0.0:5000
elif [ "$NOI_ENVIRONMENT" == celery ]; then
#cd /noi && celery worker -Q celery -A celery_core.celery --loglevel=debug
Expand Down