Add connector pages

backend/config/config.exs

@@ -28,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.10",
-  version_date: "2024-10-11T00:00:00.000Z",
+  version: "2.1.11",
+  version_date: "2024-10-15T00: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.ex

@@ -310,6 +310,20 @@ defmodule Azimutt do
     ]
   end
 
+  def connectors do
+    [
+      %{id: "postgres", name: "PostgreSQL", color: "#699eca"},
+      %{id: "mysql", name: "MySQL", color: "#00758f"},
+      %{id: "mariadb", name: "MariaDB", color: "#444b5e"},
+      %{id: "sqlserver", name: "SQL Server", color: "#ededee"},
+      %{id: "oracle", name: "Oracle", color: "#e61d18"},
+      %{id: "mongodb", name: "MongoDB", color: "#20a854"},
+      %{id: "couchbase", name: "Couchbase", color: "#ed2226"},
+      %{id: "bigquery", name: "BigQuery", color: "#4386fa"},
+      %{id: "snowflake", name: "Snowflake", color: "#29b5e8"}
+    ]
+  end
+
   def converters do
     [
       %{id: "aml", name: "AML", parse: true, generate: true},
@@ -393,11 +407,19 @@ defmodule Azimutt do
           %{path: ["api"], name: "API"}
         ]
       },
+      %{
+        path: ["internals"],
+        name: "Inside Azimutt",
+        children: [
+          %{path: ["infer-relations"], name: "Inferring relations"}
+        ]
+      },
       %{
         path: ["other-tools"],
         name: "Other tools",
         children: [
           %{path: ["cli"], name: "CLI"},
+          %{path: ["gateway"], name: "Gateway"},
           %{path: ["converters"], name: "Converters"}
         ]
       },

backend/lib/azimutt_web/components/icon.ex

@@ -29,6 +29,7 @@ defmodule AzimuttWeb.Components.Icon do
       "book-open" -> book_open(assigns)
       "chat-bubble-left-right" -> chat_bubble_left_right(assigns)
       "check" -> check(assigns)
+      "check-badge" -> check_badge(assigns)
       "check-circle" -> check_circle(assigns)
       "chevron-down" -> chevron_down(assigns)
       "chevron-right" -> chevron_right(assigns)
@@ -537,6 +538,27 @@ defmodule AzimuttWeb.Components.Icon do
     end
   end
 
+  def check_badge(assigns) do
+    classes = if assigns[:class], do: " #{assigns[:class]}", else: ""
+
+    case assigns[:kind] do
+      "outline" ->
+        ~H"""
+        <.outline classes={classes}><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" /></.outline>
+        """
+
+      "solid" ->
+        ~H"""
+        <.solid classes={classes}><path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" /></.solid>
+        """
+
+      _ ->
+        ~H"""
+        <.mini classes={classes}><path fill-rule="evenodd" d="M16.403 12.652a3 3 0 0 0 0-5.304 3 3 0 0 0-3.75-3.751 3 3 0 0 0-5.305 0 3 3 0 0 0-3.751 3.75 3 3 0 0 0 0 5.305 3 3 0 0 0 3.75 3.751 3 3 0 0 0 5.305 0 3 3 0 0 0 3.751-3.75Zm-2.546-4.46a.75.75 0 0 0-1.214-.883l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" /></.mini>
+        """
+    end
+  end
+
   def check_circle(assigns) do
     classes = if assigns[:class], do: " #{assigns[:class]}", else: ""
 

backend/lib/azimutt_web/controllers/website_controller.ex

@@ -26,7 +26,41 @@ defmodule AzimuttWeb.WebsiteController do
     end
   end
 
-  def aml(conn, _params), do: conn |> render("aml.html")
+  def aml(conn, _params) do
+    render(conn, "aml.html",
+      seo: %{
+        title: "AML - The easiest DSL for database schemas",
+        description: "If you ever designed a database schema on a whiteboard, AML is made for you ❤️. It's fast to learn and write, and can be translated to other dialects.",
+        image: Routes.url(conn) <> "/images/og/aml.jpg"
+      }
+    )
+  end
+
+  def connectors(conn, _params) do
+    render(conn, "connectors/index.html",
+      seo: %{
+        title: "Discover all the connectors for Azimutt",
+        description:
+          "Azimutt is a database exploration and documentation tool made to help you understand and manage any database. We already have the mainstream ones, and we keep extending the integrations.",
+        image: Routes.url(conn) <> "/images/og/connectors.jpg"
+      }
+    )
+  end
+
+  def connector_new(conn, _params), do: conn |> render("connectors/new.html")
+
+  def connector(conn, %{"id" => id}) do
+    Azimutt.connectors()
+    |> Enum.find(fn c -> c.id == id end)
+    |> Result.from_nillable()
+    |> Result.map(fn connector ->
+      render(conn, "connectors/#{connector.id}.html",
+        connector: connector,
+        seo: %{title: "Explore #{connector.name} with Azimutt"}
+      )
+    end)
+  end
+
   def converters(conn, _params), do: conn |> render("converters/index.html")
 
   def converter(conn, %{"from" => from}) do

backend/lib/azimutt_web/router.ex

@@ -49,8 +49,9 @@ defmodule AzimuttWeb.Router do
     # get("/analyze", WebsiteController, :analyze)
     # get("/analyze/rules", WebsiteController, :analyze_rules)
     # get("/analyze/rules/:id", WebsiteController, :analyze_rule)
-    # get("/connectors", WebsiteController, :connectors)
-    # get("/connectors/:id", WebsiteController, :connector)
+    get("/connectors", WebsiteController, :connectors)
+    get("/connectors/new", WebsiteController, :connector_new)
+    get("/connectors/:id", WebsiteController, :connector)
     get("/converters", WebsiteController, :converters)
     get("/converters/:from", WebsiteController, :converter)
     get("/converters/:from/to/:to", WebsiteController, :convert)

backend/lib/azimutt_web/templates/sitemap/index.xml.eex

@@ -12,6 +12,11 @@
   <url><loc><%= Routes.website_url(@conn, :pricing) %></loc><lastmod>2023-03-10</lastmod></url>
 
   <url><loc><%= Routes.website_url(@conn, :aml) %></loc><lastmod>2024-09-29</lastmod></url>
+  <url><loc><%= Routes.website_url(@conn, :connectors) %></loc><lastmod>2024-10-15</lastmod></url>
+  <url><loc><%= Routes.website_url(@conn, :connector_new) %></loc><lastmod>2024-10-15</lastmod></url>
+  <%= for connector <- Azimutt.connectors() do %>
+  <url><loc><%= Routes.website_url(@conn, :connector, connector.id) %></loc><lastmod>2024-10-15</lastmod></url>
+  <% end %>
   <url><loc><%= Routes.website_url(@conn, :converters) %></loc><lastmod>2024-09-29</lastmod></url>
   <%= for parser <- Azimutt.converters() |> Enum.filter(fn c -> c.parse end) do %>
   <url><loc><%= Routes.website_url(@conn, :converter, parser.id) %></loc><lastmod>2024-09-29</lastmod></url>

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

@@ -47,7 +47,8 @@
                             <li><a href={Routes.website_path(@conn, :aml)} title="The easiest DSL to design databases" class="text-sm leading-6 text-gray-600 hover:text-gray-900">AML</a></li>
                             <li><a href={Azimutt.config(:cli_url)} target="_blank" rel="noopener noreferrer" title="Utilities from Azimutt: gateway, db analyze, export, conversions, diff..." class="text-sm leading-6 text-gray-600 hover:text-gray-900">Azimutt CLI</a></li>
                             <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="#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={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(: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/connectors/_article.html.heex

@@ -0,0 +1,24 @@
+<div class="max-w-3xl mx-auto px-6 pt-6 lg:px-8">
+    <a href={Routes.website_path(@conn, :connectors)} class="text-lg font-semibold leading-8 tracking-tight text-indigo-600 hover:underline">← All connectors</a>
+    <h1 class="mt-3 mb-6 text-4xl font-extrabold text-gray-900"><%= @title %></h1>
+    <article class="max-w-3xl prose prose-a:text-indigo-600 prose-img:rounded-xl prose-img:my-3">
+        <%= if !Enum.empty?(@features) do %>
+            <p>
+                <%= for feature <- @features do %>
+                    <%= if feature.available do %>
+                        <span class="shrink-0 mr-1 mb-1 inline-flex items-center gap-x-1 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
+                            <%= feature.name %>
+                            <Icon.check_badge kind="outline" class="h-5 w-5 stroke-green-700/50" />
+                        </span>
+                    <% else %>
+                        <span class="shrink-0 mr-1 mb-1 inline-flex items-center gap-x-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20">
+                            <%= feature.name %>
+                            <Icon.x_circle kind="outline" class="h-5 w-5 stroke-red-700/50" />
+                        </span>
+                    <% end %>
+                <% end %>
+            </p>
+        <% end %>
+        <%= @inner_content %>
+    </article>
+</div>

backend/lib/azimutt_web/templates/website/connectors/_card.html.heex

@@ -0,0 +1,12 @@
+<div class="relative p-6 rounded-xl bg-white border border-gray-200 hover:border-indigo-500 hover:shadow hover:shadow-indigo-500/50">
+    <img class="h-12" src={Routes.static_path(@conn, "/images/connectors/#{@connector.id}-icon.svg")} alt={"#{@connector.name} logo"}>
+    <div class="mt-4">
+        <h3 class="text-base font-semibold leading-6 text-gray-900">
+            <a href={Routes.website_path(@conn, :connector, @connector.id)} class="focus:outline-none">
+                <span class="absolute inset-0" aria-hidden="true"></span>
+                <%= @connector.name %>
+            </a>
+        </h3>
+        <p class="mt-2 text-sm text-gray-500"><%= render "connectors/_description-short.html", conn: @conn, connector: @connector %></p>
+    </div>
+</div>

backend/lib/azimutt_web/templates/website/connectors/_description-short.html.heex

@@ -0,0 +1,22 @@
+<%= cond do %>
+    <% @connector.id == "postgres" -> %>
+        The most powerful open-source relational database, known for extensibility and SQL compliance. Now explorable with Azimutt.
+    <% @connector.id == "mysql" -> %>
+        The world's most popular open-source relational database, widely used for web applications. Now accessible within Azimutt.
+    <% @connector.id == "mariadb" -> %>
+        An open-source fork of MySQL with improved performance, scalability, and open development. Also available to connect to Azimutt.
+    <% @connector.id == "sqlserver" -> %>
+        A robust, enterprise-grade relational database by Microsoft, with integrated analytics and management tools. Integrated in Azimutt.
+    <% @connector.id == "oracle" -> %>
+        A high-performance relational database widely used in enterprises for mission-critical applications. Uniquely explorable with Azimutt.
+    <% @connector.id == "mongodb" -> %>
+        A NoSQL database designed for flexible, document-oriented storage and scalability. Collection schema and relations are inferred in Azimutt.
+    <% @connector.id == "couchbase" -> %>
+        A distributed NoSQL database optimized for interactive applications and real-time analytics. Infer collection schema and relations.
+    <% @connector.id == "bigquery" -> %>
+        Google’s fully-managed, serverless data warehouse for large-scale analytics using SQL. Discover your datasets with Azimutt.
+    <% @connector.id == "snowflake" -> %>
+        A cloud-native data platform for seamless data warehousing, sharing, and analytics. Easily explorable with this Azimutt connector.
+    <% true -> %>
+        This connector makes <%= @connector.name %> schema and data exploration seamless, using Azimutt nice diagrams and great documentation.
+<% end %>

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

@@ -0,0 +1,13 @@
+<div class="mx-auto max-w-5xl px-6 lg:px-8">
+    <div class="border-b border-gray-200 mb-10">
+        <h2 id="connectors" class="text-xl font-semibold leading-6 text-gray-900 pt-10">Other connectors you may want to check:</h2>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+        <%= for connector <- Azimutt.connectors() |> Enum.filter(fn c -> c.id != @connector.id end) |> Enum.shuffle() |> Enum.take(3) do %>
+        <%= render "connectors/_card.html", conn: @conn, connector: connector %>
+        <% end %>
+    </div>
+</div>
+
+<%= render "_footer.html", conn: @conn %>

backend/lib/azimutt_web/templates/website/connectors/_header.html.heex

@@ -0,0 +1,3 @@
+<div class="relative h-64 mb-24" style={"background: #{@connector.color}"}>
+    <img src={Routes.static_path(@conn, "/images/connectors/#{@connector.id}-banner.png")} alt={"#{@connector.name} banner"} class="h-80 absolute top-10 left-0 right-0 mx-auto">
+</div>

backend/lib/azimutt_web/templates/website/connectors/_promo.html.heex

@@ -0,0 +1,5 @@
+<blockquote>
+    Azimutt is making the first database explorer targeted for real world databases: large, heterogeneous and messy 😅
+    If you ever looked for an Entity-Relationship diagram tool (ERD) or drew your database schema on a sheet or whiteboard, Azimutt is made for you.
+    But it goes well beyond that with database documentation, cross-database data exploration and even linter and monitoring of your database.
+</blockquote>

backend/lib/azimutt_web/templates/website/connectors/bigquery.html.heex

@@ -0,0 +1,52 @@
+<%= render "connectors/_header.html", conn: @conn, connector: @connector %>
+
+<%= connector_article conn: @conn, title: @seo.title, features: [
+    %{name: "Tables", available: true},
+    %{name: "Relations", available: true},
+    %{name: "Statistics", available: false},
+    %{name: "Query history", available: false},
+    %{name: "Query data", available: true}
+] do %>
+    <p class="lead">
+        <a href="https://cloud.google.com/bigquery" target="_blank" rel="noopener noreferrer">BigQuery</a> is Google Cloud's fully-managed,
+        serverless data warehouse designed for large-scale analytics and business intelligence.
+        It enables users to quickly analyze massive datasets using SQL without worrying about infrastructure management.
+        BigQuery is ideal for organizations that need to run complex queries on large volumes of data, offering near real-time insights with fast querying speeds.
+    </p>
+    <%= render "connectors/_promo.html" %>
+    <p>
+        The <a href="https://github.com/azimuttapp/azimutt/tree/main/libs/connector-bigquery" target="_blank" rel="noopener noreferrer">BigQuery connector</a>
+        on GitHub if you are interested in how it works, or improving it.<br>
+        You will most likely want to have a look at the <code>getSchema</code> function in
+        <a href="https://github.com/azimuttapp/azimutt/blob/main/libs/connector-bigquery/src/bigquery.ts" target="_blank" rel="noopener noreferrer">src/bigquery.ts</a>.
+    </p>
+    <p>
+        Few people know and use it but BigQuery has relations. They are not enforced like foreign keys on relational databases, but they help understand your data model.<br>
+        You will most likely not have them, and Azimutt will <a href={Routes.website_path(@conn, :doc, ["infer-relations"])}>infer the relations</a> it can for you,
+        but it could be a good idea to report them back to BigQuery as the golden source of truth.
+    </p>
+
+    <%= render "docs/_h3.html", title: "How to use it" %>
+    <p>The BigQuery connector is already included in the Azimutt Gateway, use it following these steps:</p>
+    <ul>
+        <li>Launch your Gateway, if needed (for the local one use <code>npx azimutt@latest gateway</code>)</li>
+        <li><a href={"#{Routes.elm_path(@conn, :new)}?database"}>Create a new project</a> or add a source to an existing one</li>
+        <li>Download your account key on your computer</li>
+        <li>
+            Fill your BigQuery database url (ex: <code>bigquery://bigquery.googleapis.com/your_project?key=path/to/key.json</code>)<br>
+            You can add additional paramters to your url to control the connector behavior:
+            <ul>
+                <li><strong>dataset</strong>: filter the datasets to inspect, supports the LIKE syntax</li>
+                <li><strong>table</strong>: filter the tables to inspect, supports the LIKE syntax</li>
+            </ul>
+        </li>
+    </ul>
+    <img src={Routes.static_path(@conn, "/images/connectors/azimutt-project-new.png")} alt="Azimutt create project" />
+    <p>Here are <a href={Routes.website_path(@conn, :doc, ["data-privacy"])}>more details</a> about how Azimutt secure your data and especially your database url.</p>
+    <p>
+        Here is an example of what you can achieve with Azimutt:
+        <img src={Routes.static_path(@conn, "/images/connectors/azimutt-diagram.png")} alt="Azimutt diagram" />
+    </p>
+<% end %>
+
+<%= render "connectors/_footer.html", conn: @conn, connector: @connector %>