Merge pull request #587 from aaronfranke/web-readme

aaronfranke · web-flow · commit c2e7a30e4282 · 2021-02-28T16:18:29.000-05:00
Link to the web export in the README and format names nicer
diff --git a/.github/dist/header.html b/.github/dist/header.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -77,8 +78,19 @@
 		li a:hover {
 			background-color: hsla(0, 0%, 50%, 0.1);
 		}
+
+		li a * {
+			float: left;
+		}
+
+		li a p {
+			height: 24px;
+			margin: 20px 10px;
+		}
+
 	</style>
 </head>
+
 <body>
 	<h1>Godot demo projects</h1>
 	<p>
diff --git a/.github/workflows/export_html5.yml b/.github/workflows/export_html5.yml
@@ -75,7 +75,7 @@ jobs:
 
             # Append the demo to the list of demos for the website.
             PROJECT_NAME=$(cat project.godot | grep "config/name" | cut -d '"' -f 2 | tr -d "\n")
-            echo "<li><a href='$demo'><img width="64" height="64" src="$demo/favicon.png" alt=""> $PROJECT_NAME</a></li>" >> "$BASEDIR/.github/dist/demos.html"
+            echo "<li><a href='$demo'><img width="64" height="64" src="$demo/favicon.png" alt=""><p>$PROJECT_NAME</p></a></li>" >> "$BASEDIR/.github/dist/demos.html"
           done
 
           cat "$BASEDIR/.github/dist/header.html" "$BASEDIR/.github/dist/demos.html" "$BASEDIR/.github/dist/footer.html" > "$BASEDIR/.github/dist/index.html"
diff --git a/README.md b/README.md
@@ -26,6 +26,14 @@ To import all demos at once in the project manager:
 - Choose the path to the folder containing all demos.
 - All demos should now appear in the project manager.
 
+## Try the demos in your browser
+
+Most of the demos are exported to GitHub Pages. They can be viewed
+[here](https://godotengine.github.io/godot-demo-projects/).
+
+**Note:** The performance of Godot in a browser is lower than natively on
+desktop. For the best performance, consider downloading the demos.
+
 ## Useful links
 
 - [Main website](https://godotengine.org)
