feat(template): migrate from home-made site.base and `amsf_theme_ba…

…se` to Jekyll built-in `relative_url` and `absolute_url`

BREAKING CHANGE: To migrate from old URL structure. You should simply replace the following:

- `site.base` in your templates to `relative_url`, examples:
  - `{{ site.base }}/my-post.html` to `{{ "my-post.html" | relative_url }}`
  - `{{ "my-post.html" | prepend: site.base }}` to `{{ "my-post.html" | relative_url }}`
- `amsf_theme_base` in your templates to `absolute_url`, examples:
  - `{{ amsf_theme_base }}/my-post.html` to `{{ "my-post.html" | absolute_url }}`
  - `{{ "my-post.html" | prepend: amsf_theme_base }}` to `{{ "my-post.html" | absolute_url }}`

Gruntfile.coffee

@@ -20,12 +20,14 @@ module.exports = (grunt) ->
   grunt.initConfig
     config:
       cfg: grunt.file.readYAML("_config.yml")
+      cfg_dev: grunt.file.readYAML("_config.dev.yml")
       pkg: grunt.file.readJSON("package.json")
       amsf: grunt.file.readYAML("_amsf.yml")
       deploy: grunt.file.readYAML("_deploy.yml")
       app: "<%= config.cfg.source %>"
       dist: "<%= config.cfg.destination %>"
-      base: "<%= config.cfg.base %>"
+      base: "<%= config.cfg.baseurl %>"
+      base_dev: "<%= config.cfg_dev.baseurl %>"
       assets: "<%= config.cfg.assets %>"
       banner: "<!-- <%= config.pkg.name %> v<%= config.pkg.version %> | © <%= config.pkg.author %> | <%= config.pkg.license %> -->\n"
 
@@ -317,6 +319,7 @@ module.exports = (grunt) ->
       serve:
         options:
           config: "_config.yml,_amsf.yml,<%= config.app %>/_data/<%= amsf.theme.current %>.yml,_config.dev.yml"
+          dest: "<%= config.dist %><%= config.base_dev %>"
           drafts: true
           future: true
 

_app/_includes/_amsf.html

@@ -51,23 +51,25 @@
 
 {% comment %}
   Site base URL
+
+  Deprecated, it's now the same as the Jekyll built-in filter `absolute_url`.
 {% endcomment %}
-{% capture amsf_site_base %}{{ site.base | prepend: site.url }}{% endcapture %}
+{% capture amsf_site_base %}{{ "" | absolute_url }}{% endcapture %}
 
 {% comment %}
   Theme base URL
 {% endcomment %}
-{% capture amsf_theme_base %}{{ site.amsf_theme | prepend: '/themes/' }}{% endcapture %}
+{% capture amsf_theme_base %}{{ site.amsf_theme | prepend: "/themes/" }}{% endcapture %}
 
 {% comment %}
   Theme assets base URL
 {% endcomment %}
-{% capture amsf_theme_assets %}{{ site.amsf_theme | prepend: '/themes/' | prepend: site.assets | prepend: site.base }}{% endcapture %}
+{% capture amsf_theme_assets %}{{ amsf_theme_base | prepend: site.assets | relative_url }}{% endcapture %}
 
 {% comment %}
   User assets base URL
 {% endcomment %}
-{% capture amsf_user_assets %}{{ site.assets | prepend: site.base }}{% endcapture %}
+{% capture amsf_user_assets %}{{ site.assets | relative_url }}{% endcapture %}
 
 {% comment %}
   Page theme color
@@ -119,10 +121,10 @@
 
   @since 1.1.0
 {% endcomment %}
-{% capture amsf_favicon_png %}{{ "/favicon.png" | prepend: site.base }}{% endcapture %}
-{% capture amsf_favicon_svg %}{{ "/favicon.svg?assets-inline-assets-keep" | prepend: site.base }}{% endcapture %}
-{% capture amsf_mask_icon %}{{ "/mask-icon.svg" | prepend: site.base }}{% endcapture %}
-{% capture amsf_apple_touch_icon %}{{ "/apple-touch-icon.png" | prepend: site.base }}{% endcapture %}
+{% capture amsf_favicon_png %}{{ "/favicon.png" | relative_url }}{% endcapture %}
+{% capture amsf_favicon_svg %}{{ "/favicon.svg?assets-inline-assets-keep" | relative_url }}{% endcapture %}
+{% capture amsf_mask_icon %}{{ "/mask-icon.svg" | relative_url }}{% endcapture %}
+{% capture amsf_apple_touch_icon %}{{ "/apple-touch-icon.png" | relative_url }}{% endcapture %}
 
 {% capture amsf_favicons %}
   {% for static_file in site.static_files %}
@@ -154,17 +156,17 @@
 {% comment %}
   Feed URL
 {% endcomment %}
-{% capture amsf_feed_url %}{{ site.feed | prepend: site.base | replace: '/index.xml', '/' }}{% endcapture %}
+{% capture amsf_feed_url %}{{ site.feed | relative_url | replace: '/index.xml', '/' }}{% endcapture %}
 
 {% comment %}
   Page title
 {% endcomment %}
 {% capture amsf_page_title %}{{ page.title | strip_html | xml_escape }}{% endcapture %}
 
 {% comment %}
-  Page URL
+  Page URL (full URl with `site.url`)
 {% endcomment %}
-{% capture amsf_page_url %}{{ page.url | prepend: amsf_site_base | replace: '/index.html', '/' | replace: '/index.htm', '/' | replace: '/index.xml', '/' }}{% endcapture %}
+{% capture amsf_page_url %}{{ page.url | absolute_url | replace: '/index.html', '/' | replace: '/index.htm', '/' | replace: '/index.xml', '/' }}{% endcapture %}
 
 {% comment %}
   Page publish date
@@ -305,7 +307,7 @@
 
   @since 1.1.0
 {% endcomment %}
-{% assign amsf_site_logo = "/logo.png" | prepend: amsf_site_base %}
+{% assign amsf_site_logo = "/logo.png" | absolute_url %}
 {% capture amsf_page_first_image %}
   {% assign hero_image = page.content | match_regex: '<img .*?src="([^"]+)"' %}
   {% if hero_image == nil %}
@@ -499,7 +501,7 @@
   {% if site.service_worker.enabled == true and site.dev == false %}
     <script>
       if ('serviceWorker' in navigator && window.location.hostname === '{{ amsf_hostname }}') {
-        navigator.serviceWorker.register('{{ "/service-worker.js" | prepend: site.base }}').then(function (registration) {
+        navigator.serviceWorker.register('{{ "/service-worker.js" | relative_url }}').then(function (registration) {
           console.log('ServiceWorker registration successful with scope: ', registration.scope);
         }).catch(function(err) {
           console.log('ServiceWorker registration failed: ', err);

_app/_includes/themes/curtana/includes/footer.html

@@ -3,15 +3,15 @@
 {% else %}
   <footer class="footer">
     <ul>
-      <li><a href="{{ site.base }}/">{{ site.name }}</a></li>
+      <li><a href="{{ '/' | relative_url }}">{{ site.name }}</a></li>
 
       {% if site.credits %}
         <li><a href="https://sparanoid.com/lab/amsf/" title="Almace Scaffolding">AMSF</a></li>
         <li><a href="{{ site.data.curtana.meta.url }}" title="{{ site.data.curtana.meta.name }}">{{ site.data.curtana.meta.name }}</a></li>
       {% endif %}
 
       {% if site.data.curtana.subscription %}
-        <li><a href="{{ '/email-signup' | prepend: site.base }}/">Email</a></li>
+        <li><a href="{{ '/email-signup' | relative_url }}/">Email</a></li>
       {% endif %}
 
       <li><a href="{{ amsf_feed_url }}" title="Feed - Atom (The Atom Syndication Format)">Atom</a></li>

_app/_includes/themes/curtana/includes/header.html

@@ -4,7 +4,7 @@
     {% for item in site.data.nav %}
       {% assign lowercased_title = item.title | downcase %}
       <li {% if page.permalink == item.url or page.category == lowercased_title %}class=current{% endif %}>
-        <a href="{{ item.url | prepend: site.base }}">
+        <a href="{{ item.url | relative_url }}">
           {% if item.title == "__home__" %}
             {{ site.name }}
           {% else %}

_app/_includes/themes/curtana/includes/page-item.html

@@ -25,7 +25,7 @@
 <section class="list">
   <h1>
     <!-- Item title -->
-    <a href="{{ post.url | prepend: site.base }}" {% if site.data.curtana.colorful_list %}{{ post_link_color }}{% endif %}>{{ post.title }}</a>
+    <a href="{{ post.url | relative_url }}" {% if site.data.curtana.colorful_list %}{{ post_link_color }}{% endif %}>{{ post.title }}</a>
 
     <!-- External link indicator -->
     {% if post.link %}

_app/_includes/themes/curtana/includes/top.html

@@ -21,7 +21,7 @@
 {{ amsf_favicons }}
 
 <!-- Chrome Web App manifest -->
-<link rel="manifest" href="{{ '/manifest.json' | prepend: site.base }}">
+<link rel="manifest" href="{{ '/manifest.json' | relative_url }}">
 
 <!-- Main CSS -->
 <link rel="stylesheet" href="{{ '/css/app.css?assets-inline' | prepend: amsf_theme_assets }}">

_app/_posts/news/2015-08-18-multiple-themes-support.md

@@ -4,4 +4,4 @@ title: Multiple Themes Support
 category: news
 ---
 
-From version 0.0.31, you can now use multiple themes in Almace Scaffolding. See [Themes]({{ site.base }}/themes.html) for more information.
+From version 0.0.31, you can now use multiple themes in Almace Scaffolding. See [Themes]({{ "/themes.html" | relative_url }}) for more information.

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

@@ -5,7 +5,7 @@ category: note
 hidden: true
 ---
 
-> The content of this post in deprecated, please see [Custom Heading Image]({{ site.base }}/custom-heading-image.html) for more info.
+> The content of this post in deprecated, please see [Custom Heading Image]({{ "/custom-heading-image.html" | relative_url}}) for more info.
 
 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/):
 

_app/_posts/note/2014-06-09-creating-themes.md

@@ -131,28 +131,6 @@ Output:
 <meta property="og:description" content="Super-fast Jekyll framework">
 ```
 
-### `site.base`
-
-Base URL, this is useful when you need to build site in a subdirectory (like GitHub Pages for Projects), it provides a specific URL prefix, for example, if the production site URL is https://sparanoid.com/lab/amsf/, set `base` to `/lab/amsf`, without trailing slash. This make sure all the links are relative to current site root (in a subdirectory in this case), you should use this variable for **every** link appeared in your theme.
-
-Config:
-
-```yaml
-base: /lab/amsf
-```
-
-Template:
-
-```html
-<a href="{{ '{{ site.base ' }}}}/atom.xml">Atom</a>
-```
-
-Output:
-
-```html
-<a href="/lab/amsf/atom.xml">Atom</a>
-```
-
 ### `site.file`
 
 Media assets URL used in posts, without trailing slash. In the most cases this URL should be powered by a CDN provider.

_app/_posts/note/2014-06-13-welcome.md

@@ -8,7 +8,7 @@ tags: getting-started
 AMSF, a.k.a. **Almace Scaffolding**, is a super-fast Jekyll framework, supports live reloading (Browsersync), Less, HTML minification, inlined stylesheets and more.
 
 <p class="largetype">
-  <a href="{{ site.base }}/getting-started.html">Getting Started &#x27A1;&#xfe0e;</a>
+  <a href="{{ '/getting-started.html' | relative_url }}">Getting Started &#x27A1;&#xfe0e;</a>
 </p>
 
 Go to the [GitHub](https://github.com/sparanoid/almace-scaffolding) page for downloads, bug reports, and feature requests.

_app/_posts/note/2017-01-06-open-graph.md

@@ -11,7 +11,7 @@ Theme Curtana has full [Open Graph](http://ogp.me/) and [Twitter Cards](https://
 It will look for the image in the following order:
 
 1. Use `page.thumbnail` if defined in your post [front-matter field](http://jekyllrb.com/docs/frontmatter/).
-2. If no specified `page.thumbnail` defined, it uses [Heading Background Image]({{ site.base }}/custom-heading-background.html) (aka. `page.heading-bg`) if defined in your post front-matter field.
+2. If no specified `page.thumbnail` defined, it uses [Heading Background Image]({{ "/custom-heading-background.html" | relative_url }}) (aka. `page.heading-bg`) if defined in your post front-matter field.
 3. If no heading background image found, Curtana will try to grab the first image (wrapped inside `<img>`) in your post as your post thumbnail
 4. If nothing found, it fails back to `logo.png` located at your site root.
 

_app/feed-atom.xml

@@ -10,15 +10,15 @@ permalink: /feed.xml
   <title>{{ site.name }}</title>
   <subtitle>{{ site.description }}</subtitle>
   <updated>{{ site.time | date_to_xmlschema }}</updated>
-  <id>{{ amsf_site_base | xml_escape }}/</id>
+  <id>{{ "/" | absolute_url | xml_escape }}</id>
   <generator uri="https://sparanoid.com/lab/amsf/" version="{{ site.version }}">Almace Scaffolding</generator>
 
-  <link rel="alternate" type="text/html" hreflang="en" href="{{ amsf_site_base }}/" />
+  <link rel="alternate" type="text/html" hreflang="en" href="{{ '/' | absolute_url }}" />
   <link rel="self" type="application/atom+xml" href="{{ amsf_page_url }}" />
 
   <author>
     <name>{{ site.data.authors.default.name }}</name>
-    <uri>{{ amsf_site_base }}/</uri>
+    <uri>{{ "/" | absolute_url }}</uri>
     <email>{{ site.data.authors.default.email }}</email>
   </author>
 
@@ -27,20 +27,20 @@ permalink: /feed.xml
       {% if site.link_blog and post.link %}
         {% assign entry_link = post.link %}
       {% else %}
-        {% assign entry_link = post.url | prepend: amsf_site_base %}
+        {% assign entry_link = post.url | absolute_url %}
       {% endif %}
 
       {% capture entry_permalink %}
         {% if site.link_blog and post.link %}
-          <p><a href="{{ post.url | prepend: amsf_site_base }}" title="Permalink to “{{ post.title | strip_html | xml_escape }}”"><small>◉ Permalink</small></a></p>
+          <p><a href="{{ post.url | absolute_url }}" title="Permalink to “{{ post.title | strip_html | xml_escape }}”"><small>◉ Permalink</small></a></p>
         {% elsif site.link_blog != true and post.link %}
           <p><a href="{{ post.link }}"><small>◉ Direct Link to Original Site</small></a></p>
         {% endif %}
       {% endcapture %}
 
       <entry>
         <title>{{ post.title | strip_html | xml_escape }}</title>
-        <id>{{ post.url | prepend: amsf_site_base | xml_escape }}</id>
+        <id>{{ post.url | absolute_url | xml_escape }}</id>
         <link rel="alternate" type="text/html" href="{{ entry_link }}" />
         <published>{{ post.date | date_to_xmlschema }}</published>
 
@@ -56,7 +56,7 @@ permalink: /feed.xml
           <email>{{ author.email }}</email>
         </author>
 
-        <content type="html" xml:base="{{ amsf_site_base }}/">
+        <content type="html" xml:base="{{ '/' | absolute_url }}">
           {% if site.rss_excerpt %}
             {{ post.excerpt | markdownify | xml_escape }}
           {% else %}

_app/feed-json.json

@@ -12,8 +12,8 @@ permalink: /feed.json
     {% unless first %},{% endunless %}
     {
       "title": {{ post.title | jsonify }},
-      "permalink": {{ post.url | prepend: amsf_site_base | jsonify }},
-      "link": {{ post.url | prepend: amsf_site_base | jsonify }},
+      "permalink": {{ post.url | absolute_url | jsonify }},
+      "link": {{ post.url | absolute_url | jsonify }},
       "date": {{ post.date | date_to_xmlschema | jsonify }},
       {% if post.last_modified_at %}
         "modified": {{ post.last_modified_at | date_to_xmlschema | jsonify }},

_app/manifest.json

@@ -4,13 +4,13 @@
 {
   "name": {{ site.name | jsonify }},
   "short_name": {{ site.name_short | jsonify }},
-  "start_url": {{ site.base | jsonify }},
+  "start_url": {{ "/" | relative_url | jsonify }},
   "display": "standalone",
   "theme_color": {{ site.colors.theme | jsonify }},
   "background_color": {{ site.colors.background | jsonify }},
   "icons": [
     {
-      "src": {{ "/favicon.png" | prepend: site.base | jsonify }},
+      "src": {{ "/favicon.png" | relative_url | jsonify }},
       "sizes": "192x192",
       "type": "image/png"
     }

_app/robots.txt

@@ -5,4 +5,4 @@
   %}{{ post | strip }}
 {% endfor %}
 
-Sitemap: {{ "/sitemap.xml" | prepend: site.base | prepend: site.url }}
+Sitemap: {{ "/sitemap.xml" | absolute_url }}

_app/sitemap.xml

@@ -7,14 +7,14 @@
 
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
-    <loc>{{ amsf_site_base }}/</loc>
+    <loc>{{ "/" | absolute_url }}</loc>
     <lastmod>{{ site.time | date: "%F" }}</lastmod>
   </url>
 
   {% for page in site.html_pages %}
     {% if page.hidden != true %}
       <url>
-        <loc>{{ page.url | prepend: amsf_site_base | replace: '/index.html', '/' }}</loc>
+        <loc>{{ page.url | absolute_url | replace: '/index.html', '/' }}</loc>
         {% if page.last_modified_at %}
           <lastmod>{{ page.last_modified_at | date: "%F" }}</lastmod>
         {% endif %}
@@ -25,7 +25,7 @@
   {% for post in site.posts %}
     {% if post.hidden != true %}
       <url>
-        <loc>{{ post.url | prepend: amsf_site_base }}</loc>
+        <loc>{{ post.url | absolute_url }}</loc>
         {% if post.last_modified_at %}
           <lastmod>{{ post.last_modified_at | date: "%F" }}</lastmod>
         {% else %}

_config.dev.yml

@@ -17,7 +17,7 @@ gems:
 dev:            true
 
 # Reset base to / for localhost development
-base:           ""
+baseurl:        ""
 
 # CDN location for development
 file:           //sparanoid.s3-website-us-east-1.amazonaws.com

_config.init.yml

@@ -100,11 +100,11 @@ description:    Almace Scaffolding - Super-fast Jekyll framework
 #
 # This is useful when I need to build site in a subdirectory (like
 # GitHub Pages for Projects), it provides a specific URL prefix, for example, if
-# the production site URL is https://sparanoid.com/my-project/, set `base` to
+# the production site URL is https://sparanoid.com/my-project/, set `baseurl` to
 # `/my-project`, without trailing slash.
 #
 # Default:      ""
-base:           ""
+baseurl:        ""
 
 # CSS path used in templates
 #

_config.yml

@@ -100,11 +100,11 @@ description:    Almace Scaffolding - Super-fast Jekyll framework
 #
 # This is useful when I need to build site in a subdirectory (like
 # GitHub Pages for Projects), it provides a specific URL prefix, for example, if
-# the production site URL is https://sparanoid.com/my-project/, set `base` to
+# the production site URL is https://sparanoid.com/my-project/, set `baseurl` to
 # `/my-project`, without trailing slash.
 #
 # Default:      ""
-base:           /lab/amsf
+baseurl:        /lab/amsf
 
 # CSS path used in templates
 #