Fix showing background img with non-empty baseurl (#497)

* Fix showing background img with non-empty baseurl

Also switch globally to relative_url for all baseurl prepends,
which is more robust than custom URL mangling

* More site.baseurl -> relative_url conversion

404.html

@@ -9,5 +9,5 @@ permalink: /404.html
   <h1>Move along. (404 error)</h1>
   <br/>
 
-  <img src="{{ site.baseurl }}/img/404-southpark.jpg" />
+  <img src="{{ 'img/404-southpark.jpg' | relative_url }}" />
 </div>

_data/SocialNetworks.yml

@@ -73,7 +73,7 @@ telephone:
 
 rss:
   name: "RSS"
-  baseURL: "{{ '/feed.xml' | prepend: site.baseurl }}"
+  baseURL: "{{ '/feed.xml' | relative_url }}"
   icon: "fa-rss"
 
 steam:

_includes/footer-scripts.html

@@ -12,7 +12,7 @@
 
 {% if page.js %}
   {% for js in page.js %}
-	<script src="{{ js | prepend: site.baseurl | replace: '//', '/' }}"></script>
+    <script src="{{ js | relative_url }}"></script>
   {% endfor %}
 {% endif %}
 
@@ -22,11 +22,11 @@
     {% if js contains 'jquery' %}
       <script>
       	if (typeof jQuery == 'undefined') {
-      	  document.write('<script src="{{ js | prepend: site.baseurl | replace: "//", "/" }}"></scr' + 'ipt>');
+          document.write('<script src="{{ js | relative_url }}"></scr' + 'ipt>');
       	}
       </script>
     {% else %}
-	<script src="{{ js | prepend: site.baseurl | replace: '//', '/' }}"></script>
+      <script src="{{ js | relative_url }}"></script>
     {% endif %}
   {% endfor %}
 {% endif %}

_includes/footer.html

@@ -8,7 +8,7 @@
             {%- assign element = site.data.SocialNetworks[curkey] -%}
             <li>
             {%- if curkey == 'rss' -%}
-              <a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="{{ element.name }}">
+              <a href="{{ '/feed.xml' | relative_url }}" title="{{ element.name }}">
             {%- elsif curkey == 'yelp' -%}
               <a href="https://{{ site.social-network-links[curkey] }}.yelp.com" title="{{ element.name }}">
             {%- else -%}

_includes/head.html

@@ -11,7 +11,7 @@
   <meta name="description" content="{{ page.subtitle }}">
   {% endif %}
 
-  <link rel="alternate" type="application/rss+xml" title="{{ site.title }} {{ site.title-separator }} {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }} {{ site.title-separator }} {{ site.description }}" href="{{ '/feed.xml' | relative_url }}" />
 
   {% include gtag.html %}
   {% include gtm_head.html %}
@@ -25,7 +25,7 @@
 
   {% if layout.common-css %}
     {% for css in layout.common-css %}
-      <link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" />
+      <link rel="stylesheet" href="{{ css | relative_url }}" />
     {% endfor %}
   {% endif %}
 
@@ -43,7 +43,7 @@
 
   {% if page.css %}
     {% for css in page.css %}
-      <link rel="stylesheet" href="{{ css | prepend: site.baseurl | replace: '//', '/' }}" />
+      <link rel="stylesheet" href="{{ css | relative_url }}" />
     {% endfor %}
   {% endif %}
 
@@ -125,7 +125,7 @@
 
   {% if page.comments and site.staticman.repository and site.staticman.branch %}
   <!-- Staticman -->
-  <link rel="stylesheet" href="{{ "/css/staticman.css" | prepend: site.baseurl }}" />
+  <link rel="stylesheet" href="{{ "/css/staticman.css" | relative_url }}" />
   {% endif %}
 
 </head>

_includes/header.html

@@ -8,10 +8,10 @@
 	  {% assign imgnum = forloop.index %}
 	  {% for imginfo in bigimg %}
 	    {% if imginfo[0] %}
-		  data-img-src-{{ imgnum }}="{{ imginfo[0] | prepend: site.baseurl | replace: '//', '/' }}"
+		  data-img-src-{{ imgnum }}="{{ imginfo[0] | relative_url }}"
 		  data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
 		{% else %}
-		  data-img-src-{{ imgnum }}="{{ imginfo | prepend: site.baseurl | replace: '//', '/' }}"
+		  data-img-src-{{ imgnum }}="{{ imginfo | relative_url }}"
 		{% endif %}
 	  {% endfor %}
     {% endfor %}

_includes/nav.html

@@ -41,7 +41,7 @@
 	<div class="avatar-container">
 	  <div class="avatar-img-border">
 	    <a href="{{ site.url }}">
-	      <img class="avatar-img" src="{{ page.image | prepend: site.baseurl | replace: '//', '/' }}" />
+	      <img class="avatar-img" src="{{ page.image | relative_url }}" />
 		</a>
 	  </div>
 	</div>
@@ -49,7 +49,7 @@
 	<div class="avatar-container">
 	  <div class="avatar-img-border">
 	    <a href="{{ site.url }}">
-	      <img class="avatar-img" src="{{ site.avatar | prepend: site.baseurl | replace: '//', '/' }}" />
+	      <img class="avatar-img" src="{{ site.avatar | relative_url }}" />
 		</a>
 	  </div>
 	</div>

_includes/navbarlink.html

@@ -8,7 +8,7 @@
 {% endif %}
 
 {% if internal %}
-  {% capture linkurl %}{{ site.baseurl }}/{{ include.link[1] }}{% endcapture %}
+  {% capture linkurl %}{{ include.link[1] | relative_url }}{% endcapture %}
 {% else %}
   {% capture linkurl %}{{ include.link[1] }}{% endcapture %}
 {% endif %}

_includes/staticman-script.html

@@ -2,7 +2,7 @@
   <!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
   <script>
     if (typeof jQuery == 'undefined') {
-      document.write('<script src="{{ site.baseurl }}/js/jquery-1.11.2.min.js"></scr' + 'ipt>');
+      document.write('<script src="{{ "/js/jquery-1.11.2.min.js" | relative_url }}"></scr' + 'ipt>');
     }
   </script>
   <script>

_layouts/post.html

@@ -40,7 +40,7 @@ layout: base
           Tags:
           {% if site.link-tags %}
           {% for tag in page.tags %}
-            <a href="{{ site.baseurl }}/tags#{{- tag -}}">{{- tag -}}</a>
+            <a href="{{ '/tags' | relative_url }}#{{- tag -}}">{{- tag -}}</a>
           {% endfor %}
           {% else %}
             {{ page.tags | join: ", " }}
@@ -55,12 +55,12 @@ layout: base
       <ul class="pager blog-pager">
         {% if page.previous.url %}
         <li class="previous">
-          <a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
+          <a href="{{ page.previous.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
         </li>
         {% endif %}
         {% if page.next.url %}
         <li class="next">
-          <a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
+          <a href="{{ page.next.url | relative_url }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
         </li>
         {% endif %}
       </ul>

css/main.css

@@ -13,7 +13,7 @@ body {
   position: relative;
   background-color: {{ site.page-col }};
   {% if site.page-img %}
-  background-image: url({{ site.page-img }});
+  background-image: url({{ site.page-img | relative_url }});
   background-attachment: fixed;
   {% endif %}
 }
@@ -110,7 +110,7 @@ img {
   border-bottom: 1px solid #EAEAEA;
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   {% if site.navbar-img %}
-  background-image: url({{ site.navbar-img }});
+  background-image: url({{ site.navbar-img | relative_url }});
   background-attachment: fixed;
   {% endif %}
 }
@@ -267,7 +267,7 @@ footer {
   font-size: 14px;
   background-color: {{ site.footer-col }};
   {% if site.footer-img %}
-  background-image: url({{ site.footer-img }});
+  background-image: url({{ site.footer-img | relative_url }});
   background-attachment: fixed;
   {% endif %}
 }

index.html

@@ -8,7 +8,7 @@ use-site-title: true
 <div class="posts-list">
   {% for post in paginator.posts %}
   <article class="post-preview">
-    <a href="{{ post.url | prepend: site.baseurl }}">
+    <a href="{{ post.url | relative_url }}">
 	  <h2 class="post-title">{{ post.title }}</h2>
 
 	  {% if post.subtitle %}
@@ -25,7 +25,7 @@ use-site-title: true
     <div class="post-entry-container">
       {% if post.image %}
       <div class="post-image">
-        <a href="{{ post.url | prepend: site.baseurl }}">
+        <a href="{{ post.url | relative_url }}">
           <img src="{{ post.image }}">
         </a>
       </div>
@@ -34,7 +34,7 @@ use-site-title: true
         {{ post.excerpt | strip_html | xml_escape | truncatewords: site.excerpt_length }}
         {% assign excerpt_word_count = post.excerpt | number_of_words %}
         {% if post.content != post.excerpt or excerpt_word_count > site.excerpt_length %}
-          <a href="{{ post.url | prepend: site.baseurl }}" class="post-read-more">[Read&nbsp;More]</a>
+          <a href="{{ post.url | relative_url }}" class="post-read-more">[Read&nbsp;More]</a>
         {% endif %}
       </div>
     </div>
@@ -44,7 +44,7 @@ use-site-title: true
       Tags:
       {% if site.link-tags %}
       {% for tag in post.tags %}
-      <a href="{{ site.baseurl }}/tags#{{- tag -}}">{{- tag -}}</a>
+      <a href="{{ '/tags' | relative_url }}#{{- tag -}}">{{- tag -}}</a>
       {% endfor %}
       {% else %}
         {{ post.tags | join: ", " }}
@@ -60,12 +60,12 @@ use-site-title: true
 <ul class="pager main-pager">
   {% if paginator.previous_page %}
   <li class="previous">
-    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&larr; Newer Posts</a>
+    <a href="{{ paginator.previous_page_path | relative_url }}">&larr; Newer Posts</a>
   </li>
   {% endif %}
   {% if paginator.next_page %}
   <li class="next">
-    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Older Posts &rarr;</a>
+    <a href="{{ paginator.next_page_path | relative_url }}">Older Posts &rarr;</a>
   </li>
   {% endif %}
 </ul>