git.iko.soy/urbit.org
on master help sign in
getting-started: amend Port instructions for markdoc schema
5bccc06Matilde Park
components/Button.jsnew file+12
compare with master
unifiedsplit
@@ -0,0 +1,12 @@
1+import React from "react";
2+import Link from "next/link";
3+
4+const Button = ({ label, link, color }) => {
5+ return (
6+ <Link passHref href={link}>
7+ <a className={"button-lg max-w-fit " + color}>{label}</a>
8+ </Link>
9+ );
10+};
11+
12+export default Button;
components/Callout.jsnew file+12
@@ -0,0 +1,12 @@
1+import React from "react";
2+
3+const Callout = ({ title, children }) => {
4+ return (
5+ <div className="bg-wall-100 rounded-xl display p-7 flex flex-col space-y-4">
6+ {title && <h2>{title}</h2>}
7+ {children}
8+ </div>
9+ );
10+};
11+
12+export default Callout;
components/Markdown.js+30
@@ -5,6 +5,8 @@ import { footnoteRef } from "./schema/footnoteRef.markdoc";
5import { footnoteItem } from "./schema/footnoteItem.markdoc";
5import { footnoteItem } from "./schema/footnoteItem.markdoc";
6import Tabs from "../components/Tabs";
6import Tabs from "../components/Tabs";
7import Tab from "../components/Tab";
7import Tab from "../components/Tab";
8+import Button from "../components/Button";
9+import Callout from "../components/Callout";
8import Highlight, { defaultProps } from "prism-react-renderer";
10import Highlight, { defaultProps } from "prism-react-renderer";
9import Prism from "prism-react-renderer/prism";
11import Prism from "prism-react-renderer/prism";
10(typeof global !== "undefined" ? global : window).Prism = Prism;
12(typeof global !== "undefined" ? global : window).Prism = Prism;
@@ -121,6 +123,30 @@ const tabs = {
121 },
123 },
122};
124};
123
125
126+const button = {
127+ render: "Button",
128+ attributes: {
129+ label: {
130+ type: String,
131+ },
132+ link: {
133+ type: String,
134+ },
135+ color: {
136+ type: String,
137+ },
138+ },
139+};
140+
141+const callout = {
142+ render: "Callout",
143+ attributes: {
144+ title: {
145+ type: String,
146+ },
147+ },
148+};
149+
124export default function Markdown({ post }) {
150export default function Markdown({ post }) {
125 const ast = Markdoc.parse(post.content);
151 const ast = Markdoc.parse(post.content);
126 const finalAst = footnoteParse(ast);
152 const finalAst = footnoteParse(ast);
@@ -134,6 +160,8 @@ export default function Markdown({ post }) {
134 tags: {
160 tags: {
135 tabs,
161 tabs,
136 tab,
162 tab,
163+ button,
164+ callout,
137 },
165 },
138 });
166 });
139 return Markdoc.renderers.react(content, React, {
167 return Markdoc.renderers.react(content, React, {
@@ -141,6 +169,8 @@ export default function Markdown({ post }) {
141 Fence,
169 Fence,
142 Tabs,
170 Tabs,
143 Tab,
171 Tab,
172+ Button,
173+ Callout,
144 },
174 },
145 });
175 });
146}
176}
content/getting-started/desktop.md+26−66
@@ -8,19 +8,18 @@ weight = 1
8
8
9Port is a desktop GUI application that allows you to spin up, access, and manage your Urbit ships without any knowledge of the command line or Urbit binary.
9Port is a desktop GUI application that allows you to spin up, access, and manage your Urbit ships without any knowledge of the command line or Urbit binary.
10
10
11−<div id="port-os" class="os">
11+{% tabs %}
12− <input type="radio" id="port-macos" name="port-os" checked>
12+
13− <label for="port-macos">MacOS</label>
13+{% tab label="MacOS" %}
14− <div class="tab">
14+
15− <p>To install <strong>Port</strong> on MacOS simply download and open the <code>.dmg</code> file.</p>
15+To install **Port** on MacOS, simply download and open the `.dmg` file.
16+
16− <a href="https://github.com/urbit/port/releases/latest/download/Port.dmg" class="button-lg bg-green-400 text-white" style="width: 12rem;">
17+{% button label="Download Port" link="https://github.com/urbit/port/releases/latest/download/Port.dmg" color="bg-green-400 text-white" %}
17− Download Port
18+{% /button %}
18− </a>
19+
19− </div>
20+{% /tab %}
20−
21+
21− <input type="radio" id="port-linux" name="port-os">
22− <label for="port-linux">Linux</label>
22+{% tab label="Linux" %}
23− <div class="tab">
24
23
25We use `snap` so that **Port** can stay updated automatically. If you already have `snap` installed, simply run:
24We use `snap` so that **Port** can stay updated automatically. If you already have `snap` installed, simply run:
26
25
@@ -30,57 +29,18 @@ sudo snap install port
30
29
31Or to install `snap` for your distribution, snapcraft provides [installation instructions](https://snapcraft.io/docs/installing-snapd).
30Or to install `snap` for your distribution, snapcraft provides [installation instructions](https://snapcraft.io/docs/installing-snapd).
32
31
33− </div>
32+{% /tab %}
34−
33+
35− <input type="radio" id="port-windows" name="port-os">
34+{% tab label="Windows" %}
36− <label for="port-windows">Windows</label>
35+
37− <div class="tab">
38− <p>To install <strong>Port</strong> on Windows simply download and open the <code>.exe</code> file.</p>
36+To install **Port** on Windows, simply download and open the `.exe` file.
37+
39− <a href="https://github.com/urbit/port/releases/latest/download/PortSetup.exe" class="button-lg bg-green-400 text-white" style="width: 12rem;">
38+{% button label="Download Port" link="https://github.com/urbit/port/releases/latest/download/PortSetup.exe" color="bg-green-400 text-white" %}
40− Download Port
39+{% /button %}
41− </a>
40+
42− <p><small>
41+{% /tab %}
43− Note: The Windows version is newly released and is not yet code signed so you will have to click through a prompt warning you about running it. If you simply click <code>more info</code> -> <code>run anyway</code> it will run.
42+
44− </small></p>
43+{% /tabs %}
45− </div>
46−</div>
47−
48−<style>
49− .os {
50− display: flex;
51− flex-wrap: wrap;
52− }
53− .os label {
54− order: -1;
55− padding: .5rem;
56− min-width: 70px;
57− text-align: center;
58− cursor: pointer;
59− }
60− .os input[type="radio"] {
61− display: none;
62− }
63− .os .tab {
64− display: none;
65− margin-top: 1rem;
66− width: 100%;
67− max-width: 100%;
68− }
69− .os .tab p:first-child {
70− margin-top: 0;
71− }
72− .os .tab p:last-child {
73− margin-bottom: 0;
74− }
75− .os input[type='radio']:checked + label {
76− font-weight: bold;
77− background-color: rgba(244,243,241,1);
78− border-radius: 0.5em;
79− }
80− .os input[type='radio']:checked + label + .tab {
81− display: block;
82−}
83−</style>
84
44
85### 2. Boot a comet
45### 2. Boot a comet
86
46
@@ -96,7 +56,7 @@ Once that's finished, click **Launch Ship into Urbit** and you'll be on the netw
96
56
97![](https://media.urbit.org/site/getting-started/Desktop-app-2.jpg)
57![](https://media.urbit.org/site/getting-started/Desktop-app-2.jpg)
98
58
99−<div className="bg-wall-100 p-7 rounded-xl markdown-callout">
59+{% callout %}
100
60
101**Want to combine the simplicity of Port with a permanent Urbit ID?**
61**Want to combine the simplicity of Port with a permanent Urbit ID?**
102
62
@@ -107,7 +67,7 @@ Port will boot your Urbit in a few minutes!
107
67
108For more information on getting a planet, see our [Getting an Urbit ID](/guides/getting-an-urbit-id) guide.
68For more information on getting a planet, see our [Getting an Urbit ID](/guides/getting-an-urbit-id) guide.
109
69
110−</div>
70+{% /callout %}
111
71
112### Next steps
72### Next steps
113
73