Fix styles in demos

.github/workflows/main.yml

@@ -29,47 +29,6 @@ jobs:
           yarn squint compile
           node dist/nextjournal/clojure_mode_tests.mjs
 
-  squint:
-    name: Static App / Squint Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: 🛎 Checkout
-        uses: actions/checkout@v2
-
-      - name: 🔐 Google Auth
-        uses: google-github-actions/auth@v0
-        with:
-          credentials_json: ${{ secrets.GCLOUD_SERVICE_KEY }}
-
-      - name: 🔧 Setup Google Cloud SDK
-        uses: google-github-actions/[email protected]
-
-      - name: 🔧 Install java
-        uses: actions/setup-java@v1
-        with:
-          java-version: '11.0.7'
-
-      - name: 🔧 Install clojure
-        uses: DeLaGuardo/setup-clojure@master
-        with:
-          bb: 'latest'
-
-      - name: 🔎 Build Squint static CDN Demo
-        run: bb squint:demo:build
-
-      - name: 📠 Copy static build to bucket under SHA
-        run: gsutil cp -r public gs://nextjournal-snapshots/clojure-mode/squint-build/${{ github.sha }}
-
-      - name: ✅ Add link to Clojure Mode Squint Demo
-        uses: Sibz/github-status-action@v1
-        with:
-          authToken: ${{secrets.GITHUB_TOKEN}}
-          context: 'CI / Static App / Squint'
-          description: 'Ready'
-          state: 'success'
-          sha: ${{github.event.pull_request.head.sha || github.sha}}
-          target_url: https://snapshots.nextjournal.com/clojure-mode/squint-build/${{ github.sha }}/squint-cdn-demo
-
   snapshot:
     name: Static App / Build
     runs-on: ubuntu-latest
@@ -127,6 +86,16 @@ jobs:
           sha: ${{github.event.pull_request.head.sha || github.sha}}
           target_url: https://snapshots.nextjournal.com/clojure-mode/build/${{ github.sha }}
 
+      - name: ✅ Add link to Clojure Mode Demo
+        uses: Sibz/github-status-action@v1
+        with:
+          authToken: ${{secrets.GITHUB_TOKEN}}
+          context: 'CI / Static App / Squint Build'
+          description: 'Ready'
+          state: 'success'
+          sha: ${{github.event.pull_request.head.sha || github.sha}}
+          target_url: https://snapshots.nextjournal.com/clojure-mode/build/${{ github.sha }}/squint/dist/
+
       - name: ✅ Add link to LiveDoc Demo
         uses: Sibz/github-status-action@v1
         with:

demo/notebooks/livedoc.md

@@ -20,8 +20,36 @@ Here's some of Clerk's API in action
        :projection {:type "albersUsa"}
        :encoding {:color {:field "rate" :type "quantitative"}}})
 ```
+## Usage
+
+Use livedoc `editor` function as a reagent component in your cljs application
+
+    [nextjournal.clojure-mode.livedoc/editor opts]
+
+this puts together an instance of CodeMirror with markdown and clojure mixed language support with a set of extensions configurable via an `opts` map with keys:
 
-Compose results layout with `v/row` and `v/col`
+* `:doc` (required) a markdown string
+
+* `:render` a function taking a reagent state atom, returning hiccup. Such state holds a map with:
+  * `:text` the block's text
+  * `:type` with values `:code` or `:markdown`
+  * `:selected?`
+
+* `:eval-fn!` will be called on selected block states when evaluation is triggered
+
+* `:tooltip` customises tooltip view
+
+* `:extensions` extra CodeMirror extensions to be added along livedoc ones
+
+* `:focus?` should editor acquire focus when loaded
+
+## Keybindings
+
+* `ESC`: toggles edit-one / edit-all / preview & select block
+* `ALT`: pressed while in edit mode toggles a tooltip with eval-at-cursor results
+* Arrow keys move selection up/down
+* `CMD + Enter` : Evaluate selected cell or leave edit mode
+* `CMD + Shift + Enter`: Evaluates all cells
 
 ```clojure
 (def pie
@@ -83,37 +111,6 @@ The following example is taken from this [Observable notebook](https://observabl
 (v/plotly {:data [{:y (shuffle (range -100 100))}]})
 ```
 
-## Usage
-
-Use livedoc `editor` function as a reagent component in your cljs application
-
-    [nextjournal.clojure-mode.livedoc/editor opts]
-
-this puts together an instance of CodeMirror with markdown and clojure mixed language support with a set of extensions configurable via an `opts` map with keys:
-
-* `:doc` (required) a markdown string
-
-* `:render` a function taking a reagent state atom, returning hiccup. Such state holds a map with:
-    * `:text` the block's text
-    * `:type` with values `:code` or `:markdown`
-    * `:selected?`
-
-* `:eval-fn!` will be called on selected block states when evaluation is triggered
-
-* `:tooltip` customises tooltip view
-
-* `:extensions` extra CodeMirror extensions to be added along livedoc ones
-
-* `:focus?` should editor acquire focus when loaded
-
-## Keybindings
-
-* `ESC`: toggles edit-one / edit-all / preview & select block
-* `ALT`: pressed while in edit mode toggles a tooltip with eval-at-cursor results
-* Arrow keys move selection up/down
-* `CMD + Enter` : Evaluate selected cell or leave edit mode
-* `CMD + Shift + Enter`: Evaluates all cells
-
 ```clojure
 (defonce state (atom 0))
 ```

public/index.html

@@ -5,13 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Clojure/Script mode for CodeMirror 6</title>
 
+    <link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
     <!-- inter fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
-
+    <link href="https://fonts.bunny.net/css?family=inter:400,500" rel="stylesheet" />
     <!-- fira fonts -->
-    <link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
     <link href="https://fonts.bunny.net/css?family=fira-mono:400,700%7Cfira-sans:400,400i,500,500i,700,700i%7Cfira-sans-condensed:700,700i%7Cpt-serif:400,400i,700,700i" rel="stylesheet">
 
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" rel="stylesheet">
@@ -20,6 +17,20 @@
     <link href="https://cdn.nextjournal.com/data/QmZZpjcdZDa8WT27QpcepDfqwuGik6Y3Ueyxaxs1Gqpk9w?filename=nextjournal-c81d440c5a7312046bbc5a2c3f2c5567d9ea9131.css&content-type=text/css" rel="stylesheet">
 
     <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+    <script>
+    tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {},
+        fontFamily: {
+          sans: ["Fira Sans", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+          serif: ["PT Serif", "serif"],
+          mono: ["Fira Mono", "monospace"]
+        }
+      }
+    }
+    </script>
+
     <style type="text/tailwindcss" id="viewer-stylesheet"></style>
     <!-- filled with tailwind styles from js -->
 

public/livedoc/index.html

@@ -5,16 +5,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LiveDoc</title>
 
+    <link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
     <!-- inter fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
+    <link href="https://fonts.bunny.net/css?family=inter:400,500" rel="stylesheet" />
+    <!-- fira fonts -->
+    <link href="https://fonts.bunny.net/css?family=fira-mono:400,700%7Cfira-sans:400,400i,500,500i,700,700i%7Cfira-sans-condensed:700,700i%7Cpt-serif:400,400i,700,700i" rel="stylesheet">
+
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" rel="stylesheet">
 
     <link href="https://cdn.nextjournal.com/data/QmSaHZCU6U2DeNohfW2PuXDHkayw7w21uvUWL5oEqVWKwH?filename=viewer-1c61aac61ffa4da89b828d538c5e4eff188e7b56.css&content-type=text/css" rel="stylesheet">
     <link href="https://cdn.nextjournal.com/data/QmZZpjcdZDa8WT27QpcepDfqwuGik6Y3Ueyxaxs1Gqpk9w?filename=nextjournal-c81d440c5a7312046bbc5a2c3f2c5567d9ea9131.css&content-type=text/css" rel="stylesheet">
 
     <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+    <script>
+    tailwind.config = {
+      darkMode: "class",
+      theme: {
+        extend: {},
+        fontFamily: {
+          sans: ["Fira Sans", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+          serif: ["PT Serif", "serif"],
+          mono: ["Fira Mono", "monospace"]
+        }
+      }
+    }
+    </script>
+
     <style type="text/tailwindcss" id="viewer-stylesheet"></style>
     <!-- filled with tailwind styles from js -->