-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (89 loc) · 3.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Search Engine</title>
<link rel="canonical" href=".">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="description" content="Search Wikipedia.">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<!-- Load AMP web framework -->
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load AMP features for introducing interactivity -->
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<!-- Required AMP boilerplate -->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Customize the frontend appearance and layout -->
<style amp-custom>
* {
box-sizing: border-box;
}
main {
margin: 4rem auto;
max-width: 600px;
width: 90%;
}
p, input {
color: #444;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
overflow: hidden;
padding: 0.5rem 1rem;
text-overflow: ellipsis;
user-select: none;
white-space: nowrap;
width: 100%;
}
a {
color: #4c74b9;
text-decoration-color: #d2dcee;
}
</style>
</head>
<body>
<main>
<!--
amp-events#input: https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#input-elements
on="input-throttled: ..." when typing, assign the global variable s to
the value of the textbox and display the matches list.
-->
<input
type="text"
name="input"
on="input-throttled: matches.changeToLayoutContainer(), AMP.setState({s: event.value}), matches.show"
placeholder="Search Wikipedia"
>
<!--
amp-list: https://amp.dev/documentation/components/amp-list/?format=websites#usage
layout="nodisplay" this list of matches starts empty, so not displayed.
layout is set to container on input change above.
amp-bind: https://amp.dev/documentation/components/amp-bind/?format=websites#usage
[src]="'query?s=' + (s || '')" whenever the global variable s changes,
call the /query endpoint passing the updated value of s.
-->
<amp-list
layout="nodisplay"
[src]="'query?s=' + (s || '')"
id="matches"
>
<!--
amp-mustache: https://amp.dev/documentation/components/amp-mustache/#usage
List of matches is displayed according to this template.
-->
<template type="amp-mustache">
<p><a href="{{url}}">{{title}}</a></p>
</template>
<!--
amp-list#placeholder: https://amp.dev/documentation/components/amp-list/?format=websites#placeholder-and-fallback
Placeholder element shown while waiting for results to load.
-->
<p placeholder>⋯</p>
</amp-list>
</main>
</body>
</html>