properly set hrefs for dynamic paths on notes list

components/contact/ContactForm.tsx

@@ -100,23 +100,24 @@ const ContactForm = () => {
       {({ setFieldValue, isSubmitting, touched, errors }) => (
         <Form className={styles.form} name="contact">
           <Field
-            type="text"
-            name="name"
-            placeholder="Name"
             className={cx({ missing: errors.name && touched.name })}
+            name="name"
+            type="text"
+            placeholder="Name"
             disabled={success}
           />
           <Field
-            type="email"
-            name="email"
-            placeholder="Email"
             className={cx({ missing: errors.email && touched.email })}
+            name="email"
+            type="email"
+            inputmode="email"
+            placeholder="Email"
             disabled={success}
           />
           <Field
             className={cx({ missing: errors.message && touched.message })}
-            component="textarea"
             name="message"
+            component="textarea"
             placeholder="Write something..."
             disabled={success}
           />

components/notes/List.tsx

@@ -22,7 +22,13 @@ const List = ({ notesByYear }) => {
             <li key={note.slug} className={styles.row}>
               <span className={styles.date}>{format(new Date(note.date), "MMM d")}</span>
               <span>
-                <Link href={`/notes/${note.slug}/`} prefetch={false}>
+                <Link
+                  href={{
+                    pathname: "/notes/[slug]/",
+                    query: { slug: note.slug },
+                  }}
+                  prefetch={false}
+                >
                   <a>
                     <Markdown options={{ disableParsingRawHTML: true, forceInline: true }}>{note.title}</Markdown>
                   </a>