SEO and PWA

This commit is contained in:
sakrecoer 2020-08-05 15:54:25 +02:00
parent 233b264e0f
commit ec5f87cbeb
22 changed files with 169 additions and 6 deletions

View file

@ -21,7 +21,7 @@
<a target="_blank" alt="{{ site.title }} on {{ nw.name }}" title="{{ site.title }} on {{ nw.name }}" rel="noopener"
href="{{ nw.url }}" class="icon small fab {{ nw.icon }}"><span class="label">{{ nw.name }}</span></a>
{% endfor %}
<a target="_blank" alt="email" href="mailto:{{ site.social.mail }}" class="icon small fas fa-envelope-open-text"><span
<a target="_blank" alt="email" title="email" href="mailto:{{ site.social.mail }}" class="icon small fas fa-envelope-open-text"><span
class="label">Email</span></a>
</div>
<small>

View file

@ -9,5 +9,5 @@ _paq.push(['enableLinkTracking']);
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '{{ site.matomo_site_id }}']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src='//cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://cdn.matomo.cloud/terminalnetwork.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
})();

View file

@ -16,6 +16,46 @@
<link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
<link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
<noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscripts-20200805.css" /></noscript>
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="{{ site.bg }}"/>
<script type="text/javascript">
// Registration of service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register("/service-worker.js").then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
else{
console.log('Service Workers not supported');
}
// Installation of service worker
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, {ignoreSearch:true}).then(response => {
return response || fetch(event.request);
})
);
});
</script>
</head>
<body>
@ -37,5 +77,7 @@
{% endunless %}
{% include cookie-consent.html %}
{% include scripts.html %}
</body>
</html>
</html>

View file

@ -133,7 +133,7 @@ $font: (
// Palette.
$palette: (
bg: rgb(60, 42, 82),
bg: #3c2a52,
bg-alt: rgba(60, 42, 82, 0.75),
fg: #ebdbf8,
fg-alt: rgba(235, 219, 248, 0.25),

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 596 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

View file

@ -32,7 +32,7 @@ image: /images/pages/pingu.jpg
<article>
<figure>
<a href="{{ post.url }}">
<img src="{{ site.mediaurl }}/{{ album.tracks[0].slug }}.jpeg" /></a>
<img src="{{ site.mediaurl }}/{{ album.tracks[0].slug }}.jpeg" alt="Cover art for {{ post.title }}" /></a>
<figcaption>
<strong>{{ album.name }}</strong><br />
@ -67,7 +67,7 @@ image: /images/pages/pingu.jpg
<article>
<figure>
<a href="{{ post.url }}">
<img src="{{ site.mediaurl }}/{{ track.tracks[0].slug }}.jpeg" /></a>
<img src="{{ site.mediaurl }}/{{ track.tracks[0].slug }}.jpeg" alt="Cover art for {{ post.title }}" /></a>
<figcaption>
<strong>{{ track.tracks[0].common.title }}</strong><br />
{% assign round_seconds = track.tracks[0].format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }} |

85
manifest.json Normal file
View file

@ -0,0 +1,85 @@
{
"short_name": "徒 setto セット",
"name": "徒 setto セット Music PWA",
"lang": "en",
"description": "Music of 徒 setto セット in your phone",
"start_url": "/",
"background_color": "#3c2a52",
"theme_color": "#3c2a52",
"dir": "ltr",
"display": "standalone",
"orientation": "portrait",
"icons": [
{
"src": "/setto-webapp.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/android-icon-192x192-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/apple-icon-180x180-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "180x180"
},
{
"src": "/apple-icon-152x152-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "152x152"
},
{
"src": "/apple-icon-144x144-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/apple-icon-120x120-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "120x120"
},
{
"src": "/apple-icon-114x114-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "114x114"
},
{
"src": "/favicon-96x96-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/apple-icon-76x76-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "76x76"
},
{
"src": "/apple-icon-72x72-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/apple-icon-60x60-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "60x60"
},
{
"src": "/apple-icon-57x57-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "57x57"
},
{
"src": "/favicon-32x32-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "32x32"
},
{
"src": "/favicon-16x16-dunplab-manifest-9805.png",
"type": "image/png",
"sizes": "16x16"
}
],
"prefer_related_applications": "false"
}

36
service-worker.js Normal file
View file

@ -0,0 +1,36 @@
---
layout: nil
---
var urlsToCache = [];
var CACHE_NAME = 'Setto-cache-v1';
// Cache posts
// Limits the number of posts that gets cached to 3
// Reads a piece of front-matter in each post that directs the second loop to the folder where the assets are held
{% for post in site.posts %}
urlsToCache.push("{{ post.url }}index.html")
{% endfor %}
// Cache pages
// Do nothing if it's either an AMP page (as these are served via Googles cache) or the blog page
// Fallback to the offline pages for these
{% for page in site.html_pages %}{% unless page.sitemap == false %}
urlsToCache.push("{{ page.url }}index.html")
{% endunless %}{% endfor %}
// Cache assets
// Removed assets/posts because I only want assets from the most recent posts getting cached
{% for file in site.static_files %}{% unless file.path contains 'albums' %}
urlsToCache.push("{{ file.path }}")
{% endunless %}{% endfor %}
// Cache mp3 and cover art
{% for track in site.tracks %}
urlsToCache.push("{{ track.url }}")
urlsToCache.push("{{ site.mediaurl }}/{{ track.slug }}.mp3")
urlsToCache.push("{{ site.mediaurl }}/{{ track.slug }}.jpeg")
{% endfor %}

BIN
setto-webapp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB