document: Add html lang and favicons to every page (#93)

Adding a `lang` removes this warning from validator.w3.org: > Consider adding a `lang` attribute to the `html` start tag to declare the language of this document. Adding the favicons makes them appear everywhere, which fixes a small bug where they weren't included in pages/data-sources.tsx.
sid-kap · Jul 16, 2024 · fc33366 · fc33366
1 parent fef6e03
commit fc33366
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/lib/common_elements.tsx b/lib/common_elements.tsx
@@ -158,7 +158,7 @@ export function Nav({ currentIndex }) {
   )
 }
 
-function Favicons() {
+export function Favicons() {
   // code and files generated at https://realfavicongenerator.net/favicon_result?file_id=p1eqe14ktav9g1bnv1v22dbm1lb26
   return (
     <>
@@ -196,16 +196,15 @@ function Favicons() {
 
 export function Page({ title, navIndex, children }) {
   return (
-    <div>
+    <>
       <Head>
-        <title>{title}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <Favicons />
+        <title>{title}</title>
       </Head>
 
       <Nav currentIndex={navIndex} />
       {children}
       <GitHubFooter />
-    </div>
+    </>
   )
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,16 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+import { Favicons } from '../lib/common_elements'
+
+export default function Document(): JSX.Element {
+  return (
+    <Html lang="en">
+      <Head>
+        <Favicons />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/pages/data-sources.tsx b/pages/data-sources.tsx
@@ -9,10 +9,10 @@ export default function DataSources(): JSX.Element {
   const para = "mb-2"
 
   return (
-    <div>
+    <>
       <Head>
-        <title>Data Sources/FAQs</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Data Sources/FAQs</title>
       </Head>
       <Nav currentIndex={5} />
       <div className="max-w-2xl mx-auto mb-10 align-center flex flex-col justify-center">
@@ -156,6 +156,6 @@ export default function DataSources(): JSX.Element {
         </pre>
       </div>
       <GitHubFooter />
-    </div>
+    </>
   )
 }