open in wasm

fullstackedorg · Dec 31, 2024 · 056f6d5 · 056f6d5
1 parent 3376a5f
commit 056f6d5
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 24 deletions.
diff --git a/index.css b/index.css
@@ -50,11 +50,18 @@ p {
 }
 
 a {
-    color: inherit;
-    text-decoration: underline;
-    &:hover{
-        color: rgba(255,255,255,1);
-    }
+    display: inline-block;
+    background-color: #39414e;
+    text-decoration: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-weight: bold;
+    margin: 3px 0;
+    transition: 0.2s background-color;
+    color: white;
+}
+a:hover{
+    background-color: #536076;
 }
 
 svg {
@@ -77,3 +84,8 @@ div {
     width: calc(100% - 20px);
     overflow: auto;
 }
+
+section {
+    padding-top: 20px;
+    display: none;
+}
diff --git a/index.html b/index.html
@@ -1,51 +1,89 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-    <head>        
-        <meta charset="UTF-8">
+    <head>
+        <meta charset="UTF-8" />
         <title>Share | FullStacked</title>
 
-        <meta name="theme-color" content="#081325"/>
-
-        <link rel="icon" type="image/x-icon" href="https://files.fullstacked.org/favicon.png">
-        <link rel="stylesheet" href="index.css">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="apple-itunes-app" content="app-id=6477835950">
-
+        <meta name="theme-color" content="#081325" />
+
+        <link
+            rel="icon"
+            type="image/x-icon"
+            href="https://files.fullstacked.org/favicon.png"
+        />
+        <link rel="stylesheet" href="index.css" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="apple-itunes-app" content="app-id=6477835950" />
+
         <meta property="og:url" content="https://fullstacked.org" />
         <meta property="og:type" content="website" />
         <meta property="og:title" content="FullStacked" />
-        <meta property="og:description" content="Build and run full-stack JavaScript web apps on any platform." />
-        <meta property="og:image" content="https://files.fullstacked.org/sharing-image.jpg" />
+        <meta
+            property="og:description"
+            content="Build and run full-stack JavaScript web apps on any platform."
+        />
+        <meta
+            property="og:image"
+            content="https://files.fullstacked.org/sharing-image.jpg"
+        />
 
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:site" content="@get_fullstacked" />
         <meta name="twitter:title" content="FullStacked" />
-        <meta name="twitter:description" content="Build and run full-stack JavaScript web apps on any platform." />
-        <meta name="twitter:image" content="https://files.fullstacked.org/sharing-image.jpg" />
-
+        <meta
+            name="twitter:description"
+            content="Build and run full-stack JavaScript web apps on any platform."
+        />
+        <meta
+            name="twitter:image"
+            content="https://files.fullstacked.org/sharing-image.jpg"
+        />
     </head>
     <body>
         <img src="app-icon-dev.PNG" />
         <h1>FullStacked Editor</h1>
         <p>You are trying to open</p>
         <div></div>
-        <p>Make sure you have FullStacked Editor installed.</p>
-        <a href="https://github.com/fullstackedorg/editor/releases/latest" target="_blank">
+        <p>Make sure you have FullStacked installed beforehand.</p>
+        <a href="https://fullstacked.org/download" target="_blank">
             Download Page
         </a>
+        <section>
+            <p>Try this repository directly in your browser!</p>
+            <a
+                id="open-in-wasm"
+                target="_blank"
+            >
+                Open in FullStacked WASM
+            </a>
+        </section>
 
         <script>
             const searchParams = new URLSearchParams(window.location.search);
             const gitURL = searchParams.get("git");
             const div = document.querySelector("div");
             div.innerText = gitURL || "No git in url";
-            
+
             const deeplink = () => {
                 if(gitURL)
                     window.location.href = "fullstacked://" + gitURL;
             }
             deeplink();
             div.addEventListener("click", deeplink);
+
+            let fullstackedorgRepoURL;
+            if(gitURL.startsWith("https:")) {
+                const url = new URL(gitURL);
+                if(url.pathname.startsWith("/fullstackedorg")){
+                    fullstackedorgRepoURL = url
+                }
+            }
+
+            if(fullstackedorgRepoURL){
+                document.querySelector("section").style.display = "block";
+                document.querySelector("#open-in-wasm").href = "https://demo.fullstacked.org?url=" +
+                    encodeURIComponent(fullstackedorgRepoURL.toString());
+            }
         </script>
     </body>
-</html>
+</html>