Improve Clever Cloud wording

backend/lib/azimutt_web/templates/clever_cloud/show.html.heex

@@ -45,18 +45,18 @@
                                             <input type="hidden" name="name" value={@resource.owner_name}>
                                             <div class="sm:flex">
                                                 <div class="min-w-0 flex-1">
-                                                    <label for="database" class="sr-only">Database Url</label>
-                                                    <input type="text" name="database" id="database" placeholder="Enter your database url" required class="block w-full rounded-md border-0 px-4 py-3 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-gray-900">
+                                                    <label for="database" class="sr-only">Database URI</label>
+                                                    <input type="text" name="database" id="database" placeholder="Enter your database URI" required class="block w-full rounded-md border-0 px-4 py-3 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-gray-900">
                                                 </div>
                                                 <div class="mt-3 sm:mt-0 sm:ml-3">
                                                     <button type="submit" class="bg-[#d74d4e] hover:bg-[#bf2b2c] block w-full rounded-md py-3 px-4 font-medium text-white shadow focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2 focus:ring-offset-gray-900">Connect database</button>
                                                 </div>
                                             </div>
                                             <p class="mt-3 text-sm text-gray-300 sm:mt-4">
-                                                To get your database url, open <a href={CleverCloud.org_url(@resource.owner_id)} target="_blank" rel="noopener noreferrer" class="font-medium text-white underline">your organization</a> app settings,
-                                                go to "<span class="italic font-bold">Environment variables</span>" and look for the "<span class="italic font-bold">POSTGRESQL_ADDON_URI</span>" one.
-                                                It looks like: <span class="italic whitespace-nowrap">postgres://user:password@host:port/db</span><br>
-                                                <a href={"mailto:#{Azimutt.config(:support_email)}"} rel="noopener noreferrer" class="font-medium text-white underline">Contact us</a> if you have any trouble.
+                                                To get your database URI, open any SQL database dashboard in <a href={CleverCloud.org_url(@resource.owner_id)} target="_blank" rel="noopener noreferrer" class="font-medium text-white underline">your organization</a><br>
+                                                and look for the "Connection URI".<br>
+                                                It looks like: <span class="italic whitespace-nowrap">protocol://user:password@host:port/db</span> (see <a href="/images/clever_cloud_db_uri.png" target="_blank" rel="noopener noreferrer" class="underline">screenshot</a>)<br>
+                                                Learn more about <a href={Routes.website_path(@conn, :index)} target="_blank" rel="noopener noreferrer" class="font-medium text-white underline">Azimutt</a>, or <a href={"mailto:#{Azimutt.config(:support_email)}?subject=#{URI.encode("Help connecting Clever Cloud Add-on")}&body=#{URI.encode("Hi,\n\nI'm looking to connect Azimutt Add-on on Clever Cloud but ...\n\nHere are my infos:\n- organization id: #{@resource.owner_id}\n- addon id: #{@resource.addon_id}\n")}"} target="_blank" rel="noopener noreferrer" class="font-medium text-white underline">contact us</a> for support.
                                             </p>
                                         <% end %>
                                     </div>

backend/lib/azimutt_web/templates/website/portal.html.heex

@@ -2,15 +2,15 @@
     <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
         <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
     </div>
-    <div class="mx-auto max-w-3xl py-32 sm:py-48 lg:py-56">
+    <div class="mx-auto max-w-3xl py-32 sm:py-48">
         <!--<div class="hidden sm:mb-8 sm:flex sm:justify-center">
           <div class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
             Announcing our next round of funding. <a href="#" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
           </div>
         </div>-->
         <div class="text-center">
             <h1 class="text-balance text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Your PostgreSQL database, without incidents.</h1>
-            <p class="mt-6 text-lg leading-8 text-gray-600">Get insights from your database to fix issues before the become production incidents.</p>
+            <p class="mt-6 text-lg leading-8 text-gray-600">Get insights from your database to fix issues before they become production incidents.</p>
             <form action="https://track.bentonow.com/forms/a1cd7053c9e744dd4d9c0fb90a66442b/$portal_waitlist?hardened=true" method="POST" enctype="multipart/form-data" class="mx-auto mt-12 w-full max-w-md lg:col-span-5 lg:pt-2">
                 <input type="hidden" name="redirect" value="https://azimutt.app/portal/subscribed">
                 <div class="flex gap-x-4">
@@ -28,7 +28,7 @@
 
 
 
-<div class="px-6 pt-24 lg:px-8">
+<div class="px-6 pt-12 lg:px-8">
     <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
         <h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Databases are critical.</h1>
         <p class="mt-6 text-xl leading-8">
@@ -55,28 +55,28 @@
                     <svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                     </svg>
-                    <span><strong class="font-semibold text-gray-900">Not only monitor slow queries</strong>, but identify degradations, fast and slow.</span>
+                    <span>Not only monitor slow queries, but <strong class="font-semibold text-gray-900">identify degradations, fast and slow</strong>.</span>
                 </li>
                 <li class="flex gap-x-3">
                     <svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                     </svg>
-                    <span><strong class="font-semibold text-gray-900">Not only trigger thresholds alerts</strong>, but search unusual values and patterns.</span>
+                    <span>Not only trigger thresholds alerts, but <strong class="font-semibold text-gray-900">search unusual values and patterns</strong>.</span>
                 </li>
                 <li class="flex gap-x-3">
                     <svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                     </svg>
-                    <span><strong class="font-semibold text-gray-900">Not only react on sudden events</strong>, but also warn on long term drift.</span>
+                    <span>Not only react on sudden events, but <strong class="font-semibold text-gray-900">also warn on long term drift</strong>.</span>
                 </li>
                 <li class="flex gap-x-3">
                     <svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                         <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                     </svg>
-                    <span><strong class="font-semibold text-gray-900">Not only monitor a database</strong>, but inspect all your clusters.</span>
+                    <span>Not only monitor a database, but <strong class="font-semibold text-gray-900">inspect all your clusters</strong>.</span>
                 </li>
             </ul>
-            <p class="mt-8">Watch internals for weak signal: dead rows, analyze and vacuum delays.</p>
+            <p class="mt-8 italic">Look for database internals for weak signal: dead rows, analyze and vacuum delays.</p>
         </div>
     </div>
 </div>
@@ -102,7 +102,7 @@
                         Fine-grained access rights
                     </dt>
                     <dd class="mt-2 text-base leading-7 text-gray-600">
-                        Allowing see schema, run query plan, read access or write access for any table/column.
+                        Allowing to see schema, run query plan, read or write data for any table/column.
                         All with history, temporary access, query approval and urgency escalation.
                     </dd>
                 </div>
@@ -149,9 +149,8 @@
         <p class="mt-6 text-xl leading-8">
             Current products show you a lot of data and graphs, allowing you to dig into issues.
             This is good. But only if you have the skills, the time or the necessity to dig in.<br>
-            Azimutt portal mainly provides alerts and insights. It's meant for teams who want their databases on autopilot.
-            This is not a replacement of other tools, it's an addition with expert knowledge backed in.<br>
-            Or more probably, your first step into taking better care or your database.
+            Azimutt portal mainly provides alerts and insights. It's meant for teams who want their databases on autopilot.<br>
+            This is your first step into taking better care of your database.
         </p>
     </div>
 </div>

cli/src/diff.ts

@@ -43,19 +43,20 @@ export async function launchDiff(leftUrl: string, rightUrl: string, opts: Opts,
     logger.log('')
 
     const diff = databaseDiff(leftDb, rightDb)
-    const lines = showDatabaseDiff(diff)
+    logger.log('\nWork In Progress...\n')
+    /*const lines = showDatabaseDiff(diff)
     lines.forEach(l => logger.log(l))
     if (lines.length === 0) {
         logger.log('No diff found!')
-    }
+    }*/
     logger.log('')
     logger.log('Database schema diff done!')
     logger.log('')
 }
 
 const indexToId = (i: Index): string => `${i.name}(${i.attrs.map(attributePathToId).join(', ')})`
 
-function showDatabaseDiff(diff: DatabaseDiff): string[] {
+/*function showDatabaseDiff(diff: DatabaseDiff): string[] {
     return ([] as string[]).concat(
         showDiff(diff.types, 'type', typeToId),
         showDiff(diff.relations, 'relation', relationToId),
@@ -69,7 +70,7 @@ function showDatabaseDiff(diff: DatabaseDiff): string[] {
             return entityToId(d.left) + lines.join('')
         }),
     )
-}
+}*/
 
 function showDiff<T extends object>(diff: Diff<T> | undefined, entity: string, show: (t: T) => string): string[] {
     return [