git.iko.soy/urbit.org
on master help sign in
Merge pull request #1730 from urbit/mp/landing-2

landing: design additions after feedback

commit109bc29cbcfe8019427af1e09a803bf0d4dd4422 authorGordon <gordon.cieplak@urbit.org> dateTue 16 Aug 2022, 17:47 (4 years ago) parent33952b407edbf7
5 files changed+192−92
compare with master
unifiedsplit
content/groups/~rondev/group-discovery.md+1 content/groups/~tirrel/the-marketplace.md+1 package-lock.json+14−14 package.json+1−1 pages/decentralized-discord.js+175−77
content/groups/~rondev/group-discovery.md+1
@@ -1,6 +1,7 @@
11+++
22title = "Group Discovery"
33shortcode = "~rondev/group-discovery"
4+description = "A group for finding other groups"
45type = "Public"
56tile = "https://urbit.me/images/icons/icon-512x512.png"
67participant_range = "1000+"
content/groups/~tirrel/the-marketplace.md+1
@@ -1,5 +1,6 @@
11+++
22title = "The Marketplace"
3+description = "Welcome to The Marketplace, featuring The Pit, Urbit's first open-outcry market!"
34shortcode = "~tirrel/the-marketplace"
45type = "Public"
56tile = "https://snipboard.io/F5ubXp.jpg"
package-lock.json+14−14
@@ -12,7 +12,7 @@
1212 "@socialgouv/matomo-next": "^1.3.0",
1313 "@tailwindcss/aspect-ratio": "^0.4.0",
1414 "@tlon/sigil-js": "^1.4.5",
15− "@urbit/foundation-design-system": "^0.2.2",
15+ "@urbit/foundation-design-system": "^0.2.3",
1616 "@urbit/markdoc": "^0.1.4",
1717 "axios": "^0.26.1",
1818 "buffer": "^6.0.3",
@@ -338,9 +338,9 @@
338338 "dev": true
339339 },
340340 "node_modules/@urbit/foundation-design-system": {
341− "version": "0.2.2",
342− "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.2.2.tgz",
343− "integrity": "sha512-VzYz9LYsSbcPp9LpHkoCF6POMZuXHb7f5eJbIVZe0wyUn4boHiIGBY7BtWVi2n8n09PgZ+/7hsT8DPsE/EJ44g==",
341+ "version": "0.2.3",
342+ "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.2.3.tgz",
343+ "integrity": "sha512-Iqwa5Z4LZHtI1rAcHQz/O6nod1HUPmQ6kO1etDFi64mcsebsmsCruHDLFrLUTXiI9bj+XinOsO/M4ErcUbG8zA==",
344344 "dependencies": {
345345 "core-js": "^3.23.1",
346346 "html-react-parser": "^1.4.14",
@@ -348,7 +348,7 @@
348348 },
349349 "peerDependencies": {
350350 "@tailwindcss/aspect-ratio": "^0.4.0",
351− "@urbit/markdoc": "^0.1.4",
351+ "@urbit/markdoc": "^0.1.6",
352352 "autoprefixer": "^10.4.7",
353353 "classnames": "^2.3.1",
354354 "next": "^12.1.6",
@@ -361,9 +361,9 @@
361361 }
362362 },
363363 "node_modules/@urbit/markdoc": {
364− "version": "0.1.4",
365− "resolved": "https://registry.npmjs.org/@urbit/markdoc/-/markdoc-0.1.4.tgz",
366− "integrity": "sha512-KviPqtk+YNMA/Bi9zY17K1ONWb4lmj6oeliIZ8CnZzP+DmsQx+jqQTRdh6NosPVANRELpX37epYiu2fKcFYYwg==",
364+ "version": "0.1.6",
365+ "resolved": "https://registry.npmjs.org/@urbit/markdoc/-/markdoc-0.1.6.tgz",
366+ "integrity": "sha512-ocFGlhmleGkX53+kYLzN4UYjyndppEqHKIG2XVKZNkHsLvAeZRy0o13qCE9dfmZli/vSw11cUinOpxuXOBYxSQ==",
367367 "engines": {
368368 "node": ">=14.7.0"
369369 }
@@ -2769,9 +2769,9 @@
27692769 "dev": true
27702770 },
27712771 "@urbit/foundation-design-system": {
2772− "version": "0.2.2",
2773− "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.2.2.tgz",
2774− "integrity": "sha512-VzYz9LYsSbcPp9LpHkoCF6POMZuXHb7f5eJbIVZe0wyUn4boHiIGBY7BtWVi2n8n09PgZ+/7hsT8DPsE/EJ44g==",
2772+ "version": "0.2.3",
2773+ "resolved": "https://registry.npmjs.org/@urbit/foundation-design-system/-/foundation-design-system-0.2.3.tgz",
2774+ "integrity": "sha512-Iqwa5Z4LZHtI1rAcHQz/O6nod1HUPmQ6kO1etDFi64mcsebsmsCruHDLFrLUTXiI9bj+XinOsO/M4ErcUbG8zA==",
27752775 "requires": {
27762776 "core-js": "^3.23.1",
27772777 "html-react-parser": "^1.4.14",
@@ -2779,9 +2779,9 @@
27792779 }
27802780 },
27812781 "@urbit/markdoc": {
2782− "version": "0.1.4",
2783− "resolved": "https://registry.npmjs.org/@urbit/markdoc/-/markdoc-0.1.4.tgz",
2784− "integrity": "sha512-KviPqtk+YNMA/Bi9zY17K1ONWb4lmj6oeliIZ8CnZzP+DmsQx+jqQTRdh6NosPVANRELpX37epYiu2fKcFYYwg=="
2782+ "version": "0.1.6",
2783+ "resolved": "https://registry.npmjs.org/@urbit/markdoc/-/markdoc-0.1.6.tgz",
2784+ "integrity": "sha512-ocFGlhmleGkX53+kYLzN4UYjyndppEqHKIG2XVKZNkHsLvAeZRy0o13qCE9dfmZli/vSw11cUinOpxuXOBYxSQ=="
27852785 },
27862786 "acorn": {
27872787 "version": "7.4.1",
package.json+1−1
@@ -19,7 +19,7 @@
1919 "@socialgouv/matomo-next": "^1.3.0",
2020 "@tailwindcss/aspect-ratio": "^0.4.0",
2121 "@tlon/sigil-js": "^1.4.5",
22− "@urbit/foundation-design-system": "^0.2.2",
22+ "@urbit/foundation-design-system": "^0.2.3",
2323 "@urbit/markdoc": "^0.1.4",
2424 "axios": "^0.26.1",
2525 "buffer": "^6.0.3",
pages/decentralized-discord.js+175−77
@@ -8,6 +8,7 @@ import {
88 IntraNav,
99 TwoUp,
1010} from "@urbit/foundation-design-system";
11+import { getPostBySlug } from "../lib/lib";
1112import Meta from "../components/Meta";
1213import Header from "../components/Header";
1314import Footer from "../components/Footer";
@@ -39,7 +40,7 @@ function GuideCard({ title, description, href, className }) {
3940 );
4041}
4142
42−export default function DiscordLanding({ search }) {
43+export default function DiscordLanding({ search, featuredGroups }) {
4344 const post = {
4445 title: "Urbit is Decentralized Discord",
4546 description:
@@ -47,6 +48,7 @@ export default function DiscordLanding({ search }) {
4748 image:
4849 "https://storage.googleapis.com/media.urbit.org/site/landing/discord-opengraph.png",
4950 };
51+ const pairedGroups = pair(featuredGroups);
5052 return (
5153 <Container>
5254 <Head>
@@ -75,7 +77,7 @@ export default function DiscordLanding({ search }) {
7577 />
7678 </video>
7779
78− <div className="md:p-16">
80+ <div className="pt-8 md:p-16">
7981 <p className="type-ui text-center">
8082 Urbit’s Groups app allows teams, communities, and friends to get
8183 together and communicate using their own private servers.
@@ -85,17 +87,88 @@ export default function DiscordLanding({ search }) {
8587 </p>
8688 </div>
8789 </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>
88167
89168 <Section className="justify-center flex-col flex items-center space-y-8">
90169 <h2 className="text-center">
91170 Host your own group in under 60 minutes
92171 </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>
99172 <TwoUp>
100173 <GuideCard
101174 title="Host a Group"
@@ -121,76 +194,67 @@ export default function DiscordLanding({ search }) {
121194 href="https://urbit.org/getting-started/desktop"
122195 />
123196 </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>
124210
125− <Link href="/applications/~lander-dister-dozzod-dozzod/groups">
126− <a className="pt-16 flex space-x-2 text-green-400 font-semibold">
127− <svg
128− width="24"
129− height="24"
130− viewBox="0 0 24 24"
131− fill="none"
132− xmlns="http://www.w3.org/2000/svg"
133− >
134− <rect width="24" height="24" rx="5" fill="#DC5F3F" />
135− </svg>
136− <span>Learn more about Urbit Groups</span>
137− </a>
138− </Link>
139− <Link href="/overview">
140− <a className="flex space-x-2 text-green-400 font-semibold">
141− <svg
142− width="31"
143− height="31"
144− viewBox="0 0 31 31"
145− fill="none"
146− xmlns="http://www.w3.org/2000/svg"
147− >
148− <g filter="url(#filter0_d_216_1182)">
149− <circle cx="15.5" cy="13.5" r="11.5" fill="white" />
150− </g>
151− <path
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"
153− fill="#24221E"
154− />
155− <defs>
156− <filter
157− id="filter0_d_216_1182"
158− x="0"
159− y="0"
160− width="31"
161− height="31"
162− filterUnits="userSpaceOnUse"
163− color-interpolation-filters="sRGB"
164− >
165− <feFlood flood-opacity="0" result="BackgroundImageFix" />
166− <feColorMatrix
167− in="SourceAlpha"
168− type="matrix"
169− values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
170− result="hardAlpha"
171− />
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>
211+ <div className="flex flex-col">
212+ <p className="font-bold">Enabling Image & Media Hosting</p>
213+ <p>
214+ Groups is integrated with S3, see our guide on{" "}
215+ <Link href="https://operators.urbit.org/manual/os/s3">
216+ <a>setting up S3 Storage</a>
217+ </Link>
218+ </p>
219+ </div>
220+ </div>
221+ </Section>
222+ <Section className="flex flex-col space-y-12">
223+ <h2>Explore Groups</h2>
224+ {pairedGroups.map((e) => (
225+ <TwoUp>
226+ {e.map((group) => (
227+ <Link href={`/groups/${group.shortcode}`}>
228+ <div className="flex space-x-4 items-center cursor-pointer hover:opacity-90">
229+ <div
230+ className="h-36 w-36 rounded-xl items-center justify-center shrink-0 overflow-hidden"
231+ style={{
232+ backgroundColor: group?.tile?.startsWith("#")
233+ ? group?.tile
234+ : "rgba(0,0,0,0)",
235+ }}
236+ >
237+ {!group?.tile?.startsWith("#") && (
238+ <img
239+ className="items-center h-36 w-36"
240+ src={group.tile}
241+ />
242+ )}
243+ </div>
244+ <div className="">
245+ <p className="text-left font-bold">{group.title}</p>
246+ <p className="text-left text-wall-400 font-light">
247+ {group.description}
248+ </p>
249+ </div>
250+ </div>
251+ </Link>
252+ ))}
253+ </TwoUp>
254+ ))}
255+ <Link href="/ecosystem?type=groups" passHref>
256+ <a className="button-lg bg-green-400 text-white w-fit">
257+ Explore Groups
194258 </a>
195259 </Link>
196260 </Section>
@@ -199,3 +263,37 @@ export default function DiscordLanding({ search }) {
199263 </Container>
200264 );
201265}
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+}