user/dev discussion of public-inbox itself
 help / color / Atom feed
From: Eric Wong <e@80x24.org>
To: meta@public-inbox.org
Subject: [PATCH 23/37] www: admin-configurable CSS via "publicinbox.css"
Date: Mon, 21 Jan 2019 20:52:39 +0000
Message-ID: <20190121205253.10455-24-e@80x24.org> (raw)
In-Reply-To: <20190121205253.10455-1-e@80x24.org>

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} = 'test@example.com';
 
-- 
EW


  parent reply index

Thread overview: 38+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2019-01-21 20:52 [PATCH 00/37] viewvcs: diff highlighting and more Eric Wong
2019-01-21 20:52 ` [PATCH 01/37] view: disable bold in topic display Eric Wong
2019-01-21 20:52 ` [PATCH 02/37] hval: force monospace for <form> elements, too Eric Wong
2019-01-21 20:52 ` [PATCH 03/37] t/perf-msgview: add test to check msg_html performance Eric Wong
2019-01-21 20:52 ` [PATCH 04/37] solver: initial Perl implementation Eric Wong
2019-01-21 20:52 ` [PATCH 05/37] git: support multiple URL endpoints Eric Wong
2019-01-21 20:52 ` [PATCH 06/37] git: add git_quote Eric Wong
2019-01-21 20:52 ` [PATCH 07/37] git: check saves error on disambiguation Eric Wong
2019-01-21 20:52 ` [PATCH 08/37] solver: various bugfixes and cleanups Eric Wong
2019-01-21 20:52 ` [PATCH 09/37] view: wire up diff and vcs viewers with solver Eric Wong
2019-01-21 20:52 ` [PATCH 10/37] git: disable abbreviations with cat-file hints Eric Wong
2019-01-21 20:52 ` [PATCH 11/37] solver: operate directly on git index Eric Wong
2019-01-21 20:52 ` [PATCH 12/37] view: enable naming hints for raw blob downloads Eric Wong
2019-01-21 20:52 ` [PATCH 13/37] git: support 'ambiguous' result from --batch-check Eric Wong
2019-01-21 20:52 ` [PATCH 14/37] solver: more verbose blob resolution Eric Wong
2019-01-21 20:52 ` [PATCH 15/37] solver: break up patch application steps Eric Wong
2019-01-21 20:52 ` [PATCH 16/37] solver: switch patch application to use a callback Eric Wong
2019-01-21 20:52 ` [PATCH 17/37] solver: simplify control flow for initial loop Eric Wong
2019-01-21 20:52 ` [PATCH 18/37] solver: break @todo loop into a callback Eric Wong
2019-01-21 20:52 ` [PATCH 19/37] solver: note the synchronous nature of index preparation Eric Wong
2019-01-21 20:52 ` [PATCH 20/37] solver: add a TODO note about making this fully evented Eric Wong
2019-01-21 20:52 ` [PATCH 21/37] view: enforce trailing slash for /$INBOX/$OID/s/ endpoints Eric Wong
2019-01-21 20:52 ` [PATCH 22/37] solver: restore diagnostics and deal with CRLF Eric Wong
2019-01-21 20:52 ` Eric Wong [this message]
2019-01-21 20:52 ` [PATCH 24/37] $INBOX/_/text/color/ and sample user-side CSS Eric Wong
2019-01-21 20:52 ` [PATCH 25/37] viewdiff: support diff-highlighting w/o coderepo Eric Wong
2019-01-21 20:52 ` [PATCH 26/37] viewdiff: cleanup state transitions a bit Eric Wong
2019-01-21 20:52 ` [PATCH 27/37] viewdiff: quote attributes for Atom feed Eric Wong
2019-01-21 20:52 ` [PATCH 28/37] t/check-www-inbox: use xmlstarlet to validate Atom if available Eric Wong
2019-01-21 20:52 ` [PATCH 29/37] viewdiff: do not link to 0{7,40} blobs (again) Eric Wong
2019-01-21 20:52 ` [PATCH 30/37] viewvcs: disable white-space prewrap in blob view Eric Wong
2019-01-21 20:52 ` [PATCH 31/37] solver: force quoted-printable bodies to LF Eric Wong
2019-01-21 20:52 ` [PATCH 32/37] solver: remove extra "^index $OID..$OID" line Eric Wong
2019-01-21 20:52 ` [PATCH 33/37] config: each_inbox iteration preserves config order Eric Wong
2019-01-21 20:52 ` [PATCH 34/37] t/check-www-inbox: warn on missing Content-Type Eric Wong
2019-01-21 20:52 ` [PATCH 35/37] highlight: initial wrapper and PSGI service Eric Wong
2019-01-21 20:52 ` [PATCH 36/37] hval: split out escape sequences to a separate table Eric Wong
2019-01-21 20:52 ` [PATCH 37/37] t/check-www-inbox: trap SIGINT for File::Temp destruction Eric Wong

Reply instructions:

You may reply publically to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

  List information: http://public-inbox.org/README

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20190121205253.10455-24-e@80x24.org \
    --to=e@80x24.org \
    --cc=meta@public-inbox.org \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link

user/dev discussion of public-inbox itself

Archives are clonable:
	git clone --mirror http://public-inbox.org/meta
	git clone --mirror http://czquwvybam4bgbro.onion/meta
	git clone --mirror http://hjrcffqmbrq6wope.onion/meta
	git clone --mirror http://ou63pmih66umazou.onion/meta

Example config snippet for mirrors

Newsgroups are available over NNTP:
	nntp://news.public-inbox.org/inbox.comp.mail.public-inbox.meta
	nntp://ou63pmih66umazou.onion/inbox.comp.mail.public-inbox.meta
	nntp://czquwvybam4bgbro.onion/inbox.comp.mail.public-inbox.meta
	nntp://hjrcffqmbrq6wope.onion/inbox.comp.mail.public-inbox.meta
	nntp://news.gmane.org/gmane.mail.public-inbox.general

 note: .onion URLs require Tor: https://www.torproject.org/

AGPL code for this site: git clone https://public-inbox.org/public-inbox.git