[web] Add blog CSS so we can make it consistent with the manual, etc.

doctools: Brainstorm about the sh-session plugin.

doc/help.md

@@ -24,6 +24,10 @@ Subset of Markdown we use:
 - fenced code blocks to generate <pre><code class="language-X">
   - we COULD syntax highlight now.  At least the comments and strings?
 
+Note: <p> implies word wrapping!
+  well that's good because then you can do it dynamically.
+  note: Python has textwrap!
+
 -->
 
 This doc describes every aspect of Oil and OSH briefly, and is indexed by

doctools/oil_doc.py

@@ -1,6 +1,14 @@
 #!/usr/bin/env python2
 """
 oil_doc.py: HTML processing for Oil documentation.
+
+Plugins:
+  ExpandLinks expands $xref, etc.
+  PygmentsPlugin -- for ```python, ```sh, ```c, etc.
+  HelpIndexPlugin -- for help-index.html
+
+  ShPromptPlugin -- understands $ echo hi, but doesn't run anything
+  ShSession -- runs shell snippets and caches the output
 """
 from __future__ import print_function
 
@@ -293,3 +301,51 @@ def HighlightCode(s):
   out.PrintTheRest()
 
   return f.getvalue()
+
+
+class ShellSession(object):
+  """
+  TODO: Pass this to HighlightCode as a plugin
+
+  $ x=one
+  $ echo $x
+  $ echo two
+
+  Becomes
+
+  $ x=one
+  $ echo $x
+  one
+  $ echo two
+  two
+
+  And then you will have
+  blog/2019/12/_shell_session/
+    $hash1-stdout.txt
+    $hash2-stdout.txt
+
+  It hashes the command with md5 and then brings it back.
+  If the file already exists then it doesn't run it again.
+  You can delete the file to redo it.
+
+  TODO: write a loop that reads one line at a time, writes, it, then reads
+  output from bash.
+  Use the Lines iterator to get lines.
+  For extra credit, you can solve the PS2 problem?  That's easily done with
+  Oil's parser.
+  """
+  def __init__(self, shell_exe, cache_dir):
+    """
+    Args:
+      shell_exe: sh, bash, osh, or oil.  Use the one in the $PATH by default.
+      cache_dir: ~/git/oilshell/oilshell.org/blog/2019/12/session/
+    """
+    self.shell_exe = shell_exe
+    self.cache_dir = cache_dir
+
+  def PrintHighlighted(self, s, start_pos, end_pos, out):
+    """
+    Args:
+      s: an HTML string.
+    """
+    pass

web/blog.css

@@ -0,0 +1,150 @@
+#latch-status {
+  text-align: center;
+  color: grey;
+}
+
+h1 {
+  text-align: center;
+}
+
+h2 {
+  /* x-large is too big; causes most titles to wrap badly (on Chrome/Firefox desktop). */
+  font-size: 1.3em;
+}
+
+h3 {
+  margin: 0em;
+  color: darkgreen;
+  font-size: 1.0em;  /* Similar to default h4 */
+}
+
+/* Make it centered and skinny for readability */
+body {
+  margin: 0 auto;
+
+  font-size: large;
+  line-height: 1.4;  /* http://bettermotherfuckingwebsite.com/ */
+  color: #444;
+}
+
+.skinny {
+  width: 30em;
+}
+
+.wider {
+  width: 45em;
+}
+
+/* Exclude <pre><code>.  Is there a better way to do this?  */
+p code, div code, li code, h2 code, h3 code {
+  color: green;
+}
+
+blockquote {
+  background-color: papayawhip;
+  padding: 0.5em;
+}
+
+pre {
+  background-color: #EEE;
+  padding: 0.5em;
+  border: none;
+
+  font-size: medium;
+}
+
+.footnotes {
+  font-size: small;
+}
+
+.date {
+  font-size: medium;
+  color: #555;
+  padding-left: 1em;
+  padding-right: 1em;
+  white-space: nowrap;
+}
+
+#all-posts tbody {
+  /* NOTE: This seems to make the table background solid like border-collapse:
+   * collapse, but doesn't mess with spacing.
+   */
+  display: block;
+}
+
+.alt-month {
+  background-color: #F0F0F0;
+}
+
+#post-footer {
+  background-color: #DEE;
+  padding: 0.5em;
+}
+
+.attention {
+  text-align: center;
+  background-color: #DEE;
+  padding: 0.5em;
+}
+
+/* anchors in cross-ref.html */
+a[name] {
+  color: green;
+}
+
+/* Links to cross-ref.html.  I copied color values from code.css for visual
+harmony. */
+a[href^="/cross-ref.html"] {
+  color: #4070a0 /* Literal.String */
+}
+
+a[href^="/cross-ref.html"]:visited {
+  /* color: #bb60d5 /* Name.Variable */
+  color: purple;
+}
+
+/* Internal links.  This is so that cross-ref.html is consistent.  Technically
+we might want to exclude other internal links, but I don't have many of those
+right now. */
+a[href^="#"] {
+  color: #4070a0 /* Literal.String (light blue) */
+}
+
+a[href^="#"]:visited {
+  /* color: #bb60d5 /* Name.Variable (light purple) */
+  color: purple;
+}
+
+.blog-tag {
+  white-space: nowrap;
+  font-family: sans-serif;
+}
+
+.blog-tag a {
+  /* color: #c65d09; /* Generic.Prompt (orange-ish) */
+}
+
+.blog-tag a:visited {
+  color: purple;
+}
+
+.book-text-link-td {
+  padding: 1em;
+  border-top: solid 1px #BBB;
+}
+
+.book-image-td {
+  width: 30%
+}
+
+.book-desc-td {
+  vertical-align: top;
+}
+
+/* For books and others */
+hr {
+  border: none;
+  height: 1px;
+  background-color: #BBB;
+}
+