[#24]installdirs:update search result html, add css (#82)

* [#24]installdirs:update search result html, add css

This will copy the same style.css that the web site uses. That seems
easier than maintaining 2 separate css files.

I added a script that runs tidy-html5, but the user must install the
program <http://www.htacg.org/> to use it.

* hlsearch results html pages updated [#24]

See notes in the
(Changelog)[https://github.com/andy5995/hldig/blob/master/ChangeLog.md)

There's still improvements that can be made to the html design, but this
patch should make updates easier for contributors, and enables the use
of a linked stylesheet

.gitignore

@@ -33,3 +33,4 @@ ABOUT-NLS
 /po/POTFILES
 /po/stamp-po
 /po/remove-potcdate.sed
+/samplesite/hldig

CONTRIBUTING.md

@@ -23,9 +23,10 @@ single from each other (i.e. a separate PR for each patch).
 
 ## Web site
 
-Most of the files for the [web site][hldig_repo] are in
+Most of the files for the [web site][hldig_website] are in
 [docs/infiles][site_infiles] and can be changed with a pull request
-through GitHub.
+through GitHub. To preview your changes, you can use
+docs/src/simplecgen to generate new html files in docs/
 
 Thank you!
 
@@ -79,7 +80,7 @@ repo with the remote upstream. GitHub has instructions for doing this:
  4 & 5 of **Syncing a Fork**).
 
 [GNU_style_guide]: https://www.gnu.org/prep/standards/html_node/Formatting.html
-[hldig_repo]: https://andy5995.github.io/hldig/
+[hldig_website]: https://andy5995.github.io/hldig/
 [site_infiles]: https://github.com/andy5995/hldig/blob/master/docs/infiles
 [authors]: https://github.com/andy5995/hldig/blob/master/AUTHORS.md
 [git-cola]: https://git-cola.github.io/

ChangeLog.md

@@ -3,6 +3,29 @@
 This document contains information about changes after hl://Dig was
 forked. To see information about the original project, visit [ht://Dig on SourceForge](https://sourceforge.net/projects/htdig/)
 
+### Thu Jan 11 2018
+
+[#24](https://github.com/andy5995/hldig/issues/24) Added support for a
+linked css stylesheet and reformatted the html code of the .html files
+in installdir. Those are the files that are used for hlsearch results.
+Instructions for
+[testing](https://github.com/andy5995/hldig/blob/master/TESTING.md)
+have been updated accordingly.
+
+If you've already installed lighttpd for testing (as outlined in
+TESTING.md), you'll need to add ".css" to the mimetype.assign section
+in ~/usr/etc/lighttpd.conf
+
+```
+mimetype.assign = (
+ ".html" => "text/html",
+ ".txt" => "text/plain",
+ ".jpg" => "image/jpeg",
+ ".png" => "image/png",
+ ".css" => "text/css,
+)
+```
+
 ### Sun Jan 07 2018
 
 ssl support is now enabled by default. Use `./configure --with-openssl=no`

TESTING.md

@@ -85,6 +85,11 @@ Copy `hlsearch.sh` from your $srcdir/scripts directory to your server root
 
 _Note: hlsearch.sh is a wrapper script that calls hlsearch._
 
+So lighttpd can find the web graphics and css stylesheet, in your
+server root, make a symbolic link to testing/htdocs/hldig
+
+ ln -s ../testing/hldig
+
 Change back to the top level of your hldig source directory.
 Start the lighttpd server
 
@@ -174,3 +179,20 @@ remove build files
 remove files created by ./configure
 
  make distclean
+
+## CSS and HTML changes
+
+The css file is located in docs/assets/css. The stylesheet used for the
+main web site is the same one used for the samplesite and the hlsearch
+results pages. It's copied from that directory to testing/htdocs/hldig/
+when `make install` is run.
+
+If you make changes to that css file, or the html files in installdir/,
+you'll need to remove the files from **testing/share/hldig** and
+**testing/htdocs/hldig** and then then run `make install` from
+installdir.
+
+## Web site
+
+Please see [CONTRIBUTING -> Web site](https://github.com/andy5995/hldig/blob/master/CONTRIBUTING.md#web-site) for information
+about making changes to the web site.

docs/assets/css/style.css

@@ -1,3 +1,43 @@
+/*********************************************
+ Default font settings and typography.
+*********************************************/
+html {
+ font-size: 100%;
+}
+body {
+ color: #323848;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+ line-height: 1.2;
+}
+input, select, textarea {
+ font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+pre, code, tt, kbd {
+ font-family: 'andale mono', 'lucida console', monospace;
+ font-size: 1em;
+ line-height: 1.5;
+}
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+address, dfn, samp, ul, ol, dl {
+ margin-top: 1.5em;
+ margin-bottom: 1.5em;
+}
+
+hr {
+ display: block;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+ margin-left: auto;
+ margin-right: auto;
+ border-style: inset;
+ border-width: 1px;
+}
+
+a img {
+ margin: 0;
+}
+
 .plaintext {
  font-size: 18px;
  font-family: arial;
@@ -36,3 +76,11 @@
 h1 {
 text-align: center;
 }
+
+.form {
+font-size: 10px;
+}
+
+p.thick {
+ font-weight: bold;
+}

installdir/HtFileType

@@ -4,10 +4,10 @@
 #
 # Determine a file's MIME type from its contents.
 #
-# 
+#
 
-# Part of the ht://Dig package <http://www.htdig.org/>
-# Copyright (c) 2003 The ht://Dig Group
+# Part of the hl://Dig package <https://github.com/andy5995/hldig>
+# Copyright (c) 2017 The hl://Dig Group
 # For copyright details, see the file COPYING in your distribution
 # or the GNU Public License version 2 or later
 # <http://www.gnu.org/copyleft/gpl.html>

installdir/Makefile.am

@@ -10,8 +10,12 @@ IMAGES= button1.gif button2.gif button3.gif button4.gif button5.gif \
  button1.png button2.png button3.png button4.png button5.png \
  button6.png button7.png button8.png button9.png buttonl.png \
  buttonr.png button10.png htdig.png star.png star_blank.png
+
 COMMONHTML= header.html footer.html wrapper.html nomatch.html syntax.html \
  long.html short.html
+
+COMMONCSS= style.css
+
 COMMONDICT= bad_words english.0 english.aff synonyms
 
 EXTRA_DIST = $(IMAGES) $(COMMONHTML) $(COMMONDICT) rundig hldig.conf mime.types \
@@ -39,6 +43,9 @@ install-data-local: all
  @for i in $(IMAGES); do \
  if [ ! -f $(DESTDIR)$(IMAGE_DIR)/$$i ]; then $(INSTALL_DATA) $(top_srcdir)/installdir/$$i $(DESTDIR)$(IMAGE_DIR)/$$i; echo $(DESTDIR)$(IMAGE_DIR)/$$i;fi; \
  done && test -z "$$fail"
+ @for i in $(COMMONCSS); do \
+ if [ ! -f $(DESTDIR)$(IMAGE_DIR)/$$i ]; then sed -e s%@\IMAGEDIR@%$(IMAGE_URL_PREFIX)% $(top_srcdir)/docs/assets/css/$$i >$(DESTDIR)$(IMAGE_DIR)/$$i; echo $(DESTDIR)$(IMAGE_DIR)/$$i;fi; \
+ done && test -z "$$fail"
  @echo "Creating rundig script..."
  $(mkinstalldirs) $(DESTDIR)$(bindir)
  @if [ ! -f $(DESTDIR)$(bindir)/rundig ]; then \

installdir/Makefile.in

@@ -378,6 +378,7 @@ IMAGES = button1.gif button2.gif button3.gif button4.gif button5.gif \
 COMMONHTML = header.html footer.html wrapper.html nomatch.html syntax.html \
  long.html short.html
 
+COMMONCSS = style.css
 COMMONDICT = bad_words english.0 english.aff synonyms
 EXTRA_DIST = $(IMAGES) $(COMMONHTML) $(COMMONDICT) rundig hldig.conf mime.types \
  search.html HtFileType HtFileType-magic.mime cookies.txt
@@ -714,6 +715,9 @@ install-data-local: all
  @for i in $(IMAGES); do \
  if [ ! -f $(DESTDIR)$(IMAGE_DIR)/$$i ]; then $(INSTALL_DATA) $(top_srcdir)/installdir/$$i $(DESTDIR)$(IMAGE_DIR)/$$i; echo $(DESTDIR)$(IMAGE_DIR)/$$i;fi; \
  done && test -z "$$fail"
+ @for i in $(COMMONCSS); do \
+ if [ ! -f $(DESTDIR)$(IMAGE_DIR)/$$i ]; then sed -e s%@\IMAGEDIR@%$(IMAGE_URL_PREFIX)% $(top_srcdir)/docs/assets/css/$$i >$(DESTDIR)$(IMAGE_DIR)/$$i; echo $(DESTDIR)$(IMAGE_DIR)/$$i;fi; \
+ done && test -z "$$fail"
  @echo "Creating rundig script..."
  $(mkinstalldirs) $(DESTDIR)$(bindir)
  @if [ ! -f $(DESTDIR)$(bindir)/rundig ]; then \

installdir/footer.html

@@ -1,6 +1,6 @@
-$(PAGEHEADER)
-$(PREVPAGE) $(PAGELIST) $(NEXTPAGE)
-<hr noshade size="4">
-<a href="https://github.com/andy5995/htdig">
-<img src="@IMAGEDIR@/htdig.gif" border="0" alt="">ht://Dig $(VERSION)</a>
-</body></html>
+ $(PAGEHEADER) $(PREVPAGE) $(PAGELIST) $(NEXTPAGE)
+ <hr noshade size="4">
+ <a href="https://github.com/andy5995/hldig"><img src=
+ "@IMAGEDIR@/htdig.gif" border="0" alt="">hl://Dig $(VERSION)</a>
+</body>
+</html>

installdir/header.html

@@ -1,25 +1,26 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html><head><title>Search results for '$&(WORDS)'</title></head>
-<body bgcolor="#eef7ff">
-<h2><img src="@IMAGEDIR@/htdig.gif" alt="htdig">
-Search results for '$&(LOGICAL_WORDS)'</h2>
-<hr noshade size="4">
-<form method="get" action="$(CGI)">
-<font size="-1">
-<input type="hidden" name="config" value="$&(CONFIG)">
-<input type="hidden" name="restrict" value="$&(RESTRICT)">
-<input type="hidden" name="exclude" value="$&(EXCLUDE)">
-Match: $(METHOD)
-Format: $(FORMAT)
-Sort by: $(SORT)
-<br>
-Refine search:
-<input type="text" size="30" name="words" value="$&(WORDS)">
-<input type="submit" value="Search">
-</font>
-</form>
-<hr noshade size="1">
-<strong>Documents $(FIRSTDISPLAYED) - $(LASTDISPLAYED) of $(MATCHES) matches.
-More <img src="@IMAGEDIR@/star.gif" alt="*">'s indicate a better match.
-</strong>
-<hr noshade size="1">
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="generator" content=
+ "HTML Tidy for HTML5 for Linux version 5.2.0">
+ <title>Search results for '$&amp;(WORDS)'</title>
+ <link rel="stylesheet" href="@IMAGEDIR@/style.css">
+</head>
+<body>
+ <h2><img src="@IMAGEDIR@/htdig.gif" alt="hldig">Search results
+ for '$&amp;(LOGICAL_WORDS)'</h2>
+ <hr noshade size="4">
+ <form method="get" action="$(CGI)">
+ <font size="-1"><input type="hidden" name="config" value=
+ "$&amp;(CONFIG)"> <input type="hidden" name="restrict" value=
+ "$&amp;(RESTRICT)"> <input type="hidden" name="exclude" value=
+ "$&amp;(EXCLUDE)"> Match: $(METHOD) Format: $(FORMAT) Sort by:
+ $(SORT)<br>
+ Refine search: <input type="text" size="30" name="words" value=
+ "$&amp;(WORDS)"> <input type="submit" value="Search"></font>
+ </form>
+ <hr noshade size="1">
+ <strong>Documents $(FIRSTDISPLAYED) - $(LASTDISPLAYED) of
+ $(MATCHES) matches. More <img src="@IMAGEDIR@/star.gif" alt=
+ "*">'s indicate a better match.</strong>
+ <hr noshade size="1">

installdir/long.html

@@ -1,6 +1,7 @@
-<dl><dt><strong><a href="$&(URL)">$&(TITLE)</a></strong>$(STARSLEFT)
-</dt><dd>$(EXCERPT)<br>
-<em><a href="$&(URL)">$&(URL)</a></em>
-<font size="-1">$(MODIFIED), $(SIZE) bytes</font>
-</dd></dl>
-
+ <dl>
+ <dt><strong><a href=
+ "$&amp;(URL)">$&amp;(TITLE)</a></strong>$(STARSLEFT)</dt>
+ <dd>$(EXCERPT)<br>
+ <em><a href="$&amp;(URL)">$&amp;(URL)</a></em> <font size=
+ "-1">$(MODIFIED), $(SIZE) bytes</font></dd>
+ </dl>

installdir/nomatch.html

@@ -1,37 +1,42 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html><head><title>No match for '$&(LOGICAL_WORDS)'</title></head>
-<body bgcolor="#eef7ff">
-<h1><img src="@IMAGEDIR@/htdig.gif" alt="ht://Dig">
-Search results</h1>
-<hr noshade size="4">
-<h2>No matches were found for '$&(LOGICAL_WORDS)'</h2>
-<p>
-Check the spelling of the search word(s) you used.
-If the spelling is correct and you only used one word,
-try using one or more similar search words with "<strong>Any</strong>."
-</p><p>
-If the spelling is correct and you used more than one
-word with "<strong>Any</strong>," try using one or more similar search
-words with "<strong>Any</strong>."</p><p>
-If the spelling is correct and you used more than one
-word with "<strong>All</strong>," try using one or more of the same words
-with "<strong>Any</strong>."</p>
-<hr noshade size="4">
-<form method="get" action="$(CGI)">
-<font size="-1">
-<input type="hidden" name="config" value="$&(CONFIG)">
-<input type="hidden" name="restrict" value="$&(RESTRICT)">
-<input type="hidden" name="exclude" value="$&(EXCLUDE)">
-Match: $(METHOD)
-Format: $(FORMAT)
-Sort by: $(SORT)
-<br>
-Refine search:
-<input type="text" size="30" name="words" value="$&(WORDS)">
-<input type="submit" value="Search">
-</font>
-</form>
-<hr noshade size="4">
-<a href="https://github.com/andy5995/htdig">
-<img src="@IMAGEDIR@/htdig.gif" border="0" alt="">htdig $(VERSION)</a>
-</body></html>
+<!DOCTYPE html>
+<html>
+<head>
+<title>No match for '$&(LOGICAL_WORDS)'</title>
+<link rel="stylesheet" href="@IMAGEDIR@/style.css">
+</head>
+<body>
+ <h1><img src="@IMAGEDIR@/htdig.gif" alt="hl://Dig">
+ Search results</h1>
+ <hr noshade size="4">
+ <h2>No matches were found for '$&(LOGICAL_WORDS)'</h2>
+ <p>
+ Check the spelling of the search word(s) you used.
+ If the spelling is correct and you only used one word,
+ try using one or more similar search words with "<strong>Any</strong>."
+ </p><p>
+ If the spelling is correct and you used more than one
+ word with "<strong>Any</strong>," try using one or more similar search
+ words with "<strong>Any</strong>."</p><p>
+ If the spelling is correct and you used more than one
+ word with "<strong>All</strong>," try using one or more of the same words
+ with "<strong>Any</strong>."</p>
+ <hr noshade size="4">
+ <form method="get" action="$(CGI)">
+ <font size="-1">
+ <input type="hidden" name="config" value="$&(CONFIG)">
+ <input type="hidden" name="restrict" value="$&(RESTRICT)">
+ <input type="hidden" name="exclude" value="$&(EXCLUDE)">
+ Match: $(METHOD)
+ Format: $(FORMAT)
+ Sort by: $(SORT)
+ <br>
+ Refine search:
+ <input type="text" size="30" name="words" value="$&(WORDS)">
+ <input type="submit" value="Search">
+ </font>
+ </form>
+ <hr noshade size="4">
+ <a href="https://github.com/andy5995/hldig">
+ <img src="@IMAGEDIR@/htdig.gif" border="0" alt="">hl://dig $(VERSION)</a>
+</body>
+</html>