jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 22:46:39 -04:00
Code Issues Activity

add react-textarea-autosize to contact form

Browse Source
This commit is contained in:
Jake Jarvis
2022-02-11 09:25:25 -05:00
parent 9aaf1ef1e7
commit 93356e9472
5 changed files with 140 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/Captcha/Captcha.tsx
View File

@ -1,4 +1,5 @@
import { memo } from "react";
import Head from "next/head";
import { useTheme } from "next-themes";
import HCaptcha from "@hcaptcha/react-hcaptcha";
@ -23,15 +24,22 @@ const Captcha = ({ size = "normal", theme, id, ...rest }: CaptchaProps) => {
const { resolvedTheme } = useTheme();
return (
<HCaptcha
sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
reCaptchaCompat={false}
tabIndex={0}
size={size}
theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
id={id}
{...rest}
/>
<>
<Head>
<link rel="preconnect" href="https://js.hcaptcha.com" />
<link rel="preconnect" href="https://newassets.hcaptcha.com" />
</Head>
<HCaptcha
sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
reCaptchaCompat={false}
tabIndex={0}
size={size}
theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
id={id}
{...rest}
/>
</>
);
};

4
components/ContactForm/ContactForm.module.css
View File

@ -22,8 +22,6 @@
}
.textarea {
height: 12em;
min-height: 6em;
margin-bottom: 0;
line-height: 1.5;
resize: vertical;
@ -34,7 +32,7 @@
line-height: 1.75;
}
.hcaptcha {
.captcha {
margin: 1em 0;
}

63
components/ContactForm/ContactForm.tsx
View File

@ -1,6 +1,7 @@
import { useState } from "react";
import classNames from "classnames/bind";
import { Formik, Form, Field } from "formik";
import TextareaAutosize from "react-textarea-autosize";
import Link from "../Link/Link";
import Captcha from "../Captcha/Captcha";
import { SendIcon, CheckOcticon, XOcticon } from "../Icons";
@ -96,30 +97,44 @@ const ContactForm = ({ className }: ContactFormProps) => {
return errors;
}}
>
{({ setFieldValue, isSubmitting, touched, errors }) => (
{({ setFieldValue, isSubmitting }) => (
<Form className={className} name="contact">
<Field
className={cx({ input: true, missing: errors.name && touched.name })}
name="name"
type="text"
placeholder="Name"
disabled={success}
/>
<Field
className={cx({ input: true, missing: errors.email && touched.email })}
name="email"
type="email"
inputMode="email"
placeholder="Email"
disabled={success}
/>
<Field
className={cx({ input: true, textarea: true, missing: errors.message && touched.message })}
name="message"
component="textarea"
placeholder="Write something..."
disabled={success}
/>
<Field name="name">
{({ field, meta }) => (
<input
type="text"
className={cx({ input: true, missing: meta.error && meta.touched })}
placeholder="Name"
disabled={success}
{...field}
/>
)}
</Field>
<Field name="email">
{({ field, meta }) => (
<input
type="email"
inputMode="email"
className={cx({ input: true, missing: meta.error && meta.touched })}
placeholder="Email"
disabled={success}
{...field}
/>
)}
</Field>
<Field name="message">
{({ field, meta }) => (
<TextareaAutosize
className={cx({ input: true, textarea: true, missing: meta.error && meta.touched })}
placeholder="Write something..."
minRows={5}
disabled={success}
{...field}
/>
)}
</Field>
<div className={styles.markdown_tip}>
Basic{" "}
@ -133,7 +148,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
](https://jarv.is), and <code>`code`</code>.
</div>
<div className={styles.hcaptcha}>
<div className={styles.captcha}>
<Captcha onVerify={(token) => setFieldValue("h-captcha-response", token)} />
</div>

3
package.json
View File

@ -32,7 +32,7 @@
"@novnc/novnc": "1.3.0",
"@octokit/graphql": "^4.8.0",
"@primer/octicons": "^16.3.1",
"@sentry/node": "^6.17.6",
"@sentry/node": "^6.17.7",
"classnames": "^2.3.1",
"copy-to-clipboard": "^3.3.1",
"critters": "^0.0.16",
@ -64,6 +64,7 @@
"react-intersection-observer": "^8.33.1",
"react-is": "^17.0.2",
"react-player": "^2.9.0",
"react-textarea-autosize": "^8.3.3",
"react-tweet-embed": "^1.3.1",
"reading-time": "^1.5.0",
"rehype-prism-plus": "^1.3.1",

136
yarn.lock
View File

@ -3,9 +3,9 @@
"@ampproject/remapping@^2.0.0":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.0.tgz#72becdf17ee44b2d1ac5651fb12f1952c336fe23"
integrity sha512-d5RysTlJ7hmw5Tw4UxgxcY3lkMe92n8sXCcuLPAyIAHK6j8DefDwtGnVVDgOnv+RnEosulDJ9NPKQL27bDId0g==
version "2.1.1"
resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.1.tgz#7922fb0817bf3166d8d9e258c57477e3fd1c3610"
integrity sha512-Aolwjd7HSC2PyY0fDj/wA/EimQT4HfEnFYNp5s9CQlrdhyvWTtvZ5YzrUPu6R6/1jKiUlxu8bUhkdSnKHNAHMA==
dependencies:
"@jridgewell/trace-mapping" "^0.3.0"
@ -1117,14 +1117,14 @@
resolved "https://codeload.github.com/jakejarvis/eslint-config/tar.gz/cbe2b1e5fa675f787d38b5dd395aa13cfdfa371e"
"@jridgewell/resolve-uri@^3.0.3":
version "3.0.4"
resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz#b876e3feefb9c8d3aa84014da28b5e52a0640d72"
integrity sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==
version "3.0.5"
resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
"@jridgewell/sourcemap-codec@^1.4.10":
version "1.4.10"
resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.10.tgz#baf57b4e2a690d4f38560171f91783656b7f8186"
integrity sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg==
version "1.4.11"
resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
"@jridgewell/trace-mapping@^0.3.0":
version "0.3.4"
@ -1338,72 +1338,72 @@
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
"@sentry/core@6.17.6":
version "6.17.6"
resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.17.6.tgz#6ee2f2851b0bb2f2e967a10a8694d8bd98675aa5"
integrity sha512-wSNsQSqsW8vQ2HEvUEXYOJnzTyVDSWbyH4RHrWV1pQM8zqGx/qfz0sKFM5XFnE9ZeaXKL8LXV3v5i73v+z8lew==
"@sentry/core@6.17.7":
version "6.17.7"
resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.17.7.tgz#f591235c06b1a4e75d748b15c539e071bd3f5cf5"
integrity sha512-SRhLkD05lQb4eCt1ed9Dz72DKbRDlM8PJix8eC2oJLtwyFTS0IlJNkIYRrbsSKkJUm0VsKcDkzIHvUAgBBQICw==
dependencies:
"@sentry/hub" "6.17.6"
"@sentry/minimal" "6.17.6"
"@sentry/types" "6.17.6"
"@sentry/utils" "6.17.6"
"@sentry/hub" "6.17.7"
"@sentry/minimal" "6.17.7"
"@sentry/types" "6.17.7"
"@sentry/utils" "6.17.7"
tslib "^1.9.3"
"@sentry/hub@6.17.6":
version "6.17.6"
resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.17.6.tgz#af387ed1c180c05839610091de21ffb895b1403c"
integrity sha512-Ps9nk+DoFia8jhZ1lucdRE0vDx8hqXOsKXJE8a3hK/Ndki0J9jedYqBeLqSgiFG4qRjXpNFcD6TEM6tnQrv5lw==
"@sentry/hub@6.17.7":
version "6.17.7"
resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.17.7.tgz#5c90d661e263dad7da0e0106f1cb90cf797d93a7"
integrity sha512-siGzcg+quGOdjRaBGAz6T3ycwHUsGgvalptSJdf5Q783FVFhU+haPul++zGOYURXOgx0RjYGWqagwO8+jljl3Q==
dependencies:
"@sentry/types" "6.17.6"
"@sentry/utils" "6.17.6"
"@sentry/types" "6.17.7"
"@sentry/utils" "6.17.7"
tslib "^1.9.3"
"@sentry/minimal@6.17.6":
version "6.17.6"
resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.17.6.tgz#9e6c37af869133834328889925500e0e76090cef"
integrity sha512-PLGf8WlhtdHuY6ofwYR3nyClr/TYHHAW6i0r62OZCOXTqnFPJorZpAz3VCCP2jMJmbgVbo03wN+u/xAA/zwObA==
"@sentry/minimal@6.17.7":
version "6.17.7"
resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.17.7.tgz#f19182047f19b563f40a30d45d2ce9ad7df1ec4e"
integrity sha512-+/FGem1uXsXikX9wHPw44nevO7YTVjkkiPjyLsvnWMjv64r4Au5s+NQSFHDaytRm9IlU//+OasCAS5VAwHcYRg==
dependencies:
"@sentry/hub" "6.17.6"
"@sentry/types" "6.17.6"
"@sentry/hub" "6.17.7"
"@sentry/types" "6.17.7"
tslib "^1.9.3"
"@sentry/node@^6.17.6":
version "6.17.6"
resolved "https://registry.yarnpkg.com/@sentry/node/-/node-6.17.6.tgz#9ea8c7db089634423e3993127d6f6433535e23b6"
integrity sha512-T1s0yPbGvYpoh9pJgLvpy7s+jVwCyf0ieEoN9rSbnPwbi2vm6MfoV5wtGrE0cBHTPgnyOMv+zq4Q3ww6dfr7Pw==
"@sentry/node@^6.17.7":
version "6.17.7"
resolved "https://registry.yarnpkg.com/@sentry/node/-/node-6.17.7.tgz#c142d93328b29312098276e0cb66ec3b9e805a93"
integrity sha512-YlBhEv8YYUimHLpwzUP5lXkagbGxGAfjvsbahhvqf7rRl8Fu5XbatAcSDcx7YE4R0Iox94IfZy95kF2NL4Idow==
dependencies:
"@sentry/core" "6.17.6"
"@sentry/hub" "6.17.6"
"@sentry/tracing" "6.17.6"
"@sentry/types" "6.17.6"
"@sentry/utils" "6.17.6"
"@sentry/core" "6.17.7"
"@sentry/hub" "6.17.7"
"@sentry/tracing" "6.17.7"
"@sentry/types" "6.17.7"
"@sentry/utils" "6.17.7"
cookie "^0.4.1"
https-proxy-agent "^5.0.0"
lru_map "^0.3.3"
tslib "^1.9.3"
"@sentry/tracing@6.17.6":
version "6.17.6"
resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.17.6.tgz#40f6e6166e05059c7b826ced70056ba06d5722e8"
integrity sha512-+h5ov+zEm5WH9+vmFfdT4EIqBOW7Tggzh0BDz8QRStRc2JbvEiSZDs+HlsycBwWMQi/ucJs93FPtNnWjW+xvBw==
"@sentry/tracing@6.17.7":
version "6.17.7"
resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.17.7.tgz#f4536683b29bb3ac7ddda5ca49494731cec6b619"
integrity sha512-QzIDHOjjdi/0LTdrK2LTC27YEOODI473KD8KmMJ+r9PmjDeIjNzz4hJlPwQSnXR3Mu/8foxGJGXsAt3LNmKzlQ==
dependencies:
"@sentry/hub" "6.17.6"
"@sentry/minimal" "6.17.6"
"@sentry/types" "6.17.6"
"@sentry/utils" "6.17.6"
"@sentry/hub" "6.17.7"
"@sentry/minimal" "6.17.7"
"@sentry/types" "6.17.7"
"@sentry/utils" "6.17.7"
tslib "^1.9.3"
"@sentry/types@6.17.6":
version "6.17.6"
resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.17.6.tgz#7065df1433abfd8127462a6fe6f0538dbc307209"
integrity sha512-peGM873lDJtHd/jwW9Egr/hhxLuF0bcPIf2kMZlvEvW/G5GCbuaCR4ArQJlh7vQyma+NLn/XdojpJkC0TomKrw==
"@sentry/types@6.17.7":
version "6.17.7"
resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.17.7.tgz#61946a3f6532b8f21251b264f173b02f9ea2458e"
integrity sha512-iBlJDhrSowZKeqvutY0tCkUjrWqkLFsHrbaQ553r1Nx+/4mxHjzVYtEVGMjZAxQUEbkm0TbnQIkkT7ltglNJ9A==
"@sentry/utils@6.17.6":
version "6.17.6"
resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.17.6.tgz#900d75f04e126f9ccb73a68cec574038375dd33e"
integrity sha512-RI797N8Ax5yuKUftVX6dc0XmXqo5CN7XqJYPFzYC8udutQ4L8ZYadtUcqNsdz1ZQxl+rp0XK9Q6wjoWmsI2RXA==
"@sentry/utils@6.17.7":
version "6.17.7"
resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.17.7.tgz#0574bf914cc129b5e47041b75bb34dfbe0decbba"
integrity sha512-HEEEeKlZtwfQvH0waSKv5FKRFjHkVgkkEiAigXoYGQAlaUIuwRTvZGFnsmBoKMIrA4pARkA00FwwdtMU7ziC8A==
dependencies:
"@sentry/types" "6.17.6"
"@sentry/types" "6.17.7"
tslib "^1.9.3"
"@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
@ -5663,6 +5663,15 @@ react-player@^2.9.0:
prop-types "^15.7.2"
react-fast-compare "^3.0.1"
react-textarea-autosize@^8.3.3:
version "8.3.3"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
integrity sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==
dependencies:
"@babel/runtime" "^7.10.2"
use-composed-ref "^1.0.0"
use-latest "^1.0.0"
react-tweet-embed@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-tweet-embed/-/react-tweet-embed-1.3.1.tgz#066d45dd3fc4c72c6ea61a85857c9044d408235f"
@ -6904,6 +6913,23 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"
use-composed-ref@^1.0.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.2.1.tgz#9bdcb5ccd894289105da2325e1210079f56bf849"
integrity sha512-6+X1FLlIcjvFMAeAD/hcxDT8tmyrWnbSPMU0EnxQuDLIxokuFzWliXBiYZuGIx+mrAMLBw0WFfCkaPw8ebzAhw==
use-isomorphic-layout-effect@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"
integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==
use-latest@^1.0.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
dependencies:
use-isomorphic-layout-effect "^1.0.0"
use-subscription@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"