From cfbe16f2d0037b179624f692acd2276a8733e2fd Mon Sep 17 00:00:00 2001 From: Xe Iaso Date: Wed, 23 Apr 2025 08:07:53 -0400 Subject: [PATCH] feat(xess): move CSS color definitions to CSS variables (#339) Signed-off-by: Xe Iaso --- docs/docs/CHANGELOG.md | 1 + web/index.templ | 345 +++++++++++++++++++---------------------- web/index_templ.go | 68 ++++---- xess/xess.css | 111 +++++++++++-- 4 files changed, 288 insertions(+), 237 deletions(-) diff --git a/docs/docs/CHANGELOG.md b/docs/docs/CHANGELOG.md index 045c34d..c5a8484 100644 --- a/docs/docs/CHANGELOG.md +++ b/docs/docs/CHANGELOG.md @@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added documentation on how to use Anubis with Traefik in Docker - Improved error handling in some edge cases - Disable `generic-bot-catchall` rule because of its high false positive rate in real-world scenarios +- Moved all CSS inline to the Xess package, changed colors to be CSS variables - Set or append to `X-Forwarded-For` header unless the remote connects over a loopback address [#328](https://github.com/TecharoHQ/anubis/issues/328) ## v1.16.0 diff --git a/web/index.templ b/web/index.templ index 989d717..818c6a5 100644 --- a/web/index.templ +++ b/web/index.templ @@ -1,203 +1,180 @@ package web import ( -"github.com/TecharoHQ/anubis" -"github.com/TecharoHQ/anubis/xess" + "github.com/TecharoHQ/anubis" + "github.com/TecharoHQ/anubis/xess" ) templ base(title string, body templ.Component, challenge any, ogTags map[string]string) { - - - - { title } - - - - for key, value := range ogTags { - - } - - @templ.JSONScript("anubis_version", anubis.Version) - if challenge != nil { - @templ.JSONScript("anubis_challenge", challenge) - } - - - -
-
-

{ title }

-
- @body -
-
-

- Protected by Anubis from Techaro. Made with ❤️ in 🇨🇦. -

-

Mascot design by CELPHASE.

-
-
-
- - + + + + { title } + + + + for key, value := range ogTags { + + } + @templ.JSONScript("anubis_version", anubis.Version) + if challenge != nil { + @templ.JSONScript("anubis_challenge", challenge) + } + + +
+
+

{ title }

+
+ @body +
+
+

+ Protected by Anubis from Techaro. Made with ❤️ in 🇨🇦. +

+

Mascot design by CELPHASE.

+
+
+
+ + } templ index() { -
- + Loading...

- +
+
+
+
+ Why am I seeing this? +

+ You are seeing this because the administrator of this website has set up Anubis to protect the server against the scourge of + + AI companies + aggressively scraping websites + . This can and does cause downtime for the websites, which makes their + resources inaccessible for everyone. +

+

+ Anubis is a compromise. Anubis uses a Proof-of-Work + scheme in the vein of Hashcash, a proposed + proof-of-work scheme for reducing email spam. The idea is that at individual scales the additional load is + ignorable, but at mass scraper levels it adds up and makes scraping much more expensive. +

+

+ Ultimately, this is a hack whose real purpose is to give a "good enough" placeholder solution so that more + time can be spent on fingerprinting and identifying headless browsers (EG: via how they do font rendering) + so that the challenge proof of work page doesn't need to be presented to users that are much more likely to + be legitimate. +

+

+ Please note that Anubis requires the use of modern JavaScript features that plugins like JShelter will disable. Please disable JShelter or other such + plugins for this domain. +

+
+ +
+
} templ errorPage(message string, mail string) { -
- Sad AnubisTry again - if mail != "" { -

Go home or if you believe you should not be blocked, please contact the webmaster at - { mail } -

- } else { -

Go home

- } -
+
+ Sad AnubisTry again + if mail != "" { +

+ Go home or if you believe you should not be blocked, please contact the webmaster at + + { mail } + +

+ } else { +

Go home

+ } +
} templ bench() { -
- - - - - - - - - - - - - - -
TimeIters
-
- + + + + + + + + + + + + + + +
TimeIters
+
+ Loading...

- +
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
} diff --git a/web/index_templ.go b/web/index_templ.go index 0bc3cf2..def54ad 100644 --- a/web/index_templ.go +++ b/web/index_templ.go @@ -41,7 +41,7 @@ func base(title string, body templ.Component, challenge any, ogTags map[string]s var templ_7745c5c3_Var2 string templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 12, Col: 18} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 12, Col: 17} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2)) if templ_7745c5c3_Err != nil { @@ -54,7 +54,7 @@ func base(title string, body templ.Component, challenge any, ogTags map[string]s var templ_7745c5c3_Var3 string templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(xess.URL) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 13, Col: 42} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 13, Col: 41} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) if templ_7745c5c3_Err != nil { @@ -96,10 +96,6 @@ func base(title string, body templ.Component, challenge any, ogTags map[string]s return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "") - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } templ_7745c5c3_Err = templ.JSONScript("anubis_version", anubis.Version).Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err @@ -110,20 +106,20 @@ func base(title string, body templ.Component, challenge any, ogTags map[string]s return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var6 string templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(title) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 65, Col: 52} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 27, Col: 49} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -131,7 +127,7 @@ func base(title string, body templ.Component, challenge any, ogTags map[string]s if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -160,7 +156,7 @@ func index() templ.Component { templ_7745c5c3_Var7 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "

Loading...

Why am I seeing this?

You are seeing this because the administrator of this website has set up Anubis to protect the server against the scourge of AI companies aggressively scraping websites. This can and does cause downtime for the websites, which makes their resources inaccessible for everyone.

Anubis is a compromise. Anubis uses a Proof-of-Work scheme in the vein of Hashcash, a proposed proof-of-work scheme for reducing email spam. The idea is that at individual scales the additional load is ignorable, but at mass scraper levels it adds up and makes scraping much more expensive.

Ultimately, this is a hack whose real purpose is to give a \"good enough\" placeholder solution so that more time can be spent on fingerprinting and identifying headless browsers (EG: via how they do font rendering) so that the challenge proof of work page doesn't need to be presented to users that are much more likely to be legitimate.

Please note that Anubis requires the use of modern JavaScript features that plugins like JShelter will disable. Please disable JShelter or other such plugins for this domain.

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\">
Why am I seeing this?

You are seeing this because the administrator of this website has set up Anubis to protect the server against the scourge of AI companies aggressively scraping websites. This can and does cause downtime for the websites, which makes their resources inaccessible for everyone.

Anubis is a compromise. Anubis uses a Proof-of-Work scheme in the vein of Hashcash, a proposed proof-of-work scheme for reducing email spam. The idea is that at individual scales the additional load is ignorable, but at mass scraper levels it adds up and makes scraping much more expensive.

Ultimately, this is a hack whose real purpose is to give a \"good enough\" placeholder solution so that more time can be spent on fingerprinting and identifying headless browsers (EG: via how they do font rendering) so that the challenge proof of work page doesn't need to be presented to users that are much more likely to be legitimate.

Please note that Anubis requires the use of modern JavaScript features that plugins like JShelter will disable. Please disable JShelter or other such plugins for this domain.

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -231,38 +226,38 @@ func errorPage(message string, mail string) templ.Component { templ_7745c5c3_Var11 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "
\"Sad\"Sad

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\">

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var13 string templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(message) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 141, Col: 16} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 114, Col: 14} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, ".

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, ".

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } if mail != "" { - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "

Go home or if you believe you should not be blocked, please contact the webmaster at Go home or if you believe you should not be blocked, please contact the webmaster at ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\">") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var15 string templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(mail) if templ_7745c5c3_Err != nil { - return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 145, Col: 9} + return templ.Error{Err: templ_7745c5c3_Err, FileName: `index.templ`, Line: 120, Col: 11} } _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } } else { - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "

Go home

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "

Go home

") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -323,7 +318,7 @@ func bench() templ.Component { templ_7745c5c3_Var16 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "
TimeIters
Time AIters ATime BIters B
TimeIters
Time AIters ATime BIters B

Loading...

") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\">
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/xess/xess.css b/xess/xess.css index 86cbd42..c07143f 100644 --- a/xess/xess.css +++ b/xess/xess.css @@ -1,3 +1,28 @@ +:root { + --body-sans-font: Geist, sans-serif; + --body-preformatted-font: Iosevka Curly Iaso, monospace; + --body-title-font: Podkova, serif; + + --dark-background: #1d2021; + --dark-text: #f9f5d7; + --dark-text-selection: #d3869b; + --dark-preformatted-background: #3c3836; + --dark-link-foreground: #b16286; + --dark-link-background: #282828; + --dark-blockquote-border-left: 1px solid #bdae93; + + --light-background: #f9f5d7; + --light-text: #1d2021; + --light-text-selection: #d3869b; + --light-preformatted-background: #ebdbb2; + --light-link-foreground: #b16286; + --light-link-background: #fbf1c7; + --light-blockquote-border-left: 1px solid #655c54; + + --progress-bar-outline: #b16286 solid 4px; + --progress-bar-fill: #b16286; +} + @font-face { font-family: "Geist"; font-style: normal; @@ -22,33 +47,83 @@ } main { - font-family: Geist, sans-serif; + font-family: var(--body-sans-font); max-width: 50rem; padding: 2rem; margin: auto; } ::selection { - background: #d3869b; + background: var(--dark-text-selection); } body { - background: #1d2021; - color: #f9f5d7; + background: var(--dark-background); + color: var(--dark-text); +} + +body, +html { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + margin-left: auto; + margin-right: auto; +} + +.centered-div { + text-align: center; +} + +#status { + font-variant-numeric: tabular-nums; +} + +.centered-div { + text-align: center; +} + +#status { + font-variant-numeric: tabular-nums; +} + +#progress { + display: none; + width: min(20rem, 90%); + height: 2rem; + border-radius: 1rem; + overflow: hidden; + margin: 1rem 0 2rem; + outline-offset: 2px; + outline: var(--progress-bar-outline); +} + +.bar-inner { + background-color: var(--progress-bar-fill); + height: 100%; + width: 0; + transition: width 0.25s ease-in; +} + +@media (prefers-reduced-motion: no-preference) { + .bar-inner { + transition: width 0.25s ease-in; + } } pre { - background-color: #3c3836; + background-color: var(--dark-preformatted-background); padding: 1em; border: 0; - font-family: Iosevka Curly Iaso, monospace; + font-family: var(--body-preformatted-font); } a, a:active, a:visited { - color: #b16286; - background-color: #282828; + color: var(--dark-link-foreground); + background-color: var(--dark-link-background); } h1, @@ -57,11 +132,11 @@ h3, h4, h5 { margin-bottom: 0.1rem; - font-family: Podkova, serif; + font-family: var(--body-title-font); } blockquote { - border-left: 1px solid #bdae93; + border-left: var(--dark-blockquote-border-left); margin: 0.5em 10px; padding: 0.5em 10px; } @@ -71,13 +146,17 @@ footer { } @media (prefers-color-scheme: light) { + ::selection { + background: var(--light-text-selection); + } + body { - background: #f9f5d7; - color: #1d2021; + background: var(--light-background); + color: var(--light-text); } pre { - background-color: #ebdbb2; + background-color: var(--light-preformatted-background); padding: 1em; border: 0; } @@ -85,8 +164,8 @@ footer { a, a:active, a:visited { - color: #b16286; - background-color: #fbf1c7; + color: var(--light-link-foreground); + background-color: var(--light-link-background); } h1, @@ -98,7 +177,7 @@ footer { } blockquote { - border-left: 1px solid #655c54; + border-left: var(--light-blockquote-border-left); margin: 0.5em 10px; padding: 0.5em 10px; }