tweak docs CSS, add site footer

readme.md

@@ -24,9 +24,13 @@ A toolkit for visualizations in materials informatics.
 pip install pymatviz
 ```
 
+## API Docs
+
+See <https://janosh.github.io/pymatviz/api>.
+
 ## Usage
 
-See the Jupyter notebooks under [`examples/`](examples) for how to use `pymatviz`. <slot name="docs-link" />
+See the Jupyter notebooks under [`examples/`](examples) for how to use `pymatviz`.
 
 |                                                                                                                        |                                      |                                                                                                              |                                                                                                                                       |
 | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |

setup.cfg

@@ -75,7 +75,7 @@ disallow_untyped_defs = true
 warn_redundant_casts = true
 warn_unused_ignores = true
 show_error_codes = true
-implicit_optional = true
+no_implicit_optional = false
 
 [codespell]
 ignore-words-list = hist

site/package.json

@@ -15,6 +15,7 @@
     "make-api-docs": "rm -f src/routes/api/*.md && cd .. && lazydocs pymatviz --output-path site/src/routes/api --no-watermark --src-base-url https://github.com/janosh/pymatviz/blob/main"
   },
   "devDependencies": {
+    "@iconify/svelte": "^3.0.1",
     "@sveltejs/adapter-static": "1.0.0",
     "@sveltejs/kit": "1.0.1",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",

site/src/app.css

@@ -15,10 +15,19 @@
 }
 body {
   background: var(--night);
-  padding: calc(1ex + 2vw);
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   color: var(--text-color);
   line-height: 1.5;
+  margin: 0;
+}
+body > div {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+main {
+  padding: calc(1ex + 2vw);
+  flex: 1;
 }
 button {
   color: var(--text-color);
@@ -37,6 +46,15 @@ a {
 a:hover {
   color: orange;
 }
+a.link {
+  padding: 0 4pt;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 3pt;
+  transition: 0.2s;
+}
+a.link[aria-current='page'] {
+  color: mediumseagreen;
+}
 code {
   overflow-wrap: break-word;
   padding: 1pt 3pt;
@@ -78,13 +96,8 @@ img {
 tbody tr:nth-child(odd) {
   background: black;
 }
-
 h1 {
-  display: flex;
-  font-size: clamp(2rem, 2rem + 2vw, 3rem);
-  place-items: center;
-  place-content: center;
-  gap: 6pt;
+  text-align: center;
 }
 .hide-in-docs {
   display: none;
@@ -130,3 +143,7 @@ aside.toc.desktop {
   left: calc(50vw + 50em / 2);
   max-width: 16em;
 }
+
+caption {
+  display: block;
+}

site/src/app.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="@sveltejs/kit" />
 /// <reference types="mdsvex/globals" />
+
+declare module '*.md'

site/src/lib/Footer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { repository } from '$site/package.json'
+  import Icon from '@iconify/svelte'
+</script>
+
+<footer>
+  Maintained by Janosh Riebesell
+  <a href="mailto:[email protected]"><Icon icon="mdi:email" inline /></a>
+  on
+  <a href={repository}><Icon icon="octicon:mark-github" inline /></a>
+</footer>
+
+<style>
+  footer {
+    display: flex;
+    gap: 1ex;
+    place-content: center;
+    place-items: center;
+    padding: 3vh 3vw;
+    background: #00061a;
+  }
+</style>

site/src/routes/+layout.svelte

@@ -1,13 +1,25 @@
 <script lang="ts">
   import { page } from '$app/stores'
+  import Footer from '$lib/Footer.svelte'
   import { repository } from '$site/package.json'
+  import { onMount } from 'svelte'
   import GitHubCorner from 'svelte-github-corner'
   import Toc from 'svelte-toc'
   import '../app.css'
 
   $: headingSelector = `main :is(${
     $page.url.pathname === `/api` ? `h1, h2, h3, h4` : `h2`
   }):not(.toc-exclude)`
+
+  const site_url = 'https://janosh.github.io/pymatviz'
+  onMount(() => {
+    for (const link of [
+      ...document.querySelectorAll(`a[href^='${site_url}']`),
+    ] as HTMLAnchorElement[]) {
+      link.href = link.href.replace(site_url, ``)
+      link.text = link.text.replace(site_url, ``)
+    }
+  })
 </script>
 
 <Toc {headingSelector} breakpoint={1250} warnOnEmpty={false} />
@@ -22,6 +34,8 @@
   <slot />
 </main>
 
+<Footer />
+
 <style>
   main {
     margin: auto;

site/src/routes/+page.svelte

@@ -2,6 +2,14 @@
   import Readme from '$root/readme.md'
 </script>
 
-<Readme>
-  <span slot="docs-link">Or consult the <a href="/api">API docs</a>.</span>
-</Readme>
+<Readme />
+
+<style>
+  :global(h1[align='center']) {
+    display: flex;
+    font-size: clamp(2rem, 2rem + 2vw, 3rem);
+    place-items: center;
+    place-content: center;
+    gap: 6pt;
+  }
+</style>

site/src/routes/api/+page.svelte

@@ -2,12 +2,17 @@
   export let data
 </script>
 
+<h1 class="toc-exclude">API</h1>
+
 {@html data.html}
 
 <style>
+  /* select all but first module h1s */
+  :global(h1[id^='module-']:not(:nth-of-type(2))) {
+    margin: 4em 0 0;
+  }
   :global(hr) {
     border: none;
-    margin: 3em;
   }
   :global(code) {
     line-height: 1em;