urbit/developers.urbit.org
1
1
Fork 0
mirror of https://github.com/urbit/developers.urbit.org.git synced 2024-10-26 15:49:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

pages: community layout

Browse Source
This commit is contained in:
Matilde Park 2022-06-27 18:36:40 -07:00
parent 9dc1b5fc7c
commit 9577c836cd
3 changed files with 178 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/Card.js
View File

@ -8,10 +8,11 @@ export default function Card({
text,
callout = "",
className = "",
disableArrow = false,
}) {
return callout ? (
<div
id={callout === "" ? "card" : ""}
id={callout === "" && !disableArrow ? "card" : ""}
className={classNames(
"bg-wall-100 rounded-xl p-7 items-stretch relative flex",
{ "space-x-4": icon },
@ -30,7 +31,7 @@ export default function Card({
) : (
<Link href={href}>
<div
id={callout === "" ? "card" : ""}
id={callout === "" && !disableArrow ? "card" : ""}
className={
"bg-wall-100 rounded-xl flex space-x-4 p-7 items-center relative cursor-pointer " +
className

10
components/Sigil.js
View File

@ -12,14 +12,20 @@ export const foregroundFromBackground = (background) => {
return whiteBrightness - brightness < 50 ? "black" : "white";
};
export const Sigil = ({ patp, size, color = "#24201E", icon }) => {
export const Sigil = ({
patp,
size,
color = "#24201E",
icon,
className = "",
}) => {
if (patp.length > 14) {
return <div />;
}
const foreground = foregroundFromBackground(color);
return (
<div
className={icon ? "p-1" : ""}
className={(icon ? "p-1 " : "") + className}
style={{ backgroundColor: icon ? color || "black" : "transparent" }}
>
{sigil({

167
pages/community/directory.js Normal file
View File

@ -0,0 +1,167 @@
import Head from "next/head";
import Link from "next/link";
import {
Markdown,
Container,
SingleColumn,
Section,
TwoUp,
} from "foundation-design-system";
import Sigil from "../../components/Sigil";
import Card from "../../components/Card";
import Meta from "../../components/Meta";
import Header from "../../components/Header";
import Footer from "../../components/Footer";
import { getAllPosts } from "../../lib/lib";
export default function Directory({ search, directory }) {
const post = {
title: "Directory",
description:
"Our community is comprised of individuals, all of whom happen to be pretty friendly.",
};
const tlon = pair(directory.filter((e) => e.org === "Tlon"));
const uf = pair(directory.filter((e) => e.org === "Urbit Foundation"));
const additional = pair(
directory.filter((e) => e.org === "Additional Community Members")
);
return (
<Container>
<Head>
<title>Directory • developers.urbit.org</title>
{Meta(post)}
</Head>
<Header search={search} />
<SingleColumn>
<Section>
<h1>Directory</h1>
</Section>
<Section>
<p>
Our community is comprised of individuals, all of whom happen to be
pretty friendly. Here’s a list of prominent figures you’ll likely
encounter that are open to being contacted:
</p>
</Section>
<Section>
<h3>Urbit Foundation</h3>
<div className="mt-4">
{uf.map((pair) => {
return (
<TwoUp>
{pair.map((e) => (
<Card
title={e.name}
text={[
<code className="block text-green-400 font-semibold">
{e.patp}
</code>,
e.title,
]}
icon={
<Sigil
patp={e.patp}
className="rounded-xl overflow-hidden"
/>
}
href={`https://urbit.org/ids/${e.patp}`}
disableArrow
className="lg:basis-1/2"
/>
))}
</TwoUp>
);
})}
</div>
</Section>
<Section>
<h3>Tlon Corporation</h3>
<div className="flex flex-wrap mt-4">
{tlon.map((pair) => {
return (
<TwoUp>
{pair.map((e) => (
<Card
title={e.name}
text={[
<code className="block text-green-400 font-semibold">
{e.patp}
</code>,
e.title,
]}
icon={
<Sigil
patp={e.patp}
className="rounded-xl overflow-hidden"
/>
}
href={`https://urbit.org/ids/${e.patp}`}
disableArrow
className="lg:basis-1/2"
/>
))}
</TwoUp>
);
})}
</div>
</Section>
<Section>
<h3>Additional Community Members</h3>
<div className="flex flex-wrap mt-4">
{additional.map((pair) => {
return (
<TwoUp>
{pair.map((e) => (
<Card
title={e.name}
text={[
<code className="block text-green-400 font-semibold">
{e.patp}
</code>,
e.title,
]}
icon={
<Sigil
patp={e.patp}
className="rounded-xl overflow-hidden"
/>
}
href={`https://urbit.org/ids/${e.patp}`}
disableArrow
className="lg:basis-1/2"
/>
))}
</TwoUp>
);
})}
</div>
</Section>
</SingleColumn>
<Footer />
</Container>
);
}
const pair = (arr) =>
arr.reduce(function (rows, key, index) {
return (
(index % 2 == 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) &&
rows
);
}, []);
export async function getStaticProps() {
const directory = getAllPosts(
["name", "title", "patp", "org", "content"],
"community/directory",
""
).map((e) => ({
...e,
content: JSON.stringify(Markdown.parse({ post: { content: e.content } })),
}));
return {
props: { directory },
};
}