feat(curtana): heading background customization support (finally)

TODOS.md

@@ -1,3 +1,4 @@
 # Todos
 
-- try load-grunt-config
+- Try load-grunt-config
+- Cleanup thumb fetching method for `amsf_page_thumb` in `_amsf.html`

_app/_includes/_amsf.html

@@ -211,13 +211,32 @@
   {{ hero_image }}
 {% endcapture %}
 
+{% comment %}
+  Page background image
+  Regex: https://regex101.com/r/AmwvYE/2
+{% endcomment %}
+{% capture amsf_page_heading_bg_image_src %}
+  {% assign protocal = page.heading-bg | match_regex: '^((?:https?:)?\/\/)' %}
+  {% if protocal == null %}
+    {% if page.heading-bg-local %}
+      {{ amsf_user_assets | prepend: amsf_site_base }}/{{ page.heading-bg }}
+    {% else %}
+      {{ site.file }}/{{ page.heading-bg }}
+    {% endif %}
+  {% else %}
+    {{ page.heading-bg }}
+  {% endif %}
+{% endcapture %}
+
 {% capture amsf_page_thumb %}
   {% if page.thumb_force_logo %}
     {{ amsf_site_logo }}
   {% elsif page.thumb %}
     {{ site.file }}/thumb/{{ page.thumb }}
   {% elsif page.thumb_url %}
     {{ page.thumb_url }}
+  {% elsif page.heading-bg %}
+    {{ amsf_page_heading_bg_image_src }}
   {% else %}
     {{ amsf_post_first_image }}
   {% endif %}

_app/_includes/themes/curtana/layouts/post.html

@@ -60,11 +60,65 @@
   {% endif %}
 {% endcapture %}
 
+<!-- Prepare for heading background -->
+{% capture amsf_page_heading_bg_image %}
+  {% assign protocal = page.heading-bg | match_regex: '^((?:https?:)?\/\/)' %}
+  {% if protocal == null %}
+    {% if page.heading-bg-local %}
+      background-image: url('{{ amsf_user_assets }}/{{ page.heading-bg }}');
+    {% else %}
+      background-image: url('{{ site.file }}/{{ page.heading-bg }}');
+    {% endif %}
+  {% else %}
+    background-image: url('{{ page.heading-bg }}');
+  {% endif %}
+{% endcapture %}
+
+{% capture amsf_page_heading_bg_color %}
+  {% if page.heading-bg-color %}
+    background-color: {{ page.heading-bg-color }};
+  {% endif %}
+{% endcapture %}
+
+{% capture amsf_page_heading_bg_size %}
+  {% if page.heading-bg-size %}
+    background-size: {{ page.heading-bg-size }};
+  {% else %}
+    background-size: cover;
+  {% endif %}
+{% endcapture %}
+
+{% capture amsf_page_heading_bg_position %}
+  {% if page.heading-bg-position %}
+    background-position: {{ page.heading-bg-position }};
+  {% else %}
+    background-position: center center;
+  {% endif %}
+{% endcapture %}
+
+{% capture amsf_page_heading_bg_repeat %}
+  {% if page.heading-bg-position %}
+    background-repeat: {{ page.heading-bg-repeat }};
+  {% else %}
+    background-repeat: no-repeat;
+  {% endif %}
+{% endcapture %}
+
+{% capture amsf_page_heading_bg_text %}
+  {% if page.heading-bg-text %}
+    color: {{ page.heading-bg-text }};
+  {% endif %}
+{% endcapture %}
+
+{% capture amsf_page_heading_bg %}
+  style="{{ amsf_page_heading_bg_image | strip }} {{ amsf_page_heading_bg_color | strip }} {{ amsf_page_heading_bg_size | strip }} {{ amsf_page_heading_bg_position | strip }} {{ amsf_page_heading_bg_repeat | strip }} {{ amsf_page_heading_bg_text | strip }}"
+{% endcapture %}
+
 <!-- Article wrapper, limit width -->
 <article {{ amsf_page_lang }}>
 
   <!-- Post title -->
-  <header>
+  <header {{ amsf_page_heading_bg }}>
 
     <h1 class="{{ amsf_page_heading_class }}" title="{{ page.title | strip_html | xml_escape }}" data-title="{{ page.title | strip_html | xml_escape }}">
       {{ amsf_page_heading }}

_app/_posts/note/2014-02-01-custom-heading-background.md

@@ -0,0 +1,46 @@
+---
+layout: post
+title: Custom Heading Background
+category: note
+tags: curtana
+heading-bg: img/title-background-example.jpg
+heading-bg-local: true
+heading-bg-color: "#8141b1"
+heading-bg-size: "cover"
+heading-bg-position: "center bottom"
+heading-bg-repeat: "no-repeat"
+heading-bg-text: "#fff"
+---
+
+This is an example of custom heading background. You can simply add the following setting to your post [front-matter field](http://jekyllrb.com/docs/frontmatter/):
+
+```yaml
+heading-bg: img/heading-background-tile.jpg
+heading-bg-local: true
+heading-bg-color: "#8141b1"
+heading-bg-size: "100px 100px"
+heading-bg-position: "center bottom"
+heading-bg-repeat: "repeat"
+heading-bg-text: "#fff"
+```
+
+`heading-bg`
+: Background image filename, it a relative URL (non-external URI) is provided, the file will be prefixed with `site.file`.
+
+`heading-bg-local`
+: To avoid relative URL prefixed by `site.file`, you can set this option to `true` to prefix it with `amsf_user_assets`.
+
+`heading-bg-color`
+: Background color, recommend setting its value matches your image color tone.
+
+`heading-bg-size`
+: Background size, default value is `cover`.
+
+`heading-bg-position`
+: Background position, default value is `center center`.
+
+`heading-bg-repeat`
+: Background repeat, default value is `no-repeat`.
+
+`heading-bg-text`
+: Text color in heading, set it based on your background image.

_app/_posts/note/2014-02-01-svg-post-title.md

@@ -15,7 +15,7 @@ scheme-bg: "#ff9610"
 
 This is an example of custom post title using SVG image. You can simply add the following setting to your post [front-matter field](http://jekyllrb.com/docs/frontmatter/):
 
-```
+```yaml
 svg-headline: svg/cool-title.svg
 svg-headline-width: 400
 svg-headline-height: 86
@@ -25,14 +25,14 @@ Image defined for `svg-headline` should be stored at `_app/assets/svg/cool-title
 
 There's also an option for common raster images, but please note that these files should be stored at where you define `site.file`.
 
-```
+```yaml
 img-headline: cool-title.png
 img-headline-width: 500
 ```
 
 > **Pro Tips**: Keep a `<title>` tag for your SVG can help Safari generate correct post title for its Reader mode:
 
-```
+```html
 <svg xmlns="http://www.w3.org/2000/svg" width="2175" height="465" viewBox="0 0 2175 465">
 <title>Cool Article</title>
 …