additional asset and layout refactoring

components/LayoutWrapper.tsx

@@ -1,6 +1,4 @@
-import siteMetadata from '@/data/siteMetadata'
 import headerNavLinks from '@/data/headerNavLinks'
-import Logo from '@/data/logo.svg'
 import Link from './Link'
 import SectionContainer from './SectionContainer'
 import Footer from './Footer'
@@ -15,30 +13,14 @@ const LayoutWrapper = ({ children }: Props) => {
   return (
     <SectionContainer>
       <div className="flex h-screen flex-col justify-between">
-        <header className="flex items-center justify-between py-10">
+        <header className="flex items-center justify-between py-6">
-          <div>
+          <div className="flex items-center text-base sm:w-full">
-            <Link href="/" aria-label={siteMetadata.headerTitle}>
+            <div className="hidden sm:flex sm:w-full sm:justify-around">
-              <div className="flex items-center justify-between">
-                <div className="mr-3">
-                  <Logo />
-                </div>
-                {typeof siteMetadata.headerTitle === 'string' ? (
-                  <div className="hidden h-6 text-2xl font-semibold sm:block">
-                    {siteMetadata.headerTitle}
-                  </div>
-                ) : (
-                  siteMetadata.headerTitle
-                )}
-              </div>
-            </Link>
-          </div>
-          <div className="flex items-center text-base leading-5">
-            <div className="hidden sm:block">
               {headerNavLinks.map((link) => (
                 <Link
                   key={link.title}
                   href={link.href}
-                  className="p-1 font-medium text-gray-900 dark:text-gray-100 sm:p-4"
+                  className="p-1 font-bold text-gray-900 hover:text-primary-400 dark:text-gray-100  dark:hover:text-primary-500 sm:p-4"
                 >
                   {link.title}
                 </Link>

components/MobileNav.tsx

@@ -62,7 +62,7 @@ const MobileNav = () => {
             <div key={link.title} className="px-12 py-4">
               <Link
                 href={link.href}
-                className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+                className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-400 dark:text-gray-100 dark:hover:text-primary-400"
                 onClick={onToggleNav}
               >
                 {link.title}

data/authors/default.md

@@ -1,16 +1,19 @@
 ---
 name: Augury
 avatar: /static/images/avatar.png
+bannerimage: /static/images/band.jpg
 email: info@augurymetal.com
-twitter: https://twitter.com/augurymetal,
+twitter: https://twitter.com/augurymetal
-facebook: https://www.facebook.com/augury,
+facebook: https://www.facebook.com/augury
-instagram: https://instagram.com/augurymetal,
+instagram: https://instagram.com/augurymetal
-youtube: https://youtube.com/augurymetal,
+youtube: https://youtube.com/augurymetal
-spotify: http://open.spotify.com/artist/7Iy3W9Pe1ivZzIM3jZvW59,
+spotify: http://open.spotify.com/artist/7Iy3W9Pe1ivZzIM3jZvW59
-applemusic: https://music.apple.com/us/artist/augury/1101253774,
+applemusic: https://music.apple.com/us/artist/augury/1101253774
-lastfm: https://www.last.fm/music/augury,
+lastfm: https://www.last.fm/music/augury
 ---
 
+# Augury
+
 Augury is a relatively new name in Montréal's musical landscape, yet the very idea of the band was in the air since the musicians met in 1997.
 
 But serious stuff began in the winter of 2001/2002 when lead/classical guitarist Mathieu Marcotte left his band Spasme and started auditioning a string of drummers to seriously start a complete outfit. Shortly after, he was joined by soprano vocalist Arianne Fleury and demented bass wizard Dominic "Forest" Lapointe and started to jam complete songs.
@@ -25,10 +28,7 @@ Triplet feels and guitar/bass dual and triple harmonies are indeed a staple of A
 
 ---
 
-Patrick Loisel has appeared in Kralizec.
+- Patrick Loisel has appeared in [Kralizec](https://www.metal-archives.com/bands/Kralizec/6002).
-
+- Mathieu Marcotte also appears in [Spasme](https://www.metal-archives.com/bands/Spasme/436) and Humanoid.
-Mathieu Marcotte also appears in Humanoid.
+- Antoine Baril has appeared in Symbolic and [Deviant Process](https://www.metal-archives.com/bands/Deviant_Process/3540364841)
-
+- Dominic 'Forest' Lapointe has appeared in [First Fragment](https://www.metal-archives.com/bands/First_Fragment/3540325573), [Atheretic](https://www.metal-archives.com/bands/Atheretic/4479) and [Beyond Creation](https://www.metal-archives.com/bands/Beyond_Creation/3540316039).
-Antoine Baril has appeared in Symbolic and Deviant Process
-
-Dominic 'Forest' Lapointe has appeared in Atheretic and Beyond Creation.

data/authors/sparrowhawk.md

@@ -1,12 +0,0 @@
----
-name: Sparrow Hawk
-avatar: /static/images/sparrowhawk-avatar.jpg
-occupation: Wizard of Earthsea
-company: Earthsea
-twitter: https://twitter.com/sparrowhawk
-linkedin: https://www.linkedin.com/sparrowhawk
----
-
-At birth, Ged was given the child-name Duny by his mother. He was born on the island of Gont, as a son of a bronzesmith. His mother died before he reached the age of one. As a small boy, Ged had overheard the village witch, his maternal aunt, using various words of power to call goats. Ged later used the words without an understanding of their meanings, to surprising effect.
-
-The witch knew that using words of power effectively without understanding them required innate power, so she endeavored to teach him what little she knew. After learning more from her, he was able to call animals to him. Particularly, he was seen in the company of wild sparrowhawks so often that his "use name" became Sparrowhawk.

data/blog/guide-to-using-images-in-nextjs.mdx

@@ -4,7 +4,6 @@ date: '2020-11-11'
 tags: ['next js', 'guide']
 draft: false
 summary: 'In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.'
-authors: ['sparrowhawk']
 ---
 
 # Introduction

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -6,7 +6,6 @@ tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
 images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
-authors: ['default', 'sparrowhawk']
 ---
 
 ![tailwind-nextjs-banner](/static/images/twitter-card.png)

layouts/AuthorLayout.tsx

@@ -12,9 +12,7 @@ interface Props {
 export default function AuthorLayout({ children, frontMatter }: Props) {
   const {
     name,
-    avatar,
+    bannerimage,
-    occupation,
-    company,
     email,
     facebook,
     instagram,
@@ -37,16 +35,13 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
         <div className="items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0">
           <div className="flex flex-col items-center space-x-2 pt-8">
             <Image
-              src={avatar}
+              src={bannerimage}
               alt="avatar"
-              width="192px"
+              width="1250px"
-              height="192px"
+              height="579px"
-              className="h-48 w-48 rounded-full"
+              className="rounded-sm"
             />
-            <h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">{name}</h3>
+            <div className="flex space-x-3 pt-8">
-            <div className="text-gray-500 dark:text-gray-400">{occupation}</div>
-            <div className="text-gray-500 dark:text-gray-400">{company}</div>
-            <div className="flex space-x-3 pt-6">
               <SocialIcon kind="mail" href={`mailto:${email}`} size={6} />
               <SocialIcon kind="facebook" href={facebook} size={6} />
               <SocialIcon kind="instagram" href={instagram} size={6} />

pages/_document.tsx

@@ -24,7 +24,7 @@ class MyDocument extends Document {
           <meta name="theme-color" content="#000000" />
           <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
         </Head>
-        <body className="bg-white text-black antialiased dark:bg-gray-900 dark:text-white">
+        <body className="bg-white text-black antialiased dark:bg-black dark:text-white">
           <Main />
           <NextScript />
         </body>

types/AuthorFrontMatter.ts

@@ -2,6 +2,7 @@ export type AuthorFrontMatter = {
   layout?: string
   name: string
   avatar: string
+  bannerimage: string
   email: string
   facebook: string
   instagram: string