Script readme table updates (#32)

* add scripts/update-readme-table.py

* call update-readme-table.py from scripts/render-tikz.py

* update readme

* show file length to section title

* pnpm add -D @sveltejs/vite-plugin-svelte

scripts/render-tikz.py

@@ -1,4 +1,5 @@
 import os
+import runpy
 import subprocess
 import sys
 
@@ -58,3 +59,6 @@
 print("\n--- zopfli: compress ---")
 os.system(f"zopflipng -y {basepath}.png {basepath}.png")
 os.system(f"zopflipng -y {basepath}-hd.png {basepath}-hd.png")
+
+print("Update readme table listing all TikZ figures in assets/")
+runpy.run_path("scripts/update_readme.py")

scripts/update-readme-table.py

@@ -0,0 +1,46 @@
+"""Auto-update readme table listing all TikZ figures in assets/."""
+
+import os
+import re
+from glob import glob
+from itertools import zip_longest
+
+MOD_DIR = os.path.dirname(os.path.abspath(__file__))
+ROOT = os.path.dirname(MOD_DIR)
+TEX_DIR = f"{ROOT}/assets"
+
+tex_paths = sorted(glob(f"{TEX_DIR}/**/*.tex"))
+
+md_table = f"| {' ' * 22} | {' ' * 22} |\n| :---: | :---: |\n"
+
+for path1, path2 in zip_longest(tex_paths[::2], tex_paths[1::2]):
+    dir1, dir2 = map(os.path.dirname, (path1, path2 or ""))
+    fig1, fig2 = map(os.path.basename, (dir1, dir2))
+
+    # file name row
+    dir_link1 = f"[`{fig1}`](https://janosh.github.io/tikz/{fig1})"
+    dir_link2 = f"[`{fig2}`](https://janosh.github.io/tikz/{fig2})" if path2 else ""
+    md_table += f"| {dir_link1} | {dir_link2} |\n"
+
+    # image row
+    img_link1 = f"![`{fig1}.png`](assets/{fig1}/{fig1}.png)"
+    img_link2 = f"![`{fig2}.png`](assets/{fig2}/{fig2}.png)" if path2 else ""
+    md_table += f"| {img_link1} | {img_link2} |\n"
+
+
+with open(f"{ROOT}/README.md", "r") as file:
+    readme = file.read()
+
+# insert table markdown between "## Images\n" and "## Scripts\n" headings
+readme = re.sub(
+    r"(?<=## Images\n)(.*)(?=## Scripts\n)",
+    f"\n{md_table}\n",
+    readme,
+    flags=re.DOTALL,
+)
+
+with open(f"{ROOT}/README.md", "w") as file:
+    file.write(readme)
+
+# run pre-commit on readme to format white space in table
+os.system("pre-commit run --files readme.md")

site/package.json

@@ -18,14 +18,15 @@
   "devDependencies": {
     "@iconify/svelte": "^3.1.6",
     "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/kit": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/js-yaml": "^4.0.9",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "eslint": "^8.56.0",
     "eslint-plugin-svelte": "^2.35.1",
     "highlight.js": "^11.9.0",
-    "image-size": "^1.1.0",
+    "image-size": "^1.1.1",
     "js-yaml": "^4.1.0",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
@@ -42,6 +43,6 @@
     "svelte2tsx": "^0.6.27",
     "typescript": "5.3.3",
     "unified": "^11.0.4",
-    "vite": "^5.0.10"
+    "vite": "^5.0.11"
   }
 }

site/src/lib/CodeBlock.svelte

@@ -16,7 +16,10 @@
 
 <div>
   {#if title}
-    <h3>{title}</h3>
+    <h3>
+      {title}
+      <small>({code.split(`\n`).length} lines)</small>
+    </h3>
   {/if}
   <aside>
     {#if link}<a href={url}>
@@ -44,6 +47,11 @@
     padding: 2pt 8pt;
     border-radius: 3pt 3pt 0 0;
   }
+  h3 small {
+    color: #fff;
+    font-weight: 200;
+    padding-left: 6pt;
+  }
   aside {
     position: absolute;
     top: 1em;

site/src/routes/[slug]/+page.svelte

@@ -99,7 +99,6 @@
 <h2>
   <Icon icon="octicon:code" inline />&nbsp; Code
 </h2>
-<p>{code.split(`\n`).length} lines</p>
 
 <CodeBlock {code} title="{slug}.tex" {link} />
 <PrevNext
@@ -151,7 +150,9 @@
     padding: 4pt 1ex;
     border-radius: 4pt;
     margin: 2pt;
-    transition: color 0.3s, background-color 0.3s;
+    transition:
+      color 0.3s,
+      background-color 0.3s;
     font-size: 16pt;
   }
   a.large-link:hover {