Update icon

Add imagemin
Add web manifest

.gitignore

@@ -37,6 +37,7 @@ coverage/
 .env
 
 # Distribution assets
+theme/images
 theme/bundle.js
 theme/style.css
 theme/.timestamp

build/imagemin.js

@@ -0,0 +1,32 @@
+const { writeFile } = require('fs');
+const { resolve } = require('path');
+const imagemin = require('imagemin');
+const imageminPngquant = require('imagemin-pngquant');
+const imageminGifsicle = require('imagemin-gifsicle');
+const imageminJpegtran = require('imagemin-jpegtran');
+
+imagemin(['images/*.{png,jpg,gif}'], 'theme/images', {
+  plugins: [
+    imageminPngquant({
+      quality: '65-80',
+    }),
+    imageminGifsicle({
+      optimizationLevel: 3,
+    }),
+    imageminJpegtran(),
+  ],
+}).then((files) => {
+  files.forEach((file) => {
+    const path = resolve(__dirname, '../', file.path);
+    writeFile(path, file.data, (error) => {
+      if (error) {
+        console.error(error);
+        process.exit(1);
+      }
+      console.log(`File written: ${path}`);
+    });
+  });
+}).catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

css/logo.css

@@ -6,7 +6,6 @@
   display: block;
   margin: 0 auto;
   max-width: 320px;
-  overflow: hidden;
   position: relative;
 }
 

css/metadata.css

@@ -76,15 +76,15 @@
   display: inline-block;
   margin-right: var(--space-sm);
   transition:
-    filter var(--transition-md) ease-out,
-    transform var(--transition-md) ease-out;
+    filter var(--transition-fs) ease-out,
+    transform var(--transition-fs) ease-out;
   transform-origin: center bottom;
 }
 
 .metadata__share-link:focus,
 .metadata__share-link:hover {
   filter: saturate(1.5) contrast(1.5);
-  transform: scale(1.3);
+  transform: scale(1.1);
 }
 
 /**

css/page.css

@@ -4,7 +4,7 @@
   grid-gap: var(--space-sm);
   grid-template-columns: 1fr;
   max-width: 1200px;
-  margin: 0 var(--space-sm);
+  margin: var(--space-sm) var(--space-sm) 0;
   padding: 0;
 }
 

css/social.css

@@ -7,14 +7,14 @@
 .social__link {
   display: inline-block;
   transition:
-    filter var(--transition-md) ease-out,
-    transform var(--transition-md) ease-out;
+    filter var(--transition-fs) ease-out,
+    transform var(--transition-fs) ease-out;
   transform-origin: center bottom;
 }
 
 .social__link:focus,
 .social__link:hover {
   filter: saturate(1.5) contrast(1.5);
-  transform: scale(1.3);
+  transform: scale(1.1);
 }
 

package.json

@@ -9,10 +9,11 @@
     "url": "https://github.com/danhead/windycoys"
   },
   "scripts": {
-    "build": "run-s css:compile js:compile",
+    "build": "run-s images css:compile js:compile",
     "css": "run-p -c css:*",
     "css:compile": "postcss -o theme/style.css css/index.css",
     "css:lint": "stylelint --config .stylelintrc \"css/**/*.css\"",
+    "images": "node build/imagemin.js",
     "jest": "jest",
     "jest:watch": "jest --watch",
     "js": "run-s js:*",
@@ -23,6 +24,7 @@
     "test": "run-s css:lint js:lint jest",
     "watch": "run-p watch:*",
     "watch:css": "nodemon -q --watch css -e css --exec npm run css",
+    "watch:images": "nodemon -q --watch images -e png,jpg,gif --exec npm run images",
     "watch:js": "nodemon -q --watch js -e js --exec npm run js"
   },
   "devDependencies": {
@@ -40,6 +42,10 @@
     "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "^2.14.0",
+    "imagemin": "^6.0.0",
+    "imagemin-gifsicle": "^6.0.1",
+    "imagemin-jpegtran": "^6.0.0",
+    "imagemin-pngquant": "^6.0.0",
     "jest": "^22.4.4",
     "npm-run-all": "^4.1.5",
     "postcss-banner": "^3.0.0",

theme/functions.php

@@ -22,7 +22,7 @@ class Windycoys_Walker_Comment extends Walker_Comment {
     $output .= '<div class="comment__foot">';
     $output .= '<a class="comment__reply" data-comment-author="'.$author.'" data-comment-id="'.$id.'" href="'.$reply_link.'">';
     $output .= '<span class="comment__reply-icon">';
-    $output .= '<svg class="icon icon--extra-small"><use href="#icon-reply"></use></svg></span>';
+    $output .= '<svg class="icon icon--extra-small"><use xlink:href="#icon-reply"></use></svg></span>';
     $output .= '<span class="comment__reply-text">Reply</span></a>';
     $output .= '<div class="comment__inline-reply"></div>';
     $output .= '</div></div></li>';

theme/header.php

@@ -4,6 +4,7 @@ $deploy_timestamp = windycoys_get_deploy_timestamp();
 if ($deploy_timestamp) {
   $css_url .= '?t=' . $deploy_timestamp;
 }
+$manifest = get_template_directory_uri() . '/manifest.json';
 ?>
 <!doctype html>
 <html <?php language_attributes(); ?>>
@@ -11,9 +12,10 @@ if ($deploy_timestamp) {
     <meta charset="<?php bloginfo('charset'); ?>">
     <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' &laquo; '; } ?> <?php bloginfo('name'); ?></title>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#4b88b6">
+    <meta name="theme-color" content="#201f42">
     <meta name="description" content="<?php bloginfo('description'); ?>">
     <?php wp_head(); ?>
+    <link rel="manifest" href="<?php echo $manifest ?>">
     <link rel="stylesheet" href="<?php echo $css_url ?>">
     <link href="//fonts.googleapis.com/css?family=Open+Sans|Raleway:700" rel="stylesheet">
   </head>

theme/manifest.json

@@ -0,0 +1,47 @@
+{
+  "name": "WindyCOYS",
+  "description": "Spurs Blog, often focussing on goal analysis & under 18/loan players",
+  "lang": "en-GB",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#201f42",
+  "icons": [
+    {
+      "src": "images/icon_48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon_72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon_96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon_144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon_168.png",
+      "sizes": "168x168",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon_192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon_512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+
+  ]
+}

theme/partials/banner.php

@@ -1,17 +1,17 @@
 <div class="social">
   <a class="social__link" href="https://www.facebook.com/WindyCOYS/" aria-label="WindyCOYS on Facebook">
     <svg class="icon icon--facebook" aria-hidden="true">
-      <use href="#icon-facebook"></use>
+      <use xlink:href="#icon-facebook"></use>
     </svg>
   </a>
   <a class="social__link" href="https://twitter.com/windycoys/" aria-label="WindyCOYS on Twitter">
     <svg class="icon icon--twitter" aria-hidden="true">
-      <use href="#icon-twitter"></use>
+      <use xlink:href="#icon-twitter"></use>
     </svg>
   </a>
   <a class="social__link" href="/feed" aria-label="WindyCOYS RSS Feed">
     <svg class="icon icon--rss" aria-hidden="true">
-      <use href="#icon-rss"></use>
+      <use xlink:href="#icon-rss"></use>
     </svg>
   </a>
 </div>

theme/partials/footer.php

@@ -4,7 +4,7 @@
   </div>
   <div class="footer__body">
     <a href="https://www.newsnow.co.uk/h/Sport/Football/Premier+League/Tottenham+Hotspur" title="Click here for more Tottenham Hotspur news from NewsNow">
-      <img src="<?php echo get_template_directory_uri() ?>/img/newsnow_sw.gif" alt="As featured on NewsNow: Tottenham Hotspur news">
+      <img src="<?php echo get_template_directory_uri() ?>/images/newsnow_sw.gif" alt="As featured on NewsNow: Tottenham Hotspur news">
     </a>
   </div>
 </footer>

theme/partials/logo.php

@@ -1,6 +1,6 @@
 <div class="logo">
   <a class="logo__link" href="<?php echo home_url(); ?>">
-    <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo__image">
+    <img src="<?php echo get_template_directory_uri(); ?>/images/icon.png" alt="WindyCOYS logo" class="logo__image">
   </a>
 </div>
 

theme/partials/metadata.php

@@ -2,7 +2,7 @@
   <div class="metadata__item metadata__item--light">
     <span class="metadata__icon">
       <svg class="icon" aria-hidden="true">
-        <use href="#icon-calendar"></use>
+        <use xlink:href="#icon-calendar"></use>
       </svg>
     </span>
     <span class="metadata__text">
@@ -14,7 +14,7 @@
     <a class="metadata__link" href="<?php echo get_edit_post_link() ?>">
       <span class="metadata__icon">
         <svg class="icon" aria-hidden="true">
-          <use href="#icon-edit"></use>
+          <use xlink:href="#icon-edit"></use>
         </svg>
       </span>
       <span class="metadata__text">
@@ -27,7 +27,7 @@
     <a class="metadata__link" href="<?php the_permalink() ?>#comments">
       <span class="metadata__icon">
         <svg class="icon" aria-hidden="true">
-          <use href="#icon-comments"></use>
+          <use xlink:href="#icon-comments"></use>
         </svg>
       </span>
       <span class="metadata__text">
@@ -38,7 +38,7 @@
   <div class="metadata__item">
     <span class="metadata__icon">
       <svg class="icon" aria-hidden="true">
-        <use href="#icon-hash"></use>
+        <use xlink:href="#icon-hash"></use>
       </svg>
     </span>
     <span class="metadata__text">
@@ -48,12 +48,12 @@
   <div class="metadata__item">
     <a class="metadata__share-link" href="#" aria-label="Facebook">
       <svg class="icon icon--facebook" aria-hidden="true">
-        <use href="#icon-facebook"></use>
+        <use xlink:href="#icon-facebook"></use>
       </svg>
     </a>
     <a class="metadata__share-link" href="<?php windycoys_share_twitter_url() ?>" aria-label="Twitter">
       <svg class="icon icon--twitter" aria-hidden="true">
-        <use href="#icon-twitter"></use>
+        <use xlink:href="#icon-twitter"></use>
       </svg>
     </a>
   </div>

theme/partials/navigation.php

@@ -20,12 +20,12 @@
     <div class="nav__social">
       <a class="nav__social-link" href="https://www.facebook.com/WindyCOYS/">
         <svg class="icon icon--large">
-          <use href="#icon-facebook"></use>
+          <use xlink:href="#icon-facebook"></use>
         </svg>
       </a>
       <a class="nav__social-link" href="https://twitter.com/windycoys/">
         <svg class="icon icon--large">
-          <use href="#icon-twitter"></use>
+          <use xlink:href="#icon-twitter"></use>
         </svg>
       </a>
     </div>

theme/partials/pagination.php

@@ -46,7 +46,7 @@ function format_link($link) {
     <div class="pagination__previous">
       <a class="pagination__link" href="<?php echo get_previous_url($base_url, $current) ?>" aria-label="Previous page">
         <svg class="icon icon--small">
-          <use href="#icon-chevron-left"></use>
+          <use xlink:href="#icon-chevron-left"></use>
         </svg>
       </a>
     </div>
@@ -65,7 +65,7 @@ function format_link($link) {
     <div class="pagination__next">
       <a class="pagination__link" href="<?php echo get_next_url($base_url, $current) ?>" aria-label="Next page">
         <svg class="icon icon--small">
-          <use href="#icon-chevron-right"></use>
+          <use xlink:href="#icon-chevron-right"></use>
         </svg>
       </a>
     </div>

theme/tag.php

@@ -8,7 +8,7 @@
       <h1 class="title">
         <span class="title__icon">
           <svg class="icon icon--large" aria-hidden="true">
-            <use href="#icon-hash"></use>
+            <use xlink:href="#icon-hash"></use>
           </svg>
         </span>
         <span class="title__text">