diff --git a/.gitignore b/.gitignore
index 392a1ca..16136c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+statickit.json
\ No newline at end of file
diff --git a/components/ContactForm/index.js b/components/ContactForm/index.js
new file mode 100644
index 0000000..4e7fb04
--- /dev/null
+++ b/components/ContactForm/index.js
@@ -0,0 +1,99 @@
+import React from 'react'
+import styled from 'styled-components'
+import { designTokens } from '../Theme/designTokens'
+import { useForm, ValidationError } from '@statickit/react';
+
+const FormButton = styled.button`
+ font-family: inherit;
+ border: 1px solid var(--primary);
+ background: var(--primaryTransparent);
+ color: var(--primaryDark);
+ display: block;
+ width: 100%;
+ padding: ${designTokens.space[3]};
+ border-radius: ${designTokens.space[1]};
+ margin-top: ${designTokens.space[4]};
+ cursor: pointer;
+ transition: all 120ms ease-out 0s;
+ &:hover, &:focus {
+ border-color: var(--primaryTransparent);
+ }
+`
+
+const EmptyStateIcon = styled.div`
+ display: inline-flex;
+ background: var(--primaryTransparent);
+ color: var(--primary);
+ align-items: center;
+ justify-content: center;
+ width: ${designTokens.space[7]};
+ height: ${designTokens.space[7]};
+ margin-bottom: ${designTokens.space[2]};
+ border-radius: 50%;
+`
+
+const EmptyState = styled.div`
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+`
+
+export default function ContactForm() {
+
+ const [state, handleSubmit] = useForm("contactForm");
+ if (state.succeeded) {
+ return(
+
+
+
+
+ Message Sent!
+
+ )
+ }
+
+ return(
+
+ )
+}
\ No newline at end of file
diff --git a/components/Footer/index.js b/components/Footer/index.js
index 5e4e2a7..4c38506 100644
--- a/components/Footer/index.js
+++ b/components/Footer/index.js
@@ -61,6 +61,24 @@ const FooterButton = styled.button`
}
`
+const FooterBottom = styled.div`
+ display: inline-flex;
+ align-items: center;
+ margin-top: ${designTokens.space[4]};
+ @media screen and (max-width: ${designTokens.breakpoints[4]}) {
+ flex-direction: column;
+ }
+`
+
+const FooterLogo = styled.div`
+ display: inline-flex;
+ align-items: center;
+ margin-right: ${designTokens.space[4]};
+ @media screen and (max-width: ${designTokens.breakpoints[4]}) {
+ margin-bottom: ${designTokens.space[2]};
+ }
+`
+
export default function Footer() {
const clearStorage = () => {
localStorage.removeItem('theme')
@@ -104,16 +122,8 @@ export default function Footer() {
Made with Next.js and Styled Components
-
- Clear Storage
-
+
+ Reset Theme
+
)
diff --git a/components/GlobalStyles/index.js b/components/GlobalStyles/index.js
index 9746e5a..bcb540d 100644
--- a/components/GlobalStyles/index.js
+++ b/components/GlobalStyles/index.js
@@ -168,6 +168,45 @@ export const GlobalStyles = createGlobalStyle`
color: var(--secondaryDark);
}
}
+
+ hr {
+ background: var(--grey200);
+ border: 0;
+ height: 1px
+ }
+
+ input, textarea, select {
+ font-family: inherit;
+ color: inherit;
+ background: var(--grey100);
+ display: block;
+ width: 100%;
+ border: 1px solid var(--grey400);
+ border-radius: ${designTokens.space[1]};
+ padding: ${designTokens.space[3]};
+ margin: ${designTokens.space[2]} auto ${designTokens.space[3]};
+ transition: all 120ms ease-out 0s;
+ &:focus {
+ background: transparent;
+ border-color: var(--primary);
+ }
+ }
+
+ textarea {
+ height: ${designTokens.space[9]};
+ resize: none;
+ }
+
+ ::placeholder {
+ color: var(--grey500);
+ }
+
+ form {
+ label {
+ font-size: ${designTokens.fontSizes[1]};
+ color: var(--grey700);
+ }
+ }
strong {
font-weight: ${designTokens.fontWeights.bold};
diff --git a/components/Layout/index.js b/components/Layout/index.js
index 36f5d5d..a73088b 100644
--- a/components/Layout/index.js
+++ b/components/Layout/index.js
@@ -7,6 +7,7 @@ import { ThemeProvider } from 'styled-components'
import { notionLight, notionDark, darkTheme, lightTheme, hyrule, zora, gerudo, hebra, eldin, sheikah, korok, yiga } from '../Theme/'
import { designTokens } from '../Theme/designTokens'
import Footer from '../Footer'
+import { StaticKitProvider } from '@statickit/react'
const LayoutContainer = styled.div`
width: 100%;
@@ -69,45 +70,47 @@ export default function Layout({ children, pageTitle, description, ...props }) {
return lightTheme
})
}>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {pageTitle}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {pageTitle}
+
+
+
+
+
+
diff --git a/package.json b/package.json
index 9973286..8475212 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"export": "next export"
},
"dependencies": {
+ "@statickit/react": "^2.1.1",
"babel-plugin-styled-components": "^1.10.7",
"color": "^3.1.2",
"gray-matter": "^4.0.2",
diff --git a/pages/post/[postname].js b/pages/post/[postname].js
index 5ff298a..7bfa7f8 100644
--- a/pages/post/[postname].js
+++ b/pages/post/[postname].js
@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown'
import CodeBlock from '@components/CodeBlock'
import { format } from 'timeago.js'
import { designTokens } from '@components/Theme/designTokens'
+import ContactForm from '@components/ContactForm'
import Layout from '@components/Layout'
import getSlugs from '@utils/getSlugs'
@@ -49,6 +50,8 @@ export default function BlogPost({ siteTitle, frontmatter, markdownBody }) {
/>
+
+
)
diff --git a/yarn.lock b/yarn.lock
index e49e6ba..db83c41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1050,6 +1050,22 @@
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.4.4.tgz#d94cbb3b354a07f1f5b80e554d6b9e34aba99e41"
integrity sha512-9nKENeWRI6kQk44TbeqleIVtNLfcS3klVUepzl/ZCqzR5Bi06uqBCD277hdVvG/wL1pxA+R/pgJQLqnF5E2wPQ==
+"@statickit/core@^2.5.1":
+ version "2.5.1"
+ resolved "https://registry.yarnpkg.com/@statickit/core/-/core-2.5.1.tgz#3f6004ac87c0042e2b0b353a7bbc062da9b6fac1"
+ integrity sha512-DaAoeD4V/Kf1jpzqTEZ/NatYg5b3TUgDN/mbvhUguE6aE00ePVGlX1W790rDGc5rQHMkf1rN5iv428Z1gMNe+g==
+ dependencies:
+ "@types/promise-polyfill" "^6.0.3"
+ fetch-ponyfill "^6.1.0"
+ promise-polyfill "^8.1.3"
+
+"@statickit/react@^2.1.1":
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/@statickit/react/-/react-2.1.1.tgz#3d67a57190a0a6b36a2ceeeec7ff8585ca2a94c5"
+ integrity sha512-zZGQQAw7D3GHzBb4NHeNOSeM0UmNn6496qq9Fg2RVPOKwvDZoJ6YovOnZVi1x5GJdF8BSUbLrlv1CNihFK3hDw==
+ dependencies:
+ "@statickit/core" "^2.5.1"
+
"@types/color-name@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -1060,6 +1076,11 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
+"@types/promise-polyfill@^6.0.3":
+ version "6.0.3"
+ resolved "https://registry.yarnpkg.com/@types/promise-polyfill/-/promise-polyfill-6.0.3.tgz#e2f38fcd244a9e0df2cc7528e0711abcbc707b5e"
+ integrity sha512-f/BFgF9a+cgsMseC7rpv9+9TAE3YNjhfYrtwCo/pIeCDDfQtE6PY0b5bao2eIIEpZCBUy8Y5ToXd4ObjPSJuFw==
+
"@types/q@^1.5.1":
version "1.5.4"
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
@@ -2680,6 +2701,13 @@ fault@^1.0.2:
dependencies:
format "^0.2.0"
+fetch-ponyfill@^6.1.0:
+ version "6.1.1"
+ resolved "https://registry.yarnpkg.com/fetch-ponyfill/-/fetch-ponyfill-6.1.1.tgz#dd8cdff0741a98bc89aeb85820302beb9bcc0bf4"
+ integrity sha512-rWLgTr5A44/XhvCQPYj0X9Tc+cjUaHofSM4lcwjc9MavD5lkjIhJ+h8JQlavPlTIgDpwhuRozaIykBvX9ItaSA==
+ dependencies:
+ node-fetch "~2.6.0"
+
figgy-pudding@^3.5.1:
version "3.5.2"
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -3909,7 +3937,7 @@ next@^9.4.4:
webpack "4.43.0"
webpack-sources "1.4.3"
-node-fetch@2.6.0:
+node-fetch@2.6.0, node-fetch@~2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
@@ -4650,6 +4678,11 @@ promise-inflight@^1.0.1:
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
+promise-polyfill@^8.1.3:
+ version "8.1.3"
+ resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116"
+ integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==
+
prop-types-exact@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"