fe: add bb task that treeshakes pico.min.css

- add a bb task that uses PurgeCSS to treeshake pico.min.css
- add a bb task that cleanly builds Bellsprout
- use purged pico css in Bellsprout
- write docs about Bellsprout

6 files changed, 64 insertions, 24 deletions

diff --git a/.gitignore b/.gitignore
index 3c4c57f..e3e3374 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,5 +17,6 @@ pom.xml.asc
 /config.edn
 /data/webmention.edn
 /data/avatars
-/bellsprout/.clj-kondo/.cache/v1
+/bellsprout/.clj-kondo
 /bellsprout/.lsp/.cache
+/bellsprout/resources/public/css/pico.purged.css
diff --git a/bellsprout/README.md b/bellsprout/README.md
index 97727a3..5b7524a 100644
--- a/bellsprout/README.md
+++ b/bellsprout/README.md
@@ -1,40 +1,27 @@
 # bellsprout
 
-FIXME: Write a one-line description of your library/project.
+Bellsprout is a HTML + CSS + ClojureSript SPA that is meant to work with Weepinbell.
 
-## Overview
+## Features 
 
-FIXME: Write a paragraph about the library/project and highlight its goals.
+- A form that sends webmention given source and target 
+- Query webmentions and display them as cards
 
 ## Setup
 
-To get an interactive development environment run:
+You need Leiningen, Babashka and NPM to get started.
 
+To get an interactive development environment run:
 
     lein figwheel
 
-and open your browser at [localhost:3449](http://localhost:3449/).
-This will auto compile and send all changes to the browser without the
-need to reload. After the compilation process is complete, you will
-get a Browser Connected REPL. An easy way to try it is:
-
-    (js/alert "Am I connected?")
-
-and you should see an alert in the browser window.
-
-To clean all compiled files:
-
-    lein clean
-
 To create a production build run:
 
-    lein do clean, cljsbuild once min
+    bb build
 
-And open your browser in `resources/public/index.html`. You will not
-get live reloading, nor a REPL. 
+And open your browser in `resources/public/index.html`.
 
 ## License
 
-Copyright © 2014 FIXME
+Bellsprout is free software licensed under the GNU Affero General Public License.
 
-Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.
diff --git a/bellsprout/bb.edn b/bellsprout/bb.edn
new file mode 100644
index 0000000..2897b0c
--- /dev/null
+++ b/bellsprout/bb.edn
@@ -0,0 +1,11 @@
+{:paths ["scripts"]

+ :tasks {install-purgecss {:doc "Make sure purgeCSS is available"

+                           :task (shell "npm" "i" "-g" "purgecss")}

+         treeshake {:doc "Treeshake pico.min.css"

+                    :requires ([treeshake :as ts])

+                    :task (ts/treeshake-pico)

+                    :depends [install-purgecss]}

+         build {:doc "Build ClojureScript"

+                :task (shell "lein do clean, cljsbuild once min")

+                :depends [treeshake]}}}

+

diff --git a/bellsprout/resources/public/index.html b/bellsprout/resources/public/index.html
index 4e9301a..135b236 100644
--- a/bellsprout/resources/public/index.html
+++ b/bellsprout/resources/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="css/pico.min.css" rel="stylesheet" type="text/css">
+    <link href="css/pico.purged.css" rel="stylesheet" type="text/css">
     <link rel="icon" href="/bellsprout.png">
     <title>Bellsprout</title>
     <style>
diff --git a/bellsprout/scripts/treeshake.clj b/bellsprout/scripts/treeshake.clj
new file mode 100644
index 0000000..6e9a786
--- /dev/null
+++ b/bellsprout/scripts/treeshake.clj
@@ -0,0 +1,33 @@
+#!/usr/bin/env bb
+(ns treeshake)
+
+(require '[babashka.tasks :refer [shell]])
+(require '[babashka.fs :as fs])
+(require '[cheshire.core :as json])
+
+(defn treeshake [content original target]
+  (let [shake (partial shell {:out :string}
+                 "purgecss" 
+                 "--css" original 
+                 "--content")
+        out (apply shake content)
+      css (-> out :out json/parse-string first (get "css"))]
+  (spit target css)))
+
+(def original-css "resources/public/css/pico.min.css")
+(def target-css "resources/public/css/pico.purged.css")
+(def html-file "resources/public/index.html")
+(def js-file "src/bellsprout/core.cljs")
+
+(defn treeshake-pico []
+  (treeshake [html-file js-file] original-css target-css)
+  (if (fs/exists? target-css)
+    (let [size #(.length (java.io.File. %))
+          old-size (size original-css)
+          new-size (size target-css)]
+      (println "Tree shaken. Purged CSS file size:" new-size "Bytes" 
+               (str "(" (- new-size old-size ) " Bytes)")))
+    (println "Something went wrong.")))
+
+(defn -main []
+  (treeshake-pico))
diff --git a/doc/ARCHITECTURE.md b/doc/ARCHITECTURE.md
index 364ae50..684f7e7 100644
--- a/doc/ARCHITECTURE.md
+++ b/doc/ARCHITECTURE.md
@@ -3,5 +3,13 @@
 > [!note] 

 > Before this document is finished, one can read [core.clj](https://codeberg.org/eltrac/weepinbell/src/branch/master/src/weepinbell/core.clj). It's basically an entry point where everything is loaded and started. Follow it's dependencies and read docstrings. 

 

+## Backend

+

 TODO

 

+## Frontend 

+

+Weepinbell can run headlessly. Everything works without a frontend. 

+

+For information about the official frontend, see [Bellsprout](../bellsprout/README.md)

+