Maybe we'll default to a dark theme to promote energy savings... See contrib/css/README for details --- MANIFEST | 3 + contrib/css/216dark.css | 26 ++++++++ contrib/css/216light.css | 25 +++++++ contrib/css/README | 41 ++++++++++++ examples/public-inbox.psgi | 2 +- lib/PublicInbox/Config.pm | 3 + lib/PublicInbox/Hval.pm | 14 ---- lib/PublicInbox/WWW.pm | 123 +++++++++++++++++++++++++++++++++++ lib/PublicInbox/WwwStream.pm | 2 +- script/public-inbox-httpd | 2 +- t/view.t | 2 + 11 files changed, 226 insertions(+), 17 deletions(-) create mode 100644 contrib/css/216dark.css create mode 100644 contrib/css/216light.css create mode 100644 contrib/css/README
diff --git a/MANIFEST b/MANIFEST index 5e980fe..1db7bd1 100644 --- a/MANIFEST +++ b/MANIFEST @@ -26,6 +26,9 @@ MANIFEST Makefile.PL README TODO +contrib/css/216dark.css +contrib/css/216light.css +contrib/css/README contrib/selinux/el7/publicinbox.fc contrib/selinux/el7/publicinbox.te examples/README diff --git a/contrib/css/216dark.css b/contrib/css/216dark.css new file mode 100644 index 0000000..2fd85d0 --- /dev/null +++ b/contrib/css/216dark.css @@ -0,0 +1,26 @@ +/* + * Dark color scheme using 216 web-safe colors, inspired + * somewhat by the default color scheme in mutt. + * It reduces eyestrain for me, and energy usage for all: + * https://en.wikipedia.org/wiki/Light-on-dark_color_scheme + */ +* { background:#000; color:#ccc } + +/* + * Underlined links add visual noise which make them hard-to-read. + * Use colors to make them stand out, instead. + */ +a { color:#69f; text-decoration:none } +a:visited { color:#96f } + +/* quoted text gets a different color */ +*.q { color:#09f } + +/* + * these may be used with cgit, too + * (cgit uses <div>, public-inbox uses <span>) + */ +*.add { color:#0ff } +*.del { color:#f0f } +*.head { color:#fff } +*.hunk { color:#c93 } diff --git a/contrib/css/216light.css b/contrib/css/216light.css new file mode 100644 index 0000000..bf81bc5 --- /dev/null +++ b/contrib/css/216light.css @@ -0,0 +1,25 @@ +/* + * Light color scheme using 216 web-safe colors. + * Suitable for print, and blinding people with brightness. + * Haphazardly thrown together because bright colors hurt my eyes + */ +* { background:#fff; color:#333 } + +/* + * Underlined links add visual noise which make them hard-to-read. + * Use colors to make them stand out, instead. + */ +a { color:#00f; text-decoration:none } +a:visited { color:#808 } + +/* quoted text gets a different color */ +*.q { color:#006 } + +/* + * these may be used with cgit, too + * (cgit uses <div>, public-inbox uses <span>) + */ +*.add { color:#060 } +*.del {color:#900 } +*.head { color:#000 } +*.hunk { color:#960 } diff --git a/contrib/css/README b/contrib/css/README new file mode 100644 index 0000000..2473c2b --- /dev/null +++ b/contrib/css/README @@ -0,0 +1,41 @@ +Example CSS for use with public-inbox. + +CSS::Minifier or CSS::Minifier::XS will be tried for minimizing +CSS at startup if available(*). + +Multiple CSS files may be configured for user-selectability via +the "title" attribute or for different media. Local CSS files +are read into memory once at startup. + +If only one CSS file is given without "title", it will be inlined. + +Snippet from ~/.public-inbox/config, order matters to browsers. +-----8<----- +[publicinbox] + ; Depending on the browser, the first entry is the default. + ; So having "/dev/null" at the top means no colors by default. + ; Using the "title" attribute enables `View -> "Page Style"' + ; choices in Firefox. + css = /dev/null title=default + + ; git-config supports backslash to continue long lines + ; Attributes ('media', 'title') must use single quotes(') + ; or no quotes at all, but not double-quotes, as git-config(1) + ; won't preserve them: + css = /path/to/public-inbox/contrib/css/216dark.css \ + title=216dark \ + media='screen,(prefers-color-scheme:dark)' + + ; for tree haters who print web pages :P + css = /path/to/public-inbox/contrib/css/216light.css \ + title=216light \ + media='screen,print,(prefers-color-scheme:light)' + + ; external CSS may be specified with href. + ; Using "//" (protocol-relative) URLs is allowed, as is + ; "https://"; or "http://"; for hosts which only support one protocol. + css = href=//example.com/fugly.css title=external + + +(*) "libcss-minifier-perl" or "libcss-minifier-xs-perl" + on Debian-based systems diff --git a/examples/public-inbox.psgi b/examples/public-inbox.psgi index 4dd3306..8886d7f 100644 --- a/examples/public-inbox.psgi +++ b/examples/public-inbox.psgi @@ -8,9 +8,9 @@ use strict; use warnings; use PublicInbox::WWW; -PublicInbox::WWW->preload; use Plack::Builder; my $www = PublicInbox::WWW->new; +$www->preload; # share the public-inbox code itself: my $src = $ENV{SRC_GIT_DIR}; # '/path/to/public-inbox.git' diff --git a/lib/PublicInbox/Config.pm b/lib/PublicInbox/Config.pm index 355e64b..cead7fc 100644 --- a/lib/PublicInbox/Config.pm +++ b/lib/PublicInbox/Config.pm @@ -49,6 +49,9 @@ sub new { my $nod = join('|', @domains); $self->{-no_obfuscate_re} = qr/(?:$nod)\z/i; } + if (my $css = delete $self->{'publicinbox.css'}) { + $self->{css} = _array($css); + } $self; } diff --git a/lib/PublicInbox/Hval.pm b/lib/PublicInbox/Hval.pm index a120a29..0315d75 100644 --- a/lib/PublicInbox/Hval.pm +++ b/lib/PublicInbox/Hval.pm @@ -11,20 +11,6 @@ use PublicInbox::MID qw/mid_clean mid_escape/; use base qw/Exporter/; our @EXPORT_OK = qw/ascii_html obfuscate_addrs to_filename/; -# User-generated content (UGC) may have excessively long lines -# and screw up rendering on some browsers, so we use pre-wrap. -# -# We also force everything to the same scaled font-size because GUI -# browsers (tested both Firefox and surf (webkit)) uses a larger font -# for the Search <form> element than the rest of the page. Font size -# uniformity is important to people who rely on gigantic fonts. -# Finally, we use monospace to ensure the Search field and button -# has the same size and spacing as everything else which is -# <pre>-formatted anyways. -use constant STYLE => - '<style>pre{white-space:pre-wrap}' . - '*{font-size:100%;font-family:monospace}</style>'; - my $enc_ascii = find_encoding('us-ascii'); sub new { diff --git a/lib/PublicInbox/WWW.pm b/lib/PublicInbox/WWW.pm index a0fd7fa..863da85 100644 --- a/lib/PublicInbox/WWW.pm +++ b/lib/PublicInbox/WWW.pm @@ -6,6 +6,7 @@ # We focus on the lowest common denominators here: # - targeted at text-only console browsers (w3m, links, etc..) # - Only basic HTML, CSS only for line-wrapping <pre> text content for GUIs +# and diff/syntax-highlighting (optional) # - No JavaScript, graphics or icons allowed. # - Must not rely on static content # - UTF-8 is only for user-content, 7-bit US-ASCII for us @@ -118,6 +119,8 @@ sub call { r301($ctx, $1, $2); } elsif ($path_info =~ m!$INBOX_RE/_/text(?:/(.*))?\z!o) { get_text($ctx, $1, $2); + } elsif ($path_info =~ m!$INBOX_RE/([\w\-\.]+)\.css\z!o) { + get_css($self, $2); } elsif ($path_info =~ m!$INBOX_RE/($OID_RE)/s/\z!o) { get_vcs_object($ctx, $1, $2); } elsif ($path_info =~ m!$INBOX_RE/($OID_RE)/s/([\w\.\-]+)\z!o) { @@ -135,6 +138,7 @@ sub call { # for CoW-friendliness, MOOOOO! sub preload { + my ($self) = @_; require PublicInbox::Feed; require PublicInbox::View; require PublicInbox::SearchThread; @@ -147,6 +151,9 @@ sub preload { PublicInbox::NewsWWW)) { eval "require $_;"; } + if (ref($self)) { + $self->stylesheets_prepare($_) for ('', '../', '../../'); + } } # private functions below @@ -464,4 +471,120 @@ sub get_attach { PublicInbox::WwwAttach::get_attach($ctx, $idx, $fn); } +# User-generated content (UGC) may have excessively long lines +# and screw up rendering on some browsers, so we use pre-wrap. +# +# We also force everything to the same scaled font-size because GUI +# browsers (tested both Firefox and surf (webkit)) uses a larger font +# for the Search <form> element than the rest of the page. Font size +# uniformity is important to people who rely on gigantic fonts. +# Finally, we use monospace to ensure the Search field and button +# has the same size and spacing as everything else which is +# <pre>-formatted anyways. +our $STYLE = 'pre{white-space:pre-wrap}*{font-size:100%;font-family:monospace}'; + +sub stylesheets_prepare ($$) { + my ($self, $upfx) = @_; + my $mini = eval { + require CSS::Minifier; + sub { CSS::Minifier::minify(input => $_[0]) }; + } || eval { + require CSS::Minifier::XS; + sub { CSS::Minifier::XS::minify($_[0]) }; + } || sub { $_[0] }; + + my $css_map = {}; + my $stylesheets = $self->{pi_config}->{css} || []; + my $links = []; + my $inline_ok = 1; + + foreach my $s (@$stylesheets) { + my $attr = {}; + local $_ = $s; + foreach my $k (qw(media title href)) { + if (s/\s*$k='([^']+)'// || s/\s*$k=(\S+)//) { + $attr->{$k} = $1; + } + } + + if (defined $attr->{href}) { + $inline_ok = 0; + } else { + open(my $fh, '<', $_) or do { + warn "failed to open $_: $!\n"; + next; + }; + my ($key) = (m!([^/]+?)(?:\.css)?\z!i); + my $ctime = 0; + my $local = do { local $/; <$fh> }; + if ($local =~ /\S/) { + $ctime = sprintf('%x',(stat($fh))[10]); + $local = $mini->($local); + } + $css_map->{$key} = $local; + $attr->{href} = "$upfx$key.css?$ctime"; + if (defined($attr->{title})) { + $inline_ok = 0; + } elsif (($attr->{media}||'screen') eq 'screen') { + $attr->{-inline} = $local; + } + } + push @$links, $attr; + } + + my $buf = "<style>$STYLE"; + if ($inline_ok) { + my @ext; # for media=print and whatnot + foreach my $attr (@$links) { + if (defined(my $str = delete $attr->{-inline})) { + $buf .= $str; + } else { + push @ext, $attr; + } + } + $links = \@ext; + } + $buf .= '</style>'; + + if (@$links) { + foreach my $attr (@$links) { + delete $attr->{-inline}; + $buf .= "<link\ntype=text/css\nrel=stylesheet"; + while (my ($k, $v) = each %$attr) { + $v = qq{"$v"} if $v =~ /[\s=]/; + $buf .= qq{\n$k=$v}; + } + $buf .= ' />'; + } + $self->{"-style-$upfx"} = $buf; + } else { + $self->{-style_inline} = $buf; + } + $self->{-css_map} = $css_map; +} + +# returns an HTML fragment with <style> or <link> tags in them +# Called by WwwStream by nearly every HTML page +sub style { + my ($self, $upfx) = @_; + $self->{-style_inline} || $self->{"-style-$upfx"} || do { + stylesheets_prepare($self, $upfx); + $self->{-style_inline} || $self->{"-style-$upfx"} + }; +} + +# /$INBOX/$KEY.css endpoint +# CSS is configured globally for all inboxes, but we access them on +# a per-inbox basis. This allows administrators to setup per-inbox +# static routes to intercept the request before it hits PSGI +sub get_css ($$) { + my ($self, $key) = @_; + my $css_map = $self->{-css_map} || stylesheets_prepare($self, ''); + defined(my $css = $css_map->{$key}) or return r404(); + my $h = [ 'Content-Length', bytes::length($css), + 'Content-Type', 'text/css' ]; + PublicInbox::GitHTTPBackend::cache_one_year($h); + [ 200, $h, [ $css ] ]; +} + 1; diff --git a/lib/PublicInbox/WwwStream.pm b/lib/PublicInbox/WwwStream.pm index e548f00..c3aeb6b 100644 --- a/lib/PublicInbox/WwwStream.pm +++ b/lib/PublicInbox/WwwStream.pm @@ -65,7 +65,7 @@ sub _html_top ($) { "<html><head><title>$title</title>" . "<link\nrel=alternate\ntitle=\"Atom feed\"\n". "href=\"$atom\"\ntype=\"application/atom+xml\"/>" . - PublicInbox::Hval::STYLE . + $ctx->{www}->style($upfx) . "</head><body>". $top . $tip; } diff --git a/script/public-inbox-httpd b/script/public-inbox-httpd index 43f1818..47e38ec 100755 --- a/script/public-inbox-httpd +++ b/script/public-inbox-httpd @@ -21,8 +21,8 @@ my $refresh = sub { } } else { require PublicInbox::WWW; - PublicInbox::WWW->preload; my $www = PublicInbox::WWW->new; + $www->preload; $app = builder { eval { enable 'Deflater', diff --git a/t/view.t b/t/view.t index b829ecf..ef7d695 100644 --- a/t/view.t +++ b/t/view.t @@ -6,6 +6,7 @@ use Test::More; use Email::MIME; use Plack::Util; use_ok 'PublicInbox::View'; +use_ok 'PublicInbox::Config'; # FIXME: make this test less fragile my $ctx = { @@ -18,6 +19,7 @@ my $ctx = { nntp_url => sub {[]}, max_git_part => sub { undef }, description => sub { '' }), + www => Plack::Util::inline_object(style => sub { '' }), }; $ctx->{-inbox}->{-primary_address} = '[email protected]'; -- EW -- unsubscribe: [email protected] archive: https://public-inbox.org/meta/
