docs: contact page (#606)

peterpeterparker · web-flow · commit 53accbabf31e · 2025-12-08T17:15:50.000+01:00
Signed-off-by: David Dal Busco &lt;david.dalbusco@outlook.com&gt;
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -194,7 +194,8 @@ const config: Config = {
               { to: "/showcase", label: "Showcase" },
               { to: "/blog", label: "Blog" },
               { to: "/newsletter", label: "Newsletter" },
-              { to: "/sponsorship", label: "Sponsorship" }
+              { to: "/sponsorship", label: "Sponsorship" },
+              { to: "/contact", label: "Contact" }
             ]
           },
           {
@@ -329,6 +330,10 @@ const config: Config = {
               {
                 label: "Brand & Press",
                 href: "https://github.com/junobuild/brand"
+              },
+              {
+                label: "Contact",
+                to: "/contact"
               }
             ]
           }
diff --git a/src/components/Contact/index.tsx b/src/components/Contact/index.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import styles from "./styles.module.scss";
+
+export default function Contact(): JSX.Element {
+  // Do not prerender to prevent spam
+  // See 2.6 - https://spencermortensen.com/articles/email-obfuscation/
+  let [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    setLoaded(true);
+  }, []);
+
+  return (
+    <>
+      <h2 className={styles.sub}>Contact</h2>
+
+      <p>
+        Have a question or want to get in touch? Send an email to{" "}
+        {loaded && <a href="mailto:hi@juno.build">hi@juno.build</a>}
+      </p>
+
+      <p>
+        For technical questions, bug reports, or implementation help, the&nbsp;
+        <a
+          href="https://discord.gg/wHZ57Z2RAG"
+          rel="noopener nofollower"
+          target="_blank"
+        >
+          Discord
+        </a>{" "}
+        community is the best place to get quick answers from other developers.
+      </p>
+    </>
+  );
+}
diff --git a/src/components/Contact/styles.module.scss b/src/components/Contact/styles.module.scss
@@ -0,0 +1,10 @@
+@use "../../mixins/fonts";
+
+.sub {
+  margin: 1rem 0 0.75rem;
+  @include fonts.h2;
+}
+
+.action {
+  margin: 0 0 8rem;
+}
diff --git a/src/pages/contact/index.module.scss b/src/pages/contact/index.module.scss
@@ -0,0 +1,6 @@
+.container {
+  margin: 3rem auto 12rem;
+  max-width: var(--ifm-container-width);
+  padding: 0 var(--ifm-spacing-horizontal);
+  width: 100%;
+}
diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx
@@ -0,0 +1,18 @@
+import Contact from "@site/src/components/Contact";
+import Head from "@site/src/components/Head";
+import Layout from "@theme/Layout";
+import styles from "./index.module.scss";
+
+export default function ContactPage(): JSX.Element {
+  return (
+    <Layout>
+      <Head>
+        <link href="https://juno.build/newsletter" rel="canonical" />
+      </Head>
+
+      <section className={styles.container}>
+        <Contact />
+      </section>
+    </Layout>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -194,7 +194,8 @@ const config: Config = {`
`194`	`194`	`{ to: "/showcase", label: "Showcase" },`
`195`	`195`	`{ to: "/blog", label: "Blog" },`
`196`	`196`	`{ to: "/newsletter", label: "Newsletter" },`
`197`		`- { to: "/sponsorship", label: "Sponsorship" }`
	`197`	`+ { to: "/sponsorship", label: "Sponsorship" },`
	`198`	`+ { to: "/contact", label: "Contact" }`
`198`	`199`	`]`
`199`	`200`	`},`
`200`	`201`	`{`
`@@ -329,6 +330,10 @@ const config: Config = {`
`329`	`330`	`{`
`330`	`331`	`label: "Brand & Press",`
`331`	`332`	`href: "https://github.com/junobuild/brand"`
	`333`	`+ },`
	`334`	`+ {`
	`335`	`+ label: "Contact",`
	`336`	`+ to: "/contact"`
`332`	`337`	`}`
`333`	`338`	`]`
`334`	`339`	`}`