Add webassets project
Webassets enables SCSS compilation and asset minification
The pelican-assets plugin was added to integrate it into Pelican
diff --git a/.gitmodules b/.gitmodules
index 2c5f24e..da4e0da 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,6 @@
[submodule "static/js/lw-timeago"]
path = static/js/lw-timeago
url = https://github.com/pR0Ps/lw-timeago.git
+[submodule "plugins/assets"]
+ path = plugins/assets
+ url = https://github.com/pR0Ps/pelican-assets.git
diff --git a/Makefile b/Makefile
deleted file mode 100644
index 788be42..0000000
--- a/Makefile
+++ /dev/null
@@ -1,15 +0,0 @@
-# Install using:
-#
-# pip install pygments
-#
-# built in styles: ['monokai', 'manni', 'rrt', 'perldoc', 'borland', 'colorful',
-# 'default', 'murphy', 'vs', 'trac', 'tango', 'fruity', 'autumn', 'bw', 'emacs',
-# 'vim', 'pastie', 'friendly', 'native']
-
-STYLE = default
-
-pygments:
- pygmentize -S ${STYLE} -f html > ./static/css/pygments.css
-
-style:
- lessc static/css/style.less > static/css/style.css
diff --git a/README.md b/README.md
index ee868f8..fabf62f 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
## Demo
-You can see the theme in action on [my site](http://cmetcalfe.ca/).
+You can see the theme in action on [my site](http://cmetcalfe.ca/) ([site source code](https://github.com/pR0Ps/website)).
@@ -14,18 +14,36 @@
- Clean, responsive design. Scales to fit any screen
- Fully HTML5 complient
- Fully usable without Javascript (although enabling it adds more functionality)
-- Profile image and tagline
- Ability to hide email addresses from spambots
- Syntax highlighting for code blocks
- Integrated Google Analytics
-- Supports custom sidebar links and social icons
+- Custom sidebar links and social icons
- Fuzzy date display (ex: "Posted 2 days ago") using Javascript
- Disqus comment integration
+- Automatically minifies and compresses Javascript and CSS
+
+## Dependencies
+
+For automatic minification and compression of assets, this theme uses the
+[webassets](https://webassets.readthedocs.org/) package, along with `cssmin` for
+minifying css, `slimit` for compressing Javascript, and `libsass` for
+compiling the [SCSS](http://www.sass-lang.com) styles.
+
+- All these can be installed with `pip` by running `pip install -r requirements.txt`
+
+Additionally, to integrate the `webassets` package into pelican, the [pelican-assets plugin](https://github.com/pR0Ps/pelican-assets)
+is required. It's included in this repo as a submodule so it just needs to be
+activated in `pelicanconf.py`.
+
+- Add `"<theme dir>/plugins"` to the `PLUGIN_PATHS` list (or `os.path.join("<theme dir>", "plugins")` if you're feeling Pythonic)
+- Add `"assets"` to the `PLUGINS` list
## Installing
-1. Clone the [repository](https://github.com/pR0Ps/pelican-subtle) making sure to get the submodules (ex: `git clone --recursive [repo]`)
-2. Edit `pelicanconf.py` and modify the `THEME` variable to point to the downloaded theme location.
+1. Clone [this repository](https://github.com/pR0Ps/pelican-subtle) making sure to get the submodules (ex: `git clone --recursive <repo>`)
+2. Install and configure the required dependencies (see above)
+3. Modify the `THEME` variable in `pelicanconf.py` to point to the cloned theme location
+4. Customize the theme using the options below
## pelicanconf.py
@@ -42,7 +60,6 @@
- `MANGLE_EMAILS`: If enabled, any emails in the `SOCIAL` or `LINKS` lists will be obfuscated in HTML and have their links generated by Javascript when the page loads.
- `GLOBAL_KEYWORDS`: A list of strings that will be set as meta keywords for each page.
- `FUZZY_DATES`: If `True`, uses [lw-timeago](https://github.com/pR0Ps/lw-timeago) to display fuzzy dates on articles (eg. 'Posted 3 months ago').
-- `SERVER_LESS`: If `True`, `static/css/style.css` will be used as the style (compile it server-side). Otherwise `static/css/style.less` will be compiled client-side with `less.js`.
## Authors
diff --git a/plugins/assets b/plugins/assets
new file mode 160000
index 0000000..887049d
--- /dev/null
+++ b/plugins/assets
@@ -0,0 +1 @@
+Subproject commit 887049d504fadea0340a7eb41e44246de3b9aa51
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..9d47b3e
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,6 @@
+# Update when 0.11 is released (needed for slimit and libsass support)
+webassets==dev
+
+cssmin==0.2.0
+libsass==0.7.0
+slimit==0.8.1
diff --git a/static/css/style.less b/static/css/style.scss
similarity index 61%
rename from static/css/style.less
rename to static/css/style.scss
index 8d8668c..c5eacd5 100644
--- a/static/css/style.less
+++ b/static/css/style.scss
@@ -1,67 +1,67 @@
@charset "UTF-8";
-@black: #000000;
-@white: #ffffff;
-@light-grey: #eeeeee;
-@med-grey: #5f5f5f;
-@dark-grey: #202020;
+$black: #000000;
+$white: #ffffff;
+$light-grey: #eeeeee;
+$med-grey: #5f5f5f;
+$dark-grey: #202020;
-@code-border: #c7c7c7;
-@code-background: #f6f6f6;
-@code-linebg: #dddddd;
+$code-border: #c7c7c7;
+$code-background: #f6f6f6;
+$code-linebg: #dddddd;
-@blue: #0e94ec;
-@accent: @blue;
+$blue: #0e94ec;
+$accent: $blue;
-@import (css) "//fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono";
-@sans: 'Ubuntu', sans-serif;
-@mono: 'Ubuntu Mono', monospace;
+@import url("//fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono");
+$sans: 'Ubuntu', sans-serif;
+$mono: 'Ubuntu Mono', monospace;
-@border_color: #c2c2c2;
-@pag_label_size: 60px;
-@logo_size: 150px;
+$border_color: #c2c2c2;
+$pag_label_size: 60px;
+$logo_size: 150px;
-@content_size: 640px;
-@horiz_pad: 40px;
+$content_size: 640px;
+$horiz_pad: 40px;
//The minimum size the screen can be without scaling the main content
-@min_screen: floor(((@content_size + @horiz_pad * 2) * 1.33));
+$min_screen: floor((($content_size + $horiz_pad * 2) * 1.33));
body {
margin: 0;
padding: 0;
- background-color: @white;
- color: @dark-grey;
- font-family: @sans;
+ background-color: $white;
+ color: $dark-grey;
+ font-family: $sans;
font-size: 16px;
min-width: 300px;
}
a {
- color: @black;
+ color: $black;
text-decoration: none;
}
a[href]:not(.nohover) {
&:hover{
- color: @accent;
+ color: $accent;
}
}
hr {
- background-color: @border_color;
+ background-color: $border_color;
height: 1px;
border: none;
}
aside {
div#user_meta {
- padding: @horiz_pad 20px @horiz_pad 20px;
+ padding: $horiz_pad 20px $horiz_pad 20px;
text-align: center;
img#logo {
- width: @logo_size;
- height: @logo_size;
+ width: $logo_size;
+ height: $logo_size;
border-radius: 50%;
}
@@ -114,11 +114,11 @@
margin: auto;
header {
- padding: 0px @horiz_pad 0px @horiz_pad;
- border-top: @border_color 1px solid;
- border-bottom: @border_color 1px solid;
+ padding: 0px $horiz_pad 0px $horiz_pad;
+ border-top: $border_color 1px solid;
+ border-bottom: $border_color 1px solid;
text-align: center;
- color: @med-grey;
+ color: $med-grey;
p {
font-weight: bold;
@@ -127,22 +127,22 @@
}
p#header {
- color: @black;
+ color: $black;
}
p:not(#header){
a {
- color: @med-grey;
+ color: $med-grey;
&:hover{
- color: @accent;
+ color: $accent;
}
}
}
}
article {
- padding: 10px @horiz_pad 10px @horiz_pad;
- max-width: @content_size;
+ padding: 10px $horiz_pad 10px $horiz_pad;
+ max-width: $content_size;
margin: auto;
div.article_title {
@@ -154,20 +154,20 @@
text-decoration: underline;
}
- @codeformat: {
+ @mixin codeformat {
color: black;
font-size: 14px;
- font-family: @mono;
- };
+ font-family: $mono;
+ }
code {
- @codeformat();
+ @include codeformat;
padding: 2px 3px;
- background: @light-grey;
+ background: $light-grey;
}
pre {
- @codeformat();
+ @include codeformat;
line-height: 1.125em;
margin-bottom: 0px;
margin-top: 0px;
@@ -178,16 +178,16 @@
div.highlight pre {
padding-left: 10px;
overflow-x: auto;
- border: 1px solid @code-border;
- border-left: 3px solid @accent;
- background: @code-background;
+ border: 1px solid $code-border;
+ border-left: 3px solid $accent;
+ background: $code-background;
}
/* Line numbers are enabled*/
table.highlighttable {
table-layout: fixed;
width: 100%;
- border: 1px solid @code-border;
+ border: 1px solid $code-border;
border-collapse: collapse;
pre {
@@ -202,9 +202,9 @@
width: 30px;
overflow: hidden;
text-align: right;
- border-left: 3px solid @accent;
- border-right: 1px solid @code-border;
- background: @code-linebg;
+ border-left: 3px solid $accent;
+ border-right: 1px solid $code-border;
+ background: $code-linebg;
vertical-align:top;
div.linenodiv pre {
@@ -219,12 +219,12 @@
border-width: 1px 1px 1px 7px;
border-radius: 10px;
border-style: solid;
- border-color: @code-border;
- border-left-color: @dark-grey;
- background-color: @code-background;
+ border-color: $code-border;
+ border-left-color: $dark-grey;
+ background-color: $code-background;
&.update, &.hint, &.important, &.note, &.tip {
- border-left-color: @accent;
+ border-left-color: $accent;
}
&.warning, &.attention, &.caution, &.danger {
@@ -240,40 +240,21 @@
text-transform: uppercase;
font-weight: bold;
padding: 5px 15px;
- border-bottom: 1px solid @code-border;
+ border-bottom: 1px solid $code-border;
}
}
blockquote {
margin: 22px 2px 22px 2px;
- padding-left: @horiz_pad;
- color: @med-grey;
+ padding-left: $horiz_pad;
+ color: $med-grey;
font-style: italic;
}
-
- .footnote-reference {
- vertical-align: super;
- font-size: 12px;
- text-decoration: none;
- line-height: 1;
- }
-
- .footnote {
- font-size: smaller;
- .fn-backref{
- margin-right: 5px;
- text-decoration: none;
- }
- }
- }
-
- div.gist {
- line-height: .875em;
}
div.article_meta {
font-size: 12px;
- color: @med-grey;
+ color: $med-grey;
}
div#article_comments{
@@ -287,8 +268,8 @@
}
footer {
- border-top: @border_color 1px solid;
- padding: 30px @horiz_pad 30px @horiz_pad;
+ border-top: $border_color 1px solid;
+ padding: 30px $horiz_pad 30px $horiz_pad;
div#paginator {
font-weight: bold;
@@ -302,7 +283,7 @@
}
span {
- width: @pag_label_size;
+ width: $pag_label_size;
}
span#left {
@@ -318,14 +299,14 @@
}
div#ending_message {
- border-top: @border_color 1px solid;
- padding: 0 @horiz_pad 0 @horiz_pad;
- color: @med-grey;
+ border-top: $border_color 1px solid;
+ padding: 0 $horiz_pad 0 $horiz_pad;
+ color: $med-grey;
font-size: 10px;
}
}
-@media screen and (min-width: @min_screen) {
+@media screen and (min-width: $min_screen) {
aside {
width: 25%;
height: 100%;
@@ -350,24 +331,24 @@
left: 25%;
width: 75%;
margin-left: -1px;
- border-left: @border_color 1px solid;
+ border-left: $border_color 1px solid;
overflow-x: hidden;
overflow-y: hidden;
header {
- padding: 10px @horiz_pad 10px @horiz_pad;
+ padding: 10px $horiz_pad 10px $horiz_pad;
border-top: 0;
text-align: left;
}
article {
- width: @content_size;
+ width: $content_size;
margin: 0;
}
footer{
div#paginator {
- width: @content_size;
+ width: $content_size;
}
}
}
diff --git a/templates/article.html b/templates/article.html
index 0a7c43b..7940c11 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -8,7 +8,9 @@
{{article.tags|join(', ') }}">
{% if FUZZY_DATES %}
- <script src="{{ SITEURL }}/theme/js/lw-timeago/lw-timeago.js" type="text/javascript"></script>
+ {% assets filters="slimit", output="js/lw-timeago.min.js", "js/lw-timeago/lw-timeago.js" %}
+ <script src="{{ SITEURL }}/{{ ASSET_URL }}" type="text/javascript"></script>
+ {% endassets%}
{% endif %}
{% endblock %}
diff --git a/templates/base.html b/templates/base.html
index de81270..3123615 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,21 +2,16 @@
<html lang="{{ DEFAULT_LANG }}">
<head>
- {% if SERVER_LESS %}
- <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/style.css">
- {% else %}
- <link rel="stylesheet/less" type="text/css" href="{{ SITEURL }}/theme/css/style.less">
- <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js" type="text/javascript"></script>
- {% endif %}
-
- <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/pygments.css">
- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="{{ AUTHOR }}">
<meta name="description" content="{% block description %}Posts by {{ AUTHOR }}{% endblock %}">
+ {% assets filters="libsass,cssmin", output="css/style.min.css", "css/style.scss", "css/pygments.css" %}
+ <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ ASSET_URL }}">
+ {% endassets %}
+ <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
{% if FEED_ALL_ATOM %}
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
{% endif %}