Updated to Next.js 13

2022-11-18 13:54:54 +01:00
commit 0eae94dbe6
40 changed files with 6381 additions and 0 deletions
--- a/components/BlogList.js
+++ b/components/BlogList.js
@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import ReactMarkdown from 'react-markdown'
+import styles from "../styles/BlogList.module.css"
+import Image from "next/image";
+
+function truncateSummary(content) {
+    return content.slice(0, 200).trimEnd()
+}
+
+function reformatDate(fullDate) {
+    const date = new Date(fullDate)
+    return date.toDateString().slice(4)
+}
+
+const BlogList = ({ allBlogs }) => {
+    return (
+        <ul>
+            {allBlogs.length > 1 &&
+                allBlogs.map(post => (
+                    <li key={post.slug}>
+                        <Link href={{ pathname: `/blog/${post.slug}` }} className={styles.blog__link}>
+                            <div className={styles.hero_image}>
+                                <Image
+                                    width={384}
+                                    height={288}
+                                    src={post.frontmatter.hero_image}
+                                    alt={post.frontmatter.hero_image}
+                                />
+                            </div>
+                            <div className={styles.blog__info}>
+                                <h2>{post.frontmatter.title}</h2>
+                                <h3>{reformatDate(post.frontmatter.date)}</h3>
+                                <ReactMarkdown disallowedElements={['a']}>{truncateSummary(post.markdownBody)}</ReactMarkdown>
+                            </div>
+                        </Link>
+                    </li>
+                ))}
+        </ul>
+    )
+}
+
+export default BlogList
--- a/components/Header.js
+++ b/components/Header.js
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import styles from '../styles/Header.module.css'
+
+export default function Header(props) {
+    const isInfoPage = typeof window !== "undefined" && window.location.pathname === "/info"
+
+    return (
+        <header className={styles.header}>
+            <nav
+                className={styles.nav}
+                role="navigation"
+                aria-label="main navigation"
+            >
+                <Link href="/">
+                    <h1>{props.siteTitle}</h1>
+                </Link>
+                <div>
+                    <Link href={isInfoPage ? '/' : '/info'}>
+                        <h1>{isInfoPage ? 'close' : 'info'}</h1>
+                    </Link>
+                </div>
+            </nav>
+        </header>
+    );
+}
+
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -0,0 +1,22 @@
+import Header from "./Header";
+import Meta from './Meta'
+import styles from '../styles/Layout.module.css'
+
+export default function Layout(props) {
+  return (
+      <section
+          className={styles.layout}
+          style={{
+            backgroundColor: `${props.bgColor && props.bgColor}`,
+            color: props.pathname === "info" ? 'white' : undefined
+          }}
+      >
+        <Meta
+            siteTitle={props.siteTitle}
+            siteDescription={props.siteDescription}
+        />
+        <Header siteTitle={props.siteTitle} />
+        <div className={styles.content}>{props.children}</div>
+      </section>
+  );
+}
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -0,0 +1,12 @@
+import Head from 'next/head'
+
+export default function Meta(props) {
+    return (
+        <Head>
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <meta charSet="utf-8" />
+            <title>{props.siteTitle}</title>
+            <meta name="Description" content={props.description}></meta>
+        </Head>
+    )
+}