Bootstrap doc

backend/lib/azimutt.ex

@@ -327,4 +327,64 @@ defmodule Azimutt do
       %{id: "amlv1", name: "AMLv1", parse: true, generate: true}
     ]
   end
+
+  def doc_pages do
+    # slugs must be unique and not change as they are used for urls (SEO) and template names.
+    [
+      %{slug: "what-is-azimutt", name: "What is Azimutt?"},
+      %{
+        slug: "getting-started",
+        name: "Getting started",
+        children: [
+          %{slug: "create-your-project", name: "Create your project"},
+          %{
+            slug: "schema-exploration",
+            name: "Schema exploration",
+            children: [
+              %{slug: "search", name: "Search"},
+              %{slug: "follow-relations", name: "Follow relations"},
+              %{slug: "find-path", name: "Find path"}
+            ]
+          },
+          %{slug: "schema-documentation", name: "Schema documentation"},
+          %{slug: "database-design", name: "Database design"}
+        ]
+      },
+      %{
+        slug: "main-features",
+        name: "Main features",
+        children: [
+          %{slug: "layouts", name: "Layouts"},
+          %{slug: "sources", name: "Sources"},
+          %{slug: "data-exploration", name: "Data exploration"},
+          %{slug: "database-analysis", name: "Database analysis"},
+          %{slug: "keyboard-shortcuts", name: "Keyboard shortcuts"},
+          %{slug: "collaboration", name: "Collaboration"},
+          %{slug: "export", name: "Export"},
+          %{slug: "project-settings", name: "Project settings"},
+          %{slug: "api", name: "API"}
+        ]
+      },
+      %{
+        slug: "other-tools",
+        name: "Other tools",
+        children: [
+          %{slug: "cli", name: "CLI"},
+          %{slug: "converters", name: "Converters"}
+        ]
+      },
+      %{slug: "installation", name: "Installation"},
+      %{slug: "data-privacy", name: "Data privacy", details: "how Azimutt keep your data safe"}
+    ]
+  end
+
+  def doc_pages_flat, do: doc_pages() |> flatten_pages()
+
+  defp flatten_pages(pages, parents \\ []) do
+    pages
+    |> Enum.flat_map(fn page ->
+      children = if page[:children], do: page.children |> flatten_pages(parents ++ [page]), else: []
+      [page |> Map.put(:parents, parents) | children]
+    end)
+  end
 end

backend/lib/azimutt_web.ex

@@ -29,15 +29,12 @@ defmodule AzimuttWeb do
 
   def view do
     quote do
-      use Phoenix.View,
-        root: "lib/azimutt_web/templates",
-        namespace: AzimuttWeb
+      use Phoenix.View, root: "lib/azimutt_web/templates", pattern: "**/*", namespace: AzimuttWeb
 
       alias AzimuttWeb.Components.Icon
 
       # Import convenience functions from controllers
-      import Phoenix.Controller,
-        only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
+      import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
 
       # Include shared imports and aliases for views
       unquote(view_helpers())

backend/lib/azimutt_web/components/icon.ex

@@ -72,6 +72,7 @@ defmodule AzimuttWeb.Components.Icon do
       "rectangle-stack" -> rectangle_stack(assigns)
       "rocket-launch" -> rocket_launch(assigns)
       "server-stack" -> server_stack(assigns)
+      "slash" -> slash(assigns)
       "sparkles" -> sparkles(assigns)
       "shield-check" -> shield_check(assigns)
       "shopping-cart" -> shopping_cart(assigns)
@@ -1480,6 +1481,27 @@ defmodule AzimuttWeb.Components.Icon do
     end
   end
 
+  def slash(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 20.247 6-16.5" /></.outline>
+        """
+
+      "solid" ->
+        ~H"""
+        <.solid classes={classes}><path fill-rule="evenodd" d="M15.256 3.042a.75.75 0 0 1 .449.962l-6 16.5a.75.75 0 1 1-1.41-.513l6-16.5a.75.75 0 0 1 .961-.449Z" clip-rule="evenodd" /></.solid>
+        """
+
+      _ ->
+        ~H"""
+        <.mini classes={classes}><path fill-rule="evenodd" d="M12.528 3.047a.75.75 0 0 1 .449.961L8.433 16.504a.75.75 0 1 1-1.41-.512l4.544-12.496a.75.75 0 0 1 .961-.449Z" clip-rule="evenodd" /></.mini>
+        """
+    end
+  end
+
   def shield_check(assigns) do
     classes = if assigns[:class], do: " #{assigns[:class]}", else: ""
 

backend/lib/azimutt_web/controllers/website_controller.ex

@@ -48,6 +48,19 @@ defmodule AzimuttWeb.WebsiteController do
   def portal(conn, _params), do: conn |> render("portal.html")
   def portal_subscribed(conn, _params), do: conn |> render("portal-subscribed.html")
 
+  def docs(conn, _params), do: conn |> render("docs/index.html")
+
+  def doc(conn, %{"slug" => slug}) do
+    pages = Azimutt.doc_pages_flat()
+
+    pages
+    |> Enum.find_index(fn p -> p.slug == slug end)
+    |> Result.from_nillable()
+    |> Result.map(fn index ->
+      conn |> render("docs/#{slug}.html", page: pages |> Enum.at(index), prev: if(index > 0, do: pages |> Enum.at(index - 1), else: nil), next: pages |> Enum.at(index + 1))
+    end)
+  end
+
   def last(conn, _params) do
     case conn |> last_used_project do
       {:ok, p} -> conn |> redirect(to: Routes.elm_path(conn, :project_show, p.organization_id, p.id))

backend/lib/azimutt_web/router.ex

@@ -54,6 +54,8 @@ defmodule AzimuttWeb.Router do
     get("/converters", WebsiteController, :converters)
     get("/converters/:from", WebsiteController, :converter)
     get("/converters/:from/to/:to", WebsiteController, :convert)
+    get("/docs", WebsiteController, :docs)
+    get("/docs/:slug", WebsiteController, :doc)
     get("/last", WebsiteController, :last)
     get("/use-cases", WebsiteController, :use_cases_index)
     get("/use-cases/:use_case_id", WebsiteController, :use_cases_show)

backend/lib/azimutt_web/templates/layout/_website_navbar.html.heex

@@ -52,6 +52,7 @@
       </div>
     </div>
     <a href={Routes.website_path(@conn, :pricing)} class={"inline-block #{link_style}"}>Pricing</a>
+    <a href={Routes.website_path(@conn, :docs)} class={"inline-block #{link_style}"}>Docs</a>
     <a href={Routes.blog_path(@conn, :index)} class={"inline-block #{link_style}"}>Blog</a>
     <a href={Routes.gallery_path(@conn, :index)} class={"inline-block #{link_style}"}>Inspirations</a>
     <a href={Routes.website_path(@conn, :aml)} class={"inline-block #{link_style}"}>AML</a>
@@ -74,6 +75,7 @@
     <% end %>
     <a href={Routes.website_path(@conn, :features_index)} class={link_style}>Features</a>
     <a href={Routes.website_path(@conn, :pricing)} class={link_style}>Pricing</a>
+    <a href={Routes.website_path(@conn, :docs)} class={link_style}>Docs</a>
     <a href={Routes.blog_path(@conn, :index)} class={link_style}>Blog</a>
     <a href={Routes.gallery_path(@conn, :index)} class={link_style}>Inspirations</a>
     <a href={Routes.website_path(@conn, :aml)} class={link_style}>AML</a>

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

@@ -20,6 +20,11 @@
   <% end %>
   <% end %>
 
+  <url><loc><%= Routes.website_url(@conn, :docs) %></loc><lastmod>2024-10-07</lastmod></url>
+  <%= for doc <- Azimutt.doc_pages_flat() do %>
+  <url><loc><%= Routes.website_url(@conn, :doc, doc.slug) %></loc><lastmod>2024-10-07</lastmod></url>
+  <% end %>
+
   <%= if length(@articles) > 0 do %>
   <url>
     <loc><%= Routes.blog_url(@conn, :index) %></loc>

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

@@ -0,0 +1,45 @@
+<%= if @page[:children] do %>
+<div class="bg-white pt-12 px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+        <ul role="list" class="list-inside list-disc">
+            <%= for page <- @page.children do %>
+            <%= render "docs/_menu-item.html", conn: @conn, item: page %>
+            <% end %>
+        </ul>
+    </div>
+</div>
+<% end %>
+
+<div class="bg-white pt-12 px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+        <a href={"https://github.com/azimuttapp/azimutt/blob/main/backend/lib/azimutt_web/templates/website/docs/#{@page.slug}.html.heex"} target="_blank" rel="noopener noreferrer" class="font-semibold text-indigo-600 hover:underline">
+            <Icon.pencil kind="solid" class="w-4 h-4 mr-1 inline" /> Update this page
+        </a>
+    </div>
+</div>
+
+<div class="bg-white pt-3 px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl">
+        <nav class="flex gap-3">
+            <%= if @prev do %>
+            <a href={Routes.website_path(@conn, :doc, @prev.slug)} class="block w-full rounded-lg px-4 py-3 shadow-sm ring-1 ring-inset ring-gray-300 hover:ring-indigo-500">
+                Previous<br>
+                <span class="text-base font-semibold leading-7 text-indigo-600">« <%= @prev.name %></span>
+            </a>
+            <% else %>
+            <div class="w-full"></div>
+            <% end %>
+
+            <%= if @next do %>
+            <a href={Routes.website_path(@conn, :doc, @next.slug)} class="block w-full rounded-lg px-4 py-3 shadow-sm ring-1 ring-inset ring-gray-300 hover:ring-indigo-500 text-right">
+                Next<br>
+                <span class="text-base font-semibold leading-7 text-indigo-600"><%= @next.name %> »</span>
+            </a>
+            <% else %>
+            <div class="w-full"></div>
+            <% end %>
+        </nav>
+    </div>
+</div>
+
+<%= render "_footer.html", conn: @conn %>

backend/lib/azimutt_web/templates/website/docs/_h2.html.heex

@@ -0,0 +1,4 @@
+<h2 id={Azimutt.Utils.Slugme.slugify(@title)} class="mt-16 text-2xl font-bold tracking-tight text-gray-900 group">
+    <%= @title %>
+    <a href={"##{Azimutt.Utils.Slugme.slugify(@title)}"} class="ml-1 text-indigo-600 hover:underline opacity-0 group-hover:opacity-100 transition-opacity">#</a>
+</h2>

backend/lib/azimutt_web/templates/website/docs/_h3.html.heex

@@ -0,0 +1,4 @@
+<h3 id={Azimutt.Utils.Slugme.slugify(@title)} class="mt-8 text-xl font-bold tracking-tight text-gray-900 group">
+    <%= @title %>
+    <a href={"##{Azimutt.Utils.Slugme.slugify(@title)}"} class="ml-1 text-indigo-600 hover:underline opacity-0 group-hover:opacity-100 transition-opacity">#</a>
+</h3>

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

@@ -0,0 +1,25 @@
+<div class="bg-white px-6 pt-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <nav class="flex" aria-label="Breadcrumb">
+            <ol role="list" class="flex items-center space-x-4">
+                <li>
+                    <a href={Routes.website_path(@conn, :index)} class="text-gray-400 hover:text-gray-500">
+                        <Icon.home class="h-5 w-5 flex-shrink-0" />
+                        <span class="sr-only">Home</span>
+                    </a>
+                </li>
+                <li class="flex items-center">
+                    <Icon.slash kind="outline" class="h-5 w-5 flex-shrink-0 text-gray-300" />
+                    <a href={Routes.website_path(@conn, :docs)} class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Documentation</a>
+                </li>
+                <%= for parent <- @page.parents do %>
+                <li class="flex items-center">
+                    <Icon.slash kind="outline" class="h-5 w-5 flex-shrink-0 text-gray-300" />
+                    <a href={Routes.website_path(@conn, :doc, parent.slug)} class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700" aria-current="page"><%= parent.name %></a>
+                </li>
+                <% end %>
+            </ol>
+        </nav>
+        <h1 class="mt-3 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"><%= @page.name %></h1>
+    </div>
+</div>

backend/lib/azimutt_web/templates/website/docs/_menu-item.html.heex

@@ -0,0 +1,15 @@
+<li>
+    <%= if @item[:slug] do %>
+        <a href={Routes.website_path(@conn, :doc, @item.slug)} class="underline font-semibold text-indigo-600"><%= @item.name %></a>
+    <% else %>
+        <span class="font-semibold"><%= @item.name %></span>
+    <% end %>
+    <%= if @item[:details] do %>- <%= @item.details %><% end %>
+    <%= if @item[:children] do %>
+        <ul role="list" class="list-inside list-disc pl-3">
+            <%= for child <- @item.children do %>
+                <%= render "docs/_menu-item.html", conn: @conn, item: child %>
+            <% end %>
+        </ul>
+    <% end %>
+</li>

backend/lib/azimutt_web/templates/website/docs/api.html.heex

@@ -0,0 +1,14 @@
+<%= render "docs/_header.html", conn: @conn, page: @page %>
+
+<div class="bg-white px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <p class="mt-6 text-xl leading-8">
+            Work In Progress 😅
+        </p>
+
+        <%= render "docs/_h2.html", title: "Source schema" %>
+        <%= render "docs/_h2.html", title: "Schema documentation" %>
+    </div>
+</div>
+
+<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>

backend/lib/azimutt_web/templates/website/docs/cli.html.heex

@@ -0,0 +1,15 @@
+<%= render "docs/_header.html", conn: @conn, page: @page %>
+
+<div class="bg-white px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <p class="mt-6 text-xl leading-8">
+            Work In Progress 😅
+        </p>
+
+        <%= render "docs/_h2.html", title: "Analyze" %>
+        <%= render "docs/_h2.html", title: "Export" %>
+        <%= render "docs/_h2.html", title: "Gateway" %>
+    </div>
+</div>
+
+<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>

backend/lib/azimutt_web/templates/website/docs/collaboration.html.heex

@@ -0,0 +1,16 @@
+<%= render "docs/_header.html", conn: @conn, page: @page %>
+
+<div class="bg-white px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <p class="mt-6 text-xl leading-8">
+            Work In Progress 😅
+        </p>
+
+        <%= render "docs/_h2.html", title: "Organizations" %>
+        <%= render "docs/_h3.html", title: "User rights" %>
+        <%= render "docs/_h2.html", title: "Private links" %>
+        <%= render "docs/_h2.html", title: "Embed" %>
+    </div>
+</div>
+
+<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>

backend/lib/azimutt_web/templates/website/docs/converters.html.heex

@@ -0,0 +1,11 @@
+<%= render "docs/_header.html", conn: @conn, page: @page %>
+
+<div class="bg-white px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <p class="mt-6 text-xl leading-8">
+            Work In Progress 😅
+        </p>
+    </div>
+</div>
+
+<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>

backend/lib/azimutt_web/templates/website/docs/create-your-project.html.heex

@@ -0,0 +1,22 @@
+<%= render "docs/_header.html", conn: @conn, page: @page %>
+
+<div class="bg-white px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <p class="mt-6 text-xl leading-8">
+            Work In Progress 😅
+        </p>
+
+        <%= render "docs/_h2.html", title: "From database" %>
+        <ul class="list-inside list-disc">
+            <li>extracts schema, comments & statistics</li>
+            <li>needed rights</li>
+        </ul>
+
+        <%= render "docs/_h2.html", title: "From SQL" %>
+        <%= render "docs/_h3.html", title: "Export your database schema" %>
+
+        <%= render "docs/_h2.html", title: "From JSON" %>
+    </div>
+</div>
+
+<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>

backend/lib/azimutt_web/templates/website/docs/data-exploration.html.heex

@@ -0,0 +1,15 @@
+<%= render "docs/_header.html", conn: @conn, page: @page %>
+
+<div class="bg-white px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <p class="mt-6 text-xl leading-8">
+            Work In Progress 😅
+        </p>
+
+        <%= render "docs/_h2.html", title: "SQL query" %>
+        <%= render "docs/_h2.html", title: "Rows navigation" %>
+        <%= render "docs/_h2.html", title: "AI query generation" %>
+    </div>
+</div>
+
+<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>

backend/lib/azimutt_web/templates/website/docs/data-privacy.html.heex

@@ -0,0 +1,11 @@
+<%= render "docs/_header.html", conn: @conn, page: @page %>
+
+<div class="bg-white px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <p class="mt-6 text-xl leading-8">
+            Work In Progress 😅
+        </p>
+    </div>
+</div>
+
+<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>

backend/lib/azimutt_web/templates/website/docs/database-analysis.html.heex

@@ -0,0 +1,11 @@
+<%= render "docs/_header.html", conn: @conn, page: @page %>
+
+<div class="bg-white px-6 lg:px-8">
+    <div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
+        <p class="mt-6 text-xl leading-8">
+            Work In Progress 😅
+        </p>
+    </div>
+</div>
+
+<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>