Skip to content

Commit ad30de6

Browse files
fezcodefezcode
committed
feat: theme independent vocabs
1 parent 7829c2d commit ad30de6

21 files changed

+65
-65
lines changed

‎src/data/vocab/anti-pattern.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function AntiPattern() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
An <strong className="text-white">Anti-Pattern</strong> is a common response to a recurring
7+
An <strong className="text-current">Anti-Pattern</strong> is a common response to a recurring
88
problem that is usually ineffective and risks being highly
99
counterproductive.
1010
</p>

‎src/data/vocab/box-plot.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function BoxPlot() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
A <strong className="text-white">Box Plot</strong> (or box-and-whisker plot) is a standardized way of displaying the distribution of data based on a five-number summary: minimum, first quartile (Q1), median, third quartile (Q3), and maximum.
7+
A <strong className="text-current">Box Plot</strong> (or box-and-whisker plot) is a standardized way of displaying the distribution of data based on a five-number summary: minimum, first quartile (Q1), median, third quartile (Q3), and maximum.
88
</p>
99

1010
{/* Box Plot Diagram */}

‎src/data/vocab/context-api.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function ContextApi() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
The <strong className="text-white">Context API</strong> is a React feature that enables you to
7+
The <strong className="text-current">Context API</strong> is a React feature that enables you to
88
share values (like global settings, user auth, or themes) between
99
components without having to explicitly pass a prop through every level
1010
of the tree.

‎src/data/vocab/crawler.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function Crawler() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
A <strong className="text-white">Crawler</strong> (or bot) is an automated program that visits websites to index content for search
7+
A <strong className="text-current">Crawler</strong> (or bot) is an automated program that visits websites to index content for search
88
engines (like Google) or to generate link previews for social media (like Twitter and Discord).
99
</p>
1010

@@ -17,7 +17,7 @@ export default function Crawler() {
1717
relies entirely on JavaScript to render its content (CSR), the crawler sees a blank page.
1818
</p>
1919
<p>
20-
By using <strong className="text-white">Static Site Generation (SSG)</strong>, we ensure that every route on Fezcodex has a unique HTML
20+
By using <strong className="text-current">Static Site Generation (SSG)</strong>, we ensure that every route on Fezcodex has a unique HTML
2121
file that any crawler can read, ensuring perfect SEO and rich social thumbnails.
2222
</p>
2323
</div>

‎src/data/vocab/csr.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function CSR() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
<strong className="text-white">Client-Side Rendering (CSR)</strong> is a web development technique where the browser downloads a minimal HTML file and a large JavaScript bundle. The JavaScript then executes and builds the entire user interface on the fly.
7+
<strong className="text-current">Client-Side Rendering (CSR)</strong> is a web development technique where the browser downloads a minimal HTML file and a large JavaScript bundle. The JavaScript then executes and builds the entire user interface on the fly.
88
</p>
99

1010
<div className="bg-black p-4 border border-white/10 font-mono text-xs my-6">
@@ -22,7 +22,7 @@ export default function CSR() {
2222
</p>
2323

2424
<div className="border-l-2 border-white/20 pl-4 py-1">
25-
<strong className="text-white uppercase tracking-wider text-xs block mb-1">Comparison</strong>
25+
<strong className="text-current uppercase tracking-wider text-xs block mb-1">Comparison</strong>
2626
<span className="text-gray-400 text-xs">Unlike SSG, where the HTML is ready before it reaches the browser, CSR requires the user's device to do the heavy lifting of rendering.</span>
2727
</div>
2828
</div>

‎src/data/vocab/etl.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function ETL() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
<strong className="text-white">ETL (Extract, Transform, Load)</strong> is a data integration process that combines data from multiple sources into a single, consistent data store that is loaded into a data warehouse or other target system.
7+
<strong className="text-current">ETL (Extract, Transform, Load)</strong> is a data integration process that combines data from multiple sources into a single, consistent data store that is loaded into a data warehouse or other target system.
88
</p>
99

1010
<div className="bg-black p-4 border border-white/10 font-mono text-xs my-6">
@@ -31,12 +31,12 @@ export default function ETL() {
3131
</p>
3232

3333
<div className="border-l-2 border-white/20 pl-4 py-1">
34-
<strong className="text-gray-300 uppercase tracking-widest text-xs block mb-2">Common Tools</strong>
34+
<strong className="text-rose-600 uppercase tracking-widest text-xs block mb-2">Common Tools</strong>
3535
<div className="flex flex-wrap gap-2">
36-
<span className="bg-white/5 px-2 py-1 text-xs text-gray-300">Apache Airflow</span>
37-
<span className="bg-white/5 px-2 py-1 text-xs text-gray-300">Talend</span>
38-
<span className="bg-white/5 px-2 py-1 text-xs text-gray-300">AWS Glue</span>
39-
<span className="bg-white/5 px-2 py-1 text-xs text-gray-300">Pandas</span>
36+
<span className="bg-white/5 px-2 py-1 text-xs text-rose-600">Apache Airflow</span>
37+
<span className="bg-white/5 px-2 py-1 text-xs text-rose-600">Talend</span>
38+
<span className="bg-white/5 px-2 py-1 text-xs text-rose-600">AWS Glue</span>
39+
<span className="bg-white/5 px-2 py-1 text-xs text-rose-600">Pandas</span>
4040
</div>
4141
</div>
4242
</div>

‎src/data/vocab/game-of-the-year.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function GameOfTheYear() {
3030
return (
3131
<div className="space-y-6 font-mono text-sm leading-relaxed">
3232
<p>
33-
<strong className="text-white">Game of the Year (GOTY)</strong> is an award given by various
33+
<strong className="text-current">Game of the Year (GOTY)</strong> is an award given by various
3434
gaming publications, websites, and events to a video game that is
3535
considered the best or most outstanding of a particular year.
3636
</p>
@@ -42,14 +42,14 @@ export default function GameOfTheYear() {
4242
</p>
4343

4444
<div className="mt-8">
45-
<h3 className="text-xs font-bold text-white uppercase tracking-widest mb-4 border-b border-white/10 pb-2">
45+
<h3 className="text-xs font-bold text-current uppercase tracking-widest mb-4 border-b border-white/10 pb-2">
4646
Notable Winners (TGA & VGA)
4747
</h3>
4848
<div className="grid grid-cols-1 gap-2">
4949
{WINNERS.map((winner) => (
5050
<div key={winner.year} className="flex gap-4 text-xs group">
5151
<span className="text-emerald-500 font-bold min-w-[40px]">{winner.year}</span>
52-
<span className="text-gray-400 group-hover:text-white transition-colors">{winner.game}</span>
52+
<span className="text-gray-400 group-hover:text-current transition-colors">{winner.game}</span>
5353
</div>
5454
))}
5555
</div>

‎src/data/vocab/hydration.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ export default function Hydration() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
<strong className="text-white">Hydration</strong> is the process of a client-side JavaScript library (like React) "attaching" itself to a static HTML page that was already rendered by the server or a build tool.
7+
<strong className="text-current">Hydration</strong> is the process of a client-side JavaScript library (like React) "attaching" itself to a static HTML page that was already rendered by the server or a build tool.
88
</p>
99

1010
<div className="flex justify-center py-8">
1111
<div className="flex flex-col items-center gap-4 border border-white/10 p-6 bg-white/[0.02]">
1212
<span className="text-gray-500 text-xs uppercase tracking-widest font-bold">Static HTML (Dry)</span>
13-
<span className="text-xl text-white">↓</span>
13+
<span className="text-xl text-current">↓</span>
1414
<span className="text-emerald-500 font-bold uppercase tracking-widest text-xs">React Event Listeners</span>
15-
<span className="text-xl text-white">↓</span>
15+
<span className="text-xl text-current">↓</span>
1616
<span className="text-blue-400 font-bold uppercase tracking-widest text-xs">Interactive App (Hydrated)</span>
1717
</div>
1818
</div>
1919

2020
<p>
21-
In the Fezcodex architecture, we use <code className="text-white">ReactDOM.hydrateRoot</code>. When the browser loads the pre-rendered HTML (from SSG), React checks the content and makes it interactive without throwing away the existing DOM nodes. This provides the fast visual load of a static site with the interactivity of a dynamic app.
21+
In the Fezcodex architecture, we use <code className="text-current">ReactDOM.hydrateRoot</code>. When the browser loads the pre-rendered HTML (from SSG), React checks the content and makes it interactive without throwing away the existing DOM nodes. This provides the fast visual load of a static site with the interactivity of a dynamic app.
2222
</p>
2323
</div>
2424
);

‎src/data/vocab/lingua-franca.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function LinguaFranca() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
A <strong className="text-white">Lingua Franca</strong> (literally "Frankish language") is a
7+
A <strong className="text-current">Lingua Franca</strong> (literally "Frankish language") is a
88
language or way of communicating which is used between people who do not
99
speak each other's native language.
1010
</p>
@@ -17,19 +17,19 @@ export default function LinguaFranca() {
1717
<h4 className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-4">Examples</h4>
1818
<ul className="space-y-3 text-xs">
1919
<li className="flex flex-col gap-1">
20-
<span className="text-white font-bold uppercase tracking-wide">English</span>
20+
<span className="text-current font-bold uppercase tracking-wide">English</span>
2121
<span className="text-gray-400">The global lingua franca of science, aviation, and the internet.</span>
2222
</li>
2323
<li className="flex flex-col gap-1">
24-
<span className="text-white font-bold uppercase tracking-wide">Latin</span>
24+
<span className="text-current font-bold uppercase tracking-wide">Latin</span>
2525
<span className="text-gray-400">The lingua franca of scholars and the Catholic Church in Europe for centuries.</span>
2626
</li>
2727
<li className="flex flex-col gap-1">
28-
<span className="text-white font-bold uppercase tracking-wide">Swahili</span>
28+
<span className="text-current font-bold uppercase tracking-wide">Swahili</span>
2929
<span className="text-gray-400">A major lingua franca in East Africa.</span>
3030
</li>
3131
<li className="flex flex-col gap-1">
32-
<span className="text-white font-bold uppercase tracking-wide">JavaScript</span>
32+
<span className="text-current font-bold uppercase tracking-wide">JavaScript</span>
3333
<span className="text-gray-400">Often called the lingua franca of the web.</span>
3434
</li>
3535
</ul>

‎src/data/vocab/modules-vs-includes.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,31 @@ export default function ModulesVsIncludes() {
44
return (
55
<div className="space-y-6 font-mono text-sm leading-relaxed">
66
<p>
7-
<strong className="text-white">Modules</strong> are independent units of code with explicit interfaces (exports/imports). When imported, the compiler loads a semantic representation of the code, ensuring encapsulation and faster builds.
7+
<strong className="text-current">Modules</strong> are independent units of code with explicit interfaces (exports/imports). When imported, the compiler loads a semantic representation of the code, ensuring encapsulation and faster builds.
88
</p>
99

1010
<div className="border-l-2 border-blue-500/50 pl-4 py-2 my-6">
1111
<h4 className="text-xs font-bold text-blue-400 uppercase tracking-widest mb-2">
1212
The C Approach (Includes)
1313
</h4>
1414
<p className="text-xs text-gray-400 mb-4 uppercase tracking-wide">
15-
C lacks modules and relies on the <strong className="text-white">Preprocessor</strong>.
15+
C lacks modules and relies on the <strong className="text-current">Preprocessor</strong>.
1616
</p>
1717
<ul className="space-y-3 text-xs text-gray-400">
1818
<li>
19-
<strong className="text-white block mb-1">Textual Copy-Paste</strong>
19+
<strong className="text-current block mb-1">Textual Copy-Paste</strong>
2020
<code className="text-pink-400">#include "header.h"</code> literally copies the file's text into your source file.
2121
</li>
2222
<li>
23-
<strong className="text-white block mb-1">Translation Unit</strong>
23+
<strong className="text-current block mb-1">Translation Unit</strong>
2424
The Source file + all copied Headers = one massive unit of code to be compiled.
2525
</li>
2626
<li>
27-
<strong className="text-white block mb-1">Object Files</strong>
27+
<strong className="text-current block mb-1">Object Files</strong>
2828
The compiler turns this unit into an Object File (`.o`).
2929
</li>
3030
<li>
31-
<strong className="text-white block mb-1">Linking</strong>
31+
<strong className="text-current block mb-1">Linking</strong>
3232
The Linker stitches these object files together to make the executable.
3333
</li>
3434
</ul>

0 commit comments

Comments
 (0)