Add links for VS Code extension

backend/config/config.exs

@@ -16,6 +16,7 @@ config :azimutt,
   logo_url_for_emails: "https://azimutt.app/android-chrome-512x512.png",
   cli_url: "https://www.npmjs.com/package/azimutt",
   heroku_url: "https://elements.heroku.com/addons/azimutt",
+  vscode_extension_url: "https://marketplace.visualstudio.com/items?itemName=azimutt.vscode-aml",
   browser_extension_url: "https://chrome.google.com/webstore/detail/azimutt/bpifdkechgdibghkkpaioccoijeoebjf",
   azimutt_documentation: "https://azimutt.app/docs",
   azimutt_email: "[email protected]",
@@ -27,8 +28,8 @@ config :azimutt,
   azimutt_github_issues_new: "https://github.com/azimuttapp/azimutt/issues/new",
   environment: config_env(),
   # TODO: find an automated process to build it
-  version: "2.1.16",
-  version_date: "2024-11-29T00:00:00.000Z",
+  version: "2.1.17",
+  version_date: "2024-12-02T00:00:00.000Z",
   commit_hash: System.cmd("git", ["log", "-1", "--pretty=format:%h"]) |> elem(0) |> String.trim(),
   commit_message: System.cmd("git", ["log", "-1", "--pretty=format:%s"]) |> elem(0) |> String.trim(),
   commit_date: System.cmd("git", ["log", "-1", "--pretty=format:%aI"]) |> elem(0) |> String.trim(),

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

@@ -50,6 +50,7 @@
                             <li><a href={Routes.website_path(@conn, :converters)} title="Convert from a dialect to another: SQL, AML, DBML, JSON..." class="text-sm leading-6 text-gray-600 hover:text-gray-900">Dialect converters</a></li>
                             <li><a href={Routes.website_path(@conn, :connectors)} title="List of Azimutt connectors to connect to databases" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Connectors</a></li>
                             <!-- <li><a href="#soon" title="Sync local files, imported source or exported project, connect to local databases and more" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Azimutt Desktop <span class="inline-flex items-center rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800">soon</span></a></li> -->
+                            <li><a href={Azimutt.config(:vscode_extension_url)} target="_blank" rel="noopener noreferrer" title="Best writing experience for AML" class="text-sm leading-6 text-gray-600 hover:text-gray-900">VS Code extension</a></li>
                             <li><a href={Azimutt.config(:browser_extension_url)} target="_blank" rel="noopener noreferrer" title="Open any SQL schema in GitHub with Azimutt" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Browser extension</a></li>
                             <li><a href={Azimutt.config(:heroku_url)} target="_blank" rel="noopener noreferrer" title="Connect your Heroku app/database with Azimutt" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Heroku Add-on</a></li>
                             <li><a href={Routes.gallery_path(@conn, :index)} title="Gallery of many database schemas, for inspiration" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Database samples</a></li>

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

@@ -1,9 +1,10 @@
 <%
   aml_doc = Routes.website_path(@conn, :doc, ["aml"])
   aml_npm = "https://www.npmjs.com/package/@azimutt/aml"
+  aml_vscode = Azimutt.config(:vscode_extension_url)
   aml_converter = Routes.website_path(@conn, :converter, "aml")
   aml_azimutt = Routes.elm_path(@conn, :create)
-  cli_convert = "https://github.com/azimuttapp/azimutt/blob/main/cli/README.md#convert"
+  # cli_convert = "https://github.com/azimuttapp/azimutt/blob/main/cli/README.md#convert"
 %>
 <div class="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20 pt-10 pb-24">
     <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8">
@@ -121,13 +122,13 @@ COMMENT ON COLUMN posts.content IS 'in markdown';</code></pre>
             <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
                 <div class="flex flex-col">
                     <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
-                        <Icon.arrow_path kind="outline" class="h-5 w-5 flex-none text-indigo-600" />
-                        In converters
+                        <Icon.command_line kind="outline" class="h-5 w-5 flex-none text-indigo-600" />
+                        In Visual Studio Code
                     </dt>
                     <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
-                        <p class="flex-auto">Azimutt offers free converters from/to many formats: AML, SQL, JSON, DBML, Mermaid and more. Use our converters to quickly get what you need.</p>
+                        <p class="flex-auto">VS Code extension providing syntax highlighting, inline errors, smart suggestions, symbol rename and even conversions to SQL, JSON, DOT, Mermaid and more...</p>
                         <p class="mt-6">
-                            <a href={aml_converter} class="text-sm font-semibold leading-6 text-indigo-600">Use converters <span aria-hidden="true">→</span></a>
+                            <a href={aml_vscode} target="_blank" rel="noopener noreferrer" class="text-sm font-semibold leading-6 text-indigo-600">Get extension <span aria-hidden="true">→</span></a>
                         </p>
                     </dd>
                 </div>
@@ -145,13 +146,13 @@ COMMENT ON COLUMN posts.content IS 'in markdown';</code></pre>
                 </div>
                 <div class="flex flex-col">
                     <dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
-                        <Icon.command_line kind="outline" class="h-5 w-5 flex-none text-indigo-600" />
-                        With the CLI
+                        <Icon.arrow_path kind="outline" class="h-5 w-5 flex-none text-indigo-600" />
+                        With converters
                     </dt>
                     <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
-                        <p class="flex-auto">The Azimutt CLI is a toolbox to work with databases, and now you can also convert dialects from one to another with a single command.</p>
+                        <p class="flex-auto">Azimutt offers free converters from/to many formats: AML, SQL, JSON, DBML, Mermaid and more. Use our converters to quickly get what you need.</p>
                         <p class="mt-6">
-                            <a href={cli_convert} target="_blank" rel="noopener noreferrer" class="text-sm font-semibold leading-6 text-indigo-600">View command <span aria-hidden="true">→</span></a>
+                            <a href={aml_converter} class="text-sm font-semibold leading-6 text-indigo-600">Use converters <span aria-hidden="true">→</span></a>
                         </p>
                     </dd>
                 </div>

frontend/src/PagesComponents/Organization_/Project_/Components/AmlSidebar.elm

@@ -375,7 +375,9 @@ viewWarnings warnings =
 viewHelp : Html msg
 viewHelp =
     p [ class "mt-2 text-sm text-gray-500" ]
-        [ text "Write your schema using "
+        [ text "Write your database schema using "
         , extLink Urls.amlDocs [ class "link" ] [ text "AML syntax" ]
-        , text "."
+        , text ". You can also use the "
+        , extLink Urls.vscodeExt [ class "link" ] [ text "VS Code extension" ]
+        , text " for best editing experience."
         ]

frontend/src/Services/Urls.elm

@@ -1,4 +1,4 @@
-module Services.Urls exposing (amlDocs, amlEditor, amlHome, amlV1Converter, cliNpm, pricing)
+module Services.Urls exposing (amlDocs, amlEditor, amlHome, amlV1Converter, cliNpm, pricing, vscodeExt)
 
 
 amlHome : String
@@ -26,6 +26,11 @@ cliNpm =
     "https://www.npmjs.com/package/azimutt"
 
 
+vscodeExt : String
+vscodeExt =
+    "https://marketplace.visualstudio.com/items?itemName=azimutt.vscode-aml"
+
+
 pricing : String
 pricing =
     "/pricing"