jekyll-theme-endless 0.11.1 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1bcbace81dbd3e228145d6e4d38e953c9bb860ccabed12b6be20bb786e81522
-  data.tar.gz: 6e3410eba76600a6d3fa3121133dfa0384df7770dc99ac4da3ca2b3901c3f661
+  metadata.gz: 60b46c41a7e2d1ea7e8d81a831eb2c845cb1f6c75644b948958d60c73f3574ae
+  data.tar.gz: e2a96a51e5daf2a464a5aa763dbf7bf34f0508d61f5536a32b764209b6c5ef96
 SHA512:
-  metadata.gz: 160709219596590375f284eb0975ae01815435843c395213fb44564a6097768feaacc0cfae907c19e55ff04d4983268e4503f2f8cea47f7021bc937d0feffbec
-  data.tar.gz: b12a02b651831f75773ac35914e67d457987af08f92fba98207448c890f2f205e897f28a433ed84aadd5ed602555cfcefa1b521a364033738c5c51339c647188
+  metadata.gz: d9a0e06c8822104785c86231c4a10c649ea7ee8d2f2702e03caa034624d795c35c47f86a29bff6b2b50be1ff876df43b2582d1e607623ee202d8c5631b39c83f
+  data.tar.gz: 97f3aec66a0b12da78bf5e5d2f03a865e238ffbe43cc3a6e41ad40f57de1a4e67dc8351327e7ee88050185d397076e64de468e799c0a649418441ba70353bd86

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 Sven Boekhoff
+Copyright (c) 2020-2024 Sven Boekhoff
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.adoc

@@ -1,14 +1,18 @@
 = jekyll-theme-endless
 :page-menu_label: Documentation
 :page-menu_position: 300
+:toc: preamble
+:toclevels: 3
+:page-summary: "Explore the documentation for jekyll-theme-endless: a Jekyll theme for AsciiDoc blogging, featuring tag cloud, code highlighting, responsive design, and more."
 
 
 
 `jekyll-theme-endless` is a theme for the static site generator https://jekyllrb.com/[Jekyll].
 The theme is ready to be used with posts written in https://asciidoctor.org/[AsciiDoc] using the
 https://github.com/asciidoctor/jekyll-asciidoc[Jekyll AsciiDoc plugin].
-Moreover, it is shipped with a plugin that generates a *tag cloud*.
+Moreover, it is shipped with a plugin that generates a *tag cloud* and a page for each tag, listing all posts associated with it.
 The syntax of source code is highlighted using https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers[Rouge].
+Below you'll find a link:#features[list of the key features of this theme].
 
 The repository of this Jekyll theme is located at:
 https://gitlab.com/jekyll-theme-endless/jekyll-theme-endless.gitlab.io.
@@ -17,12 +21,18 @@ The gem is published on https://rubygems.org/gems/jekyll-theme-endless.
 
 
 
+
+
 == Quicktstart for testing
 
 * Clone the repository
 * Run `bundle exec jekyll serve --config _config.yml,_data.yml`
 * Open http://127.0.0.1:4000/ to view a page using this theme
 
+
+
+
+
 == Installation
 
 Add this line to your Jekyll site's `Gemfile`:
@@ -60,6 +70,22 @@ gem install jekyll-theme-endless
 
 
 
+
+
+[[features]]
+== Features
+
+include::content/features.adoc[]
+
+
+=== Planned features
+
+include::content/features-planned.adoc[]
+
+
+
+
+
 == General information
 
 The theme is styled using https://getbootstrap.com/[Bootstrap] that is added
@@ -72,6 +98,25 @@ If you want to use Markdown AND have HTML-commands in the title, simply escape t
 
 
 
+
+
+== Example posts and pages
+
+The project repository contains
+
+* Two example posts with examples and explanations on which front matter variables you can use in posts and pages, and how to use them.
+** link:/asciidoc-example/[Example post for AsciiDoc with explanations]
+** link:/markdown-example/[Example post for Markdown with explanations]
+* Two example pages (the showrooms) where you can explore the features of Markdown and AsciiDoc. In the source code, you can see how to implement these yourself.
+** link:/asciidoc-showroom/[AsciiDoc Showroom]
+** link:/markdown-showroom/[Markdown Showroom]
+
+CAUTION: If you want to use special characters in your tags, you need to create them through the Jekyll front matter instead of the AsciiDoc variable `page-tags`. Further explanations can be found in the examples above and the link:/release-0.12.X/[release notes of version 0.12.0].
+
+
+
+
+
 == Usage
 
 Here I describe available layouts, includes, SASS- and other assets.
@@ -88,6 +133,8 @@ This will copy the theme-folder containing all its files into the current direct
 From there, you can selectively move files to your project and modify them as needed.
 Your (modified) copy will afterwards overwrite the contents provided by the theme.
 
+NOTE: Whenever you create custom versions of files in this theme, consider whether they might also be useful for others. In that case, you could contribute the changes to the project. Feel free to contact me about it.
+
 
 
 === Layouts
@@ -97,6 +144,7 @@ Your (modified) copy will afterwards overwrite the contents provided by the them
 HTML boilerplate code used for all layouts.
 
 
+
 `_layouts/default.html`::
 +
 --
@@ -106,6 +154,8 @@ Contains a *navigation bar* with a configurable brand-label.
 Set `brand` in your `_config.yml`, to determine what is shown on the left side of the navigation.
 Example:
 
+TIP: The values for `brand`, `title` and `subtitle` are _not_ escaped by the layout. Thus, you _can_ use HTML-commands.
+
 [source, yaml]
 ----
 brand: '"<i>endless</i>"-Theme'
@@ -139,6 +189,7 @@ disclaimer: >- # this means to ignore newlines until the next entry
 --
 
 
+
 `_layouts/page.html`::
 +
 --
@@ -172,10 +223,13 @@ Content
 ----
 --
 
+
+
 `_layouts/page-postlist.html`::
 Layout of page-content with a list of blog posts at the end.
 
 
+
 `_layouts/page-tag.html`::
 +
 --
@@ -200,6 +254,7 @@ include::_layouts/page-tag.html[]
 --
 
 
+
 `_layouts/page-tag-template.html`::
 +
 --
@@ -208,6 +263,7 @@ This file is a template layout that can be included in `page-tag.html`.
 --
 
 
+
 `_layouts/post.html`::
 +
 --
@@ -256,6 +312,28 @@ I typically use this page as a layout for my "about" page.
 
 === Includes
 
+`_includes/aside_navigation.html`::
+
+The first of three elements displayed alongside the page content (or at the end of the page on mobile devices).
+This typically contains blog navigation elements such as 'Recent Articles,' 'Tag Cloud,' etc.
+It's best practice to wrap the content in an `<aside>` element.
+
+
+
+`_includes/aside_info.html`::
+
+The second of the three elements, typically providing additional information about the blog (e.g., a link to the RSS feed).
+This content is also ideally wrapped in an `<aside>` element.
+
+
+
+`_includes/aside_more.html`::
+
+The third of the three elements is typically used to display links to partner sites, sponsorships, or advertisements relevant to the blog's audience.
+Similar to the other sections, this content is best organized within an `<aside>` element to ensure it complements the main content without disrupting the reader's experience.
+
+
+
 `_includes/container_end-of-document.html`::
 
 An empty file that can be overwritten by the user of the theme.
@@ -264,6 +342,43 @@ It can be used to e.g. append JavaScript commands to the end of the file
 without having to rewrite a complete layout file.
 
 
+
+`_includes/container_start-of-main.html`::
+
+The content of this file is inserted *above* the main content area (the section containing the page content and blog navigation). The content should be wrapped in a `<div>` element.
+
+
+
+`_includes/container_end-of-main.html`::
+
+The content of this file is inserted *below* the main content area — above the footer. The content should be wrapped in a `<div>` element.
+
+
+
+`_includes/container_start-of-page.html`::
+
+The content of this file is inserted between the heading and the main content of the page. The content should be enclosed within a `<div>` element.
+
+
+
+`_includes/container_end-of-page.html`::
+
+The content of this file is inserted at the end of the page content—directly after the main page content. The content should be enclosed within a `<div>` element.
+
+
+
+`_includes/container_start-of-post.html`::
+
+The content of this file is inserted between the tag list and the main content of the post. The content should be enclosed within a `<div>` element.
+
+
+
+`_includes/container_end-of-post.html`::
+
+The content of this file is inserted at the end of the post, below the navigation buttons linking to the previous and next posts. The content should be enclosed within a `<div>` element.
+
+
+
 `_includes/function_list-pages.html`::
 +
 --
@@ -282,20 +397,31 @@ This can be useful for your 404 page, which should be generated by Jekyll, but n
 --
 
 
+
 `_includes/function_list-posts.html`::
 Generates a list containing blog posts.
 
 
+
 `_includes/function_post-in-list-short.html`::
 Generates the code to display a single post in the list of blog posts.
 An entry consists of the title of the blog post linked to the article.
 If a permalink is configured for the article, this is indicated by an icon.
 
 
+
 `_includes/function_tag-cloud.html`::
 Generates a tag cloud.
 
 
+
+`_includes/content_footer-powered-by.html`::
+
+Contains the information at the very bottom right of the footer, where the powered-by details are displayed.
+This section can be replaced or removed as desired.
+
+
+
 `_includes/content_footer-usernames.html`::
 +
 --
@@ -315,25 +441,29 @@ username_linkedin: XXXX
 --
 
 
+
 `_includes/function_tag-list.html`::
 Generates a formatted list of tags.
 This is e.g. used to display the tags of a blog post.
 
+
+
 `_includes/function_show-dates.html`::
 +
 --
 Show the creation date and (if present) the date a blog post was last edited.
-The date of the last edit can be configured by setting a value for the page-variable `lastedit`.
+The date of the last edit can be configured by setting a value for the page-variable `last_modified_at`.
 
 In AsciiDoc this would be e.g.:
 
 [source, asciidoc]
 ----
-:page-lastedit: 2020-10-29
+:page-last_modified_at: 2024-10-27
 ----
 --
 
 
+
 `_includes/function_show-prev-next-navigation.html`::
 Displays links to the previous and the next post of your blog.
 
@@ -363,6 +493,7 @@ tag_title_prefix: "Posts tagged with: "
 --
 
 
+
 === Styles
 
 In order to contribute SCSS-code, simply add a file `_sass/user.scss`, containing your SCSS-code.
@@ -382,6 +513,7 @@ additional-stylesheets:
 ----
 
 
+
 === Data-files
 
 `_data/tag-description.yml`::
@@ -423,6 +555,9 @@ I use, for example:
 --
 
 
+
+
+
 == Settings
 
 === Language
@@ -436,6 +571,8 @@ The default is `en`.
 
 
 
+
+
 == Contributing
 
 Bug reports and pull requests are welcome on GitLab at https://gitlab.com/jekyll-theme-endless/jekyll-theme-endless.gitlab.io.
@@ -444,6 +581,8 @@ and contributors are expected to adhere to the http://contributor-covenant.org[C
 
 
 
+
+
 == Development
 
 To set up your environment to develop this theme:
@@ -468,6 +607,8 @@ To add a custom directory to your theme-gem, please edit the regexp in `jekyll-t
 
 
 
+
+
 == License
 
 The theme is available as open source under the terms of the https://opensource.org/licenses/MIT[MIT License].

data/_config.yml

@@ -54,7 +54,7 @@ asciidoctor:
 
 # `plugins` specifies the list of plugins that are installed via RubyGems and managed through Bundler.
 # These are typically shared or third-party plugins available in the RubyGems ecosystem.
-#plugins:
+plugins:
   # Required to load the plugin that generates the tag pages.
   # jekyll-theme-endless is both a theme AND a plugin.
   # NOT required in the repository that provides the plugin.
@@ -62,8 +62,9 @@ asciidoctor:
   # Local plugins are configured via the `plugins_dir` setting,
   # which in this project has been outsourced to `_data.yml`.
   #- jekyll-theme-endless
-  # Feed plugin currently not used
-#  - jekyll-feed
+  # Generate an RSS-file with the blog-content
+  # See https://github.com/jekyll/jekyll-feed for configuration
+  - jekyll-feed
 
 # Exclude files from processing.
 #

data/_data/tag-description.yml

@@ -1,3 +1,40 @@
+GDPR:
+  short: "GDPR (General Data Protection Regulation) is a regulation enacted by the European Union to protect individuals' privacy and personal data. It imposes strict guidelines on how organizations collect, store, process, and share personal data of EU residents. Compliance with GDPR is essential for businesses handling such data, with requirements including data protection by design, user consent, and the right to access and erase data. Non-compliance can result in significant penalties."
+Schema.org:
+  short: "Schema.org is a collaborative, standardized vocabulary that provides structured data markup to help search engines better understand the content on web pages. By adding Schema.org tags to HTML, content such as events, reviews, and products can appear as rich snippets in search results, enhancing visibility and user engagement. In Jekyll, Schema.org markup can be added to templates to improve SEO and provide more context to search engines."
+SEO:
+  short: "SEO (Search Engine Optimization) refers to strategies and practices aimed at improving a website's visibility in search engine results. Effective SEO enhances a site's ranking by optimizing content, keywords, meta tags, and site structure to attract more organic traffic. In Jekyll, SEO best practices can be implemented through plugins, structured data, and thoughtful content organization."
+known issues:
+  short: "Known issues are documented problems or limitations within a software application that are acknowledged by developers but may not yet have a solution. These can include bugs, compatibility issues, or performance limitations. Known issues are often shared in release notes or support documentation to keep users informed and to suggest potential workarounds until fixes are available."
+A&B:
+  short: "Tag for testing the escaping bahaviour of Markdown and AsciiDoc frontmatter."
+escaping:
+  short: "The process of using special characters or sequences to prevent specific symbols from being interpreted in code or markup, often necessary for handling HTML, YAML, or Markdown."
+security:
+  short: "Measures and practices used to protect software, systems, and data from unauthorized access, attacks, or vulnerabilities, essential in all stages of development."
+special chars:
+  short: "Characters with special functions in code or markup, like &, <, >, which may need to be escaped to ensure proper display or functionality in web content or code."
+test-page:
+  short: "A page created to test functionality, design, or layout before publishing. Useful for checking formatting, scripts, or custom styles in a controlled environment."
+frontmatter:
+  short: "A YAML or JSON block at the beginning of a Jekyll file that contains metadata about the page, such as title, layout, and tags, which Jekyll uses to generate content dynamically."
+permalink:
+  short: "A permalink (permanent link) is a stable URL that links to a specific page, post, or content piece on a website. Permalinks are designed to remain unchanged indefinitely, ensuring that links to the content will not break over time. In Jekyll, permalinks can be customized to control the URL structure for individual pages or posts, improving both user experience and SEO."
+release notes:
+  short: "Release notes are documents that provide information about new features, bug fixes, improvements, and known issues in a new software version. They help users and developers understand changes between versions and can include details on compatibility, upgrade steps, and resolved issues. Release notes are essential for keeping stakeholders informed about software progress and updates."
+pages:
+  short: "Static or dynamic web pages in a Jekyll site, typically containing content that isn't organized chronologically, such as 'About' or 'Contact' sections."
+_includes:
+  short: "A special directory in Jekyll where reusable code snippets or partial templates, such as headers, footers, or navigation menus, are stored. Files in the _includes folder can be inserted into other templates using Liquid tags, allowing for modular and maintainable site layouts."
+RSS:
+  short: "RSS (Really Simple Syndication) is a web feed format that allows users and applications to receive updates from websites in a standardized format. By subscribing to an RSS feed, users can stay informed about new content, such as blog posts or news articles, without visiting the site directly. RSS feeds are commonly used in news aggregators and feed readers."
+
+TOC:
+  short: "TOC (Table of Contents) is a navigational aid that lists the main sections or headings of a document, allowing readers to quickly find and jump to specific content. In web content, a TOC is often generated automatically based on headings and can be particularly useful for lengthy pages or articles."
+.gitlab-ci.yml:
+  short: "A YAML file used to define GitLab CI/CD pipeline configurations, specifying jobs, stages, and conditions for automated testing, deployment, or other tasks in GitLab."
+LICENSE.txt:
+  short: "A file in a project that outlines the terms and conditions under which the software can be used, modified, or shared, commonly chosen from open-source licenses."
 SASS:
   short: "SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that adds advanced features like variables, nested rules, and mixins to standard CSS. SASS has two syntax options: the older indented syntax (SASS) and the newer, more CSS-like syntax (SCSS). The SASS syntax uses indentation instead of curly braces and semicolons, while SCSS is more similar to traditional CSS and is often preferred for its familiarity."
 cleanup:

data/_data.yml

@@ -6,13 +6,12 @@
 
 # Language. Is overriden by value of page.lang.
 lang: en
-# Brand is not escaped in the layout.
-# Thus, HTML-commands can be used.
-brand: '"<i>endless</i>"-Theme'
 
-# Title and subtile of the page
-title: jekyll-theme-endless
-subtitle: A Jekyll theme ready for AsciiDoc
+# NOTE: The values of the variables 'brand', 'title' and 'subtitle'
+# are NOT escaped in the layout. This allows you to use HTML commands.
+brand: '"<em>endless</em>"-Theme'
+title: "<code>jekyll-theme-endless</code>"
+subtitle: "A Jekyll Theme ready for <strong><em>AsciiDoc</em></strong>"
 
 author: Sven Boekhoff
 copydate: 2020-2024
@@ -39,6 +38,10 @@ tag_dir: posts-for-tag
 # Prefix to be used for the title of the tag-page
 # default: `Tag: `
 tag_title_prefix: "Posts tagged with: "
+# Should the tag descriptions be displayed as titles in the tag cloud?
+# This can make individual pages very large, especially with a high number of terms.
+# On the individual tag pages, the description will still be displayed regardless of this setting.
+tag_show_description_in_tagcloud: true
 
 # You can dynamically add import statements to assets/css/main.css
 # Just add the path (relative to the folder `_sass`) to this array
@@ -46,6 +49,11 @@ tag_title_prefix: "Posts tagged with: "
 additional-stylesheets:
   - "../theme-specific/debug"
 
+# Use CDN for external JavaScript libraries (e.g., jQuery, Bootstrap).
+# Set to true to load scripts from a CDN for faster loading times.
+# If not specified, defaults to true.
+use-cdn: true
+
 
 
 

data/_includes/aside_info.html

@@ -0,0 +1,13 @@
+{% comment %}
+This file contains the second of the three elements, which provides additional information about the blog, such as a link to the RSS feed.
+This content is also best organized within an <aside> element to keep it distinct from the main content.
+{% endcomment %}
+<aside>
+	<h3>InfoBox</h3>
+	<div class="col">
+		<p class="rss-subscribe">
+			You can also follow this blog <a href="{{ "/feed.xml" | relative_url }}" class="rss">via RSS</a>.
+		</p>
+	</div>
+</aside>
+

data/_includes/aside_more.html

@@ -0,0 +1,14 @@
+{% comment %}
+This file contains the third of the three elements, often used to display links to partner sites or advertisements.
+This section is intended to showcase external resources or sponsored content relevant to the blog’s audience,
+and it is also best placed within an <aside> element.
+
+	<aside>
+		<h3>Ads</h3>
+		<div class="col">
+			Ads
+		</div>
+	</aside>
+
+{% endcomment %}
+

data/_includes/aside_navigation.html

@@ -0,0 +1,30 @@
+{% comment %}
+This file contains the first of the three elements displayed alongside the page content (or at the end of the page on mobile devices).
+It typically includes blog navigation, such as 'Recent Articles' or 'Tag Cloud,' and is ideally wrapped in an <aside> element.
+{% endcomment %}
+<aside>
+	<h3>Blog Navigation</h3>
+
+	<!-- Number of posts -->
+	<p>
+		Total number of posts: <strong>{{ site.posts | size }}</strong>
+	</p>
+
+	<!-- Recent Posts -->
+	<h4>Recent Posts:</h4>
+	<ul>
+		{% assign postlist = site.posts | sort:"date" | reverse %}
+		{% for post in postlist offset: 0 limit: 5 %}
+			{% comment %}
+			'title' is not escaped, as the value should already be escaped by AsciiDoc through asciidocify.
+			{% endcomment %}
+			<li><a href="{{ post.url | relative_url }}">{{ post.title }}</a></li>
+		{% endfor %}
+	</ul>
+
+	<!-- Tag Cloud -->
+	<h4>Tag Cloud:</h4>
+	{% include function_tag-cloud.html %}
+
+</aside>
+

data/_includes/container_end-of-main.html

@@ -0,0 +1,14 @@
+{% comment %}
+This document is empty by default.
+It can be supplemented with user content that will be displayed below the main content area — above the footer.
+This allows you to add content without needing to modify the entire layout.
+The content should be enclosed within a <div> element.
+
+If you want to check the position of this element, simply move the following code block from the comment section down to where it will render.
+
+<div style="background-color: blueviolet; font-size: 3em; font-weight: bold; text-align: center;">
+	END of MAIN
+</div>
+
+{% endcomment %}
+

data/_includes/container_end-of-page.html

@@ -0,0 +1,14 @@
+{% comment %}
+This document is empty by default.
+It can be extended with user content that will display at the end of the page content — directly after the main content.
+This allows you to add content without needing to change the entire layout.
+The content should be enclosed within a <div> element.
+
+To check the position of this element, simply move the following code block from the comment section down to where it will render.
+
+<div style="background-color: blueviolet; font-size: 3em; font-weight: bold; text-align: center;">
+	END of PAGE
+</div>
+
+{% endcomment %}
+

data/_includes/container_end-of-post.html

@@ -0,0 +1,14 @@
+{% comment %}
+This document is empty by default.
+It can be extended with user content that will display at the end of the post, below the navigation buttons linking to the previous and next posts.
+This allows you to add content without needing to modify the entire layout.
+The content should be enclosed within a <div> element.
+
+To check the position of this element, simply move the following code block from the comment section down to where it will render.
+
+<div style="background-color: blueviolet; font-size: 3em; font-weight: bold; text-align: center;">
+	END of POST
+</div>
+
+{% endcomment %}
+

data/_includes/container_start-of-main.html

@@ -0,0 +1,14 @@
+{% comment %}
+This document is empty by default.
+It can be extended with user content that will display above the main content area (the section containing the page content and blog navigation).
+This allows you to add content without needing to modify the entire layout.
+The content should be enclosed within a <div> element.
+
+To check the position of this element, simply move the following code block from the comment section down to where it will render.
+
+<div style="background-color: greenyellow; font-size: 3em; font-weight: bold; text-align: center;">
+	START of MAIN
+</div>
+
+{% endcomment %}
+

data/_includes/container_start-of-page.html

@@ -0,0 +1,14 @@
+{% comment %}
+This document is empty by default.
+It can be extended with user content that will display between the heading and the main content of the page.
+This allows you to add content without needing to modify the entire layout.
+The content should be enclosed within a <div> element.
+
+To check the position of this element, simply move the following code block from the comment section down to where it will render.
+
+<div style="background-color: greenyellow; font-size: 3em; font-weight: bold; text-align: center;">
+	START of PAGE
+</div>
+
+{% endcomment %}
+

data/_includes/container_start-of-post.html

@@ -0,0 +1,14 @@
+{% comment %}
+This document is empty by default.
+It can be extended with user content that will display between the tag list and the main content of the post.
+This allows you to add content without needing to modify the entire layout.
+The content should be enclosed within a <div> element.
+
+To check the position of this element, simply move the following code block from the comment section down to where it will render.
+
+<div style="background-color: greenyellow; font-size: 3em; font-weight: bold; text-align: center;">
+	START of POST
+</div>
+
+{% endcomment %}
+

data/_includes/content_footer-powered-by.html

@@ -0,0 +1,7 @@
+{% comment %}
+"Powered by" information in the footer.
+{% endcomment %}
+
+<p>
+	Powered by <a href="https://jekyll-theme-endless.gitlab.io/">jekyll-theme-endless</a>.
+</p>

data/_includes/content_footer-usernames.html

@@ -6,31 +6,31 @@ List of contacts in adress-bar.
 	{% if site.username_gitlab %}
 		<li>
 			<i class="fa fa-gitlab"></i>
-			<a href="https://gitlab.com/{{ site.username_gitlab }}">{{ site.username_gitlab }}</a>
+			<a href="https://gitlab.com/{{ site.username_gitlab | escape }}">{{ site.username_gitlab | escape }}</a>
 		</li>
 	{% endif %}
 	{% if site.username_github %}
 		<li>
 			<i class="fa fa-github"></i>
-			<a href="https://github.com/{{ site.username_github }}">{{ site.username_github }}</a>
+			<a href="https://github.com/{{ site.username_github | escape }}">{{ site.username_github | escape }}</a>
 		</li>
 	{% endif %}
 	{% if site.username_xing %}
 		<li>
 			<i class="fa fa-xing"></i>
-			<a href="https://www.xing.com/profile/{{ site.username_xing }}">{{ site.username_xing }}</a>
+			<a href="https://www.xing.com/profile/{{ site.username_xing | escape }}">{{ site.username_xing | escape }}</a>
 		</li>
 	{% endif %}
 	{% if site.username_linkedin %}
 		<li>
 			<i class="fa fa-linkedin"></i>
-			<a href="https://de.linkedin.com/in/{{ site.username_linkedin }}">{{ site.username_linkedin }}</a>
+			<a href="https://de.linkedin.com/in/{{ site.username_linkedin | escape }}">{{ site.username_linkedin | escape }}</a>
 		</li>
 	{% endif %}
 	{% if site.email %}
 		<li>
 			<i class="fa fa-at"></i>
-			<a href="mailto:{{ site.email }}">{{ site.email }}</a>
+			<a href="mailto:{{ site.email | escape }}">{{ site.email | escape }}</a>
 		</li>
 	{% endif %}
 </ul>