cb112e8 · urbit.org · git.iko.soy

components/Contact.jsnew file+102

compare with master

unifiedsplit

@@ -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";

2

3export function useLockBodyScroll() {

4 useLayoutEffect(() => {

@@ -10,3 +10,28 @@ export function useLockBodyScroll() {

10 return () => (document.body.style.overflow = originalStyle);

11 }, []); // Empty array ensures effect is only run on mount and unmount

12}

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";

16import BackgroundImage from "../../components/BackgroundImage";

17import SingleColumn from "../../components/SingleColumn";

18import Section from "../../components/Section";

19−import NewsletterSignup from "../../components/NewletterSignup";

19+import Contact from "../../components/Contact";

20import PostPreview from "../../components/PostPreview";

21import { name, contact } from "../../lib/constants";

22import markdownStyles from "../../styles/markdown.module.css";

@@ -57,37 +57,7 @@ export default function Post({

57 ></article>

58 </Section>

59 <Section narrow>

60− <div className="measure">

60+ <Contact />

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>

91 </Section>

61 </Section>

92 <Section wide className="flex">

62 <Section wide className="flex">

93 {previousPost === null ? (

63 {previousPost === null ? (

pages/events/[slug].js+2−32

@@ -15,7 +15,7 @@ import Header from "../../components/Header";

15import Footer from "../../components/Footer";

16import BackgroundImage from "../../components/BackgroundImage";

17import SingleColumn from "../../components/SingleColumn";

18−import NewsletterSignup from "../../components/NewletterSignup";

18+import Contact from "../../components/Contact";

19import EventPreview from "../../components/EventPreview";

20import Section from "../../components/Section";

21import { name, contact } from "../../lib/constants";

@@ -67,37 +67,7 @@ export default function Event({

67 ></article>

68 </Section>

69 <Section narrow>

70− <div className="measure">

70+ <Contact />

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>

101 </Section>

71 </Section>

102 <Section wide className="flex">

72 <Section wide className="flex">

103 {previousPost === null ? (

73 {previousPost === null ? (

pages/grants/[slug].js−1

@@ -16,7 +16,6 @@ import Header from "../../components/Header";

16import Footer from "../../components/Footer";

17import BackgroundImage from "../../components/BackgroundImage";

18import SingleColumn from "../../components/SingleColumn";

19−import NewsletterSignup from "../../components/NewletterSignup";

20import GrantPreview from "../../components/GrantPreview";

19import GrantPreview from "../../components/GrantPreview";

21import Section from "../../components/Section";

20import Section from "../../components/Section";

22import { name, contact } from "../../lib/constants";

21import { name, contact } from "../../lib/constants";

pages/index.js+2−33

@@ -8,7 +8,7 @@ import Header from "../components/Header";

8import Footer from "../components/Footer";

9import BackgroundImage from "../components/BackgroundImage";

10import TabCarousel from "../components/TabCarousel";

11−import NewsletterSignup from "../components/NewletterSignup";

11+import Contact from "../components/Contact";

12import PostPreview from "../components/PostPreview";

13import EventPreview from "../components/EventPreview";

14import { getAllPosts, formatDate, getOpenGrantsCount } from "../lib/lib";

@@ -270,38 +270,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {

270 // Newsletter and social media

271 }

272 <Section narrow>

273− <div className="measure">

273+ <Contact emphasize />

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>

305 </Section>

274 </Section>

306 </SingleColumn>

275 </SingleColumn>

307

276

pages/media/[slug].js+4−34

@@ -12,14 +12,14 @@ import Markdown from "../../components/Markdown";

12import Header from "../../components/Header";

13import Footer from "../../components/Footer";

14import SingleColumn from "../../components/SingleColumn";

15−import NewsletterSignup from "../../components/NewletterSignup";

15+import Contact from "../../components/Contact";

16import PostPreview from "../../components/PostPreview";

17import Section from "../../components/Section";

18import { contact } from "../../lib/constants";

19import markdownStyles from "../../styles/markdown.module.css";

20import { decode } from "html-entities";

21

22−export default function Medium({ post, markdown, search }) {

22+export default function MediaPage({ post, markdown, search }) {

23 const router = useRouter();

24 if (!router.isFallback && !post?.slug) {

25 return <ErrorPage />;

@@ -72,37 +72,7 @@ export default function Medium({ post, markdown, search }) {

72 ></article>

73 </Section>

74 <Section narrow>

75− <div className="measure">

75+ <Contact />

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>

106 </Section>

76 </Section>

107 </SingleColumn>

77 </SingleColumn>

108 <Footer />

78 <Footer />

@@ -121,7 +91,7 @@ export async function getStaticProps({ params }) {

121 const markdown = await Markdown({ post });

91 const markdown = await Markdown({ post });

122

92

123 return {

93 return {

124− props: { post, markdown, nextPost, previousPost },

94+ props: { post, markdown },

125 };

95 };

126}

96}

127

97

pages/updates.js−1

@@ -32,7 +32,6 @@ export default function Blog({ posts, search }) {

32 </Section>

33 <Section narrow>

34 {posts.map((post) => {

35− console.log(post);

36 return (

35 return (

37 <div key={post.slug} className="mb-24 cursor-pointer">

36 <div key={post.slug} className="mb-24 cursor-pointer">

38 <Link href={`/updates/${post.slug}`}>

37 <Link href={`/updates/${post.slug}`}>

pages/updates/[slug].js+2−32

@@ -16,7 +16,7 @@ import Footer from "../../components/Footer";

16import BackgroundImage from "../../components/BackgroundImage";

17import SingleColumn from "../../components/SingleColumn";

18import Section from "../../components/Section";

19−import NewsletterSignup from "../../components/NewletterSignup";

19+import Contact from "../../components/Contact";

20import PostPreview from "../../components/PostPreview";

21import { name, contact } from "../../lib/constants";

22import markdownStyles from "../../styles/markdown.module.css";

@@ -57,37 +57,7 @@ export default function Post({

57 ></article>

58 </Section>

59 <Section narrow>

60− <div className="measure">

60+ <Contact />

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>

91 </Section>

61 </Section>

92 <Section wide className="flex">

62 <Section wide className="flex">

93 {

63 {