on master help sign in
docs: add syntax highlighting
4f1c50eMatilde Park
components/Markdown.js+14−2
@@ -2,6 +2,16 @@ import markdownStyles from "../styles/markdown.module.css";
2import unified from "unified";
2import unified from "unified";
3import parse from "remark-parse";
3import parse from "remark-parse";
4import remark2react from "remark-react";
4import remark2react from "remark-react";
5+import RemarkLowlight from "remark-react-lowlight";
6+import codeblocks from "remark-code-blocks";
7+import bash from "highlight.js/lib/languages/bash";
8+import sh from "highlight.js/lib/languages/shell";
9+import js from "highlight.js/lib/languages/javascript";
10+import c from "highlight.js/lib/languages/c";
11+import http from "highlight.js/lib/languages/http";
12+import sanitizeGhSchema from "hast-util-sanitize/lib/github.json";
13+import merge from "deepmerge";
14+import "highlight.js/styles/idea.css";
5import slug from "remark-slug";
15import slug from "remark-slug";
6import heading from "remark-heading-id";
16import heading from "remark-heading-id";
7
17
@@ -21,11 +31,13 @@ function Img({ src, children }) {
21const options = {
31const options = {
22 remarkReactComponents: {
32 remarkReactComponents: {
23 img: Img,
33 img: Img,
34+ code: RemarkLowlight({ bash, sh, js, c, http }),
24 // p: P,
35 // p: P,
25 },
36 },
26− sanitize: {
37+ sanitize: merge(sanitizeGhSchema, {
27 clobberPrefix: "",
38 clobberPrefix: "",
39+ attributes: { code: ["className"] },
28− },
40+ }),
29};
41};
30
42
31// Converts markdown strings into markdown HTML/React components
43// Converts markdown strings into markdown HTML/React components
content/docs/arvo/eyre/using-eyre.md+22−19
@@ -30,16 +30,17 @@ Run this code in your bash terminal (requires cURL):
30```bash
30```bash
31curl -i localhost:8080/~/login -X POST -d "password=lidlut-tabwed-pillex-ridrup"
31curl -i localhost:8080/~/login -X POST -d "password=lidlut-tabwed-pillex-ridrup"
32```
32```
33+
33Let's explain what this does:
34Let's explain what this does:
34
35
35− - `-i` displays the headers, so that you can see the cookie that gets sent
36+- `-i` displays the headers, so that you can see the cookie that gets sent
36− - `localhost:8080/~/login` is the URL to which you are POSTing. You will note this is also the URL you visit when you log into Landscape.
37+- `localhost:8080/~/login` is the URL to which you are POSTing. You will note this is also the URL you visit when you log into Landscape.
37− - `-X POST` specifies that you are POSTing data, not GETting.
38+- `-X POST` specifies that you are POSTing data, not GETting.
38− - `-d "password=lidlut-tabwed-pillex-ridrup"` specifies the code for your Urbit that we retrieved above. It is sent as form data, as if it were sent from an HTML form input field (which it is in Landscape)
39+- `-d "password=lidlut-tabwed-pillex-ridrup"` specifies the code for your Urbit that we retrieved above. It is sent as form data, as if it were sent from an HTML form input field (which it is in Landscape)
39
40
40You should see the following:
41You should see the following:
41
42
42−```bash
43+```http
43HTTP/1.1 200 ok
44HTTP/1.1 200 ok
44Date: Sun, 01 Jan 2020 00:00:00 GMT
45Date: Sun, 01 Jan 2020 00:00:00 GMT
45Connection: keep-alive
46Connection: keep-alive
@@ -52,11 +53,11 @@ The `Date` and `set-cookie` will be slightly different of course.
52
53
53Take a look at the `set-cookie` line. This is now your session authentication, and will need to be sent with any future requests. It consists of three parts:
54Take a look at the `set-cookie` line. This is now your session authentication, and will need to be sent with any future requests. It consists of three parts:
54
55
55− - `urbauth` is a prefix that Eyre uses to check for presence of authentication
56+- `urbauth` is a prefix that Eyre uses to check for presence of authentication
56− - `~zod` is the name of the ship you are logging in as
57+- `~zod` is the name of the ship you are logging in as
57− - `0v3.fvaqc.nnjda.vude1.vb5l6.kmjmg` is the actual authentication token.
58+- `0v3.fvaqc.nnjda.vude1.vb5l6.kmjmg` is the actual authentication token.
58
59
59−At present there is no way to separate these parts — you must pass a cookie *as* a cookie. This string must be in the `Cookie` header. The `set-cookie` header is only used for this request upon response. It is what browsers expect when receiving a cookie.
60+At present there is no way to separate these parts — you must pass a cookie _as_ a cookie. This string must be in the `Cookie` header. The `set-cookie` header is only used for this request upon response. It is what browsers expect when receiving a cookie.
60
61
61## Interacting with Eyre
62## Interacting with Eyre
62
63
@@ -73,7 +74,7 @@ These can be used independently, i.e. you may choose to only send information or
73
74
74For this example, we will use the following channel:
75For this example, we will use the following channel:
75
76
76−```
77+```bash
77http://localhost:8080/~/channel/1601844290-ae45b
78http://localhost:8080/~/channel/1601844290-ae45b
78```
79```
79
80
@@ -135,21 +136,23 @@ This is all we need to send Urbit to say "On this URL through which I am sending
135You should be able to send this information if you were able to send the above cURL example. However, we now need to be able to listen to the SSEs. The `EventSource` object is available for JavaScript in the browser context, as this is why SSEs were invented, but there should be a library for it in your chosen language. Take a look at a Browser JavaScript example:
136You should be able to send this information if you were able to send the above cURL example. However, we now need to be able to listen to the SSEs. The `EventSource` object is available for JavaScript in the browser context, as this is why SSEs were invented, but there should be a library for it in your chosen language. Take a look at a Browser JavaScript example:
136
137
137```js
138```js
139+const eventSource = new EventSource(
138−const eventSource = new EventSource('http://localhost:8080/~/channel/1601844290-ae45b', {
140+ "http://localhost:8080/~/channel/1601844290-ae45b",
141+ {
139− withCredentials: true // Required, sends your cookie
142+ withCredentials: true, // Required, sends your cookie
143+ }
140−});
144+);
141−
145+
142−eventSource.addEventListener('message', function (event) {
146+eventSource.addEventListener("message", function (event) {
143 ack(Number(event.lastEventId)); // See section below
147 ack(Number(event.lastEventId)); // See section below
144 const payload = JSON.parse(event.data); // Data is sent in JSON format
148 const payload = JSON.parse(event.data); // Data is sent in JSON format
145 payload.id === event.lastEventId; // The SSE spec includes event IDs. This information is duplicated in the payload.
149 payload.id === event.lastEventId; // The SSE spec includes event IDs. This information is duplicated in the payload.
146 const data = payload.json; // Beyond this, the actual data will vary between apps
150 const data = payload.json; // Beyond this, the actual data will vary between apps
147});
151});
148
152
149−eventSource.addEventListener('error', function (event) {
153+eventSource.addEventListener("error", function (event) {
150 handleError(event);
154 handleError(event);
151});
155});
152−
153```
156```
154
157
155### Handling Received Events
158### Handling Received Events
@@ -166,7 +169,7 @@ Once you have received an event, it is expected that you will "ack" or "acknowle
166
169
167### Unsubscribing from Events
170### Unsubscribing from Events
168
171
169−You may want to stop receiving events from a particular app path, but you don't want to close the channel altogether yet. Let's look at how to do that. Take a look at the example for subscribing. We sent that message with `id: 2`. We will use that ID to cancel the relevant subscription:
172+You may want to stop receiving events from a particular app path, but you don't want to close the channel altogether yet. Let's look at how to do that. Take a look at the example for subscribing. We sent that message with `id: 2`. We will use that ID to cancel the relevant subscription:
170
173
171```javascript
174```javascript
172{
175{
@@ -197,7 +200,7 @@ Scrying lets you see what an app has exposed at a particular path. It does not m
197
200
198It takes the form `{url}/~/scry/{app}{path}.{mark}`
201It takes the form `{url}/~/scry/{app}{path}.{mark}`
199
202
200− Let's get the base hash of our fakezod in the same way that Landscape does it.
203+Let's get the base hash of our fakezod in the same way that Landscape does it.
201
204
202```bash
205```bash
203curl --header "Content-Type: application/json" \
206curl --header "Content-Type: application/json" \
package-lock.json+54
@@ -2367,6 +2367,11 @@
2367 "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
2367 "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
2368 "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
2368 "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
2369 },
2369 },
2370+ "deepmerge": {
2371+ "version": "4.2.2",
2372+ "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
2373+ "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
2374+ },
2370 "define-properties": {
2375 "define-properties": {
2371 "version": "1.1.3",
2376 "version": "1.1.3",
2372 "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
2377 "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
@@ -2683,6 +2688,14 @@
2683 "reusify": "^1.0.4"
2688 "reusify": "^1.0.4"
2684 }
2689 }
2685 },
2690 },
2691+ "fault": {
2692+ "version": "1.0.4",
2693+ "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
2694+ "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
2695+ "requires": {
2696+ "format": "^0.2.0"
2697+ }
2698+ },
2686 "file-type": {
2699 "file-type": {
2687 "version": "10.11.0",
2700 "version": "10.11.0",
2688 "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz",
2701 "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz",
@@ -2725,6 +2738,11 @@
2725 "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
2738 "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
2726 "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
2739 "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
2727 },
2740 },
2741+ "format": {
2742+ "version": "0.2.2",
2743+ "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
2744+ "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
2745+ },
2728 "fraction.js": {
2746 "fraction.js": {
2729 "version": "4.1.1",
2747 "version": "4.1.1",
2730 "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
2748 "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
@@ -3043,6 +3061,11 @@
3043 "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
3061 "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
3044 "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
3062 "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
3045 },
3063 },
3064+ "highlight.js": {
3065+ "version": "10.7.3",
3066+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
3067+ "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
3068+ },
3046 "hmac-drbg": {
3069 "hmac-drbg": {
3047 "version": "1.0.1",
3070 "version": "1.0.1",
3048 "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
3071 "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -3566,6 +3589,15 @@
3566 "js-tokens": "^3.0.0 || ^4.0.0"
3589 "js-tokens": "^3.0.0 || ^4.0.0"
3567 }
3590 }
3568 },
3591 },
3592+ "lowlight": {
3593+ "version": "1.20.0",
3594+ "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
3595+ "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
3596+ "requires": {
3597+ "fault": "^1.0.0",
3598+ "highlight.js": "~10.7.0"
3599+ }
3600+ },
3569 "lru-cache": {
3601 "lru-cache": {
3570 "version": "6.0.0",
3602 "version": "6.0.0",
3571 "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
3603 "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4922,6 +4954,15 @@
4922 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
4954 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
4923 "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
4955 "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
4924 },
4956 },
4957+ "react-lowlight": {
4958+ "version": "1.1.1",
4959+ "resolved": "https://registry.npmjs.org/react-lowlight/-/react-lowlight-1.1.1.tgz",
4960+ "integrity": "sha512-aYUue4qlOOHEa0y4MXuUHOxe9oaO5fFnnTE5Nkw+euNK123+ntFgpnAkPNhbcvkNAI1kglLn+D6SeYNrCWsCIA==",
4961+ "requires": {
4962+ "lowlight": "^1.0.0",
4963+ "prop-types": "^15.5.8"
4964+ }
4965+ },
4925 "react-native-get-random-values": {
4966 "react-native-get-random-values": {
4926 "version": "1.7.0",
4967 "version": "1.7.0",
4927 "resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.7.0.tgz",
4968 "resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.7.0.tgz",
@@ -4986,6 +5027,11 @@
4986 "unified": "^9.1.0"
5027 "unified": "^9.1.0"
4987 }
5028 }
4988 },
5029 },
5030+ "remark-code-blocks": {
5031+ "version": "2.0.1",
5032+ "resolved": "https://registry.npmjs.org/remark-code-blocks/-/remark-code-blocks-2.0.1.tgz",
5033+ "integrity": "sha512-eZ6vfhv6Sv4TNbNYG6kG3ApQp6MRYc9fT4NT9QBPkuYQf51+TAbuMqApZdJdrsjeI9O8TP7noZF1KbadbLk5Lg=="
5034+ },
4989 "remark-heading-id": {
5035 "remark-heading-id": {
4990 "version": "1.0.0",
5036 "version": "1.0.0",
4991 "resolved": "https://registry.npmjs.org/remark-heading-id/-/remark-heading-id-1.0.0.tgz",
5037 "resolved": "https://registry.npmjs.org/remark-heading-id/-/remark-heading-id-1.0.0.tgz",
@@ -5023,6 +5069,14 @@
5023 "mdast-util-to-hast": "^10.0.0"
5069 "mdast-util-to-hast": "^10.0.0"
5024 }
5070 }
5025 },
5071 },
5072+ "remark-react-lowlight": {
5073+ "version": "0.7.0",
5074+ "resolved": "https://registry.npmjs.org/remark-react-lowlight/-/remark-react-lowlight-0.7.0.tgz",
5075+ "integrity": "sha512-gSs9vgln8CXh3Vi3QLys+djrEz6eKqPX3XDQRbGi804BDC4wlP0cxizvQg2ALDDWlh+be6g+gfseyXwA1AOmug==",
5076+ "requires": {
5077+ "react-lowlight": "^1.0.4"
5078+ }
5079+ },
5026 "remark-slug": {
5080 "remark-slug": {
5027 "version": "6.0.0",
5081 "version": "6.0.0",
5028 "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.0.0.tgz",
5082 "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.0.0.tgz",
package.json+3
@@ -13,6 +13,7 @@
13 "@iarna/toml": "^2.2.5",
13 "@iarna/toml": "^2.2.5",
14 "@netlify/plugin-nextjs": "^3.4.2",
14 "@netlify/plugin-nextjs": "^3.4.2",
15 "classnames": "^2.3.1",
15 "classnames": "^2.3.1",
16+ "deepmerge": "^4.2.2",
16 "fuzzy-search": "^3.2.1",
17 "fuzzy-search": "^3.2.1",
17 "gray-matter": "^4.0.3",
18 "gray-matter": "^4.0.3",
18 "next": "10.2.3",
19 "next": "10.2.3",
@@ -20,10 +21,12 @@
20 "react-dom": "17.0.2",
21 "react-dom": "17.0.2",
21 "react-hotkeys": "^2.0.0",
22 "react-hotkeys": "^2.0.0",
22 "remark": "^13.0.0",
23 "remark": "^13.0.0",
24+ "remark-code-blocks": "^2.0.1",
23 "remark-heading-id": "^1.0.0",
25 "remark-heading-id": "^1.0.0",
24 "remark-html": "^13.0.1",
26 "remark-html": "^13.0.1",
25 "remark-parse": "^9.0.0",
27 "remark-parse": "^9.0.0",
26 "remark-react": "^8.0.0",
28 "remark-react": "^8.0.0",
29+ "remark-react-lowlight": "^0.7.0",
27 "remark-slug": "^6.0.0",
30 "remark-slug": "^6.0.0",
28 "toml": "^3.0.0",
31 "toml": "^3.0.0",
29 "unified": "^9.2.1"
32 "unified": "^9.2.1"
styles/markdown.module.css+1−1
@@ -63,7 +63,7 @@
63}
63}
64
64
65.markdown pre {
65.markdown pre {
66− @apply p-8 bg-wall rounded-lg;
66+ @apply p-8 bg-wall rounded-lg overflow-x-scroll;
67}
67}
68
68
69.markdown code {
69.markdown code {