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
solbu · Jan 11, 2018 · 721cd4b · 721cd4b
1 parent 9808104
commit 721cd4b
Show file tree

Hide file tree

Showing 16 changed files with 148 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,4 @@ ABOUT-NLS
 /po/POTFILES
 /po/stamp-po
 /po/remove-potcdate.sed
+/samplesite/hldig
diff --git a/CONTRIBUTING.md b/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/

diff --git a/ChangeLog.md b/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`

diff --git a/TESTING.md b/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.
diff --git a/docs/assets/css/style.css b/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;
+}
diff --git a/installdir/Makefile.am b/installdir/Makefile.am
@@ -10,6 +10,7 @@ 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
 
@@ -33,9 +34,6 @@ install-data-local:	all
 	@for i in $(COMMONHTML); do \
 		if [ ! -f $(DESTDIR)$(COMMON_DIR)/$$i ]; then sed -e s%@\IMAGEDIR@%$(IMAGE_URL_PREFIX)% $(top_srcdir)/installdir/$$i >$(DESTDIR)$(COMMON_DIR)/$$i; echo $(DESTDIR)$(COMMON_DIR)/$$i;fi; \
 	done && test -z "$$fail"
-	@for i in $(COMMONCSS); do \
-		if [ ! -f $(DESTDIR)$COMMON_DIR/$$i ]; then sed -e s%@\IMAGEDIR@%$(IMAGE_URL_PREFIX)% $(top_srcdir)/docs/assets/css/$$i >$(DESTDIR)$(COMMON_DIR)/$$i; echo $(DESTDIR)$(COMMON_DIR)/$$i;fi; \
-	done && test -z "$$fail"
 	@for i in $(COMMONDICT); do \
 		if [ ! -f $(DESTDIR)$(COMMON_DIR)/$$i ]; then $(INSTALL_DATA) $(top_srcdir)/installdir/$$i $(DESTDIR)$(COMMON_DIR)/$$i; echo $(DESTDIR)$(COMMON_DIR)/$$i; fi; \
 	done && test -z "$$fail"
@@ -45,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 \

diff --git a/installdir/Makefile.in b/installdir/Makefile.in
@@ -706,9 +706,6 @@ install-data-local:	all
 	@for i in $(COMMONHTML); do \
 		if [ ! -f $(DESTDIR)$(COMMON_DIR)/$$i ]; then sed -e s%@\IMAGEDIR@%$(IMAGE_URL_PREFIX)% $(top_srcdir)/installdir/$$i >$(DESTDIR)$(COMMON_DIR)/$$i; echo $(DESTDIR)$(COMMON_DIR)/$$i;fi; \
 	done && test -z "$$fail"
-	@for i in $(COMMONCSS); do \
-		if [ ! -f $(DESTDIR)$COMMON_DIR/$$i ]; then sed -e s%@\IMAGEDIR@%$(IMAGE_URL_PREFIX)% $(top_srcdir)/docs/assets/css/$$i >$(DESTDIR)$(COMMON_DIR)/$$i; echo $(DESTDIR)$(COMMON_DIR)/$$i;fi; \
-	done && test -z "$$fail"
 	@for i in $(COMMONDICT); do \
 		if [ ! -f $(DESTDIR)$(COMMON_DIR)/$$i ]; then $(INSTALL_DATA) $(top_srcdir)/installdir/$$i $(DESTDIR)$(COMMON_DIR)/$$i; echo $(DESTDIR)$(COMMON_DIR)/$$i; fi; \
 	done && test -z "$$fail"
@@ -718,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 \

diff --git a/installdir/header.html b/installdir/header.html
@@ -4,9 +4,9 @@
   <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="style.css">
+  <link rel="stylesheet" href="@IMAGEDIR@/style.css">
 </head>
-<body bgcolor="#EEF7FF">
+<body>
   <h2><img src="@IMAGEDIR@/htdig.gif" alt="hldig">Search results
   for '$&amp;(LOGICAL_WORDS)'</h2>
   <hr noshade size="4">

diff --git a/installdir/nomatch.html b/installdir/nomatch.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>>
+<!DOCTYPE html>
 <html>
 <head>
 <title>No match for '$&(LOGICAL_WORDS)'</title>
-<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="@IMAGEDIR@/style.css">
 </head>
 <body>
   <h1><img src="@IMAGEDIR@/htdig.gif" alt="hl://Dig">

diff --git a/installdir/search.html b/installdir/search.html
@@ -4,17 +4,17 @@
   <meta name="generator" content=
   "HTML Tidy for HTML5 for Linux version 5.2.0">
   <title>htdig WWW Search</title>
-  <link rel="stylesheet" href="../../share/hldig/style.css">
+  <link rel="stylesheet" href="@IMAGEDIR@/style.css">
 </head>
 <body>
   <h1><a href="https://github.com/andy5995/hldig"><img src=
   "@IMAGEDIR@/htdig.gif" alt="hl://dig" border="0"></a> WWW Site
   Search</h1>
-  <hr noshade size="4">
+  <hr>
   This search will allow you to search the contents of all the
   publicly available WWW documents at this site.<br>
   <form method="post" action="/cgi-bin/htsearch">
-    <font size="-1">Match: <select name="method">
+    <div class="form">Match: <select name="method">
       <option value="and">
         All
       </option>
@@ -50,13 +50,13 @@ <h1><a href="https://github.com/andy5995/hldig"><img src=
       <option value="revtitle">
         Reverse Title
       </option>
-    </select></font> <input type="hidden" name="config" value=
-    "htdig"> <input type="hidden" name="restrict" value="">
-    <input type="hidden" name="exclude" value=""><br>
+    </select> <input type="hidden" name="config" value="htdig">
+    <input type="hidden" name="restrict" value=""> <input type=
+    "hidden" name="exclude" value=""><br>
     Search: <input type="text" size="30" name="words" value="">
-    <input type="submit" value="Search">
+    <input type="submit" value="Search"></div>
   </form>
-  <hr noshade size="4">
+  <hr>
   <a href="https://github.com/andy5995/hldig">Powered by hl://dig
   $(VERSION)</a>
 </body>

diff --git a/installdir/syntax.html b/installdir/syntax.html
@@ -4,33 +4,32 @@
   <meta name="generator" content=
   "HTML Tidy for HTML5 for Linux version 5.2.0">
   <title>Error in Boolean search for '$&amp;(WORDS)'</title>
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="@IMAGEDIR@/style.css">
 </head>
 <body>
   <h1><img src="@IMAGEDIR@/htdig.gif" alt="hl://Dig"> Error in
   Boolean search for '$&amp;(LOGICAL_WORDS)'</h1>
   <hr noshade size="4">
   Boolean expressions need to be 'correct' in order for the search
   system to use them. The expression you entered has errors in it.
-  <p>Examples of correct expressions are: <strong>cat and
-  dog</strong>, <strong>cat not dog</strong>, <strong>cat or (dog
-  not nose)</strong>.<br>
+  <p>Examples of correct expressions are: <p class="thick">cat and
+  dog, cat not dog, cat or (dog not nose).</p>
   Note that the operator <strong>not</strong> has the meaning of
   'without'.</p>
   <blockquote>
-    <strong>$(SYNTAXERROR)</strong>
+    <p class="thick">$(SYNTAXERROR)</p>
   </blockquote>
-  <hr noshade size="4">
+  <hr>
   <form method="get" action="$(CGI)">
-    <font size="-1"><input type="hidden" name="config" value=
+    <div class="form"><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:
     $(SORT)<br>
     Refine search: <input type="text" size="30" name="words" value=
-    "$&amp;(WORDS)"> <input type="submit" value="Search"></font>
+    "$&amp;(WORDS)"> <input type="submit" value="Search"></div>
   </form>
-  <hr noshade size="4">
+  <hr>
   <a href="https://github.com/andy5995/hldig"><img src=
   "@IMAGEDIR@/htdig.gif" border="0" alt="">hl://dig $(VERSION)</a>
 </body>

diff --git a/installdir/wrapper.html b/installdir/wrapper.html
@@ -4,29 +4,29 @@
   <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="style.css">
+  <link rel="stylesheet" href="@IMAGEDIR@/style.css">
 </head>
 <body>
   <h2><img src="@IMAGEDIR@/htdig.gif" alt="hl://dig"> Search
   results for '$&amp;(LOGICAL_WORDS)'</h2>
-  <hr noshade size="4">
+  <hr>
   <form method="get" action="$(CGI)">
-    <font size="-1"><input type="hidden" name="config" value=
+    <div class="form"><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>
+    "$&amp;(WORDS)"> <input type="submit" value="Search"></div>
   </form>
-  <hr noshade size="1">
-  <strong>Documents $(FIRSTDISPLAYED) - $(LASTDISPLAYED) of
+  <hr>
+  <p class="thick">Documents $(FIRSTDISPLAYED) - $(LASTDISPLAYED) of
   $(MATCHES) matches. More <img src="@IMAGEDIR@/star.gif" alt=
-  "*">'s indicate a better match.</strong>
-  <hr noshade size="1">
+  "*">'s indicate a better match.</p>
+  <hr>
   $(HTSEARCH_RESULTS) $(PAGEHEADER) $(PREVPAGE) $(PAGELIST)
   $(NEXTPAGE)
-  <hr noshade size="4">
+  <hr>
   <a href="https://github.com/andy5995/hldig"><img src=
   "@IMAGEDIR@/htdig.gif" border="0" alt="">hl://dig $(VERSION)</a>
 </body>

diff --git a/lighttpd.conf.sample b/lighttpd.conf.sample
@@ -11,7 +11,8 @@ mimetype.assign = (
   ".html" => "text/html",
   ".txt" => "text/plain",
   ".jpg" => "image/jpeg",
-  ".png" => "image/png"
+  ".png" => "image/png",
+  ".css" => "text/css,
 )
 
 static-file.exclude-extensions = ( ".fcgi", ".php", ".rb", "~", ".inc" )

diff --git a/samplesite/index.html b/samplesite/index.html
@@ -1,12 +1,13 @@
- <!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>htdig local test site | page 1</title>
+<title>hldig local test site | page 1</title>
+<link href="/hldig/style.css" rel="stylesheet" type="text/css">
 </head>
 <body>
-  <h2>htdig local test site</h2>
+  <h2>hldig local test site</h2>
 <h3>Enter keywords</h3>
   <form action="http://localhost:3002/hlsearch.sh" target=body>
         <b>Quick Search:</b><br>

diff --git a/samplesite/page2.html b/samplesite/page2.html
@@ -1,12 +1,13 @@
- <!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>htdig local test site | page 2</title>
+<title>hldig local test site | page 2</title>
+<link href="/hldig/style.css" rel="stylesheet" type="text/css">
 </head>
 <body>
-  <h2>htdig local test site | page 2</h2>
+  <h2>hldig local test site | page 2</h2>
 
 <p>For the complete story, visit <a href="http://www.gutenberg.org/ebooks/43936">http://www.gutenberg.org/ebooks/43936</a>
 </p>

diff --git a/samplesite/page3.html b/samplesite/page3.html
@@ -1,12 +1,13 @@
- <!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>htdig local test site | page 3</title>
+<title>hldig local test site | page 3</title>
+<link href="/hldig/style.css" rel="stylesheet" type="text/css">
 </head>
 <body>
-  <h2>htdig local test site | page 3</h2>
+  <h2>hldig local test site | page 3</h2>
 
 <p>For the complete story, visit <a href="http://www.gutenberg.org/ebooks/43936">http://www.gutenberg.org/ebooks/43936</a>
 </p>