Better post navigation

app/posts/[slug]/page.tsx

@@ -4,7 +4,7 @@ import { ShareLinks } from '@/components/post/ShareLinks'
 import { TableOfContents } from '@/components/post/TableOfContents'
 import { getAllPostSlugs, getNextAndPreviousPosts, getPostBySlug } from '@/lib/posts'
 import { slugify } from '@/utils/slug'
-import { Pencil, SendHorizonal } from 'lucide-react'
+import { ArrowLeft, ArrowRight, Pencil, SendHorizonal } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 
@@ -126,26 +126,39 @@ export default async function Post({ params }: { params: Promise<{ slug: string
           />
         </div>
 
-        <div className="mt-8 flex justify-between">
+        <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 border-t border-border pt-8">
           {previous ? (
             <Link
               href={`/posts/${previous.slug}`}
-              className="text-accent hover:underline font-sm mb-2 block"
+              className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70"
             >
-              &larr; {previous.title}
+              <span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide">
+                <ArrowLeft className="w-3 h-3 shrink-0 transition-transform group-hover:-translate-x-1" />
+                Previous
+              </span>
+              <span className="text-accent font-medium group-hover:underline line-clamp-2">
+                {previous.title}
+              </span>
             </Link>
           ) : (
-            <div />
+            <div className="hidden sm:block" />
           )}
+
           {next ? (
             <Link
               href={`/posts/${next.slug}`}
-              className="text-accent hover:underline font-sm mb-2 block"
+              className="group flex flex-col gap-1 rounded-lg p-4 transition-colors hover:bg-muted/50 active:bg-muted/70 sm:text-right"
             >
-              {next.title} &rarr;
+              <span className="flex items-center gap-1 text-xs text-muted-foreground uppercase tracking-wide sm:justify-end">
+                Next
+                <ArrowRight className="w-3 h-3 shrink-0 transition-transform group-hover:translate-x-1" />
+              </span>
+              <span className="text-accent font-medium group-hover:underline line-clamp-2">
+                {next.title}
+              </span>
             </Link>
           ) : (
-            <div />
+            <div className="hidden sm:block" />
           )}
         </div>
       </article>

content/posts/standard-model.md

@@ -56,7 +56,6 @@ In particle physics, the total energy of a particle is often described by:
 $$
 \begin{equation}
 E^2 = (pc)^2 + (m_0 c^2)^2
-\label{eq:energy_momentum_mass}
 \end{equation}
 $$
 
@@ -106,7 +105,6 @@ If the color explanation is confusing, you can instead imagine the colors as a v
 $$
 \begin{equation}
 (1,0)+(0,1)+(-1,-1)=(0,0)
-\label{eq:color_neutral_combination}
 \end{equation}
 $$
 
@@ -122,10 +120,10 @@ Quarks are never found in isolation due to a phenomenon called quark confinement
 
 ```mermaid
 graph TB;
-    id0[q1 ... qn] --> Hadrons;
-    Hadrons --> Mesons;
-    Hadrons --> Baryons;
-    Hadrons --> id1[Exotic Hadrons]
+   id0[q1 ... qn] --> Hadrons;
+   Hadrons --> Mesons;
+   Hadrons --> Baryons;
+   Hadrons --> id1[Exotic Hadrons]
 ```
 
 This is a simplified representation of the relationship between quarks and hadrons. Quarks combine to form hadrons, which include mesons and baryons. Exotic hadrons are more complex combinations of quarks.
@@ -166,7 +164,6 @@ The probability of a neutrino of flavor $\nu_\alpha$​ transforming into a neut
 $$
 \begin{equation}
 P(\nu_\alpha\to\nu_\beta)=\sin^2(2\theta)\sin^2(\frac{\Delta m^2L}{4E})
-\label{eq:neutrino_oscillations}
 \end{equation}
 $$
 
@@ -182,7 +179,6 @@ The key to understanding why neutrinos must have mass lies in the $\Delta m^2$ t
 $$
 \begin{equation}
 \sin^2(\frac{\Delta m^2L}{4E})=\sin^2(0)=0
-\label{eq:neutrino_oscillations_zero_mass}
 \end{equation}
 $$
 
@@ -241,7 +237,6 @@ The QED Lagrangian describes the interactions of electrons, positrons, and photo
 $$
 \begin{equation}
 \mathcal{L}_{QED} = -\frac{1}{4} F_{\mu\nu} F^{\mu\nu} + \bar{\psi} (i \gamma^\mu D_\mu - m) \psi
-\label{eq:qed_lagrangian}
 \end{equation}
 $$
 
@@ -250,7 +245,6 @@ $$
    $$
    \begin{equation}
    F_{\mu\nu} = \partial_\mu A_\nu - \partial_\nu A_\mu
-   \label{eq:em_field_strength_tensor}
    \end{equation}
    $$
    - **Explanation**: This term describes the field strength of the electromagnetic field. It involves the derivative of the electromagnetic potential $A_\mu$. The field strength tensor is antisymmetric, reflecting the nature of the electromagnetic force.
@@ -264,7 +258,6 @@ $$
    $$
    \begin{equation}
    D_\mu = \partial_\mu - i e A_\mu
-   \label{eq:covariant_derivative_for_electrons}
    \end{equation}
    $$
    - **Explanation**: This accounts for the interaction of electrons with the electromagnetic field. $e$ is the electric charge, and $A_\mu$ is the electromagnetic potential.
@@ -289,7 +282,6 @@ The Electroweak Lagrangian describes the interactions of leptons, quarks, and ga
 $$
 \begin{equation}
 \mathcal{L}_{EW} = -\frac{1}{4} W^a_{\mu\nu} W^{a\mu\nu} - \frac{1}{4} B_{\mu\nu} B^{\mu\nu} + \bar{\psi} (i \gamma^\mu D_\mu - m) \psi
-\label{eq:electroweak_lagrangian}
 \end{equation}
 $$
 
@@ -300,7 +292,6 @@ $$
    $$
    \begin{equation}
    W^a_{\mu\nu} = \partial_\mu W^a_\nu - \partial_\nu W^a_\mu + g \epsilon^{abc} W^b_\mu W^c_\nu
-   \label{eq:w_field_strength_tensor}
    \end{equation}
    $$
    - **$B$ Field Strength Tensor** ($B_{\mu\nu}$):
@@ -308,7 +299,6 @@ $$
    $$
    \begin{equation}
    B_{\mu\nu} = \partial_\mu B_\nu - \partial_\nu B_\mu
-   \label{eq:b_field_strength_tensor}
    \end{equation}
    $$
    - **Explanation**: These terms describe the field strengths of the $W$ and $B$ fields, which are associated with the weak and electromagnetic forces, respectively. The $W$ field strength tensor involves the non-Abelian field strength term, reflecting the non-Abelian nature of the weak force.
@@ -322,7 +312,6 @@ $$
    $$
    \begin{equation}
    D_\mu = \partial_\mu - i g' Y B_\mu - i g \frac{\tau^a}{2} W^a_\mu
-   \label{eq:covariant_derivative_for_leptons_quarks}
    \end{equation}
    $$
    - **Explanation**: This accounts for the interaction of leptons/quarks with the $W$ and $B$ fields. $g'$ and $g$ are the coupling constants for the $U(1)$ and $SU(2)$ gauge groups, respectively. $Y$ is the weak hypercharge, and $\frac{\tau^a}{2}$ are the generators of the $SU(2)$ group.
@@ -347,7 +336,6 @@ The QCD Lagrangian describes the interactions of quarks and gluons, the fundamen
 $$
 \begin{equation}
 \mathcal{L}_{QCD} = -\frac{1}{4} G^a_{\mu\nu} G^{a\mu\nu} + \sum_q \bar{q} (i \gamma^\mu D_\mu - m_q) q
-\label{eq:qcd_lagrangian}
 \end{equation}
 $$
 
@@ -356,7 +344,6 @@ $$
    $$
    \begin{equation}
    G^a_{\mu\nu} = \partial_\mu G^a_\nu - \partial_\nu G^a_\mu + g_s f^{abc} G^b_\mu G^c_\nu
-   \label{eq:gluon_field_strength_tensor}
    \end{equation}
    $$
    - **Explanation**: This term describes the field strength of gluons. It involves the derivative of the gluon fields $(\partial_\mu G^a_\nu$ and $\partial_\nu G^a_\mu)$ and the non-Abelian field strength term involving the structure constants $f^{abc}$, which accounts for the interaction between gluons themselves.
@@ -370,7 +357,6 @@ $$
    $$
    \begin{equation}
    D_\mu = \partial_\mu - i g_s \frac{\lambda^a}{2} G^a_\mu
-   \label{eq:quark_covariant_derivative_qcd}
    \end{equation}
    $$
    - **Explanation**: This accounts for the interaction of quarks with gluons. $g_s$ is the strong coupling constant, and $\frac{\lambda^a}{2}$ are the generators of the SU(3) color gauge group. $G^a_\mu$ are the gluon fields.

lib/posts.tsx

@@ -56,8 +56,8 @@ export function getNextAndPreviousPosts(slug: string): {
 } {
   const posts = getAllPostsMeta()
   const index = posts.findIndex((post) => post.slug === slug)
-  const next = index < posts.length - 1 ? posts[index + 1] : null
-  const previous = index > 0 ? posts[index - 1] : null
+  const previous = index < posts.length - 1 ? posts[index + 1] : null
+  const next = index > 0 ? posts[index - 1] : null
   return { next, previous }
 }
 
@@ -99,9 +99,7 @@ export async function getPostBySlug(slug: string, postDirectory: string = postsD
       img: ({ src, alt }: { src: string; alt: string }) => <ImageWrapper src={src} alt={alt} />,
       a: ({ href, children }: { href: string; children: ReactNode }) =>
         href?.startsWith('http') ? (
-          <ExternalLink href={href}>
-            {children}
-          </ExternalLink>
+          <ExternalLink href={href}>{children}</ExternalLink>
         ) : (
           <Link href={href}>{children}</Link>
         ),