git.iko.soy/urbit.org
on master help sign in
add copy urbit-community function, fix build errors
commitcb112e8120f52878ad8c69709a843e81747fd100 authorGavin Atkinson <gvnatknsn@protonmail.com> dateWed 14 Jul 2021, 13:45 (5 years ago) parente84ad81
10 files changed+140−204
compare with master
unifiedsplit
components/Contact.js+102 components/ContactSection.js−38 lib/hooks.js+26−1 pages/blog/[slug].js+2−32 pages/events/[slug].js+2−32 pages/grants/[slug].js−1 pages/index.js+2−33 pages/media/[slug].js+4−34 pages/updates.js−1 pages/updates/[slug].js+2−32
components/Contact.jsnew file+102
@@ -0,0 +1,102 @@
1+import NewsletterSignup from "./NewletterSignup";
2+import { name, contact } from "../lib/constants";
3+import { useCopyToClipboard } from "../lib/hooks";
4+
5+export default function Contact({ emphasize }) {
6+ const [copyStatus, copy] = useCopyToClipboard(contact.urbitCommunity);
7+
8+ const buttonIcon =
9+ copyStatus === "inactive" ? (
10+ <svg
11+ width="16"
12+ height="16"
13+ viewBox="0 0 16 16"
14+ fill="none"
15+ xmlns="http://www.w3.org/2000/svg"
16+ >
17+ <path
18+ fillRule="evenodd"
19+ clipRule="evenodd"
20+ d="M3.2 1.6C3.2 0.716344 3.91634 0 4.8 0H11.3615L14.9333 2.38124V12.2667C14.9333 13.1503 14.217 13.8667 13.3333 13.8667H12.8V14.4C12.8 15.2837 12.0837 16 11.2 16H2.66667C1.78301 16 1.06667 15.2837 1.06667 14.4V3.73333C1.06667 2.84968 1.78301 2.13333 2.66667 2.13333H3.2V1.6ZM3.2 3.2H2.66667C2.37211 3.2 2.13333 3.43878 2.13333 3.73333V14.4C2.13333 14.6946 2.37211 14.9333 2.66667 14.9333H11.2C11.4946 14.9333 11.7333 14.6946 11.7333 14.4V13.8667H4.8C3.91634 13.8667 3.2 13.1503 3.2 12.2667V3.2Z"
21+ fill="#32302D"
22+ />
23+ </svg>
24+ ) : copyStatus === "copied" ? (
25+ <svg
26+ width="16"
27+ height="16"
28+ viewBox="0 0 16 16"
29+ fill="none"
30+ xmlns="http://www.w3.org/2000/svg"
31+ >
32+ <path
33+ fillRule="evenodd"
34+ clipRule="evenodd"
35+ d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM7.54325 11.4247L12.1498 5.66647L11.3169 5.00013L7.39013 9.90859L4.60812 7.59025L3.92526 8.40969L7.54325 11.4247Z"
36+ fill="#32302D"
37+ />
38+ </svg>
39+ ) : (
40+ <svg
41+ width="16"
42+ height="16"
43+ viewBox="0 0 16 16"
44+ fill="none"
45+ xmlns="http://www.w3.org/2000/svg"
46+ >
47+ <path
48+ fillRule="evenodd"
49+ clipRule="evenodd"
50+ d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM10.8229 11.5772L8.00004 8.75429L5.17716 11.5772L4.42292 10.8229L7.24579 8.00004L4.42292 5.17716L5.17716 4.42292L8.00004 7.24579L10.8229 4.42292L11.5772 5.17716L8.75429 8.00004L11.5772 10.8229L10.8229 11.5772Z"
51+ fill="#32302D"
52+ />
53+ </svg>
54+ );
55+
56+ const linkText = emphasize ? "text-green" : "text-black";
57+ const border = emphasize ? "green" : "black";
58+
59+ return (
60+ <div>
61+ <div className="measure">
62+ <h4 className="pb-6">
63+ If you’d like to follow our progress, we send monthly updates via
64+ email:
65+ </h4>
66+ </div>
67+ <NewsletterSignup color={border} />
68+ <h4 className="mt-12 text-gray">
69+ Follow us on{" "}
70+ <a className={linkText} href={contact.twitter}>
71+ Twitter
72+ </a>
73+ </h4>
74+ <h4 className="mt-6 text-gray">
75+ Explore code on{" "}
76+ <a className={linkText} href={contact.github}>
77+ Github
78+ </a>
79+ </h4>
80+ <h4 className="mt-6 text-gray">
81+ Ask questions in our{" "}
82+ <a className={linkText} href={contact.discord}>
83+ Discord
84+ </a>
85+ </h4>
86+ <h4 className="mt-6 text-gray flex items-baseline flex-wrap">
87+ Boot Urbit and join{" "}
88+ <div className="md:ml-2 rounded-lg flex items-stretch">
89+ <code className="rounded-l-lg px-2 md:px-4 py-2 bg-wall flex items-center h-full">
90+ {contact.urbitCommunity}
91+ </code>
92+ <button
93+ className="rounded-r-lg px-4 bg-deepWall flex-1 flex justify-center items-center"
94+ onClick={() => copy()}
95+ >
96+ {buttonIcon}
97+ </button>
98+ </div>
99+ </h4>
100+ </div>
101+ );
102+}
components/ContactSection.jsdeleted−38
@@ -1,38 +0,0 @@
1−import NewsletterSignup from "../../components/NewletterSignup";
2−import { name, contact } from "../../lib/constants";
3−
4−export default function () {
5− return (
6− <Section narrow>
7− <div className="measure">
8− <h4 className="pb-6">
9− If you’d like to follow our progress, we send monthly updates via
10− email:
11− </h4>
12− </div>
13− <NewsletterSignup color="black" />
14− <h4 className="mt-12 text-gray">
15− Follow us on{" "}
16− <a className="text-black" href={contact.twitter}>
17− Twitter
18− </a>
19− </h4>
20− <h4 className="mt-6 text-gray">
21− Explore code on{" "}
22− <a className="text-black" href={contact.github}>
23− Github
24− </a>
25− </h4>
26− <h4 className="mt-6 text-gray">
27− Ask questions in our{" "}
28− <a className="text-black" href={contact.discord}>
29− Discord
30− </a>
31− </h4>
32− <h4 className="mt-6 text-gray">
33− Boot Urbit and join{" "}
34− <code className="bg-wall p-2 rounded-lg">{contact.urbitCommunity}</code>
35− </h4>
36− </Section>
37− );
38−}
lib/hooks.js+26−1
@@ -1,4 +1,4 @@
1−import { useState, useLayoutEffect } from "react";
1+import { useState, useLayoutEffect, useCallback, useEffect } from "react";
22
33export function useLockBodyScroll() {
44 useLayoutEffect(() => {
@@ -10,3 +10,28 @@ export function useLockBodyScroll() {
1010 return () => (document.body.style.overflow = originalStyle);
1111 }, []); // Empty array ensures effect is only run on mount and unmount
1212}
13+
14+export function useCopyToClipboard(text, notifyTimeout = 1000) {
15+ const [copyStatus, setCopyStatus] = useState("inactive");
16+ const copy = useCallback(() => {
17+ navigator.clipboard.writeText(text).then(
18+ () => setCopyStatus("copied"),
19+ () => setCopyStatus("failed")
20+ );
21+ }, [text]);
22+
23+ useEffect(() => {
24+ if (copyStatus === "inactive") {
25+ return;
26+ }
27+
28+ const timeoutId = setTimeout(
29+ () => setCopyStatus("inactive"),
30+ notifyTimeout
31+ );
32+
33+ return () => clearTimeout(timeoutId);
34+ }, [copyStatus]);
35+
36+ return [copyStatus, copy];
37+}
pages/blog/[slug].js+2−32
@@ -16,7 +16,7 @@ import Footer from "../../components/Footer";
1616import BackgroundImage from "../../components/BackgroundImage";
1717import SingleColumn from "../../components/SingleColumn";
1818import Section from "../../components/Section";
19−import NewsletterSignup from "../../components/NewletterSignup";
19+import Contact from "../../components/Contact";
2020import PostPreview from "../../components/PostPreview";
2121import { name, contact } from "../../lib/constants";
2222import markdownStyles from "../../styles/markdown.module.css";
@@ -57,37 +57,7 @@ export default function Post({
5757 ></article>
5858 </Section>
5959 <Section narrow>
60− <div className="measure">
61− <h4 className="pb-6">
62− If you’d like to follow our progress, we send monthly updates via
63− email:
64− </h4>
65− </div>
66− <NewsletterSignup color="black" />
67− <h4 className="mt-12 text-gray">
68− Follow us on{" "}
69− <a className="text-black" href={contact.twitter}>
70− Twitter
71− </a>
72− </h4>
73− <h4 className="mt-6 text-gray">
74− Explore code on{" "}
75− <a className="text-black" href={contact.github}>
76− Github
77− </a>
78− </h4>
79− <h4 className="mt-6 text-gray">
80− Ask questions in our{" "}
81− <a className="text-black" href={contact.discord}>
82− Discord
83− </a>
84− </h4>
85− <h4 className="mt-6 text-gray">
86− Boot Urbit and join{" "}
87− <code className="bg-wall p-2 rounded-lg">
88− {contact.urbitCommunity}
89− </code>
90− </h4>
60+ <Contact />
9161 </Section>
9262 <Section wide className="flex">
9363 {previousPost === null ? (
pages/events/[slug].js+2−32
@@ -15,7 +15,7 @@ import Header from "../../components/Header";
1515import Footer from "../../components/Footer";
1616import BackgroundImage from "../../components/BackgroundImage";
1717import SingleColumn from "../../components/SingleColumn";
18−import NewsletterSignup from "../../components/NewletterSignup";
18+import Contact from "../../components/Contact";
1919import EventPreview from "../../components/EventPreview";
2020import Section from "../../components/Section";
2121import { name, contact } from "../../lib/constants";
@@ -67,37 +67,7 @@ export default function Event({
6767 ></article>
6868 </Section>
6969 <Section narrow>
70− <div className="measure">
71− <h4 className="pb-6">
72− If you’d like to follow our progress, we send monthly updates via
73− email:
74− </h4>
75− </div>
76− <NewsletterSignup color="black" />
77− <h4 className="mt-12 text-gray">
78− Follow us on{" "}
79− <a className="text-black" href={contact.twitter}>
80− Twitter
81− </a>
82− </h4>
83− <h4 className="mt-6 text-gray">
84− Explore code on{" "}
85− <a className="text-black" href={contact.github}>
86− Github
87− </a>
88− </h4>
89− <h4 className="mt-6 text-gray">
90− Ask questions in our{" "}
91− <a className="text-black" href={contact.discord}>
92− Discord
93− </a>
94− </h4>
95− <h4 className="mt-6 text-gray">
96− Boot Urbit and join{" "}
97− <code className="bg-wall p-2 rounded-lg">
98− {contact.urbitCommunity}
99− </code>
100− </h4>
70+ <Contact />
10171 </Section>
10272 <Section wide className="flex">
10373 {previousPost === null ? (
pages/grants/[slug].js−1
@@ -16,7 +16,6 @@ import Header from "../../components/Header";
1616import Footer from "../../components/Footer";
1717import BackgroundImage from "../../components/BackgroundImage";
1818import SingleColumn from "../../components/SingleColumn";
19−import NewsletterSignup from "../../components/NewletterSignup";
2019import GrantPreview from "../../components/GrantPreview";
2120import Section from "../../components/Section";
2221import { name, contact } from "../../lib/constants";
pages/index.js+2−33
@@ -8,7 +8,7 @@ import Header from "../components/Header";
88import Footer from "../components/Footer";
99import BackgroundImage from "../components/BackgroundImage";
1010import TabCarousel from "../components/TabCarousel";
11−import NewsletterSignup from "../components/NewletterSignup";
11+import Contact from "../components/Contact";
1212import PostPreview from "../components/PostPreview";
1313import EventPreview from "../components/EventPreview";
1414import { getAllPosts, formatDate, getOpenGrantsCount } from "../lib/lib";
@@ -270,38 +270,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
270270 // Newsletter and social media
271271 }
272272 <Section narrow>
273− <div className="measure">
274− <h2 className="m-0 p-0 mr-4 pb-12">Stay In Touch</h2>
275− <p className="pb-6">
276− We send monthly emails on system improvements, upcoming events,
277− and community spotlights.
278− </p>
279− </div>
280− <NewsletterSignup />
281− <h4 className="mt-12">
282− Follow us on{" "}
283− <a className="text-green" href={contact.twitter}>
284− Twitter
285− </a>
286− </h4>
287− <h4 className="mt-6">
288− Explore code on{" "}
289− <a className="text-green" href={contact.github}>
290− Github
291− </a>
292− </h4>
293− <h4 className="mt-6">
294− Ask questions in our{" "}
295− <a className="text-green" href={contact.discord}>
296− Discord
297− </a>
298− </h4>
299− <div className="mt-4 flex flex-wrap items-baseline">
300− <h4 className="mr-2">Boot Urbit and join</h4>
301− <code className="bg-wall p-2 mt-2 md:mt-0 rounded-lg">
302− {contact.urbitCommunity}
303− </code>
304− </div>
273+ <Contact emphasize />
305274 </Section>
306275 </SingleColumn>
307276
pages/media/[slug].js+4−34
@@ -12,14 +12,14 @@ import Markdown from "../../components/Markdown";
1212import Header from "../../components/Header";
1313import Footer from "../../components/Footer";
1414import SingleColumn from "../../components/SingleColumn";
15−import NewsletterSignup from "../../components/NewletterSignup";
15+import Contact from "../../components/Contact";
1616import PostPreview from "../../components/PostPreview";
1717import Section from "../../components/Section";
1818import { contact } from "../../lib/constants";
1919import markdownStyles from "../../styles/markdown.module.css";
2020import { decode } from "html-entities";
2121
22−export default function Medium({ post, markdown, search }) {
22+export default function MediaPage({ post, markdown, search }) {
2323 const router = useRouter();
2424 if (!router.isFallback && !post?.slug) {
2525 return <ErrorPage />;
@@ -72,37 +72,7 @@ export default function Medium({ post, markdown, search }) {
7272 ></article>
7373 </Section>
7474 <Section narrow>
75− <div className="measure">
76− <h4 className="pb-6">
77− If you’d like to follow our progress, we send monthly updates via
78− email:
79− </h4>
80− </div>
81− <NewsletterSignup color="black" />
82− <h4 className="mt-12 text-gray">
83− Follow us on{" "}
84− <a className="text-black" href={contact.twitter}>
85− Twitter
86− </a>
87− </h4>
88− <h4 className="mt-6 text-gray">
89− Explore code on{" "}
90− <a className="text-black" href={contact.github}>
91− Github
92− </a>
93− </h4>
94− <h4 className="mt-6 text-gray">
95− Ask questions in our{" "}
96− <a className="text-black" href={contact.discord}>
97− Discord
98− </a>
99− </h4>
100− <h4 className="mt-6 text-gray">
101− Boot Urbit and join{" "}
102− <code className="bg-wall p-2 rounded-lg">
103− {contact.urbitCommunity}
104− </code>
105− </h4>
75+ <Contact />
10676 </Section>
10777 </SingleColumn>
10878 <Footer />
@@ -121,7 +91,7 @@ export async function getStaticProps({ params }) {
12191 const markdown = await Markdown({ post });
12292
12393 return {
124− props: { post, markdown, nextPost, previousPost },
94+ props: { post, markdown },
12595 };
12696}
12797
pages/updates.js−1
@@ -32,7 +32,6 @@ export default function Blog({ posts, search }) {
3232 </Section>
3333 <Section narrow>
3434 {posts.map((post) => {
35− console.log(post);
3635 return (
3736 <div key={post.slug} className="mb-24 cursor-pointer">
3837 <Link href={`/updates/${post.slug}`}>
pages/updates/[slug].js+2−32
@@ -16,7 +16,7 @@ import Footer from "../../components/Footer";
1616import BackgroundImage from "../../components/BackgroundImage";
1717import SingleColumn from "../../components/SingleColumn";
1818import Section from "../../components/Section";
19−import NewsletterSignup from "../../components/NewletterSignup";
19+import Contact from "../../components/Contact";
2020import PostPreview from "../../components/PostPreview";
2121import { name, contact } from "../../lib/constants";
2222import markdownStyles from "../../styles/markdown.module.css";
@@ -57,37 +57,7 @@ export default function Post({
5757 ></article>
5858 </Section>
5959 <Section narrow>
60− <div className="measure">
61− <h4 className="pb-6">
62− If you’d like to follow our progress, we send monthly updates via
63− email:
64− </h4>
65− </div>
66− <NewsletterSignup color="black" />
67− <h4 className="mt-12 text-gray">
68− Follow us on{" "}
69− <a className="text-black" href={contact.twitter}>
70− Twitter
71− </a>
72− </h4>
73− <h4 className="mt-6 text-gray">
74− Explore code on{" "}
75− <a className="text-black" href={contact.github}>
76− Github
77− </a>
78− </h4>
79− <h4 className="mt-6 text-gray">
80− Ask questions in our{" "}
81− <a className="text-black" href={contact.discord}>
82− Discord
83− </a>
84− </h4>
85− <h4 className="mt-6 text-gray">
86− Boot Urbit and join{" "}
87− <code className="bg-wall p-2 rounded-lg">
88− {contact.urbitCommunity}
89− </code>
90− </h4>
60+ <Contact />
9161 </Section>
9262 <Section wide className="flex">
9363 {