Skip to content

Commit 5843ed5

Browse files
mockersfmockersf
committed
fix copy buttons, html tags, and favicon
1 parent 5ae2be3 commit 5843ed5

File tree

8 files changed

+103
-40
lines changed

8 files changed

+103
-40
lines changed

‎wasm/android-chrome-192x192.png

48.5 KB
Loading

‎wasm/android-chrome-512x512.png

157 KB
Loading

‎wasm/apple-touch-icon.png

43.1 KB
Loading

‎wasm/favicon-16x16.png

960 Bytes
Loading

‎wasm/favicon-32x32.png

2.67 KB
Loading

‎wasm/favicon.ico

15 KB
Binary file not shown.

‎wasm/index.html

Lines changed: 84 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22
<html lang="en">
33

44
<head>
5-
<link rel="icon" href="/vleue_navigator.png" type="image/png">
5+
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
6+
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
7+
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
8+
<link rel="manifest" href="./site.webmanifest">
69
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
7-
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css" rel="stylesheet" />
10+
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
811
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
912
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"></script>
1013
<title>
@@ -16,7 +19,7 @@
1619
top: 0;
1720
left: 0;
1821
width: 100%;
19-
background-color: rgba(31, 41, 55, 0.9); /* bg-gray-800 with opacity */
22+
background-color: rgba(31, 41, 55, 0.9);
2023
display: none;
2124
align-items: center;
2225
justify-content: center;
@@ -35,12 +38,17 @@
3538
font-weight: bold;
3639
color: white;
3740
}
38-
.copy-button {
39-
transition: background-color 0.3s ease;
41+
42+
pre[class*="language-"] {
43+
position: relative;
4044
}
4145

42-
.copy-button:active {
43-
transform: scale(0.95);
46+
pre[class*="language-"] button {
47+
position: absolute;
48+
top: 5px;
49+
right: 5px;
50+
padding: 2px 4px;
51+
transition: background-color 0.3s ease;
4452
}
4553
</style>
4654
</head>
@@ -49,7 +57,7 @@
4957

5058
<div class="bg-gray-800 text-white py-20">
5159
<div class="container mx-auto text-center flex items-center justify-center">
52-
<img src="/vleue_navigator.png" alt="Vleue Navigator Logo" class="w-20 h-20 mr-4">
60+
<img src="vleue_navigator.png" alt="Vleue Navigator Logo" class="w-20 h-20 mr-4">
5361
<div>
5462
<h1 class="text-5xl font-bold mb-4">Vleue Navigator</h1>
5563
<p class="text-xl">Efficient NavMesh and pathfinding solutions for your Bevy projects</p>
@@ -60,8 +68,10 @@ <h1 class="text-5xl font-bold mb-4">Vleue Navigator</h1>
6068
<footer class="bg-gray-800 text-white py-4">
6169
<div class="container mx-auto text-center">
6270
<p>
63-
<a href="https://github.com/vleue/vleue_navigator" class="text-blue-500 hover:underline">GitHub Repository</a> |
64-
<a href="https://docs.rs/vleue_navigator/latest/vleue_navigator/" class="text-blue-500 hover:underline">Documentation</a>
71+
<a href="https://github.com/vleue/vleue_navigator" class="text-blue-500 hover:underline">GitHub
72+
Repository</a> |
73+
<a href="https://docs.rs/vleue_navigator/latest/vleue_navigator/"
74+
class="text-blue-500 hover:underline">Documentation</a>
6575
</p>
6676
</div>
6777
</footer>
@@ -79,15 +89,17 @@ <h1 class="text-3xl font-bold mb-4">Features</h1>
7989
<li>Layers support for targeted updated</li>
8090
<li>Layers can overlap</li>
8191
</ul>
92+
</div>
8293

94+
<div class="container mx-auto p-4">
8395

8496
<h1 class="text-3xl font-bold mb-4">How to Use</h1>
85-
97+
8698
<div class="mb-8">
8799
<h2 class="text-2xl font-bold mb-2">Installation</h2>
88100
<div class="relative">
89-
<pre class="p-4 rounded overflow-x-auto"><code class="language-shell">cargo add vleue_navigator</code></pre>
90-
<button class="copy-button absolute top-0 right-0 mt-1 mr-1 bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600" onclick="copyToClipboard('cargo add vleue_navigator', this)">Copy</button>
101+
<pre
102+
class="p-4 rounded overflow-x-auto"><code class="language-shell">cargo add vleue_navigator</code></pre>
91103
</div>
92104
</div>
93105

@@ -108,9 +120,10 @@ <h2 class="text-2xl font-bold mb-2">Usage</h2>
108120
...
109121
.run();
110122
}</code></pre>
111-
You can then spawn a NavMesh entity:
112-
<div class="relative">
113-
<pre class="p-4 rounded overflow-x-auto"><code class="language-rust">fn spawn_navmesh(mut commands: Commands) {
123+
</div>
124+
You can then spawn a NavMesh entity:
125+
<div class="relative">
126+
<pre class="p-4 rounded overflow-x-auto"><code class="language-rust">fn spawn_navmesh(mut commands: Commands) {
114127
commands.spawn(NavMeshBundle {
115128
settings: NavMeshSettings {
116129
// Define the outer borders of the navmesh.
@@ -126,10 +139,11 @@ <h2 class="text-2xl font-bold mb-2">Usage</h2>
126139
..NavMeshBundle::with_default_id()
127140
});
128141
}</code></pre>
129-
Using the NavMesh to find a path:
142+
</div>
143+
Using the NavMesh to find a path:
130144

131-
<div class="relative">
132-
<pre class="p-4 rounded overflow-x-auto"><code class="language-rust">pub fn find_path(navmeshes: Res<Assets<NavMesh>>, navmesh: Query<(&Handle<NavMesh>, Ref<NavMeshStatus>)>) {
145+
<div class="relative">
146+
<pre class="p-4 rounded overflow-x-auto"><code class="language-rust">pub fn find_path(navmeshes: Res<Assets<NavMesh>>, navmesh: Query<(&Handle<NavMesh>, Ref<NavMeshStatus>)>) {
133147
let (navmesh_handle, status) = navmesh.single();
134148
if status != NavMeshStatus::Built {
135149
// NavMesh is not ready yet.
@@ -147,22 +161,27 @@ <h2 class="text-2xl font-bold mb-2">Usage</h2>
147161
}
148162
}
149163
}</code></pre>
150-
<button class="copy-button absolute top-0 right-0 mt-1 mr-1 bg-gray-500 text-white px-3 py-1 rounded hover:bg-gray-600" onclick="copyToClipboard(`// Example usage of Vleue Navigator\nuse vleue_navigator::NavMesh;\n\nfn main() {\n let navmesh = NavMesh::new();\n // Add your pathfinding logic here\n}`, this)">Copy</button>
151164
</div>
152165
</div>
153-
166+
</div>
167+
168+
<div class="container mx-auto p-4">
169+
154170
<h1 class="text-3xl font-bold mb-4">Examples</h1>
155171
<div class="flex flex-col space-y-8">
156172
<a href="primitive_3d.html" class="flex items-center">
157-
<img src="screenshots/primitive_3d.png" class="object-cover w-1/2" alt="Auto updating a NavMesh from Bevy shapes" />
173+
<img src="screenshots/primitive_3d.png" class="object-cover w-1/2"
174+
alt="Auto updating a NavMesh from Bevy shapes" />
158175
<div class="ml-8 text-xl">Auto updating a NavMesh from Bevy shapes</div>
159176
</a>
160177
<a href="auto_navmesh_aabb.html" class="flex items-center flex-row-reverse">
161-
<img src="screenshots/auto_navmesh_aabb.png" class="object-cover w-1/2" alt="Auto updating a NavMesh from Bevy Aabb component" />
178+
<img src="screenshots/auto_navmesh_aabb.png" class="object-cover w-1/2"
179+
alt="Auto updating a NavMesh from Bevy Aabb component" />
162180
<div class="mr-8 text-xl">Auto updating a NavMesh from Bevy `Aabb` component</div>
163181
</a>
164182
<a href="auto_navmesh_primitive.html" class="flex items-center">
165-
<img src="screenshots/auto_navmesh_primitive.png" class="object-cover w-1/2" alt="NavMesh updated using primitive shapes" />
183+
<img src="screenshots/auto_navmesh_primitive.png" class="object-cover w-1/2"
184+
alt="NavMesh updated using primitive shapes" />
166185
<div class="ml-8 text-xl">NavMesh updated using primitive shapes (rectangle, circle, ...)</div>
167186
</a>
168187
<a href="demo.html" class="flex items-center flex-row-reverse">
@@ -174,19 +193,22 @@ <h1 class="text-3xl font-bold mb-4">Examples</h1>
174193
<h2 class="text-2xl font-bold mt-8 mb-4">Avian integration</h2>
175194
<div class="flex flex-wrap">
176195
<a href="auto_navmesh_avian2d.html" class="m-5 text-xl flex flex-col items-center">
177-
<img src="screenshots/auto_navmesh_avian2d.png" class="object-cover" alt="Auto updating a NavMesh with colliders from Avian2d" />
196+
<img src="screenshots/auto_navmesh_avian2d.png" class="object-cover"
197+
alt="Auto updating a NavMesh with colliders from Avian2d" />
178198
<div class="mt-2">Auto updating a NavMesh with colliders from Avian2d</div>
179199
</a>
180200
<a href="auto_navmesh_avian3d.html" class="m-5 text-xl flex flex-col items-center">
181-
<img src="screenshots/auto_navmesh_avian3d.png" class="object-cover" alt="Auto updating a NavMesh with colliders from Avian3d" />
201+
<img src="screenshots/auto_navmesh_avian3d.png" class="object-cover"
202+
alt="Auto updating a NavMesh with colliders from Avian3d" />
182203
<div class="mt-2">Auto updating a NavMesh with colliders from Avian3d</div>
183204
</a>
184205
</div>
185206

186207
<h2 class="text-2xl font-bold mt-8 mb-4">Others</h2>
187208
<div class="flex flex-wrap">
188209
<a href="many.html" class="m-5 text-xl flex flex-col items-center">
189-
<img src="screenshots/many.png" class="object-cover" alt="Spawn many agents and run a lot of concurrent pathfinding tasks" />
210+
<img src="screenshots/many.png" class="object-cover"
211+
alt="Spawn many agents and run a lot of concurrent pathfinding tasks" />
190212
<div class="mt-2">Spawn many agents and run a lot of concurrent pathfinding tasks</div>
191213
</a>
192214
<a href="lines.html" class="m-5 text-xl flex flex-col items-center">
@@ -206,7 +228,8 @@ <h2 class="text-2xl font-bold mt-8 mb-4">Others</h2>
206228
<div class="mt-2">Navmesh from random obstacles</div>
207229
</a>
208230
<a href="auto_navmesh_aabb.html" class="m-5 text-xl flex flex-col items-center">
209-
<img src="screenshots/auto_navmesh_aabb.png" class="object-cover" alt="NavMesh automatically updated from obstacles using Aabb" />
231+
<img src="screenshots/auto_navmesh_aabb.png" class="object-cover"
232+
alt="NavMesh automatically updated from obstacles using Aabb" />
210233
<div class="mt-2">NavMesh automatically updated from obstacles using `Aabb`</div>
211234
</a>
212235
</div>
@@ -216,25 +239,25 @@ <h2 class="text-2xl font-bold mt-8 mb-4">Others</h2>
216239
<h1 class="text-3xl font-bold mb-4">Reading List of implemented and used techniques</h1>
217240
<ul class="list-disc pl-5 mb-8">
218241
<li><a class="text-blue-500 hover:underline"
219-
href="https://www.ijcai.org/proceedings/2017/0070.pdf">Compromise-free Pathfinding on a Navigation
220-
Mesh</a></li>
242+
href="https://www.ijcai.org/proceedings/2017/0070.pdf">Compromise-free Pathfinding on a
243+
Navigation Mesh</a></li>
221244
<li><a class="text-blue-500 hover:underline"
222245
href="https://hull-repository.worktribe.com/preview/376364/000870493786962263.pdf">Line
223246
Generalisation by Repeated Elimination of Points</a></li>
224247
<li><a class="text-blue-500 hover:underline"
225248
href="https://en.wikipedia.org/wiki/Constrained_Delaunay_triangulation">Constrained Delaunay
226249
Triangulation</a></li>
227250
<li><a class="text-blue-500 hover:underline"
228-
href="https://mcmains.me.berkeley.edu/pubs/DAC05OffsetPolygon.pdf">Polygon Offsetting by Computing
229-
Winding Numbers</a></li>
251+
href="https://mcmains.me.berkeley.edu/pubs/DAC05OffsetPolygon.pdf">Polygon Offsetting by
252+
Computing Winding Numbers</a></li>
230253
</ul>
231254
</div>
232255

233256
<div class="container mx-auto p-4">
234-
<h1 class="text-3xl font-bold mb-4">Example Videos</h1>
257+
<h1 class="text-3xl font-bold mb-4">Showcase Videos</h1>
235258
<ul class="list-disc pl-5 mb-8">
236259
<li><a class="text-blue-500 hover:underline" href="https://www.youtube.com/watch?v=Zi9EMAdHp4M">Pathfinding
237-
many agents</a></li>
260+
with many agents</a></li>
238261
<li><a class="text-blue-500 hover:underline" href="https://www.youtube.com/watch?v=wYRrvWaLjJ8">Parameters
239262
for NavMesh generation</a></li>
240263
</ul>
@@ -254,13 +277,34 @@ <h1>Vleue Navigator</h1>
254277
stickyMenu.style.display = 'none';
255278
}
256279
});
257-
function copyToClipboard(text, button) {
258-
navigator.clipboard.writeText(text).then(() => {
280+
const copyButtonLabel = "Copy";
281+
282+
let blocks = document.querySelectorAll("pre");
283+
284+
blocks.forEach((block) => {
285+
if (navigator.clipboard) {
286+
let button = document.createElement("button");
287+
button.className = "rounded bg-gray-600 hover:bg-gray-800"
288+
289+
button.innerText = copyButtonLabel;
290+
block.appendChild(button);
291+
292+
button.addEventListener("click", async () => {
293+
button.className = "rounded bg-gray-400"
294+
await copyCode(block);
295+
setTimeout(() => {
296+
button.className = "rounded bg-gray-600 hover:bg-gray-800"
297+
}, 400);
298+
});
299+
}
300+
});
301+
302+
async function copyCode(block) {
303+
let code = block.querySelector("code");
304+
let text = code.innerText;
259305

260-
}, (err) => {
261-
console.error('Could not copy text: ', err);
262-
});
306+
await navigator.clipboard.writeText(text);
263307
}
264308
</script>
265309

266-
</html>
310+
</html>

‎wasm/site.webmanifest

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "",
3+
"short_name": "",
4+
"icons": [
5+
{
6+
"src": "./android-chrome-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
},
10+
{
11+
"src": "./android-chrome-512x512.png",
12+
"sizes": "512x512",
13+
"type": "image/png"
14+
}
15+
],
16+
"theme_color": "#ffffff",
17+
"background_color": "#ffffff",
18+
"display": "standalone"
19+
}

0 commit comments

Comments
 (0)