Create a default way to make links

components/OrganizedContent.module.css

@@ -2,20 +2,28 @@
   display: flex;
 }
 
-.wrapper h1 {
-  margin: 1rem 0;
-  font-size: calc(24rem / 16);
-  font-weight: 600;
-  color: var(--primary-accent);
-}
-
 .content {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
+.content h1 {
+  font-size: calc(24rem / 16);
+  color: var(--primary-accent);
+}
+
+.content h2,
+.content h3 {
+  font-size: calc(18rem / 16);
+  margin-top: calc(24rem / 16);
+  margin-bottom: calc(16rem / 16);
+}
+
 .nav {
+  top: calc(20rem / 16);
+  position: sticky;
+  height: 100%;
   margin: calc(8rem / 16) calc(32rem / 16) 0 0;
   color: var(--primary-heading);
   font-weight: 500;
@@ -29,7 +37,7 @@
   border-bottom: calc(1rem / 16) solid var(--primary-accent-light);
   align-items: center;
   height: calc(40rem / 16);
-  width: calc(284rem / 16);
+  width: calc(200rem / 16);
   padding: 0 calc(14rem / 16);
   cursor: pointer;
 }
@@ -110,7 +118,25 @@
   padding-left: calc(8rem / 16);
 }
 
+.link,
+.link:visited {
+  color: inherit;
+  text-decoration: none;
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
+  .content h1 {
+    font-size: calc(18rem / 16);
+  }
+
+  .content h2,
+  .content h3,
+  .content h4 {
+    font-size: calc(18rem / 16);
+    margin-top: calc(24rem / 16);
+    margin-bottom: calc(8rem / 16);
+  }
+
   .nav {
     display: none;
   }

components/OrganizedContent.tsx

@@ -1,13 +1,8 @@
+import NextLink from "next/link";
 import React, { ReactNode, ComponentType } from "react";
 
 import styles from "./OrganizedContent.module.css";
 
-export interface LinkProps {
-  className?: string;
-  id: string;
-  children: ReactNode;
-}
-
 type Link = ComponentType<LinkProps>;
 
 interface Section {
@@ -50,10 +45,10 @@ export function OrganizedContent({
           children
         ) : (
           <>
-            <div>
+            <section>
               <h1>{section.title}</h1>
               {children}
-            </div>
+            </section>
             <Footer
               sections={sections}
               currentIndex={currentIndex}
@@ -74,7 +69,7 @@ interface NavProps {
 
 function Nav({ sections, currentIndex, link: Link }: NavProps) {
   return (
-    <div className={styles.nav}>
+    <nav className={styles.nav}>
       {sections.map((section, index) => {
         const classNames = [styles.navItem];
 
@@ -97,7 +92,7 @@ function Nav({ sections, currentIndex, link: Link }: NavProps) {
           </Link>
         );
       })}
-    </div>
+    </nav>
   );
 }
 
@@ -148,25 +143,61 @@ export interface SectionWithContent {
 }
 
 export function createReadAllSection(
-  sections: SectionWithContent[]
-): SectionWithContent {
-  return {
-    section: {
-      id: READ_ALL_ID,
-      title: READ_ALL_TITLE,
-    },
-    Content: function ReadAllContent() {
-      return (
-        <>
-          {sections.map(({ section: { id, title }, Content }) => (
-            <div key={id}>
-              <h1>{title}</h1>
-              <Content />
-            </div>
-          ))}
-        </>
-      );
-    },
+  sections: Section[],
+  content: false
+): Section;
+export function createReadAllSection(
+  sections: SectionWithContent[],
+  content: true
+): SectionWithContent;
+export function createReadAllSection(
+  sections: SectionWithContent[] | Section[],
+  content = true
+): SectionWithContent | Section {
+  const readAllSection = {
+    id: READ_ALL_ID,
+    title: READ_ALL_TITLE,
+  };
+
+  return content
+    ? {
+        section: readAllSection,
+        Content: function ReadAllContent() {
+          return (
+            <>
+              {(sections as SectionWithContent[]).map(
+                ({ section: { id, title }, Content }) => (
+                  <section key={id}>
+                    <h1>{title}</h1>
+                    <Content />
+                  </section>
+                )
+              )}
+            </>
+          );
+        },
+      }
+    : readAllSection;
+}
+
+export interface LinkProps {
+  className?: string;
+  id: string;
+  children: ReactNode;
+}
+
+export function createLink(page: string) {
+  let base = page.startsWith("/") ? page : `/${page}`;
+  base = base.endsWith("/") ? base : `${base}/`;
+
+  return function Link({ className, id, children }: LinkProps) {
+    const href = id === READ_ALL_ID ? base : base + id;
+
+    return (
+      <NextLink href={href}>
+        <a className={`${styles.link} ${className ?? ""}`}>{children}</a>
+      </NextLink>
+    );
   };
 }