on master help sign in
Merge pull request #1474 from urbit/mp/external-links
ea18066matildepark
components/Markdown.js+40−7
@@ -7,12 +7,12 @@ import normalize from "mdurl/encode";
7import merge from "deepmerge";
7import merge from "deepmerge";
8import github from "hast-util-sanitize/lib/github";
8import github from "hast-util-sanitize/lib/github";
9import remarkParse from "remark-parse";
9import remarkParse from "remark-parse";
10−import remarkRehype from "remark-rehype";
10+import remarkRehype, { defaultHandlers, all } from "remark-rehype";
11import rehypeStringify from "rehype-stringify";
11import rehypeStringify from "rehype-stringify";
12import rehypeRaw from "rehype-raw";
12import rehypeRaw from "rehype-raw";
13
13
14// img is wrapped in figure so that images can be extra wide in the blog posts
14// img is wrapped in figure so that images can be extra wide in the blog posts
15−function Img(h, node) {
15+function img(h, node) {
16 var props = { src: normalize(node.url), alt: node.alt };
16 var props = { src: normalize(node.url), alt: node.alt };
17 if (node.title !== null && node.title !== undefined) {
17 if (node.title !== null && node.title !== undefined) {
18 props.title = node.title;
18 props.title = node.title;
@@ -31,10 +31,43 @@ function Img(h, node) {
31 };
31 };
32}
32}
33
33
34+function a(h, node) {
35+ const url = node.url;
36+
37+ if (
38+ url.includes("https://urbit.org") ||
39+ url.startsWith("/") ||
40+ url.startsWith("#")
41+ ) {
42+ return {
43+ type: "element",
44+ tagName: "a",
45+ properties: {
46+ href: url,
47+ },
48+ children: all(h, node),
49+ };
50+ } else {
51+ return {
52+ type: "element",
53+ tagName: "a",
54+ properties: {
55+ target: "_blank",
56+ rel: "noopener",
57+ href: url,
58+ },
59+ children: all(h, node),
60+ };
61+ }
62+}
63+
64+const handlers = defaultHandlers;
65+handlers.link = a;
66+handlers.image = img;
67+
34const options = {
68const options = {
35− handlers: {
69+ allowDangerousHtml: true,
36− image: Img,
70+ handlers: handlers,
37− },
38 sanitize: merge(github, {
71 sanitize: merge(github, {
39 // remove user-content from github.json to remark-slug work as expected
72 // remove user-content from github.json to remark-slug work as expected
40 clobberPrefix: "",
73 clobberPrefix: "",
@@ -45,14 +78,14 @@ const options = {
45// Converts markdown strings into markdown HTML/React components
78// Converts markdown strings into markdown HTML/React components
46export default async function Markdown({ post }, disablePlugins) {
79export default async function Markdown({ post }, disablePlugins) {
47 const result = await remark()
80 const result = await remark()
48− .use(remarkParse, options)
81+ .use(remarkParse)
49 .use(remarkprism, {
82 .use(remarkprism, {
50 plugins: !disablePlugins ? ["show-invisibles"] : [],
83 plugins: !disablePlugins ? ["show-invisibles"] : [],
51 })
84 })
52 .use(gfm)
85 .use(gfm)
53 .use(slug)
86 .use(slug)
54 .use(heading)
87 .use(heading)
55− .use(remarkRehype, { allowDangerousHtml: true })
88+ .use(remarkRehype, options)
56 .use(rehypeRaw)
89 .use(rehypeRaw)
57 .use(rehypeStringify)
90 .use(rehypeStringify)
58 .process(post.content);
91 .process(post.content);
content/blog/layer-2-faq.md+1−1
@@ -45,7 +45,7 @@ you **do not** need ETH to boot Urbit. That Urbit ID is now yours, forever.
45Unsure whether you have been invited to claim a L2 or L1 planet? The quickest
45Unsure whether you have been invited to claim a L2 or L1 planet? The quickest
46way to identify a L2 planet is if you used the below flow to claim.
46way to identify a L2 planet is if you used the below flow to claim.
47
47
48−![](/images/planet-l2-claim.gif)
48+<img src="/images/planet-l2-claim.gif" style="max-height: 400px; width: auto; margin: 0 auto;"/>
49
49
50For those with L1 planets, you can avoid future transaction fees by migrating
50For those with L1 planets, you can avoid future transaction fees by migrating
51your L1 planet to L2. Read the migration instructions
51your L1 planet to L2. Read the migration instructions