[qemu-web PATCH v2 03/16] make all links be relative to the root

["Daniel P. Berrangé" <berrange@redhat.com>]

This enables the site to be hosted at URLs with different base
directories. This is useful when viewing the site after being
published as GitLab CI artifacts.

Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
---
 _includes/assets.html        | 28 ++++++++++++++--------------
 _includes/copyright.html     |  2 +-
 _includes/footer.html        | 12 ++++++------
 _includes/nav.html           | 12 ++++++------
 _includes/relative_root.html | 12 ++++++++++++
 _includes/sidebar.html       |  6 +++---
 _layouts/archive.html        |  4 ++--
 _layouts/blog.html           |  3 ++-
 _layouts/home.html           |  1 +
 _layouts/page.html           |  1 +
 blog/index.html              |  4 ++--
 index.html                   |  5 +++--
 12 files changed, 53 insertions(+), 37 deletions(-)
 create mode 100644 _includes/relative_root.html

diff --git a/_includes/assets.html b/_includes/assets.html
index 826a50f..411a1ac 100644
--- a/_includes/assets.html
+++ b/_includes/assets.html
@@ -4,23 +4,23 @@
 	<meta name="viewport" content="width=device-width">
 	<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:300,400%7cRoboto:300,400,500' rel='stylesheet' type='text/css'>
 
-	<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
-	<link rel="manifest" href="/assets/favicons/manifest.json">
-	<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
-	<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ relative_root }}/assets/favicons/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ relative_root }}/assets/favicons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ relative_root }}/assets/favicons/favicon-16x16.png">
+	<link rel="manifest" href="{{ relative_root }}/assets/favicons/manifest.json">
+	<link rel="mask-icon" href="{{ relative_root }}/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
+	<meta name="msapplication-config" content="{{ relative_root }}/assets/favicons/browserconfig.xml">
 	<meta name="theme-color" content="#ffffff">
 
-	<link rel="stylesheet" href="/assets/css/normalize.css" />
+	<link rel="stylesheet" href="{{ relative_root }}/assets/css/normalize.css" />
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
-	<link rel="stylesheet" href="/assets/css/skel-noscript.css" />
-	<link rel="stylesheet" href="/assets/css/style.css" />
-	<link rel="stylesheet" href="/assets/css/style-mobile.css" media="(max-width:699px)"/>
-	<link rel="stylesheet" href="/assets/css/style-desktop.css" media="(min-width:700px)" />
-	<link rel="alternate" title="QEMU Blog (Atom feed)" href="/feed.xml" type="application/atom+xml" />
+	<link rel="stylesheet" href="{{ relative_root }}/assets/css/skel-noscript.css" />
+	<link rel="stylesheet" href="{{ relative_root }}/assets/css/style.css" />
+	<link rel="stylesheet" href="{{ relative_root }}/assets/css/style-mobile.css" media="(max-width:699px)"/>
+	<link rel="stylesheet" href="{{ relative_root }}/assets/css/style-desktop.css" media="(min-width:700px)" />
+	<link rel="alternate" title="QEMU Blog (Atom feed)" href="{{ relative_root }}/feed.xml" type="application/atom+xml" />
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 	{% if page.colorbox %}
-	<script src="/assets/js/jquery.colorbox.js"></script>
-	<link rel="stylesheet" href="/assets/css/colorbox.css" />
+	<script src="{{ relative_root }}/assets/js/jquery.colorbox.js"></script>
+	<link rel="stylesheet" href="{{ relative_root }}/assets/css/colorbox.css" />
 	{% endif %}
diff --git a/_includes/copyright.html b/_includes/copyright.html
index 3e6e6a3..cdcd98f 100644
--- a/_includes/copyright.html
+++ b/_includes/copyright.html
@@ -2,7 +2,7 @@
 	<div id="copyright-inner">
 	  <div class="container">
 	    This site is made available under the terms of
-	    <a href="/license.html">a number of licenses</a>.
+	    <a href="{{ relative_root }}/license.html">a number of licenses</a>.
 	  </div>
 	</div>
 </div>
diff --git a/_includes/footer.html b/_includes/footer.html
index c8f1042..b614795 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,20 +1,20 @@
 <div id="footer">
 	<div id="footer-inner">
 		<ul class="style">
-			<li><a href="/">Home</a></li>
-			<li><a href="/download">Download</a></li>
-			<li><a href="/conservancy/">Conservancy / Committee</a></li>
+			<li><a href="{{ relative_root }}/">Home</a></li>
+			<li><a href="{{ relative_root }}/download">Download</a></li>
+			<li><a href="{{ relative_root }}/conservancy/">Conservancy / Committee</a></li>
 			<li><a href="http://qemu-advent-calendar.org">QEMU advent calendar</a></li>
 		</ul>
 		<ul class="style">
-			<li><a href="/contribute">Contribute</a></li>
-			<li><a href="/contribute/report-a-bug">Reporting a bug</a></li>
+			<li><a href="{{ relative_root }}/contribute">Contribute</a></li>
+			<li><a href="{{ relative_root }}/contribute/report-a-bug">Reporting a bug</a></li>
 			<li><a href="https://wiki.qemu.org/Documentation/GettingStartedDevelopers">New contributors</a></li>
 			<li><a href="https://wiki.qemu.org/Contribute/SubmitAPatch">Submitting a patch</a></li>
 			<li><a href="https://wiki.qemu.org/Contribute/FAQ">Contributor FAQ</a></li>
 		</ul>
 		<ul class="style">
-			<li><a href="/documentation">Documentation</a></li>
+			<li><a href="{{ relative_root }}/documentation">Documentation</a></li>
 			<li><a href="https://www.qemu.org/docs/master/">Main docs</a></li>
 			<li><a href="https://wiki.qemu.org/Category:Developer_documentation">Developer docs</a></li>
 			<li><a href="https://wiki.qemu.org/">Wiki</a></li>
diff --git a/_includes/nav.html b/_includes/nav.html
index 0c81e24..58b6c5a 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -2,12 +2,12 @@
 	<nav id="nav">
 		<ul>
 			{% assign current = page.url | downcase | split: '/' %}
-			<li class='{% if page.url == '/' %}not-desktop {%endif %}home'><a href="/">Home</a>
-			</li><li {% if current[1] == 'download' %}class='current'{% endif %}><a href="/download">Download</a>
-			</li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="/support">Support</a>
-			</li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="/contribute">Contribute</a>
-			</li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="/documentation">Documentation</a>
-			</li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="/blog">Blog</a></li>
+			<li class='{% if page.url == '/' %}not-desktop {%endif %}home'><a href="{{ relative_root }}/">Home</a>
+			</li><li {% if current[1] == 'download' %}class='current'{% endif %}><a href="{{ relative_root }}/download">Download</a>
+			</li><li {% if current[1] == 'support' %}class='current'{% endif %}><a href="{{ relative_root }}/support">Support</a>
+			</li><li {% if current[1] == 'contribute' %}class='current'{% endif %}><a href="{{ relative_root }}/contribute">Contribute</a>
+			</li><li {% if current[1] == 'documentation' %}class='current'{% endif %}><a href="{{ relative_root }}/documentation">Documentation</a>
+			</li><li {% if current[1] == 'blog' %}class='current'{% endif %}><a href="{{ relative_root }}/blog">Blog</a></li>
 		</ul>
 	</nav>
 
diff --git a/_includes/relative_root.html b/_includes/relative_root.html
new file mode 100644
index 0000000..87c30e2
--- /dev/null
+++ b/_includes/relative_root.html
@@ -0,0 +1,12 @@
+{% assign relative_root = '' %}
+{% assign tempDepth = page.url | append: 'hackish-solution' | split: '/' | size | minus: 2 %}
+{% for i in (1..tempDepth) %}
+  {% if forloop.last %}
+    {% assign relative_root = relative_root | append: ".." %}
+  {% else %}
+    {% assign relative_root = relative_root | append: "../" %}
+  {% endif %}
+{% endfor %}
+{% if relative_root == '' %}
+    {% assign relative_root = '.' %}
+{% endif %}
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 0dc3538..f0cec2a 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -9,7 +9,7 @@
 		<ul class="style">
 		{% for post in site.posts offset: 0 limit: 2 %}
 			<li>
-				<a href="{{ site.prefix }}{{ post.url }}">{{ post.title }}</a><br/>
+				<a href="{{ relative_root }}{{ post.url }}">{{ post.title }}</a><br/>
 				<span class="posted">{{ post.date | date_to_string }}</span>
 			</li>
 		{% endfor %}
@@ -31,12 +31,12 @@
 		{% assign thisurl = post.date | date: "%Y/%m" %}
 		{% assign thisdate = post.date | date: "%B %Y" %}
 		{% if thisurl != prevurl and prevurl != "" %}
-		<li><a href="/blog/{{ prevurl }}/">{{ prevdate }} ({{ counter }})</a></li>
+		<li><a href="{{ relative_root }}/blog/{{ prevurl }}/">{{ prevdate }} ({{ counter }})</a></li>
 		{% assign counter = 0 %}
 		{% endif %}
 		{% assign counter = counter | plus: 1 %}
 		{% endfor %}
-		<li><a href="/blog/{{ thisurl }}/">{{ thisdate }} ({{ counter }})</a></li>
+		<li><a href="{{ relative_root }}/blog/{{ thisurl }}/">{{ thisdate }} ({{ counter }})</a></li>
 		</ul>
 	</section>
 </div>
diff --git a/_layouts/archive.html b/_layouts/archive.html
index 4e67749..a0be7b8 100644
--- a/_layouts/archive.html
+++ b/_layouts/archive.html
@@ -9,13 +9,13 @@ layout: blog
 		{% for post in page.posts %}
 		<article>
 			<header>
-				<h2><a href="{{ site.prefix }}{{ post.url }}">{{ post.title }}</a></h2>
+				<h2><a href="../../..{{ post.url }}">{{ post.title }}</a></h2>
 				<div class="posted">{{ post.date | date_to_string }}{%
 				if post.last_modified_at %} (Updated {{ post.last_modified_at | date_to_string }}) {%
 				endif %}{% if post.author %} &mdash; by {{ post.author }}{% endif %}</div>
 			</header>
 		{{ post.excerpt }}
-		<a href="{{ site.prefix }}{{ post.url }}" class="button button-style1">Read More</a>
+		<a href="../../..{{ post.url }}" class="button button-style1">Read More</a>
 		</article>
 		{% endfor %}
 	</section>
diff --git a/_layouts/blog.html b/_layouts/blog.html
index 2dfb9c8..b300636 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -3,7 +3,8 @@
 Linear by TEMPLATED
 templated.co @templatedco
 Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
--->
+  -->
+{% include relative_root.html %}
 <html>
 <head>
 	<title>{{ page.title }} - {{ site.title }}</title>
diff --git a/_layouts/home.html b/_layouts/home.html
index b96e391..d94c9b0 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -4,6 +4,7 @@ Linear by TEMPLATED
 templated.co @templatedco
 Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 -->
+{% include relative_root.html %}
 <html>
 <head>
 	<title>{{ site.title }}</title>
diff --git a/_layouts/page.html b/_layouts/page.html
index 110ca97..d650054 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -4,6 +4,7 @@ Linear by TEMPLATED
 templated.co @templatedco
 Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 -->
+{% include relative_root.html %}
 <html>
 <head>
 	<title>{{ page.title }} - {{ site.title }}</title>
diff --git a/blog/index.html b/blog/index.html
index 313b994..c7ceb0a 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -8,7 +8,7 @@ layout: blog
 	<div class="row">
 		<section>
 			<header>
-				<h1><a href="{{ site.prefix }}{{ post.url }}">{{ post.title }}</a></h1>
+				<h1><a href="{{ relative_root }}{{ post.url }}">{{ post.title }}</a></h1>
 				<div class="posted">{{ post.date | date_to_string }}{%
 				if post.last_modified_at %} (Updated {{ post.last_modified_at | date_to_string }}) {%
 				endif %}{% if post.author %} &mdash; by {{ post.author }}{% endif %}</div>
@@ -22,7 +22,7 @@ layout: blog
 				</ul>
 			{% else %}
 				{{ post.excerpt }}
-				<a href="{{ site.prefix }}{{ post.url }}" class="button button-style1">Read More</a>
+				<a href="{{ relative_root }}{{ post.url }}" class="button button-style1">Read More</a>
 			{% endif %}
 		</section>
 	</div>
diff --git a/index.html b/index.html
index 4c65101..e52868d 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@ title: QEMU
 layout: home
 colorbox: True
 ---
+{% include relative_root.html %}
 	<!-- Header -->
 	<div id="header">
 		<div class="container">
@@ -38,7 +39,7 @@ colorbox: True
 			{% include screenshot.html offset=3 limit=10 %}
 			</section>
 
-<script src="/assets/js/object-fit.js"></script>
+<script src="{{ relative_root }}/assets/js/object-fit.js"></script>
 <script>
 window.hasColorBox = false;
 $(window).on("load resize", function() {
@@ -62,7 +63,7 @@ $('.colorbox').on("click.random-namespace", function() {
 
 		</div>
 		<hr>
-		<p>QEMU is a member of <a href="/conservancy/">Software Freedom Conservancy</a>.</p>
+		<p>QEMU is a member of <a href="{{ relative_root }}/conservancy/">Software Freedom Conservancy</a>.</p>
 	</div>
 </div>
 
-- 
2.26.2