Skip to content

Commit 131346c

Browse files
jmulcahey-twiliojmulcahey-twilio
committed
feat(index.html): Fourth batch of migrations
1 parent 79ec178 commit 131346c

File tree

5 files changed

+412
-446
lines changed

5 files changed

+412
-446
lines changed

‎blocklist-call/assets/index.html

+94-92
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,100 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Get started with your Twilio Functions!</title>
7-
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
8-
<link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css">
9-
<link rel="stylesheet" href="https://unpkg.com/milligram/dist/milligram.min.css">
10-
<style>
11-
body {
12-
padding: 20px;
13-
display: flex;
14-
flex-direction: column;
15-
min-height: 100vh;
16-
}
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="x-ua-compatible" content="ie=edge">
7+
<title>Get started with your Twilio Functions!</title>
178

18-
div[role="main"] {
19-
flex: 1;
20-
}
9+
<link rel="icon" href="https://twilio-labs.github.io/function-templates/static/v1/favicon.ico">
10+
<link rel="stylesheet" href="https://twilio-labs.github.io/function-templates/static/v1/ce-paste-theme.css">
2111

22-
footer {
23-
text-align: center;
24-
}
12+
<script src="https://twilio-labs.github.io/function-templates/static/v1/ce-helpers.js" defer></script>
13+
<script>
14+
window.addEventListener('DOMContentLoaded', (_event) => {
15+
inputPrependBaseURL();
16+
});
17+
</script>
18+
</head>
19+
<body>
20+
<div class="page-top">
21+
<header>
22+
<div id="twilio-logo">
23+
<a href="https://www.twilio.com/" target="_blank" rel="noopener">
24+
<svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 60 60">
25+
<title>Twilio Logo</title><path class="cls-1" d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"/></svg>
26+
</a>
27+
</div>
28+
<nav>
29+
<span>Your Twilio application</span>
30+
<aside>
31+
<svg class="icon" role="img" aria-hidden="true" width="100%" height="100%" viewBox="0 0 20 20" aria-labelledby="NewIcon-1577"><path fill="currentColor" fill-rule="evenodd" d="M6.991 7.507c.003-.679 1.021-.675 1.019.004-.012 2.956 1.388 4.41 4.492 4.48.673.016.66 1.021-.013 1.019-2.898-.011-4.327 1.446-4.48 4.506-.033.658-1.01.639-1.018-.02-.03-3.027-1.382-4.49-4.481-4.486-.675 0-.682-1.009-.008-1.019 3.02-.042 4.478-1.452 4.49-4.484zm.505 2.757l-.115.242c-.459.9-1.166 1.558-2.115 1.976l.176.08c.973.465 1.664 1.211 2.083 2.22l.02.05.088-.192c.464-.973 1.173-1.685 2.123-2.124l.039-.018-.118-.05c-.963-.435-1.667-1.117-2.113-2.034l-.068-.15zm10.357-8.12c.174.17.194.434.058.625l-.058.068-1.954 1.905 1.954 1.908a.482.482 0 010 .694.512.512 0 01-.641.056l-.07-.056-1.954-1.908-1.954 1.908a.511.511 0 01-.71 0 .482.482 0 01-.058-.626l.058-.068 1.954-1.908-1.954-1.905a.482.482 0 010-.693.512.512 0 01.64-.057l.07.057 1.954 1.905 1.954-1.905a.511.511 0 01.71 0z"></path></svg>
32+
Live
33+
</aside>
34+
</nav>
35+
</header>
36+
</div>
37+
<main>
38+
<div class="content">
39+
<h1>
40+
<img src="https://twilio-labs.github.io/function-templates/static/v1/success.svg" />
41+
<div>
42+
<p>Welcome!</p>
43+
<p>Your live application with Twilio is ready to use!</p>
44+
</div>
45+
</h1>
46+
<section>
47+
<h2>Get started with your application</h2>
48+
<p>
49+
Now that your code is deployed, here are the last steps you need to do to finish your app.
50+
</p>
51+
<p>
52+
This app allows users to setup a blocklist to reject unwanted phone numbers. See
53+
<a href="https://support.twilio.com/hc/en-us/articles/360034788313-Reject-Incoming-Calls-with-a-Phone-Number-Blacklist"
54+
target="_blank"
55+
rel="noopener">
56+
here
57+
</a>
58+
for a more in-depth guide.
59+
</p>
60+
<ol class="steps">
61+
<li>
62+
Call your Twilio phone number from a number that is not in the blocklist and
63+
not your own phone number; the call should go through
64+
</li>
65+
<li>
66+
Call your Twilio phone number from a number that <b>is</b> in the blocklist;
67+
the caller should receive a message and the call will not go through
68+
</li>
69+
</ol>
70+
</section>
2571

26-
footer p {
27-
margin-bottom: 0;
28-
}
29-
30-
#twilio-logo {
31-
width: 50px;
32-
height: 50px;
33-
}
34-
</style>
35-
</head>
36-
<body>
37-
<header>
38-
<h1>Welcome to your new Twilio App</h1>
39-
</header>
40-
<div role="main">
41-
<section>
42-
<h3>Get started with your app</h3>
43-
<p>This app allows users to setup a blocklist to reject unwanted phone numbers. See <a href="https://support.twilio.com/hc/en-us/articles/360034788313-Reject-Incoming-Calls-with-a-Phone-Number-Blacklist">here</a> for a more in-depth guide.</p>
44-
<ol>
45-
<li>Call your Twilio phone number from a number that is not in the blocklist and not your own phone number. The call should go through.</li>
46-
<li>Call your Twilio phone number from a number that <b>is</b> in the blocklist. The caller should receive a message and the call will not go through. </li>
47-
</ol>
48-
</section>
49-
<section>
50-
<h3>Troubleshooting</h3>
51-
<ul>
52-
<li>Check the <a href="https://www.twilio.com/console/phone-numbers/incoming">phone number configuration</a> and make sure the Twilio phone number you want your app has a voice webhook configured to point at
53-
<p>
54-
<pre><code><span class="function-root"></span>/blocklist-call</code></pre>
55-
</p>
56-
</li>
57-
</ul>
58-
</section>
59-
<!-- APP_INFO -->
60-
</div>
61-
<footer>
62-
<p>
63-
<a href="https://www.twilio.com/">
64-
<svg id="twilio-logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 60 60">
65-
<defs>
66-
<style>
67-
.cls-1 {
68-
fill: #f22f46;
69-
}
70-
</style>
71-
</defs>
72-
<title>Twilio Logo</title><path class="cls-1" d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"/></svg>
73-
</a>
74-
</p>
75-
<p>
76-
<a href="https://www.twilio.com/code-exchange">Learn about other things you can build with Twilio</a>
77-
</p>
78-
</footer>
79-
80-
<script>
81-
// This code will replace the content of any <span class="function-root"></span> with the base path of the URL
82-
const baseUrl = new URL(location.href);
83-
baseUrl.pathname = baseUrl
84-
.pathname
85-
.replace(/\/index\.html$/, '');
86-
delete baseUrl.hash;
87-
delete baseUrl.search;
88-
const fullUrl = baseUrl
89-
.href
90-
.substr(0, baseUrl.href.length - 1);
91-
const functionRoots = document.querySelectorAll('span.function-root');
92-
93-
functionRoots.forEach(element => {
94-
element.innerText = fullUrl
95-
})
96-
</script>
97-
</body>
72+
<section>
73+
<!-- APP_INFO_V2 -->
74+
</section>
75+
<section>
76+
<h2>Troubleshooting</h2>
77+
<ul>
78+
<li>
79+
Check the
80+
<a href="https://www.twilio.com/console/phone-numbers/incoming"
81+
target="_blank"
82+
rel="noopener">
83+
phone number configuration
84+
</a>
85+
and make sure the Twilio phone number you want for your app has a voice webhook
86+
configured to point at the following URL
87+
<form>
88+
<label for="twilio-webhook">Webhook URL</label>
89+
<input type="text" id="twilio-webhook" class="function-root" readonly=true value="/blocklist-call">
90+
</form>
91+
</li>
92+
</ul>
93+
</section>
94+
</div>
95+
</main>
96+
<footer>
97+
<span class="statement">We can't wait to see what you build.</span>
98+
</footer>
99+
</body>
98100
</html>

‎chat-token/assets/index.html

+78-83
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,83 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Get started with your Twilio Functions!</title>
7-
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
8-
<link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css">
9-
<link rel="stylesheet" href="https://unpkg.com/milligram/dist/milligram.min.css">
10-
<style>
11-
body {
12-
padding: 20px;
13-
display: flex;
14-
flex-direction: column;
15-
min-height: 100vh;
16-
}
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="x-ua-compatible" content="ie=edge">
7+
<title>Get started with your Twilio Functions!</title>
178

18-
div[role="main"] {
19-
flex: 1;
20-
}
9+
<link rel="icon" href="https://twilio-labs.github.io/function-templates/static/v1/favicon.ico">
10+
<link rel="stylesheet" href="https://twilio-labs.github.io/function-templates/static/v1/ce-paste-theme.css">
2111

22-
footer {
23-
text-align: center;
24-
}
12+
<script src="https://twilio-labs.github.io/function-templates/static/v1/ce-helpers.js" defer></script>
13+
<script>
14+
window.addEventListener('DOMContentLoaded', (_event) => {
15+
inputPrependBaseURL();
16+
});
17+
</script>
18+
</head>
19+
<body>
20+
<div class="page-top">
21+
<header>
22+
<div id="twilio-logo">
23+
<a href="https://www.twilio.com/" target="_blank" rel="noopener">
24+
<svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 60 60">
25+
<title>Twilio Logo</title><path class="cls-1" d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"/></svg>
26+
</a>
27+
</div>
28+
<nav>
29+
<span>Your Twilio application</span>
30+
<aside>
31+
<svg class="icon" role="img" aria-hidden="true" width="100%" height="100%" viewBox="0 0 20 20" aria-labelledby="NewIcon-1577"><path fill="currentColor" fill-rule="evenodd" d="M6.991 7.507c.003-.679 1.021-.675 1.019.004-.012 2.956 1.388 4.41 4.492 4.48.673.016.66 1.021-.013 1.019-2.898-.011-4.327 1.446-4.48 4.506-.033.658-1.01.639-1.018-.02-.03-3.027-1.382-4.49-4.481-4.486-.675 0-.682-1.009-.008-1.019 3.02-.042 4.478-1.452 4.49-4.484zm.505 2.757l-.115.242c-.459.9-1.166 1.558-2.115 1.976l.176.08c.973.465 1.664 1.211 2.083 2.22l.02.05.088-.192c.464-.973 1.173-1.685 2.123-2.124l.039-.018-.118-.05c-.963-.435-1.667-1.117-2.113-2.034l-.068-.15zm10.357-8.12c.174.17.194.434.058.625l-.058.068-1.954 1.905 1.954 1.908a.482.482 0 010 .694.512.512 0 01-.641.056l-.07-.056-1.954-1.908-1.954 1.908a.511.511 0 01-.71 0 .482.482 0 01-.058-.626l.058-.068 1.954-1.908-1.954-1.905a.482.482 0 010-.693.512.512 0 01.64-.057l.07.057 1.954 1.905 1.954-1.905a.511.511 0 01.71 0z"></path></svg>
32+
Live
33+
</aside>
34+
</nav>
35+
</header>
36+
</div>
37+
<main>
38+
<div class="content">
39+
<h1>
40+
<img src="https://twilio-labs.github.io/function-templates/static/v1/success.svg" />
41+
<div>
42+
<p>Welcome!</p>
43+
<p>Your live application with Twilio is ready to use!</p>
44+
</div>
45+
</h1>
46+
<section>
47+
<h2>Get started with your application</h2>
48+
<p>
49+
This app shows you how to mint
50+
<a href="https://www.twilio.com/docs/iam/access-tokens" target="_blank" ref="noopener">
51+
Access Tokens
52+
</a> for
53+
<a href="https://www.twilio.com/chat"
54+
target="_blank"
55+
ref="noopener">
56+
Twilio Chat
57+
</a>. Please note that this is for prototyping purposes only. You will want to validate
58+
the identity of clients requesting Access Token in most production applications
59+
and set an identity when minting the Token.
60+
</p>
61+
<ol class="steps">
2562

26-
footer p {
27-
margin-bottom: 0;
28-
}
29-
30-
#twilio-logo {
31-
width: 50px;
32-
height: 50px;
33-
}
34-
</style>
35-
</head>
36-
<body>
37-
<header>
38-
<h1>Welcome to your new Twilio App</h1>
39-
</header>
40-
<div role="main">
41-
<section>
42-
<h3>Get started with your app</h3>
43-
<p>Now that your code is deployed, here are the last steps you need to do to finish your app.</p>
44-
<p>This app shows you how to mint <a href="https://www.twilio.com/docs/iam/access-tokens">Access Token</a> for <a href="https://www.twilio.com/chat">Twilio Chat</a>. Please note, this is for prototyping purposes only. You will want to validate the identity of clients requesting Access Token in most production applications and set the identity when minting the Token.</p>
45-
<ol>
46-
<li><a href="/chat-token">Click here to see your chat token</a></li>
47-
</ol>
48-
</section>
49-
<!-- EDIT_CODE -->
50-
</div>
51-
<footer>
52-
<p>
53-
<a href="https://www.twilio.com/">
54-
<svg id="twilio-logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 60 60">
55-
<defs>
56-
<style>
57-
.cls-1 {
58-
fill: #f22f46;
59-
}
60-
</style>
61-
</defs>
62-
<title>Twilio Logo</title><path class="cls-1" d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"/></svg>
63-
</a>
64-
</p>
65-
<p>
66-
<a href="https://www.twilio.com/code-exchange">Learn about other things you can build with Twilio</a>
67-
</p>
68-
</footer>
69-
70-
<script>
71-
// This code will replace the content of any <span class="function-root"></span> with the base path of the URL
72-
const baseUrl = new URL(location.href);
73-
baseUrl.pathname = baseUrl
74-
.pathname
75-
.replace(/\/index\.html$/, '');
76-
delete baseUrl.hash;
77-
delete baseUrl.search;
78-
const fullUrl = baseUrl
79-
.href
80-
.substr(0, baseUrl.href.length - 1);
81-
const functionRoots = document.querySelectorAll('span.function-root');
82-
83-
functionRoots.forEach(element => {
84-
element.innerText = fullUrl
85-
})
86-
</script>
87-
</body>
88-
</html>
63+
</ol>
64+
</section>
65+
<section>
66+
<ul>
67+
<li>
68+
<a href="/chat-token" target="_blank">
69+
Click here to see your chat token
70+
</a>
71+
</li>
72+
</ul>
73+
</section>
74+
<section>
75+
<!-- APP_INFO_V2 -->
76+
</section>
77+
</div>
78+
</main>
79+
<footer>
80+
<span class="statement">We can't wait to see what you build.</span>
81+
</footer>
82+
</body>
83+
</html>

0 commit comments

Comments
 (0)