Skip to content

Commit 22e69bb

Browse files
iblawaliblawal
committed
style(docs): standardize summary boxes using tailwind helpers
1 parent a02661d commit 22e69bb

7 files changed

Lines changed: 67 additions & 132 deletions

File tree

‎src/content/api/index.mdx‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,25 @@ contributors:
55
- tbroadley
66
---
77

8-
<div
9-
style={{
10-
padding: "1.5rem",
11-
backgroundColor: "#fff3e0",
12-
borderLeft: "6px solid #e65100",
13-
borderRadius: "8px",
14-
margin: "2rem 0",
15-
color: "#4e342e",
16-
fontSize: "0.95rem",
17-
}}
18-
>
19-
<h3 style={{ marginTop: 0, color: "#e65100" }}>API Reference Overview</h3>
20-
<p>
8+
<div className="my-8 p-6 bg-orange-50 border-l-8 border-orange-700 rounded-lg text-orange-950 text-sm leading-relaxed">
9+
<h3 className="mt-0 text-orange-700 text-xl font-bold">
10+
API Reference Overview
11+
</h3>
12+
<p className="mb-4">
2113
The webpack API provides a set of low-level interfaces to interact with the
2214
compiler. This is intended for advanced users and plugin/loader developers.
2315
</p>
24-
<ul style={{ marginBottom: 0 }}>
16+
<ul className="mb-0 list-disc list-inside space-y-2">
2517
<li>
26-
<strong>Compiler API:</strong> For external control over the webpack
18+
<span className="font-bold">Compiler API:</span> For external control over the webpack
2719
execution.
2820
</li>
2921
<li>
30-
<strong>Internal Hooks:</strong> Access the tapping system used by
22+
<span className="font-bold">Internal Hooks:</span> Access the tapping system used by
3123
plugins.
3224
</li>
3325
<li>
34-
<strong>Stability:</strong> Use these interfaces to build custom tooling
26+
<span className="font-bold">Stability:</span> Use these interfaces to build custom tooling
3527
on top of webpack.
3628
</li>
3729
</ul>

‎src/content/concepts/index.mdx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,46 +23,34 @@ contributors:
2323
- saishankar404
2424
---
2525

26-
<div
27-
style={{
28-
padding: "1.5rem",
29-
backgroundColor: "#f8f9fa",
30-
borderLeft: "6px solid #1d71b8",
31-
borderRadius: "8px",
32-
margin: "2rem 0",
33-
color: "#212529",
34-
fontSize: "0.95rem",
35-
lineHeight: "1.6",
36-
}}
37-
>
38-
<h3 style={{ marginTop: 0, color: "#1d71b8", fontSize: "1.25rem" }}>
26+
<div className="my-8 p-6 bg-blue-50 border-l-8 border-blue-600 rounded-lg text-slate-900 text-sm leading-relaxed">
27+
<h3 className="mt-0 text-blue-600 text-xl font-bold">
3928
Core Concepts Overview
4029
</h3>
41-
<p>
42-
At its core, <strong>webpack</strong> is a static module bundler for modern
30+
<p className="mb-4">
31+
At its core, <span className="font-bold">webpack</span> is a static module bundler for modern
4332
JavaScript applications. It processes your project and builds a dependency
4433
graph which maps every module your project needs.
4534
</p>
46-
<ul style={{ marginBottom: 0 }}>
35+
<ul className="mb-0 list-disc list-inside space-y-2">
4736
<li>
48-
<strong>Entry:</strong> Indicates which module webpack should use to begin
37+
<span className="font-bold">Entry:</span> Indicates which module webpack should use to begin
4938
building out its internal dependency graph.
5039
</li>
5140
<li>
52-
<strong>Output:</strong> Tells webpack where to emit the bundles it
41+
<span className="font-bold">Output:</span> Tells webpack where to emit the bundles it
5342
creates and how to name these files.
5443
</li>
5544
<li>
56-
<strong>Loaders:</strong> Allows webpack to process other types of files
45+
<span className="font-bold">Loaders:</span> Allows webpack to process other types of files
5746
and convert them into valid modules (e.g., CSS, Images, TypeScript).
5847
</li>
5948
<li>
60-
<strong>Plugins:</strong> Leverages a wide range of tasks like bundle
49+
<span className="font-bold">Plugins:</span> Leverages a wide range of tasks like bundle
6150
optimization, asset management, and environment variable injection.
6251
</li>
6352
</ul>
6453
</div>
65-
6654
At its core, **webpack** is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph](/concepts/dependency-graph/) from one or more _entry points_ and then combines every module your project needs into one or more _bundles_, which are static assets to serve your content from.
6755

6856
T> Learn more about JavaScript modules and webpack modules [here](/concepts/modules).

‎src/content/configuration/index.mdx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,39 +22,23 @@ contributors:
2222
- chenxsan
2323
---
2424

25-
<div
26-
style={{
27-
padding: "1.5rem",
28-
backgroundColor: "#f8f9fa",
29-
borderLeft: "6px solid #1d71b8",
30-
borderRadius: "8px",
31-
margin: "2rem 0",
32-
color: "#212529",
33-
fontSize: "0.95rem",
34-
lineHeight: "1.6",
35-
}}
36-
>
37-
<h3 style={{ marginTop: 0, color: "#1d71b8", fontSize: "1.25rem" }}>
25+
<div className="my-8 p-6 bg-amber-50 border-l-8 border-amber-600 rounded-lg text-amber-950 text-sm leading-relaxed">
26+
<h3 className="mt-0 text-amber-600 text-xl font-bold">
3827
Configuration Essentials
3928
</h3>
40-
<p>
41-
Webpack's flexibility comes from its <strong>configuration-driven</strong>{" "}
42-
nature. While it works out-of-the-box for simple projects, the configuration
29+
<p className="mb-4">
30+
Webpack's flexibility comes from its <span className="font-bold">configuration-driven</span> nature. While it works out-of-the-box for simple projects, the configuration
4331
file allows you to fine-tune how your assets are processed.
4432
</p>
45-
<ul style={{ marginBottom: 0 }}>
33+
<ul className="mb-0 list-disc list-inside space-y-2">
4634
<li>
47-
<strong>Structure:</strong> Typically defined in a{" "}
48-
<code>webpack.config.js</code> file using CommonJS or ES Modules.
35+
<span className="font-bold">Structure:</span> Typically defined in a <code>webpack.config.js</code> file using CommonJS or ES Modules.
4936
</li>
5037
<li>
51-
<strong>Environment:</strong> You can export configuration as an object, a
52-
function, or multiple configurations for different environments (Dev vs.
53-
Prod).
38+
<span className="font-bold">Environment:</span> You can export configuration as an object, a function, or multiple configurations for different environments (Dev vs. Prod).
5439
</li>
5540
<li>
56-
<strong>Extensibility:</strong> It acts as the central hub where you
57-
register your Loaders and Plugins.
41+
<span className="font-bold">Extensibility:</span> It acts as the central hub where you register your Loaders and Plugins.
5842
</li>
5943
</ul>
6044
</div>

‎src/content/guides/index.mdx‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,25 @@ contributors:
77
- benschac
88
---
99

10-
<div
11-
style={{
12-
padding: "1.5rem",
13-
backgroundColor: "#f1f8e9",
14-
borderLeft: "6px solid #388e3c",
15-
borderRadius: "8px",
16-
margin: "2rem 0",
17-
color: "#1b5e20",
18-
fontSize: "0.95rem",
19-
}}
20-
>
21-
<h3 style={{ marginTop: 0, color: "#388e3c" }}>Guide Roadmap</h3>
22-
<p>
10+
<div className="my-8 p-6 bg-green-50 border-l-8 border-green-700 rounded-lg text-green-900 text-sm leading-relaxed">
11+
<h3 className="mt-0 text-green-700 text-xl font-bold">
12+
Guide Roadmap
13+
</h3>
14+
<p className="mb-4">
2315
Whether you're a beginner or a pro, these guides provide step-by-step
2416
instructions for implementing specific features and solving common
2517
development hurdles.
2618
</p>
27-
<ul style={{ marginBottom: 0 }}>
19+
<ul className="mb-0 list-disc list-inside space-y-2">
2820
<li>
29-
<strong>Getting Started:</strong> Basic setup for your first bundle.
21+
<span className="font-bold">Getting Started:</span> Basic setup for your first bundle.
3022
</li>
3123
<li>
32-
<strong>Techniques:</strong> Advanced patterns like Code Splitting and
24+
<span className="font-bold">Techniques:</span> Advanced patterns like Code Splitting and
3325
HMR.
3426
</li>
3527
<li>
36-
<strong>Best Practices:</strong> Performance optimization and security.
28+
<span className="font-bold">Best Practices:</span> Performance optimization and security.
3729
</li>
3830
</ul>
3931
</div>

‎src/content/loaders/index.mdx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,23 @@ contributors:
1313
- chenxsan
1414
---
1515

16-
<div style={{
17-
padding: '1.5rem',
18-
backgroundColor: '#f8f9fa',
19-
borderLeft: '6px solid #1d71b8',
20-
borderRadius: '8px',
21-
margin: '2rem 0',
22-
color: '#212529',
23-
fontSize: '0.95rem',
24-
lineHeight: '1.6'
25-
}}>
26-
<h3 style={{ marginTop: 0, color: '#1d71b8', fontSize: '1.25rem' }}>Understanding Loaders</h3>
27-
<p>Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you <code>import</code> or "load" them.</p>
28-
<ul style={{ marginBottom: 0 }}>
29-
<li><strong>Transformation:</strong> Loaders can convert files from a different language (like TypeScript) to JavaScript.</li>
30-
<li><strong>Assets:</strong> They allow you to include resources like images or CSS directly in your JavaScript dependency graph.</li>
31-
<li><strong>Chaining:</strong> You can chain multiple loaders together (e.g., <code>sass-loader</code> -> <code>css-loader</code> -> <code>style-loader</code>).</li>
16+
<div className="my-8 p-6 bg-indigo-50 border-l-8 border-indigo-600 rounded-lg text-indigo-950 text-sm leading-relaxed">
17+
<h3 className="mt-0 text-indigo-600 text-xl font-bold">
18+
Understanding Loaders
19+
</h3>
20+
<p className="mb-4">
21+
Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you <code>import</code> or "load" them.
22+
</p>
23+
<ul className="mb-0 list-disc list-inside space-y-2">
24+
<li>
25+
<span className="font-bold">Transformation:</span> Loaders can convert files from a different language (like TypeScript) to JavaScript.
26+
</li>
27+
<li>
28+
<span className="font-bold">Assets:</span> They allow you to include resources like images or CSS directly in your JavaScript dependency graph.
29+
</li>
30+
<li>
31+
<span className="font-bold">Chaining:</span> You can chain multiple loaders together (e.g., <code>sass-loader</code> → <code>css-loader</code> → <code>style-loader</code>).
32+
</li>
3233
</ul>
3334
</div>
3435

‎src/content/migrate/index.mdx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,26 @@ contributors:
55
- EugeneHlushko
66
---
77

8-
<div
9-
style={{
10-
padding: "1.5rem",
11-
backgroundColor: "#fce4ec",
12-
borderLeft: "6px solid #c2185b",
13-
borderRadius: "8px",
14-
margin: "2rem 0",
15-
color: "#880e4f",
16-
fontSize: "0.95rem",
17-
lineHeight: "1.6",
18-
}}
19-
>
20-
<h3 style={{ marginTop: 0, color: "#c2185b", fontSize: "1.25rem" }}>
8+
<div className="my-8 p-6 bg-pink-50 border-l-8 border-pink-700 rounded-lg text-pink-950 text-sm leading-relaxed">
9+
<h3 className="mt-0 text-pink-700 text-xl font-bold">
2110
Migration Strategy
2211
</h3>
23-
<p>
12+
<p className="mb-4">
2413
Moving between major versions of webpack requires careful planning. This
2514
guide helps you navigate breaking changes and leverage performance
2615
improvements in the latest releases.
2716
</p>
28-
<ul style={{ marginBottom: 0 }}>
17+
<ul className="mb-0 list-disc list-inside space-y-2">
2918
<li>
30-
<strong>Version 5 Focus:</strong> Improved build performance through
19+
<span className="font-bold">Version 5 Focus:</span> Improved build performance through
3120
persistent caching and better tree shaking.
3221
</li>
3322
<li>
34-
<strong>Breaking Changes:</strong> Learn how to handle deprecated
23+
<span className="font-bold">Breaking Changes:</span> Learn how to handle deprecated
3524
configuration options and updated internal APIs.
3625
</li>
3726
<li>
38-
<strong>Validation:</strong> Use this guide as a checklist to ensure your
27+
<span className="font-bold">Validation:</span> Use this guide as a checklist to ensure your
3928
build remains stable during the transition.
4029
</li>
4130
</ul>

‎src/content/plugins/index.mdx‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,37 +14,26 @@ contributors:
1414
- chenxsan
1515
---
1616

17-
<div
18-
style={{
19-
padding: "1.5rem",
20-
backgroundColor: "#f8f9fa",
21-
borderLeft: "6px solid #1d71b8",
22-
borderRadius: "8px",
23-
margin: "2rem 0",
24-
color: "#212529",
25-
fontSize: "0.95rem",
26-
lineHeight: "1.6",
27-
}}
28-
>
29-
<h3 style={{ marginTop: 0, color: "#1d71b8", fontSize: "1.25rem" }}>
17+
<div className="my-8 p-6 bg-slate-50 border-l-8 border-blue-600 rounded-lg text-slate-900 text-sm leading-relaxed">
18+
<h3 className="mt-0 text-blue-600 text-xl font-bold">
3019
The Power of Plugins
3120
</h3>
32-
<p>
21+
<p className="mb-4">
3322
Plugins are the backbone of webpack. They serve the purpose of doing
34-
anything else that a <strong>loader</strong> cannot do. Webpack itself is
23+
anything else that a <span className="font-bold">loader</span> cannot do. Webpack itself is
3524
built on the same plugin system that you use in your configuration.
3625
</p>
37-
<ul style={{ marginBottom: 0 }}>
26+
<ul className="mb-0 list-disc list-inside space-y-2">
3827
<li>
39-
<strong>Extensibility:</strong> Plugins can hook into the entire
28+
<span className="font-bold">Extensibility:</span> Plugins can hook into the entire
4029
compilation lifecycle to perform complex tasks.
4130
</li>
4231
<li>
43-
<strong>Optimization:</strong> Use plugins for bundle minification, asset
32+
<span className="font-bold">Optimization:</span> Use plugins for bundle minification, asset
4433
management, and environment variable injection.
4534
</li>
4635
<li>
47-
<strong>Built-in vs Third-party:</strong> Webpack provides many internal
36+
<span className="font-bold">Built-in vs Third-party:</span> Webpack provides many internal
4837
plugins (like <code>DefinePlugin</code>), but the community offers
4938
thousands more for specialized needs.
5039
</li>

0 commit comments

Comments
 (0)