fix: ui tweaks 3

src/components/pages/ArticlePage.tsx

@@ -7,6 +7,7 @@ import { articleContent } from '@/content/articles'
 import type { ArticleSlug } from '@/data/articles'
 import { getArticleBySlug } from '@/data/articles'
 import { site } from '@/data/site'
+import { SpeciesHighlight } from '@/components/shared/SpeciesHighlight'
 
 interface ArticlePageProps {
   slug: ArticleSlug
@@ -70,11 +71,11 @@ export function ArticlePage({ slug }: ArticlePageProps) {
           </div>
 
           <h1 className="mb-6 font-serif text-[clamp(36px,5vw,60px)] leading-[1.1] font-normal tracking-[-0.02em] text-[var(--text)]">
-            {article.title}
+            <SpeciesHighlight text={article.title} />
           </h1>
 
           <div className="mb-10 font-serif text-[20px] leading-[1.5] font-normal text-[var(--muted)] italic">
-            {article.subtitle}
+            <SpeciesHighlight text={article.subtitle} />
           </div>
 
           <div className="flex items-center gap-8 border-t border-b border-[var(--border)] py-6">

src/components/sections/WritingSection.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link'
 
 import { SectionHeader } from '@/components/shared/SectionHeader'
+import { SpeciesHighlight } from '@/components/shared/SpeciesHighlight'
 import { articles } from '@/data/articles'
 import { type } from '@/lib/typography'
 
@@ -27,9 +28,13 @@ export function WritingSection() {
           >
             <div className={`mb-4 ${type.eyebrow}`}>{article.tag}</div>
 
-            <div className={`mb-4 ${type.cardTitle}`}>{article.title}</div>
+            <div className={`mb-4 ${type.cardTitle}`}>
+              <SpeciesHighlight text={article.title} />
+            </div>
 
-            <div className={`mb-6 ${type.body}`}>{article.excerpt}</div>
+            <div className={`mb-6 ${type.body}`}>
+              <SpeciesHighlight text={article.excerpt} />
+            </div>
 
             <div className="mb-6 flex flex-wrap gap-[0.4rem]">
               {article.chips.map((chip) => (

src/components/shared/SpeciesHighlight.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+
+export const speciesClassName = 'text-[var(--accent)] italic'
+
+export function SpeciesEm({ children }: { children: ReactNode }) {
+  return <em className={speciesClassName}>{children}</em>
+}
+
+const speciesPattern = /(Picrophilus torridus|P\.\s*[Tt]orridus)/g
+
+function formatSpeciesMatch(match: string) {
+  return /^P\./i.test(match) ? 'P. torridus' : match
+}
+
+export function SpeciesHighlight({ text }: { text: string }) {
+  const parts: ReactNode[] = []
+  let lastIndex = 0
+
+  for (const match of text.matchAll(speciesPattern)) {
+    const index = match.index ?? 0
+
+    if (index > lastIndex) {
+      parts.push(text.slice(lastIndex, index))
+    }
+
+    parts.push(
+      <SpeciesEm key={index}>{formatSpeciesMatch(match[0])}</SpeciesEm>,
+    )
+
+    lastIndex = index + match[0].length
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex))
+  }
+
+  return <>{parts}</>
+}

src/content/articles/p-torridus-extremophile.tsx

@@ -1,3 +1,5 @@
+import { SpeciesEm } from '@/components/shared/SpeciesHighlight'
+
 export function PTorridusContent() {
   return (
     <>
@@ -10,8 +12,9 @@ export function PTorridusContent() {
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
         What&apos;s interesting about the domain of life is that extremities exist. We have life
         forms that can survive in conditions at the ends of the ranges of the various conditions that
-        define the existence of life. One of these life forms is <em>Picrophilus torridus</em> (P.
-        Torridus) of phylum Euryarchaeota. P. Torridus, first extracted from moderately
+        define the existence of life. One of these life forms is{' '}
+        <SpeciesEm>Picrophilus torridus</SpeciesEm> (<SpeciesEm>P. torridus</SpeciesEm>) of phylum
+        Euryarchaeota. <SpeciesEm>P. torridus</SpeciesEm>, first extracted from moderately
         high-temperature hydrothermal areas in solfataric fields in Hokkaido, Japan, are known to
         grow in regions of pH around 0 and temperatures between 47 and 65 degrees Celsius.
       </p>
@@ -21,20 +24,20 @@ export function PTorridusContent() {
       </h2>
 
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
-        Thermoacidophile P. Torridus was discovered by Dr. Christa Schleper and her colleagues in
-        1995 among the wet layers of coal in the acidic and geothermally heated fields of the
-        solfataras. P. Torridus is an aerobic life form, hence discovered in the oxygenous upper
-        layers of coal. The acid that gives the solfataric fields their acidic behavior is sulfuric
-        acid, produced from the oxidation of hydrogen sulfide.
+        Thermoacidophile <SpeciesEm>P. torridus</SpeciesEm> was discovered by Dr. Christa Schleper
+        and her colleagues in 1995 among the wet layers of coal in the acidic and geothermally heated
+        fields of the solfataras. <SpeciesEm>P. torridus</SpeciesEm> is an aerobic life form, hence
+        discovered in the oxygenous upper layers of coal. The acid that gives the solfataric fields
+        their acidic behavior is sulfuric acid, produced from the oxidation of hydrogen sulfide.
       </p>
 
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
-        The fact that P. Torridus, together with Picrophilus oshimae, could grow in these highly
-        acidic and hot environments makes it one of the most thermoacidophilic organisms known to
-        exist. Most organisms cannot grow in these conditions — low intracellular pH values denature
-        protein structures, leading to cell death through reactions between peptide linkages and
-        hydronium ions. High temperatures weaken the hydrogen bonding that gives proteins their
-        structure and functionality.
+        The fact that <SpeciesEm>P. torridus</SpeciesEm>, together with Picrophilus oshimae, could
+        grow in these highly acidic and hot environments makes it one of the most thermoacidophilic
+        organisms known to exist. Most organisms cannot grow in these conditions — low intracellular
+        pH values denature protein structures, leading to cell death through reactions between
+        peptide linkages and hydronium ions. High temperatures weaken the hydrogen bonding that gives
+        proteins their structure and functionality.
       </p>
 
       <h2 className="mt-12 mb-5 font-serif text-[28px] font-normal tracking-[-0.01em] text-[var(--text)]">
@@ -43,10 +46,10 @@ export function PTorridusContent() {
 
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
         We&apos;ve established that acidic and high-temperature environments are destructive to
-        proteins. But how does P. Torridus keep its proteins functional in such an environment?
-        Little is known about the complete mechanisms by which these organisms combat their
-        environment. However, P. Torridus maintains an intracellular pH of about 4-5 pH units above
-        the extracellular pH.
+        proteins. But how does <SpeciesEm>P. torridus</SpeciesEm> keep its proteins functional in
+        such an environment? Little is known about the complete mechanisms by which these organisms
+        combat their environment. However, <SpeciesEm>P. torridus</SpeciesEm> maintains an
+        intracellular pH of about 4-5 pH units above the extracellular pH.
       </p>
 
       <div
@@ -66,19 +69,21 @@ export function PTorridusContent() {
 
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
         This hypothesis is supported by the evident use of secondary cation transporters, especially
-        potassium ions, in the sequenced genome of P. Torridus. The genome also contains genes that
-        encode for enzymes that degrade organic acids — another pH correction mechanism.
+        potassium ions, in the sequenced genome of <SpeciesEm>P. torridus</SpeciesEm>. The genome also
+        contains genes that encode for enzymes that degrade organic acids — another pH correction
+        mechanism.
       </p>
 
       <h3 className="mt-10 mb-4 font-sans text-[13px] font-semibold tracking-[0.1em] text-[var(--accent2)] uppercase">
         Combating High Temperatures
       </h3>
 
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
-        We&apos;ve explored how P. Torridus thrives in low pH regions, but how does it combat high
-        temperatures? The genome of P. Torridus offers insights. These microorganisms have the
-        smallest genome among all aerobic non-parasitic microorganisms, with one of the highest
-        coding densities compared to other extremophiles like Thermoplasma acidophilum.
+        We&apos;ve explored how <SpeciesEm>P. torridus</SpeciesEm> thrives in low pH regions, but how
+        does it combat high temperatures? The genome of <SpeciesEm>P. torridus</SpeciesEm> offers
+        insights. These microorganisms have the smallest genome among all aerobic non-parasitic
+        microorganisms, with one of the highest coding densities compared to other extremophiles like
+        Thermoplasma acidophilum.
       </p>
 
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
@@ -93,29 +98,29 @@ export function PTorridusContent() {
       </h2>
 
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
-        The existence of P. Torridus is not by mere coincidence. This microorganism evolved under
-        the selective pressure of both low pH and high temperatures. The key features that resulted
-        from these pressures are the very small genome size and its high coding density. This can be
-        deduced by comparing P. Torridus with closely related extremophiles like Sulfolobus
-        solfataricus and Thermoplasma volcanii.
+        The existence of <SpeciesEm>P. torridus</SpeciesEm> is not by mere coincidence. This
+        microorganism evolved under the selective pressure of both low pH and high temperatures. The
+        key features that resulted from these pressures are the very small genome size and its high
+        coding density. This can be deduced by comparing <SpeciesEm>P. torridus</SpeciesEm> with
+        closely related extremophiles like Sulfolobus solfataricus and Thermoplasma volcanii.
       </p>
 
       <p className="mb-7 font-mono text-[14px] leading-[2] font-light text-[rgba(240,237,230,0.75)]">
         The genome contains a large proportion of genes encoding protein transporters, particularly
         gradient-driven secondary transporters, suggesting adaptation to use the pH difference
         between the inner cell membrane and extracellular regions. We can conceptualize the
-        phenotype of P. Torridus by studying the selective pressures that led to its evolution: low
-        pH and high temperature.
+        phenotype of <SpeciesEm>P. torridus</SpeciesEm> by studying the selective pressures that led
+        to its evolution: low pH and high temperature.
       </p>
 
       <div className="my-12 flex items-center justify-center gap-4 font-mono text-[16px] tracking-[0.5em] text-[var(--dim)]">
         · · ·
       </div>
 
       <p className="mb-10 font-serif text-[20px] leading-[1.6] font-normal text-[var(--text)] italic">
-        P. Torridus is an aerobic, non-parasitic, and thermoacidophilic microorganism that presents
-        one of the most extreme examples of life, stretching the boundaries where life was once
-        thought impossible.
+        <SpeciesEm>P. torridus</SpeciesEm> is an aerobic, non-parasitic, and thermoacidophilic
+        microorganism that presents one of the most extreme examples of life, stretching the
+        boundaries where life was once thought impossible.
       </p>
 
       <h3 className="mt-12 mb-4 font-sans text-[13px] font-semibold tracking-[0.1em] text-[var(--accent2)] uppercase">
@@ -128,18 +133,18 @@ export function PTorridusContent() {
             text: (
               <>
                 Angelov, A., & Liebl, W. (2006). Insights into extreme thermoacidophily based on
-                genome analysis of Picrophilus torridus and other thermoacidophilic archaea.{' '}
-                <em>Journal of Biotechnology</em>, 126(1), 3-10.
+                genome analysis of <SpeciesEm>Picrophilus torridus</SpeciesEm> and other
+                thermoacidophilic archaea. <em>Journal of Biotechnology</em>, 126(1), 3-10.
               </>
             ),
             href: 'https://doi.org/10.1016/j.jbiotec.2006.02.011',
           },
           {
             text: (
               <>
-                Fütterer, O., et al. (2004). Genome sequence of Picrophilus torridus and its
-                implications for life around pH 0. <em>Proceedings of the National Academy of
-                Sciences</em>, 101(24), 9091-9096.
+                Fütterer, O., et al. (2004). Genome sequence of{' '}
+                <SpeciesEm>Picrophilus torridus</SpeciesEm> and its implications for life around pH
+                0. <em>Proceedings of the National Academy of Sciences</em>, 101(24), 9091-9096.
               </>
             ),
             href: 'https://doi.org/10.1073/pnas.0401356101',
@@ -157,10 +162,11 @@ export function PTorridusContent() {
           {
             text: (
               <>
-                Schleper, C., et al. (1996). Picrophilus oshimae and Picrophilus torridus fam. nov.,
-                gen. nov., sp. nov., two species of hyperacidophilic, thermophilic, heterotrophic,
-                aerobic archaea. <em>International Journal of Systematic and Evolutionary
-                Microbiology</em>, 46(3), 814-816.
+                Schleper, C., et al. (1996). Picrophilus oshimae and{' '}
+                <SpeciesEm>Picrophilus torridus</SpeciesEm> fam. nov., gen. nov., sp. nov., two
+                species of hyperacidophilic, thermophilic, heterotrophic, aerobic archaea.{' '}
+                <em>International Journal of Systematic and Evolutionary Microbiology</em>, 46(3),
+                814-816.
               </>
             ),
             href: 'https://doi.org/10.1099/00207713-46-3-814',

src/data/articles.ts

@@ -2,7 +2,7 @@ export const articles = [
   {
     slug: 'p-torridus-extremophile',
     tag: 'Science · Biology',
-    title: 'Life at the Edge: How P. Torridus Survives at pH 0',
+    title: 'Life at the Edge: How P. torridus Survives at pH 0',
     date: 'Feb 2024',
     readTime: '6 min read',
     excerpt: