#73 use tailwind for ok-ish styling

fsktom · Sep 23, 2024 · 158c582 · 158c582 · fsktom · Sep 23, 2024
1 parent 6960b94
commit 158c582
Show file tree

Hide file tree

Showing 12 changed files with 2,422 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,6 @@ endsong_ui/plots/
 
 # folder with HTML pages generated at runtime
 endsong_ui/summaries/
+
+# ...
+endsong_ui/templates/node_modules/
diff --git a/endsong_ui/src/main.rs b/endsong_ui/src/main.rs
@@ -51,7 +51,9 @@ fn main() {
     // test_two(&entries);
     // test_plot(&entries);
 
-    ui::start(&entries);
+    summarize::artist(&entries, &Artist::new("Sabaton"));
+
+    // ui::start(&entries);
 }
 
 /// tests various [`print`][crate::print] and [`endsong::gather`] functions

diff --git a/endsong_ui/src/summarize.rs b/endsong_ui/src/summarize.rs
@@ -27,6 +27,10 @@ struct ArtistSummary {
     first_listen: DateTime<Local>,
     /// Date of last listen
     last_listen: DateTime<Local>,
+    /// Current time
+    now: DateTime<Local>,
+    /// Names of the files used for the [`SongEntries`]
+    filenames: Vec<String>,
 }
 
 /// Generates an HTML summary page of an [`Artist`]
@@ -56,6 +60,14 @@ pub fn artist(entries: &SongEntries, artist: &Artist) {
         .unwrap()
         .timestamp;
 
+    let now = Local::now();
+
+    let filenames = entries
+        .files_used
+        .iter()
+        .map(|p| p.file_name().unwrap().to_string_lossy().into_owned())
+        .collect();
+
     let page = ArtistSummary {
         name: std::rc::Rc::clone(&artist.name),
         top,
@@ -65,14 +77,16 @@ pub fn artist(entries: &SongEntries, artist: &Artist) {
         percentage_of_plays,
         first_listen,
         last_listen,
+        now,
+        filenames,
     };
     std::fs::create_dir_all("summaries").unwrap();
     let path = format!("summaries/{} summary.html", artist.name);
     std::fs::write(&path, page.render().unwrap()).unwrap();
-    std::process::Command::new("open")
-        .arg(&path)
-        .output()
-        .unwrap();
+    // std::process::Command::new("open")
+    //     .arg(&path)
+    //     .output()
+    //     .unwrap();
 }
 
 /// Makes a list of aspects with their total playcount sorted by their

diff --git a/endsong_ui/templates/.prettierrc b/endsong_ui/templates/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/endsong_ui/templates/README.md b/endsong_ui/templates/README.md
@@ -0,0 +1,14 @@
+# Working with templates in endsong_ui
+
+Use node, install the dependencies.
+
+Format the .html files with `prettier` always (even if I don't
+like self-closing void tags).
+
+Run
+
+```shell
+npx tailwindcss -i base_style.css -o tailwind_style.css --watch
+```
+
+in the terminal.
diff --git a/endsong_ui/templates/artist.html b/endsong_ui/templates/artist.html
@@ -1,25 +1,58 @@
-<head>
-  <title>{{ name }}</title>
-</head>
-<body>
-  <h1>Summary of {{ name }}</h1>
-  <h2>General info</h2>
-  <ul>
-    <li>Total playcount: {{ plays }}</li>
-    <li>First listen: {{ first_listen }}</li>
-    <li>Last listen: {{ last_listen }}</li>
-    <li>% of total plays: {{ percentage_of_plays }}%</li>
-  </ul>
-  <h2>Top {{ top }} songs</h2>
-  <ol>
-    {% for song in songs -%}
-    <li>{{ song.0 }} | {{ song.1 }} plays</li>
-    {% endfor %}
-  </ol>
-  <h2>Top {{ top }} albums</h2>
-  <ol>
-    {% for album in albums -%}
-    <li>{{ album.0 }} | {{ album.1 }} plays</li>
-    {% endfor %}
-  </ol>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ name }}</title>
+    <style>
+      /* disable html.validate.styles in VS Code */
+      {% include "tailwind_style.css" %}
+    </style>
+  </head>
+</html>
+<body class="flex flex-col items-center justify-evenly gap-4 bg-slate-100">
+  <header class="p-4 text-center text-3xl">
+    <h1>Summary of {{ name }}</h1>
+  </header>
+  <main class="flex flex-col items-center gap-8">
+    <section class="flex">
+      <article
+        class="flex w-96 flex-col gap-3 rounded-lg border border-gray-200 p-6 shadow"
+      >
+        <h2 class="self-center text-xl font-bold">General info</h2>
+        <ul class="list-none">
+          <li>Total playcount: {{ plays }}</li>
+          <li>First listen: {{ first_listen }}</li>
+          <li>Last listen: {{ last_listen }}</li>
+          <li>% of total plays: {{ percentage_of_plays }}%</li>
+        </ul>
+      </article>
+    </section>
+    <section class="flex gap-16">
+      <article
+        class="flex w-96 flex-col gap-3 rounded-lg border border-gray-200 p-6 shadow"
+      >
+        <h2 class="self-center text-xl font-bold">Top {{ top }} songs</h2>
+        <ol class="list-decimal">
+          {% for song in songs -%}
+          <li class="ml-6">{{ song.0 }} | {{ song.1 }} plays</li>
+          {% endfor %}
+        </ol>
+      </article>
+      <article
+        class="flex w-96 flex-col gap-3 rounded-lg border border-gray-200 p-6 shadow"
+      >
+        <h2 class="self-center text-xl font-bold">Top {{ top }} albums</h2>
+        <ol class="list-decimal">
+          {% for album in albums -%}
+          <li class="ml-6">{{ album.0 }} | {{ album.1 }} plays</li>
+          {% endfor %}
+        </ol>
+      </article>
+    </section>
+  </main>
+  <footer class="p-4 text-center text-xs">
+    <p>Generated on {{now}} with files:</p>
+    <p>|{% for file in filenames %} {{file}} |{% endfor %}</p>
+  </footer>
 </body>
diff --git a/endsong_ui/templates/base_style.css b/endsong_ui/templates/base_style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;