Skip to content

Commit b743e95

Browse files
chambo-echambo-e
authored
feat: introduce outdated-browser (#1004)
* feat: introduce outdated-browser * fix: correct type
1 parent bd8baae commit b743e95

File tree

7 files changed

+269
-0
lines changed

7 files changed

+269
-0
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,12 @@ scaleway-lib is a set of NPM packages used at Scaleway.
9898
![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/jest-helpers)
9999
![npm](https://img.shields.io/npm/v/@scaleway/jest-helpers)
100100

101+
- [`@scaleway/outdated-browser`](./packages/outdated-browser/README.md): A small web script to display outdated banne
102+
103+
![npm](https://img.shields.io/npm/dm/@scaleway/outdated-browser)
104+
![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/outdated-browser)
105+
![npm](https://img.shields.io/npm/v/@scaleway/outdated-browser)
106+
101107
## Development
102108

103109
### Locally

‎packages/outdated-browser/.npmignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
**/__tests__/**
2+
src
3+
!.npmignore

‎packages/outdated-browser/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# `@scaleway/outdated-browser`
2+
3+
A small web script to display outdated banner
4+
5+
---
6+
7+
## Install
8+
9+
```bash
10+
$ pnpm add @scaleway/outdated-browser
11+
```
12+
13+
## Usage
14+
15+
This package is intended to be used in tandem with a bundler
16+
Only one parameter is required, a regex of accepted browser user agents
17+
18+
Example with webpack:
19+
```js
20+
import { getUserAgentRegExp } from 'browserslist-useragent-regexp'
21+
22+
const SUPPORTED_BROWSERS = getUserAgentRegExp({
23+
browsers: '> 1%, last 2 versions, Firefox ESR, not IE > 0, not IE_Mob > 0',
24+
allowHigherVersions: true,
25+
ignoreMinor: true,
26+
ignorePatch: true,
27+
}).toString()
28+
29+
export default {
30+
entry: {
31+
outdated: '@scaleway/outdated-browser',
32+
main: './src/index.tsx',
33+
},
34+
plugins: [
35+
new webpack.DefinePlugin({
36+
SUPPORTED_BROWSERS,
37+
}),
38+
],
39+
}
40+
```

‎packages/outdated-browser/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@scaleway/outdated-browser",
3+
"version": "1.0.0",
4+
"description": "A small web script to display outdated banner",
5+
"type": "module",
6+
"main": "dist/index.js",
7+
"module": "dist/index.js",
8+
"types": "dist/index.d.ts",
9+
"browser": {
10+
"dist/index.js": "./dist/index.browser.js"
11+
},
12+
"publishConfig": {
13+
"access": "public"
14+
},
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/scaleway/scaleway-lib",
18+
"directory": "packages/outdated-browser"
19+
},
20+
"license": "MIT"
21+
}

‎packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`@outdated-browser render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen 1`] = `
4+
"<head><style>
5+
#outdated {
6+
position: fixed;
7+
z-index: 9999;
8+
width: 100%;
9+
display: flex;
10+
gap: 16px;
11+
background: rgba(242, 86, 72, 0.95);
12+
flex-direction: column;
13+
align-items: center;
14+
text-align: center;
15+
padding: 16px;
16+
color: white;
17+
font-family: 'Open Sans', 'Segoe UI', sans-serif;
18+
}
19+
20+
#outdated svg {
21+
max-width: 300px;
22+
}
23+
24+
#outdated a {
25+
color: white;
26+
border: 1px solid white;
27+
border-radius: 4px;
28+
background: transparent;
29+
padding: 10px 20px;
30+
text-decoration: none;
31+
text-transform: uppercase;
32+
transition: all .3s ease-in;
33+
}
34+
35+
#outdated a:hover {
36+
color: rgb(242, 86, 72);
37+
background: white;
38+
}
39+
40+
#outdated button {
41+
color: white;
42+
background: transparent;
43+
font-size: 32px;
44+
position: absolute;
45+
border: 0;
46+
right: 60px;
47+
top: 10px;
48+
cursor: pointer;
49+
}
50+
</style></head><body><div id="outdated">
51+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 40">
52+
<g fill="#fff" fill-rule="evenodd">
53+
<path d="M14.984 30.96h6.378c1.398-.17 2.472-1.337 2.542-2.774v-9.343c0-.622-.247-1.182-.647-1.589a2.19 2.19 0 0 0-1.867-.638c-1.106.15-1.91 1.148-1.91 2.28v5.883c0 .933-.744 1.689-1.662 1.689h-2.89a2.19 2.19 0 0 0-1.564.657 2.265 2.265 0 0 0-.63 1.88c.133 1.08 1.178 1.955 2.25 1.955m2.872-21.332h-6.378c-1.397.17-2.471 1.337-2.542 2.773v9.344c0 .621.247 1.182.648 1.589a2.19 2.19 0 0 0 1.866.637c1.106-.149 1.91-1.147 1.91-2.28V15.81c0-.933.745-1.689 1.663-1.689h2.89c.61 0 1.163-.252 1.563-.658.461-.47.72-1.143.63-1.878-.133-1.081-1.178-1.956-2.25-1.956"></path>
54+
<path d="M18.937.616H7.333C3.283.616 0 3.949 0 8.06v17.82c0 7.756 6.192 14.043 13.83 14.043h12.243c3.51-.287 6.32-3.083 6.69-6.619v-18.65C32.763 6.9 26.573.616 18.937.616m0 4.492c5.184 0 9.402 4.282 9.402 9.546v18.358a2.915 2.915 0 0 1-2.483 2.419H13.83c-5.194 0-9.405-4.276-9.405-9.55V8.06c0-1.631 1.3-2.953 2.908-2.953h11.604m30.789 26.112c-1.495 0-2.967-.383-4.374-1.137a10.286 10.286 0 0 1-3.5-3.055.781.781 0 0 1 .103-1.04l1.68-1.51a.751.751 0 0 1 1.143.165 6.88 6.88 0 0 0 2.282 2.28 5.587 5.587 0 0 0 2.94.827c1.113 0 1.948-.234 2.483-.696.505-.438.751-1.027.751-1.804 0-.86-.262-1.49-.802-1.927-.64-.52-1.71-.993-3.177-1.41-4.318-1.078-6.51-3.172-6.51-6.223 0-1.892.63-3.38 1.872-4.423 1.2-1.008 2.853-1.52 4.917-1.52 1.48 0 2.835.289 4.025.857 1.19.568 2.265 1.448 3.196 2.612a.786.786 0 0 1-.097 1.077l-1.624 1.398a.755.755 0 0 1-.646.166.796.796 0 0 1-.472-.32c-.587-.806-1.23-1.407-1.91-1.785-.674-.373-1.506-.562-2.472-.562-.986 0-1.789.226-2.386.674-.534.4-.793.933-.793 1.63 0 .734.243 1.294.742 1.712.586.49 1.64.923 3.135 1.285 2.03.555 3.625 1.331 4.762 2.315 1.228 1.062 1.85 2.558 1.85 4.444 0 1.175-.302 2.23-.898 3.138-.593.903-1.446 1.612-2.538 2.108-1.058.48-2.297.724-3.682.724m16.105.078c-1.381 0-2.635-.339-3.723-1.006-1.088-.666-1.95-1.605-2.564-2.789-.606-1.168-.913-2.503-.913-3.964 0-1.46.302-2.793.897-3.96.603-1.185 1.462-2.125 2.553-2.794 1.087-.667 2.33-1.005 3.695-1.005 1.176 0 2.225.265 3.118.787.863.505 1.654 1.225 2.354 2.138a.778.778 0 0 1-.132 1.08l-1.377 1.09a.753.753 0 0 1-1.09-.169c-.756-1.112-1.695-1.652-2.873-1.652-.72 0-1.348.18-1.917.55-.566.367-1.016.892-1.338 1.561-.333.692-.501 1.49-.501 2.374 0 .884.168 1.682.501 2.373.326.679.764 1.19 1.338 1.562.57.37 1.197.55 1.917.55.751 0 1.363-.125 1.819-.371.464-.251.895-.629 1.28-1.124a.748.748 0 0 1 1.053-.183l1.458 1.034a.78.78 0 0 1 .157 1.115 7.545 7.545 0 0 1-2.492 2.035 6.98 6.98 0 0 1-3.22.768m13.924-12.244c-.72 0-1.34.179-1.9.547-.56.368-1.007.89-1.329 1.554-.332.68-.5 1.474-.5 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.372 1.012-.884 1.338-1.561.332-.692.5-1.49.5-2.374.001-.883-.167-1.682-.5-2.374-.322-.668-.772-1.194-1.338-1.562-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.607-.337-3.696-1.005-1.088-.666-1.95-1.604-2.564-2.788-.606-1.17-.913-2.512-.913-3.993 0-1.461.302-2.79.898-3.949.603-1.174 1.457-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.12 6.12 0 0 1 2.93.719c.298.16.584.346.854.554v-.055c0-.426.34-.77.759-.77h1.872c.419 0 .759.344.759.77v13.082c0 .425-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.326 6.326 0 0 1-.837.544 5.965 5.965 0 0 1-2.891.72m10.308-.515a.765.765 0 0 1-.759-.77l.001-19.494c0-.425.34-.77.759-.77h1.872c.419 0 .759.345.759.77v19.494c0 .425-.34.77-.76.77h-1.872zm32.694.069a.757.757 0 0 1-.723-.538l-2.443-7.81-2.642 7.827a.76.76 0 0 1-.717.52h-1.872a.76.76 0 0 1-.721-.529l-4.24-13.083a.777.777 0 0 1 .444-.96.768.768 0 0 1 .296-.05h1.963a.76.76 0 0 1 .722.533l2.588 8.145 2.632-8.148a.76.76 0 0 1 .72-.53h1.818c.331 0 .621.215.723.536l2.528 8.05 2.551-8.052a.758.758 0 0 1 .722-.535h1.777c.1 0 .202.016.296.055.392.166.555.59.438.954l-4.185 13.082a.757.757 0 0 1-.72.533h-1.955zm14.437-11.797c-.72 0-1.341.18-1.9.547-.56.369-1.007.891-1.33 1.554-.33.681-.499 1.474-.499 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.373 1.011-.883 1.337-1.562.333-.69.501-1.49.501-2.373 0-.883-.168-1.682-.5-2.374-.323-.668-.772-1.194-1.338-1.561-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.608-.338-3.696-1.005-1.088-.667-1.95-1.605-2.564-2.79-.606-1.168-.913-2.512-.913-3.992 0-1.46.302-2.79.898-3.949.603-1.173 1.456-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.117 6.117 0 0 1 3.783 1.273v-.055c0-.426.34-.77.76-.77h1.871c.42 0 .76.344.76.77v13.082c0 .426-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.373 6.373 0 0 1-.838.545 5.98 5.98 0 0 1-2.89.72m-37.823-11.31c.62-.628 1.403-.934 2.395-.934 1.04 0 1.825.266 2.4.812.426.404.743.985.944 1.729h-6.74a4.28 4.28 0 0 1 1.001-1.607zm7.12 6.239a.826.826 0 0 0-1.116.151c-.32.385-.762.86-1.217 1.118-.608.345-1.401.528-2.364.528-1.134 0-1.997-.377-2.64-1.152a4.702 4.702 0 0 1-1.02-2.172h9.745a.76.76 0 0 0 .755-.694c.02-.214.03-.512.03-.886 0-1.354-.299-2.602-.89-3.708a6.873 6.873 0 0 0-2.475-2.654c-1.053-.649-2.241-.978-3.533-.978-1.364 0-2.604.339-3.684 1.007-1.08.67-1.933 1.608-2.536 2.792-.596 1.167-.898 2.5-.898 3.96 0 1.462.308 2.796.914 3.965.614 1.184 1.476 2.122 2.564 2.788 1.088.668 2.342 1.006 3.724 1.006 1.479 0 2.795-.294 3.887-.919a7.619 7.619 0 0 0 2.284-1.984.862.862 0 0 0-.19-1.218l-1.34-.95zm52.815-9.893a.77.77 0 0 0-.41-.107h-1.74a.763.763 0 0 0-.707.494l-3.637 9.552-3.46-9.563a.754.754 0 0 0-.705-.485h-1.954a.754.754 0 0 0-.63.34.78.78 0 0 0-.074.718l5.078 13.578h.007c-.15.605-.395 1.021-.735 1.25-.478.321-1.375.364-1.87.396a.83.83 0 0 0-.775.833v1.308c0 .462.369.837.823.835.795-.003 2.066.077 3.058-.455 2.043-1.097 2.35-2.456 2.923-4l5.13-13.757a.778.778 0 0 0-.322-.937"></path>
55+
</g>
56+
</svg>
57+
<h6>We are sorry, this app can not be run with an old version of web browser.</h6>
58+
<p>
59+
<strong>Please update your browser to a more recent version.</strong>
60+
</p><p>The Scaleway Team</p>
61+
<a target="_blank" rel="noopener noreferrer" href="https://browsehappy.com/">Update my browser now</a>
62+
<button type="button" onclick="document.getElementById('outdated').remove()">×</button>
63+
</div></body>"
64+
`;
65+
66+
exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is defined and match userAgent 1`] = `"<head></head><body></body>"`;
67+
68+
exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is nil 1`] = `"<head></head><body></body>"`;

‎packages/outdated-browser/src/__tests__/index.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* @jest-environment jsdom
3+
*/
4+
5+
describe('@outdated-browser', () => {
6+
const originUA = global.navigator.userAgent
7+
let fakeUA: string | undefined
8+
9+
beforeAll(() => {
10+
Object.defineProperty(global.navigator, 'userAgent', {
11+
get() {
12+
return fakeUA ?? originUA
13+
},
14+
})
15+
})
16+
17+
afterEach(() => {
18+
jest.resetModules()
19+
jest.restoreAllMocks()
20+
fakeUA = undefined
21+
})
22+
23+
test('render nothing if SUPPORTED_BROWSER is nil', () => {
24+
// @ts-expect-error global mock
25+
global.SUPPORTED_BROWSERS = ''
26+
27+
return import('..').then(() => {
28+
expect(document.documentElement.innerHTML).toMatchSnapshot()
29+
})
30+
})
31+
32+
test('render nothing if SUPPORTED_BROWSER is defined and match userAgent ', () => {
33+
fakeUA = 'a'
34+
// @ts-expect-error global mock
35+
global.SUPPORTED_BROWSERS = 'a'
36+
37+
return import('..').then(() => {
38+
expect(document.documentElement.innerHTML).toMatchSnapshot()
39+
})
40+
})
41+
42+
test('render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen ', () => {
43+
fakeUA = 'b'
44+
// @ts-expect-error global mock
45+
global.SUPPORTED_BROWSERS = 'a'
46+
47+
return import('..').then(() => {
48+
expect(document.documentElement.innerHTML).toMatchSnapshot()
49+
})
50+
})
51+
})

‎packages/outdated-browser/src/index.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
const content = `
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 40">
3+
<g fill="#fff" fill-rule="evenodd">
4+
<path d="M14.984 30.96h6.378c1.398-.17 2.472-1.337 2.542-2.774v-9.343c0-.622-.247-1.182-.647-1.589a2.19 2.19 0 0 0-1.867-.638c-1.106.15-1.91 1.148-1.91 2.28v5.883c0 .933-.744 1.689-1.662 1.689h-2.89a2.19 2.19 0 0 0-1.564.657 2.265 2.265 0 0 0-.63 1.88c.133 1.08 1.178 1.955 2.25 1.955m2.872-21.332h-6.378c-1.397.17-2.471 1.337-2.542 2.773v9.344c0 .621.247 1.182.648 1.589a2.19 2.19 0 0 0 1.866.637c1.106-.149 1.91-1.147 1.91-2.28V15.81c0-.933.745-1.689 1.663-1.689h2.89c.61 0 1.163-.252 1.563-.658.461-.47.72-1.143.63-1.878-.133-1.081-1.178-1.956-2.25-1.956" />
5+
<path d="M18.937.616H7.333C3.283.616 0 3.949 0 8.06v17.82c0 7.756 6.192 14.043 13.83 14.043h12.243c3.51-.287 6.32-3.083 6.69-6.619v-18.65C32.763 6.9 26.573.616 18.937.616m0 4.492c5.184 0 9.402 4.282 9.402 9.546v18.358a2.915 2.915 0 0 1-2.483 2.419H13.83c-5.194 0-9.405-4.276-9.405-9.55V8.06c0-1.631 1.3-2.953 2.908-2.953h11.604m30.789 26.112c-1.495 0-2.967-.383-4.374-1.137a10.286 10.286 0 0 1-3.5-3.055.781.781 0 0 1 .103-1.04l1.68-1.51a.751.751 0 0 1 1.143.165 6.88 6.88 0 0 0 2.282 2.28 5.587 5.587 0 0 0 2.94.827c1.113 0 1.948-.234 2.483-.696.505-.438.751-1.027.751-1.804 0-.86-.262-1.49-.802-1.927-.64-.52-1.71-.993-3.177-1.41-4.318-1.078-6.51-3.172-6.51-6.223 0-1.892.63-3.38 1.872-4.423 1.2-1.008 2.853-1.52 4.917-1.52 1.48 0 2.835.289 4.025.857 1.19.568 2.265 1.448 3.196 2.612a.786.786 0 0 1-.097 1.077l-1.624 1.398a.755.755 0 0 1-.646.166.796.796 0 0 1-.472-.32c-.587-.806-1.23-1.407-1.91-1.785-.674-.373-1.506-.562-2.472-.562-.986 0-1.789.226-2.386.674-.534.4-.793.933-.793 1.63 0 .734.243 1.294.742 1.712.586.49 1.64.923 3.135 1.285 2.03.555 3.625 1.331 4.762 2.315 1.228 1.062 1.85 2.558 1.85 4.444 0 1.175-.302 2.23-.898 3.138-.593.903-1.446 1.612-2.538 2.108-1.058.48-2.297.724-3.682.724m16.105.078c-1.381 0-2.635-.339-3.723-1.006-1.088-.666-1.95-1.605-2.564-2.789-.606-1.168-.913-2.503-.913-3.964 0-1.46.302-2.793.897-3.96.603-1.185 1.462-2.125 2.553-2.794 1.087-.667 2.33-1.005 3.695-1.005 1.176 0 2.225.265 3.118.787.863.505 1.654 1.225 2.354 2.138a.778.778 0 0 1-.132 1.08l-1.377 1.09a.753.753 0 0 1-1.09-.169c-.756-1.112-1.695-1.652-2.873-1.652-.72 0-1.348.18-1.917.55-.566.367-1.016.892-1.338 1.561-.333.692-.501 1.49-.501 2.374 0 .884.168 1.682.501 2.373.326.679.764 1.19 1.338 1.562.57.37 1.197.55 1.917.55.751 0 1.363-.125 1.819-.371.464-.251.895-.629 1.28-1.124a.748.748 0 0 1 1.053-.183l1.458 1.034a.78.78 0 0 1 .157 1.115 7.545 7.545 0 0 1-2.492 2.035 6.98 6.98 0 0 1-3.22.768m13.924-12.244c-.72 0-1.34.179-1.9.547-.56.368-1.007.89-1.329 1.554-.332.68-.5 1.474-.5 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.372 1.012-.884 1.338-1.561.332-.692.5-1.49.5-2.374.001-.883-.167-1.682-.5-2.374-.322-.668-.772-1.194-1.338-1.562-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.607-.337-3.696-1.005-1.088-.666-1.95-1.604-2.564-2.788-.606-1.17-.913-2.512-.913-3.993 0-1.461.302-2.79.898-3.949.603-1.174 1.457-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.12 6.12 0 0 1 2.93.719c.298.16.584.346.854.554v-.055c0-.426.34-.77.759-.77h1.872c.419 0 .759.344.759.77v13.082c0 .425-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.326 6.326 0 0 1-.837.544 5.965 5.965 0 0 1-2.891.72m10.308-.515a.765.765 0 0 1-.759-.77l.001-19.494c0-.425.34-.77.759-.77h1.872c.419 0 .759.345.759.77v19.494c0 .425-.34.77-.76.77h-1.872zm32.694.069a.757.757 0 0 1-.723-.538l-2.443-7.81-2.642 7.827a.76.76 0 0 1-.717.52h-1.872a.76.76 0 0 1-.721-.529l-4.24-13.083a.777.777 0 0 1 .444-.96.768.768 0 0 1 .296-.05h1.963a.76.76 0 0 1 .722.533l2.588 8.145 2.632-8.148a.76.76 0 0 1 .72-.53h1.818c.331 0 .621.215.723.536l2.528 8.05 2.551-8.052a.758.758 0 0 1 .722-.535h1.777c.1 0 .202.016.296.055.392.166.555.59.438.954l-4.185 13.082a.757.757 0 0 1-.72.533h-1.955zm14.437-11.797c-.72 0-1.341.18-1.9.547-.56.369-1.007.891-1.33 1.554-.33.681-.499 1.474-.499 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.373 1.011-.883 1.337-1.562.333-.69.501-1.49.501-2.373 0-.883-.168-1.682-.5-2.374-.323-.668-.772-1.194-1.338-1.561-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.608-.338-3.696-1.005-1.088-.667-1.95-1.605-2.564-2.79-.606-1.168-.913-2.512-.913-3.992 0-1.46.302-2.79.898-3.949.603-1.173 1.456-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.117 6.117 0 0 1 3.783 1.273v-.055c0-.426.34-.77.76-.77h1.871c.42 0 .76.344.76.77v13.082c0 .426-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.373 6.373 0 0 1-.838.545 5.98 5.98 0 0 1-2.89.72m-37.823-11.31c.62-.628 1.403-.934 2.395-.934 1.04 0 1.825.266 2.4.812.426.404.743.985.944 1.729h-6.74a4.28 4.28 0 0 1 1.001-1.607zm7.12 6.239a.826.826 0 0 0-1.116.151c-.32.385-.762.86-1.217 1.118-.608.345-1.401.528-2.364.528-1.134 0-1.997-.377-2.64-1.152a4.702 4.702 0 0 1-1.02-2.172h9.745a.76.76 0 0 0 .755-.694c.02-.214.03-.512.03-.886 0-1.354-.299-2.602-.89-3.708a6.873 6.873 0 0 0-2.475-2.654c-1.053-.649-2.241-.978-3.533-.978-1.364 0-2.604.339-3.684 1.007-1.08.67-1.933 1.608-2.536 2.792-.596 1.167-.898 2.5-.898 3.96 0 1.462.308 2.796.914 3.965.614 1.184 1.476 2.122 2.564 2.788 1.088.668 2.342 1.006 3.724 1.006 1.479 0 2.795-.294 3.887-.919a7.619 7.619 0 0 0 2.284-1.984.862.862 0 0 0-.19-1.218l-1.34-.95zm52.815-9.893a.77.77 0 0 0-.41-.107h-1.74a.763.763 0 0 0-.707.494l-3.637 9.552-3.46-9.563a.754.754 0 0 0-.705-.485h-1.954a.754.754 0 0 0-.63.34.78.78 0 0 0-.074.718l5.078 13.578h.007c-.15.605-.395 1.021-.735 1.25-.478.321-1.375.364-1.87.396a.83.83 0 0 0-.775.833v1.308c0 .462.369.837.823.835.795-.003 2.066.077 3.058-.455 2.043-1.097 2.35-2.456 2.923-4l5.13-13.757a.778.778 0 0 0-.322-.937"/>
6+
</g>
7+
</svg>
8+
<h6>We are sorry, this app can not be run with an old version of web browser.</h6>
9+
<p>
10+
<strong>Please update your browser to a more recent version.</strong>
11+
</p><p>The Scaleway Team</p>
12+
<a target="_blank" rel="noopener noreferrer" href="https://browsehappy.com/">Update my browser now</a>
13+
<button type="button" onclick="document.getElementById('outdated').remove()">×</button>
14+
`
15+
16+
const style = `
17+
#outdated {
18+
position: fixed;
19+
z-index: 9999;
20+
width: 100%;
21+
display: flex;
22+
gap: 16px;
23+
background: rgba(242, 86, 72, 0.95);
24+
flex-direction: column;
25+
align-items: center;
26+
text-align: center;
27+
padding: 16px;
28+
color: white;
29+
font-family: 'Open Sans', 'Segoe UI', sans-serif;
30+
}
31+
32+
#outdated svg {
33+
max-width: 300px;
34+
}
35+
36+
#outdated a {
37+
color: white;
38+
border: 1px solid white;
39+
border-radius: 4px;
40+
background: transparent;
41+
padding: 10px 20px;
42+
text-decoration: none;
43+
text-transform: uppercase;
44+
transition: all .3s ease-in;
45+
}
46+
47+
#outdated a:hover {
48+
color: rgb(242, 86, 72);
49+
background: white;
50+
}
51+
52+
#outdated button {
53+
color: white;
54+
background: transparent;
55+
font-size: 32px;
56+
position: absolute;
57+
border: 0;
58+
right: 60px;
59+
top: 10px;
60+
cursor: pointer;
61+
}
62+
`
63+
64+
declare const SUPPORTED_BROWSERS: string
65+
66+
if (
67+
SUPPORTED_BROWSERS &&
68+
!new RegExp(SUPPORTED_BROWSERS).test(navigator.userAgent)
69+
) {
70+
const styleElement = document.createElement('style')
71+
styleElement.innerHTML = style
72+
document.head.append(styleElement)
73+
74+
const element = document.createElement('div')
75+
element.setAttribute('id', 'outdated')
76+
element.innerHTML = content
77+
document.body.prepend(element)
78+
}
79+
80+
export {}

0 commit comments

Comments
 (0)