git.iko.soy/urbit.org
on master help sign in
pages, components: recomponentize public gateway pages
dc1ddedMatilde Park
components/gateway/Description.jsnew file+21
compare with master
unifiedsplit
@@ -0,0 +1,21 @@
1+import { decode } from "html-entities";
2+
3+const Description = ({ description, fallback, markdown }) => {
4+ return (
5+ (description !== fallback || markdown) && (
6+ <div className="flex flex-col space-y-4">
7+ <p className="font-bold text-wall-400">Description</p>
8+ {markdown ? (
9+ <div
10+ className="flex flex-col space-y-4"
11+ dangerouslySetInnerHTML={{ __html: decode(markdown) }}
12+ />
13+ ) : (
14+ <p>{description}</p>
15+ )}
16+ </div>
17+ )
18+ );
19+};
20+
21+export default Description;
components/gateway/GatewayHeader.jsnew file+24
@@ -0,0 +1,24 @@
1+const GatewayHeader = ({ image, sigil, title, item }) => {
2+ return (
3+ <div className="flex items-center space-x-4">
4+ {image ? (
5+ <img className="rounded-xl" src={image} height={100} width={100} />
6+ ) : (
7+ !sigil && (
8+ <img
9+ className="object-contain shadow-sm rounded-xl"
10+ style={{ height: 100, width: 100 }}
11+ src="https://media.urbit.org/logo/urbit-logo-card.png"
12+ />
13+ )
14+ )}
15+ {sigil && sigil}
16+ <div className="flex flex-col">
17+ <h2>{title}</h2>
18+ <p>{item}</p>
19+ </div>
20+ </div>
21+ );
22+};
23+
24+export default GatewayHeader;
components/gateway/MetadataBlock.jsnew file+8
@@ -0,0 +1,8 @@
1+const MetadataBlock = ({ title, content }) => (
2+ <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
3+ <p className="font-bold text-wall-400">{title}</p>
4+ <p className="font-mono">{content}</p>
5+ </div>
6+);
7+
8+export default MetadataBlock;
components/gateway/MetadataLink.jsnew file+12
@@ -0,0 +1,12 @@
1+import Link from "next/link";
2+
3+const MetadataLink = ({ title, href, content }) => (
4+ <div className="flex flex-col basis-1/2 md:basis-auto">
5+ <p className="font-bold text-wall-400">{title}</p>
6+ <Link href={href}>
7+ <a className="type-ui font-mono text-green-400">{content}</a>
8+ </Link>
9+ </div>
10+);
11+
12+export default MetadataLink;
pages/group/[[...group]].js+29−49
@@ -9,8 +9,11 @@ import SingleColumn from "../../components/SingleColumn";
9import ErrorPage from "../404";
9import ErrorPage from "../404";
10import Section from "../../components/Section";
10import Section from "../../components/Section";
11import ob from "urbit-ob";
11import ob from "urbit-ob";
12−import { decode } from "html-entities";
13import Markdown from "../../components/Markdown";
12import Markdown from "../../components/Markdown";
13+import GatewayHeader from "../../components/gateway/GatewayHeader";
14+import MetadataBlock from "../../components/gateway/MetadataBlock";
15+import MetadataLink from "../../components/gateway/MetadataLink";
16+import Description from "../../components/gateway/Description";
14
17
15const GroupPage = ({ data, markdown, params }) => {
18const GroupPage = ({ data, markdown, params }) => {
16 const { group } = params;
19 const { group } = params;
@@ -50,61 +53,38 @@ const GroupPage = ({ data, markdown, params }) => {
50 <SingleColumn>
53 <SingleColumn>
51 <Section className="space-y-12" narrow>
54 <Section className="space-y-12" narrow>
52 <div className="flex items-center space-x-4">
55 <div className="flex items-center space-x-4">
53− {/* Group logo and fallback */}
56+ <GatewayHeader
57+ title={data.title}
54− {data.image ? (
58+ image={data?.image}
55− <img
56− className="rounded-xl"
57− src={data.image}
58− height={100}
59− width={100}
60− />
61− ) : (
62− <img
63− className="object-contain shadow-sm rounded-xl"
64− style={{ height: 100, width: 100 }}
65− src="https://media.urbit.org/logo/urbit-logo-card.png"
66− />
67− )}
68− <div className="flex flex-col">
69− <h2>{data.title}</h2>
70− <p>Urbit Group</p>
59+ item="Urbit ID"
71− </div>
60+ />
72 </div>
61 </div>
73 <div className="flex flex-wrap md:flex-nowrap justify-between">
62 <div className="flex flex-wrap md:flex-nowrap justify-between">
74− <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
63+ <MetadataBlock
75− <p className="font-bold text-wall-400">Group Type</p>
64+ title="Group Type"
76− <p>{data.type ? data.type : "Unknown"}</p>
65+ content={data.type ? data.type : "Unknown"}
77− </div>
66+ />
78− <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
67+ <MetadataBlock
79− <p className="font-bold text-wall-400">Members</p>
68+ title="Members"
80− <p>
69+ content={
81− {data.participant_range ? data.participant_range : "Unknown"}
70+ data.participant_range ? data.participant_range : "Unknown"
82− </p>
71+ }
83− </div>
72+ />
84− <div className="flex flex-col basis-1/2 md:basis-auto">
73+ <MetadataLink
85− <p className="font-bold text-wall-400">Host</p>
74+ title="Host"
86− <Link href={`/id/${group[0]}`}>
75+ href={`/id/${group[0]}`}
87− <a className="type-ui font-mono text-green-400">{group[0]}</a>
76+ content={group[0]}
88− </Link>
77+ />
89− </div>
90 <CopyLink
78 <CopyLink
91 className="basis-1/2 md:basis-auto"
79 className="basis-1/2 md:basis-auto"
92 content={data.shortcode ? data.shortcode : data.title}
80 content={data.shortcode ? data.shortcode : data.title}
93 />
81 />
94 </div>
82 </div>
83+ <Description
95− {(data.description !== "A group on Urbit." || markdown) && (
84+ description={data.description}
96− <div className="flex flex-col space-y-4">
85+ fallback="A group on Urbit."
97− <p className="font-bold text-wall-400">Description</p>
98− {markdown ? (
86+ markdown={markdown}
99− <div
100− className="flex flex-col space-y-4"
101− dangerouslySetInnerHTML={{ __html: decode(markdown) }}
102− />
87+ />
103− ) : (
104− <p>{data.description}</p>
105− )}
106− </div>
107− )}
108 <hr className="text-wall-200" />
88 <hr className="text-wall-200" />
109 <div className="flex flex-col space-y-6">
89 <div className="flex flex-col space-y-6">
110 <h3>
90 <h3>
pages/id/[id].js+41−55
@@ -8,9 +8,12 @@ import SingleColumn from "../../components/SingleColumn";
8import ErrorPage from "../404";
8import ErrorPage from "../404";
9import Section from "../../components/Section";
9import Section from "../../components/Section";
10import ob from "urbit-ob";
10import ob from "urbit-ob";
11−import { decode } from "html-entities";
12import Markdown from "../../components/Markdown";
11import Markdown from "../../components/Markdown";
13import Sigil from "../../components/Sigil";
12import Sigil from "../../components/Sigil";
13+import GatewayHeader from "../../components/gateway/GatewayHeader";
14+import MetadataBlock from "../../components/gateway/MetadataBlock";
15+import MetadataLink from "../../components/gateway/MetadataLink";
16+import Description from "../../components/gateway/Description";
14import axios from "axios";
17import axios from "axios";
15
18
16const IdPage = ({ data, markdown, network, params }) => {
19const IdPage = ({ data, markdown, network, params }) => {
@@ -31,6 +34,12 @@ const IdPage = ({ data, markdown, network, params }) => {
31 // Galaxies shouldn't show parents, so store it as boolean here for reference.
34 // Galaxies shouldn't show parents, so store it as boolean here for reference.
32 const isGalaxy = ob.clan(id) === "galaxy";
35 const isGalaxy = ob.clan(id) === "galaxy";
33
36
37+ const sigil = (
38+ <div className="rounded-xl overflow-hidden">
39+ <Sigil patp={id} size={100} />
40+ </div>
41+ );
42+
34 return (
43 return (
35 <Container>
44 <Container>
36 <Head>
45 <Head>
@@ -56,67 +65,44 @@ const IdPage = ({ data, markdown, network, params }) => {
56 <SingleColumn>
65 <SingleColumn>
57 <Section className="space-y-12" narrow>
66 <Section className="space-y-12" narrow>
58 <div className="flex items-center space-x-4">
67 <div className="flex items-center space-x-4">
59− {/* Avatar or sigil */}
68+ <GatewayHeader
60− {data.image ? (
69+ title={id}
61− <img
70+ image={data?.image || false}
62− className="rounded-xl"
71+ sigil={sigil}
63− src={data.image}
64− height={100}
65− width={100}
66− />
67− ) : (
68− <div className="rounded-xl overflow-hidden">
69− <Sigil patp={id} size={100} />
70− </div>
71− )}
72− <div className="flex flex-col">
73− <h2>{id}</h2>
74− <p>Urbit ID</p>
72+ item="Urbit ID"
75− </div>
73+ />
76 </div>
74 </div>
77 <div className="flex flex-wrap md:flex-nowrap justify-between">
75 <div className="flex flex-wrap md:flex-nowrap justify-between">
78− <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
76+ <MetadataBlock
79− <p className="font-bold text-wall-400">ID Type</p>
77+ title="ID Type"
80− <p className="font-mono">
78+ content={
81− {ob.clan(id).slice(0, 1).toUpperCase() + ob.clan(id).slice(1)}
79+ ob.clan(id).slice(0, 1).toUpperCase() + ob.clan(id).slice(1)
82− </p>
80+ }
83− </div>
81+ />
84− <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
82+ <MetadataBlock
85− <p className="font-bold text-wall-400">Status</p>
83+ title="Status"
86− <p className="font-mono">
87− {network ? "Spawned/Owned" : "Unspawned"}
84+ content={network ? "Spawned/Owned" : "Unspawned"}
88− </p>
85+ />
89− </div>
90 {!isGalaxy && (
86 {!isGalaxy && (
91− <div className="flex flex-col basis-1/2 md:basis-auto">
87+ <MetadataLink
92− <p className="font-bold text-wall-400">Parent</p>
88+ title="Parent"
93− <Link href={`/id/${parent}`}>
89+ href={`/id/${parent}`}
94− <a className="type-ui font-mono text-green-400">{parent}</a>
90+ content={parent}
95− </Link>
91+ />
96− </div>
97 )}
92 )}
98 {galaxy && (
93 {galaxy && (
99− <div className="flex flex-col basis-1/2 md:basis-auto">
94+ <MetadataLink
100− <p className="font-bold text-wall-400">Galaxy</p>
95+ title="Galaxy"
101− <Link href={`/id/${galaxy}`}>
96+ href={`/id/${galaxy}`}
102− <a className="type-ui font-mono text-green-400">{galaxy}</a>
97+ content={galaxy}
103− </Link>
98+ />
104− </div>
105 )}
99 )}
106 </div>
100 </div>
101+ <Description
107− {(data.description !== "An Urbit ID." || markdown) && (
102+ description={data.description}
108− <div className="flex flex-col space-y-4">
103+ fallback="An Urbit ID."
109− <p className="font-bold text-wall-400">Description</p>
110− {markdown ? (
104+ markdown={markdown}
111− <div
112− className="flex flex-col space-y-4"
113− dangerouslySetInnerHTML={{ __html: decode(markdown) }}
114− />
105+ />
115− ) : (
116− <p>{data.description}</p>
117− )}
118− </div>
119− )}
120 <a
106 <a
121 className="flex items-center"
107 className="flex items-center"
122 target="_blank"
108 target="_blank"