From f6453245edd4bb6a3bd5bd0374044ec689629241 Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Tue, 11 Jul 2023 14:37:58 -0500 Subject: simplify theme selection using data attributes --- data/style.scss | 50 +++++++++++++++++--------------------------------- src/renderer.rs | 25 ++++++++++++------------- 2 files changed, 29 insertions(+), 46 deletions(-) diff --git a/data/style.scss b/data/style.scss index 10c258d..36793e3 100644 --- a/data/style.scss +++ b/data/style.scss @@ -215,16 +215,16 @@ nav .theme li a:hover { color: var(--switch_theme_active); } +body:not([data-theme]) nav .theme li[data-theme="default"] a { + @extend %active_theme_link; +} + @each $theme in $themes { - body.theme_#{$theme} nav .theme li.theme_#{$theme} a { + body[data-theme="#{$theme}"] nav .theme li[data-theme="#{$theme}"] a { @extend %active_theme_link; } } -#{body_not_themed()} nav .theme li.theme_default a { - @extend %active_theme_link; -} - p { margin: 0; padding: 0; @@ -779,39 +779,23 @@ th span.active span { } } +body:not([data-theme]) { + @include theme_squirrel(); +} + +@media (prefers-color-scheme: dark) { + body:not([data-theme]) { + @include theme_monokai(); + } +} + // For each of the themes, define a placeholder selector containing // the themes variables. Then add selectors for body when the theme: // - has explicitly been activated by .theme_* // - is set as default theme by .default_theme_* and no other theme is active // to the placeholder selector list by means of @extend. @each $theme in $themes { - %theme_#{$theme} { + body[data-theme="#{$theme}"] { @include theme($theme); } - - body.theme_#{$theme} { - @extend %theme_#{$theme}; - } - - #{body_not_themed()}.default_theme_#{$theme} { - @extend %theme_#{$theme}; - } -} - -// Do the same thing again for the dark mode default. -// Since the media query doesn't affect specificity, all dark mode -// defaults need to come after all light mode defaults to override -// them when dark mode is enabled. -@each $theme in $themes { - @media (prefers-color-scheme: dark) { - %theme_dark_#{$theme} { - @include theme($theme); - } - } - - // this extension will still end up inside the media query, - // because that is where %theme_dark_* was defined - #{body_not_themed()}.default_theme_dark_#{$theme} { - @extend %theme_dark_#{$theme}; - } -} +} \ No newline at end of file diff --git a/src/renderer.rs b/src/renderer.rs index 1257a67..2e1ff2e 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -56,26 +56,24 @@ pub fn page( (page_header(&title_path, conf.file_upload, &conf.favicon_route, &conf.css_route)) body #drop-container - .(format!("default_theme_{}", conf.default_color_scheme)) - .(format!("default_theme_dark_{}", conf.default_color_scheme_dark)) { + // .(format!("default_theme_{}", conf.default_color_scheme)) + // .(format!("default_theme_dark_{}", conf.default_color_scheme_dark)) { + { (PreEscaped(r#" "#)) -- cgit v1.2.3 From b369a1a9ff3c60b67a7598d4486253c428e3a4da Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Wed, 12 Jul 2023 12:46:51 -0500 Subject: Separate color schemes into separate files --- build.rs | 31 +++++- data/style.scss | 242 +++------------------------------------------ data/themes/archlinux.scss | 46 +++++++++ data/themes/monokai.scss | 46 +++++++++ data/themes/squirrel.scss | 46 +++++++++ data/themes/zenburn.scss | 46 +++++++++ src/main.rs | 17 +++- src/renderer.rs | 15 +++ 8 files changed, 251 insertions(+), 238 deletions(-) create mode 100644 data/themes/archlinux.scss create mode 100644 data/themes/monokai.scss create mode 100644 data/themes/squirrel.scss create mode 100644 data/themes/zenburn.scss diff --git a/build.rs b/build.rs index e65b294..75cc3e2 100644 --- a/build.rs +++ b/build.rs @@ -2,18 +2,39 @@ use std::env; use std::fs; use std::path::Path; +const THEMES: &[&str] = &["squirrel", "archlinux", "zenburn", "monokai"]; + fn main() { let out_dir = env::var_os("OUT_DIR").expect("OUT_DIR env var missing"); + let dest_path = Path::new(&out_dir).join("style.css"); fs::write( dest_path, - grass::from_string( - include_str!("data/style.scss").to_string(), - &grass::Options::default(), - ) - .expect("scss failed to compile"), + grass::from_path("data/style.scss", &grass::Options::default()) + .expect("scss failed to compile"), ) .expect("failed to write css file"); + for theme in THEMES.iter() { + let dest_path = Path::new(&out_dir).join(format!("theme-{}.css", theme)); + fs::write( + dest_path, + grass::from_string( + format!( + r#" + @use "data/themes/{theme}"; + body:not([data-theme]) {{ + @include {theme}.theme(); + }} + "#, + theme = theme + ), + &grass::Options::default(), + ) + .expect("scss failed to compile"), + ) + .expect("failed to write css file"); + } + println!("cargo:rerun-if-changed=data/style.scss"); } diff --git a/data/style.scss b/data/style.scss index 36793e3..6276708 100644 --- a/data/style.scss +++ b/data/style.scss @@ -1,22 +1,12 @@ @use "sass:selector"; +@use "themes/archlinux"; +@use "themes/monokai"; +@use "themes/squirrel"; +@use "themes/zenburn"; // theme colors can be found at the bottom $themes: squirrel, archlinux, monokai, zenburn; -// This returns a selector that matches body when no theme class is set, -// in which case the default light/dark mode themes should be used. -// The result of this function can be used with #{...} interpolation -// in a selector list. -@function body_not_themed() { - $s: unquote("body"); - - @each $t in $themes { - $s: selector.append($s, unquote(":not(.theme_#{$t})")); - } - - @return $s; -} - html { font-smoothing: antialiased; text-rendering: optimizeLegibility; @@ -219,12 +209,6 @@ body:not([data-theme]) nav .theme li[data-theme="default"] a { @extend %active_theme_link; } -@each $theme in $themes { - body[data-theme="#{$theme}"] nav .theme li[data-theme="#{$theme}"] a { - @extend %active_theme_link; - } -} - p { margin: 0; padding: 0; @@ -567,211 +551,21 @@ th span.active span { } } - - -@mixin theme_squirrel { - --background: #ffffff; - --text_color: #323232; - --directory_link_color: #d02474; - --directory_link_color_visited: #9b1985; - --file_link_color: #0086b3; - --file_link_color_visited: #974ec2; - --symlink_color: #ADD8E6; - --table_background: #ffffff; - --table_text_color: #323232; - --table_header_background: #323232; - --table_header_text_color: #f5f5f5; - --table_header_active_color: #ffffff; - --active_row_color: #f6f8fa; - --odd_row_background: #fbfbfb; - --even_row_background: #f2f2f2; - --root_link_color: #323232; - --download_button_background: #d02474; - --download_button_background_hover: #f52d8a; - --download_button_link_color: #ffffff; - --download_button_link_color_hover: #ffffff; - --back_button_background: #d02474; - --back_button_background_hover: #d02474; - --back_button_link_color: #ffffff; - --back_button_link_color_hover: #ffffff; - --date_text_color: #797979; - --at_color: #797979; - --switch_theme_background: #323232; - --switch_theme_link_color: #f5f5f5; - --switch_theme_active: #d02474; - --switch_theme_border: #49483e; - --change_theme_link_color: #f5f5f5; - --change_theme_link_color_hover: #f5f5f5; - --upload_text_color: #323232; - --upload_form_border_color: #d2d2d2; - --upload_form_background: #f2f2f2; - --upload_button_background: #d02474; - --upload_button_text_color: #ffffff; - --drag_background: #3333338f; - --drag_border_color: #ffffff; - --drag_text_color: #ffffff; - --size_background_color: #323232; - --size_text_color: #ffffff; - --error_color: #d02424; - --footer_color: #898989; -} - -@mixin theme_archlinux { - --background: #383c4a; - --text_color: #fefefe; - --directory_link_color: #03a9f4; - --directory_link_color_visited: #0388f4; - --file_link_color: #ea95ff; - --file_link_color_visited: #a595ff; - --symlink_color: #66d9ef; - --table_background: #353946; - --table_text_color: #eeeeee; - --table_header_background: #5294e2; - --table_header_text_color: #eeeeee; - --table_header_active_color: #ffffff; - --active_row_color: #5194e259; - --odd_row_background: #404552; - --even_row_background: #4b5162; - --root_link_color: #abb2bb; - --download_button_background: #ea95ff; - --download_button_background_hover: #eea7ff; - --download_button_link_color: #ffffff; - --download_button_link_color_hover: #ffffff; - --back_button_background: #ea95ff; - --back_button_background_hover: #ea95ff; - --back_button_link_color: #ffffff; - --back_button_link_color_hover: #ffffff; - --date_text_color: #9ebbdc; - --at_color: #9ebbdc; - --switch_theme_background: #4b5162; - --switch_theme_link_color: #fefefe; - --switch_theme_active: #ea95ff; - --switch_theme_border: #6a728a; - --change_theme_link_color: #fefefe; - --change_theme_link_color_hover: #fefefe; - --upload_text_color: #fefefe; - --upload_form_border_color: #353946; - --upload_form_background: #4b5162; - --upload_button_background: #ea95ff; - --upload_button_text_color: #ffffff; - --drag_background: #3333338f; - --drag_border_color: #fefefe; - --drag_text_color: #fefefe; - --size_background_color: #5294e2; - --size_text_color: #fefefe; - --error_color: #e44b4b; - --footer_color: #8eabcc; -} - -@mixin theme_zenburn { - --background: #3f3f3f; - --text_color: #efefef; - --directory_link_color: #f0dfaf; - --directory_link_color_visited: #ebc390; - --file_link_color: #87d6d5; - --file_link_color_visited: #a7b9ec; - --symlink_color: #11a8cd; - --table_background: #4a4949; - --table_text_color: #efefef; - --table_header_background: #7f9f7f; - --table_header_text_color: #efefef; - --table_header_active_color: #efef8f; - --active_row_color: #7e9f7f9c; - --odd_row_background: #777777; - --even_row_background: #5a5a5a; - --root_link_color: #dca3a3; - --download_button_background: #cc9393; - --download_button_background_hover: #dca3a3; - --download_button_link_color: #efefef; - --download_button_link_color_hover: #efefef; - --back_button_background: #cc9393; - --back_button_background_hover: #cc9393; - --back_button_link_color: #efefef; - --back_button_link_color_hover: #efefef; - --date_text_color: #cfbfaf; - --at_color: #cfbfaf; - --switch_theme_background: #4a4949; - --switch_theme_link_color: #efefef; - --switch_theme_active: #efef8f; - --switch_theme_border: #5a5a5a; - --change_theme_link_color: #efefef; - --change_theme_link_color_hover: #efefef; - --upload_text_color: #efefef; - --upload_form_border_color: #4a4949; - --upload_form_background: #777777; - --upload_button_background: #cc9393; - --upload_button_text_color: #efefef; - --drag_background: #3333338f; - --drag_border_color: #efefef; - --drag_text_color: #efefef; - --size_background_color: #7f9f7f; - --size_text_color: #efefef; - --error_color: #d06565; - --footer_color: #bfaf9f; -} - -@mixin theme_monokai { - --background: #272822; - --text_color: #f8f8f2; - --directory_link_color: #f92672; - --directory_link_color_visited: #bc39a7; - --file_link_color: #a6e22e; - --file_link_color_visited: #4cb936; - --symlink_color: #29b8db; - --table_background: #3b3a32; - --table_text_color: #f8f8f0; - --table_header_background: #75715e; - --table_header_text_color: #f8f8f2; - --table_header_active_color: #e6db74; - --active_row_color: #ae81fe3d; - --odd_row_background: #3e3d32; - --even_row_background: #49483e; - --root_link_color: #66d9ef; - --download_button_background: #ae81ff; - --download_button_background_hover: #c6a6ff; - --download_button_link_color: #f8f8f0; - --download_button_link_color_hover: #f8f8f0; - --back_button_background: #ae81ff; - --back_button_background_hover: #ae81ff; - --back_button_link_color: #f8f8f0; - --back_button_link_color_hover: #f8f8f0; - --date_text_color: #66d9ef; - --at_color: #66d9ef; - --switch_theme_background: #3b3a32; - --switch_theme_link_color: #f8f8f2; - --switch_theme_active: #a6e22e; - --switch_theme_border: #49483e; - --change_theme_link_color: #f8f8f2; - --change_theme_link_color_hover: #f8f8f2; - --upload_text_color: #f8f8f2; - --upload_form_border_color: #3b3a32; - --upload_form_background: #49483e; - --upload_button_background: #ae81ff; - --upload_button_text_color: #f8f8f0; - --drag_background: #3333338f; - --drag_border_color: #f8f8f2; - --drag_text_color: #f8f8f2; - --size_background_color: #75715e; - --size_text_color: #f8f8f2; - --error_color: #d02929; - --footer_color: #56c9df; -} - @mixin theme($name) { @if $name == squirrel { - @include theme_squirrel(); + @include squirrel.theme(); } @else if $name == archlinux { - @include theme_archlinux(); + @include archlinux.theme(); } @else if $name == monokai { - @include theme_monokai(); + @include monokai.theme(); } @else if $name == zenburn { - @include theme_zenburn(); + @include zenburn.theme(); } @else { @@ -779,23 +573,11 @@ th span.active span { } } -body:not([data-theme]) { - @include theme_squirrel(); -} - -@media (prefers-color-scheme: dark) { - body:not([data-theme]) { - @include theme_monokai(); - } -} - -// For each of the themes, define a placeholder selector containing -// the themes variables. Then add selectors for body when the theme: -// - has explicitly been activated by .theme_* -// - is set as default theme by .default_theme_* and no other theme is active -// to the placeholder selector list by means of @extend. @each $theme in $themes { body[data-theme="#{$theme}"] { @include theme($theme); + nav .theme li[data-theme="#{$theme}"] a { + @extend %active_theme_link; + } } -} \ No newline at end of file +} diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss new file mode 100644 index 0000000..f0504ed --- /dev/null +++ b/data/themes/archlinux.scss @@ -0,0 +1,46 @@ +@mixin theme { + --background: #383c4a; + --text_color: #fefefe; + --directory_link_color: #03a9f4; + --directory_link_color_visited: #0388f4; + --file_link_color: #ea95ff; + --file_link_color_visited: #a595ff; + --symlink_color: #66d9ef; + --table_background: #353946; + --table_text_color: #eeeeee; + --table_header_background: #5294e2; + --table_header_text_color: #eeeeee; + --table_header_active_color: #ffffff; + --active_row_color: #5194e259; + --odd_row_background: #404552; + --even_row_background: #4b5162; + --root_link_color: #abb2bb; + --download_button_background: #ea95ff; + --download_button_background_hover: #eea7ff; + --download_button_link_color: #ffffff; + --download_button_link_color_hover: #ffffff; + --back_button_background: #ea95ff; + --back_button_background_hover: #ea95ff; + --back_button_link_color: #ffffff; + --back_button_link_color_hover: #ffffff; + --date_text_color: #9ebbdc; + --at_color: #9ebbdc; + --switch_theme_background: #4b5162; + --switch_theme_link_color: #fefefe; + --switch_theme_active: #ea95ff; + --switch_theme_border: #6a728a; + --change_theme_link_color: #fefefe; + --change_theme_link_color_hover: #fefefe; + --upload_text_color: #fefefe; + --upload_form_border_color: #353946; + --upload_form_background: #4b5162; + --upload_button_background: #ea95ff; + --upload_button_text_color: #ffffff; + --drag_background: #3333338f; + --drag_border_color: #fefefe; + --drag_text_color: #fefefe; + --size_background_color: #5294e2; + --size_text_color: #fefefe; + --error_color: #e44b4b; + --footer_color: #8eabcc; +} diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss new file mode 100644 index 0000000..b477f2d --- /dev/null +++ b/data/themes/monokai.scss @@ -0,0 +1,46 @@ +@mixin theme { + --background: #272822; + --text_color: #f8f8f2; + --directory_link_color: #f92672; + --directory_link_color_visited: #bc39a7; + --file_link_color: #a6e22e; + --file_link_color_visited: #4cb936; + --symlink_color: #29b8db; + --table_background: #3b3a32; + --table_text_color: #f8f8f0; + --table_header_background: #75715e; + --table_header_text_color: #f8f8f2; + --table_header_active_color: #e6db74; + --active_row_color: #ae81fe3d; + --odd_row_background: #3e3d32; + --even_row_background: #49483e; + --root_link_color: #66d9ef; + --download_button_background: #ae81ff; + --download_button_background_hover: #c6a6ff; + --download_button_link_color: #f8f8f0; + --download_button_link_color_hover: #f8f8f0; + --back_button_background: #ae81ff; + --back_button_background_hover: #ae81ff; + --back_button_link_color: #f8f8f0; + --back_button_link_color_hover: #f8f8f0; + --date_text_color: #66d9ef; + --at_color: #66d9ef; + --switch_theme_background: #3b3a32; + --switch_theme_link_color: #f8f8f2; + --switch_theme_active: #a6e22e; + --switch_theme_border: #49483e; + --change_theme_link_color: #f8f8f2; + --change_theme_link_color_hover: #f8f8f2; + --upload_text_color: #f8f8f2; + --upload_form_border_color: #3b3a32; + --upload_form_background: #49483e; + --upload_button_background: #ae81ff; + --upload_button_text_color: #f8f8f0; + --drag_background: #3333338f; + --drag_border_color: #f8f8f2; + --drag_text_color: #f8f8f2; + --size_background_color: #75715e; + --size_text_color: #f8f8f2; + --error_color: #d02929; + --footer_color: #56c9df; +} diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss new file mode 100644 index 0000000..65aea8b --- /dev/null +++ b/data/themes/squirrel.scss @@ -0,0 +1,46 @@ +@mixin theme { + --background: #ffffff; + --text_color: #323232; + --directory_link_color: #d02474; + --directory_link_color_visited: #9b1985; + --file_link_color: #0086b3; + --file_link_color_visited: #974ec2; + --symlink_color: #ADD8E6; + --table_background: #ffffff; + --table_text_color: #323232; + --table_header_background: #323232; + --table_header_text_color: #f5f5f5; + --table_header_active_color: #ffffff; + --active_row_color: #f6f8fa; + --odd_row_background: #fbfbfb; + --even_row_background: #f2f2f2; + --root_link_color: #323232; + --download_button_background: #d02474; + --download_button_background_hover: #f52d8a; + --download_button_link_color: #ffffff; + --download_button_link_color_hover: #ffffff; + --back_button_background: #d02474; + --back_button_background_hover: #d02474; + --back_button_link_color: #ffffff; + --back_button_link_color_hover: #ffffff; + --date_text_color: #797979; + --at_color: #797979; + --switch_theme_background: #323232; + --switch_theme_link_color: #f5f5f5; + --switch_theme_active: #d02474; + --switch_theme_border: #49483e; + --change_theme_link_color: #f5f5f5; + --change_theme_link_color_hover: #f5f5f5; + --upload_text_color: #323232; + --upload_form_border_color: #d2d2d2; + --upload_form_background: #f2f2f2; + --upload_button_background: #d02474; + --upload_button_text_color: #ffffff; + --drag_background: #3333338f; + --drag_border_color: #ffffff; + --drag_text_color: #ffffff; + --size_background_color: #323232; + --size_text_color: #ffffff; + --error_color: #d02424; + --footer_color: #898989; +} diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss new file mode 100644 index 0000000..5c64892 --- /dev/null +++ b/data/themes/zenburn.scss @@ -0,0 +1,46 @@ +@mixin theme { + --background: #3f3f3f; + --text_color: #efefef; + --directory_link_color: #f0dfaf; + --directory_link_color_visited: #ebc390; + --file_link_color: #87d6d5; + --file_link_color_visited: #a7b9ec; + --symlink_color: #11a8cd; + --table_background: #4a4949; + --table_text_color: #efefef; + --table_header_background: #7f9f7f; + --table_header_text_color: #efefef; + --table_header_active_color: #efef8f; + --active_row_color: #7e9f7f9c; + --odd_row_background: #777777; + --even_row_background: #5a5a5a; + --root_link_color: #dca3a3; + --download_button_background: #cc9393; + --download_button_background_hover: #dca3a3; + --download_button_link_color: #efefef; + --download_button_link_color_hover: #efefef; + --back_button_background: #cc9393; + --back_button_background_hover: #cc9393; + --back_button_link_color: #efefef; + --back_button_link_color_hover: #efefef; + --date_text_color: #cfbfaf; + --at_color: #cfbfaf; + --switch_theme_background: #4a4949; + --switch_theme_link_color: #efefef; + --switch_theme_active: #efef8f; + --switch_theme_border: #5a5a5a; + --change_theme_link_color: #efefef; + --change_theme_link_color_hover: #efefef; + --upload_text_color: #efefef; + --upload_form_border_color: #4a4949; + --upload_form_background: #777777; + --upload_button_background: #cc9393; + --upload_button_text_color: #efefef; + --drag_background: #3333338f; + --drag_border_color: #efefef; + --drag_text_color: #efefef; + --size_background_color: #7f9f7f; + --size_text_color: #efefef; + --error_color: #d06565; + --footer_color: #bfaf9f; +} diff --git a/src/main.rs b/src/main.rs index 2f81baa..33b0699 100644 --- a/src/main.rs +++ b/src/main.rs @@ -28,6 +28,8 @@ mod renderer; use crate::config::MiniserveConfig; use crate::errors::ContextualError; +static STYLESHEET: &str = include_str!(concat!(env!("OUT_DIR"), "/style.css")); + fn main() -> Result<()> { let args = args::CliArgs::parse(); @@ -181,10 +183,20 @@ async fn run(miniserve_config: MiniserveConfig) -> Result<(), ContextualError> { .map(|sock| sock.to_string().green().bold().to_string()) .collect::>(); + let stylesheet = web::Data::new( + [ + STYLESHEET, + inside_config.default_color_scheme.css(), + inside_config.default_color_scheme_dark.css_dark().as_str(), + ] + .join("\n"), + ); + let srv = actix_web::HttpServer::new(move || { App::new() .wrap(configure_header(&inside_config.clone())) .app_data(inside_config.clone()) + .app_data(stylesheet.clone()) .wrap_fn(errors::error_page_middleware) .wrap(middleware::Logger::default()) .route(&inside_config.favicon_route, web::get().to(favicon)) @@ -345,9 +357,8 @@ async fn favicon() -> impl Responder { .body(logo) } -async fn css() -> impl Responder { - let css = include_str!(concat!(env!("OUT_DIR"), "/style.css")); +async fn css(stylesheet: web::Data) -> impl Responder { HttpResponse::Ok() .insert_header(ContentType(mime::TEXT_CSS)) - .body(css) + .body(stylesheet.to_string()) } diff --git a/src/renderer.rs b/src/renderer.rs index 2e1ff2e..2de95c8 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -346,6 +346,21 @@ pub enum ThemeSlug { Monokai, } +impl ThemeSlug { + pub fn css(&self) -> &str { + match self { + ThemeSlug::Squirrel => include_str!(concat!(env!("OUT_DIR"), "/theme-squirrel.css")), + ThemeSlug::Archlinux => include_str!(concat!(env!("OUT_DIR"), "/theme-archlinux.css")), + ThemeSlug::Zenburn => include_str!(concat!(env!("OUT_DIR"), "/theme-zenburn.css")), + ThemeSlug::Monokai => include_str!(concat!(env!("OUT_DIR"), "/theme-monokai.css")), + } + } + + pub fn css_dark(&self) -> String { + format!("@media (prefers-color-scheme: dark) {{\n{}}}", self.css()) + } +} + /// Partial: qr code spoiler fn qr_spoiler(show_qrcode: bool, content: &Uri) -> Markup { html! { -- cgit v1.2.3 From 142cd6e26011fcdb208e24dce7c4781ad5e812d4 Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Thu, 20 Jul 2023 08:52:25 -0500 Subject: remove commented code --- src/renderer.rs | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/renderer.rs b/src/renderer.rs index 2de95c8..29418da 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -56,8 +56,6 @@ pub fn page( (page_header(&title_path, conf.file_upload, &conf.favicon_route, &conf.css_route)) body #drop-container - // .(format!("default_theme_{}", conf.default_color_scheme)) - // .(format!("default_theme_dark_{}", conf.default_color_scheme_dark)) { { (PreEscaped(r#" -- cgit v1.2.3 From e84ca11eab6636904a42636455ea2cbe239fd1f4 Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Thu, 20 Jul 2023 19:14:15 -0500 Subject: use grass include macro; remove build.rs --- Cargo.lock | 22 ++++++++++++++++++---- Cargo.toml | 4 +--- build.rs | 40 ---------------------------------------- data/style.scss | 9 ++++----- data/themes/archlinux.scss | 8 ++++++++ data/themes/monokai.scss | 8 ++++++++ data/themes/squirrel.scss | 8 ++++++++ data/themes/zenburn.scss | 8 ++++++++ src/main.rs | 2 +- src/renderer.rs | 8 ++++---- 10 files changed, 60 insertions(+), 57 deletions(-) delete mode 100644 build.rs diff --git a/Cargo.lock b/Cargo.lock index a7f3c53..adc580b 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -1102,24 +1102,27 @@ dependencies = [ [[package]] name = "grass" -version = "0.12.4" +version = "0.13.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "85cc4b64880a2264a41f9eab431780e72a68a6c88b9bddef361ba638812d572e" +checksum = "7746cd9bf09f9bb7d98638774a70642000356f543898d9a352cd043f82744528" dependencies = [ + "clap", "grass_compiler", + "include_sass", ] [[package]] name = "grass_compiler" -version = "0.12.4" +version = "0.13.0" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "8e4feeef87d958eebd4d55431040768b93a5b088202198e0b203adc3c1d468c6" +checksum = "187adfc0b34289c7f8f3819453ce9da3177c3d73f40ac74bb17faba578813d45" dependencies = [ "codemap", "indexmap", "lasso", "once_cell", "phf", + "rand", ] [[package]] @@ -1326,6 +1329,17 @@ dependencies = [ "winapi-util", ] +[[package]] +name = "include_sass" +version = "0.13.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8a09c0170cacc99c494307c6482e81653a8fb767c605ee7cf8febd53d9e72ed6" +dependencies = [ + "grass_compiler", + "quote", + "syn 1.0.109", +] + [[package]] name = "indexmap" version = "1.9.3" diff --git a/Cargo.toml b/Cargo.toml index 4e5d51e..2128ac8 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -35,6 +35,7 @@ colored = "2" comrak = { version = "0.18", default-features = false } fast_qr = { version = "0.9", features = ["svg"] } futures = "0.3" +grass = { version = "0.13", features = ["macro"] } hex = "0.4" http = "0.2" httparse = "1" @@ -80,6 +81,3 @@ url = "2" [target.'cfg(not(windows))'.dev-dependencies] # fake_tty does not support Windows for now fake-tty = "0.3.1" - -[build-dependencies] -grass = { version = "0.12", default-features = false } diff --git a/build.rs b/build.rs deleted file mode 100644 index 75cc3e2..0000000 --- a/build.rs +++ /dev/null @@ -1,40 +0,0 @@ -use std::env; -use std::fs; -use std::path::Path; - -const THEMES: &[&str] = &["squirrel", "archlinux", "zenburn", "monokai"]; - -fn main() { - let out_dir = env::var_os("OUT_DIR").expect("OUT_DIR env var missing"); - - let dest_path = Path::new(&out_dir).join("style.css"); - fs::write( - dest_path, - grass::from_path("data/style.scss", &grass::Options::default()) - .expect("scss failed to compile"), - ) - .expect("failed to write css file"); - - for theme in THEMES.iter() { - let dest_path = Path::new(&out_dir).join(format!("theme-{}.css", theme)); - fs::write( - dest_path, - grass::from_string( - format!( - r#" - @use "data/themes/{theme}"; - body:not([data-theme]) {{ - @include {theme}.theme(); - }} - "#, - theme = theme - ), - &grass::Options::default(), - ) - .expect("scss failed to compile"), - ) - .expect("failed to write css file"); - } - - println!("cargo:rerun-if-changed=data/style.scss"); -} diff --git a/data/style.scss b/data/style.scss index 6276708..909dc6f 100644 --- a/data/style.scss +++ b/data/style.scss @@ -1,8 +1,7 @@ -@use "sass:selector"; -@use "themes/archlinux"; -@use "themes/monokai"; -@use "themes/squirrel"; -@use "themes/zenburn"; +@use "themes/archlinux" with ($generate_default: false); +@use "themes/monokai" with ($generate_default: false); +@use "themes/squirrel" with ($generate_default: false); +@use "themes/zenburn" with ($generate_default: false); // theme colors can be found at the bottom $themes: squirrel, archlinux, monokai, zenburn; diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss index f0504ed..f95b8bb 100644 --- a/data/themes/archlinux.scss +++ b/data/themes/archlinux.scss @@ -1,3 +1,5 @@ +$generate_default: true !default; + @mixin theme { --background: #383c4a; --text_color: #fefefe; @@ -43,4 +45,10 @@ --size_text_color: #fefefe; --error_color: #e44b4b; --footer_color: #8eabcc; +}; + +@if $generate_default { + body { + @include theme; + } } diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss index b477f2d..4a47794 100644 --- a/data/themes/monokai.scss +++ b/data/themes/monokai.scss @@ -1,3 +1,5 @@ +$generate_default: true !default; + @mixin theme { --background: #272822; --text_color: #f8f8f2; @@ -43,4 +45,10 @@ --size_text_color: #f8f8f2; --error_color: #d02929; --footer_color: #56c9df; +}; + +@if $generate_default { + body { + @include theme; + } } diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss index 65aea8b..9eb572e 100644 --- a/data/themes/squirrel.scss +++ b/data/themes/squirrel.scss @@ -1,3 +1,5 @@ +$generate_default: true !default; + @mixin theme { --background: #ffffff; --text_color: #323232; @@ -43,4 +45,10 @@ --size_text_color: #ffffff; --error_color: #d02424; --footer_color: #898989; +}; + +@if $generate_default { + body { + @include theme; + } } diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss index 5c64892..9eb4d11 100644 --- a/data/themes/zenburn.scss +++ b/data/themes/zenburn.scss @@ -1,3 +1,5 @@ +$generate_default: true !default; + @mixin theme { --background: #3f3f3f; --text_color: #efefef; @@ -43,4 +45,10 @@ --size_text_color: #efefef; --error_color: #d06565; --footer_color: #bfaf9f; +}; + +@if $generate_default { + body { + @include theme; + } } diff --git a/src/main.rs b/src/main.rs index 33b0699..851f9ab 100644 --- a/src/main.rs +++ b/src/main.rs @@ -28,7 +28,7 @@ mod renderer; use crate::config::MiniserveConfig; use crate::errors::ContextualError; -static STYLESHEET: &str = include_str!(concat!(env!("OUT_DIR"), "/style.css")); +static STYLESHEET: &str = grass::include!("data/style.scss"); fn main() -> Result<()> { let args = args::CliArgs::parse(); diff --git a/src/renderer.rs b/src/renderer.rs index 29418da..946089d 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -347,10 +347,10 @@ pub enum ThemeSlug { impl ThemeSlug { pub fn css(&self) -> &str { match self { - ThemeSlug::Squirrel => include_str!(concat!(env!("OUT_DIR"), "/theme-squirrel.css")), - ThemeSlug::Archlinux => include_str!(concat!(env!("OUT_DIR"), "/theme-archlinux.css")), - ThemeSlug::Zenburn => include_str!(concat!(env!("OUT_DIR"), "/theme-zenburn.css")), - ThemeSlug::Monokai => include_str!(concat!(env!("OUT_DIR"), "/theme-monokai.css")), + ThemeSlug::Squirrel => grass::include!("data/themes/squirrel.scss"), + ThemeSlug::Archlinux => grass::include!("data/themes/archlinux.scss"), + ThemeSlug::Zenburn => grass::include!("data/themes/zenburn.scss"), + ThemeSlug::Monokai => grass::include!("data/themes/monokai.scss"), } } -- cgit v1.2.3 From a2211fa4726336ab480cf0af7d32853edc40daa6 Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Tue, 25 Jul 2023 19:03:05 -0500 Subject: Consolidate javascript and add comments --- data/style.scss | 21 +++++++++++-------- src/renderer.rs | 64 ++++++++++++++++++++++++++------------------------------- 2 files changed, 41 insertions(+), 44 deletions(-) diff --git a/data/style.scss b/data/style.scss index 909dc6f..6c0d284 100644 --- a/data/style.scss +++ b/data/style.scss @@ -199,15 +199,6 @@ nav .theme li a:hover { color: var(--change_theme_link_color_hover); } -%active_theme_link { - font-weight: bold; - color: var(--switch_theme_active); -} - -body:not([data-theme]) nav .theme li[data-theme="default"] a { - @extend %active_theme_link; -} - p { margin: 0; padding: 0; @@ -572,9 +563,21 @@ th span.active span { } } +%active_theme_link { + font-weight: bold; + color: var(--switch_theme_active); +} + +// when no specific theme is applied, highlight the `default` theme button in +// the theme menu +body:not([data-theme]) nav .theme li[data-theme="default"] a { + @extend %active_theme_link; +} + @each $theme in $themes { body[data-theme="#{$theme}"] { @include theme($theme); + // highlight the currently active theme in the theme selection menu nav .theme li[data-theme="#{$theme}"] a { @extend %active_theme_link; } diff --git a/src/renderer.rs b/src/renderer.rs index 946089d..699a01f 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -57,28 +57,6 @@ pub fn page( body #drop-container { - - (PreEscaped(r#" - - "#)) - div.toolbar_box_group { @if conf.file_upload { div.form { @@ -604,6 +582,33 @@ fn page_header(title: &str, file_upload: bool, favicon_route: &str, css_route: & title { (title) } + (PreEscaped(r#" + + "#)) + @if file_upload { (PreEscaped(r#" - "#)) - + body + { div.error { p { (error_code.to_string()) } @for error in error_description.lines() { -- cgit v1.2.3 From 6ef212cb326c91edd315f5a797a90de3796e980b Mon Sep 17 00:00:00 2001 From: Bao Trinh Date: Tue, 25 Jul 2023 19:03:17 -0500 Subject: Fix error page wrapping Error page was incorrectly comparing the full content-type header of error responses against `text/plain`, so no error pages were being wrapped by `map_error_page`. --- src/errors.rs | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/errors.rs b/src/errors.rs index e502634..6875b90 100644 --- a/src/errors.rs +++ b/src/errors.rs @@ -5,6 +5,7 @@ use actix_web::{ HttpRequest, HttpResponse, ResponseError, }; use futures::prelude::*; +use std::str::FromStr; use thiserror::Error; use crate::{renderer::render_error, MiniserveConfig}; @@ -131,8 +132,15 @@ where let res = fut.await?.map_into_boxed_body(); if (res.status().is_client_error() || res.status().is_server_error()) - && res.headers().get(header::CONTENT_TYPE).map(AsRef::as_ref) - == Some(mime::TEXT_PLAIN_UTF_8.essence_str().as_bytes()) + && res + .headers() + .get(header::CONTENT_TYPE) + .map(AsRef::as_ref) + .and_then(|s| std::str::from_utf8(s).ok()) + .and_then(|s| mime::Mime::from_str(s).ok()) + .as_ref() + .map(mime::Mime::essence_str) + == Some(mime::TEXT_PLAIN.as_ref()) { let req = res.request().clone(); Ok(res.map_body(|head, body| map_error_page(&req, head, body))) -- cgit v1.2.3