Skip to content

Commit 9a7729d

Browse files
zampinozampino
authored
Fix styles in demos (#48)
1 parent 5d88847 commit 9a7729d

5 files changed

Lines changed: 454 additions & 86 deletions

File tree

‎.github/workflows/main.yml‎

Lines changed: 10 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -29,47 +29,6 @@ jobs:
2929
yarn squint compile
3030
node dist/nextjournal/clojure_mode_tests.mjs
3131
32-
squint:
33-
name: Static App / Squint Build
34-
runs-on: ubuntu-latest
35-
steps:
36-
- name: 🛎 Checkout
37-
uses: actions/checkout@v2
38-
39-
- name: 🔐 Google Auth
40-
uses: google-github-actions/auth@v0
41-
with:
42-
credentials_json: ${{ secrets.GCLOUD_SERVICE_KEY }}
43-
44-
- name: 🔧 Setup Google Cloud SDK
45-
uses: google-github-actions/setup-gcloud@v0.3.0
46-
47-
- name: 🔧 Install java
48-
uses: actions/setup-java@v1
49-
with:
50-
java-version: '11.0.7'
51-
52-
- name: 🔧 Install clojure
53-
uses: DeLaGuardo/setup-clojure@master
54-
with:
55-
bb: 'latest'
56-
57-
- name: 🔎 Build Squint static CDN Demo
58-
run: bb squint:demo:build
59-
60-
- name: 📠 Copy static build to bucket under SHA
61-
run: gsutil cp -r public gs://nextjournal-snapshots/clojure-mode/squint-build/${{ github.sha }}
62-
63-
- name: ✅ Add link to Clojure Mode Squint Demo
64-
uses: Sibz/github-status-action@v1
65-
with:
66-
authToken: ${{secrets.GITHUB_TOKEN}}
67-
context: 'CI / Static App / Squint'
68-
description: 'Ready'
69-
state: 'success'
70-
sha: ${{github.event.pull_request.head.sha || github.sha}}
71-
target_url: https://snapshots.nextjournal.com/clojure-mode/squint-build/${{ github.sha }}/squint-cdn-demo
72-
7332
snapshot:
7433
name: Static App / Build
7534
runs-on: ubuntu-latest
@@ -127,6 +86,16 @@ jobs:
12786
sha: ${{github.event.pull_request.head.sha || github.sha}}
12887
target_url: https://snapshots.nextjournal.com/clojure-mode/build/${{ github.sha }}
12988

89+
- name: ✅ Add link to Clojure Mode Demo
90+
uses: Sibz/github-status-action@v1
91+
with:
92+
authToken: ${{secrets.GITHUB_TOKEN}}
93+
context: 'CI / Static App / Squint Build'
94+
description: 'Ready'
95+
state: 'success'
96+
sha: ${{github.event.pull_request.head.sha || github.sha}}
97+
target_url: https://snapshots.nextjournal.com/clojure-mode/build/${{ github.sha }}/squint/dist/
98+
13099
- name: ✅ Add link to LiveDoc Demo
131100
uses: Sibz/github-status-action@v1
132101
with:

‎demo/notebooks/livedoc.md‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,36 @@ Here's some of Clerk's API in action
2020
:projection {:type "albersUsa"}
2121
:encoding {:color {:field "rate" :type "quantitative"}}})
2222
```
23+
## Usage
24+
25+
Use livedoc `editor` function as a reagent component in your cljs application
26+
27+
[nextjournal.clojure-mode.livedoc/editor opts]
28+
29+
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:
2330

24-
Compose results layout with `v/row` and `v/col`
31+
* `:doc` (required) a markdown string
32+
33+
* `:render` a function taking a reagent state atom, returning hiccup. Such state holds a map with:
34+
* `:text` the block's text
35+
* `:type` with values `:code` or `:markdown`
36+
* `:selected?`
37+
38+
* `:eval-fn!` will be called on selected block states when evaluation is triggered
39+
40+
* `:tooltip` customises tooltip view
41+
42+
* `:extensions` extra CodeMirror extensions to be added along livedoc ones
43+
44+
* `:focus?` should editor acquire focus when loaded
45+
46+
## Keybindings
47+
48+
* `ESC`: toggles edit-one / edit-all / preview & select block
49+
* `ALT`: pressed while in edit mode toggles a tooltip with eval-at-cursor results
50+
* Arrow keys move selection up/down
51+
* `CMD + Enter` : Evaluate selected cell or leave edit mode
52+
* `CMD + Shift + Enter`: Evaluates all cells
2553

2654
```clojure
2755
(def pie
@@ -83,37 +111,6 @@ The following example is taken from this [Observable notebook](https://observabl
83111
(v/plotly {:data [{:y (shuffle (range -100 100))}]})
84112
```
85113

86-
## Usage
87-
88-
Use livedoc `editor` function as a reagent component in your cljs application
89-
90-
[nextjournal.clojure-mode.livedoc/editor opts]
91-
92-
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:
93-
94-
* `:doc` (required) a markdown string
95-
96-
* `:render` a function taking a reagent state atom, returning hiccup. Such state holds a map with:
97-
* `:text` the block's text
98-
* `:type` with values `:code` or `:markdown`
99-
* `:selected?`
100-
101-
* `:eval-fn!` will be called on selected block states when evaluation is triggered
102-
103-
* `:tooltip` customises tooltip view
104-
105-
* `:extensions` extra CodeMirror extensions to be added along livedoc ones
106-
107-
* `:focus?` should editor acquire focus when loaded
108-
109-
## Keybindings
110-
111-
* `ESC`: toggles edit-one / edit-all / preview & select block
112-
* `ALT`: pressed while in edit mode toggles a tooltip with eval-at-cursor results
113-
* Arrow keys move selection up/down
114-
* `CMD + Enter` : Evaluate selected cell or leave edit mode
115-
* `CMD + Shift + Enter`: Evaluates all cells
116-
117114
```clojure
118115
(defonce state (atom 0))
119116
```

‎public/index.html‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Clojure/Script mode for CodeMirror 6</title>
77

8+
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
89
<!-- inter fonts -->
9-
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
12-
10+
<link href="https://fonts.bunny.net/css?family=inter:400,500" rel="stylesheet" />
1311
<!-- fira fonts -->
14-
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
1512
<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">
1613

1714
<link href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" rel="stylesheet">
@@ -20,6 +17,20 @@
2017
<link href="https://cdn.nextjournal.com/data/QmZZpjcdZDa8WT27QpcepDfqwuGik6Y3Ueyxaxs1Gqpk9w?filename=nextjournal-c81d440c5a7312046bbc5a2c3f2c5567d9ea9131.css&content-type=text/css" rel="stylesheet">
2118

2219
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
20+
<script>
21+
tailwind.config = {
22+
darkMode: "class",
23+
theme: {
24+
extend: {},
25+
fontFamily: {
26+
sans: ["Fira Sans", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
27+
serif: ["PT Serif", "serif"],
28+
mono: ["Fira Mono", "monospace"]
29+
}
30+
}
31+
}
32+
</script>
33+
2334
<style type="text/tailwindcss" id="viewer-stylesheet"></style>
2435
<!-- filled with tailwind styles from js -->
2536

‎public/livedoc/index.html‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,32 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>LiveDoc</title>
77

8+
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
89
<!-- inter fonts -->
9-
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
10+
<link href="https://fonts.bunny.net/css?family=inter:400,500" rel="stylesheet" />
11+
<!-- fira fonts -->
12+
<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">
13+
1214
<link href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" rel="stylesheet">
1315

1416
<link href="https://cdn.nextjournal.com/data/QmSaHZCU6U2DeNohfW2PuXDHkayw7w21uvUWL5oEqVWKwH?filename=viewer-1c61aac61ffa4da89b828d538c5e4eff188e7b56.css&content-type=text/css" rel="stylesheet">
1517
<link href="https://cdn.nextjournal.com/data/QmZZpjcdZDa8WT27QpcepDfqwuGik6Y3Ueyxaxs1Gqpk9w?filename=nextjournal-c81d440c5a7312046bbc5a2c3f2c5567d9ea9131.css&content-type=text/css" rel="stylesheet">
1618

1719
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
20+
<script>
21+
tailwind.config = {
22+
darkMode: "class",
23+
theme: {
24+
extend: {},
25+
fontFamily: {
26+
sans: ["Fira Sans", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
27+
serif: ["PT Serif", "serif"],
28+
mono: ["Fira Mono", "monospace"]
29+
}
30+
}
31+
}
32+
</script>
33+
1834
<style type="text/tailwindcss" id="viewer-stylesheet"></style>
1935
<!-- filled with tailwind styles from js -->
2036

0 commit comments

Comments
 (0)