(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
add iOS shortcut to landing page
+81
-63
+81
-63
web/src/pages/Landing.jsx
+81
-63
web/src/pages/Landing.jsx
···
11
11
Shield,
12
12
Zap,
13
13
} from "lucide-react";
14
-
import { SiFirefox, SiGooglechrome, SiBluesky } from "react-icons/si";
14
+
import { SiFirefox, SiGooglechrome, SiBluesky, SiApple } from "react-icons/si";
15
15
import { FaEdge } from "react-icons/fa";
16
16
import logo from "../assets/logo.svg";
17
17
···
19
19
typeof navigator !== "undefined" && /Firefox/i.test(navigator.userAgent);
20
20
const isEdge =
21
21
typeof navigator !== "undefined" && /Edg/i.test(navigator.userAgent);
22
+
const isIOS =
23
+
typeof navigator !== "undefined" &&
24
+
/iPad|iPhone|iPod/.test(navigator.userAgent);
25
+
const isSafari =
26
+
typeof navigator !== "undefined" &&
27
+
/Safari/.test(navigator.userAgent) &&
28
+
!/Chrome/.test(navigator.userAgent);
29
+
const isIOSSafari = isIOS && isSafari;
22
30
23
31
function getExtensionInfo() {
32
+
if (isIOSSafari) {
33
+
return {
34
+
url: "https://www.icloud.com/shortcuts/21c87edf29b046db892c9e57dac6d1fd",
35
+
Icon: SiApple,
36
+
label: "iOS",
37
+
isShortcut: true,
38
+
};
39
+
}
24
40
if (isFirefox) {
25
41
return {
26
42
url: "https://addons.mozilla.org/en-US/firefox/addon/margin/",
···
451
467
rel="noreferrer"
452
468
className="btn btn-primary btn-lg"
453
469
>
454
-
<ext.Icon size={18} />
455
-
Install for {ext.label}
470
+
{ext.Icon && <ext.Icon size={18} />}
471
+
{ext.isShortcut ? "Get iOS Shortcut" : `Install for ${ext.label}`}
456
472
</a>
457
473
{user ? (
458
474
<Link to="/home" className="btn btn-secondary btn-lg">
···
466
482
</Link>
467
483
)}
468
484
</div>
469
-
<p className="landing-browsers">
470
-
Also available for{" "}
471
-
{isFirefox ? (
472
-
<>
473
-
<a
474
-
href="https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
475
-
target="_blank"
476
-
rel="noreferrer"
477
-
>
478
-
Edge
479
-
</a>{" "}
480
-
and{" "}
481
-
<a
482
-
href="https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa/"
483
-
target="_blank"
484
-
rel="noreferrer"
485
-
>
486
-
Chrome
487
-
</a>
488
-
</>
489
-
) : isEdge ? (
490
-
<>
491
-
<a
492
-
href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
493
-
target="_blank"
494
-
rel="noreferrer"
495
-
>
496
-
Firefox
497
-
</a>{" "}
498
-
and{" "}
499
-
<a
500
-
href="https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa/"
501
-
target="_blank"
502
-
rel="noreferrer"
503
-
>
504
-
Chrome
505
-
</a>
506
-
</>
507
-
) : (
508
-
<>
509
-
<a
510
-
href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
511
-
target="_blank"
512
-
rel="noreferrer"
513
-
>
514
-
Firefox
515
-
</a>{" "}
516
-
and{" "}
517
-
<a
518
-
href="https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
519
-
target="_blank"
520
-
rel="noreferrer"
521
-
>
522
-
Edge
523
-
</a>
524
-
</>
525
-
)}
526
-
</p>
485
+
{!isIOSSafari && (
486
+
<p className="landing-browsers">
487
+
Also available for{" "}
488
+
{isFirefox ? (
489
+
<>
490
+
<a
491
+
href="https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
492
+
target="_blank"
493
+
rel="noreferrer"
494
+
>
495
+
Edge
496
+
</a>{" "}
497
+
and{" "}
498
+
<a
499
+
href="https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa/"
500
+
target="_blank"
501
+
rel="noreferrer"
502
+
>
503
+
Chrome
504
+
</a>
505
+
</>
506
+
) : isEdge ? (
507
+
<>
508
+
<a
509
+
href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
510
+
target="_blank"
511
+
rel="noreferrer"
512
+
>
513
+
Firefox
514
+
</a>{" "}
515
+
and{" "}
516
+
<a
517
+
href="https://chromewebstore.google.com/detail/margin/cgpmbiiagnehkikhcbnhiagfomajncpa/"
518
+
target="_blank"
519
+
rel="noreferrer"
520
+
>
521
+
Chrome
522
+
</a>
523
+
</>
524
+
) : (
525
+
<>
526
+
<a
527
+
href="https://addons.mozilla.org/en-US/firefox/addon/margin/"
528
+
target="_blank"
529
+
rel="noreferrer"
530
+
>
531
+
Firefox
532
+
</a>{" "}
533
+
and{" "}
534
+
<a
535
+
href="https://microsoftedge.microsoft.com/addons/detail/margin/nfjnmllpdgcdnhmmggjihjbidmeadddn"
536
+
target="_blank"
537
+
rel="noreferrer"
538
+
>
539
+
Edge
540
+
</a>
541
+
</>
542
+
)}
543
+
</p>
544
+
)}
527
545
</div>
528
546
</section>
529
547
···
675
693
rel="noreferrer"
676
694
className="btn btn-primary btn-lg"
677
695
>
678
-
<ext.Icon size={18} />
679
-
Get the Extension
696
+
{ext.Icon && <ext.Icon size={18} />}
697
+
{ext.isShortcut ? "Get iOS Shortcut" : "Get the Extension"}
680
698
</a>
681
699
</div>
682
700
</section>