git.iko.soy/urbit.org
on master help sign in
pages: add group + app guide content and template, links to guides on pages
commitf2f6dff4ccf9e7c2ee86f0624b6794385211726c authorMatilde Park <matilde.park@urbit.org> dateWed 27 Apr 2022, 00:14 (5 years ago) parent26b5486
6 files changed+247−8
compare with master
unifiedsplit
content/application/guide.md+39 content/group/guide.md+53 pages/application/[[...application]].js+5−4 pages/application/guide.js+101 pages/group/[[...group]].js+5−4 pages/group/guide.js+44
content/application/guide.mdnew file+39
@@ -0,0 +1,39 @@
1++++
2+title = "Installing applications on Urbit"
3++++
4+
5+## 1. Get on the network
6+
7+First, you’ll need to get on Urbit. You can quickly check out the network by [downloading the Port application](https://github.com/urbit/port) and booting up a comet–a temporary Urbit ID.
8+
9+For long-term use, you’ll want to get a permanent Urbit ID and consider a running your urbit in the cloud or on a hosted service.
10+
11+Read our [Getting Started guide](https://urbit.org/install) for details.
12+
13+## 2. Finding applications
14+
15+Urbit is still in its early stages, so you’ll need to join groups and browse around the network to discover new applications as they are being brought up.
16+
17+However, we can get started a simple app from Urbit developer [`~paldev`](/id/~paldev).
18+
19+## 3. Search for a Developer
20+
21+Once you’re on the network, you’ll see and large tiled interface with a few applications installed and a search bar on the top of the page.
22+
23+Click and the search bar and search for the software provider’s Urbit ID.
24+
25+For example, to install the picture application, search for `~paldev` and then click on the result for `~paldev` to show his applications.
26+
27+![](https://media.urbit.org/site/application/app-guide1.png)
28+
29+![](https://media.urbit.org/site/application/app-guide2.png)
30+
31+## 4. Get the Application
32+
33+After selecting the “picture” app, a pane will open that shows some information about the application. Go ahead and click the “Get App” button, and confirm the following modal window to begin the installation process.
34+
35+Soon you’ll have a new application tile on your home screen that will let you upload and display a picture to your home screen.
36+
37+![](https://media.urbit.org/site/application/app-guide3.png)
38+
39+![](https://media.urbit.org/site/application/app-guide4.png)
content/group/guide.mdnew file+53
@@ -0,0 +1,53 @@
1++++
2+title = "Joining groups on Urbit"
3++++
4+
5+## 1. Get on the network
6+
7+First, you’ll need to get on Urbit. You can quickly check out the network by [downloading the Port application](https://github.com/urbit/port) and booting up a comet–a temporary Urbit ID.
8+
9+For long-term use, you’ll want to get a permanent Urbit ID and consider a running your urbit in the cloud or on a hosted service.
10+
11+Read our [Getting Started guide](https://urbit.org/install) for details.
12+
13+## 2. Open the Groups app
14+
15+Once you’re on the network, you’ll see and large tiled interface with a few applications installed: Terminal, Groups, and Bitcoin. Click on Groups.
16+
17+![](https://media.urbit.org/site/group/groups-guide1.png)
18+
19+## 3. Enter the group shortcode
20+
21+We’ll start by joining Urbit Community, a friendly introductory Urbit group.
22+
23+In the Groups app, click the “Join Group” button and enter `~bitbet-bolbel/urbit-community`.
24+
25+Then confirm by clicking with the second “Join Group” button.
26+
27+![](https://media.urbit.org/site/group/groups-guide2.png)
28+![](https://media.urbit.org/site/group/groups-guide3.png)
29+
30+## 4. Confirm join
31+
32+You should see a window that provides a description and group information. If not, check the spelling of the group name and address and try again.
33+
34+Alternatively, the ship that is hosting the group may be offline.
35+
36+Click "Join Urbit Community".
37+
38+![](https://media.urbit.org/site/group/groups-guide4.png)
39+
40+## 5. Join channels
41+
42+Congratulations, if you’re seeing a window like the one that appears below then you’ve joined the group!
43+
44+There two types of channels in the left column: Chats, and Notebooks. The former is self-explanatory, while the latter is like a blog with optional comments.
45+
46+To join a channel within the group, select a channel name from the left column, and click the Join Channel button.
47+
48+![](https://media.urbit.org/site/group/groups-guide5.png)
49+![](https://media.urbit.org/site/group/groups-guide6.png)
50+
51+## 6. Chat and post on the network
52+
53+Congratulations you’re now a part of a peer-to-peer Urbit group. Be friendly, be curious, and have fun.
pages/application/[[...application]].js+5−4
@@ -94,10 +94,11 @@ const ApplicationPage = ({ data, markdown, params }) => {
9494 <p className="text-sm font-semibold text-wall-400">
9595 Learn how to install an Urbit application
9696 </p>
97− {/* TODO: Joining groups guide. */}
98− <button className="button-lg max-w-xs bg-green-400 text-white">
99− Installing Urbit applications
100− </button>
97+ <Link href="/application/guide">
98+ <button className="button-lg max-w-xs bg-green-400 text-white">
99+ Installing Urbit applications
100+ </button>
101+ </Link>
101102 </div>
102103 </div>
103104 <hr className="text-wall-200" />
pages/application/guide.jsnew file+101
@@ -0,0 +1,101 @@
1+import Head from "next/head";
2+import Link from "next/link";
3+import { getPostBySlug } from "../../lib/lib";
4+import Meta from "../../components/Meta";
5+import Markdown from "../../components/Markdown";
6+import Container from "../../components/Container";
7+import SingleColumn from "../../components/SingleColumn";
8+import Section from "../../components/Section";
9+import { decode } from "html-entities";
10+
11+export default function GuidePage({ post, markdown }) {
12+ return (
13+ <Container>
14+ <Head>
15+ <title>Urbit • {post.title}</title>
16+ {Meta(post)}
17+ </Head>
18+ <SingleColumn>
19+ <Section narrow>
20+ <h2>{post.title}</h2>
21+ </Section>
22+ <Section narrow>
23+ <article
24+ className="markdown"
25+ dangerouslySetInnerHTML={{ __html: decode(markdown) }}
26+ ></article>
27+ <h2 className="text-3xl my-12">5. Add more applications</h2>
28+ <p className="my-2">Here's a few more applications to check out:</p>
29+ <Link href="/application/~paldev/pals">
30+ <div class="bg-wall-200 rounded-xl p-3 flex flex-col space-y-4 my-6 cursor-pointer">
31+ <div class="flex space-x-4 items-center">
32+ <div
33+ class="rounded-xl"
34+ style={{
35+ height: 100,
36+ width: 100,
37+ backgroundColor: "#A6D2BE",
38+ }}
39+ ></div>
40+ <h3>pals</h3>
41+ </div>
42+ <p>add people you know on the network</p>
43+ </div>
44+ </Link>
45+
46+ <Link href="/application/~fabnev-himnur/escape">
47+ <div class="bg-wall-200 rounded-xl p-3 flex flex-col space-y-4 my-6 cursor-pointer">
48+ <div class="flex space-x-4 items-center">
49+ <img
50+ src="https://media.urbit.org/site/application/escape.png"
51+ style={{ height: 100, width: 100 }}
52+ />
53+ <h3>EScape</h3>
54+ </div>
55+ <p>
56+ an alternative interface for the Groups application, with pals
57+ integration by{" "}
58+ <span className="text-green-400 font-mono">~fabnev-hinmur</span>
59+ </p>
60+ </div>
61+ </Link>
62+
63+ <Link href="/application/~paldev/rumors">
64+ <div class="bg-wall-200 rounded-xl p-3 flex flex-col space-y-4 cursor-pointer">
65+ <div class="flex space-x-4 items-center">
66+ <div
67+ class="rounded-xl"
68+ style={{
69+ backgroundColor: "#B17AD7",
70+ height: 100,
71+ width: 100,
72+ }}
73+ ></div>
74+ <h3>rumors</h3>
75+ </div>
76+ <p>the more people you know, the more rumors you’ll hear</p>
77+ </div>
78+ </Link>
79+ <Link href="/">
80+ <a className="text-xl pt-12 block font-semibold">Urbit.org</a>
81+ </Link>
82+ </Section>
83+ </SingleColumn>
84+ </Container>
85+ );
86+}
87+
88+//
89+export async function getStaticProps({ params }) {
90+ const post = getPostBySlug(
91+ "guide",
92+ ["title", "slug", "content"],
93+ "application"
94+ );
95+
96+ const markdown = await Markdown({ post });
97+
98+ return {
99+ props: { post, markdown },
100+ };
101+}
pages/group/[[...group]].js+5−4
@@ -92,10 +92,11 @@ const GroupPage = ({ data, markdown, params }) => {
9292 <p className="text-sm font-semibold text-wall-400">
9393 Get on the network and join this group.
9494 </p>
95− {/* TODO: Joining groups guide. */}
96− <button className="button-lg max-w-xs bg-green-400 text-white">
97− How to join a group
98− </button>
95+ <Link href="/group/guide">
96+ <button className="button-lg max-w-xs bg-green-400 text-white">
97+ How to join a group
98+ </button>
99+ </Link>
99100 </div>
100101 </div>
101102 <hr className="text-wall-200" />
pages/group/guide.jsnew file+44
@@ -0,0 +1,44 @@
1+import Head from "next/head";
2+import Link from "next/link";
3+import { getPostBySlug } from "../../lib/lib";
4+import Meta from "../../components/Meta";
5+import Markdown from "../../components/Markdown";
6+import Container from "../../components/Container";
7+import SingleColumn from "../../components/SingleColumn";
8+import Section from "../../components/Section";
9+import { decode } from "html-entities";
10+
11+export default function GuidePage({ post, markdown }) {
12+ return (
13+ <Container>
14+ <Head>
15+ <title>Urbit • {post.title}</title>
16+ {Meta(post)}
17+ </Head>
18+ <SingleColumn>
19+ <Section narrow>
20+ <h2>{post.title}</h2>
21+ </Section>
22+ <Section narrow className="markdown">
23+ <article
24+ dangerouslySetInnerHTML={{ __html: decode(markdown) }}
25+ ></article>
26+ <Link href="/">
27+ <a className="text-xl pt-12 block font-semibold">Urbit.org</a>
28+ </Link>
29+ </Section>
30+ </SingleColumn>
31+ </Container>
32+ );
33+}
34+
35+//
36+export async function getStaticProps({ params }) {
37+ const post = getPostBySlug("guide", ["title", "slug", "content"], "group");
38+
39+ const markdown = await Markdown({ post });
40+
41+ return {
42+ props: { post, markdown },
43+ };
44+}