Add Open Graph metadata to the HTML5 editor

- Consistently use double quotes in the HTML markup.
- Define English language to assist screen readers and search engines.
- Add missing `alt` text for the logo image.
- Remove duplicate `id` for the preload project ZIP input.

(cherry picked from commit 197d391f08)
This commit is contained in:
Hugo Locurcio 2021-03-24 18:36:37 +01:00 committed by Rémi Verschelde
parent acbd1e8b02
commit 4126d27468
No known key found for this signature in database
GPG key ID: C3336907360768E1

View file

@ -1,8 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head> <head>
<meta charset='utf-8' /> <meta charset="utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no' /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="author" content="Godot Engine" />
<meta name="description" content="Use the Godot Engine editor directly in your web browser, without having to install anything." />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Godot" /> <meta name="application-name" content="Godot" />
@ -11,7 +13,14 @@
<meta name="msapplication-navbutton-color" content="#478cbf" /> <meta name="msapplication-navbutton-color" content="#478cbf" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="msapplication-starturl" content="/latest" /> <meta name="msapplication-starturl" content="/latest" />
<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' /> <meta property="og:site_name" content="Godot Engine Web Editor" />
<meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/" />
<meta property="og:title" name="twitter:title" content="Free and open source 2D and 3D game engine" />
<meta property="og:description" name="twitter:description" content="Use the Godot Engine editor directly in your web browser, without having to install anything." />
<meta property="og:image" name="twitter:image" content="https://godotengine.org/themes/godotengine/assets/og_image.png" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<link id="-gd-engine-icon" rel="icon" type="image/png" href="favicon.png" />
<link rel="apple-touch-icon" type="image/png" href="favicon.png" /> <link rel="apple-touch-icon" type="image/png" href="favicon.png" />
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<title>Godot Engine Web Editor (@GODOT_VERSION@)</title> <title>Godot Engine Web Editor (@GODOT_VERSION@)</title>
@ -204,8 +213,8 @@
<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button> <button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
<button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button> <button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button>
</div> </div>
<div id='tabs'> <div id="tabs">
<div id='tab-loader'> <div id="tab-loader">
<div style="color: #e0e0e0;" id="persistence"> <div style="color: #e0e0e0;" id="persistence">
<label for="videoMode" style="display: none;">Select video driver:</label><br /> <label for="videoMode" style="display: none;">Select video driver:</label><br />
<select id="videoMode" style="display: none;"> <select id="videoMode" style="display: none;">
@ -213,7 +222,7 @@
<option value="GLES3">WebGL 2</option> <option value="GLES3">WebGL 2</option>
</select> </select>
<br /> <br />
<img src="logo.svg" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" /> <img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
<br /> <br />
@GODOT_VERSION@ @GODOT_VERSION@
<br /> <br />
@ -221,7 +230,7 @@
<br /> <br />
<br /> <br />
<br /> <br />
<label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" id="files" name="files" style="margin-bottom: 1rem"/> <label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" name="files" style="margin-bottom: 1rem"/>
<br /> <br />
<a href="demo.zip">(Try this for example)</a> <a href="demo.zip">(Try this for example)</a>
<br /> <br />
@ -233,21 +242,21 @@
<a href="https://docs.godotengine.org/en/3.3/tutorials/editor/using_the_web_editor.html">Web editor documentation</a> <a href="https://docs.godotengine.org/en/3.3/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
</div> </div>
</div> </div>
<div id='tab-editor' style="display: none;"> <div id="tab-editor" style="display: none;">
<canvas id='editor-canvas' tabindex="1"> <canvas id="editor-canvas" tabindex="1">
HTML5 canvas appears to be unsupported in the current browser.<br /> HTML5 canvas appears to be unsupported in the current browser.<br />
Please try updating or use a different browser. Please try updating or use a different browser.
</canvas> </canvas>
</div> </div>
<div id='tab-game' style="display: none;"> <div id="tab-game" style="display: none;">
<canvas id='game-canvas' tabindex="2"> <canvas id="game-canvas" tabindex="2">
HTML5 canvas appears to be unsupported in the current browser.<br /> HTML5 canvas appears to be unsupported in the current browser.<br />
Please try updating or use a different browser. Please try updating or use a different browser.
</canvas> </canvas>
</div> </div>
<div id='tab-status' style="display: none;"> <div id="tab-status" style="display: none;">
<div id='status-progress' style='display: none;' oncontextmenu='event.preventDefault();'><div id ='status-progress-inner'></div></div> <div id="status-progress" style="display: none;" oncontextmenu="event.preventDefault();"><div id="status-progress-inner"></div></div>
<div id='status-indeterminate' style='display: none;' oncontextmenu='event.preventDefault();'> <div id="status-indeterminate" style="display: none;" oncontextmenu="event.preventDefault();">
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
@ -257,7 +266,7 @@
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
<div id='status-notice' class='godot' style='display: none;'></div> <div id="status-notice" class="godot" style="display: none;"></div>
</div> </div>
</div> </div>
<script> <script>
@ -267,7 +276,7 @@
} }
}); });
</script> </script>
<script src='godot.tools.js'></script> <script src="godot.tools.js"></script>
<script>//<![CDATA[ <script>//<![CDATA[
var editor = null; var editor = null;