import Head from 'next/head'
import Link from 'next/link'

export default function Layout({
  children,
  title
}: {
  children: React.ReactNode
  title?: string
}) {
  return (
    <>
      <Head>
        <title>{title && title + " | "}Kevin Plattret, Software Engineer</title>

        <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
        <link rel="shortcut icon" href="/icons/favicon.png" />
      </Head>

      <header className="header">
        <Link href="/"><a className="alt">Kevin Plattret</a></Link>

        <nav className="navigation">
          <ul>
            <li><Link href="/blog"><a className="alt">Blog</a></Link></li>
            <li><Link href="/work"><a className="alt">Work</a></Link></li>
          </ul>
        </nav>
      </header>

      <main className="content">{children}</main>

      <footer className="footer">
        <p>Written by Kevin Plattret in London and other places. Source code available
          on <a href="https://github.com/kplattret/kevinplattret.com">GitHub</a>. Feel free to reach
          out via <a href="mailto:kevin@plattret.com">email</a> (
          <a href="https://keys.openpgp.org/search?q=kevin@plattret.com">PGP key</a>).</p>
      </footer>
    </>
  )
}

import Head from 'next/head'
import Link from 'next/link'

export default function Layout({
  children,
  title
}: {
  children: React.ReactNode
  title?: string
}) {
  const github = <a href="https://github.com/kplattret/kevinplattret.com">GitHub</a>
  const email = <a href="mailto:kevin@plattret.com">email</a>
  const pgpKey = <a href="https://keys.openpgp.org/search?q=kevin@plattret.com">PGP key</a>

  return (
    <>
      <Head>
        <title>{title && title + " | "}Kevin Plattret, Software Engineer</title>

        <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
        <link rel="shortcut icon" href="/icons/favicon.png" />
      </Head>

      <header className="header">
        <Link href="/"><a className="alt">Kevin Plattret</a></Link>

        <nav className="navigation">
          <ul>
            <li><Link href="/blog"><a className="alt">Blog</a></Link></li>
            <li><Link href="/work"><a className="alt">Work</a></Link></li>
          </ul>
        </nav>
      </header>

      <main className="content">{children}</main>

      <footer className="footer">
        <p>Written by Kevin Plattret in London and other places. Source code available on {github}.
          Feel free to reach out via {email} ({pgpKey}).</p>
      </footer>
    </>
  )
}

Store footer links in constances
Store footer links in constances

It can be a bit tricky to format the code within an HTML elements in the
`return` function, especially when using nested elements. This moves
`<a>` tags outside of the footer and stores them in constances, which
helps keep the code neat and tidy.
