Skip to content
This repository was archived by the owner on Oct 5, 2022. It is now read-only.

Commit d8390bf

Browse files
MattIPv4MattIPv4
committed
Display browser support on site
1 parent d80c61a commit d8390bf

File tree

4 files changed

+91
-31
lines changed

4 files changed

+91
-31
lines changed

‎index.html

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@
211211
<script>
212212
(adsbygoogle = window.adsbygoogle || []).push({
213213
google_ad_client: "ca-pub-4266526051230566",
214-
enable_page_level_ads: true
214+
enable_page_level_ads: true,
215215
});
216216
</script>
217217
</head>
@@ -283,10 +283,12 @@ <h1>
283283
alt="Code Quality">
284284
</a>
285285
<a href="http://patreon.mattcowley.co.uk/" target="_blank">
286-
<img src="https://img.shields.io/badge/patreon-IPv4-blue.svg?style=flat-square&colorB=007aff" alt="Patreon"/>
286+
<img src="https://img.shields.io/badge/patreon-IPv4-blue.svg?style=flat-square&colorB=007aff"
287+
alt="Patreon"/>
287288
</a>
288289
<a href="http://slack.mattcowley.co.uk/" target="_blank">
289-
<img src="https://img.shields.io/badge/slack-MattIPv4-blue.svg?style=flat-square&colorB=007aff" alt="Slack"/>
290+
<img src="https://img.shields.io/badge/slack-MattIPv4-blue.svg?style=flat-square&colorB=007aff"
291+
alt="Slack"/>
290292
</a>
291293
</small>
292294
</h1>
@@ -364,6 +366,20 @@ <h2>
364366
</h2>
365367
</blockquote>
366368

369+
<h3>Browser Support:</h3>
370+
<p>
371+
macOSNotifJS is built to have support for the following browser definitions.
372+
<br/><i>You can click on each one to view a full breakdown of every browser the definition covers.</i>
373+
</p>
374+
375+
<ul>
376+
<li><a href="https://browserl.ist/?q=last%201%20version" target="_blank">
377+
last 1 version</a></li>
378+
379+
<li><a href="https://browserl.ist/?q=%3E%200.25%25%2C%20not%20dead" target="_blank">
380+
&gt; 0.25%, not dead</a></li>
381+
</ul>
382+
367383
<hr/>
368384

369385
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@@ -387,7 +403,8 @@ <h4>Button Configuration:</h4>
387403
<button data-demo-load
388404
onclick="macOSNotif({title:'Dual button notification', subtitle:'Two buttons; dismiss and a link (opens in a new tab)', btn1Text:'Close', btn1Link:null, btn2Text:'Author', btn2Link:'https://mattcowley.co.uk/', btn2NewTab:true})">
389405
Dual button notification
390-
</button><br/>
406+
</button>
407+
<br/>
391408
<pre class="code">macOSNotif({
392409
title:'Dual button notification',
393410
subtitle:'Two buttons; dismiss and a link (opens in a new tab)',
@@ -403,7 +420,8 @@ <h4>Button Configuration:</h4>
403420
<button data-demo-load
404421
onclick="macOSNotif({title:'Single button notification', subtitle:'A single button to dismiss the notification', btn2Text:null})">
405422
Single button notification
406-
</button><br/>
423+
</button>
424+
<br/>
407425
<pre class="code">macOSNotif({
408426
title:'Single button notification',
409427
subtitle:'A single button to dismiss the notification',
@@ -415,7 +433,8 @@ <h4>Button Configuration:</h4>
415433
<button data-demo-load
416434
onclick="macOSNotif({title:'Main body link notification', subtitle:'The main notification body is a link (opens in a new tab)', mainLink:'https://mattcowley.co.uk/', mainLinkNewTab:true})">
417435
Main body link notification
418-
</button><br/>
436+
</button>
437+
<br/>
419438
<pre class="code">macOSNotif({
420439
title:'Main body link notification',
421440
subtitle:'The main notification body is a link (opens in a new tab)',
@@ -428,7 +447,8 @@ <h4>Button Configuration:</h4>
428447
<button data-demo-load
429448
onclick="macOSNotif({title:'No button notification', subtitle:'The main body link dismisses the notification', mainLink:'#', btn1Text:null})">
430449
No button notification
431-
</button><br/>
450+
</button>
451+
<br/>
432452
<pre class="code">macOSNotif({
433453
title:'No button notification',
434454
subtitle:'The main body link dismisses the notification',
@@ -443,7 +463,8 @@ <h4>Notification customisation:</h4>
443463
<button data-demo-load
444464
onclick="macOSNotif({title:'Image (icon) notification with link', subtitle:'Has an icon which also has a link', imageSrc:'https://mattcowley.co.uk/me.png', imageLink:'https://mattcowley.co.uk/', imageLinkNewTab:true})">
445465
Image (icon) notification with link
446-
</button><br/>
466+
</button>
467+
<br/>
447468
<pre class="code">macOSNotif({
448469
title:'Image (icon) notification with link',
449470
subtitle:'Has an icon which also has a link',
@@ -456,7 +477,8 @@ <h4>Notification customisation:</h4>
456477

457478
<button onclick="macOSNotif({title:'Sound (alert) notification', subtitle:'Requires user interaction first on some browsers', sounds:true})">
458479
Sound (alert) notification
459-
</button><br/>
480+
</button>
481+
<br/>
460482
<pre class="code">macOSNotif({
461483
title:'Sound (alert) notification',
462484
subtitle:'Requires user interaction first on some browsers',
@@ -470,7 +492,8 @@ <h4>Theming Support:</h4>
470492
<button data-demo-load
471493
onclick="macOSNotif({title:'Dark mode notification', subtitle:'Emulates the macOS dark mode styling', theme:macOSNotifThemes.Dark, mainLink:'#', btn1Text:'Dark', btn1Dismiss:false, btn1Link:function(n){n.applyTheme(macOSNotifThemes.Dark);}, btn2Text:'Light', btn2Dismiss:false, btn2Link:function(n){n.applyTheme(macOSNotifThemes.Light);}})">
472494
Dark mode notification
473-
</button><br/>
495+
</button>
496+
<br/>
474497
<pre class="code">macOSNotif({
475498
title:'Dark mode notification',
476499
subtitle:'Emulates the macOS dark mode styling',
@@ -488,7 +511,8 @@ <h4>Theming Support:</h4>
488511

489512
<button onclick="macOSNotif({title:'Native theme notification', subtitle:'Attempts to match the theme preference of the OS', themeNative:true, mainLink:'#', btn1Text:'Close', btn1Link:null, btn2Text:'Support', btn2Link:'https://caniuse.com/prefers-color-scheme', btn2NewTab:true})">
490513
Native OS theme notification (macOS dark mode)
491-
</button><br/>
514+
</button>
515+
<br/>
492516
<pre class="code">macOSNotif({
493517
title:'Native theme notification',
494518
subtitle:'Attempts to match the dark/light theme of the OS',
@@ -504,7 +528,8 @@ <h4>Theming Support:</h4>
504528

505529
<button onclick="macOSNotif({title:'Info themed notification', subtitle:'Non-macOS theme to convey information', theme:macOSNotifThemes.Info, btn2Text:null})">
506530
Info themed notification
507-
</button><br/>
531+
</button>
532+
<br/>
508533
<pre class="code">macOSNotif({
509534
title:'Info themed notification',
510535
subtitle:'Non-macOS theme to convey information',
@@ -516,7 +541,8 @@ <h4>Theming Support:</h4>
516541

517542
<button onclick="macOSNotif({title:'Warning themed notification', subtitle:'Non-macOS theme to convey a warning message', theme:macOSNotifThemes.Warning, btn2Text:null})">
518543
Warning themed notification
519-
</button><br/>
544+
</button>
545+
<br/>
520546
<pre class="code">macOSNotif({
521547
title:'Warning themed notification',
522548
subtitle:'Non-macOS theme to convey a warning message',
@@ -528,7 +554,8 @@ <h4>Theming Support:</h4>
528554

529555
<button onclick="macOSNotif({title:'Danger themed notification', subtitle:'Non-macOS theme to convey an immediate danger', theme:macOSNotifThemes.Danger, btn2Text:null})">
530556
Danger themed notification
531-
</button><br/>
557+
</button>
558+
<br/>
532559
<pre class="code">macOSNotif({
533560
title:'Danger themed notification',
534561
subtitle:'Non-macOS theme to convey an immediate danger',
@@ -540,7 +567,8 @@ <h4>Theming Support:</h4>
540567

541568
<button onclick="macOSNotif({title:'Success themed notification', subtitle:'Non-macOS theme to convey success', theme:macOSNotifThemes.Success, btn2Text:null})">
542569
Success themed notification
543-
</button><br/>
570+
</button>
571+
<br/>
544572
<pre class="code">macOSNotif({
545573
title:'Success themed notification',
546574
subtitle:'Non-macOS theme to convey success',

‎index.tpl

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@
211211
<script>
212212
(adsbygoogle = window.adsbygoogle || []).push({
213213
google_ad_client: "ca-pub-4266526051230566",
214-
enable_page_level_ads: true
214+
enable_page_level_ads: true,
215215
});
216216
</script>
217217
</head>
@@ -283,10 +283,12 @@
283283
alt="Code Quality">
284284
</a>
285285
<a href="http://patreon.mattcowley.co.uk/" target="_blank">
286-
<img src="https://img.shields.io/badge/patreon-IPv4-blue.svg?style=flat-square&colorB=007aff" alt="Patreon"/>
286+
<img src="https://img.shields.io/badge/patreon-IPv4-blue.svg?style=flat-square&colorB=007aff"
287+
alt="Patreon"/>
287288
</a>
288289
<a href="http://slack.mattcowley.co.uk/" target="_blank">
289-
<img src="https://img.shields.io/badge/slack-MattIPv4-blue.svg?style=flat-square&colorB=007aff" alt="Slack"/>
290+
<img src="https://img.shields.io/badge/slack-MattIPv4-blue.svg?style=flat-square&colorB=007aff"
291+
alt="Slack"/>
290292
</a>
291293
</small>
292294
</h1>
@@ -364,6 +366,17 @@ options = {
364366
</h2>
365367
</blockquote>
366368

369+
<h3>Browser Support:</h3>
370+
<p>
371+
macOSNotifJS is built to have support for the following browser definitions.
372+
<br/><i>You can click on each one to view a full breakdown of every browser the definition covers.</i>
373+
</p>
374+
375+
<ul><% for (var def in htmlWebpackPlugin.options.meta.browsers) { %>
376+
<li><a href="<%= htmlWebpackPlugin.options.meta.browsers[def][0] %>" target="_blank">
377+
<%= htmlWebpackPlugin.options.meta.browsers[def][1] %></a></li>
378+
<% } %></ul>
379+
367380
<hr/>
368381

369382
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@@ -387,7 +400,8 @@ options = {
387400
<button data-demo-load
388401
onclick="macOSNotif({title:'Dual button notification', subtitle:'Two buttons; dismiss and a link (opens in a new tab)', btn1Text:'Close', btn1Link:null, btn2Text:'Author', btn2Link:'https://mattcowley.co.uk/', btn2NewTab:true})">
389402
Dual button notification
390-
</button><br/>
403+
</button>
404+
<br/>
391405
<pre class="code">macOSNotif({
392406
title:'Dual button notification',
393407
subtitle:'Two buttons; dismiss and a link (opens in a new tab)',
@@ -403,7 +417,8 @@ options = {
403417
<button data-demo-load
404418
onclick="macOSNotif({title:'Single button notification', subtitle:'A single button to dismiss the notification', btn2Text:null})">
405419
Single button notification
406-
</button><br/>
420+
</button>
421+
<br/>
407422
<pre class="code">macOSNotif({
408423
title:'Single button notification',
409424
subtitle:'A single button to dismiss the notification',
@@ -415,7 +430,8 @@ options = {
415430
<button data-demo-load
416431
onclick="macOSNotif({title:'Main body link notification', subtitle:'The main notification body is a link (opens in a new tab)', mainLink:'https://mattcowley.co.uk/', mainLinkNewTab:true})">
417432
Main body link notification
418-
</button><br/>
433+
</button>
434+
<br/>
419435
<pre class="code">macOSNotif({
420436
title:'Main body link notification',
421437
subtitle:'The main notification body is a link (opens in a new tab)',
@@ -428,7 +444,8 @@ options = {
428444
<button data-demo-load
429445
onclick="macOSNotif({title:'No button notification', subtitle:'The main body link dismisses the notification', mainLink:'#', btn1Text:null})">
430446
No button notification
431-
</button><br/>
447+
</button>
448+
<br/>
432449
<pre class="code">macOSNotif({
433450
title:'No button notification',
434451
subtitle:'The main body link dismisses the notification',
@@ -443,7 +460,8 @@ options = {
443460
<button data-demo-load
444461
onclick="macOSNotif({title:'Image (icon) notification with link', subtitle:'Has an icon which also has a link', imageSrc:'https://mattcowley.co.uk/me.png', imageLink:'https://mattcowley.co.uk/', imageLinkNewTab:true})">
445462
Image (icon) notification with link
446-
</button><br/>
463+
</button>
464+
<br/>
447465
<pre class="code">macOSNotif({
448466
title:'Image (icon) notification with link',
449467
subtitle:'Has an icon which also has a link',
@@ -456,7 +474,8 @@ options = {
456474

457475
<button onclick="macOSNotif({title:'Sound (alert) notification', subtitle:'Requires user interaction first on some browsers', sounds:true})">
458476
Sound (alert) notification
459-
</button><br/>
477+
</button>
478+
<br/>
460479
<pre class="code">macOSNotif({
461480
title:'Sound (alert) notification',
462481
subtitle:'Requires user interaction first on some browsers',
@@ -470,7 +489,8 @@ options = {
470489
<button data-demo-load
471490
onclick="macOSNotif({title:'Dark mode notification', subtitle:'Emulates the macOS dark mode styling', theme:macOSNotifThemes.Dark, mainLink:'#', btn1Text:'Dark', btn1Dismiss:false, btn1Link:function(n){n.applyTheme(macOSNotifThemes.Dark);}, btn2Text:'Light', btn2Dismiss:false, btn2Link:function(n){n.applyTheme(macOSNotifThemes.Light);}})">
472491
Dark mode notification
473-
</button><br/>
492+
</button>
493+
<br/>
474494
<pre class="code">macOSNotif({
475495
title:'Dark mode notification',
476496
subtitle:'Emulates the macOS dark mode styling',
@@ -488,7 +508,8 @@ options = {
488508

489509
<button onclick="macOSNotif({title:'Native theme notification', subtitle:'Attempts to match the theme preference of the OS', themeNative:true, mainLink:'#', btn1Text:'Close', btn1Link:null, btn2Text:'Support', btn2Link:'https://caniuse.com/prefers-color-scheme', btn2NewTab:true})">
490510
Native OS theme notification (macOS dark mode)
491-
</button><br/>
511+
</button>
512+
<br/>
492513
<pre class="code">macOSNotif({
493514
title:'Native theme notification',
494515
subtitle:'Attempts to match the dark/light theme of the OS',
@@ -504,7 +525,8 @@ options = {
504525

505526
<button onclick="macOSNotif({title:'Info themed notification', subtitle:'Non-macOS theme to convey information', theme:macOSNotifThemes.Info, btn2Text:null})">
506527
Info themed notification
507-
</button><br/>
528+
</button>
529+
<br/>
508530
<pre class="code">macOSNotif({
509531
title:'Info themed notification',
510532
subtitle:'Non-macOS theme to convey information',
@@ -516,7 +538,8 @@ options = {
516538

517539
<button onclick="macOSNotif({title:'Warning themed notification', subtitle:'Non-macOS theme to convey a warning message', theme:macOSNotifThemes.Warning, btn2Text:null})">
518540
Warning themed notification
519-
</button><br/>
541+
</button>
542+
<br/>
520543
<pre class="code">macOSNotif({
521544
title:'Warning themed notification',
522545
subtitle:'Non-macOS theme to convey a warning message',
@@ -528,7 +551,8 @@ options = {
528551

529552
<button onclick="macOSNotif({title:'Danger themed notification', subtitle:'Non-macOS theme to convey an immediate danger', theme:macOSNotifThemes.Danger, btn2Text:null})">
530553
Danger themed notification
531-
</button><br/>
554+
</button>
555+
<br/>
532556
<pre class="code">macOSNotif({
533557
title:'Danger themed notification',
534558
subtitle:'Non-macOS theme to convey an immediate danger',
@@ -540,7 +564,8 @@ options = {
540564

541565
<button onclick="macOSNotif({title:'Success themed notification', subtitle:'Non-macOS theme to convey success', theme:macOSNotifThemes.Success, btn2Text:null})">
542566
Success themed notification
543-
</button><br/>
567+
</button>
568+
<br/>
544569
<pre class="code">macOSNotif({
545570
title:'Success themed notification',
546571
subtitle:'Non-macOS theme to convey success',

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"main": "src/macOSNotif.js",
66
"browser": "dist/macOSNotif.min.js",
77
"browserslist": [
8+
"last 1 version",
89
"> 0.25%, not dead"
910
],
1011
"scripts": {

‎webpack.config.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { version } = require("./package.json");
1+
const { version, browserslist } = require("./package.json");
22
const path = require("path").posix;
33
const webpack = require("webpack");
44
const os = require("os");
@@ -71,6 +71,12 @@ module.exports = {
7171
new HtmlWebpackPlugin({
7272
meta: {
7373
version: `v${version}`,
74+
browsers: browserslist.map(x => {
75+
return [
76+
"https://browserl.ist/?q=" + encodeURIComponent(x),
77+
x.replace(/</g, "&lt;").replace(/>/g, "&gt;"),
78+
];
79+
}),
7480
versionInfo: versionInfo,
7581
viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
7682
},

0 commit comments

Comments
 (0)