Add Jekyll SEO plugin

- Add all the Apple touch and Microsoft icons
- Fix Jekyll config error
- Add a `browserconfig.xml` file
- Add `alt`, `title`, `width` and `height` attributes to images
- Add `lang="en"` to the start `html` tag
- Add `meta viewport` tag
- Created `maskable icon`
- Created `Safari pinned tab icon`
- Add all the Android icon sizes
- Set `favicon.ico` to 48px square
- Strip blank line from HTML
- Fix missing HTTPS on link

https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/
https://github.com/jekyll/jekyll-seo-tag

Author: jbampton

Gemfile

@@ -4,6 +4,7 @@ gem 'github-pages', group: :jekyll_plugins
 
 group :jekyll_plugins do
   gem 'jekyll-feed'
+  gem 'jekyll-seo-tag'
   gem 'jekyll-sitemap'
 end
 

Gemfile.lock

@@ -276,6 +276,7 @@ DEPENDENCIES
   git
   github-pages
   jekyll-feed
+  jekyll-seo-tag
   jekyll-sitemap
   mgem
   yard-coderay

_config.yml

@@ -14,6 +14,16 @@ include: _index.html
 plugins:
   - jekyll-feed
   - jekyll-sitemap
+  - jekyll-seo-tag
+include: ['_index.html']
+defaults:
+  - scope:
+      path: ''
+    values:
+      image:
+        path: '/assets/images/mruby_logo_red_icon.png'
+        height: 300
+        width: 300
 exclude:
   - CODEOWNERS
   - Gemfile

_includes/header.html

@@ -1,9 +1,7 @@
         <meta charset="utf-8">
-
+        <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>{{ page.title }}</title>
 
-        {% include icons.html %}
-
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
 
@@ -16,3 +14,6 @@
 
         <!-- Custom CSS -->
         <link rel="stylesheet" href="/assets/css/main.css">
+
+        {% include icons.html %}
+        {% seo title=false %}

_includes/icons.html

@@ -1,8 +1,20 @@
+<!-- Favicon -->
+<link rel="apple-touch-icon" sizes="57x57" href="/assets/images/icons/apple-touch-icon-57x57.png?v=1">
+<link rel="apple-touch-icon" sizes="60x60" href="/assets/images/icons/apple-touch-icon-60x60.png?v=1">
+<link rel="apple-touch-icon" sizes="72x72" href="/assets/images/icons/apple-touch-icon-72x72.png?v=1">
+<link rel="apple-touch-icon" sizes="76x76" href="/assets/images/icons/apple-touch-icon-76x76.png?v=1">
+<link rel="apple-touch-icon" sizes="114x114" href="/assets/images/icons/apple-touch-icon-114x114.png?v=1">
+<link rel="apple-touch-icon" sizes="120x120" href="/assets/images/icons/apple-touch-icon-120x120.png?v=1">
+<link rel="apple-touch-icon" sizes="144x144" href="/assets/images/icons/apple-touch-icon-144x144.png?v=1">
+<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/icons/apple-touch-icon-152x152.png?v=1">
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/icons/apple-touch-icon-180x180.png?v=1">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/icons/favicon-16x16.png?v=1">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/icons/favicon-32x32.png?v=1">
+<link rel="icon" type="image/png" sizes="192x192" href="/assets/images/icons/android-chrome-192x192.png?v=1">
+<link rel="manifest" href="/assets/images/icons/site.webmanifest?v=1">
+<link rel="mask-icon" href="/assets/images/icons/safari-pinned-tab.svg?v=1" color="#e0115f">
+<link rel="shortcut icon" href="/favicon.ico?v=1">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-TileImage" content="/assets/images/icons/mstile-144x144.png?v=1">
+<meta name="msapplication-config" content="/browserconfig.xml?v=1">
 <meta name="theme-color" content="#e0115f">
-
-        <!-- Favicon -->
-        <link rel="icon" type="image/x-icon" href="/favicon.ico">
-        <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/icons/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/icons/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/icons/favicon-16x16.png">
-        <link rel="manifest" href="/assets/images/icons/site.webmanifest">

_includes/navigation.html

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-md navbar-header navbar-mruby
             justify-content-between pt-0" role="navigation">
   <a href="/">
-    <img src="/assets/images/mruby_header.png" alt="mruby" title="mruby">
+    <img src="/assets/images/mruby_header.png" alt="mruby" title="mruby" width="214" height="90">
   </a>
   <div>
     <ul class="nav navbar-nav">

_layouts/default.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     {% include header.html %}
   </head>

_layouts/post.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     {% include header.html %}
   </head>

assets/images/icons/android-chrome-144x144.png

@@ -2,12 +2,57 @@
   "name":"mruby Lightweight Ruby",
   "short_name":"mruby",
   "icons":[
-    {"src":"/assets/images/icons/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},
-    {"src":"/assets/images/icons/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],
+    {
+      "src": "/assets/images/icons/android-chrome-36x36.png?v=1",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/icons/android-chrome-48x48.png?v=1",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/icons/android-chrome-72x72.png?v=1",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/icons/android-chrome-96x96.png?v=1",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/icons/android-chrome-144x144.png?v=1",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src":"/assets/images/icons/android-chrome-192x192.png?v=1",
+      "sizes":"192x192",
+      "type":"image/png"
+    },
+    {
+      "src": "/assets/images/icons/android-chrome-256x256.png?v=1",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src":"/assets/images/icons/android-chrome-512x512.png?v=1",
+      "sizes":"512x512",
+      "type":"image/png"
+    },
+    {
+      "src": "/assets/images/icons/maskable-icon.png?v=1",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }],
   "theme_color":"#e0115f",
   "background_color":"#ffffff",
   "display":"standalone",
   "start_url": "/?source=pwa",
   "scope": "/",
-  "orientation":"portrait"
+  "orientation":"portrait",
+  "lang":"en"
 }

assets/images/icons/android-chrome-256x256.png

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/assets/images/icons/ms-icon-70x70.png"/><square150x150logo src="/assets/images/icons/ms-icon-150x150.png"/><square310x310logo src="/assets/images/icons/ms-icon-310x310.png"/><TileColor>#e0115f</TileColor></tile></msapplication></browserconfig>

assets/images/icons/android-chrome-36x36.png

@@ -5,7 +5,7 @@
 
 <div class="row clearfix">
   <div class="col-md-12 column mruby-is">
-    <img src="/assets/images/mruby_logo_red_icon.png"/>
+    <img src="/assets/images/mruby_logo_red_icon.png" alt="mruby" title="mruby" width="300" height="300">
     <p>
     mruby is the lightweight implementation of the <a href="https://www.ruby-lang.org">Ruby language</a> complying with part of the <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=59579">ISO standard</a>. mruby can be linked and embedded within your application.
     </p>