source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
feat: enhance ExternalServiceRedirectPage with iTunes support and customizable options
- Add new props for auto redirect delay, manual link label, and iTunes app ID/argument.
- Update redirect logic to support a customizable delay before navigating to the destination.
- Modify iOS page to utilize new props for improved user experience and App Store linking.
+44
-5
+39
-3
src/components/ExternalServiceRedirectPage.astro
+39
-3
src/components/ExternalServiceRedirectPage.astro
···
7
7
title?: string;
8
8
message?: string;
9
9
emojis?: string;
10
+
autoRedirectDelayMs?: number;
11
+
manualLinkLabel?: string;
12
+
appleItunesAppId?: string;
13
+
appleItunesAppArgument?: string;
10
14
}
11
15
12
16
const {
···
14
18
title = 'Redirecting - orbyt',
15
19
message = 'routing you to your destination...',
16
20
emojis = '🚙💨',
21
+
autoRedirectDelayMs = 700,
22
+
manualLinkLabel = 'open destination',
23
+
appleItunesAppId,
24
+
appleItunesAppArgument,
17
25
} = Astro.props;
26
+
27
+
const appleItunesContent = appleItunesAppId
28
+
? `app-id=${appleItunesAppId}${appleItunesAppArgument ? `, app-argument=${appleItunesAppArgument}` : ''}`
29
+
: undefined;
18
30
---
19
31
20
32
<!doctype html>
···
29
41
<link rel="stylesheet" href="/css/tokens.css" />
30
42
<meta name="viewport" content="width=device-width, initial-scale=1">
31
43
<title>{title}</title>
32
-
<meta http-equiv="refresh" content={`0; url=${destinationUrl}`}>
44
+
{appleItunesContent && <meta name="apple-itunes-app" content={appleItunesContent} />}
33
45
<link rel="canonical" href={destinationUrl}>
34
-
<script is:inline define:vars={{ destinationUrl }}>
35
-
window.location.href = destinationUrl;
46
+
<script is:inline define:vars={{ destinationUrl, autoRedirectDelayMs }}>
47
+
const redirect = () => {
48
+
window.location.assign(destinationUrl);
49
+
};
50
+
51
+
window.setTimeout(redirect, autoRedirectDelayMs);
36
52
</script>
37
53
<style>
38
54
@font-face {
···
71
87
font-weight: 300;
72
88
font-size: 20px;
73
89
color: #fff;
90
+
text-align: center;
91
+
max-width: 320px;
92
+
}
93
+
.manual-link {
94
+
display: inline-flex;
95
+
align-items: center;
96
+
justify-content: center;
97
+
text-decoration: none;
98
+
font-family: 'Figtree', sans-serif;
99
+
font-weight: 700;
100
+
font-size: 16px;
101
+
color: #e0ebff;
102
+
background: #551def;
103
+
border: 2px solid #000;
104
+
border-radius: 999px;
105
+
padding: 12px 18px;
74
106
}
75
107
.logo-icon {
76
108
width: 80px;
···
88
120
<div class="container">
89
121
<div class="emojis">{emojis}</div>
90
122
<div class="text">{message}</div>
123
+
<a class="manual-link" href={destinationUrl}>{manualLinkLabel}</a>
91
124
</div>
125
+
<noscript>
126
+
<p><a href={destinationUrl}>{manualLinkLabel}</a></p>
127
+
</noscript>
92
128
<svg class="logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="65 65 894 894">
93
129
<defs>
94
130
<mask id="cutout-mask">
+5
-2
src/pages/ios.astro
+5
-2
src/pages/ios.astro
···
7
7
<ExternalServiceRedirectPage
8
8
destinationUrl="https://apps.apple.com/us/app/orbyt-video/id6751679299"
9
9
title="iOS App - orbyt"
10
-
message="routing you to the iOS app..."
11
-
emojis="📱💨"
10
+
message="routing you to the App Store..."
11
+
emojis="🚗💨"
12
+
manualLinkLabel="open in the App Store"
13
+
appleItunesAppId="6751679299"
14
+
appleItunesAppArgument="https://getorbyt.com/ios"
12
15
/>