-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
135 lines (120 loc) · 3.37 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Yext Search Components</title>
<style>
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
* {
margin: 0;
}
body {
/* 3. Add accessible line-height */
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
</style>
<script src="/src/index.ts" type="module"></script>
<script src="dist/index.js" type="module"></script>
<!--
To include the necessary assets for testing, you have several options:
1. Full Production Bundle: This is the entire application bundled together.
You can include it by uncommenting the following line:
2. Individual Components: If you want to test specific components, you can
import them individually. You'll need to know the path to the component
file in the 'dist' directory. For example:
<script src="dist/components/your-component.js" type="module"></script>
<script src="/src/components/your-component.ts" type="module"></script>
3. Standard Includes: These are common files that are often needed in the
head tag. For example, a global stylesheet is included in this file:
<link rel="stylesheet" href="public/global.css" />
Remember to replace 'your-component' with the name of the component you want
to test. Also, ensure the paths to the files are correct relative to this
HTML file.
-->
<!-- <script src="dist/index.mjs" type="module"></script> -->
<link rel="stylesheet" href="dist/global.css" />
<script>
function switchComponent(componentName) {
const container = document.querySelector('.component-container');
container.innerHTML = '';
const newComponent = document.createElement(componentName);
container.appendChild(newComponent);
}
</script>
</head>
<body>
<header
style="
display: flex;
justify-content: flex-end;
padding: 1rem;
gap: 0.5rem;
"
>
<button onclick="switchComponent('outline-yext-universal')">
Universal
</button>
<button onclick="switchComponent('outline-yext-entities')">
Directory
</button>
</header>
<div class="component-container">
<outline-yext-universal></outline-yext-universal>
</div>
</body>
</html>