ash-project/ash_hq
1
0
Fork 0
mirror of https://github.com/ash-project/ash_hq.git synced 2024-09-20 05:13:23 +12:00
Code Issues Projects Releases Packages Wiki Activity

improvement: tweak theme and adjust landing page to match

Browse source
This commit is contained in:
Zach Daniel 2022-09-08 23:25:57 -04:00 committed by GitHub
commit 91821de516
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 106 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
assets/tailwind.config.js
View file

@ -25,16 +25,17 @@ module.exports = {
colors: {
"silver-phoenix": "#EAEBF3",
"base-dark": {
50: "#c2c4d1",
100: "#b6b8c8",
200: "#9fa2b7",
300: "#878ba5",
DEFAULT: "#5E627D",
50: "#C2C4D1",
100: "#B6B8C8",
200: "#9FA2B7",
300: "#878BA5",
400: "#707594",
500: "#5e627d",
600: "#4c5066",
700: "#3b3d4f",
800: "#292b37",
900: "#181920",
500: "#5E627D",
600: "#46495D",
700: "#2E303D",
800: "#16171D",
900: "#000000",
},
"base-light": {
50: "#f9fafb",
@ -49,28 +50,30 @@ module.exports = {
900: "#111827",
},
"primary-dark": {
50: "#fff7ed",
100: "#ffedd5",
200: "#fed7aa",
300: "#fdba74",
400: "#fb923c",
500: "#f97316",
600: "#ea580c",
700: "#c2410c",
800: "#9a3412",
900: "#7c2d12",
DEFAULT: "#FF5757",
50: "#FFE1E1",
100: "#FFD1D1",
200: "#FFB3B3",
300: "#FF9494",
400: "#FF7676",
500: "#FF5757",
600: "#FF1F1F",
700: "#E60000",
800: "#AE0000",
900: "#760000",
},
"primary-light": {
50: "#fff7ed",
100: "#ffedd5",
200: "#fed7aa",
300: "#fdba74",
400: "#fb923c",
500: "#f97316",
600: "#ea580c",
700: "#c2410c",
800: "#9a3412",
900: "#7c2d12",
DEFAULT: "#FF914D",
50: "#FFE6D7",
100: "#FFDDC7",
200: "#FFCAA9",
300: "#FFB78A",
400: "#FFA46C",
500: "#FF914D",
600: "#FF6E15",
700: "#DC5400",
800: "#A43F00",
900: "#6C2900",
},
},
},

2
lib/ash_hq_web/components/code_example.ex
View file

@ -13,7 +13,7 @@ defmodule AshHqWeb.Components.CodeExample do
def render(assigns) do
~F"""
<div class={
"rounded-xl bg-silver-phoenix dark:bg-slate-800 border border-base-light-400 dark:border-base-dark-700 text-sm border-b",
"rounded-xl bg-silver-phoenix dark:bg-base-dark-800 border border-base-light-400 dark:border-base-dark-700 text-sm border-b",
@class
}>
<div class={

38
lib/ash_hq_web/components/search.ex
View file

@ -32,7 +32,7 @@ defmodule AshHqWeb.Components.Search do
>
<div
:on-click-away={AshHqWeb.AppViewLive.toggle_search()}
class="dark:text-white absolute rounded-xl left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-white dark:bg-base-dark-900 border-2 dark:border-base-dark-900"
class="dark:text-white absolute rounded-xl left-1/2 top-1/2 transform -tranbase-dark-x-1/2 -tranbase-dark-y-1/2 w-3/4 h-3/4 bg-white dark:bg-base-dark-900 border-2 dark:border-base-dark-900"
:on-window-keydown="select-previous"
phx-key="ArrowUp"
>
@ -56,24 +56,24 @@ defmodule AshHqWeb.Components.Search do
</div>
</div>
<div class="ml-2 pl-4">
<Form for={:types} change={@change_types}>
<div class="flex flex-row space-x-2 flex-wrap">
{#for type <- AshHq.Docs.Extensions.Search.Types.types()}
<div class="flex flex-row items-center">
<Checkbox
class="mr-4"
id={"#{type}-selected"}
value={type in @selected_types}
name={"types[#{type}]"}
/>
<Label field={type}>
{type}
</Label>
</div>
{/for}
</div>
</Form>
</div>
<Form for={:types} change={@change_types}>
<div class="flex flex-row space-x-2 flex-wrap">
{#for type <- AshHq.Docs.Extensions.Search.Types.types()}
<div class="flex flex-row items-center">
<Checkbox
class="mr-4"
id={"#{type}-selected"}
value={type in @selected_types}
name={"types[#{type}]"}
/>
<Label field={type}>
{type}
</Label>
</div>
{/for}
</div>
</Form>
</div>
</div>
<div class="grid h-[80%] mt-3">
<div class="pl-4 overflow-auto">

2
lib/ash_hq_web/components/version_pills.ex
View file

@ -40,7 +40,7 @@ defmodule AshHqWeb.Components.VersionPills do
{#if @adding_version}
<Form for={:add_version} change={@add_version}>
<Select
class="rounded-lg text-gray-900"
class="rounded-lg text-primary-dark-900"
name={:library}
options={packages_to_add(@libraries, @selected_versions)}
/>

8
lib/ash_hq_web/gettext.ex
View file

@ -8,15 +8,15 @@ defmodule AshHqWeb.Gettext do
import AshHqWeb.Gettext
# Simple translation
gettext("Here is the string to translate")
gettext("Here is the string to tranbase-dark")
# Plural translation
ngettext("Here is the string to translate",
"Here are the strings to translate",
ngettext("Here is the string to tranbase-dark",
"Here are the strings to tranbase-dark",
3)
# Domain-based translation
dgettext("errors", "Here is the error message to translate")
dgettext("errors", "Here is the error message to tranbase-dark")
See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
"""

7
lib/ash_hq_web/pages/docs.ex
View file

@ -107,7 +107,10 @@ defmodule AshHqWeb.Pages.Docs do
class="w-full prose prose-xl max-w-4xl dark:bg-base-dark-900 dark:prose-invert overflow-y-auto overflow-x-visible md:pr-8 md:mt-14 px-4 md:px-auto custom-scrollbar"
phx-hook="Docs"
>
<div id="module-docs" class="w-full nav-anchor text-black dark:text-white relative py-4 md:py-auto">
<div
id="module-docs"
class="w-full nav-anchor text-black dark:text-white relative py-4 md:py-auto"
>
{#if @module}
<h2>{@module.name}{render_source_code_link(assigns, @module, @library, @library_version)}</h2>
{/if}
@ -340,7 +343,7 @@ defmodule AshHqWeb.Pages.Docs do
{#match functions}
<h1>{header}</h1>
{#for function <- functions}
<div class="rounded-lg bg-slate-400 dark:bg-slate-700 bg-opacity-50 px-2">
<div class="rounded-lg bg-base-dark-400 dark:bg-base-dark-700 bg-opacity-50 px-2">
<p class="">
<div class="">
<div class="flex flex-row items-baseline">

75
lib/ash_hq_web/pages/home.ex
View file

@ -18,11 +18,11 @@ defmodule AshHqWeb.Pages.Home do
<div class="text-3xl md:text-5xl px-4 md:px-12 font-bold max-w-5xl mx-auto mt-2 md:text-center">
Build <CalloutText>powerful</CalloutText> and <CalloutText>composable</CalloutText> applications with a <CalloutText>flexible</CalloutText> tool-chain.
</div>
<div class="text-xl font-light text-base-light-700 dark:text-base-dark-400 max-w-4xl mx-auto px-4 md:px-0 mt-4 md:text-center">
<div class="text-xl font-light text-base-dark-700 dark:text-base-light-100 max-w-4xl mx-auto px-4 md:px-0 mt-4 md:text-center">
A declarative foundation for ambitious applications. Model your domain, derive the rest.
</div>
<div class="flex flex-col space-y-4 md:space-x-4 md:space-y-0 md:flex-row items-center mt-8 md:mt-16 mb-6 md:mb-10">
<div class="flex justify-center items-center w-full md:w-auto h-12 px-4 rounded-lg bg-primary-light-500 font-semibold dark:text-white dark:hover:text-base-dark-200 hover:text-white">
<div class="flex justify-center items-center w-full md:w-auto h-12 px-4 rounded-lg bg-primary-light-500 dark:bg-primary-dark-500 font-semibold dark:text-white dark:hover:bg-primary-dark-700 hover:bg-primary-light-700">
<a href="/docs/guides/ash/latest/tutorials/get-started.md" target="_blank">Get Started</a>
</div>
<SearchBar class="w-80 md:w-96" />
@ -30,13 +30,13 @@ defmodule AshHqWeb.Pages.Home do
<div class="flex flex-col">
<div class="max-w-7xl px-4 sm:px-6 md:px-8 mb-8">
<h2 class="mt-8 font-semibold text-red-500 dark:text-red-400">
<h2 class="mt-8 font-semibold text-primary-light-500 dark:text-primary-dark-400">
Write it once
</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tight dark:text-slate-50">
<p class="mt-4 text-3xl sm:text-4xl text-base-dark-900 font-extrabold tracking-tight dark:text-base-light-50">
Why do developers keep reinventing the wheel?
</p>
<p class="text-slate-500 dark:text-slate-400 mt-4 max-w-3xl space-y-6">
<p class="text-base-dark-500 dark:text-base-light-300 mt-4 max-w-3xl space-y-6">
Every time you start a new app, are you rebuilding features that you've already built many times?
Wouldn't it be great if you could just focus on the important parts of an app without reinventing ways to authenticate, add permissions, etc.
Ash allows you to not only use patterns in existing extensions, it lets you extract your own patterns into custom extensions.
@ -45,20 +45,20 @@ defmodule AshHqWeb.Pages.Home do
</div>
<div class="max-w-7xl px-4 sm:px-6 md:px-8 mb-8">
<h2 class="mt-8 font-semibold text-red-500 dark:text-red-400">
<h2 class="mt-8 font-semibold text-primary-light-500 dark:text-primary-dark-400">
Consistency
</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tight dark:text-slate-50">
<p class="mt-4 text-3xl sm:text-4xl text-base-dark-900 font-extrabold tracking-tight dark:text-base-light-50">
A place for everything and everything in it's place
</p>
<p class="text-slate-500 dark:text-slate-400 mt-4 max-w-3xl space-y-6">
<p class="text-base-dark-500 dark:text-base-light-300 mt-4 max-w-3xl space-y-6">
Ash helps keep things neat and organized by providing good patterns for structuring your application.
Over time and with larger teams of different experience levels,
patterns change and drift away from each-other across our applications.
With that said, nothing in Ash depends on what folders or files you put things in, so you are
free to experiment or make the choices that make sense to you.
</p>
<p class="text-slate-500 dark:text-slate-400 mt-4 max-w-3xl space-y-6">
<p class="text-base-dark-500 dark:text-base-light-300 mt-4 max-w-3xl space-y-6">
Spaghetti belongs in the kitchen, not in your codebase.
Ash provides the ability to keep all similar parts of your application consistent,
making it easy to share an architectural vision while allowing escape hatches to do something different if needed.
@ -66,18 +66,18 @@ defmodule AshHqWeb.Pages.Home do
</div>
<div class="max-w-7xl px-4 sm:px-6 md:px-8 mb-8">
<h2 class="mt-8 font-semibold text-red-500 dark:text-red-400">
<h2 class="mt-8 font-semibold text-primary-light-500 dark:text-primary-dark-400">
Incredibly Powerful
</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tight dark:text-slate-50">
<p class="mt-4 text-3xl sm:text-4xl text-base-dark-900 font-extrabold tracking-tight dark:text-base-light-50">
Ash is more than it appears
</p>
<p class="text-slate-500 dark:text-slate-400 mt-4 max-w-3xl space-y-6">
<p class="text-base-dark-500 dark:text-base-light-300 mt-4 max-w-3xl space-y-6">
Ash is more than just auto-generated API or an Admin UI.
It’s a fully extensible DSL to model your domain, which creates a declarative,
highly introspectable representation. This in turn can be used to derive anything you want.
</p>
<p class="text-slate-500 dark:text-slate-400 mt-4 max-w-3xl space-y-6">
<p class="text-base-dark-500 dark:text-base-light-300 mt-4 max-w-3xl space-y-6">
Ash has built in extensions that allow you to generate Admin UIs or Phoenix LiveView Form helpers,
saving a ton of boilerplate. Even going as far as fully swapping data layers, Ash lets you do
something traditionally extremely difficult with ease.
@ -85,15 +85,18 @@ defmodule AshHqWeb.Pages.Home do
</div>
</div>
<div id="testimonials" class="flex flex-col items-center content-center space-y-8 w-full lg:w-[28rem] max-w-4xl md:h-[74rem] lg:h-[68rem] mb-8 lg:mb-0 px-4 md:px-8 lg:px-0">
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-base-light-200 rounded-xl p-8 md:p-0 dark:bg-base-dark-800 drop-shadow-xl md:relative lg:top-16 md:-left-[8rem] lg:-left-[10rem]">
<div
id="testimonials"
class="flex flex-col items-center content-center space-y-8 w-full lg:w-[28rem] max-w-4xl md:h-[74rem] lg:h-[68rem] mb-8 lg:mb-0 px-4 md:px-8 lg:px-0"
>
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-base-light-200 rounded-xl p-8 md:p-0 dark:bg-base-dark-700 drop-shadow-xl md:relative lg:top-16 md:-left-[8rem] lg:-left-[10rem]">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<p class="text-lg font-light text-base-light-700 dark:text-base-dark-50 break-words">
"Through its declarative extensibility, Ash delivers more than you'd expect: Powerful APIs with filtering/sorting/pagination/calculations/aggregations, pub/sub, authorization, rich introspection, GraphQL... It's what empowers this solo developer to build an ambitious ERP!"
</p>
<p class="font-bold">
<div class="text-primary-light-500 dark:text-primary-light-400">
<p>
<div class="font-bold text-primary-light-500 dark:text-primary-dark-400">
Frank Dugan III
</div>
<div class="text-base-light-700 dark:text-base-dark-200">
@ -103,14 +106,14 @@ defmodule AshHqWeb.Pages.Home do
</div>
</div>
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-base-light-100 rounded-xl p-8 md:p-0 dark:bg-base-light-700 bg-white drop-shadow-xl md:relative md:-top-16 md:-right-[10rem]">
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-base-light-100 rounded-xl p-8 md:p-0 dark:bg-base-dark-600 bg-white drop-shadow-xl md:relative md:-top-16 md:-right-[10rem]">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<p class="text-lg font-light text-base-light-700 dark:text-base-dark-50 break-words">
"What stood out to me was how incredibly easy Ash made it for me to go from a proof of concept, to a working prototype using ETS, to a live app using Postgres."
</p>
<p class="font-bold">
<div class="text-pimary-light-500 dark:text-primary-dark-400">
<p>
<div class="font-bold text-primary-light-500 dark:text-primary-dark-400">
Brett Kolodny
</div>
<div class="text-base-light-700 dark:text-base-dark-200">
@ -120,14 +123,14 @@ defmodule AshHqWeb.Pages.Home do
</div>
</div>
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-base-light-200 rounded-xl p-8 md:p-0 dark:bg-base-dark-800 bg-white drop-shadow-xl md:relative md:-top-32 md:-left-[11rem]">
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-base-light-200 rounded-xl p-8 md:p-0 dark:bg-base-dark-700 bg-white drop-shadow-xl md:relative md:-top-32 md:-left-[11rem]">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<p class="text-lg font-light text-base-light-700 dark:text-base-dark-50 break-words">
"Ash is such powerful idea and it gives Alembic such a massive competitive advantage that I’d be really stupid to tell anyone about it."
</p>
<p class="font-bold">
<div class="text-primary-light-500 dark:text-primary-dark-400">
<p>
<div class="font-bold text-primary-light-500 dark:text-primary-dark-400">
Josh Price
</div>
<div class="text-base-light-700 dark:text-base-dark-100">
@ -137,14 +140,14 @@ defmodule AshHqWeb.Pages.Home do
</div>
</div>
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-base-light-100 rounded-xl p-8 md:p-0 dark:bg-base-dark-700 drop-shadow-xl md:relative md:-top-[4rem] md:-top-64 md:-right-44">
<div class="w-full md:w-96 lg:min-w-fit lg:max-w-min bg-base-light-100 rounded-xl p-8 md:p-0 dark:bg-base-dark-600 drop-shadow-xl md:relative md:-top-[4rem] md:-top-64 md:-right-44">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<p class="text-lg font-light text-base-light-700 dark:text-base-dark-50 break-words">
"Ash Framework enabled us to build a robust platform for delivering financial services using bitcoin. Ash proved itself to our team by handling innovative use cases with ease and it continues to evolve ahead of our growing list of needs."
</p>
<p class="font-bold">
<div class="text-primary-light-500 dark:text-primary-dark-400">
<p>
<div class="font-bold text-primary-light-500 dark:text-primary-dark-400">
Yousef Janajri
</div>
<div class="text-base-light-700 dark:text-base-dark-100">
@ -159,7 +162,7 @@ defmodule AshHqWeb.Pages.Home do
{#if @signed_up}
Thank you for joining our mailing list!
{#else}
<p class="text-2xl font-medium text-base-light-700 dark:text-base-dark-50 max-w-4xl mx-auto text-center">Join our mailing list for (tastefully paced) updates!</p>
<p class="text-2xl font-medium text-base-light-700 dark:text-base-light-50 max-w-4xl mx-auto text-center">Join our mailing list for (tastefully paced) updates!</p>
<Form
for={@email_form}
change="validate_email_form"
@ -172,7 +175,7 @@ defmodule AshHqWeb.Pages.Home do
opts={placeholder: "user@email.com"}
/>
</Field>
<Submit class="w-fit flex items-center px-4 rounded-lg bg-primary-light-500 dark:text-white dark:hover:text-base-light-200 hover:text-white h-10">Join</Submit>
<Submit class="flex justify-center items-center w-full md:w-auto h-10 px-4 rounded-lg bg-primary-light-500 dark:bg-primary-dark-500 font-semibold dark:text-white dark:hover:bg-primary-dark-700 hover:bg-primary-light-700">Join</Submit>
</Form>
{/if}
</div>
@ -181,10 +184,10 @@ defmodule AshHqWeb.Pages.Home do
<h2 class="mt-8 font-semibold text-red-500 dark:text-red-400">
Simple declarative DSL
</h2>
<p class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tight dark:text-slate-50">
<p class="mt-4 text-3xl sm:text-4xl text-base-dark-900 font-extrabold tracking-tight dark:text-base-light-50">
A taste of how to configure Ash
</p>
<p class="text-slate-500 dark:text-slate-400 mt-4 max-w-3xl space-y-6">
<p class="text-base-dark-500 dark:text-base-light-300 mt-4 max-w-3xl space-y-6">
Below are some examples of the way you can model your resources with actions, attributes and relationships.
You can easily swap data layers between Postgres or ETS for example, or add your own data layer extension.
Once you've modelled your resources, you can derive GraphQL or JSON API external APIs from them.
@ -252,24 +255,24 @@ defmodule AshHqWeb.Pages.Home do
</div>
</div>
<div class="flex flex-col items-center my-10 space-y-4">
<div class="flex flex-col items-center my-10 space-y-4 hidden sm:block">
{#if @signed_up}
Thank you for joining our mailing list!
{#else}
<p class="text-2xl font-medium text-base-light-700 dark:text-base-dark-50 max-w-4xl mx-auto text-center">Join our mailing list for (tastefully paced) updates!</p>
<p class="text-2xl font-medium text-base-light-700 dark:text-base-light-50 max-w-4xl mx-auto text-center">Join our mailing list for (tastefully paced) updates!</p>
<Form
for={@email_form}
change="validate_email_form"
submit="submit_email_form"
class="flex flex-col md:flex-row md:space-x-4 space-y-4 items-center w-full md:w-auto px-4 md:px-0"
class="flex flex-col md:flex-row space-x-4 space-y-4 items-center"
>
<Field name={:email} class="w-full">
<Field name={:email}>
<TextInput
class="w-full md:w-96 button border border-base-light-400 bg-base-light-200 dark:border-base-dark-700 rounded-lg dark:bg-base-dark-700 hover:bg-base-light-300 dark:hover:bg-base-dark-600"
class="w-80 md:w-96 button border border-base-light-400 bg-base-light-200 dark:border-base-dark-700 rounded-lg dark:bg-base-dark-700 hover:bg-base-light-300 dark:hover:bg-base-dark-600"
opts={placeholder: "user@email.com"}
/>
</Field>
<Submit class="w-full md:w-fit flex justify-center items-center px-4 rounded-lg bg-primary-light-500 dark:text-white dark:hover:text-base-dark-200 text-center hover:text-white h-10">Join</Submit>
<Submit class="flex justify-center items-center w-full md:w-auto h-10 px-4 rounded-lg bg-primary-light-500 dark:bg-primary-dark-500 font-semibold dark:text-white dark:hover:bg-primary-dark-700 hover:bg-primary-light-700">Join</Submit>
</Form>
{/if}
</div>

10
lib/ash_hq_web/views/error_helpers.ex
View file

@ -18,20 +18,20 @@ defmodule AshHqWeb.ErrorHelpers do
end
@doc """
Translates an error message using gettext.
Tranbase-darks an error message using gettext.
"""
def translate_error({msg, opts}) do
# When using gettext, we typically pass the strings we want
# to translate as a static argument:
# to tranbase-dark as a static argument:
#
# # Translate "is invalid" in the "errors" domain
# # Tranbase-dark "is invalid" in the "errors" domain
# dgettext("errors", "is invalid")
#
# # Translate the number of files with plural rules
# # Tranbase-dark the number of files with plural rules
# dngettext("errors", "1 file", "%{count} files", count)
#
# Because the error messages we show in our forms and APIs
# are defined inside Ecto, we need to translate them dynamically.
# are defined inside Ecto, we need to tranbase-dark them dynamically.
# This requires us to call the Gettext module passing our gettext
# backend as first argument.
#