git.iko.soy/urbit.org
on master help sign in
Merge pull request #1730 from urbit/mp/landing-2
109bc29Gordon
content/groups/~rondev/group-discovery.md+1
compare with master
unifiedsplit
@@ -1,6 +1,7 @@
1+++
1+++
2title = "Group Discovery"
2title = "Group Discovery"
3shortcode = "~rondev/group-discovery"
3shortcode = "~rondev/group-discovery"
4+description = "A group for finding other groups"
4type = "Public"
5type = "Public"
5tile = "https://urbit.me/images/icons/icon-512x512.png"
6tile = "https://urbit.me/images/icons/icon-512x512.png"
6participant_range = "1000+"
7participant_range = "1000+"
content/groups/~tirrel/the-marketplace.md+1
@@ -1,5 +1,6 @@
1+++
1+++
2title = "The Marketplace"
2title = "The Marketplace"
3+description = "Welcome to The Marketplace, featuring The Pit, Urbit's first open-outcry market!"
3shortcode = "~tirrel/the-marketplace"
4shortcode = "~tirrel/the-marketplace"
4type = "Public"
5type = "Public"
5tile = "https://snipboard.io/F5ubXp.jpg"
6tile = "https://snipboard.io/F5ubXp.jpg"
package-lock.json+14−14
@@ -12,7 +12,7 @@
12 "@socialgouv/matomo-next": "^1.3.0",
12 "@socialgouv/matomo-next": "^1.3.0",
13 "@tailwindcss/aspect-ratio": "^0.4.0",
13 "@tailwindcss/aspect-ratio": "^0.4.0",
14 "@tlon/sigil-js": "^1.4.5",
14 "@tlon/sigil-js": "^1.4.5",
15− "@urbit/foundation-design-system": "^0.2.2",
15+ "@urbit/foundation-design-system": "^0.2.3",
16 "@urbit/markdoc": "^0.1.4",
16 "@urbit/markdoc": "^0.1.4",
17 "axios": "^0.26.1",
17 "axios": "^0.26.1",
18 "buffer": "^6.0.3",
18 "buffer": "^6.0.3",
@@ -338,9 +338,9 @@
338 "dev": true
338 "dev": true
339 },
339 },
340 "node_modules/@urbit/foundation-design-system": {
340 "node_modules/@urbit/foundation-design-system": {
341− "version": "0.2.2",
341+ "version": "0.2.3",
342− "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.2.2.tgz",
342+ "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.2.3.tgz",
343− "integrity": "sha512-VzYz9LYsSbcPp9LpHkoCF6POMZuXHb7f5eJbIVZe0wyUn4boHiIGBY7BtWVi2n8n09PgZ+/7hsT8DPsE/EJ44g==",
343+ "integrity": "sha512-Iqwa5Z4LZHtI1rAcHQz/O6nod1HUPmQ6kO1etDFi64mcsebsmsCruHDLFrLUTXiI9bj+XinOsO/M4ErcUbG8zA==",
344 "dependencies": {
344 "dependencies": {
345 "core-js": "^3.23.1",
345 "core-js": "^3.23.1",
346 "html-react-parser": "^1.4.14",
346 "html-react-parser": "^1.4.14",
@@ -348,7 +348,7 @@
348 },
348 },
349 "peerDependencies": {
349 "peerDependencies": {
350 "@tailwindcss/aspect-ratio": "^0.4.0",
350 "@tailwindcss/aspect-ratio": "^0.4.0",
351− "@urbit/markdoc": "^0.1.4",
351+ "@urbit/markdoc": "^0.1.6",
352 "autoprefixer": "^10.4.7",
352 "autoprefixer": "^10.4.7",
353 "classnames": "^2.3.1",
353 "classnames": "^2.3.1",
354 "next": "^12.1.6",
354 "next": "^12.1.6",
@@ -361,9 +361,9 @@
361 }
361 }
362 },
362 },
363 "node_modules/@urbit/markdoc": {
363 "node_modules/@urbit/markdoc": {
364− "version": "0.1.4",
364+ "version": "0.1.6",
365− "resolved": "https://registry.npmjs.org/@urbit/markdoc/-/markdoc-0.1.4.tgz",
365+ "resolved": "https://registry.npmjs.org/@urbit/markdoc/-/markdoc-0.1.6.tgz",
366− "integrity": "sha512-KviPqtk+YNMA/Bi9zY17K1ONWb4lmj6oeliIZ8CnZzP+DmsQx+jqQTRdh6NosPVANRELpX37epYiu2fKcFYYwg==",
366+ "integrity": "sha512-ocFGlhmleGkX53+kYLzN4UYjyndppEqHKIG2XVKZNkHsLvAeZRy0o13qCE9dfmZli/vSw11cUinOpxuXOBYxSQ==",
367 "engines": {
367 "engines": {
368 "node": ">=14.7.0"
368 "node": ">=14.7.0"
369 }
369 }
@@ -2769,9 +2769,9 @@
2769 "dev": true
2769 "dev": true
2770 },
2770 },
2771 "@urbit/foundation-design-system": {
2771 "@urbit/foundation-design-system": {
2772− "version": "0.2.2",
2772+ "version": "0.2.3",
2773− "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.2.2.tgz",
2773+ "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.2.3.tgz",
2774− "integrity": "sha512-VzYz9LYsSbcPp9LpHkoCF6POMZuXHb7f5eJbIVZe0wyUn4boHiIGBY7BtWVi2n8n09PgZ+/7hsT8DPsE/EJ44g==",
2774+ "integrity": "sha512-Iqwa5Z4LZHtI1rAcHQz/O6nod1HUPmQ6kO1etDFi64mcsebsmsCruHDLFrLUTXiI9bj+XinOsO/M4ErcUbG8zA==",
2775 "requires": {
2775 "requires": {
2776 "core-js": "^3.23.1",
2776 "core-js": "^3.23.1",
2777 "html-react-parser": "^1.4.14",
2777 "html-react-parser": "^1.4.14",
@@ -2779,9 +2779,9 @@
2779 }
2779 }
2780 },
2780 },
2781 "@urbit/markdoc": {
2781 "@urbit/markdoc": {
2782− "version": "0.1.4",
2782+ "version": "0.1.6",
2783− "resolved": "https://registry.npmjs.org/@urbit/markdoc/-/markdoc-0.1.4.tgz",
2783+ "resolved": "https://registry.npmjs.org/@urbit/markdoc/-/markdoc-0.1.6.tgz",
2784− "integrity": "sha512-KviPqtk+YNMA/Bi9zY17K1ONWb4lmj6oeliIZ8CnZzP+DmsQx+jqQTRdh6NosPVANRELpX37epYiu2fKcFYYwg=="
2784+ "integrity": "sha512-ocFGlhmleGkX53+kYLzN4UYjyndppEqHKIG2XVKZNkHsLvAeZRy0o13qCE9dfmZli/vSw11cUinOpxuXOBYxSQ=="
2785 },
2785 },
2786 "acorn": {
2786 "acorn": {
2787 "version": "7.4.1",
2787 "version": "7.4.1",
package.json+1−1
@@ -19,7 +19,7 @@
19 "@socialgouv/matomo-next": "^1.3.0",
19 "@socialgouv/matomo-next": "^1.3.0",
20 "@tailwindcss/aspect-ratio": "^0.4.0",
20 "@tailwindcss/aspect-ratio": "^0.4.0",
21 "@tlon/sigil-js": "^1.4.5",
21 "@tlon/sigil-js": "^1.4.5",
22− "@urbit/foundation-design-system": "^0.2.2",
22+ "@urbit/foundation-design-system": "^0.2.3",
23 "@urbit/markdoc": "^0.1.4",
23 "@urbit/markdoc": "^0.1.4",
24 "axios": "^0.26.1",
24 "axios": "^0.26.1",
25 "buffer": "^6.0.3",
25 "buffer": "^6.0.3",
pages/decentralized-discord.js+175−77
@@ -8,6 +8,7 @@ import {
8 IntraNav,
8 IntraNav,
9 TwoUp,
9 TwoUp,
10} from "@urbit/foundation-design-system";
10} from "@urbit/foundation-design-system";
11+import { getPostBySlug } from "../lib/lib";
11import Meta from "../components/Meta";
12import Meta from "../components/Meta";
12import Header from "../components/Header";
13import Header from "../components/Header";
13import Footer from "../components/Footer";
14import Footer from "../components/Footer";
@@ -39,7 +40,7 @@ function GuideCard({ title, description, href, className }) {
39 );
40 );
40}
41}
41
42
42−export default function DiscordLanding({ search }) {
43+export default function DiscordLanding({ search, featuredGroups }) {
43 const post = {
44 const post = {
44 title: "Urbit is Decentralized Discord",
45 title: "Urbit is Decentralized Discord",
45 description:
46 description:
@@ -47,6 +48,7 @@ export default function DiscordLanding({ search }) {
47 image:
48 image:
48 "https://storage.googleapis.com/media.urbit.org/site/landing/discord-opengraph.png",
49 "https://storage.googleapis.com/media.urbit.org/site/landing/discord-opengraph.png",
49 };
50 };
51+ const pairedGroups = pair(featuredGroups);
50 return (
52 return (
51 <Container>
53 <Container>
52 <Head>
54 <Head>
@@ -75,7 +77,7 @@ export default function DiscordLanding({ search }) {
75 />
77 />
76 </video>
78 </video>
77
79
78− <div className="md:p-16">
80+ <div className="pt-8 md:p-16">
79 <p className="type-ui text-center">
81 <p className="type-ui text-center">
80 Urbit’s Groups app allows teams, communities, and friends to get
82 Urbit’s Groups app allows teams, communities, and friends to get
81 together and communicate using their own private servers.
83 together and communicate using their own private servers.
@@ -85,17 +87,88 @@ export default function DiscordLanding({ search }) {
85 </p>
87 </p>
86 </div>
88 </div>
87 </Section>
89 </Section>
90+ {/* Features */}
91+ <Section className="flex flex-col space-y-8">
92+ {/* Chat */}
93+ <div className="flex flex-col md:flex-row items-center space-y-8 md:space-y-0 md:space-x-8">
94+ <div className="flex flex-col space-y-4 max-w-prose">
95+ <h3>Chat</h3>
96+ <p>
97+ Create chat channels which are open for all to join (or private)
98+ in which you reply to individual messages, share images, urbit
99+ applications, and even embed messages from other chatrooms.
100+ </p>
101+ </div>
102+ <img
103+ className="block h-72"
104+ src="https://storage.googleapis.com/media.urbit.org/site/discord/chat.png"
105+ />
106+ </div>
107+ {/* Messages */}
108+ <div className="flex flex-col-reverse md:flex-row items-center md:space-x-8">
109+ <img
110+ className="block h-72 my-8 md:my-0"
111+ src="https://storage.googleapis.com/media.urbit.org/site/discord/messages.png"
112+ />
113+ <div className="flex flex-col space-y-4 max-w-prose">
114+ <h3>Messages</h3>
115+ <p>
116+ Reach out to your friends directly via Messages, a simple chat
117+ tool that lets you talk one-on-one or with many.
118+ </p>
119+ </div>
120+ </div>
121+ {/* Notebooks */}
122+ <div className="flex flex-col md:flex-row items-center space-y-8 md:space-y-0 md:space-x-8">
123+ <div className="flex flex-col space-y-4 max-w-prose">
124+ <h3>Notebooks</h3>
125+ <p>
126+ Write a blog post, create a magazine, draft an announcement or
127+ documentation using Notebooks, a short and long form text
128+ editor.
129+ </p>
130+ </div>
131+ <img
132+ className="block h-72"
133+ src="https://storage.googleapis.com/media.urbit.org/site/discord/notebooks.png"
134+ />
135+ </div>
136+ {/* Collections */}
137+ <div className="flex flex-col-reverse md:flex-row items-center md:space-x-8">
138+ <img
139+ className="block h-72 my-8 md:my-0"
140+ src="https://storage.googleapis.com/media.urbit.org/site/discord/collections.png"
141+ />
142+ <div className="flex flex-col space-y-4 max-w-prose">
143+ <h3>Collections</h3>
144+ <p>
145+ Assemble a feed of images, save links for later, make a mood
146+ board, or start a forum on Collections, a repository for
147+ day-to-day digital trawling.
148+ </p>
149+ </div>
150+ </div>
151+ {/* Profiles */}
152+ <div className="flex flex-col md:flex-row items-center space-y-8 md:space-y-0 md:space-x-8">
153+ <div className="flex flex-col space-y-4 max-w-prose">
154+ <h3>Profiles</h3>
155+ <p>
156+ Make your Urbit ID yours: set a nickname, write a bio, change
157+ your avatar, or choose to stay anonymous. You can also pin
158+ featured groups on your profile.
159+ </p>
160+ </div>
161+ <img
162+ className="block h-72"
163+ src="https://storage.googleapis.com/media.urbit.org/site/discord/profiles.png"
164+ />
165+ </div>
166+ </Section>
88
167
89 <Section className="justify-center flex-col flex items-center space-y-8">
168 <Section className="justify-center flex-col flex items-center space-y-8">
90 <h2 className="text-center">
169 <h2 className="text-center">
91 Host your own group in under 60 minutes
170 Host your own group in under 60 minutes
92 </h2>
171 </h2>
93− <p className="text-center">
94− Get immediate{" "}
95− <Link href="/applications/~lander-dister-dozzod-dozzod/groups">
96− decentralized messaging, blogging, chatting, and collections.
97− </Link>
98− </p>
99 <TwoUp>
172 <TwoUp>
100 <GuideCard
173 <GuideCard
101 title="Host a Group"
174 title="Host a Group"
@@ -121,76 +194,67 @@ export default function DiscordLanding({ search }) {
121 href="https://urbit.org/getting-started/desktop"
194 href="https://urbit.org/getting-started/desktop"
122 />
195 />
123 </TwoUp>
196 </TwoUp>
197+ <div className="flex items-center space-x-4 w-full">
198+ <svg
199+ width="87"
200+ height="83"
201+ viewBox="0 0 87 83"
202+ fill="none"
203+ xmlns="http://www.w3.org/2000/svg"
204+ >
205+ <path
206+ d="M18.6247 44.723C19.4335 43.7564 20.9208 43.7564 21.7257 44.723L29.6952 54.2785C30.504 55.2451 31.9913 55.2451 32.7962 54.2785L49.7491 33.9522C50.5578 32.9856 52.0452 32.9856 52.8501 33.9522L60.6894 43.3539C63.0842 42.4938 65.6605 42.0244 68.3472 42.0244C69.1994 42.0244 70.0437 42.0756 70.8722 42.1664L70.8801 5.12361C70.8801 2.61831 68.8404 0.578613 66.3351 0.578613H5.5139C3.0086 0.578613 0.968903 2.61831 0.968903 5.12361V62.729C0.968903 65.2343 3.0086 67.274 5.5139 67.274H45.7715C45.6808 66.4455 45.6295 65.6012 45.6295 64.749C45.6295 63.8967 45.6808 63.0525 45.7715 62.224L6.0189 62.22V59.837L18.6247 44.723ZM21.6744 13.618C25.9195 13.618 29.3599 17.0583 29.3599 21.3035C29.3599 25.5487 25.9196 28.989 21.6744 28.989C17.4292 28.989 13.9889 25.5487 13.9889 21.3035C13.985 17.0584 17.4292 13.618 21.6744 13.618ZM68.3556 47.0702C58.5948 47.0702 50.6806 54.9845 50.6806 64.7452C50.6806 74.506 58.5948 82.4202 68.3556 82.4202C78.1163 82.4202 86.0306 74.506 86.0306 64.7452C86.0306 54.9845 78.1163 47.0702 68.3556 47.0702ZM77.201 64.0392C76.7039 64.5561 76.0411 64.8165 75.3782 64.8165C74.7509 64.8165 74.1197 64.5837 73.6304 64.1142L70.8765 61.4748V73.9382C70.8765 75.3348 69.7482 76.4632 68.3515 76.4632C66.9549 76.4632 65.8265 75.3348 65.8265 73.9382L65.8305 62.2201V61.4745L63.0766 64.1139C62.0666 65.0766 60.4727 65.045 59.5061 64.0389C58.5434 63.0329 58.575 61.4351 59.581 60.4684L66.6037 53.7337C67.5821 52.7947 69.1208 52.7947 70.0992 53.7337L77.1218 60.4684C78.1318 61.431 78.1674 63.0289 77.2007 64.0389L77.201 64.0392Z"
207+ className="fill-wall-600"
208+ />
209+ </svg>
124
210
125− <Link href="/applications/~lander-dister-dozzod-dozzod/groups">
211+ <div className="flex flex-col">
126− <a className="pt-16 flex space-x-2 text-green-400 font-semibold">
212+ <p className="font-bold">Enabling Image & Media Hosting</p>
127− <svg
213+ <p>
128− width="24"
214+ Groups is integrated with S3, see our guide on{" "}
129− height="24"
215+ <Link href="https://operators.urbit.org/manual/os/s3">
130− viewBox="0 0 24 24"
216+ <a>setting up S3 Storage</a>
131− fill="none"
217+ </Link>
132− xmlns="http://www.w3.org/2000/svg"
218+ </p>
133− >
219+ </div>
134− <rect width="24" height="24" rx="5" fill="#DC5F3F" />
220+ </div>
135− </svg>
221+ </Section>
136− <span>Learn more about Urbit Groups</span>
222+ <Section className="flex flex-col space-y-12">
137− </a>
223+ <h2>Explore Groups</h2>
138− </Link>
224+ {pairedGroups.map((e) => (
139− <Link href="/overview">
225+ <TwoUp>
140− <a className="flex space-x-2 text-green-400 font-semibold">
226+ {e.map((group) => (
141− <svg
227+ <Link href={`/groups/${group.shortcode}`}>
142− width="31"
228+ <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
143− height="31"
229+ <div
144− viewBox="0 0 31 31"
230+ className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden"
145− fill="none"
231+ style={{
146− xmlns="http://www.w3.org/2000/svg"
232+ backgroundColor: group?.tile?.startsWith("#")
147− >
233+ ? group?.tile
148− <g filter="url(#filter0_d_216_1182)">
234+ : "rgba(0,0,0,0)",
149− <circle cx="15.5" cy="13.5" r="11.5" fill="white" />
235+ }}
150− </g>
236+ >
151− <path
237+ {!group?.tile?.startsWith("#") && (
152− d="M9.00544 15.6293C8.97041 14.6356 9.10469 13.7944 9.40828 13.1057C9.71188 12.4169 10.1527 11.8938 10.7307 11.5363C11.3145 11.1788 12.0005 11 12.7887 11C13.3375 11 13.8629 11.1025 14.365 11.3076C14.8671 11.5126 15.4364 11.8675 16.0728 12.3722C16.4114 12.6404 16.6975 12.8454 16.931 12.9874C17.1645 13.1241 17.4331 13.1924 17.7367 13.1924C18.1512 13.1924 18.4928 13.0478 18.7613 12.7587C19.0299 12.4642 19.1554 11.9989 19.1379 11.3628H21.9928C22.0337 12.3617 21.8994 13.2056 21.59 13.8943C21.2806 14.5831 20.8339 15.1062 20.2501 15.4637C19.6663 15.8212 18.9861 16 18.2096 16C17.6316 16 17.0886 15.8922 16.5807 15.6767C16.0786 15.4558 15.521 15.1036 14.908 14.6199C14.546 14.3307 14.257 14.123 14.041 13.9968C13.825 13.8654 13.5681 13.7997 13.2704 13.7997C12.8558 13.7997 12.5143 13.9416 12.2457 14.2256C11.9772 14.5042 11.8516 14.9721 11.8691 15.6293H9.00544Z"
238+ <img
153− fill="#24221E"
239+ className="items-center h-36 w-36"
154− />
240+ src={group.tile}
155− <defs>
241+ />
156− <filter
242+ )}
157− id="filter0_d_216_1182"
243+ </div>
158− x="0"
244+ <div className="">
159− y="0"
245+ <p className="text-left font-bold">{group.title}</p>
160− width="31"
246+ <p className="text-left text-wall-400 font-light">
161− height="31"
247+ {group.description}
162− filterUnits="userSpaceOnUse"
248+ </p>
163− color-interpolation-filters="sRGB"
249+ </div>
164− >
250+ </div>
165− <feFlood flood-opacity="0" result="BackgroundImageFix" />
251+ </Link>
166− <feColorMatrix
252+ ))}
167− in="SourceAlpha"
253+ </TwoUp>
168− type="matrix"
254+ ))}
169− values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
255+ <Link href="/ecosystem?type=groups" passHref>
170− result="hardAlpha"
256+ <a className="button-lg bg-green-400 text-white w-fit">
171− />
257+ Explore Groups
172− <feOffset dy="2" />
173− <feGaussianBlur stdDeviation="2" />
174− <feComposite in2="hardAlpha" operator="out" />
175− <feColorMatrix
176− type="matrix"
177− values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
178− />
179− <feBlend
180− mode="normal"
181− in2="BackgroundImageFix"
182− result="effect1_dropShadow_216_1182"
183− />
184− <feBlend
185− mode="normal"
186− in="SourceGraphic"
187− in2="effect1_dropShadow_216_1182"
188− result="shape"
189− />
190− </filter>
191− </defs>
192− </svg>
193− <span>Learn more about Urbit</span>
194 </a>
258 </a>
195 </Link>
259 </Link>
196 </Section>
260 </Section>
@@ -199,3 +263,37 @@ export default function DiscordLanding({ search }) {
199 </Container>
263 </Container>
200 );
264 );
201}
265}
266+
267+const pair = (arr) =>
268+ arr.reduce(function (rows, key, index) {
269+ return (
270+ (index % 2 == 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) &&
271+ rows
272+ );
273+ }, []);
274+
275+export async function getStaticProps() {
276+ const featuredGroups = [
277+ getPostBySlug(
278+ "urbit-community",
279+ ["title", "slug", "shortcode", "description", "tile"],
280+ "groups/~bitbet-bolbel"
281+ ),
282+ getPostBySlug(
283+ "the-marketplace",
284+ ["title", "slug", "shortcode", "description", "tile"],
285+ "groups/~tirrel"
286+ ),
287+ getPostBySlug(
288+ "group-discovery",
289+ ["title", "slug", "shortcode", "description", "tile"],
290+ "groups/~rondev"
291+ ),
292+ getPostBySlug(
293+ "other-life",
294+ ["title", "slug", "shortcode", "description", "tile"],
295+ "groups/~hatryx-lastud"
296+ ),
297+ ];
298+ return { props: { featuredGroups } };
299+}