Skip to content

Commit

Permalink
Merge branch 'main' into fix-tap-auto-expand
Browse files Browse the repository at this point in the history
  • Loading branch information
mk committed Dec 12, 2023
2 parents 3d8ad98 + ad8e5a2 commit dcf4d44
Show file tree
Hide file tree
Showing 34 changed files with 883 additions and 389 deletions.
27 changes: 27 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,31 @@ Changes can be:

## Unreleased

* 💫 Allow to disable welcome page in `serve!`

* 💫 Add `clerk/comment` that behaves like `clojure.core/comment` outside of Clerk but shows the results like regular top-level forms in Clerk.

* 💫 Support using Markdown syntax in `clerk/caption` text

* 🛠 Bump depdendencies

* `com.taoensso/nippy` to `3.4.0-beta1`
* `io.github.nextjournal/markdown` to `0.5.146`

* 🐞 Fix caching behaviour of `clerk/image` and support overriding image-viewer by name

* 🐞 Fix `row` and `col` viewers not showing a first map argument, fixes [#567](https://github.com/nextjournal/clerk/issues/567) @teodorlu

* 🐞 Fix long sidenotes overlapping with subsequent content, fixes [#564](https://github.com/nextjournal/clerk/issues/564) @hlship

## 0.15.957 (2023-09-28)

* 🔌 Offline support

Support working fully offline by adding a ServiceWorker to intercept and cache network requests to remote assets in the browser. It works for Clerk's js bundle, its tailwind css script, fonts and as well as javascript dynamically loaded using d3-require like Clerk's Vega and Plotly viewers.

To use it, you need to open Clerk in the browser when online to populate the cache. Viewers that are dynamically loaded (e.g. Vega or Plotly) need to be used once while offline to be cached. We're considering loading them on worker init in a follow up.

* 👁️ Improve viewer customization

* Simplify customization of number of rows displayed for table viewer using viewer-opts, e.g. `(clerk/table {::clerk/page-size 7})`. Pass `{::clerk/page-size nil}` to display elisions. Can also be passed a form metadata. Fixes [#406](https://github.com/nextjournal/clerk/issues/406).
Expand Down Expand Up @@ -47,6 +72,8 @@ Changes can be:

* 💫 Assign `:name` to every viewer in `default-viewers`

* 🐜 Ensure `var->location` returns a string path location fixing `Cannot open <#object[sun.nio.fs.UnixPath ,,,> as an InputStream` errors

* 🐞 Don't run existing files through `fs/glob`, fixes [#504](https://github.com/nextjournal/clerk/issues/504). Also improves performance of homepage.

* 🐞 Show correct non-var return value for deflike form, fixes [#499](https://github.com/nextjournal/clerk/issues/499)
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ To use Clerk in your project, you'll need Java 11+ and [`clojure`](https://cloju
following dependency to your `deps.edn`:

```edn
{:deps {io.github.nextjournal/clerk {:mvn/version "0.14.919"}}}
{:deps {io.github.nextjournal/clerk {:mvn/version "0.15.957"}}}
```

Require and start Clerk as part of your system start, e.g. in `user.clj`:
Expand Down
2 changes: 1 addition & 1 deletion bb.edn
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{:min-bb-version "0.9.159"
:paths ["bb"]
:deps {io.github.nextjournal/dejavu {:git/sha "4980e0cc18c9b09fb220874ace94ba6b57a749ca"}
io.github.nextjournal/cas-client {:git/sha "84ab35c3321c1e51a589fddbeee058aecd055bf8"}}
io.github.nextjournal/cas-client {:git/sha "22ef8360689cd3938e43a3223023ab1b9711818f"}}
:tasks
{:requires
([tasks :as t]
Expand Down
43 changes: 30 additions & 13 deletions book.clj
Original file line number Diff line number Diff line change
Expand Up @@ -299,32 +299,47 @@ int main() {

;; ### 🏞 Images

;; Clerk now has built-in support for the
;; `java.awt.image.BufferedImage` class, which is the native image
;; format of the JVM.
;;
;; When combined with `javax.imageio.ImageIO/read`, one can easily
;; load images in a variety of formats from a `java.io.File`, an
;; `java.io.InputStream`, or any resource that a `java.net.URL` can
;; address.
;; Clerk offers the `clerk/image` viewer to create a buffered image
;; from a string or anything `javax.imageio.ImageIO/read` can take
;; (URL, File or InputStream).
;;
;; For example, we can fetch a photo of De zaaier, Vincent van Gogh's
;; famous painting of a farmer sowing a field from Wiki Commons like
;; this:

(ImageIO/read (URL. "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/The_Sower.jpg/1510px-The_Sower.jpg"))
(clerk/image "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/The_Sower.jpg/1510px-The_Sower.jpg")

;; We've put some effort into making the default image rendering
;; pleasing. The viewer uses the dimensions and aspect ratio of each
;; image to guess the best way to display it in classic DWIM
;; fashion. For example, an image larger than 900px wide with an
;; aspect ratio larger then two will be displayed full width:

(ImageIO/read (URL. "https://images.unsplash.com/photo-1532879311112-62b7188d28ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8"))
(clerk/image "https://images.unsplash.com/photo-1532879311112-62b7188d28ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8")

;; On the other hand, smaller images are centered and shown using their intrinsic dimensions:

(ImageIO/read (URL. "https://nextjournal.com/data/QmSJ6eu6kUFeWrqXyYaiWRgJxAVQt2ivaoNWc1dtTEADCf?filename=thermo.png&content-type=image/png"))
(clerk/image "https://nextjournal.com/data/QmSJ6eu6kUFeWrqXyYaiWRgJxAVQt2ivaoNWc1dtTEADCf?filename=thermo.png&content-type=image/png")

;; You can use `clerk/image` together with `clerk/caption` which will render a simple caption under the image:

(clerk/caption
"Implements of the Paper Printing Industry"
(clerk/image "https://nextjournal.com/data/QmX99isUndwqBz7nj8fdG7UoDakNDSH1TZcvY2Y6NUTe6o?filename=image.gif&content-type=image/gif"))

;; Captions aren't limited to images and work together with any arbitrary content that you provide, e.g. a table:

^{::clerk/visibility {:code :fold}}
(clerk/caption
"Modern Symmetrical Unary(7) in [Solresol](https://wiki.xxiivv.com/site/solresol.html)"
(clerk/table {:head ["Solfège" "French IPA" "English IPA" "Meaning"]
:rows [["Do" "/do/" "/doʊ/" "no"]
["Re" "/ʁɛ/" "/ɹeɪ/" "and, also"]
["Mi" "/mi/" "/miː/" "or"]
["Fa" "/fa/" "/fɑː/" "at, to"]
["Sol" "/sɔl/" "/soʊl/" "but, if"]
["La" "/la/" "/lɑː/" "the, then"]
["Si" "/si/" "/siː/" "yes"]]}))

;; ### 📒 Markdown

Expand Down Expand Up @@ -363,13 +378,15 @@ int main() {
;; nice captions:

(defn caption [text]
(clerk/html [:span.text-slate-500.text-xs.text-center.font-sans text]))
(clerk/html [:figcaption.text-center.mt-1 text]))

(clerk/row
(clerk/col image-1 (caption "Figure 1: Decorative A"))
(clerk/col image-2 (caption "Figure 2: Decorative B"))
(clerk/col image-3 (caption "Figure 3: Decorative C")))

;; Note: the caption example is _exactly_ how `clerk/caption` is implemented in Clerk.

;; **Alternative notations**
;;
;; By default, `row` and `col` operate on `& rest` so you can pass any
Expand Down Expand Up @@ -940,7 +957,7 @@ v/table-viewer
;; Also notably, there is a `:compile-css` option which compiles a css
;; file containing only the used CSS classes from the generated
;; markup. (Otherwise, Clerk is using Tailwind's Play CDN script which
;; can the page flicker, initially.)
;; can make the page flicker, initially.)

;; If set, the `:ssr` option will use React's server-side-rendering to
;; include the generated markup in the build HTML.
Expand Down
12 changes: 8 additions & 4 deletions deps.edn
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
com.nextjournal/beholder {:mvn/version "1.0.2"}
org.flatland/ordered {:mvn/version "1.15.11"}

io.github.nextjournal/markdown {:mvn/version "0.5.144"}
io.github.nextjournal/markdown {:mvn/version "0.5.146"}
babashka/process {:mvn/version "0.4.16"}
io.github.nextjournal/dejavu {:git/sha "4980e0cc18c9b09fb220874ace94ba6b57a749ca"}

com.taoensso/nippy {:mvn/version "3.2.0"}
com.taoensso/nippy {:mvn/version "3.4.0-beta1"}

mvxcvi/multiformats {:mvn/version "0.3.107"}
com.pngencoder/pngencoder {:mvn/version "0.13.1"}
Expand Down Expand Up @@ -42,7 +42,7 @@
binaryage/devtools {:mvn/version "1.0.3"}
cider/cider-nrepl {:mvn/version "0.29.0"}
com.clojure-goes-fast/clj-async-profiler {:mvn/version "1.0.3"}
io.github.nextjournal/cas-client {:git/sha "84ab35c3321c1e51a589fddbeee058aecd055bf8"}
io.github.nextjournal/cas-client {:git/sha "22ef8360689cd3938e43a3223023ab1b9711818f"}
org.slf4j/slf4j-nop {:mvn/version "2.0.7"}
org.babashka/cli {:mvn/version "0.5.40"}}
:extra-paths ["dev" "notebooks"]
Expand Down Expand Up @@ -73,8 +73,12 @@
:exclusions [org.babashka/sci]}
io.github.nextjournal/clerk-slideshow {:git/sha "11a83fea564da04b9d17734f2031a4921d917893"}}}

:nextjournal/garden {:exec-fn nextjournal.clerk/serve!
:exec-args {:index "book.clj"}
:nextjournal.garden/aliases [:demo]}

:build {:deps {io.github.nextjournal/clerk {:local/root "."}
io.github.nextjournal/cas-client {:git/sha "84ab35c3321c1e51a589fddbeee058aecd055bf8"}
io.github.nextjournal/cas-client {:git/sha "22ef8360689cd3938e43a3223023ab1b9711818f"}
io.github.clojure/tools.build {:git/tag "v0.6.1" :git/sha "515b334"}
io.github.slipset/deps-deploy {:git/sha "b4359c5d67ca002d9ed0c4b41b710d7e5a82e3bf"}}
:extra-paths ["bb" "src" "resources"] ;; for loading lookup-url in build
Expand Down
1 change: 1 addition & 0 deletions garden.edn
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{:project "book-of-clerk"}
83 changes: 0 additions & 83 deletions notebooks/doc.clj

This file was deleted.

2 changes: 0 additions & 2 deletions notebooks/intern.clj
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ c
(ns-unmap *ns* 'variable)
(ns-unmap (find-ns 'foreign) 'variable)

(reset! nextjournal.clerk.webserver/!doc nextjournal.clerk.webserver/help-doc)

;; inspect recorded interns
(-> @nextjournal.clerk.webserver/!doc
:blocks (->> (mapcat (comp :nextjournal/interned :result))))
Expand Down
13 changes: 13 additions & 0 deletions notebooks/viewers/caption.clj
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,16 @@
(clerk/image "https://nextjournal.com/data/QmX99isUndwqBz7nj8fdG7UoDakNDSH1TZcvY2Y6NUTe6o?filename=image.gif&content-type=image/gif")
(clerk/image "https://nextjournal.com/data/QmV8UanpZwTaLvLnKgJkR9etvVH9YPZX3rMFHN7YHbSGbv?filename=image.gif&content-type=image/gif")
(clerk/image "https://nextjournal.com/data/QmPzBy1GBTAJf8Zzwhx5yyCfHqX5h7Wgx9geRpzgghyoEZ?filename=image.gif&content-type=image/gif")))

;; Captions can also include Markdown, e.g. to render links:

(clerk/caption
"Modern Symmetrical Unary(7) in [Solresol](https://wiki.xxiivv.com/site/solresol.html)"
(clerk/table {:head ["Solfège" "French IPA" "English IPA" "Meaning"]
:rows [["Do" "/do/" "/doʊ/" "no"]
["Re" "/ʁɛ/" "/ɹeɪ/" "and, also"]
["Mi" "/mi/" "/miː/" "or"]
["Fa" "/fa/" "/fɑː/" "at, to"]
["Sol" "/sɔl/" "/soʊl/" "but, if"]
["La" "/la/" "/lɑː/" "the, then"]
["Si" "/si/" "/siː/" "yes"]]}))
18 changes: 16 additions & 2 deletions notebooks/viewers/markdown.clj
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,11 @@ It's [Markdown](https://daringfireball.net/projects/markdown/), like you know it
;; on the [Tufte CSS website](https://edwardtufte.github.io/tufte-css/).
;;
;; Sidenotes are a great example of the web not being like print. On sufficiently
;; large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and
;; large viewports, Tufte CSS^[Cascading Style Sheets] uses the margin for sidenotes, margin notes, and
;; small figures. On smaller viewports, elements that would go in the margin are
;; hidden until the user toggles them into view. The goal is to present related
;; hidden until the user toggles them into view.
;;
;; The goal is to present related
;; but not necessary information such as asides or citations as close as possible
;; to the text that references them. At the same time, this secondary information
;; should stay out of the way of the eye, not interfering with the progression of
Expand All @@ -98,6 +100,18 @@ It's [Markdown](https://daringfireball.net/projects/markdown/), like you know it
;; And it can be followed by lists so the list layout also has to adapt to the
;; new content width once a sidenote is present in the document:
;;
;; ### Long sidenotes
;;
;; Sometimes sidenotes can be longer than the content they are anchored to. [^long]
;;
;; [^long]: In this case they should push their proximate content down instead of
;; overlapping with it. This would be especially glaring when the subsequent element
;; is a code cell, which spans both the main contentn col and sidenote col.

;; ```clj
;; (comment "Here is a Clojure code listing to be pushed down by the sidenote.")
;; ```

;; Things to do:

;; * Hire two private investigators. Get them to follow each other.
Expand Down
2 changes: 1 addition & 1 deletion resources/META-INF/nextjournal/clerk/meta.edn
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{:version {:major 0, :minor 14, :rev-count 919}}
{:version {:major 0, :minor 15, :rev-count 957}}
54 changes: 54 additions & 0 deletions resources/public/clerk_service_worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
const cacheName = 'clerk-browser-cache-v2';

const hosts = [
'https://fonts.bunny.net',
'https://cdn.skypack.dev',
'https://cdn.tailwindcss.com',
'https://storage.clerk.garden',
'https://cdn.jsdelivr.net',
'https://vega.github.io'
];

self.addEventListener('install', function(event) {
//console.log('install', event);
self.skipWaiting();
});

self.addEventListener('activate', function(event) {
//console.log('activate', event);

// Remove unwanted caches
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cache) {
if (cache !== cacheName) {
console.log("Service Worker: Clearing old cache");
return caches.delete(cache);
}
}));
}));

return self.clients.claim()
});

self.addEventListener('fetch', function(event) {
//console.log(event);

event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request).then(function(response) {

hosts.map(function(host) {
if (event.request.url.indexOf(host) === 0) {
var clonedResponse = response.clone();
caches.open(cacheName).then(function(cache) {
cache.put(event.request, clonedResponse);
});
}
});
return response;
});
})
);
});
Loading

0 comments on commit dcf4d44

Please sign in to comment.