kash-shell 0.3.9__py3-none-any.whl → 0.3.11__py3-none-any.whl

kash/web_gen/template_render.py

@@ -1,12 +1,45 @@
+from collections.abc import Iterator
+from contextlib import contextmanager
+from contextvars import ContextVar
 from pathlib import Path
 
 from jinja2 import Environment, FileSystemLoader
 
 from kash.config import colors
 
+_base_templates_dir = Path(__file__).parent / "templates"
+"""Common base web page templates."""
+
+
+_additional_template_dirs: ContextVar[list[Path] | None] = ContextVar(
+    "_additional_template_dirs", default=None
+)
+
+
+def get_template_dirs(*dirs: Path) -> list[Path]:
+    """
+    Returns template directories currently in context along with any
+    additional template directories.
+    """
+    additional = _additional_template_dirs.get() or []
+    return list(dirs) + [*additional, _base_templates_dir]
+
+
+@contextmanager
+def additional_template_dirs(*dirs: Path) -> Iterator[None]:
+    """
+    Context manager for temporarily adding template directories to the search path.
+    """
+    original = _additional_template_dirs.get()
+    current = [] if not original else original.copy()
+    token = _additional_template_dirs.set(current + list(dirs))
+    try:
+        yield
+    finally:
+        _additional_template_dirs.reset(token)
+
 
 def render_web_template(
-    templates_dir: Path,
     template_filename: str,
     data: dict,
     autoescape: bool = True,
@@ -14,11 +47,13 @@ def render_web_template(
 ) -> str:
     """
     Render a Jinja2 template file with the given data, returning an HTML string.
+    Uses template directories from the base directory and any added via context manager.
     """
     if css_overrides is None:
         css_overrides = {}
 
-    env = Environment(loader=FileSystemLoader(templates_dir), autoescape=autoescape)
+    search_paths = get_template_dirs()
+    env = Environment(loader=FileSystemLoader(search_paths), autoescape=autoescape)
 
     # Load and render the template.
     template = env.get_template(template_filename)

kash/web_gen/templates/base_styles.css.jinja

@@ -1,8 +1,10 @@
 :root {
+  {% block root_variables %}
   font-size: 16px;
-  {# Adding Hack Nerd Font to all fonts for icon support, if it is installed. #}
-  --font-sans: "Varta", sans-serif, "Hack Nerd Font";
+  /* Adding Hack Nerd Font to all fonts for icon support, if it is installed. */
+  --font-sans: "Source Sans 3 Variable", sans-serif, "Hack Nerd Font";
   --font-serif: "PT Serif", serif, "Hack Nerd Font";
+  --font-weight-sans-bold: 625;  /* Source Sans 3 Variable better at this weight. */
   --font-mono: "Hack Nerd Font", "Menlo", "DejaVu Sans Mono", Consolas, "Lucida Console", monospace;
 
   --font-size-large: 1.2rem;
@@ -15,14 +17,17 @@
 
   --console-char-width: 88;
   --console-width: calc(var(--console-char-width) + 2rem);
+  {% endblock root_variables %}
 }
 
 {{ color_defs|safe }}
 
+{% block selection_styles %}
 ::selection {
   background-color: var(--color-selection);
   color: inherit;
 }
+{% endblock selection_styles %}
 
 {# TODO: Fix PDF issues and re-enable for prettier emoji. #}
 {# @font-face {
@@ -38,6 +43,7 @@
     U+1F900-1F9FF;  /* Supplemental Symbols and Pictographs */ 
 } #}
 
+{% block scrollbar_styles %}
 /* Scrollbar coloring. */
 /* For Webkit browsers (Chrome, Safari) */
 ::-webkit-scrollbar {
@@ -59,20 +65,40 @@
   scrollbar-width: thin;
   scrollbar-color: var(--color-scrollbar) var(--color-bg);
 }
+{% endblock scrollbar_styles %}
 
+{% block body_styles %}
 body {
   font-family: var(--font-serif);
   color: var(--color-text);
-  line-height: 1.3;
+  line-height: 1.4;
   padding: 0;  /* No padding so we can have full width elements. */
   margin: auto;
   background-color: var(--color-bg);
+  overflow-wrap: break-word;  /* Don't let long words/URLs break layout. */
 }
+{% endblock body_styles %}
 
+{% block typography %}
 p {
   margin-bottom: 1rem;
 }
 
+b, strong {
+  font-weight: var(--font-weight-sans-bold);
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-primary-light);
+  text-decoration: underline;
+  transition: all 0.15s ease-in-out;
+}
+
 h1,
 h2,
 h3,
@@ -88,49 +114,19 @@ h1 {
 
 h2 {
   font-size: 1.4rem;
-  margin-top: 2rem;
+  margin-top: 2.5rem;
   margin-bottom: 1rem;
 }
 
 h3 {
-  font-size: 1.15rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
+  font-size: 1.09rem;
+  margin-top: 1.7rem;
+  margin-bottom: 0.7rem;
 }
 
 h4 {
   margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-/* Long text stylings, for nicely formatting blog post length or longer texts. */
-
-.long-text h1 {
-  font-family: var(--font-serif);
-  font-weight: 400;
-}
-
-.long-text h2 {
-  font-family: var(--font-serif);
-  font-weight: 400;
-  font-style: italic;
-}
-
-.long-text h3 {
-  font-family: var(--font-sans);
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-.long-text h4 {
-  font-family: var(--font-serif);
-  font-weight: 700;
-}
-
-.subtitle {
-  font-family: var(--font-serif);
-  font-style: italic;
-  font-size: 1rem;
+  margin-bottom: 0.7rem;
 }
 
 ul {
@@ -141,22 +137,31 @@ ul {
 }
 
 li {
-  margin-top: 0.5rem;
+  margin-top: 0.7rem;
   margin-bottom: 0;
   position: relative;
 }
 
-ul>li::before {
+li > p {
+  margin-bottom: 0;
+}
+
+ul > li::before {
   content: "▪︎";
   position: absolute;
-  left: -1rem;
-  font-size: 0.9rem;
+  left: -.85rem;
+  top: .25rem;
+  font-size: 0.62rem;
 }
 
 ol {
+  margin-bottom: 0.7rem;
   list-style-type: decimal;
   margin-left: 2rem;
-  margin-bottom: 1rem;
+}
+
+ol > li {
+  padding-left: 0.25rem;
 }
 
 blockquote {
@@ -180,7 +185,86 @@ pre {
   letter-spacing: -0.025em;
   {# overflow-x: auto; #}
 }
+{% endblock typography %}
+
+{% block long_text_styles %}
+/* Long text stylings, for nicely formatting blog post length or longer texts. */
+
+.long-text h1 {
+  font-family: var(--font-serif);
+  font-weight: 400;
+}
 
+.long-text h2 {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-style: italic;
+}
+
+.long-text h3 {
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-sans-bold);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.long-text h4 {
+  font-family: var(--font-serif);
+  font-weight: 700;
+}
+
+.subtitle {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: 1rem;
+}
+{% endblock long_text_styles %}
+
+{% block table_styles %}
+table {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-small);
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+  border-collapse: collapse;
+  word-break: break-word; /* long words/URLs wrap instead of inflating the column    */
+  border: 1px solid var(--color-border-hint);
+}
+
+th {
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  border-bottom: 1px solid var(--color-border-hint);
+}
+
+th, td {
+  padding: 0.3rem 0.6rem;
+  max-width: 40rem;
+  min-width: 6rem;
+}
+
+th {
+  background-color: var(--color-bg-alt-solid);
+}
+
+tbody tr:nth-child(even) {
+  background-color: var(--color-bg-alt-solid); 
+}
+
+/* Container for wide tables to allow tables to break out of parent width. */
+.table-container {
+  {# max-width: calc(100vw - 6rem); #}
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  margin-bottom: 1rem;
+  background-color: var(--color-bg-solid);
+}
+{% endblock table_styles %}
+
+{% block nav_styles %}
 nav {
   display: flex;
   flex-wrap: wrap;
@@ -190,3 +274,45 @@ nav {
   gap: 1rem;
   /* Add some space between the buttons */
 }
+{% endblock nav_styles %}
+
+
+
+{% block footnote_styles %}
+/* Footnotes. */
+sup {
+  font-size: 80%;
+}
+
+.footnote-ref a, .footnote {
+  text-decoration: none;
+  padding: 0 0.15rem;
+  border-radius: 4px;
+  transition: all 0.15s ease-in-out;
+}
+
+.footnote-ref a:hover, .footnote:hover {
+  background-color: var(--color-hover-bg);
+  color: var(--color-primary-light);
+  text-decoration: none;
+}
+{% endblock footnote_styles %}
+
+{% block responsive_styles %}
+/* Bleed wide on larger screens. */
+/* TODO: Don't make so wide if table itself isn't large? */
+@media (min-width: 768px) {
+  table {
+    width: calc(100vw - 6rem);
+  }
+  .table-container {
+    width: calc(100vw - 6rem);
+  }
+}
+
+@media (max-width: 768px) {
+  table {
+    font-size: var(--font-size-smaller);
+  }
+}
+{% endblock responsive_styles %}

kash/web_gen/templates/base_webpage.html.jinja

@@ -2,10 +2,14 @@
 <html lang="en">
 
 <head>
+  {% block meta %}
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>{{ title }}</title>
+  {% endblock meta %}
 
+  {% block title %}<title>{{ title }}</title>{% endblock title %}
+
+  {% block head_basic %}
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
@@ -20,12 +24,19 @@
   <link rel="preload" as="font" type="font/woff2" crossorigin
     href="https://cdn.jsdelivr.net/fontsource/fonts/pt-serif@latest/latin-700-italic.woff2" />
   <link rel="preload" as="font" type="font/woff2" crossorigin
-    href="https://cdn.jsdelivr.net/fontsource/fonts/varta:vf@latest/latin-wght-normal.woff2" />
+    href="https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-normal.woff2" />
+  <link rel="preload" as="font" type="font/woff2" crossorigin
+    href="https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-italic.woff2" />
 
   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js" defer></script>
+  {% endblock head_basic %}
+
+  {% block head_extra %}{% endblock head_extra %}
 
   <style>
+    {% block font_faces %}
+    /* https://fontsource.org/fonts/pt-serif/cdn */
     /* pt-serif-latin-400-normal */
     @font-face {
       font-family: 'PT Serif';
@@ -62,63 +73,117 @@
       src: url(https://cdn.jsdelivr.net/fontsource/fonts/pt-serif@latest/latin-700-italic.woff2) format('woff2');
       unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
     }
+    /* https://fontsource.org/fonts/source-sans-3/cdn */
+    /* source-sans-3-latin-wght-normal */
     @font-face {
-      font-family: 'Varta';
+      font-family: 'Source Sans 3 Variable';
       font-style: normal;
       font-display: block;
-      font-weight: 300 700;
-      src: url(https://cdn.jsdelivr.net/fontsource/fonts/varta:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
-      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+      font-weight: 200 900;
+      src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
     }
+    /* source-sans-3-latin-wght-normal */
+    @font-face {
+      font-family: 'Source Sans 3 Variable';
+      font-style: italic;
+      font-display: block;
+      font-weight: 200 900;
+      src: url(https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-italic.woff2) format('woff2-variations');
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+    }
+    {# Other decent sans serif options: Work Sans Variable, Nunito Sans Variable #}
+    {% endblock font_faces %}
 
+    {% block base_styles %}
     {% include "base_styles.css.jinja" %}
+    {% endblock base_styles %}
+    
+    {% block content_styles %}
     {% include "content_styles.css.jinja" %}
-
-    {% if extra_css %}
-    {{ extra_css|safe }}
-    {% endif %}
+    {% endblock content_styles %}
+    
+    {% block custom_styles %}{% endblock custom_styles %}
   </style>
-
 </head>
 
 <body>
+  {% block body_header %}{% endblock body_header %}
+  
+  {% block main_content %}
   {{ content|safe }}
-</body>
+  {% endblock main_content %}
+  
+  {% block body_footer %}{% endblock body_footer %}
+
+  {% block scripts %}
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      // Send messages to the parent window, in case we are in a viewport where that matters
+      // (e.g. an iframe tooltip).
+      // Request a resize of the parent viewport. This iframe size message format isn't
+      // standardized by ResizeObserver, but is common. It is supported by Kerm.
+      const content = document.body;
+      console.log("Suggesting resize to parent:", content.offsetWidth, content.offsetHeight);
 
-<script>
-  // Some messages are sent to the parent window, in case we are in a viewport like a
-  // tooltip that supports it.
-
-  // Request a resize of the parent viewport (e.g. tooltip).
-  document.addEventListener('DOMContentLoaded', () => {
-    const content = document.body;
-    console.log("Suggesting resize to parent:", content.offsetWidth, content.offsetHeight);
-    // This iframe size message format isn't standardized by ResizeObserver, but is common.
-    // It is supported by Kerm.
-    window.parent.postMessage({
-      type: 'resize',
-      width: Math.max(content.offsetWidth, 600),
-      height: Math.max(content.offsetHeight, 100)
-    }, '*');
-  });
-
-  // Double-click to expand (e.g. expand tooltip to popover).
-  document.addEventListener('dblclick', () => {
-    console.log("Sending expand message to parent");
-    window.parent.postMessage({
-      type: 'expand'
-    }, '*');
-  });
-
-  // Escape to close tooltip or popover.
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape') {
-      console.log("Sending close message to parent");
       window.parent.postMessage({
-        type: 'close'
+        type: 'resize',
+        width: Math.max(content.offsetWidth, 600),
+        height: Math.max(content.offsetHeight, 100)
       }, '*');
-    }
-  });
-</script>
+
+      // Wrap tables within the main content area for horizontal scrolling.
+      const containers = [];
+      document.querySelectorAll('.long-text').forEach(el => {
+        const pane = el.querySelector('.tab-pane');
+        containers.push(pane || el);
+      });
+      containers.forEach(container => {
+        // Find all tables within the container.
+        const tables = Array.from(container.querySelectorAll('table'));
+        tables.forEach(table => {
+          // Skip tables already in table-container divs
+          if (table.parentNode.classList.contains('table-container')) {
+            return;
+          }
+          try {
+            // Create the wrapper.
+            const wrapper = document.createElement('div');
+            wrapper.className = 'table-container';
+            // Get the parent and insert the wrapper where the table is, then move the table into the wrapper.
+            const parent = table.parentNode;
+            parent.insertBefore(wrapper, table);
+            wrapper.appendChild(table);
+          } catch (e) {
+            console.error("Error wrapping table:", e);
+          }
+        });
+      });
+    });
+
+    // Double-click to expand (e.g. expand tooltip to popover).
+    document.addEventListener('dblclick', () => {
+      console.log("Sending expand message to parent");
+      window.parent.postMessage({
+        type: 'expand'
+      }, '*');
+    });
+
+    // Escape to close tooltip or popover.
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        console.log("Sending close message to parent");
+        window.parent.postMessage({
+          type: 'close'
+        }, '*');
+      }
+    });
+
+    {% block scripts_extra %}{% endblock scripts_extra %}
+  </script>
+  {% endblock scripts %}
+  
+  {% block analytics %}{% endblock analytics %}
+</body>
 
 </html>

kash/web_gen/templates/content_styles.css.jinja

@@ -15,7 +15,7 @@
   padding: 0 0.4rem;
 }
 
-/* More novel bracket ideas: [❲⟦⟪⟬〔〘〚〖 ]❳⟧⟫⟭ 〕〙〛〗 */
+{# More novel bracket ideas: [❲⟦⟪⟬〔〘〚〖 ]❳⟧⟫⟭ 〕〙〛〗 #}
 .citation::before {
   content: "[";
 }
@@ -57,6 +57,7 @@
   font-weight: 500;
   font-size: 1.2rem;
   text-transform: uppercase;
+  letter-spacing: 0.02em;
   margin-bottom: 0.5rem;
 }
 
@@ -81,6 +82,7 @@
   font-weight: 500;
   font-size: 1.2rem;
   text-transform: uppercase;
+  letter-spacing: 0.02em;
   margin-bottom: 0.5rem;
 
   /* Hack to center the header above the columns */
@@ -107,7 +109,7 @@
   font-size: var(--font-size-small);
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.02em;
   line-height: 1.2;
   padding: 0 0.5rem;
   border-bottom-width: 2px;