add named-tab

resources/public/style/custom.css

@@ -4,7 +4,9 @@ html {
 
 pre,
 code {
-  font: 0.8em Monaco, monospace;
+  font:
+    0.8em Monaco,
+    monospace;
   font-family: Monaco, monospace;
 }
 
@@ -45,3 +47,31 @@ ol.footnote {
 /* ol.footnote li { */
 /*   list-style-position: inside; */
 /* } */
+
+td.listing-row {
+  vertical-align: top;
+  height: 0;
+}
+
+td.pad-right {
+  padding-right: 0.5em;
+}
+
+td.pad-left {
+  padding-left: 0.5em;
+}
+
+table.listing-table {
+  border-collapse: separate;
+  border-spacing: 0 1em;
+}
+
+img.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.max-width-gif-316 {
+  max-width: 316px;
+}

src/li/laratel/blog.clj

@@ -14,16 +14,14 @@
      {:title "Luciano Laratelli's Blog"
       :description "Listing of Luciano Laratelli's blog posts"
       :has-code? nil}
-     [:p
-      [:table {:style
-               {:border-collapse "collapse"}}
+     [:table.listing-table
 
-       (for [date ordered-dates]
-         (let [{:keys [date-str title blog-post-id]} (get posts-by-date date)]
-           [:tr
-            (table-row date-str)
-            (table-row
-             [:a {:href (str "/blog/" blog-post-id)} title])]))]])))
+      (for [date ordered-dates]
+        (let [{:keys [date-str title blog-post-id]} (get posts-by-date date)]
+          [:tr.listing-row
+           [:td.listing-row.pad-right date-str]
+           [:td.listing-row.pad-left
+            [:a {:href (str "/blog/" blog-post-id)} title]]]))])))
 
 (defn blog-post [{{:keys [blog-post-id]} :path-params}]
   (let [{:keys [body title description date-str]}

src/li/laratel/core.clj

@@ -6,7 +6,7 @@
    [li.laratel.cv :as cv]
    [li.laratel.home :as home]
    [li.laratel.lowering :as lowering]
-   ;; [li.laratel.programs.programs :as programs]
+   [li.laratel.programs.programs :as programs]
    [org.httpkit.server :as http]
    [reitit.ring :as ring]
    [ring.middleware.defaults :refer [api-defaults wrap-defaults]]
@@ -52,11 +52,10 @@
                           :parameters {:path {:blog-post-id string?}}}]]
 
       ["cv" {:get cv/cv}]
-      ;; ["programs"
-      ;;  ["" {:get programs/programs}]
-      ;;  ["/:program-id" {:get programs/program
-      ;;                   :parameters {:path {:program-id string?}}}]]
-      ]])
+      ["programs"
+       ["" {:get programs/programs}]
+       ["/:program-id" {:get programs/program
+                        :parameters {:path {:program-id string?}}}]]]])
 
    (ring/routes
      ;; Handle trailing slash in routes - add it + redirect to it

src/li/laratel/lowering.clj

@@ -72,7 +72,6 @@
   ;; reason. Didn't want to spend time debugging
   (let [[_ _ content] (cm/parse-body content {:markdown/link-ref lower-link-ref})
         content (conj content [:span " "] [:a {:href (str "#fnref-" id)} "↩"])]
-    (println content)
     [:li {:id (str "fn-" id)}
      [:div {"display" "inline"} content]]))
 

src/li/laratel/programs/programs.clj

@@ -0,0 +1,46 @@
+(ns li.laratel.programs.programs
+  (:require
+   [li.laratel.util :as util]))
+
+(defn programs [_request]
+  (util/site-page
+   {:title "Luciano Laratelli's Programs"
+    :description "Listing of some smaller programs written by Luciano Laratelli"}
+   [:table.listing-table
+    [:tr.lsiting-row
+     [:td.listing-row.pad-right "2024-03-05"]
+     [:td.listing-row.pad-left [:a {:href (str "/programs/" "named-tab")} "NamedTab"] " is a silly-but-useful tool that lets you set the title of a page."]]]
+
+;; [:p
+   ;;  [:table {:style
+   ;;           {:border-collapse "collapse"}}
+   ;;   [:tr
+   ;;    (util/table-row
+   ;;     [:a {:href (str "/programs/" "reconciler")} "Reconciler"])]]]
+   ))
+
+#_{:clj-kondo/ignore [:clojure-lsp/unused-public-var]}
+(defn named-tab []
+  (util/site-page
+   {:title "NamedTab"
+    :description "NamedTab is a silly-but-useful tool that lets you set the title of a page."}
+   [:p
+    "This page lets you set the name of the current tab. It uses "
+    [:a {:href "https://shields.io/"} "Shields.io"]
+    " to generate a favicon and will maintain a consistent color for the same
+    string. I use it in conjuction with "
+    [:a {:href "https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/"} "Tree Style Tab"]
+    " and some "  [:a {:href "https://git.sr.ht/~luciano/.home/tree/main/item/userChrome.css"} "CSS"]
+    " my friend Elijah dug up (thanks again!) to achieve this functionality: "
+    [:p [:img.center.max-width-gif-316 {:src "/img/named-tab.gif"
+                                        :loading "lazy"}]]
+    [:div
+     "Your desired tab name:"
+     [:input {:id "the-input"}]
+     [:script
+      "const updateTitle = () => {\n            const title = document.getElementById('the-input').value;\n            document.title = title;\n        }\n\n        // https://stackoverflow.com/a/260876\n        const changeFavicon = (src) => {\n            var link = document.querySelector(\"link[rel~='icon']\");\n            if (!link) {\n                link = document.createElement('link');\n                link.rel = 'icon';\n                document.head.appendChild(link);\n            }\n            link.href = src;\n        }\n\n        // https://stackoverflow.com/a/16348977\n        const stringToColor = (str) => {\n            let hash = 0;\n            str.split('').forEach(char => {\n                hash = char.charCodeAt(0) + ((hash << 5) - hash)\n            })\n            let color = ''\n            for (let i = 0; i < 3; i++) {\n                const value = (hash >> (i * 8)) & 0xff\n                color += value.toString(16).padStart(2, '0')\n            }\n            return color\n        }\n\n        const updateFavicon = () => {\n            const title = document.getElementById('the-input').value;\n            const color = stringToColor(title);\n            const faviconUrl = `https://img.shields.io/badge/${title[0].toUpperCase()}-${color}`\n\n            changeFavicon(faviconUrl);\n        }\n\n        document.getElementById('the-input').addEventListener(\"change\", updateTitle);\n        document.getElementById('the-input').addEventListener(\"change\", updateFavicon);"]]]))
+
+(defn program [{{:keys [program-id]} :path-params}]
+  ;;sorry
+  (let [program-fn (ns-resolve (find-ns 'li.laratel.programs.programs) (symbol program-id))]
+    (program-fn)))

src/li/laratel/util.clj

@@ -49,7 +49,7 @@
     [:a.in-nav {:href "/"} "Home"]
     [:a.in-nav {:href "/blog"} "Blog"]
     [:a.in-nav {:href "/cv"} "CV"]
-    ;; [:a.in-nav {:href "/programs"} "Programs"]
+    [:a.in-nav {:href "/programs"} "Programs"]
     ;; [:a.in-nav {:href "/projects"} "Projects"]
     ]])