From cc0192977de4d50a5446f2e06c1d0fd3e8595488 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Tue, 22 Aug 2023 03:41:19 -0700
Subject: [PATCH] Add demo artwork open links to website

---
 frontend/src/wasm-communication/editor.ts |  3 +++
 website/content/_index.md                 | 12 ++++++------
 website/sass/index.scss                   |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/wasm-communication/editor.ts b/frontend/src/wasm-communication/editor.ts
index bcfd3f94c..7839fb192 100644
--- a/frontend/src/wasm-communication/editor.ts
+++ b/frontend/src/wasm-communication/editor.ts
@@ -101,6 +101,9 @@ export function createEditor() {
 			const filename = url.pathname.split("/").pop() || "Untitled";
 			const content = await data.text();
 			instance.openDocumentFile(filename, content);
+
+			// Remove the hash fragment from the URL
+			window.location.hash = "";
 		} catch {}
 	})();
 
diff --git a/website/content/_index.md b/website/content/_index.md
index ad90801e9..42fa9609a 100644
--- a/website/content/_index.md
+++ b/website/content/_index.md
@@ -100,7 +100,7 @@ js = ["/image-interaction.js", "/fundraising.js"]
 		</div>
 		<div class="screenshot-description">
 			<p class="active" data-carousel-description>
-				<em>Valley of Spires</em> — <a href="https://static.graphite.rs/graphite-files/valley-of-spires.graphite">Download</a> the artwork and open it in <a href="https://79dda0fc.graphite.pages.dev/">this previous version</a> of the Graphite editor.
+				<em>Valley of Spires</em> — <a href="https://editor.graphite.rs/#demo/valley-of-spires">Open this artwork</a> to explore it yourself.
 			</p>
 			<p data-carousel-description>
 				Design mockup for the work-in-progress node graph raster editing pipeline. Some raster nodes shown here are not implemented yet.
@@ -264,17 +264,17 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
 		<source src="https://static.graphite.rs/content/index/just-a-potted-cactus-timelapse.mp4" type="video/mp4" />
 	</video>
 </div>
-<div class="download-artwork">
-	<img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.png" alt="Vector art of Just of Potted Cactus" />
+<div class="demo-artwork">
+	<a href="https://editor.graphite.rs/#demo/just-a-potted-cactus">
+		<img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.png" alt="Vector art of Just of Potted Cactus" />
+	</a>
 	<p>
 		<span class="balance-text">
 			<em>Just a Potted Cactus</em>
 		</span>
 		<br />
 		<span class="balance-text">
-			<a href="https://static.graphite.rs/graphite-files/just-a-potted-cactus.graphite">Download</a>
-			the artwork and open it in the
-			<a href="https://editor.graphite.rs">Graphite editor</a>
+			<a href="https://editor.graphite.rs/#demo/just-a-potted-cactus">Open this artwork</a> to explore it yourself.
 		</span>
 	</p>
 </div>
diff --git a/website/sass/index.scss b/website/sass/index.scss
index 37a2850a1..2d2dbc9a1 100644
--- a/website/sass/index.scss
+++ b/website/sass/index.scss
@@ -258,7 +258,7 @@
 	.section {
 		align-items: center;
 
-		.download-artwork {
+		.demo-artwork {
 			display: flex;
 			align-items: center;
 			margin-top: 20px;