fix: configure domain

volt-camp · May 31, 2022 · 0379943 · 0379943
1 parent f784ecc
commit 0379943
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 47 deletions.
diff --git a/gatsby-config.ts b/gatsby-config.ts
@@ -1,9 +1,12 @@
 import type { GatsbyConfig } from 'gatsby'
 
+const domain = process.env.DOMAIN ?? 'volt.camp'
+
 const config: GatsbyConfig = {
 	siteMetadata: {
-		title: `volt.camp`,
-		siteUrl: `https://volt.camp`,
+		title: domain,
+		siteUrl: `https://${domain}`,
+		description: 'The future of eco-friendly van camping is electric.'
 	},
 	plugins: [
 		{

diff --git a/src/components/head.tsx b/src/components/head.tsx
@@ -3,16 +3,19 @@ import { Helmet } from 'react-helmet'
 
 import '../../node_modules/normalize.css/normalize.css'
 
-export const Head = () => {
+export const Head = ({
+	title,
+	description,
+}: {
+	title: string
+	description: string
+}) => {
 	const linkRef = React.useRef<HTMLLinkElement>(null)
 	return (
 		<Helmet>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-			<title>volt.camp</title>
-			<meta
-				name="description"
-				content="The future of eco-friendly van camping is electric."
-			/>
+			<title>{title}</title>
+			<meta name="description" content={description} />
 			<link rel="preconnect" href="https://fonts.googleapis.com" />
 			<link
 				rel="preconnect"

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,54 +1,54 @@
-import * as React from "react"
-import { Link } from "gatsby"
+import { Link } from 'gatsby'
+import * as React from 'react'
 
 // styles
 const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+	color: '#232129',
+	padding: '96px',
+	fontFamily: '-apple-system, Roboto, sans-serif, serif',
 }
 const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
+	marginTop: 0,
+	marginBottom: 64,
+	maxWidth: 320,
 }
 
 const paragraphStyles = {
-  marginBottom: 48,
+	marginBottom: 48,
 }
 const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
+	color: '#8A6534',
+	padding: 4,
+	backgroundColor: '#FFF4DB',
+	fontSize: '1.25rem',
+	borderRadius: 4,
 }
 
 // markup
 const NotFoundPage = () => {
-  return (
-    <main style={pageStyles}>
-      <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{" "}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{" "}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === "development" ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
-    </main>
-  )
+	return (
+		<main style={pageStyles}>
+			<title>Not found</title>
+			<h1 style={headingStyles}>Page not found</h1>
+			<p style={paragraphStyles}>
+				Sorry{' '}
+				<span role="img" aria-label="Pensive emoji">
+					😔
+				</span>{' '}
+				we couldn’t find what you were looking for.
+				<br />
+				{process.env.NODE_ENV === 'development' ? (
+					<>
+						<br />
+						Try creating a page in <code style={codeStyles}>src/pages/</code>.
+						<br />
+					</>
+				) : null}
+				<br />
+				<Link to="/">Go home</Link>.
+			</p>
+		</main>
+	)
 }
 
 export default NotFoundPage
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import { graphql, PageProps } from 'gatsby'
 import * as React from 'react'
 import { ArticleTile } from '../components/ArticleTile'
 import { Box } from '../components/box'
@@ -7,10 +8,25 @@ import { Header } from '../components/header'
 import Logo from '../images/logo.svg'
 import * as indexStyles from './index.module.css'
 
-const IndexPage = () => {
+const IndexPage: React.FunctionComponent<
+	PageProps<{
+		site: {
+			siteMetadata: {
+				title: string
+				description: string
+			}
+		}
+	}>
+> = ({
+	data: {
+		site: {
+			siteMetadata: { title, description },
+		},
+	},
+}) => {
 	return (
 		<>
-			<Head />
+			<Head title={title} description={description} />
 			<div className={indexStyles.outer}>
 				<Header />
 				<div className={indexStyles.columnLayout}>
@@ -43,3 +59,14 @@ const IndexPage = () => {
 }
 
 export default IndexPage
+
+export const query = graphql`
+	{
+		site {
+			siteMetadata {
+				title
+				description
+			}
+		}
+	}
+`