mirror of
https://github.com/urbit/developers.urbit.org.git
synced 2024-10-26 15:49:50 +03:00
pages: community layout
This commit is contained in:
parent
9dc1b5fc7c
commit
9577c836cd
@ -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
|
||||
|
@ -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
167
pages/community/directory.js
Normal 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 },
|
||||
};
|
||||
}
|
Loading…
Reference in New Issue
Block a user