4f1c50e · urbit.org · git.iko.soy

git.iko.soy/urbit.org

docs: add syntax highlighting

commit4f1c50e204a466232e8ba3937d511277d121cbe1 authorMatilde Park <matilde@tlon.io> dateTue 29 Jun 2021, 18:00 (5 years ago) parentd2fbd56

5 files changed+94−22

compare with master

unifiedsplit

components/Markdown.js+14−2 content/docs/arvo/eyre/using-eyre.md+22−19 package-lock.json+54 package.json+3 styles/markdown.module.css+1−1

components/Markdown.js+14−2

@@ -2,6 +2,16 @@ import markdownStyles from "../styles/markdown.module.css";

22import unified from "unified";

33import parse from "remark-parse";

44import 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";

515import slug from "remark-slug";

616import heading from "remark-heading-id";

717

@@ -21,11 +31,13 @@ function Img({ src, children }) {

2131const options = {

2232 remarkReactComponents: {

2333 img: Img,

34+ code: RemarkLowlight({ bash, sh, js, c, http }),

2435 // p: P,

2536 },

26− sanitize: {

37+ sanitize: merge(sanitizeGhSchema, {

2738 clobberPrefix: "",

28− },

39+ attributes: { code: ["className"] },

40+ }),

2941};

3042

3143// 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):

3030```bash

3131curl -i localhost:8080/~/login -X POST -d "password=lidlut-tabwed-pillex-ridrup"

3232```

33+

3334Let's explain what this does:

3435

35− - `-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− - `-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)

36+- `-i` displays the headers, so that you can see the cookie that gets sent

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.

38+- `-X POST` specifies that you are POSTing data, not GETting.

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)

3940

4041You should see the following:

4142

42−```bash

43+```http

4344HTTP/1.1 200 ok

4445Date: Sun, 01 Jan 2020 00:00:00 GMT

4546Connection: keep-alive

@@ -52,11 +53,11 @@ The `Date` and `set-cookie` will be slightly different of course.

5253

5354Take 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:

5455

55− - `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− - `0v3.fvaqc.nnjda.vude1.vb5l6.kmjmg` is the actual authentication token.

56+- `urbauth` is a prefix that Eyre uses to check for presence of authentication

57+- `~zod` is the name of the ship you are logging in as

58+- `0v3.fvaqc.nnjda.vude1.vb5l6.kmjmg` is the actual authentication token.

5859

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.

6061

6162## Interacting with Eyre

6263

@@ -73,7 +74,7 @@ These can be used independently, i.e. you may choose to only send information or

7374

7475For this example, we will use the following channel:

7576

76−```

77+```bash

7778http://localhost:8080/~/channel/1601844290-ae45b

7879```

7980

@@ -135,21 +136,23 @@ This is all we need to send Urbit to say "On this URL through which I am sending

135136You 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:

136137

137138```js

138−const eventSource = new EventSource('http://localhost:8080/~/channel/1601844290-ae45b', {

139− withCredentials: true // Required, sends your cookie

140−});

141−

142−eventSource.addEventListener('message', function (event) {

139+const eventSource = new EventSource(

140+ "http://localhost:8080/~/channel/1601844290-ae45b",

141+ {

142+ withCredentials: true, // Required, sends your cookie

143+ }

144+);

145+

146+eventSource.addEventListener("message", function (event) {

143147 ack(Number(event.lastEventId)); // See section below

144148 const payload = JSON.parse(event.data); // Data is sent in JSON format

145149 payload.id === event.lastEventId; // The SSE spec includes event IDs. This information is duplicated in the payload.

146150 const data = payload.json; // Beyond this, the actual data will vary between apps

147151});

148152

149−eventSource.addEventListener('error', function (event) {

153+eventSource.addEventListener("error", function (event) {

150154 handleError(event);

151155});

152−

153156```

154157

155158### Handling Received Events

@@ -166,7 +169,7 @@ Once you have received an event, it is expected that you will "ack" or "acknowle

166169

167170### Unsubscribing from Events

168171

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:

170173

171174```javascript

172175{

@@ -197,7 +200,7 @@ Scrying lets you see what an app has exposed at a particular path. It does not m

197200

198201It takes the form `{url}/~/scry/{app}{path}.{mark}`

199202

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.

201204

202205```bash

203206curl --header "Content-Type: application/json" \

package-lock.json+54

@@ -2367,6 +2367,11 @@

23672367 "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",

23682368 "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="

23692369 },

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+ },

23702375 "define-properties": {

23712376 "version": "1.1.3",

23722377 "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",

@@ -2683,6 +2688,14 @@

26832688 "reusify": "^1.0.4"

26842689 }

26852690 },

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+ },

26862699 "file-type": {

26872700 "version": "10.11.0",

26882701 "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz",

@@ -2725,6 +2738,11 @@

27252738 "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",

27262739 "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="

27272740 },

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+ },

27282746 "fraction.js": {

27292747 "version": "4.1.1",

27302748 "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",

@@ -3043,6 +3061,11 @@

30433061 "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",

30443062 "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="

30453063 },

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+ },

30463069 "hmac-drbg": {

30473070 "version": "1.0.1",

30483071 "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

@@ -3566,6 +3589,15 @@

35663589 "js-tokens": "^3.0.0 || ^4.0.0"

35673590 }

35683591 },

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+ },

35693601 "lru-cache": {

35703602 "version": "6.0.0",

35713603 "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",

@@ -4922,6 +4954,15 @@

49224954 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

49234955 "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="

49244956 },

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+ },

49254966 "react-native-get-random-values": {

49264967 "version": "1.7.0",

49274968 "resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.7.0.tgz",

@@ -4986,6 +5027,11 @@

49865027 "unified": "^9.1.0"

49875028 }

49885029 },

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+ },

49895035 "remark-heading-id": {

49905036 "version": "1.0.0",

49915037 "resolved": "https://registry.npmjs.org/remark-heading-id/-/remark-heading-id-1.0.0.tgz",

@@ -5023,6 +5069,14 @@

50235069 "mdast-util-to-hast": "^10.0.0"

50245070 }

50255071 },

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+ },

50265080 "remark-slug": {

50275081 "version": "6.0.0",

50285082 "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.0.0.tgz",

package.json+3

@@ -13,6 +13,7 @@

1313 "@iarna/toml": "^2.2.5",

1414 "@netlify/plugin-nextjs": "^3.4.2",

1515 "classnames": "^2.3.1",

16+ "deepmerge": "^4.2.2",

1617 "fuzzy-search": "^3.2.1",

1718 "gray-matter": "^4.0.3",

1819 "next": "10.2.3",

@@ -20,10 +21,12 @@

2021 "react-dom": "17.0.2",

2122 "react-hotkeys": "^2.0.0",

2223 "remark": "^13.0.0",

24+ "remark-code-blocks": "^2.0.1",

2325 "remark-heading-id": "^1.0.0",

2426 "remark-html": "^13.0.1",

2527 "remark-parse": "^9.0.0",

2628 "remark-react": "^8.0.0",

29+ "remark-react-lowlight": "^0.7.0",

2730 "remark-slug": "^6.0.0",

2831 "toml": "^3.0.0",

2932 "unified": "^9.2.1"

styles/markdown.module.css+1−1

@@ -63,7 +63,7 @@

6363}

6464

6565.markdown pre {

66− @apply p-8 bg-wall rounded-lg;

66+ @apply p-8 bg-wall rounded-lg overflow-x-scroll;

6767}

6868

6969.markdown code {