feat: add article page

gatsby-config.ts

@@ -6,7 +6,7 @@ const config: GatsbyConfig = {
 	siteMetadata: {
 		title: domain,
 		siteUrl: `https://${domain}`,
-		description: 'The future of eco-friendly van camping is electric.'
+		description: 'The future of eco-friendly van camping is electric.',
 	},
 	plugins: [
 		{

src/components/ArticleImage.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+import * as articleImageStyles from './articleImage.module.css'
+
+export const ArticleImage = ({ image, alt }: { image: string; alt }) => {
+	const i = new URL(image)
+	i.searchParams.set('fm', 'webp')
+	i.searchParams.set('w', '960')
+	return (
+		<img className={articleImageStyles.image} src={i.toString()} alt={alt} />
+	)
+}

src/components/ArticleTile.tsx

@@ -1,24 +1,29 @@
 import * as React from 'react'
 
+import { Link } from 'gatsby'
+
 import * as articleTileStyles from './articleTile.module.css'
 
 export const ArticleTile = ({
 	image,
 	category,
+	link,
 }: {
 	image: string
 	category: string
+	link: string
 }) => {
 	const i = new URL(image)
 	i.searchParams.set('fm', 'webp')
 	i.searchParams.set('w', '960')
 	return (
-		<div
-			className={articleTileStyles.articleTile}
-		>
-			<div className={articleTileStyles.background}
-			style={{ backgroundImage: `url(${i.toString()})` }}></div>
-			<section>
+		<div className={articleTileStyles.articleTile}>
+			<Link to={link}>
+				<div
+					className={articleTileStyles.background}
+					style={{ backgroundImage: `url(${i.toString()})` }}
+				></div>
+				<section>
 					<span className={articleTileStyles.tag}>{category}</span>
 					<h1>Iridium</h1>
 					<p>
@@ -31,8 +36,8 @@ export const ArticleTile = ({
 						<dt>Range</dt>
 						<dd>300&nbsp;km</dd>
 					</dl>
-			</section>
+				</section>
+			</Link>
 		</div>
 	)
-
-}
+}

src/components/articleImage.module.css

@@ -0,0 +1,13 @@
+@import "../vars.css";
+
+.image {
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border-radius: var(--border-radius);
+  box-shadow: 5px 5px 10px 0px #0000002e;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin: 4rem 0;
+}

src/components/articleTile.module.css

@@ -11,6 +11,10 @@
   justify-content: flex-end;
 }
 
+.articleTile a {
+  text-decoration: none;
+}
+
 .background {
   position: absolute;
   top: 0;
@@ -67,8 +71,10 @@
 }
 
 .articleTile p {
-  font-weight: 400;
+  font-weight: 200;
   margin-top: 0.5rem;
+  font-size: 150%;
+  line-height: 125%;
 }
 
 .articleTile dl {

src/pages/article.module.css

@@ -0,0 +1,89 @@
+.columnLayout {
+  width: 100%;
+}
+
+.columnLayout > * + * {
+  margin-top: 1rem;
+}
+
+.outer {
+  max-width: var(--max-width);
+  margin: 0 1rem;
+}
+@media screen and (min-width: 960px) {
+  .outer {
+    margin: 0 auto;
+  }
+}
+
+.asideLogo {
+  text-align: center;
+}
+
+.sectionNav {
+  opacity: 0.8;
+}
+
+.sectionNav a,
+.sectionNav span {
+  margin-right: 1rem;
+  text-decoration: none;
+}
+
+.sectionNav a::before,
+.sectionNav span::before {
+  content: "";
+  border-left: 1px solid #ccc;
+  padding-left: 1rem;
+}
+
+.main article h1 {
+  font-size: 300%;
+  line-height: 110%;
+  font-weight: 200;
+  margin: 2rem 0 1rem 0;
+}
+
+.articleMeta {
+  opacity: 0.8;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.articleMeta > * + * {
+  margin-left: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.articleMeta > *::before {
+  content: "";
+  margin-right: 1rem;
+  border-radius: 100%;
+  border: 2px solid var(--color-highlight-secondary);
+  display: block;
+  width: 8px;
+  height: 8px;
+}
+
+.articleMeta > *:first-child:before {
+  content: "";
+  margin-right: 0;
+  display: auto;
+  border: 0;
+  width: 0;
+}
+
+.articleMeta a {
+  display: flex;
+  align-items: center;
+}
+
+.articleMeta img {
+  border-radius: 100%;
+  width: 30px;
+  height: 30px;
+  border: 2px solid var(--color-highlight-primary);
+  margin-right: 5px;
+}

src/pages/article.tsx

@@ -0,0 +1,81 @@
+import { Link } from 'gatsby'
+import * as React from 'react'
+import { ArticleImage } from '../components/ArticleImage'
+import { Footer } from '../components/footer'
+import { Head } from '../components/head'
+import { Header } from '../components/header'
+import '../global.module.css'
+import * as articleStyles from './article.module.css'
+
+const ArticlePage: React.FunctionComponent = () => {
+	const image =
+		'https://images.ctfassets.net/l9w5g6t31jrn/6IsQTLBxS4cSTNylfn4L6o/c65b43dc3ec28b66f1701358c622eb47/image.png'
+	const i = new URL(image)
+	i.searchParams.set('fm', 'webp')
+	i.searchParams.set('w', '960')
+	return (
+		<>
+			<Head
+				title={`Van: WOF Iridium`}
+				description={`The Iridium Electric Camper van by German manufacturer WOF is the world's first ready-to-purchase electric camper van.`}
+			/>
+			<div className={articleStyles.outer}>
+				<Header />
+				<div className={articleStyles.columnLayout}>
+					<main className={articleStyles.main}>
+						<header>
+							<nav className={articleStyles.sectionNav}>
+								<Link to="/tag/van">Van</Link>
+								<Link to="/manufacturer/WOF">WOF</Link>
+								<span>Iridium</span>
+							</nav>
+						</header>
+						<article>
+							<h1>
+								The Iridium Electric Camper van by German manufacturer WOF is
+								the world's first ready-to-purchase electric camper van.
+							</h1>
+							<div className={articleStyles.articleMeta}>
+								<Link to="/author/markus">
+									<img
+										src="https://images.ctfassets.net/bncv3c2gt878/6CWMgqeZdCmkk6KkIUksgQ/50922090bc6566c6624c12b82a4bf78c/36671282034_427eace68d_o.jpg?w=50&amp;fm=webp"
+										alt="Markus Tacker"
+									/>
+									Markus Tacker
+								</Link>
+								<span>22. June 2022</span>
+							</div>
+							<ArticleImage
+								image={
+									'https://images.ctfassets.net/l9w5g6t31jrn/6IsQTLBxS4cSTNylfn4L6o/c65b43dc3ec28b66f1701358c622eb47/image.png'
+								}
+								alt={'Van: WOF Iridium'}
+							></ArticleImage>
+							<p>
+								At the Caravansalon 2019, German manufacturer{' '}
+								<a href="https://wof-wohnmobile.de/" rel="noopener noreferrer">
+									WOF Wohnmobile
+								</a>{' '}
+								presented the first fully electric campervan that is ready to
+								order. A limited series of 30 vehicels is to be produced.
+							</p>
+							<p>
+								The{' '}
+								<a
+									href="https://www.emr-campers.de/iridium-elektro-wohnmobil/"
+									rel="noopener noreferrer"
+								>
+									Iridium
+								</a>{' '}
+								has a range of 400 km and can be charged with up to 100 kW.
+							</p>
+						</article>
+					</main>
+				</div>
+				<Footer />
+			</div>
+		</>
+	)
+}
+
+export default ArticlePage

src/pages/index.tsx

@@ -1,30 +1,16 @@
-import { graphql, PageProps } from 'gatsby'
 import * as React from 'react'
 import { ArticleTile } from '../components/ArticleTile'
 import { Box } from '../components/box'
 import { Footer } from '../components/footer'
 import { Head } from '../components/head'
 import { Header } from '../components/header'
+import '../global.module.css'
 import Logo from '../images/logo.svg'
+import { useSiteMetadata } from '../useSiteMetadata'
 import * as indexStyles from './index.module.css'
-import '../global.module.css'
 
-const IndexPage: React.FunctionComponent<
-	PageProps<{
-		site: {
-			siteMetadata: {
-				title: string
-				description: string
-			}
-		}
-	}>
-> = ({
-	data: {
-		site: {
-			siteMetadata: { title, description },
-		},
-	},
-}) => {
+const IndexPage: React.FunctionComponent = () => {
+	const { title, description } = useSiteMetadata()
 	return (
 		<>
 			<Head title={title} description={description} />
@@ -37,6 +23,7 @@ const IndexPage: React.FunctionComponent<
 								'https://images.ctfassets.net/l9w5g6t31jrn/6IsQTLBxS4cSTNylfn4L6o/c65b43dc3ec28b66f1701358c622eb47/image.png'
 							}
 							category={'Van'}
+							link={'/article'}
 						></ArticleTile>
 					</main>
 					<aside>
@@ -59,14 +46,3 @@ const IndexPage: React.FunctionComponent<
 }
 
 export default IndexPage
-
-export const query = graphql`
-	{
-		site {
-			siteMetadata {
-				title
-				description
-			}
-		}
-	}
-`

src/useSiteMetadata.tsx

@@ -0,0 +1,34 @@
+import { graphql, useStaticQuery } from 'gatsby'
+
+export const useSiteMetadata = (): {
+	title: string
+	description: string
+	siteUrl: URL
+} => {
+	const {
+		site: {
+			siteMetadata: { title, description, siteUrl },
+		},
+	} = useStaticQuery(
+		graphql`
+			query {
+				site {
+					siteMetadata {
+						title
+						description
+						siteUrl
+					}
+				}
+			}
+		`,
+	)
+
+	return {
+		title,
+		description,
+		siteUrl:
+			process.env.NODE_ENV === 'development'
+				? new URL('http://localhost:8000')
+				: new URL(siteUrl),
+	}
+}