Develop (#126)

- Page Style
    - Replace footer with icon buttons
        - Esparto home
        - Share document (for compatible systems)
        - Print page
    - Add CSS style for icon buttons
    - Prefer fully specified fonts to system fonts
    - Remove underline from URLs

.editorconfig

@@ -10,6 +10,15 @@ insert_final_newline = true
 charset = utf-8
 end_of_line = lf
 
+[*.yaml]
+indent_size = 2
+
+[*.html*]
+indent_size = 2
+
+[*.js]
+indent_size = 2
+
 [*.bat]
 indent_style = tab
 end_of_line = crlf

Makefile

@@ -57,10 +57,10 @@ lint: ## check style with flake8
 	flake8 esparto tests
 
 mypy: ## check type hints
-	mypy esparto --strict
+	mypy esparto
 
 isort: ## sort imports
-	isort esparto tests --profile black
+	isort esparto tests
 
 cqa: format isort lint mypy ## run all cqa tools
 

docs/04-about/release-notes.md

@@ -1,6 +1,18 @@
 Release Notes
 =============
 
+4.1.0 (2022-06-29)
+------------------
+
+- Page Style
+    - Replace footer with icon buttons
+        - Esparto home
+        - Share document (for compatible systems)
+        - Print page
+    - Add CSS style for icon buttons
+    - Prefer fully specified fonts to system fonts
+    - Remove underline from URLs
+
 4.0.0 (2022-04-19)
 ------------------
 

esparto/__init__.py

@@ -15,7 +15,7 @@
 
 __author__ = """Dominic Thorn"""
 __email__ = "[email protected]"
-__version__ = "4.0.0.post1"
+__version__ = "4.1.0"
 
 _MODULE_PATH: _Path = _Path(__file__).parent.absolute()
 

esparto/_options.py

@@ -108,6 +108,8 @@ class OutputOptions(yaml.YAMLObject, ConfigMixin):
             Path to Bootstrap CSS file. Used if dependency source is 'inline'.
         esparto_css (str):
             Path to additional CSS file with esparto specific styles.
+        esparto_js (str):
+            Path to JavaScript file for interactive page elements.
         jinja_template (str):
             Path to Jinja HTML page template.
 
@@ -129,6 +131,7 @@ class OutputOptions(yaml.YAMLObject, ConfigMixin):
     )
     bootstrap_css: str = str(_MODULE_PATH / "resources/css/bootstrap.min.css")
     esparto_css: str = str(_MODULE_PATH / "resources/css/esparto.css")
+    esparto_js: str = str(_MODULE_PATH / "resources/js/esparto.js")
     jinja_template: str = str(_MODULE_PATH / "resources/jinja/base.html.jinja")
 
     matplotlib: MatplotlibOptions = MatplotlibOptions()

esparto/design/layout.py

@@ -543,7 +543,7 @@ def __post_init__(self) -> None:
         self.title_classes = ["es-page-title"]
         self.title_styles = {}
 
-        self.body_html_tag = "div"
+        self.body_html_tag = "article"
         self.body_classes = ["es-page-body"]
         self.body_styles = {}
 
@@ -574,7 +574,7 @@ def __post_init__(self) -> None:
         self.title_classes = ["es-section-title"]
         self.title_styles = {}
 
-        self.body_html_tag = "div"
+        self.body_html_tag = "section"
         self.body_classes = ["es-section-body"]
         self.body_styles = {}
 

esparto/publish/output.py

@@ -22,6 +22,7 @@ def publish_html(
     return_html: bool = False,
     dependency_source: Optional[str] = None,
     esparto_css: Optional[str] = None,
+    esparto_js: Optional[str] = None,
     jinja_template: Optional[str] = None,
     **kwargs: bool,
 ) -> Optional[str]:
@@ -33,6 +34,7 @@ def publish_html(
       return_html (bool): Returns HTML string if True.
       dependency_source (str): One of 'cdn' or 'inline' (default = None).
       esparto_css (str): Path to CSS stylesheet. (default = None).
+      esparto_js (str): Path to JavaScript code. (default = None).
       jinja_template (str): Path to Jinja template. (default = None).
       **kwargs (Dict[str, Any]): Arguments passed to `page.to_html()`.
 
@@ -46,6 +48,7 @@ def publish_html(
     resolved_deps = resolve_deps(required_deps, source=dependency_source)
 
     esparto_css = Path(resolve_config_option("esparto_css", esparto_css)).read_text()
+    esparto_js = Path(resolve_config_option("esparto_js", esparto_js)).read_text()
 
     page_html = page.to_html(**kwargs)
     jinja_template_object = Template(
@@ -55,6 +58,7 @@ def publish_html(
         navbrand=page.navbrand,
         doc_title=page.title,
         esparto_css=esparto_css,
+        esparto_js=esparto_js,
         content=page_html,
         head_deps=resolved_deps.head,
         tail_deps=resolved_deps.tail,

esparto/resources/css/esparto.css

@@ -1,3 +1,7 @@
+body {
+    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
+}
+
 h1,
 h2,
 h3,
@@ -55,6 +59,22 @@ p {
     margin-bottom: 0.25em;
 }
 
+a:link {
+    text-decoration: none;
+}
+
+a:visited {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+a:active {
+    text-decoration: none;
+}
+
 .es-figure {
     text-align: center;
     margin: 0;
@@ -141,7 +161,26 @@ p {
     margin: auto;
 }
 
+.es-icon {
+    margin: 0.5em;
+    margin-left: 1em;
+    margin-right: 1em;
+    font-size: 1.8em;
+    color: var(--bs-gray-700) !important;
+    fill: var(--bs-gray-700) !important;
+    height: 0.9em;
+    width: 0.9em;
+}
+
+.es-icon:hover,
+.es-icon:focus {
+    cursor: pointer;
+    color: var(--bs-primary) !important;
+    fill: var(--bs-primary) !important;
+}
+
 @media print {
+
     .es-page-title,
     .es-section-title,
     .es-row-title,

esparto/resources/jinja/base.html.jinja

@@ -26,8 +26,9 @@
 
 <body>
   <!-- Header -->
-  <nav class="navbar d-flex navbar-expand-md navbar-light bg-light mb-3 d-print-none" width="100vw" style="padding: 0; min-height: 1.2rem;">
-      <a class="navbar-brand" style="margin-left: 10vw; padding: 0; font-size: 1rem;" href="#">{{ navbrand }}</a>
+  <nav class="navbar d-flex navbar-expand-md navbar-light bg-secondary mb-3 d-print-none" width="100vw"
+    style="padding: 0; min-height: 1.2rem; --bs-bg-opacity: .1;">
+    <a class="navbar-brand" style="margin-left: 10vw; padding: 0; font-size: 1rem;" href="#">{{ navbrand }}</a>
   </nav>
 
   <!-- Content -->
@@ -36,11 +37,30 @@
   </main>
 
   <!-- Footer -->
-  <footer class="footer d-flex bg-light mt-5 d-print-none" width="100vw" height="2em">
-    <a class="small text-decoration-none text-dark fst-italic font-italic" style="margin-left: 10vw; padding: 0.3em;"
-      href="https://domvwt.github.io/esparto/">
-      esparto
-    </a>
+  <footer class="footer d-flex justify-content-center d-print-none" width="100vw">
+    <div class="btn-group px-2 mt-5 mb-4" role="group">
+      <a title="Esparto Project Page" aria-label="Esparto Project Page" class="es-icon" href="https://domvwt.github.io/esparto/">
+        <svg id="es-link-button" class="bi bi-file-earmark-bar-graph" style="display: block;" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+          <path
+            d="M10 13.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v6zm-2.5.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1zm-3 0a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1z" />
+          <path
+            d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
+        </svg>
+      </a>
+      <a title="Share Document" aria-label="Share Document" >
+        <svg id="share-button" class="es-icon bi bi-share" style="display: none;" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+          <path
+            d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" />
+        </svg>
+      </a>
+      <a title="Print Document" aria-label="Print Document">
+        <svg id="print-button" class="es-icon bi bi-printer" style="display: block;" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+          <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
+          <path
+            d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" />
+        </svg>
+      </a>
+    </div>
   </footer>
 
   <!-- JavaScript -->
@@ -49,6 +69,13 @@
   {{ dep }}
   {% endfor %}
   {% endif %}
+
+  {% if esparto_js %}
+  <script type="text/javascript">
+  {{ esparto_js }}
+  </script>
+  {% endif %}
+
 </body>
 
 </html>

esparto/resources/js/esparto.js

@@ -0,0 +1,33 @@
+// Convert document to text file.
+const getDocumentFile = function () {
+  let filename = document.title + ".html"
+  let docString = new XMLSerializer().serializeToString(document)
+  return new File([docString], filename, { type: "text/html" })
+}
+
+const share_button = document.getElementById('share-button');
+
+// Only show share button if web share API is supported.
+if (navigator.canShare) {
+  share_button.style.display = "block";
+} else {
+  console.log("Web Share API not supported.")
+}
+
+// Share must be triggered by "user activation".
+share_button.addEventListener('click', async () => {
+  try {
+    let docFile = getDocumentFile()
+    let shareData = { files: [docFile] }
+    await navigator.share(shareData)
+  } catch (err) {
+    alert(`Error while sharing document:\n${err}`)
+  }
+});
+
+
+const print_button = document.getElementById('print-button')
+
+print_button.addEventListener('click', () => {
+  window.print()
+});