Commits: 8
Implement the first step of spec using miniserve
Do not escape the observed text (by passing to pr-str). Instead
implement a new function tbb/prettify to format Clojure objects.
Also, implement tbb/send-snippet to for snippet type of observation.
index b270417..1429264 100644
--- a/spec/interpreters/tbb.clj
+++ b/spec/interpreters/tbb.clj
@@ -70,9 +70,20 @@
=
=(defn send-text [text]
= (println (json/generate-string {:type "Text"
- :content (pr-str text)}))
+ :content text}))
= text)
=
+(defn send-snippet
+ ([language meta content]
+ (println (json/generate-string {:type "Snippet"
+ :content content
+ :language language
+ :meta meta}))
+ content)
+
+ ([language content]
+ (send-snippet language "" content)))
+
=(defn send-link
= ([url]
= (println (json/generate-string {:type "Link"
@@ -85,6 +96,10 @@
= :label label}))
= url))
=
+(defn prettify [value]
+ "Formats Clojure / EDN value and returns a string"
+ (with-out-str (pprint value)))
+
=(defn table->maps [table]
= ;; Each column in a table becomes a map in an array. Keys are derived from the first row.
= (let [[header & rows] tableindex 4dac78f..61f7fe2 100644
--- a/spec/interpreters/web_automation.clj
+++ b/spec/interpreters/web_automation.clj
@@ -1,10 +1,35 @@
=(ns web-automation
- (:require [tbb]
- [taoensso.timbre :as timbre]))
+ (:require
+ [babashka.fs :as fs]
+ [babashka.process :refer [destroy-tree process]]
+ [taoensso.timbre :as timbre]
+ [tbb]))
+
+(def server-log-file (str (fs/create-temp-file {:prefix "btc-miniserve" :suffix ".log"})))
+(def miniserve-process (atom nil))
+
+(tbb/implement-step
+ "Serve the {0} directory on port {1}"
+ (fn [path port data]
+ (->> {:log-file server-log-file
+ :path path
+ :port port}
+ (tbb/prettify)
+ (tbb/send-snippet "edn"))
+ (reset! miniserve-process
+ (process {:err server-log-file
+ :out server-log-file}
+ "miniserve --index index.html --port" port path))
+ (Thread/sleep 250)
+ (-> server-log-file
+ (slurp)
+ (tbb/send-text))))
=
=(defn -main [& args]
= (timbre/info "Interpreter start")
= (tbb/ready)
+ (when @miniserve-process
+ (destroy-tree @miniserve-process))
= (timbre/info "Interpreter done"))
=
=(when (= *file* (System/getProperty "babashka.file"))index 3487584..4ddf9fa 100644
--- a/spec/layout.md
+++ b/spec/layout.md
@@ -8,7 +8,7 @@ interpreter: bb spec/interpreters/web_automation.clj
=
=This scenario asserts that page content fits inside the viewport, i.e. there is no need for horizontal scrolling
=
- * Serve the website on the port `1234`
+ * Serve the `.` directory on port `1234`
= * Navigate to `http://localhost:1234/`
= * The title should be `Better Tech Club`
= * The content is not wider than the viewportImplement the rest of the spec steps
Using https://github.com/clj-commons/etaoin and Geckodriver. The spec evaluates with error, because the page content is wider than the window. So we are in a red state of TDD now.
index 861094e..cfcb5fa 100644
--- a/flake.nix
+++ b/flake.nix
@@ -38,6 +38,7 @@
= babashka
= clojure-lsp
= cljstyle
+ geckodriver
= ];
= }
= ];index 5837a2a..5111e87 100644
--- a/spec/interpreters/bb.edn
+++ b/spec/interpreters/bb.edn
@@ -1 +1,2 @@
-{:paths ["."]}
+{:paths ["."]
+ :deps {etaoin/etaoin {:mvn/version "1.1.43"}}}index 61f7fe2..76c2804 100644
--- a/spec/interpreters/web_automation.clj
+++ b/spec/interpreters/web_automation.clj
@@ -3,10 +3,12 @@
= [babashka.fs :as fs]
= [babashka.process :refer [destroy-tree process]]
= [taoensso.timbre :as timbre]
+ [etaoin.api :as e]
= [tbb]))
=
=(def server-log-file (str (fs/create-temp-file {:prefix "btc-miniserve" :suffix ".log"})))
=(def miniserve-process (atom nil))
+(def web-driver (atom nil))
=
=(tbb/implement-step
= "Serve the {0} directory on port {1}"
@@ -25,9 +27,32 @@
= (slurp)
= (tbb/send-text))))
=
+(tbb/implement-step
+ "Navigate to {0}"
+ (fn [url data]
+ (e/go @web-driver url)))
+
+(tbb/implement-step
+ "The title should be {0}"
+ (fn [expected data]
+ (tbb/tis =
+ expected
+ (e/get-title @web-driver))))
+
+(tbb/implement-step
+ "The content is not wider than the viewport"
+ (fn [data]
+ (let [content-width (e/js-execute @web-driver "return document.querySelector(`html`).scrollWidth")
+ window-width (e/js-execute @web-driver "return window.innerWidth")]
+ (tbb/tis >=
+ window-width
+ content-width))))
+
=(defn -main [& args]
= (timbre/info "Interpreter start")
+ (reset! web-driver (e/firefox))
= (tbb/ready)
+ (e/quit @web-driver)
= (when @miniserve-process
= (destroy-tree @miniserve-process))
= (timbre/info "Interpreter done"))Fix the horizontal scroll bug
Spotted by Daniel and now evaluated with TBB spec, it's time to fix it!
index 7f6aa29..21af2c3 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
= background: oklch(20% 0% 0deg);
= color: oklch(80% 0% 0deg);
= width: 100%;
- padding: 2rem;
+ padding: 2rem 0;
= font-size: 0.8rem;
= text-align: center;
= }Add more observations to the content width test
index 76c2804..3d85e45 100644
--- a/spec/interpreters/web_automation.clj
+++ b/spec/interpreters/web_automation.clj
@@ -42,8 +42,14 @@
=(tbb/implement-step
= "The content is not wider than the viewport"
= (fn [data]
- (let [content-width (e/js-execute @web-driver "return document.querySelector(`html`).scrollWidth")
- window-width (e/js-execute @web-driver "return window.innerWidth")]
+ (let [content-script "return document.querySelector(`html`).scrollWidth"
+ window-script "return window.innerWidth"
+ content-width (e/js-execute @web-driver content-script)
+ window-width (e/js-execute @web-driver window-script)]
+ (tbb/send-text (str "The content width is " content-width "px. It was measured with the following script:"))
+ (tbb/send-snippet "javascript" content-script)
+ (tbb/send-text (str "The window width is " window-width "px. It was measured with the following script:"))
+ (tbb/send-snippet "javascript" window-script)
= (tbb/tis >=
= window-width
= content-width))))Correct alt text and add title to the main heading
index 21af2c3..6ce2063 100644
--- a/index.html
+++ b/index.html
@@ -94,7 +94,12 @@
=
= <main>
= <h1>
- <img id="big-logo" src="logo.svg" alt="FOSS for Normies logo" />
+ <img
+ id="big-logo"
+ src="logo.svg"
+ alt="Better Tech Club logo"
+ title="Better Tech Club"
+ />
= </h1>
= <p>
= We are starting a network of <strong>local communityWrite bold reasons why our tech is better
new file mode 100644
index 0000000..5242ac0
Binary files /dev/null and b/fonts/CooperHewitt-Heavy.woff differindex 7a9a8d3..e0204fd 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,12 @@
= <meta name="apple-mobile-web-app-title" content="Better Tech Club" />
= <link rel="manifest" href="/site.webmanifest" />
= <style type="text/css" media="screen">
+ @font-face {
+ font-family: "Cooper Hewitt";
+ src: url("fonts/CooperHewitt-Heavy.woff") format("woff2");
+ font-weight: 800;
+ }
+
= html, body {
= background: #003399;
= min-height: 100%;
@@ -33,6 +39,15 @@
= max-height: 60vh;
= }
=
+ p {
+ text-align: justify;
+ }
+
+ h2 {
+ font-size: 1.2em;
+ align-self: start;
+ }
+
= main {
= display: flex;
= flex-direction: column;
@@ -81,6 +96,25 @@
= float: left;
= }
= }
+ #reasons-why {
+ width: 100%;
+ padding: 0;
+ font-size: 4rem;
+ font-weight: 800;
+ font-family: "Cooper Hewitt";
+ text-align: left;
+ margin-top: 0;
+
+ -webkit-text-fill-color: oklch(80% 0% 0deg);
+ -webkit-text-stroke-width: 2px;
+ -webkit-text-stroke-color: oklch(20% 0% 0deg);
+
+ strong {
+ -webkit-text-fill-color: oklch(90% 0% 0deg);
+ -webkit-text-stroke-width: 2px;
+ -webkit-text-stroke-color: oklch(25% 0% 0deg);
+ text-decoration: none;
+ }
= </style>
= </head>
= <body>
@@ -101,6 +135,22 @@
= title="Better Tech Club"
= />
= </h1>
+
+ <h2>Why is our tech better?</h2>
+ <p id="reasons-why">
+ Made with <strong>love</strong> and <strong>care</strong>,
+ it gets better every day.
+ Our tech <strong>respects</strong> you as a human being:
+ respects your <strong>dignity</strong>, your <strong>privacy</strong>,
+ your <strong>intelligence</strong>, your <strong>well-being.</strong>
+ It's <strong>sustainable</strong> and <strong>fair</strong>.
+ It belongs to you and me.
+ It makes us a <strong>community.</strong>
+ You are among friends. You are not the product.
+ You deserve <strong>better</strong>.
+ </p>
+
+ <h2>What are we doing?</h2>
= <p>
= We are starting a network of <strong>local community
= groups</strong> to promote and support free and open sourceMake the reasons text size responsive
index e0204fd..cd5cf63 100644
--- a/index.html
+++ b/index.html
@@ -99,19 +99,18 @@
= #reasons-why {
= width: 100%;
= padding: 0;
- font-size: 4rem;
+ font-size: min(4rem, 10vw);
= font-weight: 800;
= font-family: "Cooper Hewitt";
= text-align: left;
= margin-top: 0;
=
= -webkit-text-fill-color: oklch(80% 0% 0deg);
- -webkit-text-stroke-width: 2px;
+ -webkit-text-stroke-width: 0.05em;
= -webkit-text-stroke-color: oklch(20% 0% 0deg);
=
= strong {
= -webkit-text-fill-color: oklch(90% 0% 0deg);
- -webkit-text-stroke-width: 2px;
= -webkit-text-stroke-color: oklch(25% 0% 0deg);
= text-decoration: none;
= }Lighter text stroke, fix curly braces
index cd5cf63..9c59035 100644
--- a/index.html
+++ b/index.html
@@ -106,7 +106,7 @@
= margin-top: 0;
=
= -webkit-text-fill-color: oklch(80% 0% 0deg);
- -webkit-text-stroke-width: 0.05em;
+ -webkit-text-stroke-width: 0.02em;
= -webkit-text-stroke-color: oklch(20% 0% 0deg);
=
= strong {
@@ -114,6 +114,7 @@
= -webkit-text-stroke-color: oklch(25% 0% 0deg);
= text-decoration: none;
= }
+ }
= </style>
= </head>
= <body>