improvement: add an option for "already have an app" in installer

ash-project · Jan 19, 2025 · c425a76 · c425a76
1 parent d636a5e
commit c425a76
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 22 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -336,6 +336,30 @@ const features = {
   }
 }
 
+let addingToApp = false;
+
+window.addingToApp = function() {
+  if (addingToApp) {
+    addingToApp = false;
+
+    document.getElementById('feature-phoenix').classList.remove("hidden");
+    document.getElementById('quickstart-live_view').classList.remove("hidden");
+    document.getElementById('already-have-an-app-button').innerHTML = "Creating a new app?"
+  } else {
+    addingToApp = true;
+
+    const feature = document.getElementById('feature-phoenix-active')
+    if(!feature.classList.contains("hidden")) {
+      feature.click();
+    }
+    document.getElementById('feature-phoenix').classList.add("hidden");
+    document.getElementById('quickstart-live_view').classList.add("hidden");
+    document.getElementById('already-have-an-app-button').innerHTML = "Already have an app?"
+  }
+
+  setUrl()
+}
+
 for (var quickstart of Object.keys(quickstarts)) {
   const tooltip = quickstarts[quickstart].tooltip
   if (tooltip) {
@@ -390,7 +414,6 @@ function addTooltip(id, content) {
 
 let appName = document.getElementById("app-name").value;
 
-
 document.addEventListener('DOMContentLoaded', function() {
   document.getElementById('quickstart-live_view-inactive').click();
 });
@@ -475,15 +498,22 @@ function setUrl() {
 
   const argsString = args.join(" ")
   let firstLine = `sh <(curl '${base}/${appNameSafe}${installArg}') \\`
+  let limit;
+
   let code = `${firstLine}
     && cd ${appNameSafe}`
 
-  if (packages.length !== 0) {
-    code = code + ` \\
-    && mix igniter.install \\`
-  }
+  if (addingToApp) {
+    code = "mix igniter.install ash \\"
+    limit = code.length + 20
+  } else {
+    if (packages.length !== 0) {
+      code = code + ` \\
+      && mix igniter.install \\`
+    }
 
-  const limit = Math.max(firstLine.length - 2, 45)
+    limit = Math.max(firstLine.length - 2, 45)
+  }
 
   let currentLine = ''
   for (let i = 0; i < packages.length; i++) {

diff --git a/lib/ash_hq_web/templates/home/home.html.heex b/lib/ash_hq_web/templates/home/home.html.heex
@@ -89,17 +89,7 @@
     id="get-started"
     class="max-w-5xl mx-auto text-center lg:px-8 backdrop-blur-lg bg-slate-950/50 rounded-2xl border border-primary-light-500/30 p-4"
   >
-    <h2 class="text-3xl font-bold mb-6 text-primary-light-200">Try our interactive tutorial</h2>
-    <a
-      href="https://livebook.dev/run?url=https%3A%2F%2Fgithub.com%2Fash-project%2Fash_tutorial%2Fblob%2Fmaster%2Foverview.livemd"
-      class="cursor-pointer inline-flex items-center rounded-full bg-primary-dark-600 text-white font-medium hover:bg-primary-dark-700 transition-all transform hover:scale-105 shadow-[0_0_20px_#FF5757]"
-    >
-      <img src="https://livebook.dev/badge/v1/pink.svg" alt="Run in Livebook" />
-    </a>
-
-    <div class="my-6 text-primary-light-200">- or -</div>
-
-    <h2 class="text-3xl font-bold text-primary-light-200">Get Started Now</h2>
+    <h2 class="text-3xl font-bold text-primary-light-200">Get Your Installer</h2>
     <div id="installer" />
 
     <div class="flex flex-col justify-center mt-2">
@@ -116,18 +106,23 @@
       </div>
     </div>
 
-    <div id="cant-decide" class="mb-2 mt-2">
+    <div id="cant-decide" class="mt-2">
       <button class="text-lg underline cursor-pointer" onclick="window.cantDecide()">
         Feeling stuck? Can't decide?
       </button>
     </div>
+    <div id="already-have-an-app" class="mb-2">
+      <button id="already-have-an-app-button" class="text-lg underline cursor-pointer" onclick="window.addingToApp()">
+        Already have an app?
+      </button>
+    </div>
     <div id="show-options" class="hidden mt-2">
       <button class="text-lg underline cursor-pointer" onclick="window.showAll()">
         Show all
       </button>
     </div>
     <h2 id="presets-label" class="text-xl font-bold text-primary-light-200">Presets</h2>
-    <div id="quickstarts-list" class="flex flex-row flex-wrap gap-2 justify-center mt-6 mb-10">
+    <div id="quickstarts-list" class="flex flex-row flex-wrap gap-2 justify-center mt-2 mb-4">
       <div class="flex flex-row flex-wrap justify-center gap-2 gap-x-2 gap-y-5">
         <label :for={{value, name} <- quickstarts()} id={"quickstart-#{value}"}>
           <span
@@ -150,15 +145,15 @@
       </div>
     </div>
 
-    <div id="advanced-features" class="border-t border-primary-dark-500/40 pt-4">
+    <div id="advanced-features" class="border-t border-primary-dark-500/40">
       <div class="flex flex-wrap justify-center gap-2">
         <div
           :for={{category, features} <- features()}
           data-category={category}
           class="feature-category p-2"
         >
           <h3 class="text-lg font-bold mb-2 text-primary-light-200">{category}</h3>
-          <div class="flex flex-wrap gap-2 gap-y-4 justify-center">
+          <div class="flex flex-wrap gap-2 gap-y-2 justify-center">
             <label :for={{value, name} <- features} id={"feature-#{value}"} class="feature">
               <div class="flex flex-col">
                 <span
@@ -194,7 +189,7 @@
     <div id="dont-worry" class="mb-2 hidden flex flex-col gap-2">
       <p class="text-lg">
         Pick a preset and go. Everything but Phoenix can be
-        <a class="text-primary-dark-400" href="#install-later">installed later.</a>
+        <a class="text-primary-dark-400 cursor-pointer" onclick="window.addingToApp()">installed later.</a>
       </p>
       <p class="text-lg">
         All the presets use PostgreSQL, the best database around.
@@ -259,6 +254,16 @@
         Copy
       </span>
     </button>
+
+    <div class="my-6 text-primary-light-200">- or -</div>
+
+    <h2 class="text-3xl font-bold mb-6 text-primary-light-200">Try our interactive tutorial</h2>
+    <a
+      href="https://livebook.dev/run?url=https%3A%2F%2Fgithub.com%2Fash-project%2Fash_tutorial%2Fblob%2Fmaster%2Foverview.livemd"
+      class="cursor-pointer inline-flex items-center rounded-full bg-primary-dark-600 text-white font-medium hover:bg-primary-dark-700 transition-all transform hover:scale-105 shadow-[0_0_20px_#FF5757]"
+    >
+      <img src="https://livebook.dev/badge/v1/pink.svg" alt="Run in Livebook" />
+    </a>
   </div>
 
   <div class="mt-12">