mirror of
https://github.com/ash-project/ash_hq.git
synced 2024-09-19 12:53:49 +12:00
WIP
This commit is contained in:
Zach Daniel
parent
8c3f397885
commit
32d3eb770a
5 changed files with 49 additions and 66 deletions
|
|
@ -80,17 +80,10 @@ window.addEventListener("phx:page-loading-stop", () => {
|
|||
|
||||
|
||||
window.addEventListener("js:focus", e => e.target.focus())
|
||||
// window.addEventListener("js:noscroll-main", e => {
|
||||
// if(e.target.style.display === "none") {
|
||||
// document.getElementById("main-container").classList.add("overflow-hidden")
|
||||
// } else {
|
||||
// document.getElementById("main-container").classList.remove("overflow-hidden")
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
window.addEventListener("phx:js:scroll-to", (e) => {
|
||||
const target = document.getElementById(e.detail.id);
|
||||
console.log(target);
|
||||
const boundary = document.getElementById(e.detail.boundary_id);
|
||||
scrollIntoView(target, {
|
||||
behavior: 'smooth',
|
||||
|
|
@ -99,6 +92,17 @@ window.addEventListener("phx:js:scroll-to", (e) => {
|
|||
});
|
||||
});
|
||||
|
||||
let scrolled = false;
|
||||
|
||||
window.addEventListener("phx:page-loading-stop", ({detail}) => {
|
||||
if(detail.kind === "initial" && window.location.hash && !scrolled){
|
||||
let hashEl = document.getElementById(window.location.hash.substring(1));
|
||||
hashEl && hashEl.scrollIntoView();
|
||||
scrolled = true;
|
||||
}
|
||||
topbar.hide();
|
||||
})
|
||||
|
||||
window.addEventListener("phx:selected-versions", (e) => {
|
||||
const cookie = Object.keys(e.detail).map((key) => `${key}:${e.detail[key]}`).join(',');
|
||||
document.cookie = 'selected_versions' + '=' + cookie + ';path=/';
|
||||
|
|
|
|||
|
|
@ -14,12 +14,11 @@ defmodule AshHqWeb.Components.DocSidebar do
|
|||
prop id, :string, required: true
|
||||
prop dsl, :any, required: true
|
||||
prop module, :any, required: true
|
||||
prop function, :any, required: true
|
||||
|
||||
def render(assigns) do
|
||||
~F"""
|
||||
<aside id={@id} class={"w-64 h-full block overflow-y-scroll", @class} aria-label="Sidebar">
|
||||
<div class="overflow-y-auto py-4 px-3">
|
||||
<div class="py-3 px-3">
|
||||
<ul class="space-y-2">
|
||||
{#for library <- @libraries}
|
||||
<li>
|
||||
|
|
@ -49,7 +48,7 @@ defmodule AshHqWeb.Components.DocSidebar do
|
|||
guide.url_safe_name
|
||||
)}
|
||||
class={
|
||||
"flex items-center p-1 text-base font-normal text-gray-900 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
"flex items-center pt-1 text-base font-normal text-gray-900 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
"dark:bg-gray-600": @guide && @guide.id == guide.id
|
||||
}
|
||||
>
|
||||
|
|
@ -69,7 +68,7 @@ defmodule AshHqWeb.Components.DocSidebar do
|
|||
<LivePatch
|
||||
to={Routes.extension_link(library, selected_version_name(library, @selected_versions), extension.name)}
|
||||
class={
|
||||
"flex items-center p-1 text-base font-normal text-gray-900 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
"flex items-center pt-1 text-base font-normal text-gray-900 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
"dark:bg-gray-600": @extension && @extension.id == extension.id
|
||||
}
|
||||
>
|
||||
|
|
@ -90,31 +89,13 @@ defmodule AshHqWeb.Components.DocSidebar do
|
|||
<LivePatch
|
||||
to={Routes.module_link(library, @library_version.version, module.name)}
|
||||
class={
|
||||
"flex items-center p-1 text-base font-normal text-gray-900 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
"dark:bg-gray-600": !@function && @module && @module.id == module.id
|
||||
"flex items-center pt-1 text-base font-normal text-gray-900 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
"dark:bg-gray-600": @module && @module.id == module.id
|
||||
}
|
||||
>
|
||||
<span class="ml-3 mr-2">{module.name}</span>
|
||||
<Heroicons.Outline.CodeIcon class="h-4 w-4" />
|
||||
</LivePatch>
|
||||
{#if @module && @module.id == module.id}
|
||||
<ul>
|
||||
{#for function <- @module.functions}
|
||||
<li class="border-l pl-1 border-orange-600 border-opacity-30">
|
||||
<LivePatch
|
||||
to={Routes.function_link(library, @library_version.version, module.name, function.name, function.arity)}
|
||||
class={
|
||||
"flex items-center p-1 text-base font-normal rounded-lg hover:text-orange-300",
|
||||
"text-orange-600 dark:text-orange-400 font-bold": @function && @function.id == function.id
|
||||
}
|
||||
>
|
||||
{function.name}/{function.arity}
|
||||
</LivePatch>
|
||||
</li>
|
||||
{/for}
|
||||
|
||||
</ul>
|
||||
{/if}
|
||||
</li>
|
||||
{/for}
|
||||
{/if}
|
||||
|
|
@ -135,7 +116,7 @@ defmodule AshHqWeb.Components.DocSidebar do
|
|||
<LivePatch
|
||||
to={Routes.dsl_link(@library, @library_version.version, @extension.name, dsl)}
|
||||
class={
|
||||
"flex items-center p-1 text-base font-normal rounded-lg hover:text-orange-300",
|
||||
"flex items-center pt-1 text-base font-normal rounded-lg hover:text-orange-300",
|
||||
"text-orange-600 dark:text-orange-400 font-bold": @dsl && @dsl.id == dsl.id
|
||||
}
|
||||
>
|
||||
|
|
|
|||
20
lib/ash_hq_web/components/right_nav.ex
Normal file
20
lib/ash_hq_web/components/right_nav.ex
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
defmodule AshHqWeb.Components.RightNav do
|
||||
use Surface.Component
|
||||
|
||||
alias AshHqWeb.Routes
|
||||
alias Surface.Components.LivePatch
|
||||
|
||||
prop functions, :list
|
||||
|
||||
def render(assigns) do
|
||||
~F"""
|
||||
<div class="w-min flex flex-col overflow-y-scroll">
|
||||
{#for function <- @functions}
|
||||
<a class="hover:text-orange-300" href={"##{Routes.sanitize_name(function.name)}-#{function.arity}"}>
|
||||
{"#{function.name}/#{function.arity}"}
|
||||
</a>
|
||||
{/for}
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
@ -2,7 +2,7 @@ defmodule AshHqWeb.Pages.Docs do
|
|||
use Surface.LiveComponent
|
||||
|
||||
alias Phoenix.LiveView.JS
|
||||
alias AshHqWeb.Components.{CalloutText, DocSidebar, Tag}
|
||||
alias AshHqWeb.Components.{CalloutText, DocSidebar, RightNav, Tag}
|
||||
alias AshHqWeb.Routes
|
||||
|
||||
prop params, :map, required: true
|
||||
|
|
@ -21,7 +21,6 @@ defmodule AshHqWeb.Pages.Docs do
|
|||
data dsl, :any
|
||||
data options, :list, default: []
|
||||
data module, :any
|
||||
data function, :any
|
||||
|
||||
@spec render(any) :: Phoenix.LiveView.Rendered.t()
|
||||
def render(assigns) do
|
||||
|
|
@ -59,7 +58,6 @@ defmodule AshHqWeb.Pages.Docs do
|
|||
libraries={@libraries}
|
||||
extension={@extension}
|
||||
module={@module}
|
||||
function={@function}
|
||||
guide={@guide}
|
||||
library={@library}
|
||||
library_version={@library_version}
|
||||
|
|
@ -73,7 +71,6 @@ defmodule AshHqWeb.Pages.Docs do
|
|||
id="sidebar"
|
||||
class="hidden lg:block mt-10"
|
||||
module={@module}
|
||||
function={@function}
|
||||
libraries={@libraries}
|
||||
extension={@extension}
|
||||
guide={@guide}
|
||||
|
|
@ -134,6 +131,14 @@ defmodule AshHqWeb.Pages.Docs do
|
|||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if @module}
|
||||
<div
|
||||
class="grow w-min overflow-y-scroll overflow-x-visible mt-14 mb-"
|
||||
phx-hook="Docs"
|
||||
>
|
||||
<RightNav functions={@module.functions}/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
|
@ -178,7 +183,6 @@ defmodule AshHqWeb.Pages.Docs do
|
|||
|> assign_extension()
|
||||
|> assign_guide()
|
||||
|> assign_module()
|
||||
|> assign_function()
|
||||
|> assign_dsl()
|
||||
|> assign_docs()}
|
||||
end
|
||||
|
|
@ -217,32 +221,6 @@ defmodule AshHqWeb.Pages.Docs do
|
|||
end
|
||||
end
|
||||
|
||||
defp assign_function(socket) do
|
||||
if socket.assigns.module do
|
||||
socket.assigns.uri
|
||||
|> URI.parse()
|
||||
|> Map.get(:fragment)
|
||||
|> case do
|
||||
nil ->
|
||||
assign(socket, :function, nil)
|
||||
|
||||
"" ->
|
||||
assign(socket, :function, nil)
|
||||
|
||||
fragment ->
|
||||
assign(
|
||||
socket,
|
||||
:function,
|
||||
Enum.find(socket.assigns.module.functions, fn func ->
|
||||
"#{Routes.sanitize_name(func.name)}-#{func.arity}" == fragment
|
||||
end)
|
||||
)
|
||||
end
|
||||
else
|
||||
assign(socket, :function, nil)
|
||||
end
|
||||
end
|
||||
|
||||
defp assign_module(socket) do
|
||||
if socket.assigns.library && socket.assigns.library_version &&
|
||||
socket.assigns[:params]["module"] do
|
||||
|
|
@ -265,7 +243,7 @@ defmodule AshHqWeb.Pages.Docs do
|
|||
socket.assigns.module ->
|
||||
assign(socket,
|
||||
docs: AshHq.Docs.Extensions.RenderMarkdown.render!(socket.assigns.module, :doc),
|
||||
doc_paths: [socket.assigns.library.name, socket.assigns.module.name],
|
||||
doc_path: [socket.assigns.library.name, socket.assigns.module.name],
|
||||
options: []
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ defmodule AshHqWeb.AppViewLive do
|
|||
<button id="search-button" class="hidden" phx-click={AshHqWeb.AppViewLive.toggle_search()} />
|
||||
<div
|
||||
id="main-container"
|
||||
class="h-screen flex flex-col bg-white dark:bg-primary-black dark:text-silver-phoenix overflow-x-hidden overflow-clip"
|
||||
class={"h-screen flex flex-col bg-white dark:bg-primary-black dark:text-silver-phoenix overflow-x-hidden", "overflow-clip": @live_action == :docs_dsl}
|
||||
>
|
||||
<div class={
|
||||
"flex justify-between pt-4 px-4",
|
||||
|
|
|
|||
Loading…
Reference in a new issue