Abs link patch (daattali#506)

abelcheung · daattali · commit 9d429fa749e8 · 2019-06-21T03:48:52.000-04:00
* Fix absolute URL generation

url and baseurl config for this theme deviates from jekyll standard,
and that results in double inclusion of project path
if this theme is used as project page.

Switching to Jekyll accepted url usage so that
absolute_url filter works.

* Alternate links need to be aboslute

* mention url and baseurl only need to be modified in local dev

* Update readme on new url/baseurl setting changes
diff --git a/README.md b/README.md
@@ -176,10 +176,13 @@ If you're not sure what the difference is, you can probably safely ignore this s
 
 If you want to use this theme to host a website that will be available at `https://YOURUSERNAME.github.io`, then you do not need to read this section. That is called a User Page, you can only have one User Page in your GitHub account, and it is what you get by default when forking this project.
 
-If you want to use this theme to create a website for a particular repository, it will be available at `https://YOURUSERNAME.github.io/REPONAME`, and that is called a [Project Page](https://help.github.com/articles/user-organization-and-project-pages/). You can have a Project Page for each repository you have on GitHub. There are two important things to note when creating a project page:
+If you want to use this theme to create a website for a particular repository, it will be available at `https://YOURUSERNAME.github.io/REPONAME`, and that is called a [Project Page](https://help.github.com/articles/user-organization-and-project-pages/). You can have a Project Page for each repository you have on GitHub.
 
-1. In the configuration file (`_config.yml`), you should set `baseurl` to be `/projectname` instead of `""`.
-2. Project Pages are served from a branch named `gh-pages`, and you should be generating all the website content on that branch. When you fork Beautiful Jekyll, you'll already have a `gh-pages` branch but you should delete it and generate it again from the `master` branch. The reason is that the `gh-pages` branch in its current form does not have the updated code of Beautiful Jekyll, so you need to create that branch from the `master` branch (which is where all my new features and work go into).
+There are two important point to note, assuming your project website will be served under `gh-pages` branch (check [Github Page official documentation](https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages) for usable source):
+
+1. When copying files from this repository, **only copy from `master` branch** of this theme, which is where all my new features and work go into. After copying stuff to `gh-pages` branch under your project...
+
+2. Adjust all configurations and templates according to your taste, but in particular, there is no need to set `url` and `baseurl` inside `_config.yml`. Github will fill in the variables for you. Just push the changes and enjoy!
 
 ## Showcased users (success stories!)
 
@@ -280,6 +283,17 @@ The default style of Beautiful Jekyll is to feature the blog feed on the front p
 
 Unfortunately, this is a no-answer! There isn't a one-size-fits-all solution to this, because every person will view your site on a different browser with different dimensions. Some browsers will have very wide aspect ratio, some will be narrower, some will be vertical (such as phones), different phones have different screens, etc. The image will always be centered, so the only tip I can give is that you should make sure the important part of the image is in the middle so that it'll always show. Other than that, every browser will show a different clipping of the image.
 
+#### After recent update some links in my project page appear to be broken!
+
+Since late June 2019, some URL related setting are adjusted to be in line with how Jekyll uses them officially. Project page absolute links might appear to be broken if you haven't propagated all necessary changes to your local templates, or you have created additional templates making use of old settings. If links contain duplicated project path component, this is most likely the cause. In summary:
+
+| &nbsp; | Old behavior | New behavior |
+| --- | --- | --- |
+| `url` setting | `https://user.github.io/project` | (unset, GitHub auto detect) |
+| `baseurl` setting | `/project` | (unset, GitHub auto detect) |
+| Absolute link construction | `{{ site.url }}/your/path` | `{{ '/your/path' \| absolute_url }}` |
+| Relative link construction | `{{ site.baseurl }}/your/path` | `{{ '/your/path' \| relative_url }}` |
+
 ## Credits
 
 This template was not made entirely from scratch. I would like to give special thanks to:
diff --git a/_config.yml b/_config.yml
@@ -1,23 +1,20 @@
 # --- General options --- #
 
-# url is the full website URL
-# baseurl is the website's URL without the hostname
-
-# If you are building a simple GitHub user page (https://username.github.io) then use these settings:
-url: "https://username.github.io"
-baseurl: ""
-
-# If you are building a GitHub project page then use these settings:
-#url: "http://username.github.io/projectname"
-#baseurl: "/projectname"
-
-# Of course don't forget to change the username and projectname to YOUR username and project
-
 # Name of website
 title: My website
 
 # Short description of your site
-description: A virtual proof that name is awesome!
+description: A virtual proof that I'm awesome
+
+# --- Local development options ---
+# If your website is hosted locally rather than on GitHub, then you need to uncomment the next two parameters to set the url and baseurl
+# *** If you're not sure what this mean, then leave this section as it is. Only modify the url and baseurl if you know what you're doing!***
+
+# url is the the website domain URL without a trailing slash
+#url: "https://example.com"
+
+# baseurl should be an empty string
+#baseurl: ""
 
 # --- Navigation bar options --- #
 
@@ -27,7 +24,6 @@ navbar-links:
   Resources:
     - Beautiful Jekyll: "http://deanattali.com/beautiful-jekyll/"
     - Learn markdown: "http://www.markdowntutorial.com/"
-    - GitHub Pages: "https://pages.github.com/"
   Author's home: "http://deanattali.com"
 
 # Image to show in the navigation bar - image must be a square (width = height)
diff --git a/_includes/fb-comment.html b/_includes/fb-comment.html
@@ -8,7 +8,7 @@
        js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId={{ site.fb_comment_id }}&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));</script>
-    <div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
+    <div class="fb-comments" data-href="{{ page.url | absolute_url }}" data-width="100%" data-numposts="5"></div>
     <noscript>Please enable JavaScript to view the comments powered by Facebook.</noscript>
 </div>
 {%- endif -%}
diff --git a/_includes/footer-minimal.html b/_includes/footer-minimal.html
@@ -7,10 +7,10 @@
 	{% else %}
 	  {{ site.time | date: '%Y' }}
 	{% endif %}
-	
+
     {% if site.url-pretty %}
     &nbsp;&nbsp;&bull;&nbsp;&nbsp;
-    <a href="{{ site.url }}">{{ site.url-pretty }}</a>
-    {% endif %}	
+    <a href="{{ '' | absolute_url }}">{{ site.url-pretty }}</a>
+    {% endif %}
   </div>
 </footer>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -30,7 +30,7 @@
 
       {% if site.url-pretty %}
       &nbsp;&bull;&nbsp;
-      <a href="{{ site.url }}">{{ site.url-pretty }}</a>
+      <a href="{{ '' | absolute_url }}">{{ site.url-pretty }}</a>
       {% endif %}
 
       {% if site.matomo %}
diff --git a/_includes/head.html b/_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="{{ '/feed.xml' | relative_url }}" />
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }} {{ site.title-separator }} {{ site.description }}" href="{{ '/feed.xml' | absolute_url }}" />
 
   {% include gtag.html %}
   {% include gtm_head.html %}
@@ -78,17 +78,17 @@
   <meta property="og:type" content="website" />
 
   {% if page.id %}
-  <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
-  <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
+  <meta property="og:url" content="{{ page.url | absolute_url }}" />
+  <link rel="canonical" href="{{ page.url | absolute_url }}" />
   {% else %}
-  <meta property="og:url" content="{{ site.url }}{{ page.url | remove: '/index.html' | remove: '.html' }}" />
-  <link rel="canonical" href="{{ site.url }}{{ page.url | remove: '/index.html' | remove: '.html' }}" />
+  <meta property="og:url" content="{{ page.url | absolute_url | strip_index }}" />
+  <link rel="canonical" href="{{ page.url | absolute_url | strip_index }}" />
   {% endif %}
 
   {% if page.share-img %}
   <meta property="og:image" content="{{ page.share-img }}" />
   {% elsif site.avatar %}
-  <meta property="og:image" content="{{ site.url }}{{ site.avatar }}" />
+  <meta property="og:image" content="{{ site.avatar | absolute_url }}" />
   {% endif %}
 
 
@@ -116,7 +116,7 @@
   {% if page.share-img %}
   <meta name="twitter:image" content="{{ page.share-img }}" />
   {% elsif site.avatar %}
-  <meta name="twitter:image" content="{{ site.url }}{{ site.avatar }}" />
+  <meta name="twitter:image" content="{{ site.avatar | absolute_url }}" />
   {% endif %}
 
   {% if site.matomo %}
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -8,9 +8,9 @@
         <span class="icon-bar"></span>
       </button>
       {% if site.title-img %}
-        <a class="navbar-brand navbar-brand-logo" href="{{ site.url }}"><img src="{{ site.title-img }}"/></a>
+        <a class="navbar-brand navbar-brand-logo" href="{{ '' | absolute_url }}"><img src="{{ site.title-img }}"/></a>
       {% else %}
-        <a class="navbar-brand" href="{{ site.url }}">{{ site.title }}</a>
+        <a class="navbar-brand" href="{{ '' | absolute_url }}">{{ site.title }}</a>
       {% endif %}
     </div>
 
@@ -40,15 +40,15 @@
 	{% if page.image and (layout.show-avatar or page.show-avatar) %}
 	<div class="avatar-container">
 	  <div class="avatar-img-border">
-	    <a href="{{ site.url }}">
+	    <a href="{{ '' | absolute_url }}">
 	      <img class="avatar-img" src="{{ page.image | relative_url }}" />
 		</a>
 	  </div>
 	</div>
 	{% elsif site.avatar and (layout.show-avatar or page.show-avatar) %}
 	<div class="avatar-container">
 	  <div class="avatar-img-border">
-	    <a href="{{ site.url }}">
+	    <a href="{{ '' | absolute_url }}">
 	      <img class="avatar-img" src="{{ site.avatar | relative_url }}" />
 		</a>
 	  </div>
diff --git a/_includes/social-share.html b/_includes/social-share.html
@@ -12,7 +12,7 @@
 
   {% if site.share-links-active.twitter %}
   <!--- Share on Twitter -->
-    <a href="https://twitter.com/intent/tweet?text={{ page.title | url_encode }}+{{ site.url }}{{ page.url }}"
+    <a href="https://twitter.com/intent/tweet?text={{ page.title | url_encode }}&url={{ page.url | absolute_url | url_encode }}"
       class="btn btn-social-icon btn-twitter" title="Share on Twitter">
       <span class="fa fa-fw fa-twitter" aria-hidden="true"></span>
       <span class="sr-only">Twitter</span>
@@ -21,7 +21,7 @@
 
   {% if site.share-links-active.facebook %}
   <!--- Share on Facebook -->
-    <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}"
+    <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url | url_encode }}"
       class="btn btn-social-icon btn-facebook" title="Share on Facebook">
       <span class="fa fa-fw fa-facebook" aria-hidden="true"></span>
       <span class="sr-only">Facebook</span>
@@ -30,7 +30,7 @@
 
   {% if site.share-links-active.linkedin %}
   <!--- Share on LinkedIn -->
-    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}"
+    <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url | absolute_url | url_encode }}"
       class="btn btn-social-icon btn-linkedin" title="Share on LinkedIn">
       <span class="fa fa-fw fa-linkedin" aria-hidden="true"></span>
       <span class="sr-only">LinkedIn</span>
diff --git a/feed.xml b/feed.xml
@@ -6,8 +6,8 @@ layout: null
   <channel>
     <title>{{ site.title | xml_escape }}</title>
     <description>{{ site.description | xml_escape }}</description>
-    <link>{{ site.url }}</link>
-    <atom:link href="{{ site.url }}/feed.xml" rel="self" type="application/rss+xml" />
+    <link>{{ '' | absolute_url }}</link>
+    <atom:link href="{{ 'feed.xml' | absolute_url }}" rel="self" type="application/rss+xml" />
     {% for post in site.posts limit:20 %}
       <item>
         <title>{{ post.title | xml_escape }}</title>
@@ -16,8 +16,8 @@ layout: null
           {{ post.content | strip_html | xml_escape | truncatewords: 50 }}
         </description>
         <pubDate>{{ post.date | date: "%a, %d %b %Y %H:%M:%S %z" }}</pubDate>
-        <link>{{ site.url }}{{ post.url }}</link>
-        <guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
+        <link>{{ post.url | absolute_url }}</link>
+        <guid isPermaLink="true">{{ post.url | absolute_url }}</guid>
       </item>
     {% endfor %}
   </channel>
diff --git a/tags.html b/tags.html
@@ -23,7 +23,7 @@ <h2 id="{{- tag -}}" class="linked-section">
     <div class="post-list">
         {%- for post in site.tags[tag] -%}
             <div class="tag-entry">
-                <a href="{{- site.url -}}{{- post.url -}}">{{- post.title -}}</a>
+                <a href="{{ post.url | relative_url }}">{{- post.title -}}</a>
                 <div class="entry-date">
                     <time datetime="{{- post.date | date_to_xmlschema -}}">{{- post.date | date: "%B %d, %Y" -}}</time>
                 </div>
