mirror of
https://github.com/ash-project/ash_hq.git
synced 2024-09-20 05:13:23 +12:00
improvement: Colour unification (#84)
This commit is contained in:
Rebecca Le
GitHub
parent
957be06a81
commit
3451211c2c
8 changed files with 210 additions and 524 deletions
|
|
@ -9,7 +9,7 @@
|
||||||
@import "./_components.css";
|
@import "./_components.css";
|
||||||
|
|
||||||
.search-hit {
|
.search-hit {
|
||||||
color: #fb923c;
|
@apply text-primary-light-500 dark:text-primary-dark-300
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Alerts and form errors used by phx.new */
|
/* Alerts and form errors used by phx.new */
|
||||||
|
|
|
||||||
|
|
@ -1,373 +1,69 @@
|
||||||
.dark .inline {
|
/*! tomorrow night bright; https://github.com/MozMorris/tomorrow-pygments */
|
||||||
background-color: #404040;
|
.dark .highlight, .dark .highlight pre, .dark .highlight table { color: #eaeaea; }
|
||||||
border-radius: 0.1rem;
|
.dark .highlight .c { color: #969896; } /* Comment */
|
||||||
}
|
.dark .highlight .err { color: #d54e53; } /* Error */
|
||||||
|
.dark .highlight .k { color: #c397d8; } /* Keyword */
|
||||||
|
.dark .highlight .l { color: #e78c45; } /* Literal */
|
||||||
|
.dark .highlight .n, .dark .highlight .h { color: #eaeaea; } /* Name */
|
||||||
|
.dark .highlight .o { color: #70c0b1; } /* Operator */
|
||||||
|
.dark .highlight .p { color: #eaeaea; } /* Punctuation */
|
||||||
|
.dark .highlight .cm { color: #969896; } /* Comment.Multiline */
|
||||||
|
.dark .highlight .cp { color: #969896; } /* Comment.Preproc */
|
||||||
|
.dark .highlight .c1 { color: #969896; } /* Comment.Single */
|
||||||
|
.dark .highlight .cs { color: #969896; } /* Comment.Special */
|
||||||
|
.dark .highlight .gd { color: #d54e53; } /* Generic.Deleted */
|
||||||
|
.dark .highlight .ge { font-style: italic; } /* Generic.Emph */
|
||||||
|
.dark .highlight .gh { color: #eaeaea; font-weight: bold; } /* Generic.Heading */
|
||||||
|
.dark .highlight .gi { color: #b9ca4a; } /* Generic.Inserted */
|
||||||
|
.dark .highlight .gp { color: #969896; font-weight: bold; } /* Generic.Prompt */
|
||||||
|
.dark .highlight .gs { font-weight: bold; } /* Generic.Strong */
|
||||||
|
.dark .highlight .gu { color: #70c0b1; font-weight: bold; } /* Generic.Subheading */
|
||||||
|
.dark .highlight .kc { color: #c397d8; } /* Keyword.Constant */
|
||||||
|
.dark .highlight .kd { color: #c397d8; } /* Keyword.Declaration */
|
||||||
|
.dark .highlight .kn { color: #70c0b1; } /* Keyword.Namespace */
|
||||||
|
.dark .highlight .kp { color: #c397d8; } /* Keyword.Pseudo */
|
||||||
|
.dark .highlight .kr { color: #c397d8; } /* Keyword.Reserved */
|
||||||
|
.dark .highlight .kt { color: #e7c547; } /* Keyword.Type */
|
||||||
|
.dark .highlight .ld { color: #b9ca4a; } /* Literal.Date */
|
||||||
|
.dark .highlight .m { color: #e78c45; } /* Literal.Number */
|
||||||
|
.dark .highlight .s { color: #b9ca4a; } /* Literal.String */
|
||||||
|
.dark .highlight .na { color: #7aa6da; } /* Name.Attribute */
|
||||||
|
.dark .highlight .nb { color: #eaeaea; } /* Name.Builtin */
|
||||||
|
.dark .highlight .nc { color: #e7c547; } /* Name.Class */
|
||||||
|
.dark .highlight .no { color: #d54e53; } /* Name.Constant */
|
||||||
|
.dark .highlight .nd { color: #70c0b1; } /* Name.Decorator */
|
||||||
|
.dark .highlight .ni { color: #eaeaea; } /* Name.Entity */
|
||||||
|
.dark .highlight .ne { color: #d54e53; } /* Name.Exception */
|
||||||
|
.dark .highlight .nf { color: #7aa6da; } /* Name.Function */
|
||||||
|
.dark .highlight .nl { color: #eaeaea; } /* Name.Label */
|
||||||
|
.dark .highlight .nn { color: #e7c547; } /* Name.Namespace */
|
||||||
|
.dark .highlight .nx { color: #7aa6da; } /* Name.Other */
|
||||||
|
.dark .highlight .py { color: #eaeaea; } /* Name.Property */
|
||||||
|
.dark .highlight .nt { color: #70c0b1; } /* Name.Tag */
|
||||||
|
.dark .highlight .nv { color: #d54e53; } /* Name.Variable */
|
||||||
|
.dark .highlight .ow { color: #70c0b1; } /* Operator.Word */
|
||||||
|
.dark .highlight .w { color: #eaeaea; } /* Text.Whitespace */
|
||||||
|
.dark .highlight .mf { color: #e78c45; } /* Literal.Number.Float */
|
||||||
|
.dark .highlight .mh { color: #e78c45; } /* Literal.Number.Hex */
|
||||||
|
.dark .highlight .mi { color: #e78c45; } /* Literal.Number.Integer */
|
||||||
|
.dark .highlight .mo { color: #e78c45; } /* Literal.Number.Oct */
|
||||||
|
.dark .highlight .sb { color: #b9ca4a; } /* Literal.String.Backtick */
|
||||||
|
.dark .highlight .sc { color: #eaeaea; } /* Literal.String.Char */
|
||||||
|
.dark .highlight .sd { color: #969896; } /* Literal.String.Doc */
|
||||||
|
.dark .highlight .s2 { color: #b9ca4a; } /* Literal.String.Double */
|
||||||
|
.dark .highlight .se { color: #e78c45; } /* Literal.String.Escape */
|
||||||
|
.dark .highlight .sh { color: #b9ca4a; } /* Literal.String.Heredoc */
|
||||||
|
.dark .highlight .si { color: #e78c45; } /* Literal.String.Interpol */
|
||||||
|
.dark .highlight .sx { color: #b9ca4a; } /* Literal.String.Other */
|
||||||
|
.dark .highlight .sr { color: #b9ca4a; } /* Literal.String.Regex */
|
||||||
|
.dark .highlight .s1 { color: #b9ca4a; } /* Literal.String.Single */
|
||||||
|
.dark .highlight .ss { color: #b9ca4a; } /* Literal.String.Symbol */
|
||||||
|
.dark .highlight .bp { color: #eaeaea; } /* Name.Builtin.Pseudo */
|
||||||
|
.dark .highlight .vc { color: #d54e53; } /* Name.Variable.Class */
|
||||||
|
.dark .highlight .vg { color: #d54e53; } /* Name.Variable.Global */
|
||||||
|
.dark .highlight .vi { color: #d54e53; } /* Name.Variable.Instance */
|
||||||
|
.dark .highlight .il { color: #e78c45; } /* Literal.Number.Integer.Long */
|
||||||
|
|
||||||
.dark .highlight pre {
|
|
||||||
background-color: #404040
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .highlight .hll {
|
|
||||||
background-color: #404040
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .highlight .c {
|
|
||||||
color: #999999;
|
|
||||||
font-style: italic
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Comment */
|
|
||||||
/* .dark .highlight .err {
|
|
||||||
color: #a61717;
|
|
||||||
background-color: #e3d2d2
|
|
||||||
} */
|
|
||||||
|
|
||||||
/* Error */
|
|
||||||
.dark .highlight .g {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic */
|
|
||||||
.dark .highlight .k {
|
|
||||||
color: #6ab825;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyword */
|
|
||||||
.dark .highlight .l {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal */
|
|
||||||
.dark .highlight .n {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name */
|
|
||||||
.dark .highlight .o {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Operator */
|
|
||||||
.dark .highlight .x {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Other */
|
|
||||||
.dark .highlight .p {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Punctuation */
|
|
||||||
.dark .highlight .cm {
|
|
||||||
color: #999999;
|
|
||||||
font-style: italic
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Comment.Multiline */
|
|
||||||
.dark .highlight .cp {
|
|
||||||
color: #cd2828;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Comment.Preproc */
|
|
||||||
.dark .highlight .c1 {
|
|
||||||
color: #999999;
|
|
||||||
font-style: italic
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Comment.Single */
|
|
||||||
.dark .highlight .cs {
|
|
||||||
color: #e50808;
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: #520000
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Comment.Special */
|
|
||||||
.dark .highlight .gd {
|
|
||||||
color: #d22323
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Deleted */
|
|
||||||
.dark .highlight .ge {
|
|
||||||
color: #d0d0d0;
|
|
||||||
font-style: italic
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Emph */
|
|
||||||
.dark .highlight .gr {
|
|
||||||
color: #d22323
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Error */
|
|
||||||
.dark .highlight .gh {
|
|
||||||
color: #ffffff;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Heading */
|
|
||||||
.dark .highlight .gi {
|
|
||||||
color: #589819
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Inserted */
|
|
||||||
.dark .highlight .go {
|
|
||||||
color: #cccccc
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Output */
|
|
||||||
.dark .highlight .gp {
|
|
||||||
color: #aaaaaa
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Prompt */
|
|
||||||
.dark .highlight .gs {
|
|
||||||
color: #d0d0d0;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Strong */
|
|
||||||
.dark .highlight .gu {
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: underline
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Subheading */
|
|
||||||
.dark .highlight .gt {
|
|
||||||
color: #d22323
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Generic.Traceback */
|
|
||||||
.dark .highlight .kc {
|
|
||||||
color: #6ab825;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyword.Constant */
|
|
||||||
.dark .highlight .kd {
|
|
||||||
color: #6ab825;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyword.Declaration */
|
|
||||||
.dark .highlight .kn {
|
|
||||||
color: #6ab825;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyword.Namespace */
|
|
||||||
.dark .highlight .kp {
|
|
||||||
color: #6ab825
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyword.Pseudo */
|
|
||||||
.dark .highlight .kr {
|
|
||||||
color: #6ab825;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyword.Reserved */
|
|
||||||
.dark .highlight .kt {
|
|
||||||
color: #6ab825;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keyword.Type */
|
|
||||||
.dark .highlight .ld {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.Date */
|
|
||||||
.dark .highlight .m {
|
|
||||||
color: #3677a9
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.Number */
|
|
||||||
.dark .highlight .s {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String */
|
|
||||||
.dark .highlight .na {
|
|
||||||
color: #bbbbbb
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Attribute */
|
|
||||||
.dark .highlight .nb {
|
|
||||||
color: #24909d
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Builtin */
|
|
||||||
.dark .highlight .nc {
|
|
||||||
color: #447fcf;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Class */
|
|
||||||
.dark .highlight .no {
|
|
||||||
color: #40ffff
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Constant */
|
|
||||||
.dark .highlight .nd {
|
|
||||||
color: #ffa500
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Decorator */
|
|
||||||
.dark .highlight .ni {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Entity */
|
|
||||||
.dark .highlight .ne {
|
|
||||||
color: #bbbbbb
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Exception */
|
|
||||||
.dark .highlight .nf {
|
|
||||||
color: #447fcf
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Function */
|
|
||||||
.dark .highlight .nl {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Label */
|
|
||||||
.dark .highlight .nn {
|
|
||||||
color: #447fcf;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Namespace */
|
|
||||||
.dark .highlight .nx {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Other */
|
|
||||||
.dark .highlight .py {
|
|
||||||
color: #d0d0d0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Property */
|
|
||||||
.dark .highlight .nt {
|
|
||||||
color: #6ab825;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Tag */
|
|
||||||
.dark .highlight .nv {
|
|
||||||
color: #40ffff
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Variable */
|
|
||||||
.dark .highlight .ow {
|
|
||||||
color: #6ab825;
|
|
||||||
font-weight: bold
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Operator.Word */
|
|
||||||
.dark .highlight .w {
|
|
||||||
color: #666666
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text.Whitespace */
|
|
||||||
.dark .highlight .mf {
|
|
||||||
color: #3677a9
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.Number.Float */
|
|
||||||
.dark .highlight .mh {
|
|
||||||
color: #3677a9
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.Number.Hex */
|
|
||||||
.dark .highlight .mi {
|
|
||||||
color: #3677a9
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.Number.Integer */
|
|
||||||
.dark .highlight .mo {
|
|
||||||
color: #3677a9
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.Number.Oct */
|
|
||||||
.dark .highlight .sb {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Backtick */
|
|
||||||
.dark .highlight .sc {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Char */
|
|
||||||
.dark .highlight .sd {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Doc */
|
|
||||||
.dark .highlight .s2 {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Double */
|
|
||||||
.dark .highlight .se {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Escape */
|
|
||||||
.dark .highlight .sh {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Heredoc */
|
|
||||||
.dark .highlight .si {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Interpol */
|
|
||||||
.dark .highlight .sx {
|
|
||||||
color: #ffa500
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Other */
|
|
||||||
.dark .highlight .sr {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Regex */
|
|
||||||
.dark .highlight .s1 {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Single */
|
|
||||||
.dark .highlight .ss {
|
|
||||||
color: #ed9d13
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Literal.String.Symbol */
|
|
||||||
.dark .highlight .bp {
|
|
||||||
color: #24909d
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Builtin.Pseudo */
|
|
||||||
.dark .highlight .vc {
|
|
||||||
color: #40ffff
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Variable.Class */
|
|
||||||
.dark .highlight .vg {
|
|
||||||
color: #40ffff
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Variable.Global */
|
|
||||||
.dark .highlight .vi {
|
|
||||||
color: #40ffff
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Name.Variable.Instance */
|
|
||||||
.dark .highlight .il {
|
|
||||||
color: #3677a9
|
|
||||||
}
|
|
||||||
|
|
||||||
.light .code-pre {
|
.light .code-pre {
|
||||||
background-color: #f3f4f6 /* base-light-100 */
|
background-color: #f3f4f6 /* base-light-100 */
|
||||||
|
|
@ -457,4 +153,4 @@
|
||||||
.light .highlight .vc { color: #008080 } /* Name.Variable.Class */
|
.light .highlight .vc { color: #008080 } /* Name.Variable.Class */
|
||||||
.light .highlight .vg { color: #008080 } /* Name.Variable.Global */
|
.light .highlight .vg { color: #008080 } /* Name.Variable.Global */
|
||||||
.light .highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
.light .highlight .vi { color: #008080 } /* Name.Variable.Instance */
|
||||||
.light .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
.light .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||||
|
|
|
||||||
|
|
@ -43,28 +43,28 @@ defmodule AshHqWeb.Components.AppView.TopBar do
|
||||||
<a
|
<a
|
||||||
href="/docs/guides/ash/latest/tutorials/get-started"
|
href="/docs/guides/ash/latest/tutorials/get-started"
|
||||||
title="Documentation"
|
title="Documentation"
|
||||||
class="text-lg font-bold px-2 md:px-4 dark:hover:text-primary-light-500 hover:text-primary-light-700 hidden md:block"
|
class="text-lg font-bold px-2 md:px-4 dark:hover:text-primary-dark-400 hover:text-primary-light-700 hidden md:block"
|
||||||
>
|
>
|
||||||
Documentation
|
Documentation
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="/blog"
|
href="/blog"
|
||||||
title="Blog"
|
title="Blog"
|
||||||
class="text-lg font-bold px-2 md:px-4 dark:hover:text-primary-light-500 hover:text-primary-light-700"
|
class="text-lg font-bold px-2 md:px-4 dark:hover:text-primary-dark-400 hover:text-primary-light-700"
|
||||||
>
|
>
|
||||||
Blog
|
Blog
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="/forum/showcase"
|
href="/forum/showcase"
|
||||||
title="Forum"
|
title="Forum"
|
||||||
class="text-lg font-bold px-2 md:px-4 dark:hover:text-primary-light-500 hover:text-primary-light-700"
|
class="text-lg font-bold px-2 md:px-4 dark:hover:text-primary-dark-400 hover:text-primary-light-700"
|
||||||
>
|
>
|
||||||
Forum
|
Forum
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="/media"
|
href="/media"
|
||||||
title="Media"
|
title="Media"
|
||||||
class="text-lg font-bold px-2 md:px-4 pr-2 md:pr-8 dark:hover:text-primary-light-500 hover:text-primary-light-700"
|
class="text-lg font-bold px-2 md:px-4 pr-2 md:pr-8 dark:hover:text-primary-dark-400 hover:text-primary-light-700"
|
||||||
>
|
>
|
||||||
Media
|
Media
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -9,56 +9,46 @@ defmodule AshHqWeb.Components.RightNav do
|
||||||
~F"""
|
~F"""
|
||||||
<style>
|
<style>
|
||||||
a[aria-current] {
|
a[aria-current] {
|
||||||
@apply text-primary-light-600;
|
@apply text-primary-light-600 dark:text-primary-dark-400;
|
||||||
}
|
|
||||||
:global(:dark):a[aria-current] {
|
|
||||||
@apply text-primary-dark-400;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div id="right-nav" class="scroll-parent w-min hidden lg:flex flex-col pb-12" phx-hook="RightNav">
|
<div id="right-nav" class="scroll-parent w-min hidden lg:flex flex-col pb-12" phx-hook="RightNav">
|
||||||
<a id="right-nav-module-docs" class="hover:text-primary-light-300 right-nav" href="#module-docs">
|
<a id="right-nav-module-docs" class="hover:text-primary-light-300 hover:dark:text-primary-dark-300 right-nav" href="#module-docs">
|
||||||
{@module}
|
{@module}
|
||||||
</a>
|
</a>
|
||||||
{#for %{type: :type} = function <- @functions}
|
{#for %{type: :type} = function <- @functions}
|
||||||
<a
|
<.nav_link function={function} />
|
||||||
id={"right-nav-type-#{function.sanitized_name}-#{function.arity}"}
|
|
||||||
class="hover:text-primary-light-300 right-nav"
|
|
||||||
href={"#type-#{function.sanitized_name}-#{function.arity}"}
|
|
||||||
>
|
|
||||||
{"#{function.name}/#{function.arity}"}
|
|
||||||
</a>
|
|
||||||
{/for}
|
{/for}
|
||||||
|
|
||||||
{#for %{type: :callback} = function <- @functions}
|
{#for %{type: :callback} = function <- @functions}
|
||||||
<a
|
<.nav_link function={function} />
|
||||||
id={"right-nav-callback-#{function.sanitized_name}-#{function.arity}"}
|
|
||||||
class="hover:text-primary-light-300 right-nav"
|
|
||||||
href={"#callback-#{function.sanitized_name}-#{function.arity}"}
|
|
||||||
>
|
|
||||||
{"#{function.name}/#{function.arity}"}
|
|
||||||
</a>
|
|
||||||
{/for}
|
{/for}
|
||||||
|
|
||||||
{#for %{type: :function} = function <- @functions}
|
{#for %{type: :function} = function <- @functions}
|
||||||
<a
|
<.nav_link function={function} />
|
||||||
id={"right-nav-function-#{function.sanitized_name}-#{function.arity}"}
|
|
||||||
class="hover:text-primary-light-300 right-nav"
|
|
||||||
href={"#function-#{function.sanitized_name}-#{function.arity}"}
|
|
||||||
>
|
|
||||||
{"#{function.name}/#{function.arity}"}
|
|
||||||
</a>
|
|
||||||
{/for}
|
{/for}
|
||||||
|
|
||||||
{#for %{type: :macro} = function <- @functions}
|
{#for %{type: :macro} = function <- @functions}
|
||||||
<a
|
<.nav_link function={function} />
|
||||||
id={"right-nav-macro-#{function.sanitized_name}-#{function.arity}"}
|
|
||||||
class="hover:text-primary-light-300 right-nav"
|
|
||||||
href={"#macro-#{function.sanitized_name}-#{function.arity}"}
|
|
||||||
>
|
|
||||||
{"#{function.name}/#{function.arity}"}
|
|
||||||
</a>
|
|
||||||
{/for}
|
{/for}
|
||||||
</div>
|
</div>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def nav_link(assigns) do
|
||||||
|
~F"""
|
||||||
|
<style>
|
||||||
|
a[aria-current] {
|
||||||
|
@apply text-primary-light-600 dark:text-primary-dark-400;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<a
|
||||||
|
id={"right-nav-#{@function.type}-#{@function.sanitized_name}-#{@function.arity}"}
|
||||||
|
class="hover:text-primary-light-300 hover:dark:text-primary-dark-300 right-nav"
|
||||||
|
href={"##{@function.type}-#{@function.sanitized_name}-#{@function.arity}"}
|
||||||
|
>
|
||||||
|
{"#{@function.name}/#{@function.arity}"}
|
||||||
|
</a>
|
||||||
|
"""
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -10,19 +10,19 @@ defmodule AshHqWeb.Components.Search do
|
||||||
alias Surface.Components.{Form, LivePatch}
|
alias Surface.Components.{Form, LivePatch}
|
||||||
alias Surface.Components.Form.Checkbox
|
alias Surface.Components.Form.Checkbox
|
||||||
|
|
||||||
prop close, :event, required: true
|
prop(close, :event, required: true)
|
||||||
prop libraries, :list, required: true
|
prop(libraries, :list, required: true)
|
||||||
prop selected_versions, :map, required: true
|
prop(selected_versions, :map, required: true)
|
||||||
prop selected_types, :list, required: true
|
prop(selected_types, :list, required: true)
|
||||||
prop change_types, :event, required: true
|
prop(change_types, :event, required: true)
|
||||||
prop change_versions, :event, required: true
|
prop(change_versions, :event, required: true)
|
||||||
prop remove_version, :event, required: true
|
prop(remove_version, :event, required: true)
|
||||||
prop uri, :string, required: true
|
prop(uri, :string, required: true)
|
||||||
|
|
||||||
data search, :string, default: ""
|
data(search, :string, default: "")
|
||||||
data item_list, :list, default: []
|
data(item_list, :list, default: [])
|
||||||
data selected_item, :string
|
data(selected_item, :string)
|
||||||
data selecting_packages, :boolean, default: false
|
data(selecting_packages, :boolean, default: false)
|
||||||
|
|
||||||
def render(assigns) do
|
def render(assigns) do
|
||||||
~F"""
|
~F"""
|
||||||
|
|
@ -46,67 +46,64 @@ defmodule AshHqWeb.Components.Search do
|
||||||
change_versions={@change_versions}
|
change_versions={@change_versions}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div id="search-body" class="h-full" :on-window-keydown="select-next" phx-key="ArrowDown">
|
||||||
id="search-body"
|
<div class="p-6 h-full grid gap-6 grid-rows-[max-content_auto_max-content]">
|
||||||
class="h-full px-6 my-6"
|
<button
|
||||||
:on-window-keydown="select-next"
|
id="close-search"
|
||||||
phx-key="ArrowDown"
|
class="absolute top-6 right-6 h-6 w-6 cursor-pointer z-10 hover:text-base-light-400"
|
||||||
>
|
:on-click={@close}
|
||||||
<div class="flex flex-col w-full sticky">
|
>
|
||||||
<div class="w-full flex flex-row justify-start top-0">
|
<Heroicons.Outline.XIcon class="h-6 w-6" />
|
||||||
<Heroicons.Outline.SearchIcon class="h-6 w-6 mr-4 ml-4" />
|
</button>
|
||||||
<div class="flex flex-row justify-between w-full pb-3 border-b border-base-light-600">
|
<div class="flex flex-col w-full sticky">
|
||||||
<Form for={:search} change="search" submit="go-to-doc" class="w-full">
|
<div class="w-full flex flex-row justify-start top-0">
|
||||||
<input
|
<Heroicons.Outline.SearchIcon class="h-6 w-6 mr-4" />
|
||||||
id="search-input"
|
<div class="flex flex-row justify-between w-full mr-10 border-b border-base-light-600">
|
||||||
name="search"
|
<Form for={:search} change="search" submit="go-to-doc" class="w-full">
|
||||||
value={@search}
|
<input
|
||||||
phx-debounce={300}
|
id="search-input"
|
||||||
class="text-lg dark:bg-base-dark-850 grow ring-0 outline-none w-full"
|
name="search"
|
||||||
/>
|
value={@search}
|
||||||
|
phx-debounce={300}
|
||||||
|
class="text-lg dark:bg-base-dark-850 grow ring-0 outline-none w-full"
|
||||||
|
/>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-10">
|
||||||
|
<Form for={:types} change={@change_types}>
|
||||||
|
<div class="flex flex-row space-x-8 flex-wrap mt-2 text-sm text-base-light-500 dark:text-base-dark-300">
|
||||||
|
<div>Search For:</div>
|
||||||
|
{#for type <- AshHq.Docs.Extensions.Search.Types.types()}
|
||||||
|
<div class="flex flex-row items-center">
|
||||||
|
<Checkbox
|
||||||
|
class="mr-2"
|
||||||
|
id={"#{type}-selected"}
|
||||||
|
value={type in @selected_types}
|
||||||
|
name={"types[#{type}]"}
|
||||||
|
/>
|
||||||
|
<label for={"#{type}-selected"}>
|
||||||
|
{type}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{/for}
|
||||||
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
<button id="close-search" class="mr-4 ml-4 h-6 w-6 hover:text-base-light-400" :on-click={@close}>
|
|
||||||
<Heroicons.Outline.XIcon class="h-6 w-6" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-2 pl-4">
|
<div class="grid overflow-auto">
|
||||||
<Form for={:types} change={@change_types}>
|
|
||||||
<div class="flex flex-row space-x-8 flex-wrap mt-4">
|
|
||||||
<div>Search For:</div>
|
|
||||||
{#for type <- AshHq.Docs.Extensions.Search.Types.types()}
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<Checkbox
|
|
||||||
class="mr-2"
|
|
||||||
id={"#{type}-selected"}
|
|
||||||
value={type in @selected_types}
|
|
||||||
name={"types[#{type}]"}
|
|
||||||
/>
|
|
||||||
<label for={"#{type}-selected"}>
|
|
||||||
{type}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
{/for}
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid h-[80%] mt-3">
|
|
||||||
<div class="pl-4 overflow-auto scroll-parent">
|
|
||||||
{render_items(assigns, @item_list)}
|
{render_items(assigns, @item_list)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex flex-row justify-start items-center relative bottom-0">
|
||||||
<div class="flex flex-row justify-start items-center relative bottom-0 mt-2">
|
<Heroicons.Outline.CollectionIcon class="w-6 h-6 mr-2" />
|
||||||
<div class="flex text-black dark:text-white font-light px-2">
|
<AshHqWeb.Components.VersionPills
|
||||||
Packages:
|
id="search-version-pills"
|
||||||
|
selected_versions={@selected_versions}
|
||||||
|
remove_version={@remove_version}
|
||||||
|
libraries={@libraries}
|
||||||
|
toggle={toggle_libraries()}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<AshHqWeb.Components.VersionPills
|
|
||||||
id="search-version-pills"
|
|
||||||
selected_versions={@selected_versions}
|
|
||||||
remove_version={@remove_version}
|
|
||||||
libraries={@libraries}
|
|
||||||
toggle={toggle_libraries()}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -116,54 +113,57 @@ defmodule AshHqWeb.Components.Search do
|
||||||
|
|
||||||
defp render_items(assigns, items) do
|
defp render_items(assigns, items) do
|
||||||
~F"""
|
~F"""
|
||||||
{#for item <- items}
|
<div class="divide-y">
|
||||||
<LivePatch
|
{#for item <- items}
|
||||||
class="block w-full text-left"
|
<LivePatch
|
||||||
to={DocRoutes.doc_link(item, @selected_versions)}
|
class="block w-full text-left border-base-light-300 dark:border-base-dark-600"
|
||||||
opts={id: "result-#{item.id}", "phx-click": @close}
|
to={DocRoutes.doc_link(item, @selected_versions)}
|
||||||
>
|
opts={id: "result-#{item.id}", "phx-click": @close}
|
||||||
<div class={
|
>
|
||||||
"rounded-lg mb-4 py-2 px-2 hover:bg-base-dark-300 dark:hover:bg-base-dark-700",
|
<div class={
|
||||||
"bg-base-light-400 dark:bg-base-dark-600": @selected_item.id == item.id,
|
"hover:bg-base-light-100 dark:hover:bg-base-dark-750 py-4",
|
||||||
"bg-base-light-200 dark:bg-base-dark-850": @selected_item.id != item.id
|
"bg-base-light-200 dark:bg-base-dark-700": @selected_item.id == item.id
|
||||||
}>
|
}>
|
||||||
<div class="flex justify-start items-center space-x-2 pb-2">
|
<div class="flex justify-start items-center space-x-2 pb-2 pl-2">
|
||||||
<div>
|
<div>
|
||||||
{render_item_type(assigns, item)}
|
{render_item_type(assigns, item)}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row flex-wrap">
|
<div class="flex flex-row flex-wrap items-center">
|
||||||
{#for {path_item, index} <- Enum.with_index(item_path(item))}
|
{#for {path_item, index} <- Enum.with_index(item_path(item))}
|
||||||
{#if index != 0}
|
{#if index != 0}
|
||||||
<Heroicons.Solid.ChevronRightIcon class="h-6 w-6" />
|
<Heroicons.Solid.ChevronRightIcon class="h-4 w-4 mt-1" />
|
||||||
{/if}
|
{/if}
|
||||||
<div>
|
<div>
|
||||||
{path_item}
|
{path_item}
|
||||||
|
</div>
|
||||||
|
{/for}
|
||||||
|
<Heroicons.Solid.ChevronRightIcon class="h-4 w-4 mt-1" />
|
||||||
|
<div class="font-bold">
|
||||||
|
{#if Map.get(item, :name_matches)}
|
||||||
|
<CalloutText text={item_name(item)} />
|
||||||
|
{#else}
|
||||||
|
{item_name(item)}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/for}
|
|
||||||
<Heroicons.Solid.ChevronRightIcon class="h-6 w-6" />
|
|
||||||
<div class="font-bold text-lg">
|
|
||||||
{#if Map.get(item, :name_matches)}
|
|
||||||
<CalloutText text={item_name(item)} />
|
|
||||||
{#else}
|
|
||||||
{item_name(item)}
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="text-base-light-700 dark:text-base-dark-400 ml-10">
|
||||||
|
{raw(item.search_headline)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-base-light-700 dark:text-base-dark-400">
|
</LivePatch>
|
||||||
{raw(item.search_headline)}
|
{/for}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</LivePatch>
|
|
||||||
{/for}
|
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
defp render_item_type(assigns, item) do
|
defp render_item_type(assigns, item) do
|
||||||
|
icon_classes = "h-4 w-4 flex-none mt-1 mx-1"
|
||||||
|
|
||||||
case item_type(item) do
|
case item_type(item) do
|
||||||
"Forum" ->
|
"Forum" ->
|
||||||
~F"""
|
~F"""
|
||||||
<Heroicons.Outline.UserGroupIcon class="h-4 w-4" />
|
<Heroicons.Outline.UserGroupIcon class={icon_classes} />
|
||||||
"""
|
"""
|
||||||
|
|
||||||
"Mix Task" ->
|
"Mix Task" ->
|
||||||
|
|
@ -174,7 +174,7 @@ defmodule AshHqWeb.Components.Search do
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke-width="1.5"
|
stroke-width="1.5"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
class="w-4 h-4"
|
class={icon_classes}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
|
|
@ -188,23 +188,23 @@ defmodule AshHqWeb.Components.Search do
|
||||||
case item.type do
|
case item.type do
|
||||||
type when type in [:function, :macro] ->
|
type when type in [:function, :macro] ->
|
||||||
~F"""
|
~F"""
|
||||||
<Heroicons.Outline.CodeIcon class="h-4 w-4" />
|
<Heroicons.Outline.CodeIcon class={icon_classes} />
|
||||||
"""
|
"""
|
||||||
|
|
||||||
:callback ->
|
:callback ->
|
||||||
~F"""
|
~F"""
|
||||||
<Heroicons.Outline.AtSymbolIcon class="h-4 w-4" />
|
<Heroicons.Outline.AtSymbolIcon class={icon_classes} />
|
||||||
"""
|
"""
|
||||||
|
|
||||||
:type ->
|
:type ->
|
||||||
~F"""
|
~F"""
|
||||||
<Heroicons.Outline.InformationCircleIcon class="h-4 w-4" />
|
<Heroicons.Outline.InformationCircleIcon class={icon_classes} />
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
"Module" ->
|
"Module" ->
|
||||||
~F"""
|
~F"""
|
||||||
<Heroicons.Outline.CodeIcon class="h-4 w-4" />
|
<Heroicons.Outline.CodeIcon class={icon_classes} />
|
||||||
"""
|
"""
|
||||||
|
|
||||||
type when type in ["Dsl", "Option"] ->
|
type when type in ["Dsl", "Option"] ->
|
||||||
|
|
@ -212,12 +212,12 @@ defmodule AshHqWeb.Components.Search do
|
||||||
|
|
||||||
"Guide" ->
|
"Guide" ->
|
||||||
~F"""
|
~F"""
|
||||||
<Heroicons.Outline.BookOpenIcon class="h-4 w-4" />
|
<Heroicons.Outline.BookOpenIcon class={icon_classes} />
|
||||||
"""
|
"""
|
||||||
|
|
||||||
_ ->
|
_ ->
|
||||||
~F"""
|
~F"""
|
||||||
<Heroicons.Outline.PuzzleIcon class="h-4 w-4" />
|
<Heroicons.Outline.PuzzleIcon class={icon_classes} />
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -84,7 +84,7 @@ defmodule AshHqWeb.Components.TreeView do
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.indent-guide {
|
.indent-guide {
|
||||||
@apply border-l pl-4 -ml-3 border-primary-light-600 border-opacity-30;
|
@apply border-l pl-4 -ml-3 border-primary-light-600 dark:border-primary-dark-400 border-opacity-30 dark:border-opacity-30;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<li class={@class, "pt-2": @collapsable, "indent-guide": @indent_guide}>
|
<li class={@class, "pt-2": @collapsable, "indent-guide": @indent_guide}>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ defmodule AshHqWeb.Components.VersionPills do
|
||||||
<div class="flex flex-row flex-wrap align-center items-center ml-2 justify-start gap-2 flex-grow">
|
<div class="flex flex-row flex-wrap align-center items-center ml-2 justify-start gap-2 flex-grow">
|
||||||
{#for library <- @libraries}
|
{#for library <- @libraries}
|
||||||
{#if @selected_versions[library.id] not in [nil, ""]}
|
{#if @selected_versions[library.id] not in [nil, ""]}
|
||||||
<div class="flex flex-row flex-wrap contents-center px-2 py-1 bg-primary-light-500 dark:bg-primary-light-400 hover:bg-primary-light-600 text-black text-xs font-medium rounded-full">
|
<div class="flex flex-row flex-wrap contents-center px-2 py-1 bg-primary-light-500 dark:bg-primary-dark-300 hover:bg-primary-light-600 hover:dark:bg-primary-dark-400 text-black text-xs font-medium rounded-full">
|
||||||
{library.name}{#if selected_version(library, @selected_versions[library.id]) != "latest"}
|
{library.name}{#if selected_version(library, @selected_versions[library.id]) != "latest"}
|
||||||
| {selected_version(library, @selected_versions[library.id])}
|
| {selected_version(library, @selected_versions[library.id])}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -62,13 +62,13 @@ defmodule AshHqWeb.Pages.Media do
|
||||||
<div class="text-xl mb-8">Example Projects</div>
|
<div class="text-xl mb-8">Example Projects</div>
|
||||||
<ul class="list-disc">
|
<ul class="list-disc">
|
||||||
<li class="mb-4">
|
<li class="mb-4">
|
||||||
<a class="hover:text-primary-light-400" href="https://github.com/ash-project/ash_hq">AshHq (this website)</a>
|
<a class="hover:text-primary-light-400 dark:hover:text-primary-dark-400" href="https://github.com/ash-project/ash_hq">AshHq (this website)</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-4">
|
<li class="mb-4">
|
||||||
<a class="hover:text-primary-light-400" href="https://github.com/lukegalea/openats">Open ATS</a>
|
<a class="hover:text-primary-light-400 dark:hover:text-primary-dark-400" href="https://github.com/lukegalea/openats">Open ATS</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="hover:text-primary-light-400" href="https://github.com/brettkolodny/todoish">Todoish</a>
|
<a class="hover:text-primary-light-400 dark:hover:text-primary-dark-400" href="https://github.com/brettkolodny/todoish">Todoish</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue