mirror of
https://github.com/ash-project/ash_hq.git
synced 2024-09-20 05:13:23 +12:00
Single page DSL styling (#105)
This commit is contained in:
parent
14f7ed892b
commit
c94ce89a32
3 changed files with 44 additions and 34 deletions
|
@ -41,7 +41,7 @@ defmodule AshHqWeb.Pages.Blog do
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="prose prose-lg dark:prose-invert max-w-none mt-6">
|
<div class="prose dark:prose-invert max-w-none mt-6">
|
||||||
{raw(@post.body_html)}
|
{raw(@post.body_html)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -127,12 +127,15 @@ defmodule AshHqWeb.Pages.Docs do
|
||||||
{/if}
|
{/if}
|
||||||
{#if @dsl_target_extensions}
|
{#if @dsl_target_extensions}
|
||||||
{#for extension <- @dsl_target_extensions}
|
{#for extension <- @dsl_target_extensions}
|
||||||
<div class="text-3xl font-extrabold mb-12">
|
<div class="prose dark:prose-invert mb-8">
|
||||||
{#if extension.default_for_target}
|
<h1>
|
||||||
{extension.target}
|
{#if extension.default_for_target}
|
||||||
{#else}
|
{extension.target}
|
||||||
{extension.module}
|
{#else}
|
||||||
{/if}
|
{extension.module}
|
||||||
|
{/if}
|
||||||
|
</h1>
|
||||||
|
{raw(extension.doc_html)}
|
||||||
</div>
|
</div>
|
||||||
{#for dsl <- extension.dsls |> Enum.filter(&(&1.path == []))}
|
{#for dsl <- extension.dsls |> Enum.filter(&(&1.path == []))}
|
||||||
{render_dsl(assigns, extension, dsl)}
|
{render_dsl(assigns, extension, dsl)}
|
||||||
|
@ -191,12 +194,12 @@ defmodule AshHqWeb.Pages.Docs do
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
{#if @module}
|
{#if @module}
|
||||||
<div class="sidebar-container hidden lg:block lg:w-80 sticky top-36 xl:top-20 shrink-0 overflow-y-auto overflow-x-hidden dark:bg-base-dark-850 bg-opacity-70 mt-4">
|
<div class="sidebar-container hidden lg:block lg:w-72 sticky top-36 xl:top-20 shrink-0 overflow-y-auto overflow-x-hidden dark:bg-base-dark-850 bg-opacity-70 mt-4">
|
||||||
<ModuleRightNav functions={@module.functions} module={@module.name} />
|
<ModuleRightNav functions={@module.functions} module={@module.name} />
|
||||||
</div>
|
</div>
|
||||||
{#else}
|
{#else}
|
||||||
{#if @dsl_target}
|
{#if @dsl_target}
|
||||||
<div class="sidebar-container hidden lg:block lg:w-80 sticky top-36 xl:top-20 shrink-0 overflow-y-auto overflow-x-hidden dark:bg-base-dark-850 bg-opacity-70 mt-4">
|
<div class="sidebar-container hidden lg:block lg:w-72 sticky top-36 xl:top-20 shrink-0 overflow-y-auto overflow-x-hidden dark:bg-base-dark-850 bg-opacity-70 mt-4">
|
||||||
<DslRightNav dsls={Enum.flat_map(@dsl_target_extensions, & &1.dsls)} dsl_target={@dsl_target} />
|
<DslRightNav dsls={Enum.flat_map(@dsl_target_extensions, & &1.dsls)} dsl_target={@dsl_target} />
|
||||||
</div>
|
</div>
|
||||||
{#else}
|
{#else}
|
||||||
|
@ -228,7 +231,7 @@ defmodule AshHqWeb.Pages.Docs do
|
||||||
arg_count = Enum.count(arguments)
|
arg_count = Enum.count(arguments)
|
||||||
|
|
||||||
~F"""
|
~F"""
|
||||||
<div class={classes(["mb-12", "ml-6": !Enum.empty?(dsl.path)])}>
|
<div class={classes(["mb-12 mt-4"])}>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="text-2xl font-bold nav-anchor" id={String.replace(dsl.sanitized_path, "/", "-")}>
|
<div class="text-2xl font-bold nav-anchor" id={String.replace(dsl.sanitized_path, "/", "-")}>
|
||||||
|
@ -237,11 +240,14 @@ defmodule AshHqWeb.Pages.Docs do
|
||||||
<div class="text-lg w-full font-semibold">
|
<div class="text-lg w-full font-semibold">
|
||||||
{dsl.name}
|
{dsl.name}
|
||||||
{#for {arg, i} <- Enum.with_index(arguments)}
|
{#for {arg, i} <- Enum.with_index(arguments)}
|
||||||
<LivePatch to={"##{String.replace(arg.sanitized_path, "/", "-")}-#{DocRoutes.sanitize_name(arg.name)}"}>
|
<LivePatch
|
||||||
<span class="text-primary-light-600 dark:text-primary-dark-400 hover:dark:text-primary-dark-600 hover:text-primary-light-700">
|
class={"after:content-[',']": i != arg_count - 1}
|
||||||
|
to={"##{String.replace(arg.sanitized_path, "/", "-")}-#{DocRoutes.sanitize_name(arg.name)}"}
|
||||||
|
>
|
||||||
|
<span class="italic text-primary-light-600 dark:text-primary-dark-400 hover:dark:text-primary-dark-500 hover:text-primary-light-700">
|
||||||
{arg.name}</span>{#if arg.name in dsl.optional_args}
|
{arg.name}</span>{#if arg.name in dsl.optional_args}
|
||||||
\\ {Map.get(dsl.arg_defaults, arg.name, "nil")}
|
\\ {Map.get(dsl.arg_defaults, arg.name, "nil")}
|
||||||
{/if}</LivePatch>{#if i != arg_count - 1},{/if}
|
{/if}</LivePatch>
|
||||||
{/for}
|
{/for}
|
||||||
</div>
|
</div>
|
||||||
<a href={"##{String.replace(dsl.sanitized_path, "/", "-")}"}>
|
<a href={"##{String.replace(dsl.sanitized_path, "/", "-")}"}>
|
||||||
|
@ -251,60 +257,58 @@ defmodule AshHqWeb.Pages.Docs do
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="prose-lg dark:prose-invert my-4">
|
<div class="prose dark:prose-invert my-4">
|
||||||
{raw(dsl.doc_html)}
|
{raw(dsl.doc_html)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if !Enum.empty?(options)}
|
{#if !Enum.empty?(options)}
|
||||||
<div class="my-2">
|
{#case modules_in_scope(dsl, extension, @libraries, @selected_versions)}
|
||||||
{#case modules_in_scope(dsl, extension, @libraries, @selected_versions)}
|
{#match []}
|
||||||
{#match []}
|
{#match imports}
|
||||||
{#match imports}
|
<div class="mt-2 mb-6">
|
||||||
<div>Imported Modules:</div>
|
<div>Imported Modules:</div>
|
||||||
<ul>
|
<ul>
|
||||||
{#for mod <- imports}
|
{#for mod <- imports}
|
||||||
<li class="list-disc">
|
<li class="list-disc">
|
||||||
<LivePatch to={DocRoutes.doc_link(mod, @selected_versions)}>
|
<LivePatch to={DocRoutes.doc_link(mod, @selected_versions)}>
|
||||||
<span class="text-primary-light-600 dark:text-primary-dark-400 hover:dark:text-primary-dark-600 hover:text-primary-light-700">
|
<span class="text-primary-light-600 dark:text-primary-dark-400 hover:dark:text-primary-dark-500 hover:text-primary-light-700">
|
||||||
{mod.name}
|
{mod.name}
|
||||||
</span>
|
</span>
|
||||||
</LivePatch>
|
</LivePatch>
|
||||||
</li>
|
</li>
|
||||||
{/for}
|
{/for}
|
||||||
</ul>
|
</ul>
|
||||||
{/case}
|
</div>
|
||||||
</div>
|
{/case}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:if={!Enum.empty?(options)}
|
:if={!Enum.empty?(options)}
|
||||||
class="grid w-full"
|
class="grid grid-cols-[min-content_auto] w-full border-b border-gray-300 dark:border-gray-600 pb-2 mb-12"
|
||||||
style="grid-template-columns: min-content auto"
|
|
||||||
>
|
>
|
||||||
{#for option <- options}
|
{#for option <- options}
|
||||||
<div
|
<div
|
||||||
class="flex flex-col border-t border-gray-600 mt-2 nav-anchor"
|
class="flex flex-col border-t border-gray-300 dark:border-gray-600 py-3 nav-anchor pr-4"
|
||||||
id={"#{String.replace(option.sanitized_path, "/", "-")}-#{DocRoutes.sanitize_name(option.name)}"}
|
id={"#{String.replace(option.sanitized_path, "/", "-")}-#{DocRoutes.sanitize_name(option.name)}"}
|
||||||
>
|
>
|
||||||
<div class="flex flex-row align-middle">
|
<div class="flex flex-row align-middle leading-7">
|
||||||
<LivePatch
|
<LivePatch
|
||||||
to={"##{String.replace(option.sanitized_path, "/", "-")}-#{DocRoutes.sanitize_name(option.name)}"}
|
to={"##{String.replace(option.sanitized_path, "/", "-")}-#{DocRoutes.sanitize_name(option.name)}"}
|
||||||
class="text-primary-light-600 dark:text-primary-dark-400 hover:dark:text-primary-dark-600 hover:text-primary-light-700 text-lg pr-4"
|
class="text-primary-light-600 dark:text-primary-dark-400 hover:dark:text-primary-dark-500 hover:text-primary-light-700 pr-2"
|
||||||
>
|
>
|
||||||
{option.name}
|
{option.name}
|
||||||
</LivePatch>
|
</LivePatch>
|
||||||
{render_tags(assigns, dsl, option)}
|
{render_tags(assigns, dsl, option)}
|
||||||
</div>
|
</div>
|
||||||
<span class="break-keep">
|
<span class="break-keep text-sm">
|
||||||
{option.type}
|
{option.type}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="prose prose-lg dark:prose-invert border-t border-gray-600 mt-2 pt-0">
|
<div class="prose dark:prose-invert border-t border-gray-300 dark:border-gray-600 py-3">
|
||||||
{raw(option.doc_html)}
|
{raw(option.doc_html)}
|
||||||
</div>
|
</div>
|
||||||
{/for}
|
{/for}
|
||||||
</div>
|
</div>
|
||||||
<hr class="mt-0 mb-12">
|
|
||||||
{#case child_dsls(extension, dsl)}
|
{#case child_dsls(extension, dsl)}
|
||||||
{#match []}
|
{#match []}
|
||||||
{#match children}
|
{#match children}
|
||||||
|
@ -441,12 +445,12 @@ defmodule AshHqWeb.Pages.Docs do
|
||||||
|
|
||||||
~F"""
|
~F"""
|
||||||
{#if option.argument_index}
|
{#if option.argument_index}
|
||||||
<Tag color={:blue}>
|
<Tag color={:blue} class="mt-1 py-0.5 h-5">
|
||||||
Arg[{option.argument_index}]
|
Arg[{option.argument_index}]
|
||||||
</Tag>
|
</Tag>
|
||||||
{/if}
|
{/if}
|
||||||
{#if required}
|
{#if required}
|
||||||
<Tag color={:red} class={classes("ml-2": option.argument_index)}>
|
<Tag color={:red} class={classes(["mt-1 py-0.5 h-5", "ml-2": option.argument_index])}>
|
||||||
Required
|
Required
|
||||||
</Tag>
|
</Tag>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -150,17 +150,23 @@ defmodule Utils do
|
||||||
defp docs_with_examples(doc, examples) do
|
defp docs_with_examples(doc, examples) do
|
||||||
case doc do
|
case doc do
|
||||||
nil ->
|
nil ->
|
||||||
"### Examples\n#{Enum.map_join(examples, "\n\n", &wrap_code/1)}"
|
maybe_add_examples(examples)
|
||||||
|
|
||||||
doc ->
|
doc ->
|
||||||
"""
|
"""
|
||||||
#{doc}
|
#{doc}
|
||||||
# Examples
|
|
||||||
#{Enum.map_join(examples, "\n\n", &wrap_code/1)}
|
#{maybe_add_examples(examples)}
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
defp maybe_add_examples([]), do: ""
|
||||||
|
|
||||||
|
defp maybe_add_examples(examples) do
|
||||||
|
"Examples:\n\n#{Enum.map_join(examples, "\n\n", &wrap_code/1)}"
|
||||||
|
end
|
||||||
|
|
||||||
defp build_entities(entities, path) do
|
defp build_entities(entities, path) do
|
||||||
entities
|
entities
|
||||||
|> Enum.with_index()
|
|> Enum.with_index()
|
||||||
|
|
Loading…
Reference in a new issue