Skip to content

Commit

Permalink
review
Browse files Browse the repository at this point in the history
  • Loading branch information
@loicknuchel
loicknuchel committed Nov 14, 2024
1 parent 8383952 commit 539d10c
Show file tree
Hide file tree
Showing 7 changed files with 58 additions and 39 deletions.
2 changes: 1 addition & 1 deletion backend/assets/js/dbml.hljs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {HLJSApi, Language} from "highlight.js"
const entityRegex = /^[a-zA-Z_][a-zA-Z0-9_#]*/
const attributeNameRegex = /^ +[a-zA-Z_][a-zA-Z0-9_#]*/
const attributeTypeRegex = /\b(uuid|(var|n)?char2?|character( varying)?|(tiny|medium|long|ci)?text|(tiny|small|big)?int(eger)?(\d+)?|numeric|float|double( precision)?|bool(ean)?|timestamp( with(out)? time zone)?|date(time)?|time( with(out)? time zone)?|interval|json|string|number)\b/
const relationRegex = /> [a-z]+\.[a-z]+/
const relationRegex = /> [a-zA-Z_][a-zA-Z0-9_#]*\.[a-zA-Z_][a-zA-Z0-9_#]*/
const stringRegex = /['`][^'`]*['`]/
const commentRegex = /\/\/.*/
const keywordRegex = /Table|pk|primary key|not null|default|unique|note|ref|indexes|enum/
Expand Down
28 changes: 14 additions & 14 deletions backend/lib/azimutt.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ defmodule Azimutt do

def connectors do
[
%{id: "postgres", name: "PostgreSQL", date: "2024-10-15", color: "#699eca", description: "The most powerful open-source relational database, known for extensibility and SQL compliance. Now explorable with Azimutt."},
%{id: "postgres", name: "PostgreSQL", color: "#699eca", description: "The most powerful open-source relational database, known for extensibility and SQL compliance. Now explorable with Azimutt."},
%{id: "mysql", name: "MySQL", color: "#00758f", description: "The world's most popular open-source relational database, widely used for web applications. Now accessible within Azimutt."},
%{id: "mariadb", name: "MariaDB", color: "#444b5e", description: "An open-source fork of MySQL with improved performance, scalability, and open development. Also available to connect to Azimutt."},
%{id: "sqlserver", name: "SQL Server", color: "#ededee", description: "A robust, enterprise-grade relational database by Microsoft, with integrated analytics and management tools. Integrated in Azimutt."},
Expand Down Expand Up @@ -355,10 +355,10 @@ defmodule Azimutt do
name: "Entity-Relationship Diagram",
keywords: "entity-relationship diagram,erd,database diagram,database visualization tool,database schema explorer,SQL,database",
tools: [
%{id: "dbdiagram", name: "dbdiagram.io", description: "An online Entity-Relationship Diagram using code to define your database schema, as fast as you can type."},
%{id: "drawsql", name: "DrawSQL", description: "A beautiful online Entity-Relationship Diagram tool to design your database from scratch or from SQL dump."},
%{id: "drawdb", name: "drawDB", description: "A Free and Open Source online Entity-Relationship Diagram tool that can generate SQL."},
%{id: "chartdb", name: "ChartDB", description: "An Open Source online Entity-Relationship Diagram that visualize your database with a single query."}
%{id: "dbdiagram", name: "dbdiagram.io", description: "An online Entity-Relationship Diagram using code to define your database schema, as fast as you can type."}
# %{id: "drawsql", name: "DrawSQL", description: "A beautiful online Entity-Relationship Diagram tool to design your database from scratch or from SQL dump."},
# %{id: "drawdb", name: "drawDB", description: "A Free and Open Source online Entity-Relationship Diagram tool that can generate SQL."},
# %{id: "chartdb", name: "ChartDB", description: "An Open Source online Entity-Relationship Diagram that visualize your database with a single query."}
]
},
%{
Expand All @@ -374,43 +374,43 @@ defmodule Azimutt do
name: "SQL Client",
keywords: "sql client",
tools: [
%{id: "dbeaver", name: "DBeaver", description: "A free cross-platform database tool with support of many databases: MySQL, PostgreSQL, SQLite..."},
%{id: "datagrip", name: "DataGrip", description: "A powerful cross-platform tool for relational and NoSQL databases by JetBrains."},
%{id: "navicat", name: "Navicat", description: "Navicat is a robust, all-in-one solution for database development from a single application."},
%{id: "beekeeperstudio", name: "Beekeeper Studio", description: "The SQL Editor and Database Manager Of Your Dreams, easy to use and good looking SQL Client."}
# %{id: "dbeaver", name: "DBeaver", description: "A free cross-platform database tool with support of many databases: MySQL, PostgreSQL, SQLite..."},
# %{id: "datagrip", name: "DataGrip", description: "A powerful cross-platform tool for relational and NoSQL databases by JetBrains."},
# %{id: "navicat", name: "Navicat", description: "Navicat is a robust, all-in-one solution for database development from a single application."},
# %{id: "beekeeperstudio", name: "Beekeeper Studio", description: "The SQL Editor and Database Manager Of Your Dreams, easy to use and good looking SQL Client."}
]
},
%{
id: "database-documentation",
name: "Database Documentation",
keywords: "database documentation",
tools: [
%{id: "schemaspy", name: "SchemaSpy", description: "Document your database simply and easily with a statically generated site from your CI."}
# %{id: "schemaspy", name: "SchemaSpy", description: "Document your database simply and easily with a statically generated site from your CI."}
]
},
%{
id: "data-catalog",
name: "Data Catalog",
keywords: "data catalog",
tools: [
%{id: "amundsen", name: "Amundsen", description: "Open source data discovery and metadata engine for analysts, data engineers and developers."},
%{id: "atlan", name: "Atlan", description: "Atlan is a metadata platform designed to cater to the needs of data-driven teams."}
# %{id: "amundsen", name: "Amundsen", description: "Open source data discovery and metadata engine for analysts, data engineers and developers."},
# %{id: "atlan", name: "Atlan", description: "Atlan is a metadata platform designed to cater to the needs of data-driven teams."}
]
},
%{
id: "database-monitoring",
name: "Database Monitoring",
keywords: "database monitoring,proactive monitoring",
tools: [
%{id: "datadog", name: "Datadog Database Monitoring", description: "Resolve issues and optimize inefficient query performance across entire database fleets."}
# %{id: "datadog", name: "Datadog Database Monitoring", description: "Resolve issues and optimize inefficient query performance across entire database fleets."}
]
},
%{
id: "dashboard",
name: "Dashboard",
keywords: "dashboard,data visualization,infographics",
tools: [
%{id: "metabase", name: "Metabase", description: "Fast analytics with the friendly UX and integrated tooling to let your company explore data on their own."}
# %{id: "metabase", name: "Metabase", description: "Fast analytics with the friendly UX and integrated tooling to let your company explore data on their own."}
]
}
]
Expand Down
10 changes: 6 additions & 4 deletions backend/lib/azimutt_web/controllers/website_controller.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,19 @@ defmodule AzimuttWeb.WebsiteController do
def features_index(conn, _params), do: conn |> render("features/index.html")

def features_show(conn, %{"feature_id" => feature_id}) do
Azimutt.showcase_features()
features = Azimutt.showcase_features()

features
|> Enum.find_index(fn f -> f.id == feature_id end)
|> Result.from_nillable()
|> Result.map(fn index ->
feature = Azimutt.showcase_features() |> Enum.at(index)
feature = features |> Enum.at(index)

conn
|> render("features/#{feature_id}.html",
feature: feature,
previous: if(index > 0, do: Azimutt.showcase_features() |> Enum.at(index - 1), else: nil),
next: Azimutt.showcase_features() |> Enum.at(index + 1),
previous: if(index > 0, do: features |> Enum.at(index - 1), else: nil),
next: features |> Enum.at(index + 1),
seo: %{type: "article", title: feature.name, description: feature.description, image: Routes.static_url(conn, feature.image)}
)
end)
Expand Down
29 changes: 23 additions & 6 deletions backend/lib/azimutt_web/templates/layout/_head_seo.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,31 @@
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#000000" />

<%= if @conn.assigns[:seo] && @conn.assigns[:seo][:type] == "article" do %>
<script type="application/ld+json">
{
"@@context": "https://schema.org",
"@@type": "Organization",
"name": "Azimutt",
"url": "https://azimutt.app",
"logo": "https://azimutt.app/images/logo_dark.svg"
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "<%= title(@conn) %>",
"description": "<%= description(@conn) %>",
"publisher": {
"@type": "Organization",
"name": "Azimutt",
"url": "https://azimutt.app",
"logo": "https://azimutt.app/images/logo_dark.svg"
}
}
</script>
<% else %>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Azimutt",
"url": "https://azimutt.app",
"logo": "https://azimutt.app/images/logo_dark.svg"
}
</script>
<% end %>

<%= csrf_meta_tag() %>
4 changes: 2 additions & 2 deletions backend/lib/azimutt_web/templates/website/comparisons/dbdiagram.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
<img src={@seo.image} alt="dbdiagram.io vs Azimutt">
<p>
Entity-Relationship Diagrams (ERDs) are visual representations of your entities and relations (thanks captain obvious ^^).
In relational databases they represent tables with their columns as relations and foreign keys as relations.
Some tools are specialized in ERDs for databases and can more specialized content like primary keys, indexes, constraints and more.
In relational databases they represent tables with their columns as entities and foreign keys as relations.
Some tools are specialized in ERDs for databases and can have more specialized content like primary keys, indexes, constraints and more.
</p>
<p>
Visual tools and diagrams can be crucial to simplify things, especially in high complexity environment like databases, and better understand and communicate the real situation.
Expand Down
14 changes: 7 additions & 7 deletions backend/lib/azimutt_web/templates/website/comparisons/dbml.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<p class="lead">Why not SQL?</p>
<p>
You're right, SQL DDL sounds like the perfect fit for defining your database schema.<br>
But it has some issues: it's different for each database, writing valid SQL will slow your though process, you may want to ignore some SQL requirements or add information not supported by your SQL dialect.
But it has some issues: it's different for each database, writing valid SQL will slow your thought process, you may want to ignore some SQL requirements or add information not supported by your SQL dialect.
What sounds like a great idea at first is not that practical in fact.
Specific languages though can capture the right details, be more user-friendly and can be converted to your wanted SQL flavor. They win all the way 😎
</p>
Expand Down Expand Up @@ -157,7 +157,7 @@ posts | All blog posts
Here is a quick recap:
</p>
<table>
<thead><tr><th></th><th>dbdiagram.io</th><th>Azimutt</th></tr></thead>
<thead><tr><th></th><th>DBML</th><th>AML</th></tr></thead>
<tbody>
<tr><th>Table definition</th><td>✅ Yes</td><td>✅ Yes</td></tr>
<tr><th>View definition</th><td>❌ No</td><td>✅ Yes</td></tr>
Expand Down Expand Up @@ -189,13 +189,13 @@ posts | All blog posts
<li><a href={"#{Routes.website_path(@conn, :doc, ["aml", "types"])}#alias"}>Type alias</a></li>
</ul>
<p>
Depending on your needs, it can be important to the ability to define what you need with your chosen language.
That's why <b>Custom properties</b> are a crucial part of AML. They let you define whatever you need making language extensions very easy.
Depending on your needs, it can be important to have the ability to define what you need with your chosen language.
That's why <b>Custom properties</b> are a crucial part of AML. They let you define whatever you need, making language extensions very easy.
</p>

<%= render "docs/_h2.html", title: "Tooling" %>
<p>
Having an easy to learn/use language with powerful features is great. But it's tooling and ecosystem is at least as important for practical usage.
Having an easy to learn/use language with powerful features is great. But its tooling and ecosystem is at least as important for practical usage.
Beside their use in their respective products, DBML and AML are Open Source and provide a package to parse/generate them as JSON and some other tools as well.
</p>

Expand Down Expand Up @@ -271,9 +271,9 @@ console.log('generated', generated)</code></pre>
</p>
<p>
If you see any issue or missing feature or tool that prevent you from using AML, please let us know.
We probably can address that and open you this wonderful world of textual database modeling 😉
We probably can address that and open to you this wonderful world of textual database modeling 😉
</p>
<p>Talking of that, have you tried Azimutt? If not, 👇️</p>
<p>By the way, have you tried Azimutt? If not, 👇️</p>
<% end %>

<%= render "comparisons/_footer.html", conn: @conn, tool: @tool %>
10 changes: 5 additions & 5 deletions backend/lib/azimutt_web/templates/website/comparisons/index.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,27 +20,27 @@
<div class="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
<div class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
<div class="relative">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-1.jpg")} class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-1.jpg")} alt="E-commerce diagram part 1" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
<div class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
<div class="relative">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-2.jpg")} class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-2.jpg")} alt="E-commerce diagram part 2" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="relative">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-3.jpg")} class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-3.jpg")} alt="E-commerce diagram part 3" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
<div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
<div class="relative">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-4.jpg")} class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-4.jpg")} alt="E-commerce diagram part 4" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
<div class="relative">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-5.jpg")} class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<img src={Routes.static_path(@conn, "/images/comparisons/ecommerce-5.jpg")} alt="E-commerce diagram part 5" class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg">
<div class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10"></div>
</div>
</div>
Expand Down

0 comments on commit 539d10c

Please sign in to comment.