From ee6b13d9e32aaf9acf051a160ad654f219c3f392 Mon Sep 17 00:00:00 2001 From: Jarkko Saltiola Date: Sun, 29 Dec 2024 16:07:18 +0200 Subject: [PATCH 1/2] Add back to top button Uses theme colors and border radius from search-box, otherwise copy paste from: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp --- sass/site.scss | 22 +++++++++++++++++++++- static/back_to_top.js | 19 +++++++++++++++++++ templates/base.html | 3 +++ 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 static/back_to_top.js diff --git a/sass/site.scss b/sass/site.scss index d99d45c..371b390 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -13,7 +13,27 @@ @import 'post-list'; body { - padding-top: $header-height; + padding-top: $header-height; + + #back-to-top-button { + display: none; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + border: none; + outline: none; + background-color: $color-base-primary; + color: $color-text-inverted; + cursor: pointer; + padding: 15px; + border-radius: 2px; + font-size: 18px; + + &:hover { + background-color: $color-base-hover; + } + } } footer { diff --git a/static/back_to_top.js b/static/back_to_top.js new file mode 100644 index 0000000..9ebc8a8 --- /dev/null +++ b/static/back_to_top.js @@ -0,0 +1,19 @@ +// Get the button: +let mybutton = document.getElementById("back-to-top-button"); + +// When the user scrolls down 20px from the top of the document, show the button +window.onscroll = function() {scrollFunction()}; + +function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + mybutton.style.display = "block"; + } else { + mybutton.style.display = "none"; + } +} + +// When the user clicks on the button, scroll to the top of the document +function backToTop() { + document.body.scrollTop = 0; // For Safari + document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera +} diff --git a/templates/base.html b/templates/base.html index e611934..e5c5b33 100644 --- a/templates/base.html +++ b/templates/base.html @@ -29,9 +29,12 @@ {% block body %} {% endblock %} + + + From 7b0d8b587d9d5fd573d345e0a153416ad2621327 Mon Sep 17 00:00:00 2001 From: Jarkko Saltiola Date: Mon, 30 Dec 2024 16:17:26 +0200 Subject: [PATCH 2/2] add Binding example to Global and local bindings --- .../global-and-local-bindings.md | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/content/documentation/global-and-local-bindings.md b/content/documentation/global-and-local-bindings.md index 52bcb2f..c655732 100644 --- a/content/documentation/global-and-local-bindings.md +++ b/content/documentation/global-and-local-bindings.md @@ -69,3 +69,29 @@ To update a variable with a function the `swap!` function can be used. (swap! foo + 2) # Evaluates to 12 (deref foo) # Evaluates to 12 ``` + +## Binding + +While writing tests on code depending on external state can be challenging, `binding` function allows to remap existing bindings which can be used for mocking functions or values during tests. As example, code depending on runtime environment: + +```phel +(ns my-app\tests\demo + (:require phel\test :refer [deftest is])) + +# Function that would return e.g. "x86_64", depending on the environment: +(defn get-system-architecture [] (php/php_uname "m")) + +(defn greet-user-by-architecture [] + (print "Hello" (get-system-architecture) "user!")) + +# With binding, a mock function can be used in place of the original one +# allowing to write tests for cases that depend on system state: +(deftest greeting-test + (binding [get-system-architecture |(str "i386")] # <- mock function + (let [greeting-out (with-output-buffer (greet-user-by-architecture))] + (is (= "Hello i386 user!" greeting-out) + "i386 system user is greeted accordingly")))) + +# Test is successful: +# ✔ greet-test: i386 system user is greeted accordingly +```