]> Sergey Matveev's repositories - public-inbox.git/commitdiff
www: admin-configurable CSS via "publicinbox.css"
authorEric Wong <e@80x24.org>
Sun, 20 Jan 2019 04:21:07 +0000 (04:21 +0000)
committerEric Wong <e@80x24.org>
Sun, 20 Jan 2019 09:19:06 +0000 (09:19 +0000)
Maybe we'll default to a dark theme to promote energy savings...

See contrib/css/README for details

MANIFEST
contrib/css/216dark.css [new file with mode: 0644]
contrib/css/216light.css [new file with mode: 0644]
contrib/css/README [new file with mode: 0644]
examples/public-inbox.psgi
lib/PublicInbox/Config.pm
lib/PublicInbox/Hval.pm
lib/PublicInbox/WWW.pm
lib/PublicInbox/WwwStream.pm
script/public-inbox-httpd
t/view.t

index 5e980fe61130c36d0fa0cd300d90d9255b33dc8e..1db7bd114af6026589745fe45004cbf1d3d24298 100644 (file)
--- 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 (file)
index 0000000..2fd85d0
--- /dev/null
@@ -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 (file)
index 0000000..bf81bc5
--- /dev/null
@@ -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 (file)
index 0000000..2473c2b
--- /dev/null
@@ -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
index 4dd3306b669bde49f0a2d7c08b869366563c33b0..8886d7fa881b8d18f076a6981309b41913c9cd4b 100644 (file)
@@ -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'
index 355e64bfec6a19036519054b17a716641d2c7310..cead7fc287c1220b7af6905f2d04132d2c2a0a1f 100644 (file)
@@ -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;
 }
index a120a291bd4d85c1e37ce4c1b549a7cdd2d948eb..0315d759cbf6340c837a1fee5c01a8a8f71b63b6 100644 (file)
@@ -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 {
index a0fd7fa74b99a3dbb099d8c8f68b7cd269d29145..863da85a2d3820ba6105ce695cb95ddd0d6cfc24 100644 (file)
@@ -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;
index e548f00f4a3ed024a9da56263860617b2638e60f..c3aeb6b03b0299ce117482936f002bfb58a04dd3 100644 (file)
@@ -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;
 }
 
index 43f1818861ed1d10f0032ec3891029e4ff79a2c3..47e38eca2ea0bfd6b313f375f49b730041bc9754 100755 (executable)
@@ -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',
index b829ecf883f8cca07cf28444e5ba4741578de57c..ef7d6958aaa9f0c27e9d2125df0278c0b7b8d7b3 100644 (file)
--- 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} = 'test@example.com';